/* =====================================================================
   THEME — Light / Dark Mode
   Menggunakan CSS Variables
   ===================================================================== */

:root,
[data-theme="light"] {
    --bg-body:        #f5f7fa;
    --bg-sidebar:     #ffffff;
    --bg-topbar:      #ffffff;
    --bg-card:        #ffffff;
    --bg-hover:       #f1f4f9;
    --bg-input:       #ffffff;
    --bg-muted:       #f8f9fb;

    --text-primary:   #1f2937;
    --text-secondary: #5b6472;
    --text-muted:     #8b93a1;
    --text-inverse:   #ffffff;

    --border-color:   #e3e7ee;
    --border-strong:  #d3d9e3;

    --primary:        #0d6efd;
    --primary-soft:   rgba(13, 110, 253, .1);
    --success-soft:   rgba(25, 135, 84, .1);
    --info-soft:      rgba(13, 202, 240, .12);
    --warning-soft:   rgba(255, 193, 7, .15);
    --danger-soft:    rgba(220, 53, 69, .1);

    --shadow-sm:      0 1px 2px rgba(16, 24, 40, .05);
    --shadow:         0 2px 8px rgba(16, 24, 40, .07);
    --shadow-lg:      0 8px 24px rgba(16, 24, 40, .10);

    --sidebar-width:  260px;
    --topbar-height:  64px;
    --radius:         10px;
    --radius-sm:      8px;
}

[data-theme="dark"] {
    --bg-body:        #121418;
    --bg-sidebar:     #1a1d23;
    --bg-topbar:      #1a1d23;
    --bg-card:        #1e2229;
    --bg-hover:       #262b33;
    --bg-input:       #262b33;
    --bg-muted:       #23272f;

    --text-primary:   #e8eaed;
    --text-secondary: #a8b0bd;
    --text-muted:     #7a8290;
    --text-inverse:   #121418;

    --border-color:   #2e333c;
    --border-strong:  #3a4049;

    --primary:        #4d94ff;
    --primary-soft:   rgba(77, 148, 255, .15);
    --success-soft:   rgba(25, 135, 84, .2);
    --info-soft:      rgba(13, 202, 240, .18);
    --warning-soft:   rgba(255, 193, 7, .2);
    --danger-soft:    rgba(220, 53, 69, .2);

    --shadow-sm:      0 1px 2px rgba(0, 0, 0, .35);
    --shadow:         0 2px 8px rgba(0, 0, 0, .4);
    --shadow-lg:      0 8px 24px rgba(0, 0, 0, .5);
}

/* =====================================================================
   BASE
   ===================================================================== */

* {
    box-sizing: border-box;
}

html, body {
    height: 100%;
}

body {
    margin: 0;
    padding: 0;
    background-color: var(--bg-body);
    color: var(--text-primary);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 "Helvetica Neue", Arial, sans-serif;
    font-size: 14px;
    line-height: 1.55;
    transition: background-color .2s ease, color .2s ease;
    -webkit-font-smoothing: antialiased;
}

a {
    color: var(--primary);
    text-decoration: none;
}

a:hover {
    color: var(--primary);
    text-decoration: underline;
}

/* Scrollbar */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: var(--border-strong);
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* =====================================================================
   TEMA BERLAKU UNTUK KOMPONEN BOOTSTRAP
   ===================================================================== */

[data-theme] .card,
[data-theme] .app-card {
    background-color: var(--bg-card);
    border-color: var(--border-color);
    color: var(--text-primary);
}

[data-theme] .card-header,
[data-theme] .card-footer {
    background-color: transparent;
    border-color: var(--border-color);
}

[data-theme] .form-control,
[data-theme] .form-select,
[data-theme] .input-group-text {
    background-color: var(--bg-input);
    border-color: var(--border-color);
    color: var(--text-primary);
}

[data-theme] .form-control:focus,
[data-theme] .form-select:focus {
    background-color: var(--bg-input);
    color: var(--text-primary);
    border-color: var(--primary);
    box-shadow: 0 0 0 .2rem var(--primary-soft);
}

[data-theme] .form-control::placeholder {
    color: var(--text-muted);
}

[data-theme] .form-control:disabled,
[data-theme] .form-select:disabled,
[data-theme] .form-control[readonly] {
    background-color: var(--bg-muted);
    color: var(--text-muted);
}

[data-theme] .form-check-input {
    background-color: var(--bg-input);
    border-color: var(--border-strong);
}

[data-theme] .form-check-input:checked {
    background-color: var(--primary);
    border-color: var(--primary);
}

[data-theme] .table {
    color: var(--text-primary);
    border-color: var(--border-color);
}

[data-theme] .table > :not(caption) > * > * {
    background-color: transparent;
    border-bottom-color: var(--border-color);
    color: var(--text-primary);
}

[data-theme] .table thead th {
    background-color: var(--bg-muted);
    color: var(--text-secondary);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: .04em;
}

[data-theme] .table-hover > tbody > tr:hover > * {
    background-color: var(--bg-hover);
}

[data-theme] .dropdown-menu {
    background-color: var(--bg-card);
    border-color: var(--border-color);
    box-shadow: var(--shadow-lg);
}

[data-theme] .dropdown-item {
    color: var(--text-primary);
}

[data-theme] .dropdown-item:hover,
[data-theme] .dropdown-item:focus {
    background-color: var(--bg-hover);
    color: var(--text-primary);
}

[data-theme] .dropdown-divider {
    border-color: var(--border-color);
}

[data-theme] .modal-content {
    background-color: var(--bg-card);
    border-color: var(--border-color);
    color: var(--text-primary);
}

[data-theme] .modal-header,
[data-theme] .modal-footer {
    border-color: var(--border-color);
}

[data-theme] .btn-close {
    filter: var(--btn-close-filter, none);
}

[data-theme="dark"] .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

[data-theme] .alert {
    border-color: transparent;
}

[data-theme] .pagination .page-link {
    background-color: var(--bg-card);
    border-color: var(--border-color);
    color: var(--text-primary);
}

[data-theme] .pagination .page-link:hover {
    background-color: var(--bg-hover);
}

[data-theme] .pagination .page-item.active .page-link {
    background-color: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

[data-theme] .pagination .page-item.disabled .page-link {
    background-color: var(--bg-muted);
    color: var(--text-muted);
}

[data-theme] .nav-tabs {
    border-bottom-color: var(--border-color);
}

[data-theme] .nav-tabs .nav-link {
    color: var(--text-secondary);
}

[data-theme] .nav-tabs .nav-link.active {
    background-color: var(--bg-card);
    border-color: var(--border-color) var(--border-color) var(--bg-card);
    color: var(--text-primary);
}

[data-theme] .list-group-item {
    background-color: var(--bg-card);
    border-color: var(--border-color);
    color: var(--text-primary);
}

[data-theme] hr {
    border-color: var(--border-color);
    opacity: 1;
}

[data-theme] .text-muted {
    color: var(--text-muted) !important;
}

[data-theme] .border {
    border-color: var(--border-color) !important;
}

/* =====================================================================
   TOGGLE ICON TEMA
   ===================================================================== */

.theme-icon-dark,
.theme-icon-light {
    display: inline-block;
}

[data-theme="light"] .theme-icon-dark  { display: inline-block; }
[data-theme="light"] .theme-icon-light { display: none; }
[data-theme="dark"]  .theme-icon-dark  { display: none; }
[data-theme="dark"]  .theme-icon-light { display: inline-block; }

/* =====================================================================
   VARIASI BACKGROUND SOFT
   ===================================================================== */

.bg-primary-soft { background-color: var(--primary-soft) !important; color: var(--primary) !important; }
.bg-success-soft { background-color: var(--success-soft) !important; color: #198754 !important; }
.bg-info-soft    { background-color: var(--info-soft) !important;    color: #0dcaf0 !important; }
.bg-warning-soft { background-color: var(--warning-soft) !important; color: #cc9a06 !important; }
.bg-danger-soft  { background-color: var(--danger-soft) !important;  color: #dc3545 !important; }

/* =====================================================================
   TRANSISI TEMA
   ===================================================================== */

body,
.app-sidebar,
.app-topbar,
.app-card,
.card,
.form-control,
.form-select,
.table,
.dropdown-menu,
.modal-content {
    transition: background-color .2s ease,
                color .2s ease,
                border-color .2s ease;
}