:root {
    --forest: #12372A;
    --forest-dark: #0C2A1F;
    --forest-light: #1B4A38;
    --gold: #C5A85C;
    --gold-dark: #A98F47;
    --offwhite: #F7F6F0;
    --white: #FFFFFF;
}

body {
    background: var(--offwhite);
    color: #2C2C2C;
}

/* ---------- Bootstrap semantic overrides ---------- */
.text-primary { color: var(--forest) !important; }
.bg-primary { background-color: var(--forest) !important; }
.btn-primary {
    --bs-btn-bg: var(--forest);
    --bs-btn-border-color: var(--forest);
    --bs-btn-hover-bg: var(--forest-dark);
    --bs-btn-hover-border-color: var(--forest-dark);
    --bs-btn-active-bg: var(--forest-dark);
    --bs-btn-active-border-color: var(--forest-dark);
    --bs-btn-disabled-bg: var(--forest-light);
    --bs-btn-disabled-border-color: var(--forest-light);
    color: #fff;
}
.btn-outline-primary {
    --bs-btn-color: var(--forest);
    --bs-btn-border-color: var(--forest);
    --bs-btn-hover-bg: var(--forest);
    --bs-btn-hover-border-color: var(--forest);
    --bs-btn-active-bg: var(--forest-dark);
    --bs-btn-active-border-color: var(--forest-dark);
    color: var(--forest);
}

/* ---------- Gold accent utilities ---------- */
.text-gold { color: var(--gold) !important; }
.bg-gold { background-color: var(--gold) !important; }
.btn-gold {
    --bs-btn-bg: var(--gold);
    --bs-btn-border-color: var(--gold);
    --bs-btn-hover-bg: var(--gold-dark);
    --bs-btn-hover-border-color: var(--gold-dark);
    --bs-btn-active-bg: var(--gold-dark);
    --bs-btn-active-border-color: var(--gold-dark);
    color: #fff;
}
.btn-outline-gold {
    --bs-btn-color: var(--gold-dark);
    --bs-btn-border-color: var(--gold);
    --bs-btn-hover-bg: var(--gold);
    --bs-btn-hover-border-color: var(--gold);
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--gold-dark);
    --bs-btn-active-border-color: var(--gold-dark);
    --bs-btn-active-color: #fff;
    color: var(--gold-dark);
}

/* Badges & status in gold */
.badge.bg-warning { background-color: var(--gold) !important; color: #fff; }
.badge.bg-gold { background-color: var(--gold) !important; color: #fff; }
.status-dot { color: var(--gold); }

/* ---------- Headings ---------- */
h1, h2, h3, h4, h5, h6 {
    color: var(--forest);
}
.page-title {
    color: var(--forest);
    font-weight: 700;
}

/* ---------- Cards / forms / tables ---------- */
.card {
    background: var(--white);
    border: none;
    box-shadow: 0 1px 3px rgba(18, 55, 42, .08);
    border-radius: .75rem;
}
.card-stat { border: none; border-radius: .75rem; box-shadow: 0 1px 3px rgba(18,55,42,.08); background: var(--white); }
.card-pad { border: none; border-radius: .75rem; box-shadow: 0 1px 3px rgba(18,55,42,.08); background: var(--white); }
.form-control, .form-select {
    border-color: #D8D5CB;
    background: var(--offwhite);
}
.form-control:focus, .form-select:focus {
    border-color: var(--gold);
    box-shadow: 0 0 0 .2rem rgba(197, 168, 92, .25);
}
.table { --bs-table-bg: transparent; }
.table-hover tbody tr:hover { background-color: rgba(197, 168, 92, .08); }

/* ---------- Sidebar (admin) ---------- */
.sidebar {
    min-height: 100vh;
    background: var(--forest);
    color: var(--offwhite);
}
.sidebar .brand {
    color: var(--offwhite);
    font-weight: 700;
    letter-spacing: .02em;
}
.sidebar .brand .bi { color: var(--gold); }
.sidebar .nav-link {
    color: rgba(247, 246, 240, .75);
    border-radius: .375rem;
}
.sidebar .nav-link:hover,
.sidebar .nav-link.active {
    background: var(--gold);
    color: var(--forest-dark);
    font-weight: 600;
}
.sidebar .nav-section {
    color: rgba(247, 246, 240, .55);
    text-transform: uppercase;
    font-size: .72rem;
    letter-spacing: .06em;
}

/* ---------- Topbar (admin) ---------- */
.topbar {
    background: var(--white);
    border-bottom: 3px solid var(--gold);
}
.topbar .user-name { color: var(--forest); font-weight: 600; }
.brand-logo {
    color: var(--forest);
    font-weight: 800;
}
.brand-logo .bi { color: var(--gold); }

/* ---------- Empty state ---------- */
.empty-state {
    background: var(--offwhite);
    color: #8A8575;
    border-radius: .75rem;
    border: 1px dashed var(--gold);
}

.min-w-0 { min-width: 0; }

/* ---------- Presensi camera ---------- */
#scanCanvas, #videoCam { width: 100%; max-width: 480px; border-radius: .5rem; }

/* ---------- Mobile (karyawan) ---------- */
.mobile-app {
    max-width: 520px;
    margin: 0 auto;
    min-height: 100vh;
    background: var(--offwhite);
    padding-bottom: 120px;
    box-shadow: 0 0 24px rgba(18, 55, 42, .12);
}
.mobile-header {
    background: var(--forest);
    color: var(--offwhite);
    position: sticky;
    top: 0;
    z-index: 1030;
    box-shadow: 0 2px 8px rgba(12, 42, 31, .3);
}
.mobile-header .brand {
    color: var(--offwhite);
    font-weight: 700;
}
.mobile-header .brand .bi { color: var(--gold); }
.mobile-header .logout-btn { color: rgba(247,246,240,.8); }
.mobile-header .logout-btn:hover { color: #fff; }
.mobile-nav {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 520px;
    background: var(--white);
    border-top: 1px solid #EAE7DD;
    z-index: 1030;
    box-shadow: 0 -2px 12px rgba(18, 55, 42, .12);
    display: flex;
    align-items: start;
    justify-content: space-around;
    padding-top: 12px;
    padding-bottom: 6px;
}
.mobile-nav .nav-item {
    flex: 1;
    text-align: center;
    color: #9A9484;
    font-size: .68rem;
    padding: .55rem 0 .4rem;
    text-decoration: none;
}
.mobile-nav .nav-item i {
    display: block;
    font-size: 1.25rem;
    color: #B9B3A2;
    margin-bottom: 2px;
}
.mobile-nav .nav-item.active { color: var(--forest); font-weight: 700; }
.mobile-nav .nav-item.active i { color: var(--gold); }
.mobile-nav .nav-fab {
    position: absolute;
    left: 50%;
    bottom: 62px;
    transform: translateX(-50%);
    width: 62px;
    height: 62px;
    border-radius: 50%;
    background: var(--forest);
    border: 3px solid var(--gold);
    box-shadow: 0 6px 16px rgba(18, 55, 42, .35);
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: .58rem;
    z-index: 1040;
    gap: 1px;
}
.mobile-nav .nav-fab i { font-size: 1.4rem; color: var(--gold); line-height: 1; }
.mobile-nav .nav-fab span { color: var(--offwhite); }
.mobile-nav .nav-fab:hover { background: var(--forest-dark); color: #fff; }
.mobile-nav .nav-fab.active { box-shadow: 0 6px 16px rgba(197, 168, 92, .5); }
.mobile-hero {
    background: linear-gradient(135deg, var(--forest) 0%, var(--forest-light) 100%);
    color: var(--offwhite);
    border-radius: 1rem;
}
.mobile-hero .name { color: #fff; }
.mobile-hero .meta { color: rgba(247,246,240,.85); }
.mobile-hero .gold { color: var(--gold); font-weight: 700; }
.mobile-stat { background: var(--white); border-radius: 1rem; box-shadow: 0 1px 4px rgba(18,55,42,.08); }
.mobile-card { background: var(--white); border-radius: 1rem; box-shadow: 0 1px 4px rgba(18,55,42,.08); }
.mobile-btn {
    background: var(--forest);
    color: #fff;
    border-radius: 1rem;
    font-weight: 700;
}
.mobile-btn:hover { background: var(--forest-dark); color: #fff; }
.mobile-btn-gold {
    background: var(--gold);
    color: var(--forest-dark);
    border-radius: 1rem;
    font-weight: 700;
}
.mobile-btn-gold:hover { background: var(--gold-dark); color: #fff; }

/* ---------- Riwayat Kerja tabs ---------- */
.nav-riwayat { border-bottom: 1px solid #e6e2d6; gap: .35rem; }
.nav-riwayat .nav-link {
    color: var(--forest);
    background: var(--offwhite);
    border: 1px solid #e6e2d6;
    border-radius: .5rem;
    font-size: .85rem;
    padding: .35rem .8rem;
}
.nav-riwayat .nav-link.active {
    background: var(--forest);
    color: #fff;
    border-color: var(--forest);
}
.nav-riwayat .nav-link:hover { border-color: var(--gold); }