/* ============================================================
   AyudaGO · DSWD Field Office III — Central Luzon
   UNIFIED DESIGN SYSTEM  ·  v6  ·  "Philippine Government Digital"
   Royal-flag blue #0038a8 · patriotic red #ce1126 · gold #fcd116
   ------------------------------------------------------------
   This single stylesheet re-skins the ENTIRE AyudaGO system to the
   official DSWD identity. It remaps every legacy CSS variable each
   page already uses, so all 95 pages are re-themed automatically,
   then layers on a detailed component library + a full motion set.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&family=Public+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&display=swap');

/* ============================================================
   1 · DESIGN TOKENS  (official palette + legacy remap)
   ============================================================ */
:root,
:root[data-theme],
html body {
  /* —— Philippine-flag DSWD palette —— */
  --dswd-blue:        #0038a8;   /* royal flag blue          */
  --dswd-blue-deep:   #002a6b;   /* navy                     */
  --dswd-blue-900:    #001a44;   /* darkest sidebar          */
  --dswd-blue-700:    #00328f;
  --dswd-blue-600:    #1456c4;
  --dswd-blue-400:    #4f86df;
  --dswd-blue-300:    #6f9be8;
  --dswd-blue-tint:   #e9f1ff;
  --dswd-blue-tint2:  #f3f7ff;
  --dswd-red:         #ce1126;   /* flag red                 */
  --dswd-red-deep:    #9e0b1d;
  --dswd-red-tint:    #fdecee;
  --dswd-gold:        #fcd116;   /* flag gold / sun-ray      */
  --dswd-gold-deep:   #d9a800;
  --dswd-gold-tint:   #fff7d6;
  --dswd-green:       #15803D;
  --dswd-green-deep:  #0c6a45;
  --dswd-cyan:        #0e7faf;
  --dswd-violet:      #6d3bd1;

  /* —— Remap EVERY legacy variable the old pages reference —— */
  --accent:        #0038a8 !important;
  --accent-light:  #e9f1ff !important;
  --accent-dark:   #002a6b !important;
  --accent2:       #138a5e !important;
  --accent3:       #fcd116 !important;
  --accent4:       #ce1126 !important;
  --primary:       #0038a8 !important;
  --primary-dark:  #002a6b !important;
  --secondary:     #ce1126 !important;
  --navy:          #002a6b !important;
  --blue:          #0038a8 !important;
  --green:         #15803D !important;
  --green2:        #1aa873 !important;
  --teal:          #0E6FA8 !important;
  --gold:          #d9a800 !important;
  --yellow:        #fcd116 !important;
  --orange:        #e8730c !important;
  --purple:        #6d3bd1 !important;
  --danger:        #ce1126 !important;
  --success:       #15803D !important;
  --warning:       #d9a800 !important;
  --info:          #0E6FA8 !important;

  --sidebar-bg:    #001a44 !important;
  --sidebar-bg2:   #002a6b;
  --sidebar-hover: rgba(255,255,255,.08) !important;
  --sidebar-w:     288px;
  --topbar-h:      66px;

  --bg:            #eef3f9 !important;
  --bg2:           #e6edf6;
  --surface:       #ffffff;
  --surface-2:     #f7faff;
  --border:        #dde6f1 !important;
  --border-strong: #c6d4e8;
  --text:          #0f1b2d;
  --text-2:        #34465e;
  --muted:         #5c6b80;
  --muted-2:       #8595a9;

  --radius:        8px;
  --radius-sm:     6px;
  --radius-lg:     12px;
  --radius-xl:     16px;

  --sh-xs: 0 1px 2px rgba(16,30,54,.06);
  --sh-sm: 0 1px 3px rgba(16,30,54,.09), 0 1px 2px rgba(16,30,54,.05);
  --sh-md: 0 4px 10px -2px rgba(16,30,54,.10), 0 2px 4px -2px rgba(16,30,54,.06);
  --sh-lg: 0 12px 22px -8px rgba(16,30,54,.16), 0 4px 8px -4px rgba(16,30,54,.08);
  --sh-xl: 0 20px 32px -12px rgba(16,30,54,.20), 0 8px 12px -6px rgba(16,30,54,.10);
  --sh-blue: 0 4px 12px rgba(0,56,168,.22);
  --sh-red: 0 4px 12px rgba(206,17,38,.20);

  --grad-blue:  linear-gradient(135deg,#0046cf 0%,#0038a8 45%,#002a6b 100%);
  --grad-navy:  linear-gradient(160deg,#002a6b 0%,#001a44 60%,#000f2e 100%);
  --grad-flag:  linear-gradient(90deg,var(--dswd-blue) 0 33.33%,var(--dswd-red) 33.33% 66.66%,var(--dswd-gold) 66.66% 100%);
  --grad-gold:  linear-gradient(135deg,#ffe46b,#fcd116 55%,#d9a800);
  --grad-sun:   conic-gradient(from 210deg,#0038a8,#1456c4,#0e7faf,#138a5e,#d9a800,#ce1126,#0038a8);

  --ease: cubic-bezier(.2,.8,.2,1);
  --ease-back: cubic-bezier(.34,1.56,.64,1);

  --font-display: 'Sora','Segoe UI',system-ui,sans-serif;
  --font-body: 'Public Sans','Segoe UI',system-ui,sans-serif;
}

/* ============================================================
   2 · BASE
   ============================================================ */
*{ scroll-behavior:smooth; }
html body, .main-content, .main-wrap, .mod-main, .citizen-main, .content {
  font-family: var(--font-body) !important;
  background: var(--bg) !important;
  color: var(--text);
}
body{ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
h1,h2,h3,h4,h5,.logo-text,.brand-name,.section-title,.page-title,.ph-title,.panel-title,.dc-title,.card-title{
  font-family: var(--font-display) !important;
  letter-spacing:-.012em;
}
a{ transition: color .18s var(--ease); }
img{ max-width:100%; }

/* page atmosphere: very soft tri-tone mesh behind everything */
html body::before{
  content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(900px 520px at 88% -8%, rgba(0,56,168,.06), transparent 60%),
    radial-gradient(760px 480px at -6% 12%, rgba(206,17,38,.045), transparent 55%),
    radial-gradient(700px 600px at 60% 108%, rgba(252,209,22,.05), transparent 60%);
}

::selection{ background: var(--dswd-blue); color:#fff; }
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:#e3e9f3; }
::-webkit-scrollbar-thumb{ background:linear-gradient(180deg,var(--dswd-blue),var(--dswd-blue-deep)); border-radius:20px; border:2px solid #e3e9f3; }
::-webkit-scrollbar-thumb:hover{ background:var(--dswd-blue-deep); }

:focus-visible{ outline:3px solid rgba(0,56,168,.45); outline-offset:2px; border-radius:6px; }

/* GOVPH-style slim flag ribbon (signature element) */
.dswd-flagbar{ height:4px; width:100%; background:var(--grad-flag); }
.dswd-flagbar.tall{ height:6px; }

/* Thin official GOVPH strip used atop topbars/headers */
.dswd-govstrip{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  background:var(--grad-navy); color:rgba(255,255,255,.92);
  font-size:11.5px; font-weight:600; padding:5px 22px; letter-spacing:.2px;
}
.dswd-govstrip a{ color:#fff !important; text-decoration:none; }
.dswd-govstrip .gp-badge{ display:inline-flex; align-items:center; gap:6px; font-weight:800; }
.dswd-govstrip .gp-badge i{ color:var(--dswd-gold); }
.dswd-govstrip .gp-sep{ width:1px; height:13px; background:rgba(255,255,255,.25); }
.dswd-govstrip .gp-right{ margin-left:auto; display:flex; align-items:center; gap:10px; opacity:.95; }

/* ============================================================
   3 · SIDEBAR  (re-skins inline .sidebar + the new .dswd-sidebar)
   ============================================================ */
.sidebar, aside.sidebar, .dswd-sidebar{
  width:var(--sidebar-w) !important;
  background:
    radial-gradient(1200px 520px at -10% -8%, rgba(0,70,207,.55), transparent 58%),
    radial-gradient(700px 420px at 120% 110%, rgba(206,17,38,.18), transparent 60%),
    var(--grad-navy) !important;
  border-right:1px solid rgba(255,255,255,.06) !important;
  display:flex; flex-direction:column;
  position:fixed; top:0; left:0; height:100vh; z-index:1040;
  overflow-y:auto; overflow-x:hidden;
  box-shadow:4px 0 34px rgba(0,15,46,.38);
}
.dswd-sidebar::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background-image:url("data:image/svg+xml,%3Csvg width='64' height='64' viewBox='0 0 64 64' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.025'%3E%3Cpath d='M0 32h64M32 0v64'/%3E%3C/g%3E%3C/svg%3E");
}
.dswd-sidebar::after{
  content:""; position:absolute; top:0; right:0; width:3px; height:100%;
  background:linear-gradient(180deg,var(--dswd-blue) 0%,var(--dswd-red) 50%,var(--dswd-gold) 100%); opacity:.9;
}

/* Brand header with the FO3 seal */
.dswd-brand{
  display:flex; align-items:center; gap:13px;
  padding:20px 18px 15px; position:relative; z-index:2;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.dswd-brand .seal{
  width:52px; height:52px; border-radius:50%; flex:0 0 auto;
  background:#fff; padding:3px; object-fit:cover;
  box-shadow:0 0 0 2px rgba(252,209,22,.6), 0 6px 18px rgba(0,0,0,.45);
  animation:sealIn .8s var(--ease) both;
}
@keyframes sealIn{ from{ transform:scale(.4) rotate(-22deg); opacity:0 } to{ transform:none; opacity:1 } }
.dswd-brand .brand-meta .bt{ font-family:var(--font-display); font-weight:800; color:#fff; font-size:21px; line-height:1; letter-spacing:.2px; }
.dswd-brand .brand-meta .bt .go{ color:var(--dswd-gold); }
.dswd-brand .brand-meta .bs{ color:rgba(255,255,255,.62); font-size:10px; margin-top:5px; text-transform:uppercase; letter-spacing:.85px; }

/* Sidebar search */
/* Sidebar menu search.

   The icon used to be absolutely positioned on top of the input, with a large
   padding-left holding a gap open for it. That only works while nothing else
   touches the padding — and something did, so the glyph landed on top of the
   placeholder.

   It is now a flex row: the icon and the input are siblings sitting one after
   the other, with a real gap between them. There is no overlap to get wrong,
   whatever any other stylesheet decides about padding. The border and the
   translucent fill moved onto the wrapper, so the input itself is transparent
   and cannot be repainted white. */
.dswd-sb-search{
  position:relative; z-index:2;
  margin:12px 14px 4px;
  display:flex; align-items:center; gap:9px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);
  border-radius:11px;
  padding:0 12px;
  transition:background .18s var(--ease), border-color .18s var(--ease);
}
.dswd-sb-search:focus-within{ background:rgba(255,255,255,.12); border-color:rgba(252,209,22,.6); }
.dswd-sb-search i{
  position:static; transform:none; flex:0 0 auto;
  color:rgba(255,255,255,.5); font-size:12px; line-height:1;
}
.dswd-sb-search input{
  flex:1 1 auto; min-width:0; width:auto;
  border:none; background:transparent; box-shadow:none;
  color:#fff; padding:9px 0; font-size:12.5px; font-weight:500;
}
.dswd-sb-search input::placeholder{ color:rgba(255,255,255,.45); }
.dswd-sb-search input:focus{ outline:none; }

/* Section labels */
.dswd-sidebar .nav-section, .dswd-nav-label{
  font-size:9.5px; font-weight:800; letter-spacing:.15em; text-transform:uppercase;
  color:rgba(255,255,255,.34); padding:15px 22px 7px; position:relative; z-index:2;
}

/* Nav links + dropdown groups */
.dswd-nav{ padding:4px 10px 8px; position:relative; z-index:2; }
.dswd-link, .dswd-sidebar .nav-item, .sidebar .nav-item{
  display:flex; align-items:center; gap:12px;
  padding:10px 14px; margin:2px 4px; border-radius:12px;
  color:rgba(255,255,255,.82) !important; text-decoration:none !important;
  font-size:13.5px; font-weight:600; position:relative;
  border-left:3px solid transparent;
  transition:background .18s, color .18s, transform .15s, padding .18s;
}
.dswd-link .nav-icon, .dswd-sidebar .nav-item .nav-icon,
.dswd-link > i, .dswd-sidebar .nav-item > i{ width:20px; text-align:center; font-size:14px; opacity:.92; flex:0 0 auto; }
.dswd-link:hover, .dswd-sidebar .nav-item:hover, .sidebar .nav-item:hover{
  background:rgba(255,255,255,.08) !important; color:#fff !important; transform:translateX(3px);
}
/* Active item: no coloured fill and no gold edge. The current page is marked
   by weight and full-strength white text alone — enough to read at a glance
   without a bar of colour competing with the content beside it. */
.dswd-link.active, .dswd-sidebar .nav-item.active, .sidebar .nav-item.active{
  background:transparent !important;
  color:#fff !important;
  font-weight:700;
  border-left-color:transparent !important;
  box-shadow:none !important;
}
.dswd-link.active .nav-icon, .dswd-sidebar .nav-item.active .nav-icon,
.dswd-link.active > i, .dswd-sidebar .nav-item.active > i{ opacity:1; }
/* The site-wide translucent-blue focus ring barely shows on this dark navy
   surface — swap to gold (the same accent already used for .active and the
   search input's focus state above) so keyboard focus stays visible here. */
.dswd-sidebar :focus-visible{ outline:3px solid var(--dswd-gold,#fcd116); outline-offset:2px; }
/* The gold trailing marker was part of the same treatment; removed. */
.nav-badge, .badge-count{
  margin-left:auto; background:var(--dswd-red); color:#fff;
  font-size:10px; font-weight:800; padding:2px 8px; border-radius:20px; line-height:1.5;
  box-shadow:0 2px 7px rgba(206,17,38,.45);
}

/* Collapsible dropdown group */
.dswd-group > .dswd-grouphead{
  display:flex; align-items:center; gap:12px; cursor:pointer;
  padding:10px 14px; margin:2px 4px; border-radius:12px;
  color:rgba(255,255,255,.82); font-size:13.5px; font-weight:600;
  border-left:3px solid transparent; transition:background .18s, color .18s;
}
.dswd-group > .dswd-grouphead .nav-icon{ width:20px; text-align:center; font-size:14px; opacity:.92; }
.dswd-group > .dswd-grouphead:hover{ background:rgba(255,255,255,.08); color:#fff; }
.dswd-group > .dswd-grouphead .caret{ margin-left:auto; font-size:11px; transition:transform .3s var(--ease); opacity:.7; }
.dswd-group.open > .dswd-grouphead{ color:#fff; }
.dswd-group.open > .dswd-grouphead .caret{ transform:rotate(90deg); }
.dswd-group.has-active > .dswd-grouphead{ color:#fff; }
.dswd-group.has-active > .dswd-grouphead .nav-icon{ color:var(--dswd-gold); }

.dswd-sub{ max-height:0; overflow:hidden; transition:max-height .34s var(--ease); margin:0 4px; }
.dswd-group.open .dswd-sub{ max-height:760px; }
.dswd-sub a{
  display:flex; align-items:center; gap:10px;
  padding:8px 12px 8px 44px; margin:1px 0; border-radius:10px;
  color:rgba(255,255,255,.66) !important; text-decoration:none !important;
  font-size:12.8px; font-weight:500; position:relative;
  transition:background .16s, color .16s, padding .16s;
}
.dswd-sub a::before{
  content:""; position:absolute; left:26px; top:50%; width:5px; height:5px; border-radius:50%;
  background:rgba(255,255,255,.3); transform:translateY(-50%); transition:background .16s, transform .16s;
}
.dswd-sub a:hover{ background:rgba(255,255,255,.07) !important; color:#fff !important; padding-left:48px; }
.dswd-sub a:hover::before{ background:var(--dswd-gold); transform:translateY(-50%) scale(1.5); }
.dswd-sub a.active{ color:#fff !important; background:rgba(0,56,168,.38) !important; }
.dswd-sub a.active::before{ background:var(--dswd-gold); box-shadow:0 0 9px var(--dswd-gold); }
.dswd-sub a .nav-badge{ padding:1px 7px; font-size:9.5px; }

/* sidebar search "no result" helper */
.dswd-nav .sb-empty{ display:none; color:rgba(255,255,255,.5); font-size:12px; padding:10px 20px; }
.dswd-nav.searching .nav-section,
.dswd-nav.searching .dswd-progs,
.dswd-nav.searching .nav-progs-label{ display:none; }

/* Program chips */
.nav-progs-label{ }
.dswd-progs{ padding:6px 18px 14px; position:relative; z-index:2; display:flex; flex-wrap:wrap; gap:6px; }
.dswd-prog-chip{
  font-size:10px; font-weight:800; padding:3px 9px; border-radius:20px; letter-spacing:.3px;
  border:1px solid; transition:transform .15s var(--ease-back), box-shadow .15s; cursor:default;
}
.dswd-prog-chip:hover{ transform:translateY(-2px) scale(1.05); }

/* User footer */
.dswd-userbox{
  margin-top:auto; padding:14px 16px 18px; position:relative; z-index:2;
  border-top:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg, transparent, rgba(0,0,0,.28));
}
.dswd-userbox .row1{ display:flex; align-items:center; gap:11px; }
.dswd-avatar{
  width:42px; height:42px; border-radius:13px; flex:0 0 auto;
  background:linear-gradient(135deg,var(--dswd-blue),var(--dswd-red));
  color:#fff; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:15px;
  box-shadow:0 4px 13px rgba(0,0,0,.38);
}
.dswd-userbox .u-name{ color:#fff; font-size:13px; font-weight:700; line-height:1.2; }
.dswd-userbox .u-role{ color:rgba(255,255,255,.5); font-size:11px; margin-top:2px; }
.dswd-userbox .u-org{ color:rgba(255,255,255,.42); font-size:10px; margin-top:9px; display:flex; align-items:center; gap:5px; }
.dswd-logout{
  display:flex; align-items:center; justify-content:center; gap:7px; margin-top:12px;
  padding:9px; border-radius:10px; color:#ffd7dc !important; text-decoration:none !important;
  background:rgba(206,17,38,.18); border:1px solid rgba(206,17,38,.32);
  font-size:12px; font-weight:700; transition:background .18s, transform .15s;
}
.dswd-logout:hover{ background:rgba(206,17,38,.36); transform:translateY(-1px); }

/* ============================================================
   4 · TOPBAR  (re-skins .topbar / .header-top / .citizen-topbar)
   ============================================================ */
.main-wrap, .main-content{ margin-left:var(--sidebar-w) !important; }
.topbar, .header-top, .citizen-topbar{
  background:linear-gradient(180deg,#ffffff,#fbfdff) !important;
  border-bottom:1px solid var(--border) !important;
  box-shadow:0 2px 16px rgba(16,30,54,.05);
}
.topbar h1, .topbar-left h1{ color:var(--dswd-blue-deep); font-weight:800 !important; }
.topbar-pill, .dswd-pill{
  display:inline-flex; align-items:center; gap:7px;
  background:var(--dswd-blue-tint); color:var(--dswd-blue-deep) !important;
  border:1px solid #cfe0ff; border-radius:30px; padding:6px 13px; font-size:12.5px; font-weight:700;
  transition:.18s var(--ease);
}
.topbar-pill:hover{ box-shadow:var(--sh-sm); transform:translateY(-1px); }
.topbar-pill i{ color:var(--dswd-blue); }
.topbar-pill.pst{ background:var(--dswd-gold-tint); color:#6a4e00 !important; border-color:#ecd98a; }
.topbar-pill.pst i{ color:var(--dswd-gold-deep); }

/* topbar quick-search */
.dswd-topsearch{ position:relative; }
.dswd-topsearch input{
  border:1px solid var(--border); background:var(--surface-2); border-radius:30px;
  padding:8px 14px 8px 36px; font-size:13px; min-width:230px; transition:.18s var(--ease);
}
.dswd-topsearch input:focus{ outline:none; border-color:var(--dswd-blue); box-shadow:0 0 0 .2rem rgba(0,56,168,.16); background:#fff; min-width:280px; }
.dswd-topsearch i{ position:absolute; left:13px; top:50%; transform:translateY(-50%); color:var(--muted); font-size:13px; }

/* ============================================================
   5 · BUTTONS
   ============================================================ */
.btn{ font-family:var(--font-body); font-weight:700; border-radius:11px; transition:transform .15s var(--ease), box-shadow .2s, filter .2s; }
.btn-primary, .btn-hero-primary{
  background:var(--grad-blue) !important; border:none !important; color:#fff !important; box-shadow:var(--sh-blue);
}
.btn-primary:hover, .btn-hero-primary:hover{ transform:translateY(-2px); box-shadow:0 16px 36px rgba(0,56,168,.42); filter:brightness(1.05); }
.btn-danger{ background:linear-gradient(135deg,var(--dswd-red),var(--dswd-red-deep)) !important; border:none !important; box-shadow:var(--sh-red); }
.btn-danger:hover{ transform:translateY(-2px); filter:brightness(1.05); }
.btn-success{ background:linear-gradient(135deg,#19a06d,var(--dswd-green-deep)) !important; border:none !important; }
.btn-warning{ background:var(--grad-gold) !important; border:none !important; color:#3a2d00 !important; }
.btn-info{ background:linear-gradient(135deg,#179ad1,var(--dswd-cyan)) !important; border:none !important; color:#fff !important; }
.btn-outline-primary{ color:var(--dswd-blue) !important; border:1.5px solid var(--dswd-blue) !important; background:transparent; }
.btn-outline-primary:hover{ background:var(--dswd-blue) !important; color:#fff !important; transform:translateY(-2px); }
.btn-light{ background:#fff !important; border:1px solid var(--border) !important; color:var(--dswd-blue-deep) !important; }
.btn-light:hover{ background:var(--dswd-blue-tint) !important; }
.btn-soft-primary{ background:var(--dswd-blue-tint) !important; color:var(--dswd-blue-deep) !important; border:1px solid #cfe0ff !important; }
.btn-soft-primary:hover{ background:#dbe8ff !important; }
.btn-lg{ padding:.7rem 1.5rem; font-size:1rem; }

/* ============================================================
   6 · CARDS & STAT TILES
   ============================================================ */
.card, .panel, .stat-card, .glass-card{
  border:1px solid var(--border) !important; border-radius:var(--radius) !important; box-shadow:var(--sh-sm);
}
.card:hover, .panel:hover, .hover-card:hover, .stat-card:hover{ box-shadow:var(--sh-md); }
.card{ transition:transform .25s var(--ease), box-shadow .25s; }

.dswd-card{
  background:var(--surface); border:none; border-radius:var(--radius);
  box-shadow:var(--sh-sm); overflow:hidden; transition:transform .25s var(--ease), box-shadow .25s;
}
.dswd-card:hover{ transform:translateY(-4px); box-shadow:var(--sh-lg); }
.dswd-card .dc-head{ padding:16px 20px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; gap:12px; }
.dswd-card .dc-title{ font-family:var(--font-display); font-weight:700; font-size:15px; color:var(--dswd-blue-deep); display:flex; align-items:center; gap:9px; }
.dswd-card .dc-title i{ color:var(--dswd-blue); }
.dswd-card .dc-body{ padding:20px; }
.dswd-card.accent-top{ border-top:none; }

/* Stat tiles */
.dswd-stat{
  /* Borderless: the shadow already separates the tile from the page, and the
     outline on top of it only added noise. Shared by the stat rows on
     users.php, audit-logs.php, settings.php and the dashboards. */
  background:var(--surface); border:none; border-radius:var(--radius);
  padding:20px; position:relative; overflow:hidden; box-shadow:var(--sh-sm);
  transition:transform .25s var(--ease), box-shadow .25s;
}
.dswd-stat:hover{ transform:translateY(-5px); box-shadow:var(--sh-lg); }
/* The 4px coloured edge read as a border on an otherwise borderless tile;
   the icon already carries the stat's colour. */
.dswd-stat::before{ display:none; }
.dswd-stat::after{ content:""; position:absolute; right:-34px; top:-34px; width:128px; height:128px; border-radius:50%; opacity:.07; background:currentColor; }
.dswd-stat.s-blue{ color:var(--dswd-blue); } .dswd-stat.s-blue::before{ background:var(--dswd-blue); }
.dswd-stat.s-red{ color:var(--dswd-red); } .dswd-stat.s-red::before{ background:var(--dswd-red); }
.dswd-stat.s-green{ color:var(--dswd-green); } .dswd-stat.s-green::before{ background:var(--dswd-green); }
.dswd-stat.s-gold{ color:var(--dswd-gold-deep); } .dswd-stat.s-gold::before{ background:var(--dswd-gold); }
.dswd-stat.s-cyan{ color:var(--dswd-cyan); } .dswd-stat.s-cyan::before{ background:var(--dswd-cyan); }
.dswd-stat.s-violet{ color:var(--dswd-violet); } .dswd-stat.s-violet::before{ background:var(--dswd-violet); }
.dswd-stat .ds-ico{ width:50px; height:50px; border-radius:14px; display:flex; align-items:center; justify-content:center; font-size:22px; color:#fff; margin-bottom:14px; background:currentColor; box-shadow:0 8px 18px rgba(0,0,0,.12); }
.dswd-stat .ds-ico i{ color:#fff; }
.dswd-stat .ds-val{ font-family:var(--font-display); font-size:30px; font-weight:800; color:var(--text); line-height:1; }
.dswd-stat .ds-lbl{ color:var(--muted); font-size:12.5px; font-weight:600; margin-top:6px; }
.dswd-stat .ds-trend{ font-size:11.5px; font-weight:700; margin-top:8px; display:inline-flex; align-items:center; gap:4px; }
.ds-trend.up{ color:var(--dswd-green); } .ds-trend.down{ color:var(--dswd-red); }

/* Gradient hero panel (page intros) */
.dswd-hero-panel{
  position:relative; overflow:hidden; border-radius:var(--radius-lg); color:#fff;
  background:var(--grad-blue); box-shadow:var(--sh-blue); padding:26px 28px;
}
.dswd-hero-panel::before{ content:""; position:absolute; inset:0;
  background:url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.07'%3E%3Cpath d='M0 40h80M40 0v80'/%3E%3C/g%3E%3C/svg%3E"); }
.dswd-hero-panel::after{ content:""; position:absolute; right:-60px; top:-60px; width:240px; height:240px; border-radius:50%; background:radial-gradient(circle,rgba(252,209,22,.35),transparent 70%); }
.dswd-hero-panel > *{ position:relative; z-index:1; }

/* ============================================================
   7 · TABLES
   ============================================================ */
.table thead th{
  background:var(--dswd-blue-tint) !important; color:var(--dswd-blue-deep) !important;
  font-family:var(--font-display); font-weight:700; font-size:12px; text-transform:uppercase; letter-spacing:.04em; border:none !important;
}
.table-hover tbody tr{ transition:background .15s; }
.table-hover tbody tr:hover{ background:#f4f8ff !important; }
.table td, .table th{ vertical-align:middle; }
.dswd-table-wrap{ background:#fff; border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; box-shadow:var(--sh-sm); }
.dswd-table-wrap .table{ margin:0; }

/* Status badges (DSWD tints) */
.status-badge, .badge{ font-weight:700; border-radius:30px; }
.status-pending    { background:var(--dswd-gold-tint) !important; color:#8a6500 !important; }
.status-for_review { background:#dceeff !important; color:#0a4b8c !important; }
.status-approved   { background:#d9f5e6 !important; color:#0c6a45 !important; }
.status-rejected   { background:var(--dswd-red-tint) !important; color:#9e0b1d !important; }
.status-for_finance{ background:#e7e0ff !important; color:#4b2da8 !important; }
.status-released   { background:#ffe9d6 !important; color:#9a4b00 !important; }
.status-claimed    { background:#d6f7ef !important; color:#0a6a59 !important; }
.status-active     { background:#d9f5e6 !important; color:#0c6a45 !important; }
.status-completed  { background:#dceeff !important; color:#0a4b8c !important; }
.status-standby,.status-cancelled{ background:#eef1f6 !important; color:#5c6b80 !important; }

.dswd-chip{ display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:700; padding:3px 11px; border-radius:30px; background:var(--dswd-blue-tint); color:var(--dswd-blue-deep); border:1px solid #cfe0ff; }

/* ============================================================
   8 · FORMS
   ============================================================ */
.form-control, .form-select{ border-radius:11px; border-color:#d4def0; transition:.18s var(--ease); }
.form-control:focus, .form-select:focus{ border-color:var(--dswd-blue) !important; box-shadow:0 0 0 .22rem rgba(0,56,168,.18) !important; }
.form-label{ font-weight:700; color:var(--text-2); font-size:13px; }
.input-group-text{ background:var(--dswd-blue-tint); color:var(--dswd-blue-deep); border-color:#d4def0; }
.form-check-input:checked{ background-color:var(--dswd-blue); border-color:var(--dswd-blue); }
.form-switch .form-check-input:checked{ background-color:var(--dswd-green); border-color:var(--dswd-green); }
.dswd-field{ position:relative; }
.dswd-field .fi-ico{ position:absolute; left:14px; top:50%; transform:translateY(-50%); color:var(--muted); }
.dswd-field input.has-ico, .dswd-field select.has-ico{ padding-left:42px; }

.nav-tabs .nav-link.active, .nav-pills .nav-link.active{ background:var(--dswd-blue) !important; color:#fff !important; border-color:var(--dswd-blue) !important; }
.nav-tabs .nav-link{ color:var(--dswd-blue-deep); font-weight:600; }
.nav-pills .nav-link{ color:var(--dswd-blue-deep); font-weight:600; border-radius:30px; }

/* Segmented control */
.dswd-seg{ display:inline-flex; background:var(--surface-2); border:1px solid var(--border); border-radius:30px; padding:4px; gap:2px; }
.dswd-seg button, .dswd-seg a{ border:none; background:transparent; color:var(--muted); font-weight:700; font-size:13px; padding:7px 16px; border-radius:30px; cursor:pointer; transition:.18s var(--ease); text-decoration:none; }
.dswd-seg .active{ background:var(--dswd-blue); color:#fff; box-shadow:var(--sh-sm); }

/* ============================================================
   9 · MODALS / DROPDOWNS / OFFCANVAS
   ============================================================ */
.modal-content{ border:none; border-radius:var(--radius-lg); box-shadow:var(--sh-xl); overflow:hidden; }
.modal-header{ background:var(--grad-blue); color:#fff; border:none; }
.modal-header .btn-close{ filter:invert(1) grayscale(1) brightness(2); }
.modal-header .modal-title{ font-family:var(--font-display); font-weight:700; }
.dropdown-menu{ border:1px solid var(--border); border-radius:14px; box-shadow:var(--sh-lg); padding:6px; }
.dropdown-item{ border-radius:9px; font-weight:600; font-size:13.5px; padding:8px 12px; }
.dropdown-item:hover{ background:var(--dswd-blue-tint); color:var(--dswd-blue-deep); }
.dropdown-item.text-danger:hover{ background:var(--dswd-red-tint); }
.offcanvas{ border:none; }

/* ============================================================
   10 · ALERTS / TOASTS
   ============================================================ */
.alert{ border:none; border-radius:14px; border-left:4px solid; font-weight:500; }
.alert-primary{ background:var(--dswd-blue-tint); color:var(--dswd-blue-deep); border-left-color:var(--dswd-blue); }
.alert-success{ background:#e3f7ee; color:var(--dswd-green-deep); border-left-color:var(--dswd-green); }
.alert-danger{ background:var(--dswd-red-tint); color:var(--dswd-red-deep); border-left-color:var(--dswd-red); }
.alert-warning{ background:var(--dswd-gold-tint); color:#7a5a00; border-left-color:var(--dswd-gold-deep); }
.alert-info{ background:#e2f3fb; color:#0a5a7d; border-left-color:var(--dswd-cyan); }

#dswd-toasts{ position:fixed; right:20px; bottom:20px; z-index:9999; display:flex; flex-direction:column; gap:10px; }
.dswd-toast{
  min-width:288px; max-width:380px; background:#fff; border:none;
  border-radius:13px; box-shadow:var(--sh-lg); padding:13px 15px; display:flex; gap:11px; align-items:flex-start;
  animation:fadeInRight .32s var(--ease) both; font-size:13.5px;
}
.dswd-toast.ok{ border-left-color:var(--dswd-green); } .dswd-toast.ok .ti{ color:var(--dswd-green); }
.dswd-toast.err{ border-left-color:var(--dswd-red); } .dswd-toast.err .ti{ color:var(--dswd-red); }
.dswd-toast.warn{ border-left-color:var(--dswd-gold-deep); } .dswd-toast.warn .ti{ color:var(--dswd-gold-deep); }
.dswd-toast .ti{ font-size:18px; margin-top:1px; }
.dswd-toast .tt{ font-weight:700; }
.dswd-toast .tm{ color:var(--muted); }

/* ============================================================
   11 · PROGRESS / METERS / SKELETON / SPINNER
   ============================================================ */
.progress{ background:#e6edf7; border-radius:30px; overflow:hidden; height:10px; }
.progress-bar{ background:var(--grad-blue); }
.dswd-meter{ height:10px; border-radius:30px; background:#e6edf7; overflow:hidden; }
.dswd-meter > span{ display:block; height:100%; border-radius:30px; background:var(--grad-blue); width:0; transition:width 1.1s var(--ease); }
.dswd-meter.gold > span{ background:var(--grad-gold); }
.dswd-meter.green > span{ background:linear-gradient(90deg,#1aa873,var(--dswd-green-deep)); }
.dswd-meter.red > span{ background:linear-gradient(90deg,#e23b4e,var(--dswd-red-deep)); }

.skeleton{ background:linear-gradient(90deg,#e9eef6 25%,#f5f8fc 37%,#e9eef6 63%); background-size:480px 100%; animation:shimmer 1.3s infinite linear; border-radius:8px; }
.dswd-spinner{ width:40px; height:40px; border-radius:50%; border:4px solid #d7e2f5; border-top-color:var(--dswd-blue); animation:spin .8s linear infinite; }
.ripple-host{ position:relative; overflow:hidden; }
.ripple-ink{ position:absolute; border-radius:50%; background:rgba(255,255,255,.5); transform:scale(0); animation:ripple .6s ease-out; pointer-events:none; }

/* Ring progress */
.dswd-ring{ --p:0; --c:var(--dswd-blue); width:120px; height:120px; border-radius:50%;
  background:conic-gradient(var(--c) calc(var(--p)*1%), #e6edf7 0); display:grid; place-items:center; position:relative; }
.dswd-ring::before{ content:""; position:absolute; inset:11px; border-radius:50%; background:#fff; }
.dswd-ring .rv{ position:relative; font-family:var(--font-display); font-weight:800; font-size:24px; color:var(--text); }

/* ============================================================
   12 · TIMELINE / STEPS / BREADCRUMB
   ============================================================ */
.dswd-timeline{ position:relative; padding-left:30px; }
.dswd-timeline::before{ content:""; position:absolute; left:9px; top:4px; bottom:4px; width:2px; background:linear-gradient(180deg,var(--dswd-blue),var(--dswd-blue-tint)); }
.dswd-tl-item{ position:relative; padding:0 0 18px; }
.dswd-tl-item::before{ content:""; position:absolute; left:-26px; top:3px; width:14px; height:14px; border-radius:50%; background:#fff; border:3px solid var(--dswd-blue); box-shadow:0 0 0 3px rgba(0,56,168,.12); }
.dswd-tl-item.red::before{ border-color:var(--dswd-red); box-shadow:0 0 0 3px rgba(206,17,38,.12); }
.dswd-tl-item.green::before{ border-color:var(--dswd-green); box-shadow:0 0 0 3px rgba(19,138,94,.12); }
.dswd-tl-item .tl-time{ font-size:11px; color:var(--muted); font-weight:700; }
.dswd-tl-item .tl-title{ font-weight:700; color:var(--text); font-size:13.5px; }

.dswd-steps{ display:flex; gap:0; }
.dswd-step{ flex:1; text-align:center; position:relative; }
.dswd-step .sd{ width:34px; height:34px; border-radius:50%; margin:0 auto 7px; display:grid; place-items:center; background:#e6edf7; color:var(--muted); font-weight:800; font-size:13px; border:2px solid #e6edf7; }
.dswd-step.done .sd{ background:var(--dswd-green); color:#fff; border-color:var(--dswd-green); }
.dswd-step.current .sd{ background:#fff; color:var(--dswd-blue); border-color:var(--dswd-blue); box-shadow:0 0 0 4px rgba(0,56,168,.14); }
.dswd-step::after{ content:""; position:absolute; top:17px; left:50%; width:100%; height:2px; background:#e6edf7; z-index:-1; }
.dswd-step:last-child::after{ display:none; }
.dswd-step.done::after{ background:var(--dswd-green); }
.dswd-step .sl{ font-size:11.5px; font-weight:700; color:var(--text-2); }

.crumb, .breadcrumb{ font-size:12px; color:var(--muted); }
.crumb a, .breadcrumb a{ color:var(--dswd-blue); text-decoration:none; } .crumb a:hover{ text-decoration:underline; }

/* misc colour utilities mapped to DSWD */
a.text-primary, .text-primary{ color:var(--dswd-blue) !important; }
.bg-primary{ background:var(--dswd-blue) !important; }
.bg-success{ background:var(--dswd-green) !important; }
.bg-danger{ background:var(--dswd-red) !important; }
.bg-warning{ background:var(--dswd-gold) !important; }
.bg-info{ background:var(--dswd-cyan) !important; }
.text-dswd-gold{ color:var(--dswd-gold-deep) !important; }
.bg-soft-blue{ background:var(--dswd-blue-tint) !important; }
.border-dswd{ border-color:var(--border) !important; }
hr{ border-color:var(--border); }

/* ============================================================
   13 · LOGIN  (split-screen DSWD hero)
   ============================================================ */
.dswd-login{ min-height:100vh; display:grid; grid-template-columns:1.05fr .95fr; }
.dswd-login .ll{ position:relative; overflow:hidden; color:#fff; padding:48px 56px; display:flex; flex-direction:column; justify-content:space-between;
  background:var(--grad-navy); }
.dswd-login .ll::before{ content:""; position:absolute; inset:0;
  background:radial-gradient(900px 480px at 110% -10%, rgba(0,70,207,.6), transparent 60%),
             url("data:image/svg+xml,%3Csvg width='72' height='72' viewBox='0 0 72 72' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.045'%3E%3Cpath d='M0 36h72M36 0v72'/%3E%3C/g%3E%3C/svg%3E"); }
.dswd-login .ll > *{ position:relative; z-index:1; }
.dswd-login .ll .seal{ width:84px; height:84px; border-radius:50%; background:#fff; padding:5px; box-shadow:0 0 0 3px rgba(252,209,22,.6), 0 14px 34px rgba(0,0,0,.5); animation:sealIn .9s var(--ease) both; }
.dswd-login .ll h1{ font-size:38px; font-weight:800; line-height:1.05; margin:22px 0 10px; }
.dswd-login .ll p{ color:rgba(255,255,255,.78); max-width:460px; }
.dswd-login .ll .lstats{ display:flex; gap:30px; margin-top:26px; }
.dswd-login .ll .lstats .v{ font-family:var(--font-display); font-size:30px; font-weight:800; color:var(--dswd-gold); }
.dswd-login .ll .lstats .l{ font-size:12px; color:rgba(255,255,255,.7); }
.dswd-login .lr{ display:flex; align-items:center; justify-content:center; padding:40px; background:var(--surface); }
.dswd-login .lr .lr-card{ width:100%; max-width:420px; }
@media(max-width:900px){ .dswd-login{ grid-template-columns:1fr; } .dswd-login .ll{ display:none; } }

/* ============================================================
   14 · PUBLIC SITE  (navbar, hero, sections, news, programs, footer)
   ============================================================ */
.navbar, .site-nav, header.header-top.public{ box-shadow:var(--sh-sm); }
.navbar-brand .seal, .site-logo{ border-radius:50%; box-shadow:0 0 0 2px rgba(252,209,22,.5); }
.nav-link.active, .navbar .active > .nav-link{ color:var(--dswd-blue) !important; font-weight:700; }

.hero, .public-hero{ position:relative; overflow:hidden; }
.section-title, .ph-title{ color:var(--dswd-blue-deep); font-weight:800; }
.eyebrow{ display:inline-flex; align-items:center; gap:7px; text-transform:uppercase; letter-spacing:.12em; font-size:11px; font-weight:800; color:var(--dswd-red); }
.eyebrow::before{ content:""; width:22px; height:2px; background:var(--dswd-red); }

/* core-values cards (Maagap/Matapat/Mahusay) */
.dswd-value{ background:#fff; border:none; border-radius:var(--radius); padding:24px; box-shadow:var(--sh-sm); transition:transform .25s var(--ease), box-shadow .25s; }
.dswd-value:hover{ transform:translateY(-5px); box-shadow:var(--sh-lg); }
.dswd-value .vi{ width:54px; height:54px; border-radius:15px; display:grid; place-items:center; color:#fff; font-size:23px; background:var(--grad-blue); margin-bottom:14px; }
.dswd-value:nth-child(2){ border-top-color:var(--dswd-red); } .dswd-value:nth-child(2) .vi{ background:linear-gradient(135deg,var(--dswd-red),var(--dswd-red-deep)); }
.dswd-value:nth-child(3){ border-top-color:var(--dswd-gold-deep); } .dswd-value:nth-child(3) .vi{ background:var(--grad-gold); color:#3a2d00; }

/* news cards */
.dswd-news{ background:#fff; border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; box-shadow:var(--sh-sm); transition:transform .25s var(--ease), box-shadow .25s; }
.dswd-news:hover{ transform:translateY(-5px); box-shadow:var(--sh-lg); }
.dswd-news .thumb{ aspect-ratio:16/10; overflow:hidden; background:var(--dswd-blue-tint); }
.dswd-news .thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); }
.dswd-news:hover .thumb img{ transform:scale(1.07); }
.dswd-news .nb{ padding:16px 18px; }
.dswd-news .nb h5{ font-size:15px; font-weight:700; color:var(--dswd-blue-deep); }

/* program cards (public) */
.dswd-program{ position:relative; background:#fff; border:1px solid var(--border); border-radius:var(--radius); padding:22px; box-shadow:var(--sh-sm); transition:transform .25s var(--ease), box-shadow .25s; overflow:hidden; }
.dswd-program:hover{ transform:translateY(-5px); box-shadow:var(--sh-lg); }
.dswd-program .pico{ width:50px; height:50px; border-radius:14px; display:grid; place-items:center; color:#fff; font-size:21px; background:var(--grad-blue); margin-bottom:13px; }

/* footer */
.site-footer, footer.dswd-footer{ background:var(--grad-navy); color:rgba(255,255,255,.8); }
.site-footer a, footer.dswd-footer a{ color:rgba(255,255,255,.78) !important; text-decoration:none; }
.site-footer a:hover, footer.dswd-footer a:hover{ color:#fff !important; }
.site-footer h6, footer.dswd-footer h6{ color:#fff; font-weight:800; }

/* announcement ticker */
.dswd-ticker{ background:linear-gradient(90deg,var(--dswd-red),var(--dswd-red-deep)); color:#fff; overflow:hidden; white-space:nowrap; }
.dswd-ticker .tk-label{ background:var(--dswd-gold); color:#3a2d00; font-weight:800; padding:7px 14px; }
.dswd-ticker .tk-track{ display:inline-block; padding:7px 0; animation:ticker 26s linear infinite; }
.dswd-ticker .tk-track span{ margin:0 32px; font-weight:600; }

/* ============================================================
   15 · CITIZEN & MODERATOR PORTAL accents
   ============================================================ */
.citizen-sidebar, .mod-sidebar{ background:var(--grad-navy) !important; }
.citizen-sidebar .brand img, .mod-sidebar .brand img{ border-radius:50%; box-shadow:0 0 0 2px rgba(252,209,22,.5); }
.citizen-card, .mod-card{ border-radius:var(--radius); border:1px solid var(--border); box-shadow:var(--sh-sm); }
.mod-badge, .moderator-badge{ background:var(--grad-gold); color:#3a2d00; font-weight:800; }

/* ============================================================
   16 · MOTION  ·  keyframes
   ============================================================ */
@keyframes fadeUp{ from{ opacity:0; transform:translateY(20px) } to{ opacity:1; transform:none } }
@keyframes fadeIn{ from{ opacity:0 } to{ opacity:1 } }
@keyframes fadeInRight{ from{ opacity:0; transform:translateX(22px) } to{ opacity:1; transform:none } }
@keyframes fadeInLeft{ from{ opacity:0; transform:translateX(-22px) } to{ opacity:1; transform:none } }
@keyframes zoomIn{ from{ opacity:0; transform:scale(.9) } to{ opacity:1; transform:scale(1) } }
@keyframes pop{ 0%{ transform:scale(.9); opacity:0 } 60%{ transform:scale(1.03) } 100%{ transform:scale(1); opacity:1 } }
@keyframes bounceIn{ 0%{ transform:scale(.3); opacity:0 } 50%{ transform:scale(1.08) } 70%{ transform:scale(.96) } 100%{ transform:scale(1); opacity:1 } }
@keyframes float{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-10px) } }
@keyframes shimmer{ 0%{ background-position:-480px 0 } 100%{ background-position:480px 0 } }
@keyframes spin{ to{ transform:rotate(360deg) } }
@keyframes ripple{ to{ transform:scale(2.6); opacity:0 } }
@keyframes pulseDot{ 0%{ box-shadow:0 0 0 0 rgba(206,17,38,.5) } 70%{ box-shadow:0 0 0 9px rgba(206,17,38,0) } 100%{ box-shadow:0 0 0 0 rgba(206,17,38,0) } }
@keyframes gradientShift{ 0%{ background-position:0% 50% } 50%{ background-position:100% 50% } 100%{ background-position:0% 50% } }
@keyframes ticker{ from{ transform:translateX(0) } to{ transform:translateX(-50%) } }
@keyframes sweep{ 0%{ transform:translateX(-120%) } 60%,100%{ transform:translateX(220%) } }
@keyframes countUp{ from{ opacity:.3 } to{ opacity:1 } }
@keyframes blink{ 50%{ opacity:.35 } }

/* scroll-reveal + entrance utilities */
.reveal{ opacity:0; }
.reveal.in{ animation:fadeUp .6s var(--ease) both; }
.reveal-left{ opacity:0; } .reveal-left.in{ animation:fadeInLeft .6s var(--ease) both; }
.reveal-right{ opacity:0; } .reveal-right.in{ animation:fadeInRight .6s var(--ease) both; }
.reveal-zoom{ opacity:0; } .reveal-zoom.in{ animation:zoomIn .55s var(--ease) both; }
.anim-pop{ animation:pop .5s var(--ease) both; }
.anim-bounce{ animation:bounceIn .7s var(--ease-back) both; }
.anim-float{ animation:float 5s ease-in-out infinite; }
.anim-fade{ animation:fadeIn .6s ease both; }

[data-delay="1"]{ animation-delay:.06s } [data-delay="2"]{ animation-delay:.12s }
[data-delay="3"]{ animation-delay:.18s } [data-delay="4"]{ animation-delay:.24s }
[data-delay="5"]{ animation-delay:.30s } [data-delay="6"]{ animation-delay:.36s }
[data-delay="7"]{ animation-delay:.42s } [data-delay="8"]{ animation-delay:.48s }
[data-delay="9"]{ animation-delay:.54s } [data-delay="10"]{ animation-delay:.60s }

/* live "now" pulsing dot */
.live-dot{ display:inline-block; width:9px; height:9px; border-radius:50%; background:var(--dswd-red); animation:pulseDot 1.8s infinite; }
.live-dot.green{ background:var(--dswd-green); animation:pulseDot 1.8s infinite; box-shadow:0 0 0 0 rgba(19,138,94,.5); }

/* shine sweep for hero buttons / featured cards */
.shine{ position:relative; overflow:hidden; }
.shine::after{ content:""; position:absolute; top:0; left:0; width:40%; height:100%;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.45),transparent); transform:translateX(-120%); }
.shine:hover::after{ animation:sweep 1.1s var(--ease); }

/* animated gradient text for hero numbers/titles */
.grad-text{ background:linear-gradient(90deg,var(--dswd-blue),var(--dswd-cyan),var(--dswd-blue)); background-size:200% auto; -webkit-background-clip:text; background-clip:text; color:transparent; animation:gradientShift 5s ease infinite; }

/* hover-lift helper */
.hover-lift{ transition:transform .22s var(--ease), box-shadow .22s; }
.hover-lift:hover{ transform:translateY(-4px); box-shadow:var(--sh-lg); }

/* scroll-to-top button (injected by JS) */
/* Back-to-top: centred along the bottom edge rather than tucked in the
   right-hand corner, where it was competing with the emergency and cookie
   buttons for the same space.

   The horizontal centring is done with left:50% plus a translateX(-50%) that
   every transform below has to carry — a bare transform:none on .show would
   otherwise knock it back off-centre, so each state restates the -50%. */
.dswd-totop{ position:fixed; left:50%; bottom:22px; right:auto;
  /* 48px, not 46: the guideline floor is 44 and the earlier 46 was measuring
     41 once the blanket button rules had had their say — under the floor on
     the one control a reader reaches for with a thumb. Stated in all four
     size properties so nothing later can squash it into an oval. */
  width:48px; height:48px; min-width:48px; min-height:48px;
  max-width:48px; max-height:48px;
  aspect-ratio:1/1; padding:0; border-radius:50%; border:none;
  display:flex; align-items:center; justify-content:center;
  background:var(--grad-blue); color:#fff; font-size:17px; cursor:pointer; box-shadow:var(--sh-blue);
  opacity:0; transform:translateX(-50%) translateY(16px) scale(.9);
  pointer-events:none; transition:.28s var(--ease); z-index:980; }
.dswd-totop.show{ opacity:1; transform:translateX(-50%) translateY(0) scale(1); pointer-events:auto; }
.dswd-totop:hover{ transform:translateX(-50%) translateY(-3px) scale(1); }
.dswd-totop:active{ transform:translateX(-50%) translateY(-1px) scale(.96); }
/* ── Back-to-top, responsive ───────────────────────────────────────────────
   Centred at the bottom it sat over the last row of a table on a phone and,
   at drawer widths, over the floating accessibility control. It moves to the
   right edge and lifts clear of the other floating buttons on small screens,
   and respects the safe-area inset so it is not under the home indicator on
   an iPhone. */
@media (max-width: 991px){
  .dswd-totop{
    left:auto; right:max(14px, env(safe-area-inset-right));
    bottom:calc(84px + env(safe-area-inset-bottom));
    width:46px; height:46px; min-width:46px; min-height:46px;
    max-width:46px; max-height:46px;
    transform:translateY(16px) scale(.9);
  }
  .dswd-totop.show{ transform:none; }
  .dswd-totop:hover{ transform:translateY(-3px); }
  .dswd-totop:active{ transform:translateY(-1px) scale(.96); }
}
@media (max-width: 575px){
  .dswd-totop{ width:44px; height:44px; min-width:44px; min-height:44px;
    max-width:44px; max-height:44px; font-size:15px; }
}
/* The footer is the end of the page. Nothing in normal flow goes below it. */
.page-foot{ position:relative; z-index:1; }
body > .dswd-totop{ margin:0; }

/* page-load progress bar (injected) */
.dswd-pageprog{ position:fixed; top:0; left:0; height:3px; width:0; z-index:9998; background:var(--grad-flag); transition:width .3s var(--ease); }

/* tooltip */
[data-dswd-tip]{ position:relative; }
[data-dswd-tip]::after{ content:attr(data-dswd-tip); position:absolute; bottom:130%; left:50%; transform:translateX(-50%) translateY(4px);
  background:var(--dswd-blue-900); color:#fff; font-size:11px; font-weight:600; padding:5px 9px; border-radius:7px; white-space:nowrap;
  opacity:0; pointer-events:none; transition:.18s var(--ease); z-index:50; }
[data-dswd-tip]:hover::after{ opacity:1; transform:translateX(-50%); }

/* ============================================================
   17 · RESPONSIVE  +  PRINT  +  REDUCED-MOTION
   ============================================================ */
.dswd-burger{ display:none; }
@media (max-width:992px){
  .sidebar, aside.sidebar, .dswd-sidebar{ transform:translateX(-100%); transition:transform .32s var(--ease); }
  .sidebar.open, aside.sidebar.open, .dswd-sidebar.open{ transform:none; }
  .main-wrap, .main-content{ margin-left:0 !important; }
  .page-foot{ margin-left:0 !important; }
  .dswd-burger{ display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; border-radius:11px;
    border:1px solid var(--border); background:#fff; color:var(--dswd-blue); font-size:18px; cursor:pointer; box-shadow:var(--sh-sm); }
  .dswd-scrim{ position:fixed; inset:0; background:rgba(0,15,46,.5); z-index:1039; opacity:0; pointer-events:none; transition:opacity .3s; }
  .dswd-scrim.show{ opacity:1; pointer-events:auto; }
  .dswd-topsearch input{ min-width:150px; }
}
@media (max-width:640px){
  .dswd-login .lr{ padding:24px 18px; }
  .topbar, .header-top{ padding-left:16px !important; padding-right:16px !important; }
}
@media print{
  .sidebar, .dswd-sidebar, .topbar, .header-top, .no-print, .dswd-flagbar, .dswd-govstrip, .dswd-totop, .dswd-burger{ display:none !important; }
  .main-wrap, .main-content, .content{ margin:0 !important; }
  body{ background:#fff !important; }
}
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  .reveal, .reveal-left, .reveal-right, .reveal-zoom{ opacity:1 !important; }
}