/*==========================================================
CSS UMUM
Bagian ini digunakan oleh seluruh halaman website
==========================================================*/

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:Segoe UI,sans-serif;
}

body{
    background:#f5f5f5;
}


/*==========================================================
LAYOUT UTAMA
Untuk struktur halaman secara umum
==========================================================*/

.container{

    display:flex;

}


/*==========================================================
SIDEBAR / MENU
Bagian ini khusus untuk sidebar dan menu navigasi
==========================================================*/

.sidebar{

    width:250px;

    min-height:100vh;

    background:linear-gradient(180deg,#008cff);

    color:white;

    padding:20px;

}


/* LOGO SIDEBAR */

.logo{

    text-align:center;

    margin-bottom:30px;

}

.logo h2{

    font-size:20px;

    margin-bottom:10px;

}

.logo p{

    font-size:13px;

}


/* MENU */

.menu{

    margin-top:20px;

}

.menu a{

    display:block;

    text-decoration:none;

    color:white;

    background:rgba(255,255,255,.1);

    margin-bottom:12px;

    padding:14px;

    border-radius:10px;

    transition:.3s;

}


/* MENU SAAT MOUSE DIARAHKAN */

.menu a:hover{

    background:white;

    color:#008cff;

}


/*==========================================================
MAIN CONTENT
Bagian ini untuk area utama setelah sidebar
==========================================================*/

.main{

    flex:1;

    padding:25px;

}


/*==========================================================
HEADER DASHBOARD
Bagian ini untuk header/judul dashboard
==========================================================*/

.header{

    background:linear-gradient(90deg,#008cff);

    color:white;

    padding:25px;

    border-radius:15px;

    box-shadow:0 5px 15px rgba(0,0,0,.2);

}

.header h1{

    font-size:30px;

}

.header p{

    margin-top:5px;

}


/*==========================================================
CARD
Bagian ini untuk kotak/card pada dashboard dan halaman lain
==========================================================*/

.card{

    background:white;

    margin-top:25px;

    border-radius:15px;

    padding:25px;

    box-shadow:0 3px 10px rgba(0,0,0,.1);

}

.card h2{

    margin-bottom:20px;

}


/*==========================================================
AREA DASHBOARD
Bagian ini untuk area isi dashboard
==========================================================*/

.dashboard-area{

    width:100%;

    height:500px;

    border:3px dashed #ddd;

    border-radius:10px;

    display:flex;

    justify-content:center;

    align-items:center;

    color:#999;

    font-size:30px;

}


/*==========================================================
LOGIN
Semua CSS di bawah ini khusus untuk halaman LOGIN
==========================================================*/


/* BODY LOGIN */

.login-body{

    background:#ffffff;

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

}


/*==========================================================
LOGIN BOX
Kotak putih tempat form login
==========================================================*/

.login-box{

    width:350px;

    background:#ffffff;

    padding:60px 30px 35px 30px;

    border:1px solid #ddd;

    border-radius:5px;

    box-shadow:0 2px 8px rgba(0,0,0,.15);

}


/*==========================================================
LOGIN TITLE
Judul "Login Form"
==========================================================*/

.login-box h2{

    text-align:left;

    margin:0 0 28px 0;

    color:#111;

    font-size:36px;

    font-weight:600;

}


/*==========================================================
LOGIN LABEL
Label Username dan Password
==========================================================*/

.login-box label{

    display:block;

    margin:0 0 8px 0;

    font-size:25px;

    font-weight:400;

    color:#222;

}


/*==========================================================
LOGIN INPUT
Input Username dan Password
==========================================================*/

.login-box input{

    width:100%;

    height:53px;

    padding:10px;

    margin-bottom:20px;

    border:2px solid #aaa;

    border-radius:2px;

    outline:none;

    font-size:18px;

}


/* INPUT LOGIN SAAT DIKLIK */

.login-box input:focus{

    border:2px solid #777;

}


/*==========================================================
LOGIN BUTTON
Tombol Login
==========================================================*/

.login-box .btn-login{

    width:100%;

    height:57px;

    margin-top:2px;

    background:#008cff;

    color:white;

    border:none;

    border-radius:7px;

    cursor:pointer;

    font-size:20px;

    font-weight:300;

    transition:.3s;

}


/* LOGIN BUTTON HOVER */

.login-box .btn-login:hover{

    background:#008cff;

}


/*==========================================================
CANCEL BUTTON LOGIN
Tombol Cancel di bawah Login
==========================================================*/

.login-box .btn-cancel{

    display:block;

    text-align:center;

    margin-top:32px;

    color:#555;

    font-size:20px;

    text-decoration:none;

}


/* CANCEL HOVER */

.login-box .btn-cancel:hover{

    text-decoration:underline;

}


/*==========================================================
LOGIN ERROR / ALERT
Pesan "Username atau Password Salah!"
==========================================================*/

.login-box .alert{

    background:#ffdddd;

    color:#d00000;

    padding:12px;

    border-radius:4px;

    margin-bottom:20px;

    font-size:15px;

}


/*==========================================================
ALERT UMUM
Digunakan untuk pesan peringatan di halaman lain
==========================================================*/

.alert{

    background:#ffdddd;

    color:red;

    padding:12px;

    border-radius:8px;

    margin-bottom:15px;

}


/*==========================================================
TOMBOL TAMBAH
Untuk tombol seperti Tambah Data
==========================================================*/

.btn-tambah{

    background:#008cff;

    color:white;

    padding:12px 18px;

    text-decoration:none;

    border-radius:8px;

    display:inline-block;

}


/* TOMBOL TAMBAH HOVER */

.btn-tambah:hover{

    background:#008cff;

}


/*==========================================================
TABLE / TABEL
Untuk tabel data inventaris, kategori, dan data lainnya
==========================================================*/

.table{

    width:100%;

    border-collapse:collapse;

}


/* HEADER TABEL */

.table th{

    background:#008cff;

    color:white;

    padding:12px;

}


/* ISI TABEL */

.table td{

    padding:12px;

    border:1px solid #ddd;

    text-align:center;

}


/* WARNA BARIS TABEL SELANG-SELING */

.table tr:nth-child(even){

    background:#fafafa;

}


/* LINK DI DALAM TABEL */

.table a{

    text-decoration:none;

    color:#008cff;

    font-weight:bold;

}


/*==========================================================
FORM UMUM
Untuk form tambah/edit data selain LOGIN
==========================================================*/

label{

    display:block;

    margin-top:15px;

    margin-bottom:8px;

    font-weight:bold;

}


/*==========================================================
INPUT FORM UMUM
Input yang berada di dalam .card
==========================================================*/

.card input{

    width:100%;

    padding:12px;

    border:1px solid #ccc;

    border-radius:8px;

    outline:none;

}


/* INPUT FORM SAAT DIKLIK */

.card input:focus{

    border:1px solid #ff6f00;

}


/*==========================================================
BUTTON SIMPAN
Untuk tombol Simpan pada form
==========================================================*/

.btn-simpan{

    background:#008cff;

    color:white;

    border:none;

    padding:12px 20px;

    border-radius:8px;

    cursor:pointer;

    font-size:15px;

}


/* SIMPAN HOVER */

.btn-simpan:hover{

    background:#008cff;

}


/*==========================================================
BUTTON BATAL
Untuk tombol Batal pada form
==========================================================*/

.btn-batal{

    background:#888;

    color:white;

    padding:12px 20px;

    border-radius:8px;

    text-decoration:none;

    margin-left:10px;

}


/* BATAL HOVER */

.btn-batal:hover{

    background:#666;

}


/*==========================================================
DASHBOARD IMAGE
Bagian ini khusus untuk gambar pada dashboard
==========================================================*/

.dashboard-area{

    width:100%;

    height:650px;

    overflow:hidden;

    border-radius:15px;

}


/*==========================================================
GAMBAR DI DALAM DASHBOARD
Untuk mengatur ukuran dan posisi gambar dashboard
==========================================================*/

.dashboard-area img{

    width:100%;

    height:100%;

    object-fit:cover;

    border-radius:15px;

}