/* ============================================================
   MyOneDeposit — light admin theme (Metronic-inspired, original CSS)
   Base colour: light blue. Built on free Bootstrap 5 + Inter font.
   No proprietary/third-party template code.
   ============================================================ */

:root {
    /* Light-blue palette */
    --mdt-primary: #3699ff;
    --mdt-primary-hover: #2384ee;
    --mdt-primary-active: #1b78d6;
    --mdt-primary-light: #e9f3ff;
    --mdt-secondary: #7e8299;
    --mdt-bg: #f5f8fa;
    --mdt-card: #ffffff;
    --mdt-text: #181c32;
    --mdt-muted: #a1a5b7;
    --mdt-border: #eff2f5;

    /* Bridge into Bootstrap's theming vars */
    --bs-primary: #3699ff;
    --bs-primary-rgb: 54, 153, 255;
    --bs-link-color: #3699ff;
    --bs-link-color-rgb: 54, 153, 255;
    --bs-link-hover-color: #2384ee;
    --bs-body-bg: #f5f8fa;
    --bs-body-color: #181c32;
    --bs-border-color: #eff2f5;
    --bs-body-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-family: var(--bs-body-font-family);
    background-color: var(--mdt-bg);
    color: var(--mdt-text);
    font-size: .95rem;
    letter-spacing: -0.1px;
}

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

.text-mdt { color: var(--mdt-primary) !important; }
.bg-mdt { background-color: var(--mdt-primary) !important; }

/* ---------- Buttons ---------- */
.btn {
    --bs-btn-font-weight: 500;
    border-radius: .65rem;
    padding: .6rem 1.1rem;
}
.btn-sm { border-radius: .55rem; padding: .4rem .8rem; }
.btn-lg { border-radius: .75rem; }

.btn-primary {
    --bs-btn-bg: var(--mdt-primary);
    --bs-btn-border-color: var(--mdt-primary);
    --bs-btn-hover-bg: var(--mdt-primary-hover);
    --bs-btn-hover-border-color: var(--mdt-primary-hover);
    --bs-btn-active-bg: var(--mdt-primary-active);
    --bs-btn-active-border-color: var(--mdt-primary-active);
    --bs-btn-disabled-bg: var(--mdt-primary);
    --bs-btn-disabled-border-color: var(--mdt-primary);
}
.btn-outline-primary {
    --bs-btn-color: var(--mdt-primary);
    --bs-btn-border-color: var(--mdt-primary);
    --bs-btn-hover-bg: var(--mdt-primary);
    --bs-btn-hover-border-color: var(--mdt-primary);
    --bs-btn-active-bg: var(--mdt-primary);
}

/* ---------- Cards ---------- */
.card {
    border: 0;
    border-radius: .85rem;
    box-shadow: 0 0 25px 0 rgba(24, 28, 50, .06);
}
.card-header {
    background-color: var(--mdt-card);
    border-bottom: 1px solid var(--mdt-border);
    font-weight: 600;
    padding: 1rem 1.25rem;
    border-radius: .85rem .85rem 0 0 !important;
}
.shadow-sm { box-shadow: 0 0 25px 0 rgba(24, 28, 50, .06) !important; }

/* ---------- Forms ---------- */
.form-control, .form-select {
    background-color: #f5f8fa;
    border: 1px solid #e4e6ef;
    border-radius: .65rem;
    padding: .6rem .9rem;
    color: var(--mdt-text);
}
.form-control:focus, .form-select:focus {
    background-color: #fff;
    border-color: #b3d4fc;
    box-shadow: 0 0 0 .2rem rgba(54, 153, 255, .15);
}
.form-label { font-weight: 600; font-size: .9rem; color: #3f4254; }
.form-text { color: var(--mdt-muted); }
/* Match the addon (search icon) corner radius to inputs so the group rounds evenly. */
.input-group-text { border-radius: .65rem; }

/* ---------- Badges ---------- */
.badge { font-weight: 600; padding: .4em .65em; border-radius: .45rem; }

/* ---------- Public top navbar ---------- */
.mdt-navbar {
    background-color: #ffffff !important;
    box-shadow: 0 2px 16px rgba(24, 28, 50, .08);
    padding: 0;
    flex-direction: column; /* stack nav-row + tricolor strip */
}
.mdt-navbar > .container { padding-top: .6rem; padding-bottom: .6rem; }
/* Tricolor strip (blue | yellow | red) as ::after — stays sticky with navbar */
.mdt-navbar::after {
    content: '';
    display: block;
    width: 100%;
    height: 3px;
    flex-shrink: 0;
    background: linear-gradient(90deg, #00407A 33.33%, #FFD200 33.33% 66.66%, #C8102E 66.66%);
}

/* Brand */
.mdt-navbar .navbar-brand {
    display: flex;
    align-items: center;
    color: #181c32;
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: -.2px;
    gap: .5rem;
}
.mdt-navbar .navbar-brand:hover { color: var(--mdt-primary); }
.mdt-brand-icon {
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, #00407A 0%, #1976D2 100%);
    border-radius: .45rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: .95rem;
    flex-shrink: 0;
}

/* Brand logo image (navbar + sidebar) */
.brand-logo { height: 38px; width: auto; max-width: 200px; object-fit: contain; }

/* Nav links */
.mdt-navbar .nav-link {
    color: #3f4254;
    font-weight: 500;
    font-size: .9rem;
    padding: .4rem .75rem;
    border-radius: .5rem;
    transition: color .15s, background-color .15s;
}
.mdt-navbar .nav-link:hover { color: var(--mdt-primary); background-color: var(--mdt-primary-light); }
.mdt-navbar .nav-link.active { color: var(--mdt-primary); background-color: var(--mdt-primary-light); font-weight: 600; }

/* Login button */
.btn-mdt-login {
    background: #00407A;
    border: 1px solid #00407A;
    color: #fff;
    font-weight: 600;
    border-radius: .6rem;
    padding: .4rem 1.1rem;
    font-size: .875rem;
    text-decoration: none;
    transition: background .15s, border-color .15s, box-shadow .15s;
}
.btn-mdt-login:hover {
    background: #003165;
    border-color: #003165;
    color: #fff;
    box-shadow: 0 4px 12px rgba(0,65,122,.3);
}

/* Language button */
.mdt-navbar .btn-lang {
    border: 1px solid #e4e6ef;
    background: #f5f8fa;
    color: #3f4254;
    font-size: .8rem;
    font-weight: 600;
    border-radius: .5rem;
    padding: .35rem .8rem;
    transition: border-color .15s, background .15s;
}
.mdt-navbar .btn-lang:hover { border-color: var(--mdt-primary); color: var(--mdt-primary); background: var(--mdt-primary-light); }

.mdt-footer { background-color: #1e1e2d; }

/* ---------- Hero (public landing) ---------- */
.hero {
    background: linear-gradient(120deg, var(--mdt-primary), #5eb3f6);
    color: #fff;
    box-shadow: 0 10px 30px rgba(54, 153, 255, .25);
}

/* ---------- Apply step indicator ---------- */
.steps { display: flex; gap: .5rem; flex-wrap: wrap; }
.steps .step {
    flex: 1 1 0;
    min-width: 110px;
    text-align: center;
    padding: .6rem .4rem;
    border-radius: .65rem;
    background: #fff;
    border: 1px solid var(--mdt-border);
    color: var(--mdt-muted);
    font-size: .85rem;
    font-weight: 500;
}
.steps .step.active { background: var(--mdt-primary); border-color: var(--mdt-primary); color: #fff; }
.steps .step.done { background: var(--mdt-primary-light); border-color: var(--mdt-primary-light); color: var(--mdt-primary); }

/* ---------- Admin shell ---------- */
.admin-body { background-color: var(--mdt-bg); }
.admin-shell { display: flex; flex: 1; }
.admin-content { flex: 1; min-width: 0; }

/* Admin top navbar */
.admin-body .mdt-navbar { background-color: #fff !important; }
.admin-body .navbar-brand { color: var(--mdt-text); font-weight: 700; }
/* Fix container-fluid vertical padding (public uses .container, admin uses .container-fluid) */
.admin-body .mdt-navbar > .container-fluid { padding-top: .55rem; padding-bottom: .55rem; }

/* ---- Admin Dashboard ---- */
.db-greeting {
    background: linear-gradient(135deg, #00407A 0%, #1565C0 70%, #1976D2 100%);
    border-radius: 1.25rem; padding: 1.75rem 2rem;
    color: #fff; position: relative; overflow: hidden; margin-bottom: 1.5rem;
}
.db-greeting::before {
    content: ''; position: absolute; right: -3rem; top: -3rem;
    width: 220px; height: 220px; border-radius: 50%; background: rgba(255,255,255,.05);
    pointer-events: none;
}
.db-greeting::after {
    content: ''; position: absolute; right: 6rem; bottom: -5rem;
    width: 160px; height: 160px; border-radius: 50%; background: rgba(255,210,0,.07);
    pointer-events: none;
}
.db-greeting-role {
    display: inline-flex; align-items: center; gap: .35rem;
    background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.25);
    color: rgba(255,255,255,.9); font-size: .72rem; font-weight: 700;
    letter-spacing: .06em; text-transform: uppercase;
    padding: .25rem .8rem; border-radius: 2rem; margin-bottom: .65rem;
}
.db-greeting-name { font-size: 1.55rem; font-weight: 800; color: #fff; margin-bottom: .2rem; line-height: 1.2; }
.db-greeting-date { font-size: .8rem; color: rgba(255,255,255,.6); }
.db-greeting-btn {
    background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.28);
    color: #fff; font-size: .82rem; font-weight: 600; border-radius: .65rem;
    padding: .4rem 1rem; text-decoration: none; transition: background .15s;
    display: inline-flex; align-items: center; gap: .4rem;
}
.db-greeting-btn:hover { background: rgba(255,255,255,.25); color: #fff; }
.db-greeting-btn.yellow { background: #FFD200; border-color: #FFD200; color: #00407A; }
.db-greeting-btn.yellow:hover { background: #efc300; color: #00407A; }

/* KPI Cards */
.db-kpi {
    border-radius: 1rem !important; border: 0 !important;
    box-shadow: 0 2px 20px rgba(0,0,0,.06) !important;
    transition: transform .15s, box-shadow .15s; background: #fff;
}
.db-kpi:hover { transform: translateY(-3px); box-shadow: 0 8px 28px rgba(0,0,0,.1) !important; }
.db-kpi-icon {
    width: 2.8rem; height: 2.8rem; border-radius: .75rem;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.2rem; flex-shrink: 0;
}
.db-kpi-val  { font-size: 2rem; font-weight: 800; color: #181c32; line-height: 1; margin: .3rem 0 .15rem; }
.db-kpi-lbl  { font-size: .72rem; color: #7e8299; text-transform: uppercase; letter-spacing: .06em; }
.db-kpi-foot { font-size: .75rem; margin-top: .75rem; padding-top: .65rem; border-top: 1px solid #eff2f5; }
.db-kpi-foot a { color: #a1a5b7; text-decoration: none; transition: color .12s; }
.db-kpi-foot a:hover { color: var(--mdt-primary); }
.db-ic-blue   { background: #EBF4FD; color: #00407A; }
.db-ic-orange { background: #FFF3E0; color: #E65100; }
.db-ic-green  { background: #E8F5E9; color: #2E7D32; }
.db-ic-red    { background: #FDEAEA; color: #C8102E; }

/* Dashboard cards */
.db-card {
    border-radius: 1rem !important; border: 0 !important;
    box-shadow: 0 2px 20px rgba(0,0,0,.06) !important; background: #fff;
}
.db-card .card-header {
    background: #fff; border-bottom: 1px solid #eff2f5;
    border-radius: 1rem 1rem 0 0 !important;
    padding: 1rem 1.25rem 1.1rem; font-weight: 700;
}
/* A little breathing room under every chart title before its content */
.db-card .card-body { padding-top: 1.25rem; }

/* Recent apps */
.db-app-avatar {
    width: 2.2rem; height: 2.2rem; border-radius: .55rem;
    background: var(--mdt-primary-light); color: var(--mdt-primary);
    display: flex; align-items: center; justify-content: center;
    font-size: .8rem; font-weight: 800; flex-shrink: 0;
}
.db-ref-link { font-weight: 700; color: #00407A; font-size: .82rem; letter-spacing: .3px; text-decoration: none; }
.db-ref-link:hover { color: var(--mdt-primary); }

/* Quick actions */
.db-quick-link {
    display: flex; align-items: center; gap: .75rem;
    padding: .75rem .9rem; border-radius: .75rem;
    text-decoration: none; color: #3f4254; font-size: .875rem; font-weight: 500;
    border: 1px solid #eff2f5; background: #fff;
    transition: background .12s, border-color .12s, color .12s, transform .1s;
}
.db-quick-link:hover {
    background: var(--mdt-primary-light); border-color: var(--mdt-primary);
    color: var(--mdt-primary); transform: translateX(3px);
}
.db-quick-icon {
    width: 2rem; height: 2rem; border-radius: .5rem;
    display: flex; align-items: center; justify-content: center;
    font-size: .85rem; flex-shrink: 0;
}

/* ---- Admin Sub-page Headers ---- */
.pg-header {
    background: linear-gradient(135deg, #00407A 0%, #1565C0 100%);
    border-radius: 1.25rem; padding: 1.4rem 2rem;
    color: #fff; display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; overflow: hidden; position: relative;
}
.pg-header::before {
    content: ''; position: absolute; right: -2rem; top: -2rem;
    width: 180px; height: 180px; border-radius: 50%;
    background: rgba(255,255,255,.04); pointer-events: none;
}
.pg-header-icon {
    width: 2.8rem; height: 2.8rem; border-radius: .75rem;
    background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.22);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.25rem; color: #fff; flex-shrink: 0;
}
.pg-header-title { font-size: 1.25rem; font-weight: 800; color: #fff; margin-bottom: .1rem; line-height: 1.2; }
.pg-header-sub { font-size: .78rem; color: rgba(255,255,255,.6); }
.pg-header-inner { display: flex; align-items: center; gap: .9rem; position: relative; z-index: 1; }
.pg-header-actions { position: relative; z-index: 1; display: flex; gap: .5rem; flex-wrap: wrap; }
.pg-header-btn {
    background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.28);
    color: #fff; font-size: .82rem; font-weight: 600; border-radius: .65rem;
    padding: .42rem 1rem; text-decoration: none; transition: background .15s;
    display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap; cursor: pointer;
}
.pg-header-btn:hover { background: rgba(255,255,255,.25); color: #fff; }
.pg-header-btn.yellow { background: #FFD200; border-color: #FFD200; color: #00407A; }
.pg-header-btn.yellow:hover { background: #efc300; color: #00407A; }
.pg-header-btn.red { background: rgba(200,16,46,.75); border-color: rgba(200,16,46,.5); }
.pg-header-btn.red:hover { background: #C8102E; color: #fff; }

/* Page header stacks on small screens so action buttons aren't clipped */
@media (max-width: 575.98px) {
    .pg-header { flex-direction: column; align-items: flex-start; padding: 1.25rem 1.25rem; }
    .pg-header-actions { width: 100%; }
    .pg-header-actions > .pg-header-btn,
    .pg-header-actions > form { flex: 1 1 auto; justify-content: center; }
    .pg-header-title { font-size: 1.1rem; }
}

/* Status tab pills */
.pg-tab {
    padding: .38rem 1.05rem; border-radius: 2rem; font-size: .8rem; font-weight: 600;
    border: 1.5px solid #e4e6ef; color: #7e8299; text-decoration: none;
    transition: all .15s; background: #fff; display: inline-block;
}
.pg-tab:hover { border-color: var(--mdt-primary); color: var(--mdt-primary); background: var(--mdt-primary-light); }
.pg-tab.active { background: #00407A; border-color: #00407A; color: #fff; }

/* Filter bar */
.pg-filter {
    background: #fff; border-radius: 1rem; padding: 1rem 1.25rem;
    margin-bottom: 1.25rem; box-shadow: 0 2px 20px rgba(0,0,0,.06);
}
.pg-filter .input-group-text {
    background: #f5f8fa; border-color: #e4e6ef; border-right: 0; color: #a1a5b7;
}
.pg-filter .form-control.border-start-0 { border-left: 0; }

/* Application detail header */
.det-header {
    background: linear-gradient(135deg, #00407A 0%, #1565C0 100%);
    border-radius: 1.25rem; padding: 1.5rem 2rem; color: #fff;
    margin-bottom: 1.5rem; position: relative; overflow: hidden;
}
.det-header::before {
    content: ''; position: absolute; right: -2rem; top: -2rem;
    width: 180px; height: 180px; border-radius: 50%;
    background: rgba(255,255,255,.04); pointer-events: none;
}
.det-ref { font-size: 1.5rem; font-weight: 800; color: #fff; line-height: 1.2; margin-bottom: .35rem; position: relative; z-index: 1; }
.det-meta { font-size: .8rem; color: rgba(255,255,255,.65); position: relative; z-index: 1; }
.det-back {
    display: inline-flex; align-items: center; gap: .35rem;
    color: rgba(255,255,255,.75); font-size: .82rem; text-decoration: none;
    transition: color .15s; margin-bottom: .75rem; position: relative; z-index: 1;
}
.det-back:hover { color: #fff; }
.det-badge {
    display: inline-flex; align-items: center; gap: .35rem;
    background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.25);
    border-radius: 2rem; padding: .25rem .8rem; font-size: .75rem; font-weight: 700;
    position: relative; z-index: 1;
}

/* Reports KPI (matches dashboard db-kpi) */
.rp-kpi { border-radius: 1rem !important; border: 0 !important; box-shadow: 0 2px 20px rgba(0,0,0,.06) !important; transition: transform .15s; background: #fff; }
.rp-kpi:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(0,0,0,.10) !important; }
.rp-kpi-icon { width: 2.5rem; height: 2.5rem; border-radius: .7rem; display: flex; align-items: center; justify-content: center; font-size: 1rem; flex-shrink: 0; }
.rp-kpi-val { font-size: 1.5rem; font-weight: 800; color: #181c32; line-height: 1; margin: .25rem 0 .1rem; }
.rp-kpi-lbl { font-size: .7rem; color: #7e8299; text-transform: uppercase; letter-spacing: .06em; }

/* User role avatar colors */
.db-av-admin   { background: #FDEAEA; color: #C8102E; }
.db-av-osc     { background: #FFF3E0; color: #E65100; }
.db-av-officer { background: #EBF4FD; color: #00407A; }
.db-av-viewer  { background: #F3E8FF; color: #7239ea; }

/* Settings page */
.pg-settings-row { padding: 1rem 0; border-bottom: 1px solid #eff2f5; }
.pg-settings-row:last-child { border-bottom: 0; }

/* Sidebar (light) */
.admin-sidebar {
    background-color: #ffffff;
    width: 265px;
    border-right: 1px solid var(--mdt-border);
}
.admin-sidebar .offcanvas-title { color: var(--mdt-primary); font-weight: 700; }
.admin-sidebar .nav-link {
    color: #5e6278;
    font-weight: 500;
    padding: .75rem 1.25rem;
    margin: .15rem .75rem;
    border-radius: .65rem;
}
.admin-sidebar .nav-link i { color: #a1a5b7; }
.admin-sidebar .nav-link:hover { color: var(--mdt-primary); background-color: var(--mdt-primary-light); }
.admin-sidebar .nav-link:hover i { color: var(--mdt-primary); }
.admin-sidebar .nav-link.active { color: var(--mdt-primary); background-color: var(--mdt-primary-light); font-weight: 600; }
.admin-sidebar .nav-link.active i { color: var(--mdt-primary); }
.admin-sidebar .nav-section {
    margin: .25rem .75rem .35rem;
    padding: .35rem 0 .35rem 1.25rem;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #9aa0ad;
    pointer-events: none;
}
.admin-sidebar .nav-section:not(:first-child) {
    margin-top: .85rem;
    padding-top: .95rem;
    border-top: 1px solid var(--mdt-border);
}
.admin-sidebar .nav-section:first-child { margin-top: .6rem; }

/* Category picker chips (department modal) */
.cat-pick {
    display: flex;
    align-items: center;
    gap: .55rem;
    border: 1.5px solid var(--mdt-border);
    border-radius: .55rem;
    padding: .5rem .7rem;
    margin: 0;
    cursor: pointer;
    transition: .12s;
    font-size: .88rem;
    height: 100%;
}
.cat-pick:hover { border-color: var(--mdt-primary); background: #f7fafe; }
.cat-pick.selected { border-color: var(--mdt-primary); background: var(--mdt-primary-light); }
.cat-pick .form-check-input { flex: 0 0 auto; }

/* Code chip shown above a name in list tables (keeps names left-aligned) */
.code-chip {
    display: inline-block;
    background: #EBF4FD;
    color: #00407A;
    border-radius: .4rem;
    padding: .12rem .5rem;
    font-size: .68rem;
    font-weight: 800;
    font-family: monospace;
    letter-spacing: .5px;
}

/* Read-only view modal */
.vw-card { border-radius: .85rem; overflow: hidden; }   /* match .card radius */
.vw-hero {
    display: flex;
    align-items: center;
    gap: .9rem;
    padding: 1.25rem 2.75rem 1.1rem 1.25rem; /* right pad clears the × button */
    background: linear-gradient(135deg, var(--mdt-primary-light), #fff);
    border-bottom: 1px solid var(--mdt-border);
}
.vw-hero-icon {
    width: 3rem; height: 3rem; flex: 0 0 auto;
    border-radius: .8rem;
    background: var(--mdt-primary);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.35rem;
    box-shadow: 0 6px 16px rgba(54,153,255,.30);
}
.vw-hero-title { font-size: 1.05rem; font-weight: 800; line-height: 1.2; color: var(--mdt-text); }
.vw-hero-sub { font-size: .8rem; color: var(--mdt-muted); }
.vw-hero-code {
    display: inline-block; margin-top: .4rem;
    font-family: monospace; font-weight: 800; font-size: .7rem; letter-spacing: .5px;
    background: #fff; color: var(--mdt-primary);
    border: 1px solid var(--mdt-border); border-radius: .45rem; padding: .2rem .55rem;
}
.vw-list { padding: .5rem 1.25rem 1.25rem; }
.vw-row {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: .7rem 0; border-bottom: 1px solid var(--mdt-border);
}
.vw-row:last-child { border-bottom: 0; }
.vw-label { color: var(--mdt-muted); font-size: .82rem; display: flex; align-items: center; gap: .55rem; }
.vw-label i { color: #b5b9c5; font-size: .95rem; }
.vw-val { font-weight: 600; font-size: .9rem; text-align: right; color: var(--mdt-text); }
.vw-chips { display: flex; flex-wrap: wrap; gap: .35rem; justify-content: flex-end; }

@media (min-width: 992px) {
    /* Scroll internally when the nav is taller than the viewport, else the bottom
       items get clipped and become unreachable. */
    .admin-sidebar { position: sticky; top: 60px; height: calc(100vh - 60px); overflow-y: auto; overflow-x: hidden; }
}

/* Keep the sidebar scrollbar discreet: hidden by default, a faint thin track on hover. */
.admin-sidebar { scrollbar-width: thin; scrollbar-color: transparent transparent; }
.admin-sidebar:hover { scrollbar-color: #d1d3e0 transparent; }
.admin-sidebar::-webkit-scrollbar { width: 6px; }
.admin-sidebar::-webkit-scrollbar-track { background: transparent; }
.admin-sidebar::-webkit-scrollbar-thumb { background: transparent; border-radius: 3px; }
.admin-sidebar:hover::-webkit-scrollbar-thumb { background: #d1d3e0; }

/* ---------- Stat cards ---------- */
.stat-card { border-left: 4px solid var(--mdt-primary); border-radius: .85rem; }
.stat-card .stat-value { font-size: 1.85rem; font-weight: 700; color: var(--mdt-text); }

/* ---------- Tables ---------- */
.table { --bs-table-color: var(--mdt-text); }
.table > thead th {
    background-color: #fcfcfd;
    color: #7e8299;
    text-transform: uppercase;
    font-size: .78rem;
    letter-spacing: .5px;
    border-bottom: 1px solid var(--mdt-border);
}
.table > tbody td { border-color: var(--mdt-border); vertical-align: middle; }
.table-hover > tbody > tr:hover > * { --bs-table-hover-bg: var(--mdt-primary-light); }

/* ---------- Timeline ---------- */
.timeline { list-style: none; padding-left: 1rem; border-left: 2px solid var(--mdt-border); }
.timeline li { position: relative; padding: 0 0 1rem 1rem; }
.timeline li::before {
    content: ''; position: absolute; left: -1.45rem; top: .25rem;
    width: .8rem; height: .8rem; border-radius: 50%;
    background: var(--mdt-primary); box-shadow: 0 0 0 3px var(--mdt-primary-light);
}

/* ---------- Status timeline (admin detail + public tracking) ---------- */
.st-timeline { list-style: none; margin: 0; padding: 0; }
.st-item { position: relative; display: flex; gap: .85rem; padding-bottom: 1.15rem; }
.st-item:last-child { padding-bottom: 0; }
.st-item:not(:last-child)::before {
    content: ''; position: absolute; left: .84rem; top: 1.95rem; bottom: -.15rem;
    width: 2.5px; background: #c7cdd6;
}
.st-dot {
    width: 1.75rem; height: 1.75rem; border-radius: 50%; flex-shrink: 0; z-index: 1;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: .72rem; box-shadow: 0 0 0 3px #fff;
}
.st-content { flex: 1; min-width: 0; padding-top: .05rem; }
.st-head { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.st-time { font-size: .75rem; color: var(--mdt-muted); }
.st-meta { font-size: .76rem; color: var(--mdt-muted); margin-top: .15rem; }
.st-meta i { margin-right: .2rem; }
.st-remark {
    margin-top: .45rem; font-size: .82rem; color: #3f4254;
    background: #f7f9fc; border: 1px solid var(--mdt-border);
    border-radius: .55rem; padding: .45rem .65rem;
}

/* ---------- DataTables (Bootstrap 5) ---------- */
.dt-container .dt-search input,
.dt-container .dt-length select {
    border: 1px solid #e4e6ef;
    border-radius: .55rem;
    background-color: #f5f8fa;
    padding: .4rem .7rem;
}
.dt-container .dt-search input:focus,
.dt-container .dt-length select:focus {
    border-color: #b3d4fc;
    box-shadow: 0 0 0 .2rem rgba(54, 153, 255, .15);
    background-color: #fff;
    outline: 0;
}
.dt-container { padding: .5rem .25rem; }
.dt-container .dt-paging .dt-paging-button.current {
    background: var(--mdt-primary) !important;
    border-color: var(--mdt-primary) !important;
    color: #fff !important;
    border-radius: .5rem;
}
.dt-container .dt-paging .dt-paging-button {
    border-radius: .5rem;
}
.dt-container .dt-info { color: var(--mdt-muted); font-size: .85rem; }

/* ---------- Misc ---------- */
.dropdown-menu { border: 0; border-radius: .65rem; box-shadow: 0 10px 30px rgba(24, 28, 50, .12); }
.alert { border: 0; border-radius: .65rem; }
.list-group-item { border-color: var(--mdt-border); }

/* ============================================================
   APPLY & CHECK — inner-page hero + step indicator + timeline
   ============================================================ */

/* Page hero card (inside container) */
.ap-hero {
    background: linear-gradient(135deg, #00407A 0%, #1565C0 100%);
    border-radius: 1.25rem;
    padding: 1.75rem 2rem;
    color: #fff;
    position: relative;
    overflow: hidden;
    margin-bottom: 2rem;
}
.ap-hero::before {
    content: ''; position: absolute;
    right: -2rem; top: -2rem;
    width: 160px; height: 160px;
    border-radius: 50%; background: rgba(255,255,255,.06);
    pointer-events: none;
}
.ap-hero::after {
    content: ''; position: absolute;
    right: 2rem; bottom: -3.5rem;
    width: 120px; height: 120px;
    border-radius: 50%; background: rgba(255,210,0,.09);
    pointer-events: none;
}
.ap-hero-check {
    background: linear-gradient(135deg, #8B5E00 0%, #C8920A 60%, #FFB300 100%);
}
.ap-hero-icon {
    width: 3.2rem; height: 3.2rem;
    border-radius: .85rem;
    background: rgba(255,255,255,.18);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem; flex-shrink: 0;
    position: relative; z-index: 1;
}
.ap-hero-eyebrow {
    font-size: .72rem; font-weight: 600;
    letter-spacing: .07em; text-transform: uppercase;
    opacity: .7; margin-bottom: .25rem;
    position: relative; z-index: 1;
}
.ap-hero-title { font-size: 1.3rem; font-weight: 800; margin-bottom: .2rem; position: relative; z-index: 1; }
.ap-hero-sub   { font-size: .85rem; opacity: .8; margin: 0; position: relative; z-index: 1; }
.ap-hero-check .ap-hero-eyebrow { color: rgba(255,255,255,.75); }
.ap-hero-check .ap-hero-title  { color: #fff; }
.ap-hero-check .ap-hero-sub    { color: rgba(255,255,255,.82); }
.ap-hero-check .ap-hero-icon   { background: rgba(255,255,255,.18); color: #fff; }

/* Step indicator */
.ap-steps { display: flex; align-items: flex-start; }
/* Equal-width steps; connector drawn between dot centres via ::before */
.ap-step { flex: 1 1 0; min-width: 0; position: relative; display: flex; flex-direction: column; align-items: center; }
.ap-step:not(:first-child)::before {
    content: ''; position: absolute; z-index: 0; top: 1rem; left: -50%; right: 50%;
    height: 2px; background: #e4e6ef;
}
.ap-step.done::before, .ap-step.active::before { background: #2E7D32; }
.ap-step-dot {
    position: relative; z-index: 1;
    width: 2.1rem; height: 2.1rem; border-radius: 50%;
    background: #f0f1f5; color: #a1a5b7;
    display: flex; align-items: center; justify-content: center;
    font-size: .8rem; font-weight: 700;
    border: 2px solid #e4e6ef;
}
.ap-step.active .ap-step-dot {
    background: #00407A; border-color: #00407A; color: #fff;
    box-shadow: 0 0 0 4px rgba(0,64,122,.12);
}
.ap-step.done .ap-step-dot { background: #2E7D32; border-color: #2E7D32; color: #fff; }
.ap-step-lbl  { font-size: .7rem; color: #a1a5b7; margin-top: .4rem; text-align: center; max-width: 100%; line-height: 1.2; padding: 0 .25rem; }
.ap-step.active .ap-step-lbl { color: #00407A; font-weight: 700; }
.ap-step.done   .ap-step-lbl { color: #2E7D32; }

/* File upload zone */
.ap-file-zone {
    border: 2px dashed #e4e6ef;
    border-radius: .85rem;
    padding: 1.25rem 1rem;
    background: #f5f8fa;
    transition: border-color .15s, background .15s;
    cursor: pointer;
}
.ap-file-zone:focus-within,
.ap-file-zone:hover { border-color: #3699ff; background: #f0f7ff; }
.ap-file-zone input[type=file] { opacity: 0; position: absolute; width: 0; height: 0; }
.ap-file-zone .zone-icon { font-size: 1.75rem; color: #a1a5b7; }
.ap-file-zone.has-file { border-color: #2E7D32; background: #f1f9f1; }
.ap-file-zone.has-file .zone-icon { color: #2E7D32; }
.ap-file-zone.has-error { border-color: #dc3545; background: #fff5f5; }

/* Status timeline */
.ap-timeline { list-style: none; padding: 0; margin: 0; }
.ap-timeline li { display: flex; gap: 1rem; padding-bottom: 1.25rem; position: relative; }
.ap-timeline li:not(:last-child)::before {
    content: ''; position: absolute;
    left: .75rem; top: 1.7rem; width: 2px; bottom: 0;
    background: #eff2f5;
}
.ap-tl-dot {
    width: 1.5rem; height: 1.5rem; border-radius: 50%;
    background: #3699ff; color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: .55rem; flex-shrink: 0;
    box-shadow: 0 0 0 3px #e9f3ff;
}
.ap-tl-dot.latest { background: #00407A; box-shadow: 0 0 0 4px rgba(0,64,122,.15); }

/* Result card (check page) */
.ap-result-card {
    border: 1px solid #eff2f5 !important; border-radius: .95rem !important;
    transition: box-shadow .15s, transform .15s;
}
.ap-result-card:hover { box-shadow: 0 6px 20px rgba(0,0,0,.08) !important; transform: translateY(-2px); }

/* ============================================================
   LANDING PAGE — Brand: Blue #00407A · Yellow #FFD200 · Red #C8102E
   ============================================================ */

/* Hero */
.lp-hero {
    position: relative;
    min-height: 520px;
    background: url('../img/banner_tampin.jpg') center/cover no-repeat;
    display: flex;
    align-items: center;
}
.lp-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, rgba(0,40,90,.93) 0%, rgba(0,40,90,.78) 48%, rgba(0,0,0,.28) 100%);
}
.lp-hero-content { position: relative; z-index: 1; padding: 4.5rem 0; }
@media (max-width: 767px) {
    .lp-hero { min-height: 420px; }
    .lp-hero-content { padding: 3rem 0; }
    .lp-hero-overlay { background: rgba(0,40,90,.87); }
}

.lp-text-yellow { color: #FFD200; }
.lp-text-red    { color: #C8102E; }
.lp-text-blue   { color: #00407A; }

.lp-council-badge {
    display: inline-flex;
    align-items: center;
    background: rgba(255,255,255,.14);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,.28);
    color: rgba(255,255,255,.92);
    font-size: .8rem;
    font-weight: 600;
    padding: .35rem .95rem;
    border-radius: 2rem;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.lp-hero-title { font-size: 2.75rem; font-weight: 800; line-height: 1.15; color: #fff; }
@media (max-width: 767px) { .lp-hero-title { font-size: 2rem; } }

.lp-btn-yellow {
    background: #FFD200;
    border-color: #FFD200;
    color: #00407A;
    font-weight: 700;
    padding: .75rem 1.8rem;
    border-radius: .75rem;
    transition: background .2s, transform .15s;
}
.lp-btn-yellow:hover { background: #efc300; border-color: #efc300; color: #00407A; transform: translateY(-2px); }

.lp-btn-ghost {
    border: 2px solid rgba(255,255,255,.55);
    color: #fff;
    background: transparent;
    font-weight: 600;
    padding: .75rem 1.8rem;
    border-radius: .75rem;
    transition: border-color .2s, background .2s, transform .15s;
}
.lp-btn-ghost:hover {
    background: rgba(255,255,255,.12);
    border-color: rgba(255,255,255,.85);
    color: #fff;
    transform: translateY(-2px);
}

/* Tricolor strip */
.lp-tricolor { display: flex; height: 7px; }
.lp-tricolor span { flex: 1; }
.lp-tricolor span:nth-child(1) { background: #00407A; }
.lp-tricolor span:nth-child(2) { background: #FFD200; }
.lp-tricolor span:nth-child(3) { background: #C8102E; }

/* Stats bar */
.lp-stats-bar { background: #fff; border-bottom: 1px solid #eff2f5; }
.lp-stat-item { text-align: center; padding: 1.4rem .75rem; }
.lp-stat-num { font-size: 1.85rem; font-weight: 800; color: #00407A; line-height: 1; }
.lp-stat-lbl { font-size: .75rem; color: #7e8299; text-transform: uppercase; letter-spacing: .06em; margin-top: .3rem; }
.lp-stat-divider { border-left: 1px solid #eff2f5; }
@media (max-width: 575px) { .lp-stat-divider { border-left: none; border-top: 1px solid #eff2f5; } }

/* Section layout */
.lp-section-bg-alt { background: #f5f8fa; }
.lp-section-title { font-size: 1.6rem; font-weight: 800; color: #00407A; }
.lp-section-sub { color: #7e8299; font-size: .95rem; margin-top: .35rem; }
.lp-section-eyebrow {
    display: inline-block;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #C8102E;
    margin-bottom: .4rem;
}

/* Action cards */
.lp-action-card {
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
    border-radius: 1.35rem;
    padding: 2rem 2.25rem;
    text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease;
    color: #fff;
    min-height: 170px;
}
.lp-action-card:hover { transform: translateY(-5px); color: #fff; }
.lp-action-apply {
    background: linear-gradient(135deg, #00407A 0%, #1976D2 100%);
    box-shadow: 0 10px 36px rgba(0,64,122,.28);
}
.lp-action-check {
    background: linear-gradient(135deg, #8B5E00 0%, #D4A017 50%, #FFB300 100%);
    box-shadow: 0 10px 36px rgba(212,160,23,.32);
    color: #1a1200;
}
.lp-action-check:hover { color: #1a1200; }
.lp-action-icon {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: .85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.65rem;
    flex-shrink: 0;
    background: rgba(255,255,255,.18);
}
.lp-action-title { font-size: 1.2rem; font-weight: 700; margin-bottom: .3rem; }
.lp-action-desc  { font-size: .875rem; opacity: .85; margin: 0; }
.lp-action-arr   { margin-top: auto; font-size: 1rem; opacity: .7; }

/* Step cards */
.lp-step-card {
    background: #fff;
    border-radius: 1rem;
    padding: 1.75rem 1.25rem;
    text-align: center;
    box-shadow: 0 2px 20px rgba(0,0,0,.06);
    height: 100%;
    position: relative;
}
.lp-step-num {
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 50%;
    background: #00407A;
    color: #fff;
    font-weight: 800;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto .9rem;
}
.lp-step-icon { font-size: 2rem; color: #3699ff; margin-bottom: .5rem; }
.lp-step-title { font-weight: 700; font-size: .95rem; color: #00407A; }
.lp-step-desc  { font-size: .83rem; color: #7e8299; margin-top: .4rem; margin-bottom: 0; }

/* Category cards */
.lp-cat-card {
    border-radius: .95rem !important;
    border: 1px solid #eff2f5 !important;
    transition: transform .15s, box-shadow .15s;
    background: #fff;
}
.lp-cat-card:hover { transform: translateY(-3px); box-shadow: 0 8px 28px rgba(0,0,0,.09) !important; }
.lp-cat-icon {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: .65rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    flex-shrink: 0;
}
/* 7 rotating icon color sets */
.lp-ic-1 { background: #EBF4FD; color: #00407A; }
.lp-ic-2 { background: #FFF8DC; color: #8B6914; }
.lp-ic-3 { background: #FDEAEA; color: #C8102E; }
.lp-ic-4 { background: #E0F7FA; color: #00838F; }
.lp-ic-5 { background: #E8F5E9; color: #2E7D32; }
.lp-ic-6 { background: #FFF3E0; color: #E65100; }
.lp-ic-7 { background: #EDE7F6; color: #512DA8; }

/* Feature (why us) */
.lp-feature-icon {
    width: 4rem;
    height: 4rem;
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    margin: 0 auto 1rem;
}
.lp-feat-blue   { background: #EBF4FD; color: #00407A; }
.lp-feat-yellow { background: #FFF8DC; color: #8B6914; }
.lp-feat-red    { background: #FDEAEA; color: #C8102E; }

/* CTA strip */
.lp-cta-strip {
    background: linear-gradient(135deg, #00407A 0%, #1565C0 60%, #0097A7 100%);
    position: relative;
    overflow: hidden;
}
.lp-cta-strip::before {
    content: '';
    position: absolute;
    top: -70%;
    right: -8%;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: rgba(255,255,255,.05);
}
.lp-cta-strip::after {
    content: '';
    position: absolute;
    bottom: -80%;
    left: -5%;
    width: 350px;
    height: 350px;
    border-radius: 50%;
    background: rgba(255,210,0,.07);
}

/* SweetAlert2 — match the app's rounded cards & buttons */
.swal2-popup { border-radius: .85rem; }
.swal2-styled.swal2-confirm,
.swal2-styled.swal2-cancel { border-radius: .65rem; }
/* Confirm button always uses the app primary (overrides inline confirmButtonColor). */
.swal2-styled.swal2-confirm { background-color: var(--mdt-primary) !important; }

/* Consistent modal corner radius across every modal (matches .card = .85rem).
   Setting the Bootstrap var keeps header/body/footer inner corners aligned. */
.modal-content { --bs-modal-border-radius: .85rem; border-radius: .85rem; }

/* Modal footers — centered, evenly-sized, consistent buttons across all modals */
.modal-footer { justify-content: center; gap: .5rem; }
.modal-footer > .btn { min-width: 8.5rem; margin: 0; }

/* Page-header action row: keep the filter/print buttons and date inputs the same height */
.pg-header-btn { min-height: 36px; }
.pg-header-actions .form-control-sm { height: 36px; }

/* ════════════════════════ PRINT ════════════════════════ */
@media print {
    /* Hide app chrome — only the page content should print */
    .mdt-navbar,
    .admin-sidebar,
    .pg-header-actions,
    .offcanvas-backdrop { display: none !important; }

    /* The sidebar is a flex item; collapse the shell so content isn't pushed to the right */
    .admin-shell { display: block !important; }
    .admin-content { flex: none !important; width: 100% !important; }
    .admin-content > .container-fluid { padding: 0 !important; max-width: none !important; }
    body, .admin-body { background: #fff !important; }

    /* Header stays readable without relying on background colours printing */
    .pg-header {
        background: #fff !important; color: #00407A !important;
        border: 0; border-bottom: 2px solid #00407A; border-radius: 0;
        padding: 0 0 .5rem; margin-bottom: 1rem; overflow: visible;
    }
    .pg-header::before, .pg-header-icon { display: none !important; }
    .pg-header-title { color: #00407A !important; }
    .pg-header-sub { color: #555 !important; }

    /* Print pagination + flexbox + break-inside is buggy in Chrome (charts overlap),
       so drop the grid to normal block flow: each chart card stacks full-width and
       paginates cleanly. Heights come from the fixed-height wrappers + beforeprint
       resize() (see reports.php) — do NOT force canvas height here, it collapses lines. */
    .row { display: block !important; }
    .row > [class*="col-"] { width: 100% !important; max-width: 100% !important; margin-bottom: 1rem; }

    /* Keep each card whole across page breaks */
    .card { break-inside: avoid; page-break-inside: avoid;
        box-shadow: none !important; border: 1px solid #e7ebf2 !important; }

    .rp-sec { break-after: avoid; }

    @page { size: A4 portrait; margin: 12mm; }
}