/* ==========================================================================
   GOOGLE DRIVE HARMONIOUS LIGHT THEME - LENGKAP & SERASI
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');

:root {
    --g-bg: #f8fafd;
    --g-card: #ffffff;
    --g-border: #e0e3e7;
    --g-text-main: #1f1f1f;
    --g-text-sub: #444746;
    --g-blue: #1a73e8;
    --g-blue-pill: #c2e7ff;
    --g-hover: #edf2fc;
}

/* 1. LATAR BELAKANG GLOBAL */
html, body, #app {
    background-color: var(--g-bg) !important;
    color: var(--g-text-main) !important;
    font-family: 'Roboto', sans-serif !important;
}

/* 2. SIDEBAR KIRI (Lebar Disesuaikan Agar Teks Tidak Terpotong) */
#nav, nav, aside {
    background-color: var(--g-bg) !important;
    border-right: 1px solid var(--g-border) !important;
    min-width: 220px !important;
}

#nav *, nav *, aside * {
    color: var(--g-text-main) !important;
    opacity: 1 !important;
}

#nav .action, nav .action {
    border-radius: 24px !important;
    margin: 3px 8px !important;
    padding: 10px 18px !important;
    white-space: nowrap !important; /* Mencegah tulisan terpotong */
}

#nav .action:hover, nav .action:hover {
    background-color: var(--g-hover) !important;
}
#nav .action:hover * {
    color: var(--g-blue) !important;
}

#nav .action.active, nav .action.active {
    background-color: var(--g-blue-pill) !important;
}
#nav .action.active * {
    color: #001d35 !important;
    font-weight: 600 !important;
}

/* 3. HEADER & JALUR FOLDER (BREADCRUMBS) - Bersih Putih */
header, .breadcrumbs, #breadcrumbs {
    background-color: #ffffff !important;
    border-bottom: 1px solid var(--g-border) !important;
    color: var(--g-text-main) !important;
}

.breadcrumbs *, #breadcrumbs * {
    background-color: transparent !important;
    color: var(--g-text-main) !important;
}

header button, header i, header a {
    color: var(--g-text-sub) !important;
}

/* 4. KOLOM PENCARIAN & POPUP PENCARIAN (Menghilangkan Warna Hitam) */
#search, header #search {
    background-color: #edf2fc !important;
    border-radius: 30px !important;
    border: none !important;
    padding: 2px 14px !important;
    max-width: 600px !important;
}

#search input {
    background: transparent !important;
    border: none !important;
    color: var(--g-text-main) !important;
}

#search input::placeholder {
    color: var(--g-text-sub) !important;
}

#search i, #search svg {
    color: var(--g-text-sub) !important;
    fill: var(--g-text-sub) !important;
}

/* Modal Popup Pencarian (Yang sebelumnya hitam pekat) */
#search.active,
#search .boxes,
#search .boxes *,
#search > div {
    background-color: #ffffff !important;
    color: var(--g-text-main) !important;
}

#search .boxes {
    border: 1px solid var(--g-border) !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12) !important;
    padding: 12px !important;
}

#search .boxes p, #search .boxes span, #search .boxes input {
    color: var(--g-text-main) !important;
    background-color: #f1f4f9 !important;
    border-radius: 8px !important;
}

/* 5. DAFTAR FILE & FOLDER (Card Putih Bersih) */
.item, .list-item {
    background-color: var(--g-card) !important;
    border: 1px solid var(--g-border) !important;
    border-radius: 12px !important;
    margin-bottom: 8px !important;
}

.item:hover, .list-item:hover {
    background-color: var(--g-hover) !important;
    border-color: #b0c4de !important;
    box-shadow: 0 2px 6px rgba(60, 64, 67, 0.1) !important;
}

.item *, .list-item * {
    color: var(--g-text-main) !important;
}

.list .header, .list .header * {
    color: var(--g-text-sub) !important;
    font-weight: 500 !important;
}

/* 6. TOMBOL & DIALOG */
.button, button.button {
    background-color: var(--g-blue) !important;
    border-radius: 20px !important;
    color: #ffffff !important;
    border: none !important;
    font-weight: 500 !important;
}

.card, .dropdown-menu {
    background-color: #ffffff !important;
    border: 1px solid var(--g-border) !important;
    border-radius: 16px !important;
    color: var(--g-text-main) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1) !important;
}

/* 7. HALAMAN LOGIN */
#login {
    background: #f8fafd !important;
}
#login form, #login .card {
    background-color: #ffffff !important;
    border-radius: 28px !important;
    border: 1px solid var(--g-border) !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08) !important;
    padding: 36px !important;
}
#login input[type="text"], #login input[type="password"] {
    background-color: #ffffff !important;
    border: 1px solid #747775 !important;
    border-radius: 8px !important;
    color: #1f1f1f !important;
}
#login button, #login input[type="submit"] {
    background-color: var(--g-blue) !important;
    border-radius: 24px !important;
    color: #ffffff !important;
}