/* =========================================================
   DIPR Uttarakhand ERP — Public home page (index.html)
   Builds on the theme tokens in style.css (sky blue + orange).
   Orange text/fills use the 700 step so white text on them passes
   WCAG AA (orange-500 on white is only 2.8:1).
   ========================================================= */
:root{
  --orange-700:#c2410c;
  --orange-800:#9a3412;
  --h-text:var(--ink);
  --h-muted:#55657a;          /* 5.9:1 on white — gray-500 is too light for body copy */
  --h-border:var(--gray-200);
  --h-topbar:#0c4a6e;         /* sky-900 */
  --h-nav:#0369a1;            /* sky-700 */
  --h-nav-hover:#075985;
  --h-footer:#0b3954;
  --h-footer-bottom:#082c42;
}

html{font-size:100%}
html.fs-sm{font-size:90%}
html.fs-lg{font-size:112.5%}
html.fs-xl{font-size:125%}
html{scroll-padding-top:72px}

.home-body{height:auto; font-size:.9375rem; line-height:1.6; background:var(--canvas); color:var(--h-text)}
.home-body h1, .home-body h2, .home-body h3{color:var(--navy-900)}
.form-label.required::after{content:" *"; color:var(--danger)}

/* Skip link */
.h-skip{
  position:absolute; left:12px; top:-60px; z-index:2000; padding:10px 16px; border-radius:0 0 8px 8px;
  background:var(--orange-700); color:#fff; font-weight:600;
}
.h-skip:focus{top:0; color:#fff}
#main-content:focus{outline:none}

/* Visible keyboard focus everywhere on the page */
.home-body a:focus-visible, .home-body button:focus-visible, .home-body input:focus-visible, .home-body [tabindex]:focus-visible{
  outline:3px solid var(--orange-500); outline-offset:2px; box-shadow:none;
}

/* ---------- 1. Top utility bar ---------- */
.h-topbar{background:var(--h-topbar); color:rgba(255,255,255,.9); font-size:.8rem; padding:4px 0}
.h-tb-gov{font-weight:600}
.h-tb-sep{opacity:.4}
.h-tb-tools{list-style:none; margin:0; padding:0; display:flex; align-items:center; gap:6px; flex-wrap:wrap}
.h-tb-link{background:none; border:0; padding:4px 6px; color:rgba(255,255,255,.9); font-size:.8rem}
.h-tb-link:hover{color:#fff; text-decoration:underline}
.h-font-ctrl{display:flex; gap:2px}
.h-tb-btn{
  min-width:30px; height:26px; padding:0 7px; border-radius:4px; font-size:.8rem; font-weight:600; line-height:1;
  border:1px solid rgba(255,255,255,.3); background:transparent; color:#fff;
}
.h-tb-btn sup{font-size:.6em}
.h-tb-btn:hover, .h-tb-btn[aria-pressed="true"]{background:#fff; color:var(--h-topbar)}
.h-lang-btn{font-family:"Hind",var(--font-base)}

/* ---------- 2. Header ---------- */
.h-header{background:#fff; padding:12px 0; border-bottom:1px solid var(--h-border)}
.h-brand{display:flex; align-items:center; gap:14px; min-width:0; color:var(--h-text)}
.h-brand:hover{color:var(--h-text)}
.h-brand-logo{width:76px; height:76px; object-fit:contain; flex:0 0 auto}
.h-brand-text{display:flex; flex-direction:column; line-height:1.25; padding-left:14px; border-left:3px solid var(--orange-500); min-width:0}
.h-brand-hi{font-family:"Hind",var(--font-base); font-size:1.6rem; font-weight:700; color:var(--sky-700)}
.h-brand-en{font-size:1rem; font-weight:600; color:var(--navy-900)}
.h-brand-tag{font-size:.8rem; font-weight:600; color:var(--orange-700); margin-top:2px}
.h-header-right{align-items:center; gap:20px}
.h-search{position:relative; width:300px}
.h-search .form-control{height:42px; padding-right:44px; border-radius:21px; background:var(--gray-50)}
.h-search-btn{position:absolute; right:4px; top:4px; width:34px; height:34px; border:0; border-radius:50%; background:var(--sky-600); color:#fff}
.h-search-btn:hover{background:var(--sky-700)}
.h-search-results{
  position:absolute; top:calc(100% + 6px); left:0; right:0; z-index:1040; max-height:340px; overflow:auto;
  background:#fff; border:1px solid var(--h-border); border-radius:10px; box-shadow:var(--shadow-md); padding:6px;
}
.h-search-results a{display:block; padding:8px 10px; border-radius:6px; color:var(--h-text); font-size:.875rem}
.h-search-results a small{display:block; color:var(--h-muted); font-size:.75rem}
.h-search-results a:hover, .h-search-results a:focus{background:var(--sky-50); color:var(--sky-700)}
.h-search-results .h-empty{padding:10px; color:var(--h-muted); font-size:.875rem}
.h-helpline{display:flex; align-items:center; gap:10px; padding-left:20px; border-left:1px solid var(--h-border)}
.h-helpline > i{font-size:1.6rem; color:var(--orange-700)}
.h-helpline span{display:flex; flex-direction:column; line-height:1.2}
.h-helpline small{font-size:.75rem; color:var(--h-muted)}
.h-helpline a{font-weight:700; font-size:1rem; color:var(--sky-700)}

/* ---------- 3. Navigation ---------- */
.h-nav{background:var(--h-nav); padding:0; border-bottom:3px solid var(--orange-500); position:sticky; top:0; z-index:1030}
.h-nav .container{position:relative}
.h-nav-mobile-label{color:#fff; font-weight:600; padding:12px 0}
.h-nav .nav-link{color:#fff; font-size:.875rem; font-weight:500; padding:.85rem .7rem !important; border-radius:0; white-space:nowrap}
.h-nav .nav-link:hover, .h-nav .nav-link:focus, .h-nav .nav-link.show{background:var(--h-nav-hover); color:#fff}
.h-nav .nav-link.active{background:var(--h-nav-hover); box-shadow:inset 0 -3px 0 var(--orange-500)}
.h-nav .nav-link .bi-house-door{font-size:1rem}
@media(min-width:1200px){
  .visually-hidden-xl{position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap}
}
@media(max-width:1199.98px){
  .h-nav .nav-link .bi-house-door{margin-right:6px}
}
.h-nav-toggler{border:1px solid rgba(255,255,255,.5); color:#fff; font-size:1.5rem; padding:2px 10px}
.h-nav-toggler:focus{box-shadow:0 0 0 3px rgba(255,255,255,.4)}
.h-nav .dropdown-menu{margin-top:0; border-top:3px solid var(--orange-500); border-radius:0 0 12px 12px; min-width:240px}
.h-nav .dropdown-item{font-size:.875rem; white-space:normal}
.h-nav .dropdown-item i{color:var(--sky-600); width:18px; display:inline-block}
.h-nav .dropdown-header{font-size:.7rem; margin:0}

/* Mega menu */
.h-mega-item{position:static}
@media(min-width:1200px){
  .h-nav .h-mega{left:12px; right:12px; padding:18px 20px}
}
.h-mega-title{font-size:.8rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--sky-700); margin:4px 12px 6px; padding-bottom:6px; border-bottom:1px solid var(--gray-100)}
.h-mega-title i{color:var(--orange-700)}

/* Mobile menu: stacked, scrollable */
@media(max-width:1199.98px){
  .h-nav .navbar-collapse{max-height:calc(100vh - 60px); overflow-y:auto; padding-bottom:10px}
  .h-nav .nav-link{padding:.7rem .5rem !important; border-top:1px solid rgba(255,255,255,.1)}
  .h-nav .dropdown-menu{border-radius:8px; margin:4px 0 8px; box-shadow:none}
}

/* LOGIN button */
.h-login-btn{
  display:inline-flex; align-items:center; gap:8px; margin:6px 0 6px 8px; padding:8px 20px; border-radius:6px;
  border:2px solid #fff; background:var(--orange-700); color:#fff; font-weight:700; font-size:.875rem; letter-spacing:.06em;
  box-shadow:0 4px 12px -4px rgba(0,0,0,.35);
}
.h-login-btn:hover{background:var(--orange-800); color:#fff}
.h-login-btn i{font-size:1.1rem}

/* ---------- Ticker ---------- */
.h-ticker{background:#fff; border-bottom:1px solid var(--h-border); font-size:.875rem}
.h-ticker-label{
  flex:0 0 auto; display:flex; align-items:center; gap:6px; padding:8px 14px;
  background:var(--orange-700); color:#fff; font-weight:600; white-space:nowrap;
}
.h-ticker-window{flex:1 1 auto; overflow:hidden; display:flex; align-items:center; position:relative}
.h-ticker-track{display:inline-flex; gap:48px; padding-left:24px; white-space:nowrap; animation:h-marquee 55s linear infinite}
.h-ticker-track span{color:var(--h-text)}
.h-ticker-track span::before{content:"\25CF"; color:var(--orange-500); font-size:.6em; margin-right:10px; vertical-align:2px}
.h-ticker:hover .h-ticker-track, .h-ticker:focus-within .h-ticker-track, .h-ticker.is-paused .h-ticker-track{animation-play-state:paused}
.h-ticker-toggle{flex:0 0 auto; border:0; background:var(--sky-50); color:var(--sky-700); width:38px; font-size:1.1rem}
.h-ticker-toggle:hover{background:var(--sky-100)}
@keyframes h-marquee{from{transform:translateX(0)} to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .h-ticker-track{animation:none}
  .h-ticker-window{overflow-x:auto}
}

/* ---------- Shared section styles ---------- */
.h-section{padding:56px 0}
.h-section-tight{padding:40px 0}
.h-section-white{background:#fff; border-top:1px solid var(--h-border); border-bottom:1px solid var(--h-border)}
.h-sec-head{text-align:center; margin-bottom:28px}
.h-sec-head h2{font-size:1.75rem; font-weight:700; margin:4px 0 0}
.h-sec-head h2::after{content:""; display:block; width:56px; height:4px; border-radius:2px; margin:10px auto 0; background:linear-gradient(90deg, var(--sky-600) 50%, var(--orange-500) 50%)}
.h-sec-head.text-start h2::after{margin-left:0}
.h-sec-head p{max-width:720px; margin:12px auto 0; color:var(--h-muted)}
.h-kicker{display:inline-block; font-size:.75rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--orange-700)}

/* Buttons */
.h-btn-primary{background:var(--sky-700); border:1px solid var(--sky-700); color:#fff}
.h-btn-primary:hover, .h-btn-primary:focus{background:var(--sky-900); border-color:var(--sky-900); color:#fff}
.h-btn-accent{background:var(--orange-700); border:1px solid var(--orange-700); color:#fff}
.h-btn-accent:hover, .h-btn-accent:focus{background:var(--orange-800); border-color:var(--orange-800); color:#fff}
.h-btn-outline{background:#fff; border:1px solid var(--sky-600); color:var(--sky-700)}
.h-btn-outline:hover, .h-btn-outline:focus{background:var(--sky-700); border-color:var(--sky-700); color:#fff}

/* ---------- 4. Hero ---------- */
.h-hero{
  padding:52px 0 60px;
  background:url("../images/himalaya-bg.svg") center bottom / 100% auto no-repeat, linear-gradient(180deg, var(--sky-50) 0%, #fff 100%);
  border-bottom:1px solid var(--h-border);
}
.h-hero-title{font-size:2.35rem; font-weight:700; line-height:1.2; margin:10px 0 14px; letter-spacing:-.01em}
.h-hero-lead{font-size:1.1rem; color:var(--h-muted); max-width:640px; margin-bottom:24px}
.h-hero-trust{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px 20px; font-size:.85rem; color:var(--gray-700)}
.h-hero-trust i{color:var(--success); margin-right:4px}

/* ---------- Status pills (icon + label, never colour alone) ---------- */
.h-status{display:inline-flex; align-items:center; gap:4px; padding:2px 8px; border-radius:20px; font-size:.75rem; font-weight:600; white-space:nowrap}
.h-status-ok{background:var(--success-bg); color:#15803d}
.h-status-warn{background:var(--warning-bg); color:#8a5a12}
.h-status-bad{background:var(--danger-bg); color:#b91c1c}
.h-status-info{background:var(--sky-100); color:var(--sky-900)}

/* ---------- Services by user category ---------- */
.h-svc-tabs{justify-content:center; gap:8px; margin-bottom:14px}
.h-svc-tabs .nav-link{
  display:inline-flex; align-items:center; gap:8px; padding:9px 16px; border-radius:24px; font-size:.875rem; font-weight:600;
  background:var(--gray-50); border:1px solid var(--h-border); color:var(--gray-700);
}
.h-svc-tabs .nav-link:hover{border-color:var(--sky-300); color:var(--sky-700)}
.h-svc-tabs .nav-link.active{background:var(--sky-700); border-color:var(--sky-700); color:#fff}
.h-svc-tabs .h-count{font-size:.7rem; padding:1px 7px; border-radius:10px; background:rgba(12,74,110,.08)}
.h-svc-tabs .nav-link.active .h-count{background:rgba(255,255,255,.22)}
.h-svc-intro{text-align:center; color:var(--h-muted); font-size:.9rem; margin-bottom:22px}

.h-svc-card{height:100%; display:flex; flex-direction:column; padding:20px; border-radius:12px; background:#fff; border:1px solid var(--h-border); transition:border-color .15s, box-shadow .15s}
.h-svc-card:hover{border-color:var(--sky-300); box-shadow:var(--shadow-sm)}
.h-svc-top{display:flex; gap:14px; align-items:flex-start; margin-bottom:10px}
.h-svc-ico{flex:0 0 auto; width:46px; height:46px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:1.3rem; background:var(--orange-100); color:var(--orange-700)}
.h-svc-card h3{font-size:1rem; font-weight:700; margin:0; line-height:1.3}
.h-svc-card h3 small{display:block; font-family:"Hind",var(--font-base); font-weight:500; font-size:.8rem; color:var(--h-muted); margin-top:2px}
.h-svc-card p{font-size:.875rem; color:var(--h-muted); margin:0 0 16px; flex:1}
.h-svc-foot{display:flex; align-items:center; justify-content:space-between; gap:8px; padding-top:12px; border-top:1px dashed var(--h-border)}
.h-svc-foot .btn{font-size:.8rem; font-weight:600; padding:.3rem .8rem}
.h-badge{display:inline-flex; align-items:center; gap:4px; font-size:.72rem; font-weight:600; padding:3px 9px; border-radius:20px}
.h-badge-online{background:var(--success-bg); color:#15803d}
.h-badge-login{background:var(--sky-100); color:var(--sky-900)}
.h-legend{display:flex; flex-wrap:wrap; justify-content:center; gap:10px 28px; margin-top:22px; font-size:.8rem; color:var(--h-muted)}
.h-legend .h-badge{margin-right:6px}

/* ---------- 6. Panels: notifications + tenders ---------- */
.h-panel{background:#fff; border:1px solid var(--h-border); border-radius:12px; box-shadow:var(--shadow-sm); padding:20px 22px}
.h-panel-full{height:100%}
.h-panel-head{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:6px}
.h-panel-head h2{font-size:1.2rem; font-weight:700; margin:0}
.h-panel-head h2 i{color:var(--orange-700); margin-right:4px}
.h-notice-tabs{flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden}
.h-notice-tabs .nav-link{white-space:nowrap; padding:10px 14px}
.h-notice-list, .h-tender-list, .h-download-list{list-style:none; margin:0; padding:0}
.h-notice-list li{display:flex; gap:14px; padding:12px 0; border-bottom:1px solid var(--gray-100)}
.h-notice-list li:last-child{border-bottom:0}
.h-date{flex:0 0 54px; height:54px; border-radius:8px; background:var(--sky-50); border:1px solid var(--sky-100); display:flex; flex-direction:column; align-items:center; justify-content:center; line-height:1.1}
.h-date strong{font-size:1.2rem; color:var(--sky-700)}
.h-date span{font-size:.68rem; text-transform:uppercase; color:var(--h-muted); font-weight:600}
.h-notice-body{min-width:0; flex:1}
.h-notice-body a{font-weight:600; color:var(--h-text); font-size:.9rem}
.h-notice-body a:hover{color:var(--sky-700); text-decoration:underline}
.h-meta{display:flex; flex-wrap:wrap; align-items:center; gap:4px 14px; margin-top:4px; font-size:.75rem; color:var(--h-muted)}
.h-meta i{margin-right:3px}
.h-meta .bi-file-earmark-pdf{color:#b91c1c}
.h-new{display:inline-block; margin-left:6px; padding:1px 6px; border-radius:4px; font-size:.65rem; font-weight:700; letter-spacing:.04em; background:var(--orange-700); color:#fff; vertical-align:2px}

.h-tender-list li{padding:12px 0; border-bottom:1px solid var(--gray-100)}
.h-tender-list li:last-child{border-bottom:0}
.h-tender-no{font-size:.72rem; font-weight:600; color:var(--h-muted); letter-spacing:.02em}
.h-tender-list a{display:block; font-weight:600; font-size:.875rem; color:var(--h-text); margin:2px 0 6px; line-height:1.4}
.h-tender-list a:hover{color:var(--sky-700); text-decoration:underline}
.h-tender-meta{display:flex; justify-content:space-between; align-items:center; gap:8px; font-size:.75rem; color:var(--h-muted)}

/* ---------- 7. Information sections ---------- */
.h-check-list{list-style:none; padding:0; margin:16px 0 0}
.h-check-list li{position:relative; padding:4px 0 4px 28px}
.h-check-list li::before{content:"\F26A"; font-family:"bootstrap-icons"; position:absolute; left:0; top:4px; color:var(--success)}
.h-modules{background:var(--gray-50); border:1px solid var(--h-border); border-radius:12px; padding:22px}
.h-modules-title{font-size:1.05rem; font-weight:700; margin:0 0 14px}
.h-module{display:flex; gap:12px; align-items:center; height:100%; padding:12px; background:#fff; border:1px solid var(--h-border); border-radius:10px}
.h-module > i{flex:0 0 auto; width:40px; height:40px; border-radius:10px; display:flex; align-items:center; justify-content:center; background:var(--sky-50); color:var(--sky-700); font-size:1.15rem}
.h-module strong{display:block; font-size:.875rem}
.h-module small{display:block; font-size:.75rem; color:var(--h-muted)}

.h-faq .accordion-item{border:1px solid var(--h-border); border-radius:10px !important; margin-bottom:8px; overflow:hidden}
.h-faq .accordion-button{font-weight:600; font-size:.9rem; color:var(--h-text); padding:14px 16px}
.h-faq .accordion-button:not(.collapsed){background:var(--sky-50); color:var(--sky-700); box-shadow:none}
.h-faq .accordion-button:focus{box-shadow:0 0 0 3px rgba(14,165,233,.25)}
.h-faq .accordion-body{font-size:.875rem; color:var(--gray-700)}

.h-download-list li{border-bottom:1px solid var(--gray-100)}
.h-download-list a{display:flex; align-items:center; gap:12px; padding:11px 4px; color:var(--h-text); font-size:.875rem}
.h-download-list a:hover{color:var(--sky-700); background:var(--sky-50)}
.h-file-ico{flex:0 0 auto; width:36px; height:36px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:1.1rem}
.h-file-ico.pdf{background:var(--danger-bg); color:#b91c1c}
.h-file-ico.docx{background:var(--sky-100); color:var(--sky-700)}
.h-file-ico.xlsx{background:var(--success-bg); color:var(--success)}
.h-download-list .h-new{margin-left:6px}
.h-download-list .h-list-empty{border-bottom:0}
.h-download-list .h-dl-text{flex:1; min-width:0; line-height:1.35}
.h-download-list small{display:block; color:var(--h-muted); font-size:.72rem}
.h-download-list .bi-download{color:var(--sky-600)}

.h-links{background:#fff; border-top:1px solid var(--h-border); padding:28px 0}
.h-links-title{font-size:1rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; text-align:center; margin-bottom:16px}
.h-state-links{list-style:none; margin:0 0 18px; padding:0; display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:12px}
.h-state-links a{display:flex; align-items:center; gap:12px; height:100%; padding:12px 14px; border-radius:10px; background:var(--sky-700); color:#fff; font-weight:600; font-size:.875rem; line-height:1.3}
.h-state-links a:hover, .h-state-links a:focus{background:var(--sky-900); color:#fff}
.h-state-links img{flex:0 0 auto; width:40px; height:40px; object-fit:contain; border-radius:8px; background:#fff; padding:3px}
.h-state-links span{flex:1; min-width:0}
.h-state-links small{display:block; font-weight:400; font-size:.75rem; color:var(--sky-100); margin-top:2px}
.h-state-links .bi{font-size:.75rem; opacity:.8}
.h-logo-links{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(9, minmax(0,1fr)); gap:10px}
.h-logo-links a{display:flex; align-items:center; justify-content:center; height:72px; padding:6px 8px; border:1px solid var(--h-border); border-radius:10px; background:#fff; transition:border-color .15s, box-shadow .15s}
.h-logo-links a:hover, .h-logo-links a:focus{border-color:var(--sky-300); box-shadow:var(--shadow-sm)}
.h-logo-links img{max-width:100%; max-height:58px; object-fit:contain}
@media(max-width:1199.98px){ .h-logo-links{grid-template-columns:repeat(5, minmax(0,1fr))} .h-state-links{grid-template-columns:repeat(3, minmax(0,1fr))} }
@media(max-width:767.98px){ .h-logo-links{grid-template-columns:repeat(3, minmax(0,1fr))} .h-state-links{grid-template-columns:repeat(2, minmax(0,1fr))} }
@media(max-width:419.98px){ .h-state-links{grid-template-columns:1fr} }

/* Hon'ble Governor & Chief Minister cards (hero, right column) */
.h-leader{height:100%; margin:0; padding:18px 12px 16px; text-align:center; background:#fff; border:1px solid var(--h-border); border-radius:10px; box-shadow:var(--shadow-sm)}
.h-leader img{width:140px; height:140px; max-width:100%; object-fit:cover; object-position:top; border-radius:6px; margin-bottom:14px}
.h-leader strong{display:block; font-family:"Hind",var(--font-base); font-size:1.08rem; font-weight:700; color:var(--navy-900); line-height:1.35}
.h-leader span{display:block; font-family:"Hind",var(--font-base); font-size:.88rem; font-weight:600; color:var(--gray-700); margin-top:4px}
.h-leader small{display:block; font-size:.75rem; color:var(--h-muted); margin-top:6px}

/* ---------- 9. Footer ---------- */
.h-footer{background:var(--h-footer); color:rgba(255,255,255,.85); padding:44px 0 0; font-size:.875rem}
.h-footer a{color:#fff}
.h-footer a:hover{color:#fed7aa; text-decoration:underline}
.h-ft-brand{display:flex; gap:12px; align-items:center; margin-bottom:16px}
.h-ft-brand img{width:56px; height:56px; border-radius:8px; background:#fff; padding:2px; object-fit:contain}
.h-ft-brand strong{display:block; font-family:"Hind",var(--font-base); font-size:1.15rem; color:#fff}
.h-ft-brand small{display:block; font-size:.78rem; color:var(--sky-200); line-height:1.35}
.h-ft-address{display:flex; gap:10px; margin:0; font-style:normal; line-height:1.6}
.h-ft-address i{color:var(--orange-500); margin-top:2px}
.h-ft-title{font-size:.85rem !important; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:#fff !important; margin-bottom:14px; padding-bottom:8px; border-bottom:2px solid var(--orange-500); display:inline-block}
.h-ft-links, .h-ft-contact{list-style:none; margin:0; padding:0}
.h-ft-links li{margin-bottom:6px}
.h-ft-links a{color:rgba(255,255,255,.85)}
.h-ft-contact li{display:flex; gap:10px; margin-bottom:10px}
.h-ft-contact i{color:var(--orange-500); font-size:1.05rem; margin-top:2px}
.h-ft-contact small{display:block; font-size:.72rem; color:var(--sky-200)}
.h-ft-contact span{word-break:break-word}
.h-ft-bottom{background:var(--h-footer-bottom); margin-top:36px; padding:14px 0; font-size:.78rem; color:rgba(255,255,255,.75)}

/* ---------- Floating controls + chatbot ---------- */
.h-fab-chat{
  position:fixed; right:20px; bottom:20px; z-index:1040; display:inline-flex; align-items:center; gap:8px;
  padding:12px 18px; border-radius:30px; border:0; background:var(--sky-700); color:#fff; font-weight:600; font-size:.875rem;
  box-shadow:0 10px 24px -8px rgba(12,74,110,.6);
}
.h-fab-chat i{font-size:1.2rem}
.h-fab-chat:hover{background:var(--sky-900)}
.h-fab-top{position:fixed; right:24px; bottom:80px; z-index:1040; width:42px; height:42px; border-radius:50%; border:1px solid var(--h-border); background:#fff; color:var(--sky-700); box-shadow:var(--shadow-sm)}
.h-fab-top:hover{background:var(--sky-50)}
@media(max-width:575.98px){ .h-fab-chat span{display:none} .h-fab-chat{padding:14px} }

.h-chat{position:fixed; right:20px; bottom:84px; z-index:1045; width:min(370px, calc(100vw - 32px)); max-height:min(560px, calc(100vh - 110px)); display:flex; flex-direction:column; background:#fff; border-radius:14px; box-shadow:0 20px 50px -12px rgba(12,74,110,.45); overflow:hidden; border:1px solid var(--h-border)}
.h-chat[hidden]{display:none}
.h-chat-head{display:flex; align-items:center; gap:10px; padding:12px 14px; background:var(--sky-700); color:#fff}
.h-chat-head strong{display:block; font-size:.95rem}
.h-chat-head small{display:block; font-size:.72rem; color:var(--sky-100)}
.h-chat-avatar{width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.18); display:flex; align-items:center; justify-content:center; font-size:1.2rem}
.h-chat-close{margin-left:auto; border:0; background:transparent; color:#fff; font-size:1rem; width:32px; height:32px; border-radius:6px}
.h-chat-close:hover{background:rgba(255,255,255,.15)}
.h-chat-body{flex:1; overflow-y:auto; padding:14px; background:var(--gray-50); display:flex; flex-direction:column; gap:8px; min-height:200px}
.h-msg{max-width:85%; padding:9px 12px; border-radius:12px; font-size:.85rem; line-height:1.45}
.h-msg-bot{background:#fff; border:1px solid var(--h-border); border-bottom-left-radius:4px; align-self:flex-start}
.h-msg-user{background:var(--sky-700); color:#fff; border-bottom-right-radius:4px; align-self:flex-end}
.h-chat-suggest{display:flex; flex-wrap:wrap; gap:6px; padding:8px 12px 0; background:#fff}
.h-chat-suggest button{border:1px solid var(--sky-200); background:var(--sky-50); color:var(--sky-700); border-radius:14px; padding:3px 10px; font-size:.75rem}
.h-chat-suggest button:hover{background:var(--sky-700); color:#fff}
.h-chat-form{display:flex; gap:8px; padding:10px 12px 12px; background:#fff}


/* ---------- Responsive ---------- */
@media(max-width:991.98px){
  .h-hero{padding:36px 0 44px}
  .h-hero-title{font-size:1.9rem}
}
@media(max-width:767.98px){
  .h-brand-logo{width:56px; height:56px}
  .h-brand-hi{font-size:1.2rem}
  .h-brand-en{font-size:.85rem}
  .h-brand-tag{font-size:.72rem}
  .h-brand-text{padding-left:10px}
  .h-section{padding:40px 0}
  .h-sec-head h2{font-size:1.4rem}
  .h-hero-title{font-size:1.6rem}
  .h-hero-lead{font-size:1rem}
  .h-panel{padding:16px}
  .h-ticker-label span{display:none}
}
@media(max-width:575.98px){
  .h-login-btn{padding:7px 12px}
  .h-leader{padding:14px 8px 12px}
  .h-leader img{width:110px; height:110px}
  .h-leader strong{font-size:.95rem}
}

/* ---------- High-contrast mode (toggle in top bar) ---------- */
html.hc body, html.hc body *:not(i):not(img):not(canvas):not(.bi){
  background-color:#000 !important; background-image:none !important; color:#fff !important;
  border-color:#fff !important; box-shadow:none !important; text-shadow:none !important;
}
html.hc a, html.hc a *, html.hc .dropdown-item{color:#ffeb3b !important}
html.hc button, html.hc .btn, html.hc .form-control{border:1px solid #fff !important}
html.hc i.bi{color:inherit !important}
html.hc .h-sec-head h2::after{background:#ffeb3b !important}
html.hc .h-login-btn{background:#ffeb3b !important; color:#000 !important}
html.hc .h-login-btn *{background:transparent !important; color:#000 !important}
html.hc canvas{filter:invert(1)}
html.hc #h-logo-links a{background:#fff !important} /* logos are dark-on-transparent */

/* ---------- Print ---------- */
@media print{
  .h-topbar, .h-nav, .h-ticker, .h-fab-chat, .h-fab-top, .h-chat{display:none !important}
}

/* ---------- Notifications: per-section "View all" + View All page (notices.html) ---------- */
.h-notice-more{display:inline-flex; align-items:center; gap:6px; margin-top:10px; padding-top:10px; font-size:.85rem; font-weight:600; color:var(--sky-700)}
.h-notice-more:hover{color:var(--orange-700); text-decoration:underline}

.h-page-band{background:#fff; border-bottom:1px solid var(--h-border); padding:18px 0 0}
.h-crumb{display:flex; flex-wrap:wrap; gap:6px; list-style:none; margin:0 0 8px; padding:0; font-size:.8rem; color:var(--h-muted)}
.h-crumb li + li::before{content:"/"; margin-right:6px; color:var(--gray-500)}
.h-crumb a{color:var(--sky-700)}
.h-page-band h1{font-size:1.6rem; font-weight:700; margin:0; color:var(--navy-900)}
.h-page-band h1 i{color:var(--orange-700); margin-right:6px}
.h-page-band h1 small{font-size:1rem; font-weight:500; color:var(--h-muted); margin-left:6px}
.h-page-band .h-notice-tabs{margin:14px 0 0; border-bottom:0}

.h-list-toolbar{display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-bottom:6px}
.h-list-toolbar .search-box{position:relative; flex:1 1 260px; max-width:420px}
.h-list-toolbar .search-box i{position:absolute; left:12px; top:50%; transform:translateY(-50%); color:var(--gray-500)}
.h-list-toolbar .search-box input{padding-left:36px}
.h-list-toolbar .form-select{flex:0 1 180px; width:auto}
.h-list-count{margin:0 0 4px; font-size:.8rem; color:var(--h-muted)}
.h-list-empty{padding:28px 0; text-align:center; color:var(--h-muted)}
.h-list-empty i{display:block; font-size:1.8rem; color:var(--gray-500); margin-bottom:6px}
@media(max-width:575.98px){ .h-list-toolbar .form-select{flex:1 1 calc(50% - 5px)} .h-page-band h1{font-size:1.3rem} }

/* ---------- Organisation structure (organisation-structure.html) ---------- */
.os-lead{max-width:860px; margin:6px 0 16px; color:var(--h-muted); font-size:.92rem}
.os-lead span{display:block}
.os-en{font-size:.8rem; font-weight:500; color:var(--h-muted); margin-left:4px}

.os-chart{padding:8px 0 4px}
.os-tier{position:relative; display:flex; flex-wrap:wrap; justify-content:center; gap:12px; padding:14px 0}
.os-tier + .os-tier::before{content:""; position:absolute; top:-2px; left:50%; width:2px; height:16px; background:var(--sky-200)}
.os-tier-note{position:absolute; left:0; top:50%; transform:translateY(-50%); font-size:.72rem; font-weight:700; color:var(--orange-700); text-transform:uppercase; letter-spacing:.05em}
.os-node{min-width:170px; max-width:220px; padding:10px 14px; text-align:center; border-radius:10px; background:var(--sky-50); border:1px solid var(--sky-200); border-top:3px solid var(--sky-600)}
.os-node strong{display:block; font-size:.95rem; color:var(--navy-900)}
.os-node span{display:block; font-size:.75rem; color:var(--h-muted)}
.os-node small{display:block; margin-top:4px; font-size:.72rem; font-weight:600; color:var(--sky-700)}
.os-branches{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:14px; margin-top:12px; padding-top:16px; border-top:1px dashed var(--sky-200)}
.os-branch{border:1px solid var(--h-border); border-radius:10px; padding:14px 16px}
.os-branch h3{font-size:1rem; font-weight:700; margin:0 0 8px}
.os-branch h3 i{color:var(--orange-700)}
.os-branch h3 span{font-size:.8rem; font-weight:500; color:var(--h-muted)}
.os-branch ul{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:4px 14px; font-size:.85rem}
.os-branch li small{color:var(--h-muted); font-size:.75rem}
.os-branch ul + .os-districts{margin-top:10px}
.os-districts{display:flex; flex-wrap:wrap; gap:6px}
.os-districts span{padding:2px 9px; border-radius:999px; background:var(--sky-50); border:1px solid var(--sky-100); font-size:.78rem}
.os-branch:last-child ul{grid-template-columns:1fr}

#os-tabs .nav-link small{color:var(--h-muted); font-size:.72rem}
.os-level{margin-top:18px}
.os-level h3{font-size:1.05rem; font-weight:700; margin:0 0 8px; color:var(--navy-900)}
.os-level h3 small{font-size:.8rem; font-weight:500; color:var(--h-muted)}
.os-table{font-size:.85rem; margin-bottom:6px}
.os-table thead th{background:var(--sky-50); color:var(--navy-900); font-weight:700; vertical-align:bottom; white-space:nowrap}
.os-table th small, .os-table td small{display:block; font-weight:400; font-size:.72rem; color:var(--h-muted)}
.os-table td:first-child{font-weight:700; color:var(--sky-700); width:60px}
.os-table .os-pay{white-space:nowrap}
.os-table .os-vac{color:#b91c1c; font-weight:700}
.os-table tfoot th{background:var(--gray-50); border-top:2px solid var(--sky-200)}
.os-note{font-size:.78rem; color:var(--h-muted); margin:0 0 4px}
.os-source{margin:14px 0 0; font-size:.78rem; color:var(--h-muted)}
.os-source span{display:block}
@media(max-width:767.98px){ .os-branches, .os-branch ul{grid-template-columns:1fr} .os-tier-note{position:static; transform:none; width:100%; text-align:center} .os-node{min-width:140px} }
@media print{
  .h-topbar, .h-header, .h-nav, .h-ticker, .h-footer, .h-fab-chat, .h-fab-top, .h-chat, .h-list-toolbar, #os-tabs, #os-print{display:none !important}
  .h-panel{box-shadow:none; border:0; padding:0}
}
.os-table .os-sno{width:70px; color:var(--h-muted) !important; font-weight:500 !important}
.os-table td:nth-child(2){font-weight:700; color:var(--sky-700); width:90px}