/* ===== GITAM B-School College Management System — Styles ===== */
:root{
  --primary:#187350;       /* GITAM green (logo) */
  --primary-dark:#0f5238;
  --primary-light:#e7f4ee;
  --accent:#009899;        /* Pinnacle teal (logo) */
  --maroon:#800000;        /* Pinnacle maroon (logo) */
  --green:#2e9e5b;
  --red:#e0414f;
  --amber:#e8a13a;
  --blue:#2f6fed;
  --purple:#8b5cf6;
  --ink:#1f2a37;
  --muted:#6b7280;
  --line:#e5e9f0;
  --bg:#f4f6fb;
  --white:#ffffff;
  --radius:12px;
  --shadow:0 4px 20px rgba(0,40,90,.08);
  --shadow-lg:0 10px 40px rgba(0,40,90,.18);
}
*{box-sizing:border-box;margin:0;padding:0}
/* text-size-adjust: iOS Safari inflates body text on its own once a page is
   rotated or reflowed, which throws every fixed size in this file off */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{font-family:'Poppins',system-ui,Arial,sans-serif;color:var(--ink);background:var(--bg);line-height:1.5}
.hidden{display:none !important}
button{font-family:inherit;cursor:pointer;border:none}
input,select,textarea{font-family:inherit;font-size:14px}
/* iOS Safari zooms the whole page in when you focus a field smaller than
   16px, and it never zooms back out — the rest of the app then renders
   oversized and scrolls sideways. 16px on touch devices avoids the zoom. */
@media (hover:none) and (pointer:coarse){
  input,select,textarea{font-size:16px}
}
a{color:var(--primary);text-decoration:none}

/* ---- Buttons ---- */
.btn-primary{background:var(--primary);color:#fff;padding:10px 18px;border-radius:8px;font-weight:600;font-size:14px;transition:.15s}
.btn-primary:hover{background:var(--primary-dark)}
.btn-ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.35);padding:9px 16px;border-radius:8px;font-weight:500;transition:.15s}
.btn-ghost:hover{background:rgba(255,255,255,.12)}
.btn-block{width:100%;display:block}
.btn-edit{background:var(--primary-light);color:var(--primary)}
.btn-edit:hover{background:#d6e6f7}
.btn-del{background:#fde8ea;color:var(--red)}
.btn-del:hover{background:#fbd5d9}
/* ---- inline SVG line icons (see ic() in app.js) ---- */
.ic{display:inline-block;flex:none;width:1.05em;height:1.05em;vertical-align:-.14em;
    fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* a little breathing room when an icon leads button/label text */
button .ic,.btn-outline .ic,.btn-primary .ic,.btn-sm .ic,label .ic,a .ic,h1 .ic,h2 .ic,h3 .ic{margin-right:6px}
.btn-sm .ic{width:15px;height:15px;margin-right:5px}
.row-actions .btn-sm .ic{margin-right:0;width:15px;height:15px}
.nav-item .ico .ic{width:18px;height:18px;margin:0}
.nav-item.nav-child .ico .ic{width:13px;height:13px;margin:0}
.stat-card .s-ico .ic{width:20px;height:20px;margin:0}
.qa-ico .ic{width:18px;height:18px;margin:0}
.lib-qa-ico .ic{width:18px;height:18px;margin:0;color:#fff;stroke:#fff}
.nav-ext .ic{width:12px;height:12px;margin:0}
.btn-primary .ic{margin-right:6px}
.btn-outline{background:#fff;border:1px solid var(--line);color:var(--ink);padding:9px 16px;border-radius:8px;font-weight:500}
.btn-outline:hover{border-color:var(--primary);color:var(--primary)}
/* AFTER the other button classes on purpose. It used to sit above
   .btn-outline, which meant .btn-outline.btn-sm kept the full 9px padding and
   stood 38px tall next to a 28px .btn-primary.btn-sm — so every Print/PDF/CSV/
   Excel row was 10px out of line with the button beside it. */
.btn-sm{padding:5px 12px;font-size:12.5px;border-radius:6px;font-weight:500}
/* .btn-outline carries a 1px border, so it needs 1px less padding to stand
   exactly as tall as a .btn-primary beside it. The full-size buttons already
   balance this way (10px padding vs 9px + border); .btn-sm sets one padding
   for both, so the outline variant has to give the pixel back. */
.btn-outline.btn-sm{padding:4px 11px}

/* ===== LOGIN ===== */
/* dvh after vh: on iOS 100vh is the viewport *without* the address bar, so a
   full-height box is always taller than what you can see. dvh is the real
   height; the vh line stays as the fallback for older browsers. */
/* A professional entry: a deep brand gradient whose two aurora glows drift
   slowly and softly (no spinning, no specks), over a static dot-grid so the
   ground reads as a designed surface. Motion is gentle and long-cycle. */
.login-wrap{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:20px;overflow:hidden;position:relative;
  /* campus photo poori screen par; bayan taraf gehra green taaki naam padha jaye,
     right me halka taaki building dikhe */
  background:
    linear-gradient(90deg,rgba(8,48,33,.86) 0%,rgba(8,48,33,.58) 45%,rgba(8,48,33,.30) 100%),
    linear-gradient(0deg,rgba(8,48,33,.6) 0%,transparent 30%),
    url("../assets/campus-building.webp") 62% center/cover no-repeat,
    #0a3d2a}
/* the dot-grid stays perfectly still while the colour drifts behind it */
.login-wrap::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(circle at 1px 1px,rgba(255,255,255,.05) 1px,transparent 1.6px) 0 0/26px 26px}
.login-footer{position:relative;z-index:1}
/* flowing waves along the bottom — three layers gliding at different speeds */
.login-waves{display:none;position:absolute;left:0;right:0;bottom:0;height:240px;z-index:0;pointer-events:none;overflow:hidden}
.login-waves i{position:absolute;left:0;bottom:0;width:100%;height:100%;
  background-repeat:repeat-x;background-position:0 bottom;background-size:1440px 220px;will-change:background-position}
.login-waves i:nth-child(1){opacity:.10;background-size:1440px 240px;animation:waveMove 28s linear infinite;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 220' preserveAspectRatio='none'%3E%3Cpath d='M0,110 C360,50 360,170 720,110 C1080,50 1080,170 1440,110 L1440,220 L0,220 Z' fill='%23ffffff'/%3E%3C/svg%3E")}
.login-waves i:nth-child(2){opacity:.18;background-size:1440px 200px;animation:waveMove 20s linear infinite reverse;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 220' preserveAspectRatio='none'%3E%3Cpath d='M0,110 C360,50 360,170 720,110 C1080,50 1080,170 1440,110 L1440,220 L0,220 Z' fill='%2337c4a0'/%3E%3C/svg%3E")}
.login-waves i:nth-child(3){opacity:.16;background-size:1440px 170px;animation:waveMove 15s linear infinite;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 220' preserveAspectRatio='none'%3E%3Cpath d='M0,110 C360,50 360,170 720,110 C1080,50 1080,170 1440,110 L1440,220 L0,220 Z' fill='%23ffffff'/%3E%3C/svg%3E")}
/* a static gradient hairline frames the card — no spin */
.login-frame{position:relative;border-radius:20px;padding:1.5px;z-index:1;
  background:linear-gradient(135deg,rgba(55,208,127,.9),rgba(0,152,153,.9) 55%,rgba(24,115,80,.9))}
/* the glow behind the card breathes, softly */
.login-frame::after{content:"";position:absolute;inset:-10px;border-radius:28px;z-index:-1;
  background:linear-gradient(135deg,rgba(55,208,127,.55),rgba(0,152,153,.55));filter:blur(30px);
  opacity:.4;animation:glowBreathe 7s ease-in-out infinite}
.login-split{position:relative;z-index:1;display:flex;align-items:center;gap:56px;width:100%;max-width:1160px}
.login-hero{position:relative;flex:1;min-width:0;display:flex}
/* brand intro sits straight on the photo — text-shadow keeps it readable */
.login-hero-overlay{position:relative;flex:1;color:#fff;display:flex;flex-direction:column;
  justify-content:center;text-shadow:0 2px 14px rgba(0,0,0,.35)}
.login-hero-overlay h2{font-size:44px;line-height:1.15;margin-bottom:10px;letter-spacing:.3px}
.login-hero-overlay p{font-size:18px;opacity:.95}
.hero-logo{width:132px;height:108px;background:#fff;border-radius:16px;padding:8px;margin-bottom:22px;
  object-fit:contain;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.login-frame{flex-shrink:0;max-width:100%}
.login-card{background:#fff;padding:44px 42px;width:470px;max-width:100%;border-radius:18px;
  box-shadow:0 24px 60px rgba(0,0,0,.3)}
.brand-logo{width:92px;height:76px;object-fit:contain;background:#fff;border-radius:10px;flex-shrink:0}
.login-brand{display:flex;align-items:center;gap:16px;margin-bottom:32px}
.login-brand h1{font-size:25px;letter-spacing:.3px;line-height:1.25;white-space:nowrap;
  background:linear-gradient(90deg,var(--primary-dark),#009899);-webkit-background-clip:text;background-clip:text;color:transparent}
.login-brand p{font-size:14px;color:var(--muted)}
.logo-circle{width:52px;height:52px;border-radius:50%;background:linear-gradient(135deg,var(--primary),var(--accent));
  color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:26px;flex-shrink:0}
#loginForm label{display:block;font-size:14.5px;font-weight:500;margin:18px 0 7px}
.in-wrap{position:relative}
.in-wrap .in-ico{position:absolute;left:15px;top:50%;transform:translateY(-50%);font-size:16px;opacity:.5;pointer-events:none;transition:.2s}
.in-wrap:focus-within .in-ico{opacity:1;transform:translateY(-50%) scale(1.12)}
#loginForm input,#loginForm select{width:100%;padding:14px 15px 14px 44px;font-size:15px;border:1px solid var(--line);border-radius:10px;background:#fbfcfe}
#loginForm input:focus,#loginForm select:focus{outline:none;border-color:var(--primary);background:#fff}
#loginForm .btn-primary{margin-top:28px;padding:14px;font-size:16px;position:relative;overflow:hidden;
  background:linear-gradient(120deg,var(--primary),#009899)}
/* a light sweep crosses the button on hover — a small, premium touch */
#loginForm .btn-primary::after{content:"";position:absolute;top:0;left:-70%;width:55%;height:100%;
  transform:skewX(-18deg);background:linear-gradient(120deg,transparent,rgba(255,255,255,.35),transparent);pointer-events:none}
#loginForm .btn-primary:hover::after{animation:btnShine .8s ease}
.login-error{color:var(--red);font-size:13px;min-height:18px;margin-top:8px;text-align:center}
.login-hint{margin-top:22px;padding-top:18px;border-top:1px dashed var(--line);font-size:12px;color:var(--muted);display:flex;flex-direction:column;gap:3px}
.login-hint strong{color:var(--ink)}
.login-footer{color:rgba(255,255,255,.85);font-size:12.5px;margin-top:28px;text-shadow:0 1px 6px rgba(0,0,0,.4)}

/* ===== login: a stylish way in ===== */
@keyframes loginGradient{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@keyframes blobDrift{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(4vmax,3vmax) scale(1.12)}}
@keyframes floatUp{0%{transform:translateY(0) translateX(0);opacity:0}10%{opacity:.8}90%{opacity:.7}100%{transform:translateY(-105vh) translateX(20px);opacity:0}}
@keyframes spin{to{transform:rotate(1turn)}}
@keyframes btnGrad{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@keyframes cardIn{from{opacity:0;transform:translateY(28px) scale(.97)}to{opacity:1;transform:none}}
@keyframes riseIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes kenburns{from{transform:scale(1)}to{transform:scale(1.09)}}
@keyframes floatLogo{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes footerIn{from{opacity:0}to{opacity:.8}}
@keyframes btnShine{from{left:-70%}to{left:130%}}
/* slow, soft aurora drift behind the sign-in card; long cycle, gentle shift */
@keyframes auroraShift{
  0%{background-position:0% 0%,100% 100%,0% 50%}
  50%{background-position:26% 34%,74% 66%,100% 50%}
  100%{background-position:0% 0%,100% 100%,0% 50%}}
@keyframes glowBreathe{0%,100%{opacity:.32}50%{opacity:.55}}
@keyframes waveMove{from{background-position-x:0}to{background-position-x:-1440px}}

/* the whole card glides up on arrival; the campus photo slowly drifts behind it */
.login-frame{animation:cardIn .8s cubic-bezier(.22,.68,.24,1) both}
.login-hero-overlay{animation:riseIn .8s ease .2s both}
.login-footer{animation:footerIn 1s ease .8s both}

/* brand and each form row rise in, one after another */
.login-brand{animation:riseIn .6s ease .25s both}
.brand-logo{animation:riseIn .6s ease .18s both}
#loginForm > *{animation:riseIn .55s ease both}
#loginForm > *:nth-child(1){animation-delay:.34s}
#loginForm > *:nth-child(2){animation-delay:.42s}
#loginForm > *:nth-child(3){animation-delay:.50s}
#loginForm > *:nth-child(4){animation-delay:.58s}
#loginForm > *:nth-child(5){animation-delay:.66s}

/* inputs lift and glow on focus; the button lifts and shines on hover */
#loginForm input{transition:border-color .18s,background .18s,box-shadow .2s,transform .18s}
#loginForm input:focus{box-shadow:0 0 0 4px rgba(24,115,80,.14);transform:translateY(-1px)}
#loginForm .btn-primary{position:relative;overflow:hidden;
  transition:transform .2s ease,box-shadow .2s ease,filter .2s ease}
#loginForm .btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(24,115,80,.42);filter:brightness(1.08)}
#loginForm .btn-primary:active{transform:translateY(0)}
/* a light sweeps across the button on hover */
#loginForm .btn-primary::after{content:"";position:absolute;top:0;left:-70%;width:55%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);transform:skewX(-18deg)}
#loginForm .btn-primary:hover::after{animation:btnShine .8s ease}

/* people who ask their system for less motion — many phones turn this on with
   battery-saver — keep a calm screen: everything that loops or moves stops, but
   the card and its rows still fade in gently, which is motion-free and safe. */
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion: reduce){
  .login-wrap,.login-wrap::before,.login-wrap::after,.login-waves i,
  .login-frame::before,.login-frame::after,.hero-logo,
  #loginForm .btn-primary{animation:none}
  #loginForm .btn-primary:hover::after{animation:none}
  .login-frame,.login-hero-overlay,.login-footer,
  .login-brand,.brand-logo,#loginForm > *{animation:fadeIn .6s ease both}
}

/* ===== APP LAYOUT ===== */
.app-wrap{display:flex;min-height:100vh;min-height:100dvh}
.sidebar{width:256px;background:linear-gradient(180deg,var(--primary-dark),var(--primary) 85%,#0a3d2a);color:#fff;
  display:flex;flex-direction:column;position:fixed;top:0;bottom:0;left:0;z-index:30;box-shadow:2px 0 18px rgba(0,40,20,.18);
  transition:width .22s ease, transform .25s ease}
.lo-ico{font-size:16px} .lo-txt{margin-left:6px}

/* ===== COLLAPSED (icon-only) sidebar — desktop only ===== */
@media(min-width:861px){
  .sidebar-collapsed .sidebar{width:74px}
  .sidebar-collapsed .content{margin-left:74px}
  .sidebar-collapsed .sidebar-brand{justify-content:center;padding:20px 0 18px}
  .sidebar-collapsed .sidebar-brand > div,
  .sidebar-collapsed .nav-item > span:last-child,
  .sidebar-collapsed .nav-section,
  .sidebar-collapsed .su-meta,
  .sidebar-collapsed .lo-txt{display:none}
  /* an external link carries a trailing ↗, so hiding only :last-child would
     leave its label showing — hide every span except the icon */
  .sidebar-collapsed .nav-link > span:not(.ico){display:none}
  /* a group row keeps only its icon in the rail; its list is never drawn there */
  .sidebar-collapsed .nav-parent > span:not(.ico){display:none}
  .sidebar-collapsed .nav-group .nav-kids{display:none!important}
  .sidebar-collapsed .side-logo{width:34px;height:28px}
  .sidebar-collapsed .nav-item{justify-content:center;padding:10px 0}
  .sidebar-collapsed .nav-item.active::before{display:none}
  .sidebar-collapsed .side-user{justify-content:center;margin-bottom:10px}
  .sidebar-collapsed .lo-ico{margin:0}
}
.sidebar-brand{display:flex;align-items:center;gap:12px;padding:20px 18px 18px;
  border-bottom:1px solid rgba(255,255,255,.12);background:rgba(0,0,0,.12)}
/* content-box + the logo's own 600:491 ratio — otherwise `contain` leaves
   white bands around the image */
.side-logo{box-sizing:content-box;width:40px;height:33px;background:#fff;border-radius:8px;padding:3px;
  object-fit:contain;flex-shrink:0;box-shadow:0 3px 10px rgba(0,0,0,.2)}
/* min-width:0 so the text column may shrink, and ellipsis as the backstop:
   "GITAM" is nowrap, and a nowrap flex item refuses to shrink below
   its content, so at 15px beside a 68px logo it punched 12px straight out
   through the side of the sidebar and got sliced off. */
.sidebar-brand > div{min-width:0}
.sidebar-brand strong{display:block;font-size:14px;letter-spacing:.2px;line-height:1.2;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sidebar-brand small{display:block;font-size:10px;opacity:.75;letter-spacing:1px;text-transform:uppercase;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav-menu{flex:1;overflow-y:auto;padding:10px 10px}
.nav-section{font-size:10px;letter-spacing:1.5px;text-transform:uppercase;opacity:.5;
  padding:10px 12px 5px;font-weight:600}
.nav-item{position:relative;display:flex;align-items:center;gap:11px;padding:7px 11px;border-radius:9px;
  color:rgba(255,255,255,.82);font-size:13.5px;font-weight:500;cursor:pointer;margin-bottom:2px;
  transition:background .18s,color .18s,transform .12s}
.nav-item .ico{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:8px;
  background:transparent;flex-shrink:0;transition:.18s}
.nav-item:hover{background:rgba(255,255,255,.1);color:#fff;transform:translateX(2px)}
.nav-item:hover .ico{background:rgba(255,255,255,.18)}
.nav-item.active{background:#fff;color:var(--primary-dark);font-weight:600;box-shadow:0 4px 14px rgba(0,0,0,.18)}
.nav-item.active .ico{background:var(--primary-light)}
.nav-item.active::before{content:"";position:absolute;left:-12px;top:50%;transform:translateY(-50%);
  width:4px;height:62%;background:var(--accent);border-radius:0 4px 4px 0}
.sidebar-footer{padding:14px;border-top:1px solid rgba(255,255,255,.14);background:rgba(0,0,0,.12)}
.side-user{display:flex;align-items:center;gap:11px;margin-bottom:12px}
.side-avatar{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--maroon));
  color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:16px;flex-shrink:0;
  border:2px solid rgba(255,255,255,.35)}
.side-user .su-meta{min-width:0}
.side-user strong{display:block;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side-user small{font-size:11.5px;opacity:.8;display:flex;align-items:center;gap:5px}
.side-user small::before{content:"";width:7px;height:7px;border-radius:50%;background:#46d680;display:inline-block;
  box-shadow:0 0 0 2px rgba(70,214,128,.25)}

/* min-width:0 — without it a flex item refuses to shrink, so a wide table
   (the timetable) stretches the whole page instead of scrolling inside itself */
.content{flex:1;min-width:0;margin-left:256px;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;transition:margin-left .22s ease}
.topbar{background:#fff;border-bottom:1px solid var(--line);padding:16px 28px;display:flex;align-items:center;gap:16px;position:sticky;top:0;z-index:20}
.topbar h2{font-size:20px;color:var(--primary-dark);flex:1}
.topbar-right{display:flex;align-items:center;gap:12px;font-size:14px}
/* The signed-in person, as a chip rather than loose text: the bar is white and
   a bare name floats in it, while a bordered tile reads as "this is you". */
.user-chip{display:inline-flex;align-items:center;gap:9px;
  background:linear-gradient(180deg,#f4f9ff,#e9f2fd);border:1px solid #cfe0f6;
  border-radius:12px;padding:6px 14px 6px 8px;max-width:260px}
.user-chip .uc-avatar{width:28px;height:28px;border-radius:50%;flex:none;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  background:#cfe1f7;color:var(--primary);font-weight:700;font-size:13px}
.user-chip .uc-avatar img{width:100%;height:100%;object-fit:cover}
.user-chip .uc-avatar svg{width:17px;height:17px;fill:#4a7fc1}
.user-chip .uc-name{font-weight:700;font-size:15px;color:var(--primary-dark);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.menu-toggle{display:block;font-size:22px;background:none;color:var(--primary-dark);cursor:pointer;
  width:38px;height:38px;border-radius:9px;transition:.15s}
.menu-toggle:hover{background:var(--primary-light)}
.role-badge{background:var(--primary-light);color:var(--primary);padding:4px 12px;border-radius:20px;font-size:12px;font-weight:600;text-transform:capitalize}
.view{padding:26px 28px;flex:1;min-width:0}
.app-footer{background:#fff;border-top:1px solid var(--line);padding:14px 28px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  font-size:12.5px;color:var(--muted);flex-wrap:wrap}

/* ===== CARDS / STATS ===== */
/* Cards are capped, not stretched: with minmax(...,1fr) a four-card row on a
   wide screen blew each card up to ~400px while a seven-card row stayed at
   ~210px, so the same dashboard showed three different card sizes. */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,220px));
  justify-content:start;gap:13px;margin-bottom:20px}
.stat-card{background:#fff;border-radius:var(--radius);padding:12px 14px;box-shadow:var(--shadow);display:flex;align-items:center;gap:11px;border-left:4px solid var(--primary);min-width:0}
.stat-card .s-ico{width:36px;height:36px;border-radius:10px;background:var(--primary-light);color:var(--primary);
  display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0}
.stat-card > div{min-width:0}
/* long money values (₹10,70,000) must shrink rather than overflow the card */
.stat-card .s-val{font-size:19px;font-weight:700;color:var(--ink);line-height:1.15;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stat-card .s-lbl{font-size:12px;color:var(--muted);line-height:1.3}
.stat-card.c2{border-left-color:var(--accent)} .stat-card.c2 .s-ico{background:#e0f4f4;color:var(--accent)}
.stat-card.c3{border-left-color:var(--green)} .stat-card.c3 .s-ico{background:#e4f6ec;color:var(--green)}
.stat-card.c4{border-left-color:var(--red)} .stat-card.c4 .s-ico{background:#fde8ea;color:var(--red)}

/* ===== DASHBOARD: welcome banner ===== */
.welcome-banner{background:linear-gradient(120deg,var(--primary-dark),var(--primary) 70%,#009899);
  color:#fff;border-radius:16px;padding:24px 26px;margin-bottom:22px;box-shadow:var(--shadow);
  display:flex;align-items:center;justify-content:space-between;gap:18px;position:relative;overflow:hidden}
.welcome-banner::after{content:"";position:absolute;right:-40px;top:-40px;width:200px;height:200px;
  background:radial-gradient(circle,rgba(255,255,255,.14),transparent 70%);pointer-events:none}
.wb-text h2{font-size:23px;margin-bottom:4px}
.wb-text p{font-size:13.5px;opacity:.9}
.wb-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.wb-chips span{background:rgba(255,255,255,.18);padding:6px 13px;border-radius:20px;font-size:12.5px;font-weight:500;backdrop-filter:blur(2px)}
.wb-logo img{box-sizing:content-box;width:56px;height:46px;background:#fff;border-radius:12px;padding:5px;object-fit:contain}

/* ===== DASHBOARD: 2-column grid ===== */
.dash-2col{display:grid;grid-template-columns:1fr 1fr;gap:22px}
/* min-width:0 — a grid item defaults to min-width:auto, so a wide table inside
   would stretch the column instead of letting .tbl-wrap scroll inside it */
.dash-2col .panel{margin-bottom:22px;min-width:0}

/* branch distribution bars */
/* The label and value are sized by a minimum, not a fixed width: these rows
   carry "CSE / 4" on one dashboard and "Semester 5 / ₹2,45,000" on another,
   and a fixed 64px/30px made the long ones wrap mid-number. */
.dist-row{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.dist-label{flex:0 0 auto;min-width:64px;max-width:150px;font-size:13px;font-weight:600;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dist-bar{flex:1;min-width:50px;height:14px;background:var(--primary-light);border-radius:8px;overflow:hidden}
.dist-bar > i{display:block;height:100%;background:linear-gradient(90deg,var(--primary),#1aa8a0);border-radius:8px;transition:width .5s}
.dist-val{flex:0 0 auto;min-width:30px;text-align:right;font-weight:700;color:var(--primary-dark);
  font-size:14px;white-space:nowrap;line-height:1.25}
/* the qualifier ("of ₹3,30,000", "80% att") sits under the figure, not beside it */
.dist-val small{display:block;font-size:11.5px;font-weight:500;color:var(--muted);line-height:1.3}

/* fee donut */
.donut-wrap{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.donut{width:150px;height:150px;flex-shrink:0}
.donut circle{transition:stroke-dashoffset .6s ease}
.donut-legend{font-size:14px;line-height:1.9}
.donut-legend b{color:var(--primary-dark)}
.dot{display:inline-block;width:11px;height:11px;border-radius:50%;margin-right:7px;vertical-align:middle}
.dot.green{background:var(--primary)} .dot.line{background:var(--line)}

/* top performers / rank rows */
.rank-row{display:flex;align-items:center;gap:13px;padding:10px 0;border-bottom:1px solid var(--line)}
.rank-row:last-child{border-bottom:none}
.rank{width:30px;height:30px;border-radius:50%;background:var(--primary-light);color:var(--primary-dark);
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;flex-shrink:0}
.rank.gold{background:#ffd86b;color:#7a5a00} .rank.silver{background:#dfe5ea;color:#566} .rank.bronze{background:#f0c08a;color:#7a4a10}
.rank-info{flex:1}
.rank-info strong{display:block;font-size:14px}
.rank-info small{color:var(--muted);font-size:12px}

.panel{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:22px;margin-bottom:22px;min-width:0}
.panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;gap:12px;flex-wrap:wrap}
.panel-head h3{font-size:17px;color:var(--primary-dark)}
.panel-more{margin-top:12px;text-align:center;font-size:12.5px;color:var(--muted)}
/* module-wide write gates set by gateControls() on the view root: a "View Only"
   grant hides the add / edit / delete controls even when a page redraws its
   table after a filter (the server refuses those writes regardless) */
.ro-add button[id$="Add"],.ro-add [data-add]{display:none!important}
.ro-edit .btn-edit,.ro-edit [data-edit],.ro-edit [data-status]{display:none!important}
.ro-del .btn-del,.ro-del [data-del]{display:none!important}
.panel-tools{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.search-box{padding:9px 13px;border:1px solid var(--line);border-radius:8px;min-width:200px;background:#fbfcfe}
.search-box:focus{outline:none;border-color:var(--primary)}
/* on/off switch used in panel headers (e.g. "Show fees to students") */
.switch-label{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--muted);
  padding:7px 11px;border:1px solid var(--line);border-radius:8px;background:#fbfcfe;cursor:pointer;user-select:none}
.switch-label input{width:15px;height:15px;accent-color:var(--primary);cursor:pointer}
.switch-label:hover{border-color:var(--primary)}
.filter-sel{padding:9px 12px;border:1px solid var(--line);border-radius:8px;background:#fbfcfe}
.days-field{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);white-space:nowrap}
.days-field input{width:78px}
/* 78px is right for a two-digit day count and far too narrow for a date:
   Chrome truncated "dd-mm-yyyy" to "dd-r" and left no room for the
   calendar button. */
.days-field input[type="date"]{width:152px}

/* ===== TABLES ===== */
.tbl-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:14px}
thead th{text-align:left;padding:12px 14px;background:var(--primary-light);color:var(--primary-dark);font-weight:600;white-space:nowrap}
thead th:first-child{border-radius:8px 0 0 8px} thead th:last-child{border-radius:0 8px 8px 0}
tbody td{padding:12px 14px;border-bottom:1px solid var(--line);white-space:nowrap}
tbody tr:hover{background:#fafcff}
.row-actions{display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end}
/* In a scrollable table the last (actions) column gets squeezed and its buttons
   wrap into a tall stack — a 45px row ballooning to 228px, which reads as broken
   alignment. Keep them on one line inside a table; the table scrolls sideways
   instead. Mobile card-rows re-enable wrapping just below. */
.tbl-wrap .row-actions{flex-wrap:nowrap;white-space:nowrap}

/* Admin dashboard quick actions — one button per granted page */
.quick-actions{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.qa-btn{display:flex;align-items:center;gap:9px;padding:12px 14px;border:1px solid var(--border);
  border-radius:10px;background:var(--surface,#fff);cursor:pointer;font:inherit;font-size:13.5px;
  font-weight:500;color:var(--text);text-align:left;transition:border-color .15s,box-shadow .15s,transform .05s}
.qa-btn:hover{border-color:var(--primary);box-shadow:0 2px 10px rgba(24,115,80,.10)}
.qa-btn:active{transform:translateY(1px)}
.qa-ico{font-size:18px;line-height:1}

/* Access Control modal — per-module No/View/Full/Custom */
.ac-sub{font-size:13px;color:var(--muted);margin:0 0 12px}
.ac-src{margin:0 0 12px}
.ac-tools{display:flex;gap:8px;align-items:center;margin:0 0 10px;flex-wrap:wrap}
.ac-tools .search-box{flex:1;min-width:150px}
.ac-list{max-height:52vh;overflow:auto;border:1px solid var(--border);border-radius:10px}
.ac-mod{padding:10px 12px;border-bottom:1px solid var(--border)}
.ac-mod:last-child{border-bottom:0}
.ac-mod-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.ac-mod-name{font-weight:600;font-size:13.5px}
/* per-page (sub-module) toggles under each module */
.ac-mod-pages{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin:9px 2px 2px;
  padding-top:9px;border-top:1px dashed var(--border)}
.ac-pages-label{font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.4px}
.ac-page{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--text);cursor:pointer}
.ac-page input{margin:0}
.ac-mod-pages.ac-disabled{opacity:.45}
.ac-mod-pages.ac-disabled .ac-page{cursor:not-allowed}
.ac-level{padding:6px 10px;border:1px solid var(--border);border-radius:8px;background:var(--surface,#fff);
  font:inherit;font-size:13px;font-weight:500;min-width:130px}
.ac-actions{display:flex;flex-wrap:wrap;gap:10px 16px;margin:10px 2px 2px;padding-top:10px;
  border-top:1px dashed var(--border)}
.ac-act{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--text);cursor:pointer}
.ac-act input{margin:0}
/* Access Control — summary chips, granular bulk toolbar, unsaved badge */
.ac-head{margin:0 0 10px;font-size:13px;color:var(--text)}
.ac-summary{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 12px}
.ac-chip{background:var(--surface-2,#f2f6fc);border:1px solid var(--border);border-radius:9px;
  padding:6px 11px;min-width:64px;display:flex;flex-direction:column;line-height:1.15}
.ac-chip b{font-size:16px;color:var(--primary,#187350)}
.ac-chip span{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;margin-top:1px}
.ac-chip.hot b{color:var(--green,#009899)}
.ac-chip.muted{min-width:auto}
.ac-chip.muted b{font-size:13px}
.ac-chip.muted span{text-transform:none;letter-spacing:0;font-size:11.5px;margin-top:2px}
.ac-tools-2{margin-top:-2px}
.ac-tools-label{font-size:12px;color:var(--muted)}
.ac-dirty{display:inline-flex;align-items:center;gap:5px;color:#b8860b;font-size:12.5px;
  font-weight:600;margin-right:auto}
.ac-dirty svg{width:14px;height:14px}
.ac-note{font-size:12px;color:var(--muted);margin:10px 0 0}
/* the two access-mode radios carry long descriptions — give them half the row
   each so the text flows instead of wrapping a word at a time */
.chk-grid.ac-src{grid-template-columns:1fr 1fr}
.chk-grid.ac-src .chk{align-items:flex-start;line-height:1.35}

/* The employee list has ten columns; below a wide desktop it cannot show them
   all without running off the edge. The three that are also on the employee's
   own profile page — Department, Reporting To, Phone — step aside on a laptop,
   so Emp ID, Name, Role, Designation, Email and the actions stay lined up and
   in view. They all come back on a wide screen. */
@media (max-width:1800px){
  .emp-tbl th:nth-child(5), .emp-tbl td:nth-child(5),
  .emp-tbl th:nth-child(7), .emp-tbl td:nth-child(7),
  .emp-tbl th:nth-child(9), .emp-tbl td:nth-child(9){display:none}
}
@media (max-width:1300px){
  /* on a small laptop Email (8) goes too — it is one click away on the
     employee's profile — so what is left lines up without a sideways scroll */
  .emp-tbl th:nth-child(8), .emp-tbl td:nth-child(8){display:none}
}

/* The asset register has eleven columns and runs off the edge on anything short
   of an extra-wide screen. The four that are also on the asset's View card —
   Purchase Date, Purchase Cost, Vendor, Location — step aside as the window
   narrows, so Asset ID, Name, Category, Qty, Current Value, Status and the
   actions stay lined up and in view. They all come back above 1920px. */
@media (max-width:1920px){
  .as-tbl th:nth-child(5), .as-tbl td:nth-child(5),
  .as-tbl th:nth-child(8), .as-tbl td:nth-child(8){display:none}
}
@media (max-width:1550px){
  .as-tbl th:nth-child(6), .as-tbl td:nth-child(6),
  .as-tbl th:nth-child(9), .as-tbl td:nth-child(9){display:none}
}
.empty{text-align:center;color:var(--muted);padding:34px;font-size:14px}
.pill{padding:3px 11px;border-radius:20px;font-size:12px;font-weight:600;display:inline-block}
.pill.green{background:#e4f6ec;color:var(--green)} .pill.red{background:#fde8ea;color:var(--red)}
.pill.amber{background:#fef3e0;color:var(--amber)} .pill.blue{background:var(--primary-light);color:var(--primary)}

/* user ids / passwords read better in a fixed-width face */
td.mono{font-family:"Consolas","Courier New",monospace;font-size:13px;letter-spacing:.4px}

.pager{display:flex;align-items:center;justify-content:flex-end;gap:14px;margin-top:14px;flex-wrap:wrap}
.pager-info{font-size:12.5px;color:var(--muted)}
.pager button[disabled]{opacity:.4;cursor:not-allowed}

/* ===== FORMS (modal) ===== */
/* minmax(0,1fr), not 1fr: a plain 1fr column will not shrink below its widest
   child, so a <select> carrying a long option — "Logistics and Supply Chain
   Management" — pushed the grid wider than the modal and the right-hand fields
   ran off the edge. minmax(0,…) lets the column shrink and the control ellipsis
   its own text instead. */
.form-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px}
.form-grid.one{grid-template-columns:minmax(0,1fr)}
.field{display:flex;flex-direction:column;gap:5px;min-width:0}
.field.full{grid-column:1/-1}
.field label{font-size:13px;font-weight:500;color:var(--ink)}
.field input,.field select,.field textarea{padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:#fbfcfe;width:100%;min-width:0}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--primary);background:#fff}
.field input:not(:placeholder-shown):invalid{border-color:#d33;background:#fff5f5}
/* The box a refusal is about. Red enough to find on a long tab without being
   the loudest thing on the screen, and it holds while the cursor is in it —
   the ordinary blue focus ring would otherwise paint over the mark the moment
   the field is jumped to. */
.field .is-bad,.field .is-bad:focus,.is-bad{border-color:#d33 !important;background:#fff5f5;
  box-shadow:0 0 0 3px rgba(211,51,51,.15)}
.form-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:20px}

/* ===== MODAL ===== */
.modal-overlay{position:fixed;inset:0;background:rgba(15,30,55,.5);display:flex;align-items:center;justify-content:center;z-index:50;padding:20px}
.modal{background:#fff;border-radius:14px;width:100%;max-width:560px;max-height:90vh;max-height:90dvh;overflow-y:auto;box-shadow:var(--shadow-lg)}
.modal.modal-wide{max-width:860px}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;border-bottom:1px solid var(--line);position:sticky;top:0;background:#fff}
.modal-head h3{font-size:17px;color:var(--primary-dark)}
.modal-close{font-size:26px;background:none;color:var(--muted);line-height:1}
.modal-body{padding:22px}

/* ===== TOAST ===== */
.toast{position:fixed;bottom:26px;right:26px;background:var(--ink);color:#fff;padding:13px 20px;border-radius:9px;
  font-size:14px;box-shadow:var(--shadow-lg);z-index:60;animation:slideIn .25s}
.toast.ok{background:var(--green)} .toast.err{background:var(--red)}
@keyframes slideIn{from{transform:translateY(14px);opacity:0}to{transform:translateY(0);opacity:1}}

/* ===== ATTENDANCE / MARKS specific ===== */
.att-list{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.att-row{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border:1px solid var(--line);border-radius:9px}
.att-row .who strong{display:block;font-size:14px}
.att-row .who small{color:var(--muted);font-size:12px}
/* tickable list (assign several classes to one faculty at once) */
.chk-list{display:flex;flex-direction:column;gap:6px;margin-top:8px;max-height:260px;overflow-y:auto;
  border:1px solid var(--line);border-radius:9px;padding:8px}
.chk-row{display:flex;align-items:flex-start;gap:10px;padding:8px 10px;border:1px solid transparent;
  border-radius:8px;cursor:pointer}
.chk-row:hover{background:var(--primary-light);border-color:var(--line)}
.chk-row input{margin-top:2px;width:16px;height:16px;accent-color:var(--primary);cursor:pointer;flex-shrink:0}
.chk-text strong{display:block;font-size:14px}
.chk-text small{color:var(--muted);font-size:12px}
.chk-bar{display:flex;align-items:center;justify-content:space-between;margin-top:10px}

.att-toggle{display:flex;gap:8px}
.toggle-btn{padding:6px 16px;border-radius:7px;border:1px solid var(--line);background:#fff;font-weight:600;font-size:13px}
.toggle-btn.p.on{background:var(--green);color:#fff;border-color:var(--green)}
.toggle-btn.a.on{background:var(--red);color:#fff;border-color:var(--red)}

.bar{height:8px;background:var(--line);border-radius:6px;overflow:hidden;width:120px;display:inline-block;vertical-align:middle}
.bar > i{display:block;height:100%;background:var(--green)}
.bar.low > i{background:var(--red)} .bar.mid > i{background:var(--amber)}

/* ===== TIMETABLE ===== */
.tt-grid{overflow-x:auto}
.tt-table{border-collapse:collapse;width:100%;min-width:880px;table-layout:fixed}
/* overflow:hidden keeps a long subject name inside its own day column */
.tt-table th,.tt-table td{border:1px solid #b8b8b8;padding:5px 7px;vertical-align:top;overflow:hidden}
.tt-table thead th{text-align:center;background:#ececec;font-size:13px;font-weight:700;color:var(--ink)}
.tt-table thead th:first-child,.tt-table .tt-time{width:132px}
.tt-table .tt-time{background:#ececec;font-size:12px;font-weight:700;color:var(--ink);white-space:nowrap;text-align:left}
.tt-table td{height:32px}
.tt-busy{background:#fff}
.tt-cell{font-size:12px;line-height:1.3;text-align:left;overflow-wrap:anywhere;word-break:break-word}
.tt-cell+.tt-cell{margin-top:6px;padding-top:6px;border-top:1px dashed var(--line)}
.tt-cell b{display:block;color:var(--primary-dark);font-weight:700;font-size:13.5px;letter-spacing:.3px;margin-bottom:1px;cursor:help}
.tt-cell small{display:block;color:var(--muted);font-size:11px}
.tt-cell.lab b{color:var(--purple)}

/* report card */
.report-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:18px;flex-wrap:wrap;gap:14px}
.report-head .gpa-box{text-align:center;background:var(--primary-light);padding:14px 22px;border-radius:12px}
.report-head .gpa-box .v{font-size:30px;font-weight:700;color:var(--primary-dark)}
.report-head .gpa-box .l{font-size:12px;color:var(--muted)}

/* ===== LIBRARIAN DASHBOARD ===== */
.lib-stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;margin-bottom:22px}
.lib-stat-card{background:#fff;border-radius:var(--radius);padding:20px;box-shadow:var(--shadow);
  display:flex;align-items:center;gap:14px}
.lib-stat-ico{width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;
  font-size:24px;flex-shrink:0;color:#fff}
.lib-stat-ico.green{background:var(--primary)}
.lib-stat-ico.blue{background:var(--blue)}
.lib-stat-ico.amber{background:var(--accent)}
.lib-stat-ico.purple{background:var(--purple)}
.lib-stat-lbl{font-size:12.5px;color:var(--muted)}
.lib-stat-val{font-size:24px;font-weight:700;color:var(--ink);line-height:1.2}
.lib-stat-sub{font-size:11.5px;color:var(--muted)}

.lib-row{display:grid;grid-template-columns:1.1fr 1fr;gap:22px}
.lib-row3{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:22px}

.lib-donut-wrap{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.lib-donut{width:180px;height:180px;border-radius:50%;position:relative;flex-shrink:0}
.lib-donut-center{position:absolute;inset:28px;background:#fff;border-radius:50%;display:flex;
  flex-direction:column;align-items:center;justify-content:center;box-shadow:inset 0 0 0 1px var(--line)}
.lib-donut-center strong{font-size:24px;color:var(--primary-dark)}
.lib-donut-center span{font-size:11.5px;color:var(--muted)}
.lib-legend{flex:1;min-width:180px;font-size:13.5px}
.lib-legend-head{display:flex;justify-content:space-between;color:var(--muted);font-size:11.5px;margin-bottom:8px;padding:0 2px}
.lib-legend-row{display:flex;align-items:center;justify-content:space-between;padding:7px 2px;border-bottom:1px solid var(--line)}
.lib-legend-row:last-child{border-bottom:none}
.lib-legend-row .dotlbl{display:flex;align-items:center;gap:8px}
.lib-legend-row .ldot{width:10px;height:10px;border-radius:50%;flex-shrink:0}

.lib-events-list{display:flex;flex-direction:column;gap:12px}
.lib-event{display:flex;gap:12px;align-items:flex-start}
.lib-event-badge{background:var(--primary-light);color:var(--primary-dark);border-radius:10px;
  padding:6px 10px;text-align:center;font-weight:700;min-width:52px;flex-shrink:0}
.lib-event-badge .mon{display:block;font-size:10px;letter-spacing:.5px}
.lib-event-badge .day{display:block;font-size:16px}
.lib-event-title{font-size:13.5px;font-weight:600;color:var(--ink)}

/* Upcoming birthdays. One row per person: face, who they are, when it is. The
   row for today is tinted so it is the one the eye lands on. It wraps on a
   narrow screen rather than squeezing the name to nothing. */
.bday-list{display:flex;flex-direction:column;gap:2px}
.bday-row{display:flex;align-items:center;gap:12px;padding:9px 8px;border-radius:8px;flex-wrap:wrap}
.bday-row + .bday-row{border-top:1px solid var(--line)}
.bday-row.is-today{background:#fdf6e3}
.bday-face{flex:none;display:block}
.bday-face img,.bday-face span{width:38px !important;height:38px !important;font-size:15px !important}
.bday-who{flex:1 1 130px;min-width:0}
.bday-who strong{display:block;font-size:13.5px;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bday-who small{display:block;font-size:11.5px;color:var(--muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bday-when{flex:none;text-align:right;display:flex;flex-direction:column;gap:3px;align-items:flex-end}
.bday-date{font-size:13px;font-weight:600;color:var(--primary-dark)}
.bday-when small{font-size:11.5px;color:var(--muted)}
.lib-event-meta{font-size:11.5px;color:var(--muted)}

.lib-qa-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.lib-qa-btn{background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:16px 10px;
  display:flex;flex-direction:column;align-items:center;gap:8px;font-size:12.5px;font-weight:600;
  color:var(--ink);cursor:pointer;transition:.15s}
.lib-qa-btn:hover{border-color:var(--primary);background:#fff}
.lib-qa-ico{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:16px;color:#fff}

@media(max-width:860px){
  .lib-row,.lib-row3{grid-template-columns:1fr}
}

/* ===== FINANCE / ACCOUNTS ===== */
/* a sub-heading inside the sidebar, e.g. the admin's "Finance" group */
.nav-section-mid{margin-top:16px;padding-top:14px;border-top:1px solid rgba(255,255,255,.14)}

/* sidebar entry that leaves the CMS for an external service (opens a new tab).
   The ↗ is taken out of the flex flow — in the row it cost the label ~21px and
   pushed "Employee Attendance" onto a second line, making the item taller than
   every other nav entry. */
.nav-item.nav-link{text-decoration:none;color:inherit}
.nav-item.nav-link:visited{color:inherit}
.nav-item.nav-link > span:not(.ico){white-space:nowrap}
.nav-ext{position:absolute;right:9px;top:7px;font-size:11px;opacity:.55;pointer-events:none}
.nav-item.nav-link:hover .nav-ext{opacity:1}
body.sidebar-collapsed .nav-section-mid{font-size:0;padding-top:12px;margin-top:12px}

/* filter rows wrap instead of overflowing on small screens */
.fin-filters{margin-bottom:16px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.fin-filters .filter-sel,.fin-filters .search-box{max-width:100%}

/* report selector */
.fin-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.fin-tab{background:var(--bg);border:1px solid var(--line);color:var(--ink);border-radius:20px;
  padding:8px 16px;font-size:13px;font-weight:500;transition:.15s}
.fin-tab:hover{border-color:var(--primary);color:var(--primary)}
.fin-tab.active{background:var(--primary);border-color:var(--primary);color:#fff;font-weight:600}

/* ===== READ-ONLY ROLE (Center Head) =====
   A monitoring session is signposted everywhere: the role chip in the top bar,
   a banner on each page, and section headings that group the overview. */
.ro-banner{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  background:#fffaf0;border:1px solid #f3dcb4;border-left:4px solid var(--amber);
  border-radius:10px;padding:12px 16px;margin-bottom:18px;
  font-size:13px;color:#7a5a1e;line-height:1.6}
.ro-badge{flex-shrink:0;background:var(--amber);color:#fff;border-radius:20px;
  padding:4px 12px;font-size:11.5px;font-weight:700;letter-spacing:.04em}
.ro-section{font-size:15px;color:var(--primary-dark);font-weight:600;
  margin:26px 0 12px;padding-bottom:8px;border-bottom:2px solid var(--primary-light)}
.ro-section:first-child{margin-top:0}
.ro-sub{font-size:13px;color:var(--primary-dark);font-weight:600;margin:18px 0 8px;
  text-transform:uppercase;letter-spacing:.03em}

/* ===== INSTALL APP button (PWA) — only visible when installable ===== */
.install-btn{margin-top:14px;display:flex;align-items:center;justify-content:center;gap:8px;
  border-style:dashed;font-weight:600;text-decoration:none}
.install-btn.hidden{display:none}
a.install-btn{color:var(--primary);box-sizing:border-box}
a.install-btn:hover{background:var(--primary-light)}

/* The same two buttons, now a strip across the top of the dashboard. A row that
   wraps to a stack on a narrow phone, aligned to the right on a wide screen. */
.app-get-bar{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end;margin:0 0 16px}
.app-get-btn{display:inline-flex;align-items:center;gap:8px;border-style:dashed;
  font-weight:600;text-decoration:none;color:var(--primary);box-sizing:border-box}
.app-get-btn:hover{background:var(--primary-light)}
@media (max-width:600px){
  .app-get-bar{justify-content:stretch}
  .app-get-btn{flex:1 1 100%;justify-content:center}
}

/* a submenu row sits under its parent, quieter and indented */
.nav-item.nav-child{padding-left:26px;font-size:13px;opacity:.85;margin-bottom:2px}
.nav-item.nav-child .ico{width:22px;height:22px;font-size:12px;background:transparent}
.nav-item.nav-child.active{opacity:1}
.sidebar-collapsed .nav-item.nav-child{display:none}
/* a sidebar group is a dropdown: the row toggles, the list sits under a guide
   line and is only drawn while the group is open (see buildNav) */
.nav-parent{cursor:pointer}
.nav-parent .nav-caret{margin-left:auto;display:flex;align-items:center;opacity:.65;transition:transform .2s ease}
.nav-parent .nav-caret .ic{width:14px;height:14px;margin:0}
.nav-parent.open .nav-caret{transform:rotate(180deg);opacity:1}
.nav-parent.within:not(.active){color:#fff}
.nav-group .nav-kids{display:none;margin:0 0 4px 21px;padding-left:4px;border-left:1px solid rgba(255,255,255,.16)}
.nav-group.open .nav-kids{display:block}
.nav-group .nav-item.nav-child{padding-left:10px}

/* ===== REGISTER ATTENDANCE (the class-picker grid) ===== */
.att-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px 14px;
  padding:4px 0 16px;border-bottom:1px solid var(--line);margin-bottom:16px}
.att-field{display:flex;flex-direction:column;gap:5px;min-width:0}
.att-field.att-full{grid-column:1/-1}
.att-locked-note{background:#fff6f6;border:1px solid #f3cfcf;border-radius:8px;padding:10px 12px;
  margin:0 0 12px;font-size:12.5px;color:#8a3b3b}
/* faculty dashboard — next class, per-day load, teaching progress */
.next-class{padding:2px 2px 4px}
.nc-when{font-size:12px;font-weight:700;color:var(--green,#009899);text-transform:uppercase;letter-spacing:.4px}
.nc-subj{font-size:20px;font-weight:700;color:var(--primary,#187350);margin:4px 0 3px}
.nc-subj small{font-weight:500;color:var(--muted);font-size:13px}
.nc-meta{font-size:13px;color:var(--text);display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.nc-meta svg{width:15px;height:15px;color:var(--muted)}
.nc-next{display:flex;flex-direction:column;gap:3px;margin-top:10px;padding-top:10px;border-top:1px dashed var(--border)}
.nc-next span{font-size:12px;color:var(--muted)}
.per-day{display:flex;flex-direction:column;gap:7px;padding:2px}
.pd-row{display:flex;align-items:center;gap:10px}
.pd-day{width:38px;font-size:12.5px;font-weight:600;color:var(--text)}
.pd-bar{flex:1;height:9px;background:var(--surface-2,#eef3fb);border-radius:5px;overflow:hidden}
.pd-bar b{display:block;height:100%;background:var(--primary,#187350);border-radius:5px}
.pd-n{width:20px;text-align:right;font-size:12.5px;font-weight:700;color:var(--primary,#187350)}
.prog-line{display:flex;align-items:center;gap:12px;margin:0 0 14px}
.prog-track{flex:1;height:12px;background:var(--surface-2,#eef3fb);border-radius:7px;overflow:hidden}
.prog-track b{display:block;height:100%;background:linear-gradient(90deg,#187350,#009899);border-radius:7px}
.prog-pct{font-size:12.5px;font-weight:700;color:var(--primary,#187350);white-space:nowrap}
.prog-pct small{font-weight:400;color:var(--muted)}
#classReminder{position:fixed;right:18px;bottom:18px;z-index:9000;display:flex;flex-direction:column;gap:10px;max-width:320px}
.class-reminder{background:#fff;border:1px solid var(--border);border-left:4px solid var(--green,#009899);
  border-radius:10px;box-shadow:0 8px 26px rgba(20,40,80,.22);padding:12px 14px;animation:crIn .25s ease}
@keyframes crIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.cr-head{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--green,#009899)}
.cr-head svg{width:16px;height:16px}
.cr-head b{flex:1}
.cr-x{background:none;border:0;font-size:20px;line-height:1;color:var(--muted);cursor:pointer;padding:0 2px}
.cr-subj{font-size:16px;font-weight:700;color:var(--primary,#187350);margin:6px 0 3px}
.cr-subj small{font-weight:500;color:var(--muted);font-size:12px}
.cr-meta{font-size:12.5px;color:var(--text);margin-bottom:10px}
.cr-go{width:100%}
.att-field > span{font-size:12px;font-weight:600;color:var(--muted)}
.att-field select,.att-field input{width:100%;padding:9px 11px;border:1px solid var(--line);
  border-radius:8px;background:#fbfcfe;font-size:13.5px}
.att-field select:focus,.att-field input:focus{outline:none;border-color:var(--primary);background:#fff}
/* the paper name is filled from the paper code and never typed */
.att-field input[readonly]{background:var(--bg);color:var(--muted)}
.att-head-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px}

/* ===== PER-COLUMN FILTER ROW (Manage Students) ===== */
.tbl-filter .filter-row td{padding:6px 8px;background:var(--bg);border-bottom:1px solid var(--line)}
.tbl-filter .filter-row input,
.tbl-filter .filter-row select{width:100%;min-width:70px;box-sizing:border-box;
  padding:5px 7px;border:1px solid var(--line);border-radius:6px;font-size:12px;background:#fff}
.tbl-filter .filter-row input:focus,
.tbl-filter .filter-row select:focus{outline:none;border-color:var(--primary)}

/* ===== MY PLACEMENT (student view) ===== */
.pl-detail{font-size:12.5px;color:var(--muted);line-height:1.6}
/* why a drive is closed to this student, under the pill that says so */
.pl-why{font-size:11.5px;color:var(--muted);margin-top:3px;line-height:1.45}

/* ===== BULK UPLOAD (Excel / CSV import) ===== */
.imp-intro{font-size:13px;color:var(--muted);line-height:1.55;margin-bottom:14px}
.imp-intro b{color:var(--ink)}
.imp-cols{margin-top:6px;font-size:12px}
.imp-note{font-size:12px;color:var(--muted);margin-top:6px}
.imp-note code{background:var(--bg);padding:1px 6px;border-radius:5px;font-size:11.5px}
.imp-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
/* the real input is hidden, so the label has to look and behave like a button */
.imp-pick{cursor:pointer;display:inline-flex;align-items:center}
.imp-file{font-size:12px;color:var(--muted);word-break:break-all}
.imp-summary{display:flex;gap:14px;font-size:13px;font-weight:600;margin-bottom:8px}
.imp-ok{color:#1a7f4b}
.imp-bad{color:#c02626}
/* a 300-row sheet must not push the Import button off the modal */
.imp-table{max-height:300px;overflow-y:auto}
.imp-table table{font-size:12.5px}

/* ===== CHECKBOX GRID (drive eligibility: branches / courses) ===== */
.chk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px 14px;
  padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--bg)}
.chk{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:500;color:var(--ink);cursor:pointer}
.chk input{width:15px;height:15px;accent-color:var(--primary);cursor:pointer;margin:0}

/* A page whose module was given for viewing only: everything that reads stays —
   search, filters, printing, exports — and the controls that write are gone. */
.view-frozen .btn-primary,.view-frozen .btn-edit,.view-frozen .btn-del{display:none}

/* ===== PERMISSIONS: one row per module, opened and (optionally) editable ===== */
.perm-list{border:1px solid var(--line);border-radius:10px;background:var(--bg);
  padding:4px 12px 8px;max-height:340px;overflow:auto}
.perm-row{display:grid;grid-template-columns:1fr 62px 78px;align-items:center;
  gap:8px;padding:7px 2px;border-bottom:1px solid var(--line)}
.perm-row:last-child{border-bottom:none}
.perm-head{position:sticky;top:0;background:var(--bg);z-index:1;font-size:11.5px;
  font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--muted)}
.perm-head span:not(:first-child),.perm-cell{text-align:center;justify-self:center}
.perm-name{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:500;
  color:var(--ink);cursor:pointer}
.perm-name input,.perm-cell input{width:15px;height:15px;accent-color:var(--primary);
  cursor:pointer;margin:0}
.perm-view{color:var(--green);font-weight:700}
/* a module that is not open has nothing to say about editing */
.perm-row.off .perm-view{color:var(--line)}
.perm-row.off .perm-cell input{cursor:not-allowed}
.perm-row.off .perm-name{color:var(--muted)}

/* ===== SUBJECTS BY SEMESTER ===== */
.syl-branch{margin-bottom:26px}
.syl-branch:last-child{margin-bottom:0}
.syl-branch-head{font-size:15px;color:var(--primary-dark);padding-bottom:8px;margin-bottom:12px;
  border-bottom:2px solid var(--primary-light);display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.syl-branch-head small{font-size:12px;font-weight:500;color:var(--muted)}
.syl-sem{border:1px solid var(--line);border-radius:11px;overflow:hidden;margin-bottom:12px}
/* the signed-in student's own semester, so they find it without reading */
.syl-sem-mine{border-color:var(--primary);box-shadow:0 0 0 2px rgba(28,124,60,.12)}
.syl-sem-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:9px 14px;background:var(--bg);border-bottom:1px solid var(--line)}
.syl-sem-head strong{font-size:13.5px;color:var(--ink)}
.syl-sem-meta{margin-left:auto;font-size:12px;color:var(--muted);white-space:nowrap}
.syl-sem .tbl-wrap{border:none;border-radius:0}

/* ===== RESPONSIVE ===== */
@media(max-width:860px){
  .fin-filters{flex-direction:column;align-items:stretch}
  .fin-filters .search-box,.fin-filters .filter-sel,.fin-filters .days-field{width:100%;min-width:0}
  .fin-filters .days-field input{flex:1}
  .panel-head .panel-tools{width:100%}
  /* 230px could not hold the logo and the wordmark side by side */
  .sidebar{transform:translateX(-100%);transition:.25s;width:250px}
  .sidebar.open{transform:translateX(0)}
  .content{margin-left:0}
  .menu-toggle{display:block}
  /* dim the page behind the open drawer and catch a tap to close it; the body
     lock stops the page underneath from scrolling while the drawer is up */
  .nav-scrim{position:fixed;inset:0;background:rgba(9,24,52,.5);z-index:29;
    opacity:0;visibility:hidden;transition:opacity .25s ease}
  .nav-scrim.show{opacity:1;visibility:visible}
  body.nav-open{overflow:hidden}
  .form-grid{grid-template-columns:1fr}
  .login-hero{display:none}
  .login-card{width:100%}
  .dash-2col{grid-template-columns:1fr}
  .welcome-banner{flex-direction:column;align-items:flex-start}
  /* the 260px desktop cap stops the cards short of the panels above and
     below them, leaving a dead gutter down the right — fill the row instead */
  .stat-grid{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
}

/* ===== PHONE =====
   Three things made these pages look misaligned on a handset:
   28px of side padding on the view *plus* 22px inside every panel ate a
   quarter of a 390px screen; the stat cards stopped 74px short of the panel
   edge; and the panel toolbars wrapped a 229px search, a 144px select and a
   137px button into ragged rows that lined up with nothing. */
@media(max-width:600px){
  /* The login card was built for a 430px column: 34px of side padding plus a
     104px logo left ~130px for a wordmark that is nowrap and needs 185px, so
     "GITAM B-School" ran past the card and .login-split clipped it. Give the
     text room, and let it wrap instead of running off the edge. */
  .login-card{padding:28px 22px}
  .login-brand{gap:11px;margin-bottom:20px}
  .brand-logo{width:78px;height:46px}
  .login-brand h1{font-size:19px;white-space:normal;overflow-wrap:anywhere}
  .login-brand p{font-size:12px}
  .install-btn{font-size:14px}
  /* a lighter glow halo behind the card, so the rotating blur stays smooth on
     a phone GPU; the crisp gradient border itself is untouched */
  .login-frame::after{filter:blur(16px);opacity:.42;inset:-8px}
  .login-split{max-width:460px;justify-content:center}

  .view{padding:16px 14px}
  .panel{padding:16px 14px;margin-bottom:16px}
  .app-footer{padding:12px 14px;flex-direction:column;gap:4px;align-items:flex-start}

  .topbar{padding:11px 14px;gap:10px}
  /* the page title gets the bar's spare width and is cut with an ellipsis, so it
     always reads on one line instead of wrapping and doubling the bar's height */
  .topbar h2{font-size:17px;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  /* On a phone the bar is too narrow to carry the name as well, so the chip
     shrinks to just the avatar (the full name is in the sidebar footer). This
     frees the whole row for the title and keeps the bar one line tall. */
  .topbar-right{flex:none;gap:8px}
  .user-chip{max-width:none;padding:5px;gap:0}
  .user-chip .uc-avatar{width:30px;height:30px}
  .user-chip .uc-name{display:none}
  .nt-bell{width:38px;height:38px}

  /* one predictable grid instead of a ragged wrap: inputs and selects take
     the full width, buttons pair up evenly two to a row */
  .panel-head{align-items:stretch}
  /* stretch, not center: .btn-primary has no border and .btn-outline does, so
     centring leaves two buttons on the same row sitting 5px apart */
  .panel-tools{width:100%;gap:8px;align-items:stretch}
  .panel-tools > *{flex:1 1 calc(50% - 4px);min-width:0}
  .panel-tools > .search-box,
  .panel-tools > .filter-sel,
  .panel-tools > .days-field,
  .panel-tools > .switch-label{flex:1 1 100%;width:100%}
  .search-box{min-width:0}

  .stat-grid{grid-template-columns:1fr;gap:12px;margin-bottom:18px}
  .stat-card{padding:14px}

  .syl-sem-head{padding:9px 12px}
  .syl-sem-meta{margin-left:0;width:100%;white-space:normal}
  .modal-overlay{padding:12px}
  .modal-head{padding:14px 16px}
  .modal-body{padding:16px}
  /* Cancel/Save side by side rather than crowded into the right corner */
  .form-actions > *{flex:1}

  /* Only today's row carries the pill, and only that row is wide enough to wrap
     on a handset. When it does, the date and the pill read as one line indented
     under the name, instead of stacking ragged down the right-hand edge. Every
     other row still fits across and is left alone. */
  .bday-row.is-today .bday-when{width:100%;flex-direction:row;align-items:center;
    justify-content:flex-start;gap:8px;padding-left:50px}

  /* ---- wide tables become one card per row on a phone ----
     The header row is dropped and each cell carries its column name (set as
     data-label by cardifyTables) beside the value, so nothing has to be scrolled
     sideways. Turned on by the card-rows class, which skips the label/value
     tables, the timetable and the qualification grid. */
  .card-rows thead{display:none}
  .card-rows,.card-rows tbody,.card-rows tr,.card-rows td{display:block;width:100%}
  .card-rows tr{border:1px solid var(--line);border-radius:12px;margin-bottom:12px;
    background:#fff;box-shadow:var(--shadow);overflow:hidden}
  .card-rows td{display:flex!important;justify-content:space-between;align-items:center;gap:14px;
    padding:10px 14px;border:none;border-bottom:1px solid var(--line);
    text-align:right;font-size:13.5px;white-space:normal;min-width:0}
  .card-rows tr td:last-child{border-bottom:none}
  .card-rows td:empty{display:none!important}
  .card-rows td::before{content:attr(data-label);font-weight:600;color:var(--primary-dark);
    text-align:left;flex:0 0 auto;white-space:nowrap;font-size:12px;letter-spacing:.01em}
  .card-rows td:not([data-label]){justify-content:flex-end}
  .card-rows td[colspan]{text-align:center;justify-content:center;color:var(--muted);padding:16px}
  .card-rows td[colspan]::before{content:none}
  /* the row's own action buttons wrap neatly to the right under their label */
  .card-rows td .row-actions{flex-wrap:wrap;justify-content:flex-end}
  .tbl-wrap:has(.card-rows){overflow:visible}
}

/* ============ student file: the profile page and its long form ============ */
/* Left column is the person, right column is whichever tab is open. */
.stu-profile{display:grid;gap:18px;align-items:start}
@media (min-width:900px){.stu-profile{grid-template-columns:340px minmax(0,1fr)}}
.stu-side{padding:18px}
.stu-photo{width:150px;height:150px;margin:0 auto 14px;border-radius:50%;overflow:hidden;
  border:4px solid var(--primary-light);background:var(--bg);display:flex;
  align-items:center;justify-content:center}
.stu-photo img{width:100%;height:100%;object-fit:cover}
.stu-photo span{font-size:52px;font-weight:700;color:var(--primary)}
.stu-lastatt{background:#fdf6e3;border:1px solid #f0e2bd;border-radius:8px;padding:10px 12px;
  margin-bottom:14px;text-align:center}
.stu-lastatt span{display:block;font-size:11.5px;color:var(--muted);letter-spacing:.04em;
  text-transform:uppercase}
.stu-lastatt strong{font-size:15px;color:var(--primary-dark)}
.stu-main{padding:18px;min-width:0}

/* label/value tables — the shape every tab uses */
/* The label used to sit on a pale blue block with no padding of its own, which
   read as a border running down the middle of every row — and broke the line
   wherever a row carried one pair instead of two. It is weight and colour now,
   and it takes the same padding and rule as the value beside it, so every row
   lines up whether it holds one field or two. */
.info-tbl th{background:transparent;color:var(--primary-dark);font-weight:600;
  font-size:13px;text-align:left;vertical-align:top;
  padding:12px 14px;border-bottom:1px solid var(--line);white-space:nowrap}
.info-tbl td{font-size:13.5px;vertical-align:top}

/* The qualification grid. A select is as wide as its longest option, and the
   longest branch name here is forty-two characters — left to itself it sets the
   column width and pushes the table out of the panel, taking the first two
   columns off the left edge with it. Fixed layout means the widths given are the
   widths used, and everything inside fits them. */
.qual-tbl{table-layout:fixed}
.qual-tbl th,.qual-tbl td{padding:9px 8px}
.qual-tbl input,.qual-tbl select{width:100%;min-width:0}

/* a guardian or a document inside the form */
.sub-card{border:1px solid var(--line);border-radius:10px;padding:14px 16px;margin-bottom:14px;
  background:var(--bg)}
.sub-card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.sub-card-head strong{font-size:13px;color:var(--primary-dark);letter-spacing:.02em}

/* attendance percentages read at a glance */
.att-low{color:var(--red)}
.att-ok{color:var(--green)}

/* the ID card preview on its own tab */
.idcard-preview{max-width:420px;border:1px solid var(--line);border-radius:12px;overflow:hidden;
  box-shadow:0 6px 18px -12px rgba(24,115,80,.5)}
.idc-head{display:flex;align-items:center;gap:10px;padding:12px 14px;
  background:linear-gradient(135deg,var(--primary-dark),var(--primary));color:#fff}
.idc-head img{width:38px;height:38px;object-fit:contain;background:#fff;border-radius:6px;padding:3px}
.idc-head strong{display:block;font-size:15px;letter-spacing:.02em}
.idc-head span{font-size:11.5px;opacity:.85}
.idc-body{display:flex;gap:14px;padding:14px}
.idc-photo{width:92px;height:110px;border:1px solid var(--line);border-radius:6px;overflow:hidden;
  flex-shrink:0;display:flex;align-items:center;justify-content:center;background:var(--bg)}
.idc-photo img{width:100%;height:100%;object-fit:cover}
.idc-photo span{font-size:11px;color:var(--muted);text-align:center}
.idc-fields{display:grid;gap:7px;font-size:13px;min-width:0}
.idc-fields label{display:block;font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;
  color:var(--muted)}
.idc-fields strong{font-weight:600;word-break:break-word}

/* a name in a table that opens the record behind it */
.linkish{background:none;border:0;padding:0;font:inherit;color:var(--primary);cursor:pointer;
  text-align:left;text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px;
  text-decoration-color:color-mix(in srgb, var(--primary) 35%, transparent)}
.linkish:hover{color:var(--primary-dark);text-decoration-color:currentColor}

/* The side card is a narrow column, so its labels need more of it than the
   22% a wide tab table gives them — otherwise "Employee ID" wraps. */
.stu-side .info-tbl th{width:46% !important}

/* The roll is long: its heading and filter rows stay put while it scrolls,
   so you always know which column you are reading. */
.tbl-sticky{max-height:calc(100vh - 260px);overflow:auto}
.tbl-sticky thead th{position:sticky;top:0;z-index:3;background:var(--primary-light)}
.tbl-sticky thead .filter-row td{position:sticky;top:38px;z-index:2;background:var(--bg)}

/* What the Advanced Filter narrowed to, said once above the table. It appears
   only while the panel has something set, so an unfiltered roll looks exactly
   as it always did. */
.filter-bar{display:flex;align-items:center;flex-wrap:wrap;gap:10px 14px;
  margin:0 0 14px;padding:10px 14px;border-radius:10px;
  background:linear-gradient(180deg,#f4f9ff,#e9f2fd);border:1px solid #cfe0f6}
.filter-bar .fb-count{font-weight:700;color:var(--primary-dark);font-size:14.5px}
.filter-bar .fb-note{color:var(--muted);font-size:12.5px;flex:1;min-width:0}

/* One metric to a line: label, floor, ceiling. The two boxes are equal so the
   eye reads a span rather than two unrelated numbers. */
.adv-ranges{display:grid;gap:10px}
.adv-range{display:grid;grid-template-columns:minmax(120px,1.4fr) 1fr auto 1fr;
  align-items:center;gap:10px}
.adv-range label{font-size:13px;font-weight:600;color:var(--ink)}
.adv-range input{padding:9px 11px;border:1px solid var(--line);border-radius:9px;width:100%}
.adv-range input:focus{outline:none;border-color:var(--primary)}
.adv-range .adv-to{font-size:12.5px;color:var(--muted)}
@media (max-width:640px){
  /* the label takes its own line before the pair, rather than squeezing them */
  .adv-range{grid-template-columns:1fr auto 1fr}
  .adv-range label{grid-column:1 / -1}
}

/* a value that cannot be removed because records still hold it */
.chk-row.chk-locked{opacity:.6}
.chk-row.chk-locked .chk-text small{color:var(--red)}

/* the picker layer sits above the form that opened it */
.modal-layer2{z-index:80}

/* A form with seven sections is taller than the screen, and the tab bar used
   to scroll away with the fields — leaving no way to tell which section you
   were in, or to reach another without scrolling back. It now sits under the
   modal's own heading, which is already pinned. */
.modal-body .fin-tabs{position:sticky;top:61px;z-index:6;background:#fff;
  margin:-22px -22px 14px;padding:14px 22px 12px;border-bottom:1px solid var(--line)}
@media (max-width:640px){
  .modal-body .fin-tabs{top:57px;margin:-16px -16px 12px;padding:12px 16px 10px}
}

/* ---------- the permission grid ----------
   Ten actions across and a module list down. The module column is pinned so a
   row can still be read once the table is scrolled sideways on a laptop, and
   the action headings are short because the column only has to fit a tick. */
.pg-tools{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:0 0 12px}
.pg-tools .search-box{flex:1;min-width:160px}
.pg-wrap{max-height:52vh;overflow:auto;border:1px solid var(--line);border-radius:11px}
.pg-table{width:100%;border-collapse:separate;border-spacing:0;font-size:13px}
.pg-table thead th{position:sticky;top:0;z-index:3;background:var(--primary-light);
  color:var(--primary-dark);font-weight:600;font-size:11.5px;text-transform:uppercase;
  letter-spacing:.3px;padding:10px 6px;text-align:center;white-space:nowrap}
.pg-table td{padding:9px 6px;text-align:center;border-top:1px solid var(--line)}
.pg-table tbody tr:hover td{background:#f7f9fd}
.pg-table input[type=checkbox]{width:16px;height:16px;cursor:pointer;accent-color:var(--primary)}
.pg-table input:disabled{cursor:not-allowed;opacity:.5}
/* the module name stays put while the actions scroll under it */
.pg-table .pg-mod{position:sticky;left:0;z-index:2;background:#fff;text-align:left;
  font-weight:600;color:var(--ink);white-space:nowrap;padding-left:12px;min-width:170px}
.pg-table thead .pg-mod{z-index:4;background:var(--primary-light)}
.pg-table tbody tr:hover .pg-mod{background:#f7f9fd}
/* an action this role's pages have never supported — shown, not hidden, so it
   reads as "not for this role" rather than "somebody forgot to tick it" */
.pg-table .pg-na{color:var(--border);cursor:not-allowed}
.pg-table .pg-all{background:#fbfcfe;border-left:1px solid var(--line)}
.pg-table thead .pg-all{background:var(--primary-light)}
.pg-table tr.hidden{display:none}

/* a login somebody switched off */
tr.row-off td{opacity:.55}
tr.row-off td .pill{opacity:1}

/* =====================================================================
   HELPDESK — tickets, SLA, journey, timeline; organisation tree
   ===================================================================== */
.tk-badge{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:999px;font-size:11.5px;
  font-weight:600;white-space:nowrap;background:#eef1f6;color:#475569;line-height:1.35}
.st-open{background:#e7f4ee;color:var(--primary)}
.st-assigned{background:#e6f0ff;color:#1d5fd1}
.st-progress{background:#f1ebff;color:#6d3fd6}
.st-waiting{background:#fff4e0;color:#b36b00}
.st-escalated{background:#fde8ea;color:#c02637}
.st-resolved{background:#e4f6ec;color:#1f7a45}
.st-reopened{background:#fff0e6;color:#c2560c}
.st-closed{background:#eceff3;color:#4b5563}
.pr-low{background:#eceff3;color:#4b5563}
.pr-medium{background:#e6f0ff;color:#1d5fd1}
.pr-high{background:#fff4e0;color:#b36b00}
.pr-critical{background:#e0414f;color:#fff}
.sla-ok{background:#e4f6ec;color:#1f7a45}
.sla-risk{background:#fff4e0;color:#b36b00}
.sla-breach{background:#fde8ea;color:#c02637}
.sla-met{background:#e7f4ee;color:var(--primary)}
.tk-red{color:var(--red)!important}

.tk-scopes{display:flex;gap:8px;flex-wrap:wrap;margin:-4px 0 16px}
.tk-scope{border:1px solid var(--line);background:#fff;border-radius:999px;padding:6px 14px;font-size:13px;
  font-weight:500;color:var(--ink);cursor:pointer}
.tk-scope span{display:inline-block;min-width:20px;padding:0 6px;margin-left:4px;border-radius:999px;
  background:var(--primary-light);color:var(--primary);font-size:11.5px;font-weight:600}
.tk-scope.on{background:var(--primary);border-color:var(--primary);color:#fff}
.tk-scope.on span{background:rgba(255,255,255,.2);color:#fff}
.tk-stats{margin-bottom:0}
.tk-dist-link{cursor:pointer;border-radius:8px}
.tk-dist-link:hover{background:var(--primary-light)}
.tk-perf{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px}
.tk-perf > div{background:var(--bg);border-radius:10px;padding:10px 12px;display:flex;flex-direction:column;gap:3px}
.tk-perf span{font-size:12px;color:var(--muted)}
.tk-perf b{font-size:16px;color:var(--primary-dark)}
.tk-filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.tk-filters .search-box{flex:1 1 220px}
.tk-table td{vertical-align:middle}
.tk-row{cursor:pointer}
.tk-row:hover td{background:var(--primary-light)}
.tk-subj b{display:block;max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tk-subj small,.tk-sub{display:block;font-size:11.5px;color:var(--muted)}

.tk-head .tk-head-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.tk-push{margin-left:auto}
.tk-no{font-weight:700;color:var(--primary-dark);font-size:14px;margin:0 4px}
.tk-subject{font-size:21px;color:var(--primary-dark);margin:14px 0 8px;line-height:1.3}
.tk-meta{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:13px;color:var(--muted)}
.tk-meta span{display:inline-flex;align-items:center}
.tk-meta .ic{margin-right:5px}
.tk-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.tk-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-bottom:22px}
.tk-card{background:#fff;border-radius:14px;padding:18px;box-shadow:0 2px 10px rgba(24,115,80,.06);border:1px solid var(--line)}
.tk-card-label{font-size:11px;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted);font-weight:600;margin-bottom:10px}
.tk-owner{border-color:var(--primary);box-shadow:0 4px 18px rgba(24,115,80,.12)}
.tk-owner.is-done{border-color:var(--green)}
.tk-owner-name{font-size:19px;font-weight:700;color:var(--primary-dark)}
.tk-owner-role{font-size:13px;color:var(--muted);margin:2px 0 10px}
.tk-kv{display:flex;justify-content:space-between;gap:10px;font-size:13px;padding:5px 0;border-top:1px dashed var(--line)}
.tk-kv span{color:var(--muted)}
.tk-kv b{text-align:right;color:var(--ink)}
.tk-kv b small{display:block;font-weight:500;color:var(--muted)}
.tk-next-do{margin-top:10px;padding:10px 12px;border-radius:10px;background:var(--primary-light);color:var(--primary-dark);
  font-weight:600;font-size:13.5px}
.tk-sla-pct{display:inline-flex;align-items:baseline;gap:8px;font-size:26px;font-weight:700;background:none!important}
.tk-sla-pct small{font-size:11px;font-weight:700;letter-spacing:.6px}
.tk-bar{height:10px;border-radius:999px;background:#eef1f6!important;overflow:hidden;margin:6px 0 8px}
.tk-bar i{display:block;height:100%;border-radius:999px;background:var(--green)}
.tk-bar.sla-risk i{background:var(--amber)}
.tk-bar.sla-breach i{background:var(--red)}
.tk-bar.sla-met i{background:var(--primary)}
.tk-sla-txt{font-size:13px;color:var(--ink);margin-bottom:6px}

.tk-journey{list-style:none;margin:0;padding:6px 0 4px;display:flex;overflow-x:auto;gap:0}
.tk-step{position:relative;flex:1 0 150px;min-width:150px;padding:0 10px;text-align:center;display:flex;flex-direction:column;align-items:center}
.tk-step::before{content:"";position:absolute;top:15px;left:-50%;width:100%;height:3px;background:var(--line);z-index:0}
.tk-step:first-child::before{display:none}
.tk-step.done::before,.tk-step.current::before{background:var(--green)}
.tk-mark{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;
  border-radius:50%;border:3px solid var(--line);background:#fff;color:#fff}
.tk-mark .ic{width:16px;height:16px;margin:0;stroke-width:3}
.tk-step.done .tk-mark{background:var(--green);border-color:var(--green)}
.tk-step.current .tk-mark{border-color:var(--primary);box-shadow:0 0 0 5px var(--primary-light)}
.tk-step.current .tk-mark i{width:12px;height:12px;border-radius:50%;background:var(--primary)}
.tk-step-txt{display:flex;flex-direction:column;align-items:center;gap:2px;margin-top:8px;font-size:13px}
.tk-step-txt b{color:var(--ink)}
.tk-step.current .tk-step-txt b{color:var(--primary)}
.tk-step.upcoming .tk-step-txt b{color:var(--muted);font-weight:500}
.tk-step-txt em{font-style:normal;font-size:10px;letter-spacing:.8px;background:var(--primary);color:#fff;
  padding:1px 6px;border-radius:4px;vertical-align:middle}
.tk-step-txt small{color:var(--muted)}
.tk-tag{font-size:10.5px;font-weight:600;color:#c02637;background:#fde8ea;padding:1px 7px;border-radius:999px}
.tk-foot{font-size:11.5px;color:var(--muted)}

.tk-lower{align-items:start}
.tk-timeline{list-style:none;margin:0;padding:0 0 0 14px;border-left:2px solid var(--line)}
.tk-timeline li{position:relative;padding:0 0 16px 14px}
.tk-timeline li::before{content:"";position:absolute;left:-21px;top:4px;width:12px;height:12px;border-radius:50%;
  background:#fff;border:3px solid var(--primary)}
.tk-timeline li.tl-escalated::before{border-color:var(--red)}
.tk-timeline li.tl-resolved::before,.tk-timeline li.tl-closed::before{border-color:var(--green)}
.tk-timeline li.tl-waiting::before{border-color:var(--amber)}
.tl-time{font-size:11.5px;color:var(--muted)}
.tl-body{font-size:13px}
.tl-body small{color:var(--muted)}
.tl-body .ic{width:13px;height:13px;margin:0 2px;vertical-align:-2px}
.tl-note{margin-top:4px;padding:6px 10px;background:var(--bg);border-radius:8px;font-size:12.5px}
.tl-note span{font-weight:600}
.tl-dur{margin-top:3px;font-size:12px;color:var(--primary);font-weight:600}
.tk-desc{font-size:14px;line-height:1.6;color:var(--ink)}
.tk-attachments{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.tk-attach{display:inline-flex;align-items:center;gap:4px;padding:6px 10px;border:1px solid var(--line);border-radius:8px;
  font-size:12.5px;color:var(--primary);text-decoration:none;background:#fff}
.tk-attach:hover{border-color:var(--primary)}
.tk-attach small{color:var(--muted)}
.tk-resolution{margin-top:14px;padding:12px;border-radius:10px;background:#e4f6ec;font-size:13.5px}
.tk-resolution small{display:block;margin-top:6px;color:#1f7a45}
.tk-comments{display:flex;flex-direction:column;gap:10px;max-height:460px;overflow-y:auto;padding:2px}
.tk-comment{max-width:80%;padding:10px 12px;border-radius:12px;background:var(--bg)}
.tk-comment.mine{align-self:flex-end;background:var(--primary-light)}
.tk-comment.req{border:1px solid #f3d19c}
.tk-c-head{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:12.5px;margin-bottom:4px}
.tk-c-head span{color:var(--muted)}
.tk-c-time{margin-left:auto;font-size:11.5px}
.tk-c-msg{font-size:13.5px;line-height:1.5}
.tk-comment-form{margin-top:14px;display:flex;flex-direction:column;gap:8px}
.tk-comment-form textarea{width:100%;border:1px solid var(--line);border-radius:10px;padding:10px;font:inherit;resize:vertical}
.tk-cf-row{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.tk-route-hint{margin-top:14px;padding:10px 12px;border-radius:10px;background:var(--primary-light);color:var(--primary-dark);font-size:13px}
.field-hint{display:block;margin-top:4px;font-size:12px;color:var(--muted)}

.org-tree ul{list-style:none;margin:0;padding-left:26px;position:relative}
.org-tree > ul{padding-left:0}
.org-tree li{position:relative;padding:6px 0 0}
.org-tree ul ul li::before{content:"";position:absolute;left:-16px;top:0;height:100%;border-left:2px solid var(--line)}
.org-tree ul ul li:last-child::before{height:28px}
.org-tree ul ul li::after{content:"";position:absolute;left:-16px;top:28px;width:14px;border-top:2px solid var(--line)}
.org-node{display:inline-flex;align-items:center;gap:10px;padding:8px 12px;border:1px solid var(--line);border-radius:12px;
  background:#fff;box-shadow:0 1px 4px rgba(24,115,80,.05);max-width:100%;flex-wrap:wrap}
.org-node.off{opacity:.6}
.org-root{background:var(--primary);border-color:var(--primary);color:#fff}
.org-root small{color:rgba(255,255,255,.8)!important}
.org-ico{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:9px;
  background:var(--primary-light);color:var(--primary)}
.org-root .org-ico{background:rgba(255,255,255,.18);color:#fff}
.org-ico .ic{width:17px;height:17px;margin:0}
.org-txt{display:flex;flex-direction:column;line-height:1.25}
.org-txt b{font-size:13.5px}
.org-txt small{font-size:12px;color:var(--muted)}
.org-count{min-width:22px;padding:1px 7px;border-radius:999px;background:var(--primary-light);color:var(--primary);
  font-size:11.5px;font-weight:700;text-align:center}
.org-flat > ul{padding-left:0}
.org-flat > ul > li::before,.org-flat > ul > li::after{display:none}
.org-rules{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:8px}
.org-rule{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:13px;padding:8px 10px;background:var(--bg);border-radius:8px}
.org-rule .ic{width:13px;height:13px;margin:0;color:var(--muted)}

@media(max-width:860px){
  .tk-cards{grid-template-columns:1fr}
  /* the journey reads top to bottom on a phone */
  .tk-journey{flex-direction:column;overflow:visible}
  .tk-step{flex:none;min-width:0;text-align:left;flex-direction:row;align-items:flex-start;gap:12px;padding:0 0 16px}
  .tk-step::before{left:15px;top:-50%;width:3px;height:100%}
  .tk-step-txt{align-items:flex-start;margin-top:4px}
  .tk-comment{max-width:100%}
  .tk-push{margin-left:0}
}

/* =====================================================================
   NOTIFICATION BELL · APPROVALS · REPORTS CENTRE
   ===================================================================== */
.topbar-right{position:relative}
.nt-bell{position:relative;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;
  border-radius:12px;border:1px solid var(--line);background:#fff;color:var(--primary-dark);cursor:pointer}
.nt-bell:hover{border-color:var(--primary);color:var(--primary)}
.nt-bell.nt-alert{color:var(--red);border-color:#f3b7bd;animation:ntPulse 2s ease-in-out infinite}
@keyframes ntPulse{0%,100%{box-shadow:0 0 0 0 rgba(224,65,79,.35)}50%{box-shadow:0 0 0 6px rgba(224,65,79,0)}}
.nt-count{position:absolute;top:-6px;right:-6px;min-width:19px;height:19px;padding:0 5px;border-radius:999px;
  background:var(--red);color:#fff;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;
  border:2px solid #fff}
.nt-panel{position:absolute;top:50px;right:0;width:380px;max-width:calc(100vw - 24px);background:#fff;border:1px solid var(--line);
  border-radius:14px;box-shadow:0 16px 40px rgba(13,47,107,.18);z-index:60;overflow:hidden}
.nt-head{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid var(--line)}
.nt-all{border:none;background:none;color:var(--primary);font-weight:600;font-size:12.5px;cursor:pointer}
.nt-list{max-height:430px;overflow-y:auto}
.nt-list .empty{padding:24px}
.nt-item{display:flex;gap:10px;width:100%;text-align:left;padding:11px 14px;border:none;border-bottom:1px solid var(--line);
  background:#fff;cursor:pointer;font:inherit;color:var(--ink)}
.nt-item:hover{background:var(--bg)}
.nt-item.unread{background:#f5f8ff}
.nt-item.unread .nt-body b::after{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--primary);margin-left:6px;vertical-align:middle}
.nt-ico{flex:none;display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:9px;
  background:var(--primary-light);color:var(--primary)}
.nt-ico .ic{width:16px;height:16px;margin:0}
.nt-warning .nt-ico{background:#fff4e0;color:#b36b00}
.nt-danger .nt-ico{background:#fde8ea;color:var(--red)}
.nt-success .nt-ico{background:#e4f6ec;color:#1f7a45}
.nt-body{display:flex;flex-direction:column;gap:2px;min-width:0}
.nt-body b{font-size:13px}
.nt-body small{font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.nt-body em{font-style:normal;font-size:11px;color:var(--muted)}

.rp-layout{display:grid;grid-template-columns:240px minmax(0,1fr);gap:20px;align-items:start}
.rp-menu{padding:12px;position:sticky;top:90px}
.rp-group{font-size:10.5px;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted);font-weight:700;margin:12px 6px 6px}
.rp-group:first-child{margin-top:2px}
.rp-link{display:block;width:100%;text-align:left;border:none;background:none;padding:8px 10px;border-radius:8px;
  font:inherit;font-size:13.5px;color:var(--ink);cursor:pointer}
.rp-link:hover{background:var(--bg)}
.rp-link.on{background:var(--primary);color:#fff;font-weight:600}
.rp-date{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--muted)}
.rp-date input{border:1px solid var(--line);border-radius:8px;padding:7px 9px;font:inherit;font-size:13px}
@media(max-width:860px){
  .rp-layout{grid-template-columns:1fr}
  .rp-menu{position:static}
  .nt-panel{position:fixed;top:64px;right:12px;left:12px;width:auto}
}