/* ============================================================
   DSWD XII — PDBBM CIMS
   Unified Design System
   Clean, light surface with a bold accent. One system, four
   portals (Admin / Team Leader / PDO / Case Manager).
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Familjen+Grotesk:wght@600;700;800&display=swap');

:root{
    /* ---- Brand -- FIX: BAGO, hinango mula sa opisyal na DSWD logo
       (kaparehong palette ng Philippine flag -- blue/red/yellow, puting
       background). Ang dating #2954E5 ay generic lang na blue, walang
       kaugnayan sa tunay na DSWD branding. ---- */
    --accent:        #0038A8;  /* DSWD/Philippine flag blue */
    --accent-dark:   #002875;
    --accent-light:  #3D64C4;
    --accent-soft:   #E8EDFA;

    /* DSWD gold/yellow -- accent color mula sa logo frame, ginagamit
       nang bahagya (highlights, badges, "special" na estado) */
    --dswd-gold:      #FCD116;
    --dswd-gold-dark: #C9A400;
    --dswd-gold-soft: #FFF9E0;

    /* DSWD red -- mula sa puso sa logo (pagmamahal/pangangalaga),
       ginagamit para sa danger/urgent na estado -- natural na tugma
       ito sa UI convention (pula = babala) */
    --dswd-red:       #CE1126;

    --success:       #0EA5A0;
    --success-soft:  #E3F9F7;
    --warning:       #F59E0B;
    --warning-soft:  #FFF4E0;
    --danger:        #CE1126;  /* FIX: BAGO -- ginawang eksaktong DSWD/PH flag red */
    --danger-soft:   #FDEAEC;
    --info:          #6366F1;
    --info-soft:     #EEEEFD;

    /* ---- Neutrals ---- */
    --ink:           #14181F;
    --ink-soft:      #454B57;
    --muted:         #74798A;
    --border:        #E5E9F0;
    --surface:       #FFFFFF;
    --surface-alt:   #F6F8FC;
    --surface-sunk:  #EEF2F8;

    /* ---- Shape / Motion ---- */
    --radius-lg:     18px;
    --radius:        12px;
    --radius-sm:     8px;
    --shadow-sm:     0 1px 2px rgba(20,24,31,.05);
    --shadow-md:     0 8px 24px -12px rgba(20,24,31,.18);
    --shadow-lg:     0 20px 45px -20px rgba(20,24,31,.25);
    --ease:          cubic-bezier(.4,0,.2,1);

    --font-display: 'Familjen Grotesk', 'Plus Jakarta Sans', sans-serif;
    --font-body:    'Plus Jakarta Sans', sans-serif;

    /* Tells the browser this page already has its own light/dark
       theming, so Chrome/Edge's "Force dark mode for web content"
       auto-darkening leaves the page alone instead of trying to
       invert it on top of our own styling -- that double-darkening
       is what produced the washed-out/ghosted text some users saw. */
    color-scheme: light;
}

html[data-theme="dark"]{
    color-scheme: dark;
}

html[data-theme="dark"]{
    --ink:           #EDEFF3;
    --muted:         #97A0B3;
    --border:        #262C3B;
    --surface:       #171B26;
    --surface-alt:   #10131C;
    --surface-sunk:  #1E2330;
    --accent-soft:   #1A2445;
}

body{
    font-family: var(--font-body);
    color: var(--ink);
    background: var(--surface-alt);
    -webkit-font-smoothing: antialiased;
}

h1,h2,h3,h4,h5,h6{ font-family: var(--font-display); letter-spacing: -.01em; }

a{ color: var(--accent); }

/* ============================================================
   LAYOUT SHELL
   ============================================================ */
.wrapper{ display:flex; align-items:stretch; min-height:100vh; }

#content{
    flex: 1 1 auto;
    min-width: 0;
    background: var(--surface-alt);
}

.container, .container-fluid{ max-width: 1360px; }

/* ============================================================
   SIDEBAR  (admin_sidebar / tl_sidebar / PDO_sidebar)
   ============================================================ */
#sidebar{
    width: 264px;
    flex: 0 0 264px;
    background: var(--surface);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    z-index: 40;
    box-shadow: none !important; /* strip old drop shadows */
}

#sidebar.active{ margin-left: -264px; }

#sidebar::-webkit-scrollbar{ width: 6px; }
#sidebar::-webkit-scrollbar-thumb{ background: var(--border); border-radius: 4px; }

.sidebar-header{
    padding: 1.75rem 1.25rem 1.25rem !important;
    text-align: center;
    border-bottom: 1px solid var(--border) !important;
    background: var(--surface) !important;
    position: relative;
}

.sidebar-header .dswd-seal{
    width: 44px; height: 44px; object-fit: contain; margin-bottom: .5rem;
}

.sidebar-header .brand-title,
.sidebar-header h5{
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 15px;
    letter-spacing: .04em;
    color: var(--ink);
    margin: 0;
}

.sidebar-header .brand-title span{ color: var(--accent); }

.sidebar-header .brand-sub,
.sidebar-header small{
    display:block; margin-top:2px;
    font-size: 11px; font-weight: 600; letter-spacing: .06em;
    color: var(--muted); text-transform: uppercase;
}

/* accent bar under the brand — the one signature flourish */
.sidebar-header::after{
    content:"";
    position:absolute; left:50%; bottom:-1px; transform:translateX(-50%);
    width:36px; height:3px; border-radius:3px;
    background: linear-gradient(90deg, var(--accent), var(--accent-light));
}

/* User profile strip */
.user-profile-strip{
    display:flex; align-items:center; gap:.6rem;
    padding: .85rem 1.1rem;
    margin: .85rem 1rem 0;
    background: var(--surface-alt);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.user-ava{
    width: 36px; height:36px; border-radius: 50%;
    background: var(--accent-soft); color: var(--accent-dark);
    display:flex; align-items:center; justify-content:center;
    font-weight:700; font-size:13px; overflow:hidden; flex:0 0 auto;
}
.user-ava img{ width:100%; height:100%; object-fit:cover; }

.user-info{ min-width:0; line-height:1.25; }
.user-name{ font-size:13px; font-weight:700; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.user-role{ font-size:11px; color:var(--muted); font-weight:600; }

.online-dot{
    width:8px; height:8px; border-radius:50%; background:var(--success);
    margin-left:auto; box-shadow:0 0 0 3px var(--success-soft); flex:0 0 auto;
}

/* Nav */
.components, #sidebar ul.nav{
    list-style:none; margin:0; padding: 1rem .85rem 1.5rem;
    flex:1 1 auto;
}

.nav-section-label{
    display:block; font-size:10.5px; font-weight:800; letter-spacing:.09em;
    text-transform:uppercase; color:var(--muted);
    margin: 1.1rem .5rem .4rem;
}
.nav-section-label:first-child{ margin-top:.2rem; }

#sidebar li{ margin-bottom: 2px; list-style:none; }

#sidebar li > a,
#sidebar .nav-link{
    display:flex; align-items:center; gap:.65rem;
    width:100%; padding: .6rem .75rem;
    border-radius: var(--radius-sm);
    font-size: 13.5px; font-weight: 600;
    color: var(--ink-soft) !important;
    text-decoration:none;
    position: relative;
    transition: background .15s var(--ease), color .15s var(--ease);
}

#sidebar li > a i, #sidebar .nav-link i{
    width:18px; text-align:center; font-size:14px; color: var(--muted);
    transition: color .15s var(--ease), transform .2s var(--ease);
}

/* FIX: ang LABEL text (hal. "Interventions") ang dapat mag-shrink/mag-truncate
   muna kapag kulang ang space -- HINDI ang badge (bilang). Dati, walang
   shrink handling ang label span, kaya ang badge mismo ang natutulak papalabas
   ng sidebar boundary at naka-clip kapag mahaba ang bilang (hal. 4 digits pataas). */
#sidebar li > a > span:not(.badge),
#sidebar .nav-link > span:not(.badge),
.nav-group-trigger > span:not(.badge){
    flex: 1 1 auto; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

#sidebar li > a:hover, #sidebar .nav-link:hover{
    background: var(--surface-sunk);
    color: var(--ink) !important;
}
#sidebar li > a:hover i{ color:var(--accent); }

#sidebar li.active > a,
#sidebar .nav-link.active{
    background: var(--accent);
    color: #fff !important;
    font-weight:700;
    box-shadow: var(--shadow-md);
}
#sidebar li.active > a i, #sidebar .nav-link.active i{ color:#fff; }

#sidebar li.active > a::before{
    content:""; position:absolute; left:-.85rem; top:50%; transform:translateY(-50%);
    width:3px; height:60%; border-radius:3px; background:var(--accent-dark);
}

#sidebar .badge{ margin-left:auto; font-weight:700; font-size:10.5px; flex-shrink:0; white-space:nowrap; }

/* ============================================================
   COLLAPSIBLE NAV GROUPS  (Beneficiaries, Services, Reports,
   Logs, Settings, Data Management, AI & Chatbot, etc.)
   FIX: itong buong section ay dating wala, kaya ang mga trigger
   button ay lumalabas na parang default/unstyled na <button>
   (maliit, naka-gitna, kulay-abo), at ang mga submenu ay laging
   bukas/nakikita dahil walang max-height:0 default -- hindi
   totoong "gumana" ang expand/collapse. Itong CSS na 'to ang
   kulang para gumana ito nang tama at tumugma sa itsura ng
   ibang menu items.
   ============================================================ */
.nav-group{ list-style:none; }

.nav-group-trigger{
    display:flex; align-items:center; gap:.65rem;
    width:100%; padding: .6rem .75rem;
    border-radius: var(--radius-sm);
    font-size: 13.5px; font-weight: 600;
    color: var(--ink-soft);
    background: transparent;
    border: none;
    text-align: left;
    cursor: pointer;
    transition: background .15s var(--ease), color .15s var(--ease);
}

.nav-group-trigger i{
    width:18px; text-align:center; font-size:14px; color: var(--muted);
    transition: color .15s var(--ease);
}

.nav-group-trigger:hover{
    background: var(--surface-sunk);
    color: var(--ink);
}
.nav-group-trigger:hover i{ color:var(--accent); }

.nav-group-trigger.active{
    background: var(--accent);
    color: #fff;
    font-weight:700;
    box-shadow: var(--shadow-md);
}
.nav-group-trigger.active i{ color:#fff; }

.nav-group-chevron{
    margin-left:auto; font-size:11px !important; width:auto !important;
    transition: transform .2s var(--ease);
}
.nav-group.open .nav-group-chevron{ transform: rotate(180deg); }

.nav-group-sub{
    list-style:none; margin:0; padding: 0 0 0 1.6rem;
    max-height: 0; overflow: hidden;
    transition: max-height .25s var(--ease);
}
.nav-group-sub li{ margin: .2rem 0; }
.nav-group-sub li > a{ padding: .5rem .75rem; font-size: 13px; }

.footer-sidebar{
    padding: 1rem; text-align:center; font-size:11px;
    color: var(--muted); border-top:1px solid var(--border);
    background: var(--surface) !important;
}
.footer-sidebar small, .footer-sidebar .text-white-50{ color:var(--muted) !important; }

/* Privacy toggle button (PDO sidebar) */
.privacy-btn{
    width:100%; border:1px solid var(--border); background:var(--surface-alt);
    display:flex; align-items:center; justify-content:space-between;
    padding:.6rem .9rem; border-radius:999px; font-size:13px; font-weight:600;
    color:var(--ink-soft);
}
.privacy-btn:hover{ background:var(--surface-sunk); }
.privacy-badge{ color:#fff; font-weight:700; font-size:11px; }
.badge-on{ background:linear-gradient(135deg,var(--success),#12C7B8); }
.badge-off{ background:linear-gradient(135deg,#9AA2B1,#C2C8D4); }

/* ============================================================
   HEADER / NAVBAR
   ============================================================ */
header.navbar{
    background: var(--surface) !important;
    border-bottom: 1px solid var(--border);
    box-shadow: none !important;
    padding: .85rem 1.5rem;
    position: sticky; top:0; z-index:30;
}

header.navbar .navbar-brand{
    font-family: var(--font-display);
    font-weight:800; color:var(--ink) !important; font-size:16px;
}

#sidebarCollapse{
    width:38px; height:38px; border-radius:var(--radius-sm);
    border:1px solid var(--border); background:var(--surface);
    color:var(--ink-soft); display:flex; align-items:center; justify-content:center;
}
#sidebarCollapse:hover{ background:var(--surface-sunk); }

.navbar-icon-btn, .theme-toggle{
    width:38px; height:38px; border-radius:50%;
    border:1px solid var(--border); background:var(--surface);
    color:var(--ink-soft); display:flex; align-items:center; justify-content:center;
}
.navbar-icon-btn:hover, .theme-toggle:hover{ background:var(--surface-sunk); color:var(--accent); }

.notif-badge{
    position:absolute; top:-2px; right:-2px;
    background:var(--danger); color:#fff; font-size:10px; font-weight:700;
    min-width:16px; height:16px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    border:2px solid var(--surface);
}

.notif-panel{ border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-lg); }
.notif-stat-card{ flex:1; text-align:center; padding:.5rem; border-radius:var(--radius-sm); background:var(--surface-alt); }
.notif-stat-num{ font-family:var(--font-display); font-weight:800; font-size:18px; }
.notif-stat-label{ font-size:10.5px; color:var(--muted); font-weight:600; }
.notif-danger .notif-stat-num{ color:var(--danger); }
.notif-warning .notif-stat-num{ color:var(--warning); }
.notif-info .notif-stat-num{ color:var(--info); }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{ border-radius: var(--radius-sm); font-weight:600; font-size:13.5px; padding:.55rem 1.1rem; }
.btn-primary{ background:var(--accent); border-color:var(--accent); }
.btn-primary:hover{ background:var(--accent-dark); border-color:var(--accent-dark); }
.btn-outline-secondary{ border-color:var(--border); color:var(--ink-soft); }
.btn-outline-secondary:hover{ background:var(--surface-sunk); color:var(--ink); border-color:var(--border); }
.btn-danger{ background:var(--danger); border-color:var(--danger); }
.btn-success{ background:var(--success); border-color:var(--success); }

/* ============================================================
   CARDS
   ============================================================ */
.card{
    border:1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    background: var(--surface);
}
.card-header{
    background: var(--surface);
    border-bottom:1px solid var(--border);
    font-weight:700; font-family:var(--font-display);
    border-top-left-radius: var(--radius-lg) !important;
    border-top-right-radius: var(--radius-lg) !important;
}

/* KPI-style stat cards */
.kpi-card, .stat-card{
    border:1px solid var(--border); border-radius:var(--radius-lg);
    background:var(--surface); padding:1.1rem 1.25rem; box-shadow:var(--shadow-sm);
    position:relative; overflow:hidden;
}
.kpi-card::before{
    content:""; position:absolute; left:0; top:0; bottom:0; width:4px;
    background:linear-gradient(180deg,var(--accent),var(--accent-light));
}

/* ============================================================
   TABLES
   ============================================================ */
.table{ --bs-table-bg:transparent; }
.table thead th{
    background: var(--surface-sunk);
    color: var(--muted);
    font-size: 11px; font-weight:800; text-transform:uppercase; letter-spacing:.05em;
    border-bottom:none; padding:.75rem .9rem;
}
.table tbody td{ padding:.75rem .9rem; font-size:13.5px; border-color:var(--border); vertical-align:middle; }
.table tbody tr:hover{ background:var(--surface-alt); }

table.dataTable{ border-collapse:separate !important; border-spacing:0; }

/* ============================================================
   BADGES / STATUS PILLS
   ============================================================ */
.badge{ font-weight:700; font-size:11px; border-radius:999px; padding:.35em .7em; white-space:nowrap; flex-shrink:0; }
.bg-success{ background:var(--success) !important; }
.bg-danger{ background:var(--danger) !important; }
.bg-warning{ background:var(--warning) !important; color:#7A4B00 !important; }
.bg-primary{ background:var(--accent) !important; }
.bg-info{ background:var(--info) !important; }

.status-pill{
    display:inline-flex; align-items:center; gap:.35em;
    padding:.3em .75em; border-radius:999px; font-size:11.5px; font-weight:700;
}
.status-pill.success{ background:var(--success-soft); color:var(--success); }
.status-pill.warning{ background:var(--warning-soft); color:#B45C00; }
.status-pill.danger{ background:var(--danger-soft); color:var(--danger); }
.status-pill.info{ background:var(--info-soft); color:var(--info); }
.status-pill.muted{ background:var(--surface-sunk); color:var(--muted); }

/* ============================================================
   FORMS
   ============================================================ */
.form-control, .form-select{
    border-color: var(--border); border-radius: var(--radius-sm);
    padding:.55rem .8rem; font-size:13.5px;
}
.form-control:focus, .form-select:focus{
    border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
}
label, .form-label{ font-size:12.5px; font-weight:700; color:var(--ink-soft); }

/* ============================================================
   MISC
   ============================================================ */
::selection{ background:var(--accent-soft); color:var(--accent-dark); }

.dropdown-menu{ border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-lg); padding:.4rem; }
.dropdown-item{ border-radius:var(--radius-sm); padding:.5rem .75rem; font-size:13px; font-weight:600; }
.dropdown-item:hover{ background:var(--surface-sunk); }

@media (max-width: 991px){
    #sidebar{ position:fixed; left:0; height:100vh; margin-left:-264px; }
    #sidebar.active{ margin-left:0; box-shadow:var(--shadow-lg) !important; }
}

/* ============================================================
   PREMIUM POLISH LAYER
   Additive refinements only — no existing classes removed or
   renamed, so every page that already uses the design system
   picks these up automatically.
   ============================================================ */

/* Richer, softer shadows for a more "elevated" feel */
:root{
    --shadow-sm: 0 1px 3px rgba(20,24,31,.06), 0 1px 2px rgba(20,24,31,.04);
    --shadow-md: 0 10px 28px -10px rgba(20,24,31,.20), 0 2px 6px rgba(20,24,31,.05);
    --shadow-lg: 0 24px 52px -18px rgba(20,24,31,.28);
}

::-webkit-scrollbar{ width:8px; height:8px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{ background:var(--border); border-radius:8px; }
::-webkit-scrollbar-thumb:hover{ background:var(--muted); }

*:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:4px; }

/* Cards lift subtly on hover for a tactile, premium feel */
.card{ transition: box-shadow .2s var(--ease), transform .2s var(--ease); }
.card.card-hover:hover,
a.card:hover{ box-shadow: var(--shadow-md); transform: translateY(-2px); }

/* Premium gradient buttons with a soft lift on hover/press */
.btn-primary{
    background: linear-gradient(135deg, var(--accent), var(--accent-dark));
    border: none;
    box-shadow: 0 4px 14px -6px rgba(0,56,168,.55);
    transition: transform .15s var(--ease), box-shadow .15s var(--ease), filter .15s var(--ease);
}
.btn-primary:hover{ background: linear-gradient(135deg, var(--accent), var(--accent-dark)); transform: translateY(-1px); box-shadow: 0 8px 20px -6px rgba(0,56,168,.55); }
.btn-primary:active{ transform: translateY(0); filter: brightness(.96); }

.btn-danger{ background: linear-gradient(135deg, var(--danger), #9c0c1c); border:none; }
.btn-success{ background: linear-gradient(135deg, var(--success), #0b7d79); border:none; }

/* Status pills get a faint ring for extra depth */
.status-pill{ box-shadow: inset 0 0 0 1px rgba(0,0,0,.03); }

/* KPI / stat cards: thin gradient top edge instead of flat left bar,
   reads as more "dashboard-premium" without changing layout */
.kpi-card, .stat-card{ transition: transform .18s var(--ease), box-shadow .18s var(--ease); }
.kpi-card:hover, .stat-card:hover{ transform: translateY(-3px); box-shadow: var(--shadow-md); }

/* Premium table striping + tighter hover affordance */
.table tbody tr{ transition: background .12s ease; }
.table-hover tbody tr:hover{ background: var(--surface-alt) !important; }

/* Sidebar active item gets a subtle gradient instead of flat fill */
#sidebar li.active > a,
#sidebar .nav-link.active{
    background: linear-gradient(135deg, var(--accent), var(--accent-dark));
}

/* Section dividers with a small gold flourish, used sparingly for premium touches */
.section-divider{
    display:flex; align-items:center; gap:.6rem;
    font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
    color:var(--muted); margin: 1.5rem 0 .85rem;
}
.section-divider::after{ content:""; flex:1; height:1px; background:var(--border); }
.section-divider::before{ content:""; width:14px; height:2px; border-radius:2px; background:var(--dswd-gold); }

@media (prefers-reduced-motion: reduce){
    .card, .kpi-card, .stat-card, .btn-primary{ transition:none; }
}

/* ============================================================
   FIX -- ".icon-space" ay ginagamit sa BUONG sidebar (Admin at TL)
   para sa puwang sa pagitan ng icon at text, pero HINDI ito
   kailanman na-define -- kaya "dumidikit" ang icon sa text sa
   maraming link. Idinagdag dito, universal, para consistent na
   ang spacing kahit saang sidebar/page ito gamitin.
   ============================================================ */
.icon-space{
    margin-right: 10px;
    width: 18px;
    text-align: center;
    display: inline-block;
    flex-shrink: 0;
}