/* ============================================================
   PGK Admin — Main Stylesheet
   Dua tema: theme-a (Klasik) | theme-b (Modern flat)
   ============================================================ */

/* ── CSS Variables — Theme A (default) ─────────────────────── */
:root {
    --titlebar-bg:           #1e3a5f;
    --titlebar-text:         #ffffff;

    --menu-bg:               #ebe7e0;
    --menu-text:             #333333;
    --menu-hover-bg:         #1e3a5f;
    --menu-hover-text:       #ffffff;
    --menu-active-bg:        #1e3a5f;
    --menu-active-text:      #ffffff;
    --menu-border:           #b5b0a8;

    --toolbar-bg:            #e0dbd3;
    --toolbar-border:        #b5b0a8;
    --toolbar-btn-bg:        #f5f2ee;
    --toolbar-btn-border:    #a8a39c;
    --toolbar-btn-hover-bg:  #ffffff;
    --toolbar-sep:           #b5b0a8;

    --sidebar-bg:            #f5f2ee;
    --sidebar-border:        #b5b0a8;
    --sidebar-active-bg:     #dce8f5;
    --sidebar-active-border: #1e3a5f;
    --sidebar-active-text:   #1e3a5f;
    --sidebar-group-text:    #888888;
    --sidebar-item-text:     #333333;
    --sidebar-item-hover-bg: #e8e3da;

    --body-bg:               #d4cfc8;
    --content-bg:            #ffffff;
    --content-header-bg:     #f5f2ee;
    --content-header-border: #dddddd;

    --statusbar-bg:          #e0dbd3;
    --statusbar-border:      #b5b0a8;
    --statusbar-text:        #666666;

    --tbl-head-bg:           #f0ebe3;
    --tbl-title-bg:          #e8e3da;
    --tbl-border:            #cccccc;
    --tbl-row-border:        #eeeeee;
    --tbl-hover:             #f0f4fa;
    --tbl-selected:          #dce8f5;

    --accent:                #1e3a5f;
    --accent-light:          #dce8f5;

    --stat-border:           #dddddd;
    --stat-bg:               #f5f2ee;

    --scrollbar-track:       #e8e3da;
    --scrollbar-thumb:       #b5b0a8;

    --modal-overlay:         rgba(0,0,0,0.4);
    --modal-shadow:          0 4px 20px rgba(0,0,0,0.3);

    --transition:            background-color 0.18s ease, color 0.18s ease,
                             border-color 0.18s ease, box-shadow 0.18s ease;
}

/* ── CSS Variables — Theme B (Modern flat) ──────────────────── */
html.theme-b {
    --titlebar-bg:           #1565c0;
    --titlebar-text:         #ffffff;

    --menu-bg:               #1565c0;
    --menu-text:             rgba(255,255,255,0.82);
    --menu-hover-bg:         rgba(255,255,255,0.14);
    --menu-hover-text:       #ffffff;
    --menu-active-bg:        rgba(255,255,255,0.18);
    --menu-active-text:      #ffffff;
    --menu-border:           transparent;

    --toolbar-bg:            #ffffff;
    --toolbar-border:        #e4e4e4;
    --toolbar-btn-bg:        transparent;
    --toolbar-btn-border:    transparent;
    --toolbar-btn-hover-bg:  #f0f0f0;
    --toolbar-sep:           #e0e0e0;

    --sidebar-bg:            #ffffff;
    --sidebar-border:        #e8e8e8;
    --sidebar-active-bg:     #e3f2fd;
    --sidebar-active-border: #1565c0;
    --sidebar-active-text:   #1565c0;
    --sidebar-group-text:    #aaaaaa;
    --sidebar-item-text:     #444444;
    --sidebar-item-hover-bg: #f5f5f5;

    --body-bg:               #eef0f5;
    --content-bg:            #f5f7fa;
    --content-header-bg:     #ffffff;
    --content-header-border: #e8e8e8;

    --statusbar-bg:          #ffffff;
    --statusbar-border:      #e4e4e4;
    --statusbar-text:        #777777;

    --tbl-head-bg:           #f8f9fa;
    --tbl-title-bg:          #f0f2f5;
    --tbl-border:            #e4e4e4;
    --tbl-row-border:        #f0f0f0;
    --tbl-hover:             #f0f6ff;
    --tbl-selected:          #e3f2fd;

    --accent:                #1565c0;
    --accent-light:          #e3f2fd;

    --stat-border:           #e4e4e4;
    --stat-bg:               #ffffff;

    --scrollbar-track:       #f0f2f5;
    --scrollbar-thumb:       #cccccc;

    --modal-overlay:         rgba(0,0,0,0.35);
    --modal-shadow:          0 8px 32px rgba(0,0,0,0.18);
}

/* ── CSS Variables — Theme C (Odoo-style) ───────────────────── */
html.theme-c {
    --titlebar-bg:           #875A7B;
    --titlebar-text:         #ffffff;

    --menu-bg:               #ffffff;
    --menu-text:             #6c757d;
    --menu-hover-bg:         #f5eef3;
    --menu-hover-text:       #875A7B;
    --menu-active-bg:        #875A7B;
    --menu-active-text:      #ffffff;
    --menu-border:           #e2dde0;

    --toolbar-bg:            #ffffff;
    --toolbar-border:        #e2dde0;
    --toolbar-btn-bg:        #f8f5f7;
    --toolbar-btn-border:    #d8d0d5;
    --toolbar-btn-hover-bg:  #f0e8ed;
    --toolbar-sep:           #e2dde0;

    --sidebar-bg:            #ffffff;
    --sidebar-border:        #ece6ea;
    --sidebar-active-bg:     #f5eef3;
    --sidebar-active-border: #875A7B;
    --sidebar-active-text:   #875A7B;
    --sidebar-group-text:    #b0a0ab;
    --sidebar-item-text:     #4a4550;
    --sidebar-item-hover-bg: #f9f5f8;

    --body-bg:               #edeaec;
    --content-bg:            #ffffff;
    --content-header-bg:     #fdf9fc;
    --content-header-border: #ece6ea;

    --statusbar-bg:          #fdf9fc;
    --statusbar-border:      #e2dde0;
    --statusbar-text:        #888;

    --tbl-head-bg:           #fdf9fc;
    --tbl-title-bg:          #f8f3f6;
    --tbl-border:            #e2dde0;
    --tbl-row-border:        #f3eff2;
    --tbl-hover:             #fdf5fa;
    --tbl-selected:          #f5eef3;

    --accent:                #875A7B;
    --accent-light:          #f5eef3;

    --stat-border:           #e2dde0;
    --stat-bg:               #fdf9fc;

    --scrollbar-track:       #f3eff2;
    --scrollbar-thumb:       #ccc0c8;

    --modal-overlay:         rgba(50,20,40,0.3);
    --modal-shadow:          0 8px 32px rgba(135,90,123,0.18);

    --transition:            background-color 0.15s ease, color 0.15s ease,
                             border-color 0.15s ease, box-shadow 0.15s ease;
    --bg:                    #ffffff;
    --text:                  #4a4550;
}

/* Font Lato khusus theme-c */
html.theme-c,
html.theme-c input,
html.theme-c select,
html.theme-c textarea,
html.theme-c button {
    font-family: 'Lato', 'Open Sans', Roboto, -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Titlebar theme-c: border bawah tipis */
html.theme-c #titlebar {
    border-bottom: 1px solid rgba(255,255,255,0.15);
    box-shadow: 0 2px 8px rgba(135,90,123,0.18);
}

/* Menubar theme-c: border bawah, tab-style aktif */
html.theme-c #menubar {
    border-bottom: 2px solid #e2dde0;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}
html.theme-c .menu-item {
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    font-size: 13px;
    font-weight: 600;
    padding: 6px 18px;
}
html.theme-c .menu-item:hover  { border-bottom-color: #c9a8bc; background: #fdf8fb; }
html.theme-c .menu-item.active {
    background: transparent;
    color: #875A7B;
    border-bottom-color: #875A7B;
}

/* Toolbar theme-c */
html.theme-c #toolbar { box-shadow: 0 1px 3px rgba(0,0,0,0.05); }
html.theme-c .toolbar-btn { border-radius: 4px; font-weight: 600; }
html.theme-c .toolbar-btn:hover { border-color: #b899aa; }

/* Sidebar theme-c */
html.theme-c #sidebar { border-right: 1px solid #ece6ea; }
html.theme-c .sidebar-group-label { letter-spacing: 0.8px; }
html.theme-c .sidebar-item { border-left: 3px solid transparent; font-size: 12.5px; }
html.theme-c .sidebar-item.active { font-weight: 700; }

/* Content area theme-c */
html.theme-c #content         { background: #ffffff; }
html.theme-c .content-title   { letter-spacing: 0.2px; }
html.theme-c .table-wrapper   { box-shadow: 0 1px 5px rgba(135,90,123,0.07); border-radius: 6px; }
html.theme-c .table-title     { font-weight: 700; letter-spacing: 0.2px; }
html.theme-c thead th          { font-weight: 700; letter-spacing: 0.2px; }

/* Badge theme-c: rounded pill */
html.theme-c .badge { border-radius: 10px; padding: 2px 10px; font-size: 11px; }

/* Modal theme-c */
html.theme-c .modal        { border-radius: 8px; border-color: #e2dde0; }
html.theme-c .modal-header { border-radius: 7px 7px 0 0; }
html.theme-c .modal-footer { border-radius: 0 0 7px 7px; }

/* Stat card theme-c */
html.theme-c .stat-card { border-radius: 6px; box-shadow: 0 1px 5px rgba(135,90,123,0.07); }

/* ── Reset ──────────────────────────────────────────────────── */
* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 13px;
    background: var(--body-bg);
    color: #222;
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: var(--transition);
}

a { text-decoration: none; color: inherit; }

/* ── Title Bar ──────────────────────────────────────────────── */
#titlebar {
    background: var(--titlebar-bg);
    color: var(--titlebar-text);
    padding: 6px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    user-select: none;
    transition: var(--transition);
}

#titlebar .app-name {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.3px;
}

#titlebar .company-name {
    font-size: 12px;
    opacity: 0.72;
    margin-left: 4px;
}

#titlebar .user-info {
    margin-left: auto;
    font-size: 11px;
    opacity: 0.85;
    display: flex;
    align-items: center;
    gap: 8px;
}

#titlebar .logout-btn {
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.28);
    color: #fff;
    padding: 2px 10px;
    border-radius: 3px;
    cursor: pointer;
    font-size: 11px;
    font-family: inherit;
}
#titlebar .logout-btn:hover { background: rgba(255,255,255,0.25); }

/* Theme toggle button */
.theme-toggle {
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.25);
    color: #fff;
    width: 26px;
    height: 20px;
    border-radius: 3px;
    cursor: pointer;
    font-size: 10px;
    font-weight: 700;
    font-family: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    letter-spacing: 0.3px;
    transition: background 0.15s;
    title: 'Ganti tema';
}
.theme-toggle:hover { background: rgba(255,255,255,0.22); }

/* ── Menu Bar ───────────────────────────────────────────────── */
#menubar {
    background: var(--menu-bg);
    border-bottom: 1px solid var(--menu-border);
    display: flex;
    align-items: stretch;
    flex-shrink: 0;
    user-select: none;
    transition: var(--transition);
}

.menu-item {
    padding: 5px 16px;
    cursor: pointer;
    color: var(--menu-text);
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: var(--transition);
}
.menu-item:hover  { background: var(--menu-hover-bg);  color: var(--menu-hover-text); }
.menu-item.active { background: var(--menu-active-bg); color: var(--menu-active-text); }

/* Theme B: menu tab style */
html.theme-b .menu-item {
    border-bottom: 2px solid transparent;
    padding-bottom: 4px;
}
html.theme-b .menu-item:hover  { border-bottom-color: rgba(255,255,255,0.6); }
html.theme-b .menu-item.active { border-bottom-color: #fff; }

/* ── Toolbar ────────────────────────────────────────────────── */
#toolbar {
    background: var(--toolbar-bg);
    border-bottom: 1px solid var(--toolbar-border);
    padding: 4px 8px;
    display: flex;
    gap: 3px;
    align-items: center;
    flex-shrink: 0;
    transition: var(--transition);
}

html.theme-b #toolbar {
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

.toolbar-btn {
    background: var(--toolbar-btn-bg);
    border: 1px solid var(--toolbar-btn-border);
    border-radius: 3px;
    padding: 3px 12px;
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
    color: #333;
    font-family: inherit;
    transition: var(--transition);
}
.toolbar-btn:hover  { background: var(--toolbar-btn-hover-bg); border-color: #888; }
.toolbar-btn:active { background: #ddd; }
.toolbar-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
}

html.theme-b .toolbar-btn:hover { border-color: #ccc; }

.toolbar-sep     { width: 1px; height: 24px; background: var(--toolbar-sep); margin: 0 5px; }
.toolbar-spacer  { flex: 1; }

.toolbar-search { display: flex; align-items: center; gap: 4px; }
.toolbar-search input {
    border: 1px solid var(--toolbar-btn-border, #a8a39c);
    border-radius: 3px;
    padding: 3px 8px;
    font-size: 12px;
    font-family: inherit;
    width: 200px;
    background: #fff;
    transition: border-color 0.15s;
}
.toolbar-search input:focus { outline: none; border-color: var(--accent); }

html.theme-b .toolbar-search input { border-color: #e0e0e0; }

/* ── Main Area ──────────────────────────────────────────────── */
#main { display: flex; flex: 1; overflow: hidden; }

/* ── Content Panel (toolbar + content, kanan sidebar) ───────── */
#content-panel {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
}

/* ── Sidebar ────────────────────────────────────────────────── */
#sidebar {
    width: 170px;
    background: var(--sidebar-bg);
    border-right: 1px solid var(--sidebar-border);
    overflow-y: auto;
    flex-shrink: 0;
    padding: 6px 0;
    transition: var(--transition);
}

html.theme-b #sidebar { box-shadow: 1px 0 4px rgba(0,0,0,0.05); }

.sidebar-group-label {
    font-size: 10px;
    font-weight: 700;
    color: var(--sidebar-group-text);
    padding: 8px 12px 3px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

.sidebar-item {
    padding: 6px 12px 6px 16px;
    cursor: pointer;
    color: var(--sidebar-item-text);
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 7px;
    border-left: 3px solid transparent;
    transition: var(--transition);
}
.sidebar-item:hover { background: var(--sidebar-item-hover-bg); }
.sidebar-item.active {
    background: var(--sidebar-active-bg);
    border-left: 3px solid var(--sidebar-active-border);
    color: var(--sidebar-active-text);
    font-weight: 600;
}

/* ── Content Area ───────────────────────────────────────────── */
#content {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    background: var(--content-bg);
    transition: var(--transition);
}

.content-header {
    background: var(--content-header-bg);
    border-bottom: 1px solid var(--content-header-border);
    padding: 8px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: var(--transition);
}

html.theme-b .content-header { box-shadow: 0 1px 3px rgba(0,0,0,0.06); }

.content-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--accent);
    display: flex;
    align-items: center;
    gap: 8px;
}

.breadcrumb       { font-size: 11px; color: #888; margin-top: 1px; }
.breadcrumb span  { color: var(--accent); }

.content-body { padding: 14px 16px; }

/* ── Stat Cards ─────────────────────────────────────────────── */
.stat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 16px;
}

.stat-card {
    background: var(--stat-bg);
    border: 1px solid var(--stat-border);
    border-radius: 4px;
    padding: 12px 14px;
    border-top: 3px solid var(--accent);
    transition: var(--transition);
}

html.theme-b .stat-card { box-shadow: 0 1px 4px rgba(0,0,0,0.07); border-radius: 6px; }

.stat-card.green  { border-top-color: #1a7a40; }
.stat-card.orange { border-top-color: #c06000; }
.stat-card.red    { border-top-color: #a02020; }
.stat-card.blue   { border-top-color: var(--accent); }

.stat-label { font-size: 11px; color: #777; margin-bottom: 5px; }
.stat-value { font-size: 22px; font-weight: 700; color: #222; line-height: 1; }
.stat-sub   { font-size: 11px; color: #888; margin-top: 3px; }

/* ── Table ──────────────────────────────────────────────────── */
.table-wrapper {
    border: 1px solid var(--tbl-border);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 14px;
    transition: var(--transition);
}

html.theme-b .table-wrapper {
    box-shadow: 0 1px 4px rgba(0,0,0,0.07);
    border-radius: 6px;
}

.table-title {
    background: var(--tbl-title-bg);
    border-bottom: 1px solid var(--tbl-border);
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 600;
    color: #444;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: var(--transition);
}

table { width: 100%; border-collapse: collapse; font-size: 12px; }

thead th {
    background: var(--tbl-head-bg);
    padding: 6px 10px;
    text-align: left;
    font-weight: 600;
    color: #555;
    border-bottom: 1px solid var(--tbl-border);
    white-space: nowrap;
    transition: var(--transition);
}

tbody tr {
    border-bottom: 1px solid var(--tbl-row-border);
    cursor: default;
    user-select: none;
    transition: background-color 0.1s;
}
tbody tr:hover    { background: var(--tbl-hover); }
tbody tr.selected { background: var(--tbl-selected); }

tbody td { padding: 5px 10px; color: #333; }

tfoot td, tfoot th {
    padding: 6px 10px;
    background: var(--tbl-head-bg);
    border-top: 1px solid var(--tbl-border);
    font-weight: 700;
}

/* ── Sort kolom ─────────────────────────────────────────────── */
thead th.sortable {
    cursor: pointer;
    padding-right: 22px;
    position: relative;
    white-space: nowrap;
}
thead th.sortable:hover { filter: brightness(0.95); }
thead th.sortable::after {
    content: '\2195';
    position: absolute;
    right: 6px;
    opacity: 0.25;
    font-size: 9px;
}
thead th.sort-asc::after  { content: '\25B2'; opacity: 0.65; }
thead th.sort-desc::after { content: '\25BC'; opacity: 0.65; }

/* ── Badge ──────────────────────────────────────────────────── */
.badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 2px;
    font-size: 11px;
    font-weight: 600;
}

html.theme-b .badge { border-radius: 10px; }

.badge-green  { background: #d4f0e0; color: #1a7a40; }
.badge-orange { background: #fdebd0; color: #b05800; }
.badge-red    { background: #fde0e0; color: #a02020; }
.badge-gray   { background: #e8e3da; color: #555; }
.badge-blue   { background: var(--accent-light); color: var(--accent); }

/* ── Icon Button ────────────────────────────────────────────── */
.icon-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px;
    border: 1px solid currentColor; border-radius: 4px;
    background: transparent; cursor: pointer;
    font-size: 14px; font-weight: 700; line-height: 1;
    opacity: 0.8; transition: opacity .15s, background .15s;
    vertical-align: middle;
    position: relative;
}
.icon-btn:hover { opacity: 1; background: rgba(0,0,0,0.06); }

/* Tooltip via title — enhanced dengan pure CSS */
.icon-btn[title]:hover::after {
    content: attr(title);
    position: absolute; bottom: calc(100% + 6px); left: 50%;
    transform: translateX(-50%);
    background: #333; color: #fff;
    font-size: 11px; font-weight: 400;
    padding: 3px 8px; border-radius: 4px;
    white-space: nowrap; pointer-events: none;
    z-index: 999;
}
.icon-btn[title]:hover::before {
    content: '';
    position: absolute; bottom: calc(100% + 1px); left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent; border-top-color: #333;
    pointer-events: none; z-index: 999;
}

/* ── Form ───────────────────────────────────────────────────── */
.form-row   { display: flex; gap: 12px; margin-bottom: 10px; }
.form-group { display: flex; flex-direction: column; gap: 3px; flex: 1; }

.form-group label { font-size: 12px; color: #555; font-weight: 600; }

.form-group input,
.form-group select,
.form-group textarea {
    border: 1px solid var(--tbl-border);
    border-radius: 3px;
    padding: 4px 8px;
    font-size: 12px;
    font-family: inherit;
    background: #fff;
    color: #222;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(30,58,95,0.1);
}

html.theme-b .form-group input:focus,
html.theme-b .form-group select:focus,
html.theme-b .form-group textarea:focus {
    box-shadow: 0 0 0 3px rgba(21,101,192,0.12);
}

/* ── Buttons ────────────────────────────────────────────────── */
.btn {
    border: 1px solid var(--tbl-border);
    border-radius: 3px;
    padding: 5px 16px;
    font-size: 12px;
    cursor: pointer;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: var(--transition);
}

html.theme-b .btn { border-radius: 4px; }

.btn-primary   { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn-primary:hover { filter: brightness(1.1); }

.btn-secondary { background: var(--stat-bg); color: #333; }
.btn-secondary:hover { background: var(--tbl-head-bg); }

.btn-danger    { background: #a02020; color: #fff; border-color: #a02020; }
.btn-danger:hover { background: #8a1a1a; }

/* ── Form horizontal (label kiri, input kanan) ──────────────── */
.form-field {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    gap: 0;
}
.form-field label {
    width: 140px;
    min-width: 140px;
    text-align: left;
    padding-right: 10px;
    font-size: 12px;
    font-weight: 600;
    color: #555;
}
.form-field input,
.form-field select,
.form-field textarea {
    flex: 1;
    border: 1px solid var(--tbl-border);
    border-radius: 3px;
    padding: 4px 8px;
    font-size: 12px;
    font-family: inherit;
    background: #fff;
    color: #222;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(30,58,95,0.1);
}
.form-field input[type="number"] { max-width: 90px; flex: none; }
.form-field input[type="checkbox"] { width: 14px; height: 14px; flex: none; margin-right: 6px; }
.form-field .field-note { font-size: 11px; color: #888; margin-left: 6px; }

.form-section-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--accent);
    border-bottom: 1px solid var(--tbl-border);
    padding-bottom: 4px;
    margin-bottom: 8px;
}

/* ── Modal ──────────────────────────────────────────────────── */
.modal-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: var(--modal-overlay);
    z-index: 1000;
    align-items: center;
    justify-content: center;
}
.modal-backdrop.show { display: flex; }

.modal {
    background: #fff;
    border: 1px solid #888;
    border-radius: 4px;
    width: 500px;
    max-width: 90vw;
    box-shadow: var(--modal-shadow);
}

html.theme-b .modal { border-radius: 8px; border-color: #e0e0e0; }

.modal-header {
    background: var(--accent);
    color: #fff;
    padding: 8px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 3px 3px 0 0;
}
html.theme-b .modal-header { border-radius: 7px 7px 0 0; }

.modal-title { font-size: 13px; font-weight: 600; }
.modal-close { background: none; border: none; color: #fff; cursor: pointer; font-size: 18px; line-height: 1; opacity: 0.8; }
.modal-close:hover { opacity: 1; }

.modal-body   { padding: 16px; }
.modal-footer {
    padding: 10px 16px;
    border-top: 1px solid var(--tbl-border);
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    background: var(--stat-bg);
    border-radius: 0 0 3px 3px;
}
html.theme-b .modal-footer { border-radius: 0 0 7px 7px; }

/* ── Alert ──────────────────────────────────────────────────── */
.alert {
    padding: 8px 12px;
    border-radius: 3px;
    margin-bottom: 12px;
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.alert-success { background: #d4f0e0; color: #1a7a40; border: 1px solid #a8d8b8; }
.alert-danger  { background: #fde0e0; color: #a02020; border: 1px solid #f0a8a8; }
.alert-info    { background: var(--accent-light); color: var(--accent); border: 1px solid #a8c8e8; }

/* ── Status Bar ─────────────────────────────────────────────── */
#statusbar {
    background: var(--statusbar-bg);
    border-top: 1px solid var(--statusbar-border);
    padding: 3px 14px;
    font-size: 11px;
    color: var(--statusbar-text);
    display: flex;
    align-items: center;
    flex-shrink: 0;
    transition: var(--transition);
}

.statusbar-item {
    padding: 0 12px;
    border-right: 1px solid var(--statusbar-border);
}
.statusbar-item:first-child { padding-left: 0; }

/* ── Scrollbar ──────────────────────────────────────────────── */
::-webkit-scrollbar        { width: 8px; height: 8px; }
::-webkit-scrollbar-track  { background: var(--scrollbar-track); }
::-webkit-scrollbar-thumb  { background: var(--scrollbar-thumb); border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: #888; }

/* ── Utility ────────────────────────────────────────────────── */
.text-right   { text-align: right; }
.text-center  { text-align: center; }
.text-muted   { color: #888; }
.mt-8         { margin-top: 8px; }
.mt-12        { margin-top: 12px; }
.d-flex       { display: flex; }
.align-center { align-items: center; }
.gap-8        { gap: 8px; }

/* ── Loading bar ─────────────────────────────────────────────── */
#loading-bar {
    position: fixed;
    top: 0; left: 0;
    height: 3px;
    width: 0;
    background: var(--accent);
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
}
#loading-bar.loading {
    opacity: 1;
    animation: lbar-anim 2s ease-out forwards;
}
@keyframes lbar-anim {
    0%   { width: 0%; }
    20%  { width: 35%; }
    55%  { width: 68%; }
    85%  { width: 86%; }
    100% { width: 93%; }
}

/* ── Paginasi ─────────────────────────────────────────────────── */
.paginasi {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 8px 16px;
    border-top: 1px solid var(--tbl-border);
    background: var(--tbl-head-bg);
    flex-wrap: wrap;
}
.pg-info {
    font-size: 12px;
    color: var(--statusbar-text);
    margin-right: auto;
}
.pg-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 26px;
    padding: 0 7px;
    border: 1px solid var(--tbl-border);
    border-radius: 3px;
    font-size: 12px;
    color: var(--accent);
    text-decoration: none;
    background: var(--content-bg);
    cursor: pointer;
    transition: var(--transition);
    white-space: nowrap;
}
.pg-btn:hover:not(.pg-disabled):not(.pg-active) {
    background: var(--accent-light);
    border-color: var(--accent);
}
.pg-btn.pg-active {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
    font-weight: 700;
    cursor: default;
    pointer-events: none;
}
.pg-btn.pg-disabled {
    color: #bbb;
    cursor: default;
    background: var(--tbl-head-bg);
    pointer-events: none;
}
.pg-ellipsis {
    font-size: 12px;
    color: #aaa;
    padding: 0 2px;
    line-height: 26px;
}

/* ── Responsive ─────────────────────────────────────────────── */

/* Hamburger — tersembunyi di desktop */
#btn-hamburger {
    display: none;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.25);
    color: #fff;
    width: 32px; height: 28px;
    border-radius: 3px;
    cursor: pointer;
    font-size: 18px;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    line-height: 1;
    font-family: inherit;
}
#btn-hamburger:hover { background: rgba(255,255,255,0.22); }

/* Overlay gelap saat sidebar terbuka di mobile */
#sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.35);
    z-index: 899;
}
#sidebar-overlay.show { display: block; }

/* ── Mobile (≤768px) ──────────────────────────────────────── */
@media (max-width: 768px) {

    /* Body — scroll alami, bukan fixed viewport */
    body { height: auto; min-height: 100dvh; overflow: auto; }

    /* Titlebar — sticky di atas, tampilkan hamburger */
    #titlebar {
        position: sticky; top: 0; z-index: 850;
        padding: 6px 10px; gap: 8px;
    }
    #btn-hamburger { display: flex; }
    #titlebar .company-name { display: none; }

    /* Menubar — sticky tepat di bawah titlebar, geser horizontal */
    #menubar {
        position: sticky; top: 36px; z-index: 849;
        overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap;
    }
    #menubar::-webkit-scrollbar { display: none; }
    .menu-item { flex-shrink: 0; font-size: 12px; padding: 6px 12px; }

    /* Sidebar — drawer overlay dari kiri */
    #sidebar {
        position: fixed;
        top: 0; left: 0; bottom: 0;
        z-index: 900;
        width: 230px;
        transform: translateX(-100%);
        transition: transform 0.25s ease;
        box-shadow: 4px 0 24px rgba(0,0,0,0.22);
        padding-top: 12px;
    }
    #sidebar.sidebar-open { transform: translateX(0); }

    /* Main & content — biarkan scroll body yang bekerja */
    #main          { overflow: visible; }
    #content-panel { overflow: visible; }
    #content       { overflow: visible; min-height: 60vh; }

    /* Toolbar — bisa wrap */
    #toolbar { flex-wrap: wrap; gap: 5px; padding: 6px 8px; }
    .toolbar-spacer { display: none; }
    .toolbar-sep    { display: none; }
    .toolbar-search { order: 99; width: 100%; }
    .toolbar-search input { width: 100%; box-sizing: border-box; }

    /* Tabel — geser horizontal */
    .table-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 0; }
    table { min-width: 520px; }

    /* Modal — hampir penuh layar */
    .modal          { width: 96vw !important; max-width: 96vw !important; }
    .modal-body     { padding: 12px; max-height: 72vh; overflow-y: auto; }
    .modal-footer   { padding: 8px 12px; }

    /* Content body */
    .content-body   { padding: 10px; }
    .content-header { padding: 8px 10px; }

    /* Stat grid — 2 kolom */
    .stat-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }

    /* Form horizontal (fh-*) — stack vertikal di mobile */
    .fh-row { flex-direction: column; align-items: stretch; gap: 4px; }
    .fh-label { width: auto !important; min-width: 0 !important;
                text-align: left !important; padding-right: 0; margin-bottom: 1px; }
    .fh-ctrl  { max-width: none !important; }
    .fh-row-ta { align-items: stretch; }
    .fh-label-ta { padding-top: 0; }

    /* Form field lama juga stack */
    .form-field { flex-direction: column; align-items: stretch; gap: 3px; }
    .form-field label { width: auto !important; min-width: 0 !important; padding-right: 0; }
    .form-field input[type="number"] { max-width: none !important; }
    .form-row { flex-direction: column; }

    /* Filter bar */
    form[method="GET"] { flex-wrap: wrap; gap: 8px; }

    /* Statusbar — sembunyikan di mobile (hemat ruang) */
    #statusbar { display: none; }
}

/* ── Tablet (769px–1024px) ────────────────────────────────── */
@media (min-width: 769px) and (max-width: 1024px) {
    #sidebar { width: 150px; }
    .menu-item { font-size: 12px; padding: 5px 10px; }
    .toolbar-search input { width: 160px; }
    .stat-grid { grid-template-columns: repeat(2, 1fr); }
    .modal { max-width: 94vw; }
}