/* ============================================================
   स्वास्थ्य कार्यालय तेह्रथुम — Shared Design System
   One stylesheet, used by: index.html, detail.html,
   localBody.html, localBody1.html
   ============================================================ */

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

:root{
  /* --- Brand tokens --- */
  --navy-950:#0B1F3A;
  --navy-800:#12294D;
  --navy-700:#1D3D6B;
  --navy-600:#2A5089;
  --crimson-700:#8E1F2F;
  --crimson-600:#A32638;
  --sage-600:#256B5B;
  --sage-500:#2F7D6B;
  --sage-100:#E4F3EE;
  --amber-600:#B4740E;
  --amber-100:#FDF1DC;

  --paper:#F3F5F8;
  --surface:#FFFFFF;
  --ink-900:#16213A;
  --ink-700:#3B4A63;
  --ink-500:#657191;
  --line:#DCE2EA;
  --line-strong:#C3CCDA;

  --radius-sm:8px;
  --radius-md:12px;
  --radius-lg:16px;
  --shadow-sm:0 1px 2px rgba(16,29,54,.06), 0 1px 1px rgba(16,29,54,.04);
  --shadow-md:0 6px 20px rgba(16,29,54,.10);
  --shadow-lg:0 16px 40px rgba(16,29,54,.16);

  --font-head:'Noto Serif Devanagari', 'Noto Serif', Georgia, serif;
  --font-body:'Noto Sans Devanagari', 'Noto Sans', 'Segoe UI', Roboto, sans-serif;
}

/* ============================================================
   GLOBAL RESET & TYPE
   ============================================================ */
*{ box-sizing:border-box; }

body{
  font-family:var(--font-body) !important;
  background:var(--paper) !important;
  color:var(--ink-900) !important;
  line-height:1.55;
}

h1,h2,h3{ font-family:var(--font-head); color:var(--navy-950); }

a{ color:var(--navy-700); }

/* ============================================================
   LAYOUT WRAP
   ============================================================ */
.wrap{
  max-width:1100px;
  margin:0 auto;
  padding:16px;
}

/* ============================================================
   MASTHEAD / HEADER — official letterhead treatment
   ============================================================ */
@keyframes crestFadeIn{
  from{ opacity:0; transform:translateY(-6px) scale(.97); }
  to{ opacity:1; transform:translateY(0) scale(1); }
}
@keyframes goldShimmer{
  0%{ background-position:-200% 0; }
  100%{ background-position:200% 0; }
}
@keyframes watermarkPulse{
  0%,100%{ opacity:.05; }
  50%{ opacity:.09; }
}

.header.card,
.header{
  background:var(--surface) !important;
  border:1px solid var(--line-strong) !important;
  border-top:5px solid var(--crimson-600) !important;
  border-radius:var(--radius-lg) !important;
  box-shadow:0 10px 30px rgba(11,31,58,.10), var(--shadow-sm) !important;
  padding:30px 20px 24px !important;
  text-align:center;
  position:relative;
  margin-bottom:18px;
  overflow:hidden;
  isolation:isolate;
}

/* Gold shimmer line just under the crimson top border */
.header.card::before,
.header::before{
  content:"";
  position:absolute;
  top:0; left:0; right:0;
  height:5px;
  background:linear-gradient(90deg,
    var(--crimson-600) 0%, #E7B84B 25%, var(--crimson-600) 50%, #E7B84B 75%, var(--crimson-600) 100%);
  background-size:200% 100%;
  animation:goldShimmer 6s linear infinite;
}

/* Large faint national emblem watermark, centered behind the text */
.header.card::after,
.header::after{
  content:"";
  position:absolute;
  top:50%; left:50%;
  width:260px; height:260px;
  transform:translate(-50%,-50%);
  background-image:url("govlogo.png");
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center;
  opacity:.06;
  z-index:-1;
  animation:watermarkPulse 5s ease-in-out infinite;
  pointer-events:none;
}

.header .govlogo,
.govlogo{
  width:112px;
  height:112px;
  object-fit:contain;
  margin-bottom:8px;
  filter:drop-shadow(0 3px 8px rgba(11,31,58,.18));
  animation:crestFadeIn .5s ease both;
}

.titles{ text-align:center; position:relative; z-index:1; }

.org-subsmall{
  font-size:14.5px;
  font-weight:700;
  color:var(--navy-800);
  letter-spacing:.3px;
  line-height:1.5;
}

.org-title{
  font-family:var(--font-head);
  font-size:28px;
  font-weight:700;
  color:var(--navy-950);
  margin:6px 0 3px;
  letter-spacing:.2px;
}

/* Thin gold divider under the province/ministry lines, above the org title */
.org-subsmall:nth-of-type(3)::after{
  content:"";
  display:block;
  width:64px;
  height:2px;
  margin:8px auto 0;
  background:linear-gradient(90deg, transparent, #C99A2E, transparent);
}

.form-title{
  font-size:15px;
  font-weight:600;
  color:var(--sage-600);
  background:var(--sage-100);
  display:inline-block;
  padding:5px 14px;
  border-radius:999px;
  margin-top:10px;
}

.green-note{
  margin-top:14px;
  background:var(--amber-100);
  color:var(--amber-600);
  border:1px solid #F0D9A8;
  border-radius:var(--radius-sm);
  padding:10px 14px;
  font-size:13.5px;
  font-weight:600;
  text-align:center;
}

/* ============================================================
   USER MENU
   ============================================================ */
#userMenuBox{
  position:fixed !important;
  top:48px !important;
  right:16px !important;
  z-index:99999 !important;
}

.top-right-actions{ display:flex; gap:8px; }

#userMenuBtn,
#btnLogout{
  border:none !important;
  border-radius:999px !important;
  padding:9px 16px !important;
  font-weight:700 !important;
  font-size:14px !important;
  cursor:pointer;
  box-shadow:var(--shadow-sm);
}

#userMenuBtn{ background:var(--navy-700) !important; color:#fff !important; }
#btnLogout{ background:var(--crimson-600) !important; color:#fff !important; }

#userDropdown{
  margin-top:10px !important;
  background:var(--surface) !important;
  border:1px solid var(--line) !important;
  border-radius:var(--radius-md) !important;
  padding:14px !important;
  width:250px !important;
  box-shadow:var(--shadow-lg) !important;
}

#userDropdown p{ font-size:14px; color:var(--ink-700); }

#btnRequestPwChange,
#btnSubmitPwChange{
  width:100%;
  padding:10px !important;
  border:none !important;
  border-radius:var(--radius-sm) !important;
  cursor:pointer;
  font-weight:700 !important;
  background:var(--amber-600) !important;
  color:#fff !important;
}

#detailProfile{
  width:100%;
  margin-top:8px;
  padding:10px;
  border:1px solid var(--line-strong);
  background:#fff;
  border-radius:var(--radius-sm);
  cursor:pointer;
  font-weight:600;
  color:var(--navy-700);
}

/* ============================================================
   CARDS
   ============================================================ */
.card{
  background:var(--surface) !important;
  border:1px solid var(--line) !important;
  border-radius:var(--radius-lg) !important;
  box-shadow:var(--shadow-sm) !important;
  padding:20px !important;
  margin-bottom:16px;
}

.card:hover{ box-shadow:var(--shadow-md) !important; }

.card-box{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; }

.role-card{
  border-radius:var(--radius-md) !important;
  border:1px solid var(--line) !important;
  text-align:center;
  transition:.15s;
}
.role-card:hover{ transform:translateY(-3px); border-color:var(--navy-600) !important; }

.mobile-card{ text-align:center; max-width:420px; margin:0 auto 16px; }
.mobile-card label{ display:block; margin-bottom:10px; font-weight:600; color:var(--ink-700); }

/* ============================================================
   FORM ELEMENTS
   ============================================================ */
input[type="text"],
input[type="password"],
input[type="email"],
input:not([type]),
select,
textarea{
  font-family:var(--font-body);
  border:1px solid var(--line-strong) !important;
  border-radius:var(--radius-sm) !important;
  padding:10px 12px !important;
  font-size:15px !important;
  background:#fff !important;
  color:var(--ink-900) !important;
  width:100%;
  margin:4px 0 12px;
}

input:focus, select:focus, textarea:focus{
  outline:none;
  border-color:var(--navy-600) !important;
  box-shadow:0 0 0 3px rgba(29,61,107,.12);
}

label{ font-weight:600; color:var(--ink-700); font-size:14px; }

#mobile, #pass, #passwordInput{
  text-align:center;
  font-size:18px !important;
  max-width:280px;
  margin-left:auto; margin-right:auto;
}

#mobile:disabled{
  background:var(--sage-100) !important;
  color:var(--sage-600) !important;
  border-color:var(--sage-500) !important;
  opacity:1 !important;
  font-weight:700;
}

#verifyBtn.verified-locked{
  background:var(--sage-600) !important;
  cursor:default !important;
  opacity:1 !important;
}
#verifyBtn.verified-locked:hover{
  transform:none !important;
}

/* ============================================================
   BUTTONS — unify every ad-hoc button style
   ============================================================ */
.btn,
button,
#verifyBtn,
#passVerifyBtn,
#btnCheckPassword,
#regPreviewBtn,
#btnHome1,
#btnHome2,
#goUser,
#goAdmin,
#goLocalBody,
#newRegisterBtn,
#exitBtn,
#pendingOkBtn,
.btn-download,
.close-btn{
  font-family:var(--font-body);
  border:none !important;
  border-radius:var(--radius-sm) !important;
  padding:11px 20px !important;
  font-size:15px !important;
  font-weight:700 !important;
  cursor:pointer;
  background:var(--navy-700) !important;
  color:#fff !important;
  box-shadow:var(--shadow-sm);
  transition:transform .12s, box-shadow .12s, opacity .12s;
  background-image:none !important;
}

.btn:hover, button:hover{ transform:translateY(-1px); box-shadow:var(--shadow-md); opacity:.97; }

.btn-primary,
#verifyBtn,
#passVerifyBtn,
#btnCheckPassword,
#regPreviewBtn,
#goUser,
#btnGoTraining,
#submitParticipantsBtn,
.openParticipantsBtn{
  background:var(--navy-700) !important;
  color:#fff !important;
}

.btn-ghost,
#btnExitPassword,
#exitBtn,
#btnHome2,
.cancel-btn{
  background:#fff !important;
  color:var(--navy-700) !important;
  border:1px solid var(--line-strong) !important;
  box-shadow:none;
}

#btnLogout,
#btnHome1,
.close-btn,
.hf-close,
.training-modal-header button,
.close-btn,
.btn-pdelete{
  background:var(--crimson-600) !important;
  color:#fff !important;
}

#goAdmin,
#goLocalBody,
.staffBtn{
  background:var(--sage-600) !important;
  color:#fff !important;
}

.btn-download{
  background:var(--sage-600) !important;
}

/* ============================================================
   TABLES — every variant used across pages
   ============================================================ */
table,
.table,
.base-table,
.simple-table,
.training-table,
.participant-table,
.serviceTable,
.filter-table,
.report-table,
#empTable{
  width:100% !important;
  border-collapse:collapse !important;
  background:var(--surface) !important;
  font-size:14px;
}

table th, .table th, .base-table th, .simple-table th,
.training-table th, .participant-table th, .serviceTable th,
#empTable th{
  background:var(--navy-800) !important;
  color:#fff !important;
  font-weight:600 !important;
  padding:11px 10px !important;
  text-align:center;
  position:sticky; top:0; z-index:2;
}

table td, .table td, .base-table td, .simple-table td,
.training-table td, .participant-table td, .serviceTable td,
#empTable td{
  border:1px solid var(--line) !important;
  padding:9px 10px !important;
  color:var(--ink-900);
}

table tbody tr:nth-child(even) td,
.simple-table tbody tr:nth-child(even),
#empTable tbody tr:nth-child(even){
  background:#F7F9FC !important;
}

table tbody tr:hover td,
.simple-table tbody tr:hover,
#empTable tbody tr:hover{
  background:#EAF1FB !important;
}

.table-wrapper, .table-scroll{ border-radius:var(--radius-md); border:1px solid var(--line); }

/* status cells */
.green{ background:var(--sage-100) !important; color:var(--sage-600) !important; }
.yellow{ background:var(--amber-100) !important; color:var(--amber-600) !important; }

/* ============================================================
   DASHBOARD TAB / FILTER CHIPS (remove rainbow gradients)
   ============================================================ */
.dashboard1{ margin:20px 0; }
.dashboard1 .tab-btn{
  background:var(--navy-700) !important;
  box-shadow:var(--shadow-sm) !important;
  border-radius:var(--radius-md) !important;
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
  animation:rowFadeIn .5s ease both;
  transition:transform .18s ease, box-shadow .18s ease;
}
.dashboard1 .tab-btn:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md) !important; }
.dashboard1 .tab-btn *,
.dashboard1 span{
  background:none !important;
  -webkit-text-fill-color:#fff !important;
  color:#fff !important;
}

.dashboard2{ margin-left:0 !important; }
.dashboard2 button{
  background:var(--surface) !important;
  border:1px solid var(--line) !important;
  box-shadow:var(--shadow-sm) !important;
  border-radius:var(--radius-md) !important;
  color:var(--navy-700) !important;
  -webkit-text-fill-color:var(--navy-700) !important;
  animation:rowFadeIn .5s ease both;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.dashboard2 button:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow-md) !important;
  border-color:var(--navy-600) !important;
}
.dashboard2 button:nth-child(1){ animation-delay:.05s; }
.dashboard2 button:nth-child(2){ animation-delay:.10s; }
.dashboard2 button:nth-child(3){ animation-delay:.15s; }
.dashboard2 button:nth-child(4){ animation-delay:.20s; }
.dashboard2 button:nth-child(5){ animation-delay:.25s; }
.dashboard2 button:nth-child(6){ animation-delay:.30s; }
.dashboard2 button:nth-child(7){ animation-delay:.35s; }
.dashboard2 button *,
.dashboard2 span{
  background:none !important;
  -webkit-text-fill-color:var(--navy-700) !important;
  color:var(--navy-700) !important;
}

.training-dashboard{ margin-left:0 !important; }

.tab-mo{ border-left:6px solid var(--navy-600) !important; }
.tab-ha{ border-left:6px solid var(--sage-600) !important; }
.tab-nurse{ border-left:6px solid var(--amber-600) !important; }
.tab-ahw{ border-left:6px solid var(--crimson-600) !important; }
.tab-anm{ border-left:6px solid #6B4FA0 !important; }
.tab-labass{ border-left:6px solid #0E7C86 !important; }
.tab-other{ border-left:6px solid var(--ink-500) !important; }

.filter-box{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-md); padding:12px 14px; }

/* ============================================================
   MODALS
   ============================================================ */
.training-modal, .modal, .serviceModal{
  background:rgba(11,31,58,.55) !important;
}

.training-modal-content, .modal-content, .serviceModalContent, .hf-panel{
  background:var(--surface) !important;
  border-radius:var(--radius-lg) !important;
  box-shadow:var(--shadow-lg) !important;
}

.training-modal-header, .modal-header, .serviceHeader{
  border-bottom:1px solid var(--line) !important;
}

/* ============================================================
   TRAINING CARDS
   ============================================================ */
.training-card{
  background:var(--surface) !important;
  border:1px solid var(--line) !important;
  border-radius:var(--radius-md) !important;
  box-shadow:var(--shadow-sm) !important;
}
.training-title{
  background:var(--navy-700) !important;
  background-image:none !important;
  border-radius:var(--radius-md) !important;
}
.training-stats .done{ background:var(--sage-100) !important; color:var(--sage-600) !important; }
.training-stats .requested{ background:var(--amber-100) !important; color:var(--amber-600) !important; }

.notification-wrapper{ margin-bottom:10px; }
.training-badge{ background:var(--crimson-600) !important; }

/* ============================================================
   FACILITY TREE SIDEBAR
   ============================================================ */
#facilityTree{
  background:var(--surface) !important;
  border:1px solid var(--line) !important;
  box-shadow:var(--shadow-sm) !important;
}
.treeDistrict{ background:var(--navy-800) !important; color:#fff !important; }
.treeLocal{ background:#F0F3F8 !important; color:var(--ink-900); }
.treeInst{ background:#fff !important; border:1px solid var(--line) !important; }
.treeInst:hover{ background:var(--sage-100) !important; }
.treeInst.active{ background:#E4ECFB !important; border-color:var(--navy-600) !important; }
.activeInstitution, .treeDetail.active{ color:var(--amber-600) !important; }
.activeLocal{ background:var(--amber-600) !important; color:#fff !important; }

/* ============================================================
   SECTION / DETAIL LABELS (detail.html)
   ============================================================ */
h3.section-title, .section-title{
  color:var(--navy-800) !important;
  border-bottom:2px solid var(--sage-100);
  padding-bottom:4px;
}
p.section-body, .section-body{ color:var(--ink-700) !important; }

.rp-title{
  background:var(--paper) !important;
  border:1px solid var(--line);
  color:var(--navy-800) !important;
}

#mtxDetailModal.modal{
  z-index:999999 !important;
}

/* ============================================================
   TRAINING MATRIX — progress bar + detail modal
   ============================================================ */
.mtx-progress-wrap{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:160px;
}
.mtx-progress-bar{
  flex:1;
  height:8px;
  background:#E7EBF1;
  border-radius:999px;
  overflow:hidden;
}
.mtx-progress-fill{
  height:100%;
  background:linear-gradient(90deg, var(--sage-500), var(--sage-600));
  border-radius:999px;
}
.mtx-progress-fill-amber{
  background:linear-gradient(90deg, #D9A441, var(--amber-600));
}
.mtx-progress-text{
  font-size:12.5px;
  font-weight:700;
  color:var(--ink-700);
  white-space:nowrap;
}

.mtx-view-btn{
  padding:7px 14px !important;
  font-size:13.5px !important;
}

/* ============================================================
   TRAINING MANAGEMENT — internal व्यक्ति/तालिम view toggle
   ============================================================ */
.tw-view-toggle{
  display:flex;
  gap:4px;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:999px;
  padding:3px;
  margin:0 auto;
}
.tw-toggle-btn{
  border:none !important;
  background:transparent !important;
  color:var(--ink-700) !important;
  padding:7px 16px !important;
  border-radius:999px !important;
  font-size:13.5px !important;
  font-weight:700 !important;
  cursor:pointer;
  box-shadow:none !important;
}
.tw-toggle-btn.tw-toggle-active{
  background:var(--navy-700) !important;
  color:#fff !important;
  cursor:default;
}

/* Old cards/chart section removed — merged into तालिम व्यवस्थापन विवरण */
.training-dashboard{
  display:none !important;
}

/* ============================================================
   REPORT PANEL — तालिम तथा सेवा-तत्परता प्रतिवेदन (large, embedded)
   ============================================================ */
@keyframes reportPanelIn{
  from{ opacity:0; transform:translateY(14px); }
  to{ opacity:1; transform:translateY(0); }
}
@keyframes tealShimmer{
  0%{ background-position:-200% 0; }
  100%{ background-position:200% 0; }
}

.report-panel{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:20px;
  box-shadow:0 14px 36px rgba(11,31,58,.12);
  padding:26px 24px 28px;
  margin:26px 0 20px;
  position:relative;
  overflow:hidden;
  animation:reportPanelIn .5s cubic-bezier(.22,1,.36,1) both;
}

.report-panel::before{
  content:"";
  position:absolute;
  top:0; left:0; right:0;
  height:6px;
  background:linear-gradient(90deg,
    var(--sage-600) 0%, #E7B84B 25%, var(--navy-700) 50%, #E7B84B 75%, var(--sage-600) 100%);
  background-size:200% 100%;
  animation:tealShimmer 7s linear infinite;
}

.report-panel-header{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-bottom:18px;
  padding-top:6px;
}

.report-panel-title{
  font-family:var(--font-head);
  font-size:22px;
  color:var(--navy-950);
  margin:0;
}

.report-toggle{
  background:var(--paper);
}

.report-view{
  animation:reportPanelIn .4s ease both;
}

/* Service type buttons: bigger, punchier, animated */
.serviceTypeContainer{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin-bottom:20px;
}
.serviceTypeContainer button{
  background:linear-gradient(135deg, var(--sage-600), var(--sage-500)) !important;
  color:#fff !important;
  border:none !important;
  padding:16px 24px !important;
  border-radius:14px !important;
  font-size:16px !important;
  font-weight:700 !important;
  box-shadow:0 6px 16px rgba(47,125,107,.25);
  transition:transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .18s ease;
  animation:reportPanelIn .45s ease both;
}
.serviceTypeContainer button:nth-child(odd){
  background:linear-gradient(135deg, var(--navy-700), var(--navy-600)) !important;
  box-shadow:0 6px 16px rgba(29,61,107,.28);
}
.serviceTypeContainer button:hover{
  transform:translateY(-4px) scale(1.03);
  box-shadow:0 10px 24px rgba(11,31,58,.24);
}

#selectedServiceTitle{
  color:var(--navy-800);
  font-size:19px;
  margin:6px 0 14px;
  padding-left:12px;
  border-left:4px solid #E7B84B;
}

/* ============================================================
   FACILITY DRILL-DOWN — पालिका → संस्था → detail
   ============================================================ */
@keyframes fdBoxIn{
  from{ opacity:0; transform:translateY(12px) scale(.96); }
  to{ opacity:1; transform:translateY(0) scale(1); }
}
@keyframes fdRedPulse{
  0%,100%{ box-shadow:0 0 0 0 rgba(211,71,71,.35); }
  50%{ box-shadow:0 0 0 6px rgba(211,71,71,0); }
}

.fd-root{ min-height:120px; }

.fd-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(200px, 1fr));
  gap:16px;
  margin-top:6px;
}

.fd-box{
  background:var(--surface) !important;
  border:1px solid var(--line);
  border-radius:16px;
  padding:22px 16px;
  text-align:center;
  cursor:pointer;
  box-shadow:var(--shadow-sm);
  animation:fdBoxIn .4s cubic-bezier(.22,1,.36,1) both;
  transition:transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .18s ease, border-color .18s ease;
}
.fd-box:hover{
  transform:translateY(-5px) scale(1.02);
  box-shadow:0 14px 30px rgba(11,31,58,.16);
  border-color:var(--navy-600);
}
.fd-box-icon{ font-size:40px; margin-bottom:8px; }
.fd-box-title{ font-weight:700; color:var(--navy-950) !important; -webkit-text-fill-color:var(--navy-950) !important; font-size:15px; line-height:1.35; }
.fd-box-sub{ margin-top:6px; font-size:13px; color:var(--ink-500) !important; -webkit-text-fill-color:var(--ink-500) !important; font-weight:600; }

.fd-box-palika{ border-top:4px solid var(--navy-700); }
.fd-box-facility{ border-top:4px solid var(--sage-600); }

.fd-grid-palika .fd-box-palika:nth-child(1){ border-top-color:var(--navy-700); }
.fd-grid-palika .fd-box-palika:nth-child(2){ border-top-color:var(--sage-600); }
.fd-grid-palika .fd-box-palika:nth-child(3){ border-top-color:var(--amber-600); }
.fd-grid-palika .fd-box-palika:nth-child(4){ border-top-color:var(--crimson-600); }
.fd-grid-palika .fd-box-palika:nth-child(5){ border-top-color:#6B4FA0; }
.fd-grid-palika .fd-box-palika:nth-child(6){ border-top-color:#0E7C86; }

/* पालिका boxes — larger, per request */
.fd-grid-palika{
  grid-template-columns:repeat(3, 1fr);
  gap:22px;
}
.fd-grid-palika .fd-box-palika{
  padding:42px 24px;
}
.fd-grid-palika .fd-box-icon{
  font-size:68px;
}
.fd-grid-palika .fd-box-title{
  font-size:19px;
}
.fd-grid-palika .fd-box-sub{
  font-size:14.5px;
}
@media (max-width:760px){
  .fd-grid-palika{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width:480px){
  .fd-grid-palika{ grid-template-columns:1fr; }
}

.fd-back{
  background:none !important;
  border:none !important;
  color:var(--navy-700) !important;
  font-weight:700 !important;
  padding:6px 0 !important;
  cursor:pointer;
  box-shadow:none !important;
  font-size:14px !important;
}
.fd-back:hover{ text-decoration:underline; }

.fd-crumb-title{
  font-family:var(--font-head);
  color:var(--navy-950);
  margin:6px 0 16px;
}

.fd-loading, .fd-empty{
  color:var(--ink-500);
  padding:20px;
  text-align:center;
  font-style:italic;
}

/* ============================================================
   FACILITY LIST (vertical) + side preview panel
   ============================================================ */
.fd-master-detail{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:22px;
  align-items:start;
}
@media (max-width:800px){
  .fd-master-detail{ grid-template-columns:1fr; }
}

.fd-list-col{
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  overflow:hidden;
  max-height:520px;
  overflow-y:auto;
  background:var(--surface);
}

.fd-list-row{
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 16px;
  border-bottom:1px solid var(--line);
  cursor:pointer;
  animation:fdBoxIn .3s ease both;
  transition:background-color .15s ease, transform .15s ease;
}
.fd-list-row:last-child{ border-bottom:none; }
.fd-list-row:hover{
  background:var(--paper);
  transform:translateX(3px);
}
.fd-list-icon{ font-size:22px; flex-shrink:0; }
.fd-list-main{ flex:1; min-width:0; }
.fd-list-name{ font-weight:700; color:var(--navy-950); font-size:14.5px; }
.fd-list-sub{ font-size:12.5px; color:var(--ink-500); margin-top:2px; }
.fd-list-arrow{ font-size:20px; color:var(--ink-500); }

.fd-preview-col{
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  background:var(--surface);
  padding:20px;
  min-height:200px;
  animation:fdBoxIn .3s ease both;
}
.fd-preview-title{
  font-family:var(--font-head);
  font-size:18px;
  color:var(--navy-950);
  margin-bottom:4px;
}
.fd-preview-sub{ color:var(--ink-500); font-size:13.5px; margin-bottom:14px; }
.fd-preview-label{ font-weight:700; color:var(--navy-800); font-size:13.5px; margin-bottom:8px; }

.fd-svc-badges{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:18px; }
.fd-svc-badge{
  background:var(--sage-100);
  color:var(--sage-600);
  border-radius:999px;
  padding:6px 13px;
  font-size:12.5px;
  font-weight:700;
}
.fd-svc-badge-muted{
  background:var(--paper);
  color:var(--ink-500);
}

.fd-preview-btn{
  width:100%;
  justify-content:center;
}

/* ============================================================
   FACILITY PROFILE HEADER — red letterhead + emblem watermark
   ============================================================ */
.fd-profile-header{
  position:relative;
  text-align:center;
  padding:24px 16px;
  margin-bottom:20px;
  border-radius:var(--radius-lg);
  background:var(--surface);
  border:1px solid var(--line);
  overflow:hidden;
  isolation:isolate;
}
.fd-profile-header::before{
  content:"";
  position:absolute;
  top:50%; left:50%;
  width:180px; height:180px;
  transform:translate(-50%,-50%);
  background-image:url("govlogo.png");
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center;
  opacity:.07;
  z-index:-1;
}
.fd-profile-palika{
  font-weight:800;
  color:var(--crimson-600);
  font-size:16.5px;
  letter-spacing:.3px;
  text-transform:uppercase;
}
.fd-profile-name{
  font-family:var(--font-head);
  font-size:24px;
  color:var(--navy-950);
  margin-top:6px;
  font-weight:700;
}

.fd-detail-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:22px;
  animation:fdBoxIn .35s ease both;
}
@media (max-width:760px){
  .fd-detail-grid{ grid-template-columns:1fr; }
}

.fd-detail-col h4{
  margin:0 0 12px;
  color:var(--navy-800);
  font-size:15.5px;
}

.fd-staff-list, .fd-service-list{
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  overflow:hidden;
  max-height:420px;
  overflow-y:auto;
}

.fd-staff-row{
  padding:11px 14px;
  border-bottom:1px solid var(--line);
  background:var(--surface);
}
.fd-staff-row:last-child{ border-bottom:none; }
.fd-staff-name{ font-weight:700; color:var(--ink-900); font-size:14.5px; }
.fd-staff-meta{ font-size:12.5px; color:var(--ink-500); margin-top:2px; }

.fd-service-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  padding:12px 14px;
  border-bottom:1px solid var(--line);
  font-size:14px;
}
.fd-service-row:last-child{ border-bottom:none; }
.fd-service-name{ font-weight:700; }
.fd-service-status{ font-size:12.5px; font-weight:700; white-space:nowrap; }

.fd-status-green{ background:var(--sage-100); }
.fd-status-green .fd-service-name{ color:var(--sage-600); }
.fd-status-green .fd-service-status{ color:var(--sage-600); }


.fd-status-yellow{ background:var(--amber-100); }
.fd-status-yellow .fd-service-name{ color:var(--amber-600); }
.fd-status-yellow .fd-service-status{ color:var(--amber-600); }

.fd-status-red{ background:#FDEAEA; animation:fdRedPulse 2s ease-in-out infinite; }
.fd-status-red .fd-service-name{ color:#B93A3A; }
.fd-status-red .fd-service-status{ color:#B93A3A; }

/* ============================================================
   ANIMATIONS — तालिम व्यवस्थापन विवरण interactivity
   ============================================================ */

/* Staggered row entrance */
@keyframes rowFadeIn{
  from{ opacity:0; transform:translateY(6px); }
  to{ opacity:1; transform:translateY(0); }
}
.row-fade-in{
  animation:rowFadeIn .38s ease both;
}

/* Modal pop-in */
@keyframes modalPop{
  from{ opacity:0; transform:scale(.94) translateY(8px); }
  to{ opacity:1; transform:scale(1) translateY(0); }
}
@keyframes modalBackdropFade{
  from{ opacity:0; }
  to{ opacity:1; }
}
.modal:not(.hidden){
  animation:modalBackdropFade .2s ease both;
}
.modal:not(.hidden) .modal-content{
  animation:modalPop .28s cubic-bezier(.22,1,.36,1) both;
}

/* Smooth toggle pill */
.tw-toggle-btn{
  transition:background-color .22s ease, color .22s ease, transform .15s ease;
}
.tw-toggle-btn:not(.tw-toggle-active):hover{
  background:rgba(29,61,107,.08) !important;
  transform:translateY(-1px);
}
.tw-toggle-btn.tw-toggle-active{
  box-shadow:0 2px 8px rgba(29,61,107,.28);
}

/* Row hover lift for the interactive tables */
#empTable tbody tr,
#trainingMatrixTable tbody tr,
#trainingHwTable tbody tr{
  transition:background-color .18s ease, transform .18s ease;
}
#empTable tbody tr:hover,
#trainingMatrixTable tbody tr:hover,
#trainingHwTable tbody tr:hover{
  transform:translateX(2px);
}

/* View / action buttons: springy hover */
.mtx-view-btn, .btn-ghost, .btn-download{
  transition:transform .15s cubic-bezier(.34,1.56,.64,1), box-shadow .18s ease, opacity .15s ease;
}
.mtx-view-btn:hover, .btn-ghost:hover, .btn-download:hover{
  transform:translateY(-2px) scale(1.03);
}
.mtx-view-btn:active, .btn-ghost:active, .btn-download:active{
  transform:translateY(0) scale(.97);
}

/* Progress bar container glow on hover for a bit of life */
.mtx-progress-wrap:hover .mtx-progress-fill{
  filter:brightness(1.08);
}

/* Filter dropdown / input: smoother focus transition */
.emp-filter-bar input, .emp-filter-bar select{
  transition:border-color .18s ease, box-shadow .18s ease, transform .15s ease;
}
.emp-filter-bar input:focus, .emp-filter-bar select:focus{
  transform:translateY(-1px);
}

/* Close button springy feedback */
.close-btn{
  transition:transform .15s cubic-bezier(.34,1.56,.64,1);
}
.close-btn:hover{
  transform:rotate(90deg) scale(1.1);
}
@media (max-width:700px){
  .tab-header{ flex-wrap:wrap; gap:10px; }
  .tw-view-toggle{ order:3; width:100%; justify-content:center; }
}

.mtx-req-cell{
  display:flex;
  flex-wrap:wrap;
  gap:5px;
  max-width:260px;
}
.mtx-req-chip{
  background:var(--amber-100);
  color:var(--amber-600);
  border:1px solid #F0D9A8;
  border-radius:999px;
  padding:3px 10px;
  font-size:12px;
  font-weight:600;
  white-space:nowrap;
}
.mtx-req-more{
  background:var(--paper);
  color:var(--ink-500);
  border:1px solid var(--line);
  border-radius:999px;
  padding:3px 10px;
  font-size:12px;
  font-weight:600;
  white-space:nowrap;
}
.mtx-req-none{
  color:var(--ink-500);
}

.mtx-modal-content{
  max-width:640px;
  width:92%;
  padding:20px;
}

.mtx-modal-body{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  margin-top:14px;
}

@media (max-width:600px){
  .mtx-modal-body{ grid-template-columns:1fr; }
}

.mtx-modal-col h4{
  margin:0 0 8px;
  font-size:14.5px;
  color:var(--navy-800);
}

.mtx-list{
  list-style:none;
  margin:0;
  padding:0;
  max-height:300px;
  overflow-y:auto;
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
}

.mtx-list li{
  padding:8px 12px;
  font-size:14px;
  border-bottom:1px solid var(--line);
}
.mtx-list li:last-child{ border-bottom:none; }

.mtx-list .mtx-empty{
  color:var(--ink-500);
  font-style:italic;
}
@media (max-width:600px){
  .org-title{ font-size:21px; }
  .wrap{ padding:10px; }
  .header.card, .header{ padding:18px 12px 16px !important; }
}

/* ============================================================
   EMPLOYEE TABLE — SEARCH / FILTER BAR
   ============================================================ */
.emp-filter-bar{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  padding:12px 14px;
  margin:14px 0;
}

.emp-filter-bar input[type="text"]{
  flex:1 1 220px;
  margin:0 !important;
}

.emp-filter-bar select{
  flex:0 1 170px;
  margin:0 !important;
  padding:9px 10px !important;
}

.emp-filter-bar button{
  flex:0 0 auto;
  padding:9px 16px !important;
}

#empCountLabel{
  font-weight:700;
  color:var(--navy-700);
  font-size:14px;
  margin-left:auto;
  white-space:nowrap;
}

/* ============================================================
   TRAINING ATTENDANCE CHART CARD
   ============================================================ */
.chart-card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);
  padding:16px;
  margin:16px 0;
}

/* ============================================================
   PRINT — isolate just the employee table
   ============================================================ */
@media print{
  body.print-emp-table > *:not(#tabEmployees){ display:none !important; }
  body.print-emp-table #tabEmployees{
    display:block !important;
    position:static !important;
  }
  body.print-emp-table #tabEmployees .close-btn,
  body.print-emp-table #empFilterBar,
  body.print-emp-table .btn-download{
    display:none !important;
  }
  body.print-emp-table #empTable th,
  body.print-emp-table #empTable td{
    border:1px solid #000 !important;
    color:#000 !important;
  }
}

/* ============================================================
   PERSISTENT DASHBOARD HOME BUTTON
   ============================================================ */
#dashboardHomeBtn{
  position:fixed !important;
  top:50px !important;
  left:16px !important;
  z-index:9999999 !important;
  background:var(--navy-700) !important;
  color:#fff !important;
  border:none !important;
  border-radius:999px !important;
  padding:12px 22px !important;
  font-size:15px !important;
  font-weight:800 !important;
  box-shadow:0 8px 22px rgba(11,31,58,.35) !important;
  cursor:pointer;
  transition:transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .18s ease, background-color .18s ease;
}
#dashboardHomeBtn:hover{
  transform:translateY(-2px) scale(1.04);
  background:var(--navy-800) !important;
  box-shadow:0 12px 28px rgba(11,31,58,.42) !important;
}
#dashboardHomeBtn:active{
  transform:translateY(0) scale(.97);
}
@media (max-width:600px){
  #dashboardHomeBtn{
    top:40px !important;
    left:10px !important;
    padding:9px 16px !important;
    font-size:13px !important;
  }
}

.fd-profile-chief{
  margin-top:8px;
  font-size:14px;
  font-weight:700;
  color:var(--ink-700);
}

/* ============================================================
   SITE-WIDE CONSTANT BACKGROUND + HEADER/FOOTER BRAND BAR
   Applies on every page automatically via this shared stylesheet.
   ============================================================ */
body{
  padding-top:38px;
  padding-bottom:34px;
}

/* Dim government emblem watermark, fixed and centered on every page */
body::before{
  content:"";
  position:fixed;
  top:50%; left:50%;
  width:340px; height:340px;
  transform:translate(-50%, -50%);
  background-image:url("govlogo.png");
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center;
  opacity:.055;
  z-index:-2;
  pointer-events:none;
}

/* Watermark caption below the emblem, in red, centered */
body::after{
  content:"Health Personnel Management System of Health Office Terhathum";
  position:fixed;
  top:calc(50% + 160px);
  left:50%;
  transform:translate(-50%, 0);
  width:460px;
  max-width:80vw;
  text-align:center;
  color:rgba(163,38,56,.28);
  font-weight:800;
  font-size:18px;
  line-height:1.4;
  font-family:var(--font-body);
  z-index:-2;
  pointer-events:none;
}

/* Persistent header bar, same text, on every page */
html::before{
  content:"Health Personnel Management System of Health Office Terhathum";
  position:fixed;
  top:0; left:0; right:0;
  z-index:100000;
  background:#fff;
  border-bottom:1px solid var(--line);
  box-shadow:0 2px 8px rgba(11,31,58,.06);
  color:var(--crimson-600);
  text-align:center;
  font-weight:800;
  font-size:13.5px;
  letter-spacing:.2px;
  padding:8px 12px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  height:16px;
  line-height:16px;
  box-sizing:content-box;
}

/* Persistent footer bar, same text, on every page */
html::after{
  content:"Health Personnel Management System of Health Office Terhathum";
  position:fixed;
  bottom:0; left:0; right:0;
  z-index:100000;
  background:#fff;
  border-top:1px solid var(--line);
  box-shadow:0 -2px 8px rgba(11,31,58,.06);
  color:var(--crimson-600);
  text-align:center;
  font-weight:800;
  font-size:12.5px;
  letter-spacing:.2px;
  padding:7px 12px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  height:15px;
  line-height:15px;
  box-sizing:content-box;
}

@media (max-width:600px){
  html::before, html::after{ font-size:10.5px; padding:6px 8px; }
  body{ padding-top:32px; padding-bottom:28px; }
}

/* ============================================================
   MERGED EMPLOYEE ENTRY — one large button (was two separate ones)
   ============================================================ */
.merged-emp-entry{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:16px;
  justify-content:center;
}
.merged-emp-btn{
  width:100%;
  max-width:720px !important;
  padding:26px 30px !important;
  font-size:19px !important;
  border-radius:18px !important;
  box-shadow:0 10px 26px rgba(29,61,107,.28) !important;
}
.merged-emp-btn:hover{
  transform:translateY(-3px);
}

.emp-tree-link{
  margin:4px 0 14px !important;
}

/* ============================================================
   FACILITY DRILLDOWN — category badges + search inputs
   ============================================================ */
.fd-cat-badges{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-bottom:10px;
}
.fd-cat-badge{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:999px;
  padding:4px 10px;
  font-size:12px;
  font-weight:600;
  color:var(--ink-700);
}
.fd-staff-cat{
  font-size:11px;
  font-weight:600;
  color:var(--navy-600);
  background:#EAF1FB;
  border-radius:999px;
  padding:2px 8px;
  margin-left:6px;
}
.fd-staff-search, .fd-facility-search{
  width:100%;
  margin-bottom:10px !important;
}

/* ============================================================
   FIX: fullscreen tabs must clear the fixed header/footer bars
   ============================================================ */
#tabIndividualTrainingDetail,
#tabEmployees,
#trainingWiseHw{
  inset:42px 0 38px 0 !important;
  height:auto !important;
}

/* Give the Dashboard button and user menu room below the header bar
   and above any in-tab close buttons */
#dashboardHomeBtn{
  top:48px !important;
}
#userMenuBox{
  top:48px !important;
}
.tab-header, #tabEmployees .close-btn, #tabIndividualTrainingDetail .close-btn, #trainingWiseHw .close-btn{
  margin-top:6px;
}

.centered-btn-row{
  display:flex;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
  gap:16px;
  margin:20px 0;
}

/* ============================================================
   INDEX.HTML — compact login corner box (phone + password)
   ============================================================ */
.login-corner-box{
  position:fixed;
  top:120px;
  right:16px;
  width:300px;
  max-width:88vw;
  max-height:calc(100vh - 160px);
  overflow-y:auto;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  box-shadow:0 16px 40px rgba(11,31,58,.18);
  padding:16px;
  z-index:9998;
}
.login-corner-box .mobile-card{
  max-width:none;
  margin:12px auto 0;
}
.login-corner-box .green-note{
  margin-top:0;
  font-size:12.5px;
  padding:8px 10px;
}
@media (max-width:700px){
  .login-corner-box{
    position:static;
    width:100%;
    max-width:none;
    margin:16px 0;
    box-shadow:var(--shadow-sm);
  }
}

.overview-wrap{
  max-width:760px;
  margin:24px auto;
  text-align:center;
}
.scope-bar-centered{
  justify-content:center;
}

.regapproval-badge{
  display:inline-block;
  min-width:20px;
  padding:2px 7px;
  border-radius:999px;
  background:var(--crimson-600);
  color:#fff;
  font-size:12px;
  font-weight:800;
  margin-left:4px;
}

/* Ensure newer modals (add training, edit registration) always render on top */
#addTrainingModal.modal,
#regEditModal.modal{
  z-index:999999 !important;
}

/* ============================================================
   EMPLOYEE-FACING ACTIVE TRAINING BELL (index.html)
   ============================================================ */
#empTrainingBell{
  position:fixed;
  top:100px;
  left:16px;
  z-index:99997;
  width:46px;
  height:46px;
  border-radius:50%;
  background:var(--surface);
  border:1px solid var(--line);
  box-shadow:var(--shadow-md);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:22px;
  cursor:pointer;
  transition:transform .18s cubic-bezier(.34,1.56,.64,1);
}
#empTrainingBell:hover{
  transform:scale(1.08) rotate(-8deg);
}
#empTrainingBadge{
  position:absolute;
  top:-4px;
  right:-4px;
  background:var(--crimson-600);
  color:#fff;
  font-size:11px;
  font-weight:800;
  min-width:18px;
  height:18px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 4px;
}

#empTrainingModal{
  position:fixed;
  inset:0;
  background:rgba(11,31,58,.55);
  z-index:99998;
  display:flex;
  align-items:center;
  justify-content:center;
  animation:modalBackdropFade .2s ease both;
}
#empTrainingModalContent{
  background:var(--surface);
  border-radius:var(--radius-lg);
  box-shadow:0 20px 50px rgba(11,31,58,.3);
  width:92%;
  max-width:520px;
  max-height:80vh;
  overflow-y:auto;
  padding:20px;
  animation:modalPop .28s cubic-bezier(.22,1,.36,1) both;
}
#empTrainingModalHeader{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:14px;
}
#empTrainingModalHeader h3{
  margin:0;
  font-family:var(--font-head);
  color:var(--navy-950);
}
#empTrainingCloseBtn{
  background:none !important;
  border:none !important;
  box-shadow:none !important;
  font-size:18px !important;
  cursor:pointer;
  padding:4px !important;
}

.emp-training-empty{
  text-align:center;
  color:var(--ink-500);
  font-style:italic;
  padding:20px;
}

.emp-training-card{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  padding:14px 16px;
  margin-bottom:12px;
}
.emp-training-title{
  font-weight:800;
  color:var(--navy-950);
  font-size:16px;
  margin-bottom:6px;
}
.emp-training-meta{
  font-size:13px;
  color:var(--ink-700);
  margin-bottom:3px;
}
.emp-training-desc{
  font-size:13px;
  color:var(--ink-500);
  margin-top:6px;
  font-style:italic;
}
.emp-training-reg-btn{
  margin-top:10px;
  width:100%;
  border:none;
  border-radius:var(--radius-sm);
  padding:10px;
  font-weight:700;
  cursor:pointer;
  background:var(--navy-700);
  color:#fff;
  transition:transform .15s ease;
}
.emp-training-reg-btn:hover{
  transform:translateY(-1px);
}
.emp-training-reg-done{
  background:var(--sage-600);
  cursor:default;
}
.emp-training-reg-done:hover{
  transform:none;
}

@media (max-width:600px){
  #empTrainingBell{ top:80px; left:10px; width:40px; height:40px; font-size:19px; }
}