/* ===================================================================
   पतसंस्था प्रणाली — शैली (मूळ प्रणालीच्या रचनेनुसार)
   =================================================================== */
:root{
  --brand:#0d47a1; --brand-2:#1565c0; --accent:#c62828;
  --menu-bg:#1f2d3d; --menu-hover:#0d47a1; --sub-bg:#ffffff;
}
*{ box-sizing:border-box; }
body{ background:#eef1f6; font-family:"Segoe UI","Noto Sans Devanagari",sans-serif; margin:0; }

/* ---------- वरचा बँक-पट्टा ---------- */
.topbar{ display:flex; justify-content:space-between; align-items:center;
  background:#fff; padding:.4rem 1rem; border-bottom:3px solid var(--brand); flex-wrap:wrap; gap:.5rem; }
.tb-left{ display:flex; align-items:center; gap:.7rem; }
.tb-logo{ font-size:2rem; color:var(--brand); text-decoration:none; }
.tb-bank{ font-size:1.15rem; font-weight:700; color:var(--accent); line-height:1.1; }
.tb-branch{ font-size:.85rem; color:#0026ff; }
.tb-right{ display:flex; align-items:center; gap:1rem; font-size:.9rem; }
.tb-date{ color:#c62828; font-weight:600; animation:blink 1.4s step-end infinite; }
.tb-user{ color:#333; }
.tb-logout{ color:var(--accent); font-size:1.3rem; text-decoration:none; }
@keyframes blink{ 67%{opacity:.35;} }

/* ---------- मल्टी-लेव्हल मेनू ---------- */
.menubar{ background:var(--menu-bg); position:relative; z-index:1000; }
.menubar ul{ list-style:none; margin:0; padding:0; }
.topmenu{ display:flex; flex-wrap:wrap; }
.topmenu > li{ position:relative; }
.topmenu > li > a{ color:#e8eef5; padding:.65rem 1rem; display:block; text-decoration:none;
  font-size:.92rem; white-space:nowrap; }
.topmenu > li:hover > a{ background:var(--menu-hover); color:#fff; }

/* उप-मेनू */
.menubar li ul{ display:none; position:absolute; background:var(--sub-bg);
  min-width:240px; box-shadow:0 6px 18px rgba(0,0,0,.22); border-radius:0 0 6px 6px; padding:.25rem 0; }
.topmenu > li > ul{ top:100%; left:0; }         /* पहिला स्तर खाली */
.menubar li li{ position:relative; }
.menubar li li > a{ color:#22303f; padding:.45rem .9rem; display:block; text-decoration:none;
  font-size:.88rem; display:flex; justify-content:space-between; align-items:center; gap:.5rem; }
.menubar li li > a:hover{ background:#eef4ff; color:var(--brand); }
.menubar li li ul{ top:0; left:100%; border-radius:6px; }   /* दुसरा स्तर उजवीकडे */
.menubar li:hover > ul{ display:block; }
.menubar a.planned{ color:#8a94a0; }             /* अद्याप न बनलेले */
.menubar a.built{ font-weight:600; }
.menubar a.built::before{ content:"● "; color:#2e7d32; font-size:.7em; }
.menubar .caret{ font-size:.75em; opacity:.8; }

/* ---------- नोटिफिकेशन आयकॉन-रांग ---------- */
.notifrow{ list-style:none; display:flex; gap:.4rem; justify-content:flex-end;
  margin:0; padding:.4rem 1rem; background:#dfe6ef; }
.notifrow li a{ position:relative; display:block; width:38px; height:38px; border-radius:8px;
  background:#fff; color:#33475b; display:flex; align-items:center; justify-content:center;
  font-size:1.15rem; text-decoration:none; box-shadow:0 1px 2px rgba(0,0,0,.1); }
.notifrow li a:hover{ background:var(--brand); color:#fff; }
.badge-n{ position:absolute; top:-6px; right:-6px; min-width:18px; height:18px; line-height:18px;
  font-size:.68rem; color:#fff; border-radius:9px; text-align:center; padding:0 4px; }
.badge-n.red{background:#e53935;} .badge-n.green{background:#43a047;}
.badge-n.blue{background:#1e88e5;} .badge-n.violet{background:#8e24aa;}
.notifrow .tip{ position:absolute; bottom:-26px; right:0; background:#333; color:#fff;
  font-size:.7rem; padding:2px 6px; border-radius:4px; white-space:nowrap; display:none; }
.notifrow li a:hover .tip{ display:block; }

/* ---------- डॅशबोर्ड आयकॉन-टाइल्स ---------- */
.feature-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
  gap:1rem; padding:1.2rem; max-width:1100px; margin:0 auto; }
.feature-tile{ display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.6rem; padding:1.6rem 1rem; border-radius:.9rem; color:#fff; text-decoration:none;
  box-shadow:0 3px 8px rgba(0,0,0,.15); transition:transform .15s, box-shadow .15s; }
.feature-tile:hover{ transform:translateY(-4px); box-shadow:0 8px 18px rgba(0,0,0,.25); color:#fff; }
.feature-tile i{ font-size:2.6rem; }
.feature-tile span{ font-size:1rem; font-weight:600; text-align:center; }
.feature-tile.t1{background:linear-gradient(135deg,#1565c0,#42a5f5);}
.feature-tile.t2{background:linear-gradient(135deg,#2e7d32,#66bb6a);}
.feature-tile.t3{background:linear-gradient(135deg,#ef6c00,#ffb74d);}
.feature-tile.t4{background:linear-gradient(135deg,#6a1b9a,#ab47bc);}
.feature-tile.t5{background:linear-gradient(135deg,#c62828,#ef5350);}
.feature-tile.t6{background:linear-gradient(135deg,#00838f,#26c6da);}

/* ---------- आकडेवारी carousel ---------- */
.stat-carousel{ display:flex; align-items:center; justify-content:center; gap:1rem;
  max-width:700px; margin:1rem auto; background:#fff; border-radius:.8rem; padding:1rem 1.4rem;
  box-shadow:0 2px 6px rgba(0,0,0,.1); }
.sc-viewport{ flex:1; text-align:center; min-height:64px; position:relative; }
.sc-slide{ display:none; }
.sc-slide.active{ display:block; animation:fade .5s ease; }
.sc-label{ font-size:1.05rem; color:#555; }
.sc-value{ font-size:1.8rem; font-weight:700; color:var(--brand); }
.sc-btn{ border:none; background:#eef2f7; width:36px; height:36px; border-radius:50%;
  font-size:1.4rem; color:var(--brand); cursor:pointer; }
.sc-btn:hover{ background:var(--brand); color:#fff; }
@keyframes fade{ from{opacity:0;} to{opacity:1;} }

/* ---------- सामान्य ---------- */
.page-title{ border-left:4px solid var(--brand); padding-left:.6rem; }
.card{ border-radius:.6rem; box-shadow:0 1px 3px rgba(0,0,0,.06); }
.table thead th{ background:#eef2f7; }
.required::after{ content:" *"; color:var(--accent); }
.app-footer{ border-top:1px solid #e0e0e0; background:#fff; }

/* ---------- लॉगिन ---------- */
.login-wrap{ min-height:100vh; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,#0d47a1,#42a5f5); }
.login-card{ width:100%; max-width:390px; border-radius:1rem; }

/* मोबाईल */
@media (max-width:768px){
  .topmenu{ flex-direction:column; }
  .menubar li ul{ position:static; box-shadow:none; min-width:auto; }
  .menubar li li ul{ left:0; }
}