/* premium.css - the premium look: loaded after style.css. One design system for every screen. */
:root {
  --brand: #0a5a40; --brand-dark: #073d2c; --brand-ink: #052b1f; --brand-soft: #e8f4ee; --brand-2: #138a62;
  --gold: #c8962e; --gold-soft: #fbf3df; --accent: #d9a128;
  --bg: #f2f5f4; --card: #ffffff; --text: #17251f; --muted: #66756e; --line: #e3e9e6; --line-2: #d3dcd7;
  --radius: 16px; --radius-sm: 11px;
  --shadow: 0 1px 2px rgba(16, 40, 30, .05), 0 6px 20px rgba(16, 40, 30, .06);
  --shadow-lg: 0 2px 4px rgba(16, 40, 30, .06), 0 14px 34px rgba(16, 40, 30, .10);
  --ring: 0 0 0 3px rgba(19, 138, 98, .22);
}
html { font-size: 16px; -webkit-font-smoothing: antialiased; }
body { font-family: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, "Noto Sans", "Noto Sans Devanagari", Arial, sans-serif; background: var(--bg) radial-gradient(1200px 380px at 70% -120px, rgba(19, 138, 98, .10), transparent 70%) no-repeat; color: var(--text); line-height: 1.5; font-variant-numeric: tabular-nums; letter-spacing: .005em; }
h1 { font-size: 1.65rem; font-weight: 750; letter-spacing: -.01em; color: var(--brand-ink); }
h2 { font-size: 1.1rem; font-weight: 700; color: var(--brand-ink); }
h3 { font-size: .98rem; font-weight: 700; color: var(--brand-ink); }
a { color: var(--brand); text-underline-offset: 3px; }
.hi { font-weight: 500; }

/* ---------- sidebar ---------- */
.sidebar { width: 268px; background: linear-gradient(180deg, #06382a 0%, #0a5a40 62%, #0b6a4a 100%); padding: 18px 14px 14px; box-shadow: 2px 0 24px rgba(5, 43, 31, .18); scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.25) transparent; }
.brand { padding: 4px 8px 18px; gap: 12px; border-bottom: 1px solid rgba(255,255,255,.12); margin-bottom: 10px; line-height: 1.25; font-size: 1rem; }
.brand .logo { width: 44px; height: 44px; border-radius: 13px; background: linear-gradient(145deg, #ffffff, #dff1e8); box-shadow: 0 4px 12px rgba(0,0,0,.25); font-size: 1.05rem; }
.brand small { margin-top: 2px; letter-spacing: .02em; }
.nav { display: flex; flex-direction: column; }
.nav .grp { font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.5); font-weight: 700; padding: 14px 12px 6px; }
.nav a { padding: 9px 12px; min-height: 40px; border-radius: 11px; font-size: .93rem; margin-bottom: 2px; color: rgba(236, 248, 242, .9); font-weight: 500; transition: background .15s, transform .15s; }
.nav a:hover { background: rgba(255,255,255,.10); transform: translateX(2px); }
.nav a.active { background: #fff; color: var(--brand-dark); font-weight: 700; box-shadow: 0 6px 16px rgba(0,0,0,.2); }
.nav .ic { width: 24px; font-size: 1.02rem; filter: saturate(.9); }
.navbadge { background: #e0453a; font-weight: 700; box-shadow: 0 0 0 2px rgba(255,255,255,.15); }
.userbox { margin-top: 16px; padding: 12px 14px; border: 1px solid rgba(255,255,255,.14); border-radius: 14px; background: rgba(255,255,255,.07); }
.userbox b { font-size: .95rem; }
.userbox .btn { background: transparent; border-color: rgba(255,255,255,.35); color: #fff; min-height: 38px; }
.userbox .btn:hover { background: rgba(255,255,255,.14); }
.topbar { background: linear-gradient(90deg, #06382a, #0a5a40); box-shadow: 0 2px 12px rgba(0,0,0,.2); }
.content { max-width: 1360px; padding: 28px 32px 56px; }
@media (max-width: 960px) { .content { padding: 16px 14px 40px; } .sidebar { width: 280px; } }

/* ---------- page head ---------- */
.page-head { margin-bottom: 20px; gap: 14px 18px; align-items: flex-end; }
.page-head > div > .muted { max-width: 760px; font-size: .92rem; margin-top: 2px; }
.page-head h1 { margin-bottom: 2px; }
.section-title { display: flex; align-items: center; gap: 10px; margin: 30px 0 14px; font-size: 1.02rem; font-weight: 700; color: var(--brand-ink); }
.section-title::before { content: ""; width: 4px; height: 20px; border-radius: 4px; background: linear-gradient(180deg, var(--brand-2), var(--gold)); flex-shrink: 0; }

/* ---------- cards ---------- */
.card { border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 22px; margin-bottom: 20px; }
.card > h2:first-child, .card > .page-head:first-child { margin-top: 0; }
.grid { gap: 18px; }
.stat { position: relative; overflow: hidden; border: 1px solid var(--line); border-left: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px 16px; box-shadow: var(--shadow); transition: transform .15s, box-shadow .15s; }
.stat:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.stat::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: linear-gradient(90deg, var(--brand), var(--brand-2)); }
.stat.warn::before { background: linear-gradient(90deg, #d9a128, #f0c35a); } .stat.bad::before { background: linear-gradient(90deg, #b3261e, #e5584f); } .stat.blue::before { background: linear-gradient(90deg, #1a5fb4, #4b8fe0); } .stat.grey::before { background: linear-gradient(90deg, #8a9690, #b7c2bd); } .stat.good::before { background: linear-gradient(90deg, #16a34a, #4cc77d); }
.stat.warn, .stat.bad, .stat.blue, .stat.grey, .stat.good { border-left-color: var(--line); }
.stat .lbl { font-size: .74rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); padding-right: 40px; }
.stat .lbl .hi { text-transform: none; letter-spacing: 0; }
.stat .val { font-size: 1.7rem; font-weight: 750; margin-top: 6px; letter-spacing: -.015em; color: var(--brand-ink); line-height: 1.15; }
.stat.bad .val { color: var(--red); }
.stat .sub { margin-top: 6px; font-size: .8rem; line-height: 1.35; }
.stat .sic { position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; font-size: 1.1rem; background: var(--brand-soft); }
.stat.warn .sic { background: var(--gold-soft); } .stat.bad .sic { background: var(--red-soft); } .stat.blue .sic { background: var(--blue-soft); } .stat.grey .sic { background: #eef1ef; } .stat.good .sic { background: var(--green-soft); }

/* ---------- buttons & forms ---------- */
.btn { border-radius: var(--radius-sm); min-height: 44px; padding: 10px 20px; font-weight: 650; font-size: .94rem; background: linear-gradient(180deg, #0d6a4a, #0a5a40); border: 1px solid #08492f; box-shadow: 0 1px 2px rgba(5, 43, 31, .25), inset 0 1px 0 rgba(255,255,255,.12); transition: transform .12s, box-shadow .12s, background .12s; }
.btn:hover { background: linear-gradient(180deg, #0f7552, #0b6045); transform: translateY(-1px); box-shadow: 0 6px 14px rgba(5, 43, 31, .22); }
.btn:active { transform: translateY(0); }
.btn.sec { background: #fff; color: var(--brand); border: 1px solid var(--line-2); box-shadow: 0 1px 2px rgba(16,40,30,.06); }
.btn.sec:hover { background: var(--brand-soft); border-color: #b5d3c4; box-shadow: 0 4px 10px rgba(16,40,30,.08); }
.btn.danger { background: linear-gradient(180deg, #c52e25, #a61f18); border-color: #8f1a14; } .btn.danger.sec { background: #fff; color: var(--red); border-color: #efc2be; }
.btn.sm { min-height: 36px; padding: 6px 13px; font-size: .86rem; border-radius: 10px; }
.btn.big { min-height: 52px; font-size: 1.02rem; }
input, select, textarea { min-height: 44px; padding: 10px 12px; border: 1px solid var(--line-2); border-radius: var(--radius-sm); background: #fcfdfd; transition: border-color .12s, box-shadow .12s; font-size: .95rem; }
input:hover, select:hover, textarea:hover { border-color: #b4c4bc; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--brand-2); box-shadow: var(--ring); background: #fff; }
button:focus-visible, a:focus-visible { outline: none; box-shadow: var(--ring); }
label { font-size: .84rem; font-weight: 650; color: #2a3a33; margin-bottom: 5px; }
.field { margin-bottom: 16px; }
.filters { gap: 12px; }
.card.noprint .filters label { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }

/* ---------- tables ---------- */
.tablewrap { border: 1px solid var(--line); border-radius: 14px; overflow: auto; background: #fff; }
table { border-collapse: separate; border-spacing: 0; }
th { background: #f5f8f6; color: #54635b; font-size: .72rem; font-weight: 700; letter-spacing: .07em; padding: 12px 14px; border-bottom: 1px solid var(--line-2); position: sticky; top: 0; z-index: 1; }
td { padding: 13px 14px; border-bottom: 1px solid #edf1ef; font-size: .92rem; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: #f7fbf9; }
tr.click { cursor: pointer; }
tfoot td { background: #f5f8f6; border-top: 1px solid var(--line-2); }
td .muted, td .hint { font-size: .8rem; }
td a { font-weight: 650; text-decoration: none; } td a:hover { text-decoration: underline; }
td.actions { white-space: nowrap; }
@media (max-width: 1180px) {
  .tablewrap { border: 0; background: transparent; overflow: visible; }
  table.rt tr { border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); padding: 8px 14px; margin-bottom: 12px; }
  table.rt td { padding: 7px 0; border-bottom: 1px dashed #edf1ef; font-size: .9rem; } table.rt td:last-child { border-bottom: 0; }
  table.rt td::before { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; }
  tbody tr:hover td { background: transparent; }
}

/* ---------- badges, notices, chips, tabs ---------- */
.badge { padding: 3px 11px; font-size: .74rem; font-weight: 650; border: 1px solid transparent; letter-spacing: .01em; }
.badge.green { background: #e2f5ea; color: #14633a; border-color: #c4e8d1; } .badge.amber { background: #fcf1d4; color: #855a05; border-color: #f2dea3; }
.badge.red { background: #fdebe9; color: #a3221a; border-color: #f4c9c5; } .badge.blue { background: #e6effb; color: #17519c; border-color: #c8dbf4; }
.notice { border-radius: var(--radius-sm); border-left-width: 4px; padding: 13px 16px; box-shadow: 0 1px 2px rgba(16,40,30,.04); }
.tabs { gap: 2px; border-bottom: 1px solid var(--line-2); margin: 4px 0 20px; }
.tabs button { background: transparent; border: 0; border-bottom: 3px solid transparent; border-radius: 0; margin-bottom: -1px; min-height: 44px; padding: 10px 18px; color: var(--muted); font-weight: 650; transition: color .12s; }
.tabs button:hover { color: var(--brand); }
.tabs button.on { background: transparent; color: var(--brand); border-bottom-color: var(--brand-2); }
.seg { background: #e8eeeb; border-radius: 12px; padding: 4px; } .seg button { padding: 8px 16px; border-radius: 9px; color: #4a5a52; font-weight: 650; font-size: .88rem; }
.seg button.on { background: #fff; color: var(--brand); box-shadow: 0 2px 6px rgba(16,40,30,.14); }

/* ---------- toast & modal ---------- */
.toast { border-radius: 12px; font-weight: 600; box-shadow: var(--shadow-lg); background: linear-gradient(180deg, #14744f, #0d5c40); }
.overlay { background: rgba(6, 28, 21, .55); backdrop-filter: blur(3px); }
.modal { border-radius: 20px; box-shadow: 0 24px 70px rgba(5, 28, 20, .45); }
.modal header { padding: 18px 24px; background: linear-gradient(180deg, #fbfdfc, #f5f8f6); border-radius: 20px 20px 0 0; } .modal .body { padding: 22px 24px; } .modal footer { padding: 16px 24px; background: #fafcfb; border-radius: 0 0 20px 20px; }

/* ---------- hero (dashboards) ---------- */
.hero-banner { position: relative; overflow: hidden; border-radius: 22px; padding: 26px 30px; margin-bottom: 22px; color: #fff; background: radial-gradient(900px 260px at 100% 0, rgba(200, 150, 46, .35), transparent 60%), linear-gradient(120deg, #052b1f 0%, #0a5a40 55%, #138a62 100%); box-shadow: var(--shadow-lg); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 18px 24px; }
.hero-banner::after { content: ""; position: absolute; right: -60px; bottom: -90px; width: 260px; height: 260px; border-radius: 50%; background: rgba(255,255,255,.06); }
.hero-banner h1 { color: #fff; font-size: 1.7rem; margin: 0 0 4px; } .hero-banner .sub { color: rgba(255,255,255,.82); font-size: .95rem; max-width: 640px; }
.hero-banner .chips2 { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; } .hero-banner .chip2 { background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.22); border-radius: 999px; padding: 4px 12px; font-size: .8rem; font-weight: 600; backdrop-filter: blur(4px); }
.hero-banner .btns { position: relative; z-index: 1; } .hero-banner .btn { background: #fff; color: var(--brand-dark); border-color: #fff; } .hero-banner .btn:hover { background: #eefaf4; } .hero-banner .btn.sec { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.4); } .hero-banner .btn.sec:hover { background: rgba(255,255,255,.22); }
.hero-banner .hi { color: rgba(255,255,255,.7); }

/* ---------- dashboard blocks ---------- */
.periodbar { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 10px 14px; box-shadow: var(--shadow); align-items: center; margin-bottom: 20px; }
.gridg { gap: 18px; }
.gcard { border: 1px solid var(--line); border-top: 0; border-radius: var(--radius); padding: 18px 20px; box-shadow: var(--shadow); position: relative; overflow: hidden; transition: transform .15s, box-shadow .15s; }
.gcard:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.gcard::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 5px; background: var(--brand-2); }
.gcard.g-assoc::before { background: #2f6fd1; } .gcard.g-other::before { background: #d9962a; } .gcard.g-couns::before { background: #7c4dcc; }
.gcard { border-top: 1px solid var(--line); }
.gic { width: 42px; height: 42px; border-radius: 13px; display: inline-grid; place-items: center; background: var(--brand-soft); font-size: 1.35rem; }
.gname { font-size: 1.05rem; font-weight: 750; color: var(--brand-ink); } .ghint { font-size: .78rem; }
.gbig span { font-size: 2.3rem; font-weight: 800; letter-spacing: -.02em; }
.gnums { background: #f7faf8; border: 1px solid #edf2ef; border-radius: 12px; padding: 12px 14px; border-top: 1px solid #edf2ef; }
.gnums label { font-size: .66rem; letter-spacing: .07em; text-transform: uppercase; } .gnums b { font-size: 1.02rem; color: var(--brand-ink); }
.glink { font-size: .86rem; text-decoration: none; font-weight: 650; padding-top: 4px; } .glink:hover { text-decoration: underline; }
.todo { border-radius: 12px; border: 1px solid transparent; border-left-width: 4px; padding: 12px 16px; font-size: .92rem; transition: transform .12s; text-decoration: none; }
.todo:hover { transform: translateX(3px); }
.todo.error { border-color: #f5cfcb; } .todo.warn { border-color: #f1e0b0; } .todo.info { border-color: #cadef6; }
.ttile, .ecard { border-radius: 14px; box-shadow: var(--shadow); border: 1px solid var(--line); }
.ttile b { font-size: 1.18rem; color: var(--brand-ink); } .ttile label { font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; }
.pgroup { border-radius: var(--radius); border-top-width: 0; position: relative; overflow: hidden; } .pgroup::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 5px; background: var(--brand-2); } .pgroup.g-assoc::before { background: #2f6fd1; } .pgroup.g-other::before { background: #d9962a; } .pgroup.g-couns::before { background: #7c4dcc; }
.pghead { padding-top: 6px; } .pgtot { font-size: .84rem; }
details.more { border-radius: var(--radius); border: 1px solid var(--line); box-shadow: var(--shadow); }
.mrow .bar, .bar { border-radius: 99px; background: #e6edea; } .bar > div { background: linear-gradient(90deg, var(--brand-2), var(--brand)); border-radius: 99px; }
.sbar { height: 9px; }
.kv { gap: 8px 16px; } .kv div:nth-of-type(odd) { font-size: .9rem; }
.chips .badge { margin: 2px 4px 2px 0; }
.empty { padding: 36px 12px; font-size: .95rem; }
.empty::before { content: "🗂️"; display: block; font-size: 1.8rem; margin-bottom: 6px; opacity: .55; }

/* ---------- login ---------- */
.login-wrap { background: radial-gradient(700px 400px at 85% 10%, rgba(200, 150, 46, .30), transparent 60%), radial-gradient(900px 500px at 0 100%, rgba(19, 138, 98, .45), transparent 60%), linear-gradient(135deg, #04261b, #0a5a40); }
.login-card { border-radius: 24px; padding: 34px 32px; max-width: 460px; box-shadow: 0 30px 80px rgba(0,0,0,.4); border: 1px solid rgba(255,255,255,.4); }
.login-card .logo { width: 62px; height: 62px; border-radius: 18px; background: linear-gradient(145deg, #0d6a4a, #073d2c); box-shadow: 0 10px 22px rgba(7, 61, 44, .4); font-size: 1.4rem; }
.login-card h1 { font-size: 1.5rem; margin-bottom: 4px; }

/* ---------- misc alignment ---------- */
.page-head .btns { justify-content: flex-end; }
.row, .row3 { align-items: start; }
.stat .val .badge { vertical-align: middle; }
@media (max-width: 760px) {
  .hero-banner { padding: 20px 18px; border-radius: 18px; } .hero-banner h1 { font-size: 1.35rem; }
  .stat .val { font-size: 1.45rem; } h1 { font-size: 1.4rem; }
  .page-head { align-items: flex-start; }
}
@media print { .hero-banner { display: none !important; } }

.kpis .stat .val { font-size: 1.9rem; }

.gridg { grid-template-columns: repeat(auto-fit, minmax(228px, 1fr)); }
@media (min-width: 1181px) {
  table.rt { min-width: 940px; }
  table.rt td:first-child, table.rt th:first-child { min-width: 150px; }
  .sidebar { width: 256px; }
}
table.rt td[data-label="S.No"], table.rt th:first-child.sno { min-width: 0; }
.ptable { min-width: 1020px !important; }

.cand { min-width: 860px !important; }
.cand td:first-child, .cand th:first-child { min-width: 0 !important; width: 44px; }
/* a three-column form row works on its own (it used to need the extra "row" class) */
.row, .row3 { display: grid; gap: 4px 18px; }
.row3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.row { grid-template-columns: repeat(2, minmax(0, 1fr)); } .row.row3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 860px) { .row, .row3, .row.row3 { grid-template-columns: 1fr; } }
fieldset { border-radius: var(--radius-sm) !important; border-color: var(--line-2) !important; background: #fcfdfd; }
legend { font-size: .86rem; padding: 0 8px; }

.rfrow { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 10px 0; border-bottom: 1px solid #edf1ef; } .rfrow:last-of-type { border-bottom: 0; } .rfr { text-align: right; font-size: .9rem; }

.login-card .logo { margin: 0 auto 14px; } .login-card h1, .login-card form > p, .login-card h1 + p { text-align: center; }
.login-card::after { content: "🔒 Secure login · your session ends when you log out"; display: block; text-align: center; font-size: .74rem; color: var(--muted); margin-top: 14px; }
@media (max-width: 560px) {
  .hero-banner { padding: 18px 16px; gap: 12px; } .hero-banner .sub { display: none; } .hero-banner h1 { font-size: 1.25rem; }
  .hero-banner .chips2 { margin-top: 8px; } .hero-banner .btns { width: 100%; flex-wrap: nowrap; } .hero-banner .btns .btn { flex: 1; padding: 8px 10px; font-size: .86rem; min-height: 40px; }
  .seg { width: 100%; } .seg button { flex: 1; padding: 8px 4px; font-size: .8rem; }
}

/* ---------- the three projections ---------- */
.projnav { position: sticky; top: 0; z-index: 5; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; background: rgba(255,255,255,.92); backdrop-filter: blur(6px); border: 1px solid var(--line); border-radius: 14px; padding: 8px 12px; margin: 22px 0 16px; box-shadow: var(--shadow); }
.projnav a { text-decoration: none; font-weight: 650; font-size: .88rem; padding: 6px 14px; border-radius: 999px; background: var(--brand-soft); color: var(--brand-dark); } .projnav a:hover { background: #d3ebdd; }
.proj { background: #fff; border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow-lg); padding: 22px 24px 20px; margin-bottom: 26px; position: relative; overflow: hidden; scroll-margin-top: 70px; }
.proj::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 6px; background: linear-gradient(90deg, #138a62, #0a5a40); }
#proj-partners::before { background: linear-gradient(90deg, #2f6fd1, #7c4dcc); } #proj-overall::before { background: linear-gradient(90deg, #d9a128, #138a62, #2f6fd1); }
.proj-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-bottom: 16px; padding-top: 4px; } .proj-head .pt { flex: 1 1 300px; } .proj-head h2 { margin: 0; font-size: 1.25rem; }
.pico { width: 50px; height: 50px; border-radius: 16px; display: grid; place-items: center; font-size: 1.6rem; background: var(--brand-soft); }
.pkgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin-bottom: 18px; }
.pk { position: relative; border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; background: linear-gradient(180deg, #fff, #fafcfb); }
.pk::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 4px; border-radius: 0 4px 4px 0; background: var(--brand-2); }
.pk.good::before { background: #16a34a; } .pk.bad::before { background: #dc2626; } .pk.warn::before { background: #d9a128; } .pk.blue::before { background: #2f6fd1; } .pk.grey::before { background: #a9b6b0; } .pk.hero { background: linear-gradient(135deg, #0a5a40, #138a62); color: #fff; border-color: transparent; } .pk.hero::before { background: #f1c75a; }
.pkl { font-size: .7rem; letter-spacing: .07em; text-transform: uppercase; font-weight: 700; color: var(--muted); padding-right: 30px; } .pkv { font-size: 1.55rem; font-weight: 800; letter-spacing: -.015em; margin-top: 4px; color: var(--brand-ink); line-height: 1.15; } .pks { font-size: .76rem; color: var(--muted); margin-top: 4px; line-height: 1.35; }
.pk.hero .pkl, .pk.hero .pks { color: rgba(255,255,255,.82); } .pk.hero .pkv { color: #fff; }
.pk.bad .pkv { color: #b3261e; } .pki { position: absolute; top: 12px; right: 12px; font-size: 1.1rem; opacity: .9; }
.pgrid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; } @media (max-width: 900px) { .pgrid2 { grid-template-columns: 1fr; } }
.pcard { border: 1px solid var(--line); border-radius: 16px; padding: 16px 18px; background: #fff; margin-bottom: 16px; } .pgrid2 .pcard { margin-bottom: 0; } .pcard h3 { margin: 0 0 12px; font-size: .95rem; }
.donut { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; } .donut svg { flex: 0 0 auto; } .dbig { font-size: 22px; font-weight: 800; fill: #052b1f; } .dsm { font-size: 9px; fill: #66756e; text-transform: uppercase; letter-spacing: .08em; }
.dleg { display: grid; gap: 6px; font-size: .88rem; } .dleg i { display: inline-block; width: 11px; height: 11px; border-radius: 4px; margin-right: 8px; vertical-align: -1px; } .dleg b { margin-left: 6px; }
.hbars { display: grid; gap: 11px; } .hl { display: flex; justify-content: space-between; gap: 10px; font-size: .84rem; margin-bottom: 4px; } .hl b { font-variant-numeric: tabular-nums; }
.ht { height: 10px; background: #edf2ef; border-radius: 99px; overflow: hidden; } .hf { height: 100%; border-radius: 99px; transition: width .5s; } .hs { font-size: .72rem; color: var(--muted); margin-top: 3px; }
.cols { display: flex; align-items: flex-end; gap: 10px; height: 190px; padding: 4px 2px 0; overflow-x: auto; } .col { flex: 1 0 44px; display: flex; flex-direction: column; align-items: stretch; height: 100%; }
.cbars { flex: 1; display: flex; align-items: flex-end; gap: 3px; justify-content: center; } .cb { width: 42%; max-width: 22px; border-radius: 6px 6px 0 0; min-height: 3px; } .cn { text-align: center; font-size: .68rem; color: var(--muted); padding-top: 4px; line-height: 1.25; } .cn b { color: var(--brand-ink); font-size: .8rem; }
.cleg { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: .78rem; margin-top: 10px; } .cleg i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; }
.ptodo { background: linear-gradient(180deg, #f6faf8, #f1f7f4); border: 1px dashed #b9d6c7; border-radius: 16px; padding: 14px 16px; } .pth { font-weight: 750; margin-bottom: 10px; color: var(--brand-ink); } .ptodo .todo { margin-bottom: 7px; }
@media (max-width: 560px) {
  .pkgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .pk { padding: 12px 12px 10px; } .pkv { font-size: 1.2rem; } .pkl { font-size: .62rem; padding-right: 20px; } .pks { font-size: .68rem; } .pki { top: 9px; right: 8px; font-size: .95rem; }
  .proj { padding: 16px 12px 14px; border-radius: 16px; } .pcard { padding: 12px; } .donut { justify-content: center; }
}

.rfcard { border-color: #f1d4d1; background: linear-gradient(180deg, #fffdfd, #fff8f7); } .rfhead { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 12px; } .rfhead h3 { margin: 0; }
.sm3 { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 0 0 10px; }
.ladder { display: grid; gap: 4px; } .lr { display: flex; justify-content: space-between; padding: 8px 12px; border-radius: 10px; background: #f6faf8; font-size: .9rem; } .lr b { font-variant-numeric: tabular-nums; } .lr.tot { background: #e4f3ea; font-weight: 700; } .lr.neg { background: #fdf1ef; }

@media (min-width: 1181px) { table.rt td[data-label="Status"] { min-width: 150px; } table.rt td[data-label="Team / partner"] { min-width: 130px; } }

/* team members */
.mgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; margin: 6px 0 16px; }
.mcard { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 16px 18px; box-shadow: var(--shadow); position: relative; overflow: hidden; } .mcard::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: linear-gradient(90deg, #138a62, #0a5a40); } .mcard.off { opacity: .72; } .mcard.off::before { background: #b9c4be; }
.mtop { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; } .mnm { flex: 1; min-width: 0; line-height: 1.25; } .mnm b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mav { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; color: #fff; background: linear-gradient(145deg, #138a62, #073d2c); flex: 0 0 auto; box-shadow: 0 4px 10px rgba(7,61,44,.3); }
.mdet { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; font-size: .88rem; } .mdet label { display: block; font-size: .64rem; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); margin-bottom: 1px; } .mdet code { background: #eef5f1; border-radius: 6px; padding: 1px 7px; font-size: .86rem; }
.mstat { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--line-2); font-size: .8rem; color: var(--muted); } .mstat b { color: var(--brand-ink); }
.cred { display: grid; gap: 10px; margin: 10px 0; } .cred > div { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: #f5faf7; border: 1px solid #cfe6da; border-radius: 12px; padding: 10px 12px; } .cred label { margin: 0; min-width: 72px; } .cred code { flex: 1; font-size: 1.05rem; font-weight: 700; letter-spacing: .02em; word-break: break-all; }

/* logins & roles */
.ubar { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: center; margin: 4px 0 6px; } .ubar input[type=search] { flex: 1 1 280px; max-width: 460px; border-radius: 999px; padding-left: 18px; background: #fff; }
.pav { background: linear-gradient(145deg, #2f6fd1, #1a3f80) !important; box-shadow: 0 4px 10px rgba(26, 63, 128, .3) !important; }

/* drill-down */
.pk.drillable { cursor: pointer; transition: transform .15s, box-shadow .15s; } .pk.drillable:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(15, 80, 55, .16); } .pk.drillable::after { content: 'View cases \2192'; position: absolute; right: 12px; bottom: 8px; font-size: .62rem; font-weight: 700; color: #1a7a54; opacity: 0; transition: opacity .15s; } .pk.drillable:hover::after { opacity: 1; }

/* print / save / share bar */
.docbar { display: flex; align-items: center; gap: 4px; } .docbar .dd { position: relative; }
.docbar button { font: inherit; font-weight: 600; font-size: .85rem; border: 0; background: transparent; color: #17483a; padding: 8px 14px; border-radius: 999px; cursor: pointer; white-space: nowrap; display: inline-flex; gap: 6px; align-items: center; } .docbar button:hover { background: #e8f3ee; }
.docbar.fab { position: fixed; right: 18px; bottom: 18px; z-index: 55; background: #fff; border: 1px solid var(--line, #dde5e0); border-radius: 999px; padding: 5px; box-shadow: 0 8px 28px rgba(10, 50, 35, .22); }
.docbar.inline { margin-left: auto; margin-right: 8px; } .docbar.inline button { padding: 6px 10px; font-size: .8rem; }
.docmenu { position: absolute; bottom: calc(100% + 10px); right: 0; min-width: 230px; background: #fff; border: 1px solid var(--line, #dde5e0); border-radius: 14px; box-shadow: 0 12px 32px rgba(10, 50, 35, .22); padding: 6px; z-index: 70; display: flex; flex-direction: column; } .docmenu[hidden] { display: none; }
.docmenu button { width: 100%; justify-content: flex-start; border-radius: 10px; padding: 10px 12px; }
.docbar.inline .docmenu { bottom: auto; top: calc(100% + 8px); }
@media (max-width: 640px) { .docbar.fab { right: 10px; bottom: 10px; } .docbar.fab button span:not(.dd) { display: none; } .docbar.fab button { padding: 10px 12px; font-size: 1rem; } .docbar.inline button span { display: none; } }
#printhead { display: none; }
@media print {
  .docbar, .docmenu { display: none !important; }
  #printhead { display: block; margin: 0 0 10px; } #printhead div { display: flex; justify-content: space-between; border-bottom: 2px solid #17483a; padding-bottom: 4px; font-size: .9rem; } #printhead span { color: #555; } #printhead h1 { font-size: 1.4rem; margin: 8px 0 0; }
  body.print-modal .sidebar, body.print-modal .topbar, body.print-modal .content, body.print-modal #toasts { display: none !important; }
  body.print-modal .overlay { position: static !important; background: none !important; padding: 0 !important; display: block !important; overflow: visible !important; } body.print-modal .overlay:not(.printing) { display: none !important; }
  body.print-modal .modal { box-shadow: none !important; max-width: none !important; border-radius: 0 !important; } body.print-modal .modal header .x, body.print-modal .modal footer { display: none !important; } body.print-modal .modal header { background: none !important; }
  .content > .page-head { display: none; }
}

/* admissions overview + khata */
.tilelink { text-decoration: none; color: inherit; display: block; } .tilelink:hover .pk { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(15, 80, 55, .16); } .pk { transition: transform .15s, box-shadow .15s; }
.stackbar { display: flex; height: 14px; border-radius: 8px; overflow: hidden; background: #eef2f0; flex: 1; } .stackbar i { display: block; height: 100%; }
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin: 0 3px 0 8px; }
.khbanner { border-radius: 16px; padding: 18px 22px; border: 1px solid var(--line); background: #fff; border-left: 8px solid #94a3b8; } .khbanner.owe { border-left-color: #d9a128; background: #fffaf0; } .khbanner.due { border-left-color: #dc2626; background: #fff5f5; } .khbanner.ok { border-left-color: #16a34a; background: #f2fbf5; }
.khsay { font-size: 1.5rem; font-weight: 700; margin-top: 4px; } @media (max-width: 640px) { .khsay { font-size: 1.15rem; } }
tr.voided td { text-decoration: line-through; color: #8a948f; } tr.voided td .muted { text-decoration: none; display: inline-block; }
.ptabs { margin: 0 0 16px; overflow-x: auto; flex-wrap: nowrap; } .ptabs button { white-space: nowrap; } .ptab[hidden] { display: none; }

/* counselling papers + letterhead preview */
.row4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } @media (max-width: 900px) { .row4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .row4 { grid-template-columns: 1fr; } }
.opt { border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; margin-bottom: 12px; background: #fbfdfc; } .opthead { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; } .opthead .on { display: inline-flex; width: 22px; height: 22px; border-radius: 50%; background: var(--brand-2, #138a62); color: #fff; align-items: center; justify-content: center; font-size: .75rem; }
.checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 6px 14px; } .chk { display: flex; gap: 8px; align-items: center; font-weight: 500; }
.lhp { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: #fff; padding: 22px 20px; } .lhp .lhlogo { width: 54px; height: 54px; border-radius: 10px; border: 1px solid var(--line); background: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.2rem; color: #1f3a5f; overflow: hidden; } .lhp .lhlogo img { max-width: 100%; max-height: 100%; }
.lhp.classic { text-align: center; } .lhp.classic .lhlogo { margin: 0 auto 8px; } .lhp.classic .lhn { font-weight: 800; letter-spacing: 1px; font-size: 1.15rem; color: #1f3a5f; } .lhp.classic .lht { color: #5b6672; font-size: .85rem; margin-top: 2px; } .lhp.classic .lhc { color: #5b6672; font-size: .78rem; margin-top: 3px; } .lhp.classic .lhr { border-top: 2px solid #1f3a5f; border-bottom: 1px solid #1f3a5f; height: 4px; margin: 12px 0; } .lhp.classic .lhtt { display: inline-block; border: 1.5px solid #1f3a5f; border-radius: 6px; padding: 5px 16px; font-weight: 800; letter-spacing: 3px; color: #1f3a5f; font-size: .8rem; }
.lhp.band { background: #0b5d3b; color: #fff; display: flex; gap: 14px; align-items: center; } .lhp.band .lhn { font-weight: 800; font-size: 1.05rem; } .lhp.band .lht, .lhp.band .lhc { color: #d9efe3; font-size: .78rem; } .lhp.band .lhtt { margin-left: auto; font-weight: 800; letter-spacing: 2px; font-size: .75rem; text-align: right; }

/* bell, notifications, calendar, timeline */
.bellwrap { position: fixed; top: 14px; right: 18px; z-index: 58; } .bellbtn { position: relative; border: 1px solid var(--line, #dde5e0); background: #fff; border-radius: 999px; width: 44px; height: 44px; font-size: 1.15rem; cursor: pointer; box-shadow: 0 6px 18px rgba(10, 50, 35, .16); } .bellbtn:hover { background: #eef7f2; }
.bellbtn .bcount { position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: #dc2626; color: #fff; font-size: .68rem; font-weight: 700; display: flex; align-items: center; justify-content: center; } .bellbtn .bcount[hidden] { display: none; }
.bellpanel { position: absolute; top: 52px; right: 0; width: min(420px, calc(100vw - 24px)); max-height: 76vh; overflow: auto; background: #fff; border: 1px solid var(--line, #dde5e0); border-radius: 16px; box-shadow: 0 18px 44px rgba(10, 50, 35, .28); } .bellpanel[hidden] { display: none; }
.bph { display: flex; gap: 8px; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--line, #dde5e0); position: sticky; top: 0; background: #fff; } .bpf { display: flex; justify-content: space-between; padding: 10px 14px; border-top: 1px solid var(--line, #dde5e0); font-weight: 600; }
.bpi { display: flex; gap: 10px; padding: 10px 14px; text-decoration: none; color: inherit; border-bottom: 1px solid #f0f3f1; border-left: 4px solid transparent; } .bpi:hover { background: #f5faf7; } .bpi.unread { background: #f3faf6; } .bpi.unread b { font-weight: 800; }
.bpi.lv-good { border-left-color: #16a34a; } .bpi.lv-bad { border-left-color: #dc2626; } .bpi.lv-warn { border-left-color: #e0a100; } .bpi.lv-info { border-left-color: #cbd5d0; }
.bpic { font-size: 1.15rem; line-height: 1.4; } .bpt { display: flex; flex-direction: column; min-width: 0; } .bpt small { display: block; font-size: .78rem; overflow: hidden; text-overflow: ellipsis; }
.nday { margin: 16px 0 6px; font-weight: 800; color: var(--brand, #0b5d3b); font-size: .85rem; letter-spacing: .4px; text-transform: uppercase; }
.nrow { display: flex; gap: 12px; padding: 12px 14px; border: 1px solid var(--line, #dde5e0); border-left: 5px solid #cbd5d0; border-radius: 12px; margin-bottom: 8px; text-decoration: none; color: inherit; background: #fff; align-items: flex-start; } .nrow:hover { box-shadow: 0 6px 16px rgba(10, 50, 35, .1); }
.nrow.unread { background: #f3faf6; } .nrow.unread b { font-weight: 800; } .nrow.lv-good { border-left-color: #16a34a; } .nrow.lv-bad { border-left-color: #dc2626; } .nrow.lv-warn { border-left-color: #e0a100; }
.nic { font-size: 1.3rem; } .nbody { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; } .ngr { font-size: .7rem; color: #5b6672; background: #eef2f0; border-radius: 999px; padding: 3px 10px; white-space: nowrap; }
.pulsebox .agi, .calside .agi, #cday .agi { display: flex; gap: 10px; align-items: center; padding: 8px 4px; border-bottom: 1px solid #f0f3f1; } .agt { display: flex; flex-direction: column; flex: 1; min-width: 0; } .agi.fin { opacity: .55; text-decoration: line-through; } .kdot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.quickadd { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; } .qa { border: 1.5px solid var(--c); color: var(--c); background: #fff; border-radius: 999px; padding: 6px 14px; font-weight: 700; font-size: .82rem; cursor: pointer; } .qa:hover { background: var(--c); color: #fff; }
.calwrap { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; } @media (max-width: 1100px) { .calwrap { grid-template-columns: 1fr; } }
.calnav { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; flex-wrap: wrap; } .calnav b { font-size: 1.1rem; min-width: 150px; text-align: center; }
.calgrid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-top: 1px solid var(--line, #dde5e0); border-left: 1px solid var(--line, #dde5e0); } .dow { padding: 6px; text-align: center; font-size: .72rem; font-weight: 800; color: #5b6672; background: #f5f8f6; border-right: 1px solid var(--line, #dde5e0); border-bottom: 1px solid var(--line, #dde5e0); }
.dcell { min-height: 92px; padding: 4px; border-right: 1px solid var(--line, #dde5e0); border-bottom: 1px solid var(--line, #dde5e0); cursor: pointer; overflow: hidden; } .dcell:hover { background: #f5faf7; } .dcell.out { background: #fafbfa; color: #98a29d; } .dcell.today .dn { background: #0b5d3b; color: #fff; } .dcell.sel { outline: 2px solid #138a62; outline-offset: -2px; background: #f0f9f4; }
.dcell .dn { width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .78rem; font-weight: 700; margin-bottom: 2px; }
.evchip { display: block; width: 100%; text-align: left; border: 0; border-left: 3px solid var(--c); background: color-mix(in srgb, var(--c) 14%, #fff); border-radius: 4px; padding: 2px 5px; margin-bottom: 2px; font-size: .7rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; color: #1b1f23; } .evchip i { font-style: normal; opacity: .7; margin-right: 4px; } .evchip.fin { opacity: .5; text-decoration: line-through; } .evchip.od { border-left-color: #dc2626; background: #fdecea; }
.dcell .more { font-size: .68rem; color: #5b6672; padding-left: 4px; }
.dayhead { display: flex; justify-content: space-between; align-items: center; margin: 18px 0 6px; flex-wrap: wrap; gap: 8px; } .agh { margin: 12px 0 2px; font-weight: 800; font-size: .78rem; letter-spacing: .5px; text-transform: uppercase; color: #5b6672; } .agh span { background: #eef2f0; border-radius: 999px; padding: 1px 8px; } .agh.bad { color: #b3261e; } .agh.warn { color: #9a6700; } .agh.blue { color: #1f55a8; }
@media (max-width: 700px) { .dcell { min-height: 58px; } .evchip { font-size: 0; padding: 0; height: 6px; border-radius: 3px; } .evchip i { display: none; } .bellwrap { top: 8px; right: 8px; } }
.tline { position: relative; padding-left: 8px; } .tline::before { content: ''; position: absolute; left: 22px; top: 8px; bottom: 8px; width: 2px; background: #e3e9e5; } .tli { display: flex; gap: 12px; padding: 8px 0; position: relative; } .tdot { width: 30px; height: 30px; border-radius: 50%; background: #fff; border: 2px solid #cbd5d0; display: flex; align-items: center; justify-content: center; flex: none; z-index: 1; font-size: .85rem; } .tli.lv-good .tdot { border-color: #16a34a; } .tli.lv-bad .tdot { border-color: #dc2626; } .tli.lv-warn .tdot { border-color: #e0a100; } .tbody { padding-top: 3px; display: flex; flex-direction: column; gap: 2px; }
.calnav select { width: auto; min-width: 150px; max-width: 220px; }

.rowlink { cursor: pointer; } .rowlink:hover td { background: #f5faf7; }

/* calendar: views, legend, week, drag */
.legend { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; } .lg { border: 1px solid var(--line, #dde5e0); background: #fff; border-radius: 999px; padding: 4px 12px; font-size: .74rem; font-weight: 700; cursor: pointer; color: #38413d; display: inline-flex; align-items: center; gap: 6px; } .lg i { width: 9px; height: 9px; border-radius: 50%; background: var(--c, #94a3b8); } .lg:hover { background: #f1f7f3; } .lg.on { background: #0b5d3b; color: #fff; border-color: #0b5d3b; } .lg.on i { background: #fff; }
.pbar { height: 6px; border-radius: 4px; background: #e6ece8; margin: 4px 0 3px; overflow: hidden; } .pbar i { display: block; height: 100%; background: #16a34a; }
.weekgrid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; } .wcol { min-height: 240px; border: 1px solid var(--line, #dde5e0); border-radius: 12px; padding: 8px; cursor: pointer; background: #fcfdfc; } .wcol:hover { background: #f5faf7; } .wcol.today { border-color: #0b5d3b; background: #f0f9f4; } .wcol.sel { outline: 2px solid #138a62; outline-offset: -2px; }
.wh { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; font-size: .78rem; color: #5b6672; font-weight: 700; } .wh b { font-size: 1.15rem; color: #1b1f23; } .wempty { color: #b4bdb8; text-align: center; padding: 20px 0; }
.dragover { outline: 2px dashed #16a34a !important; outline-offset: -3px; background: #eaf7ef !important; } .evchip[draggable=true] { cursor: grab; }
@media (max-width: 900px) { .weekgrid { grid-template-columns: 1fr; } .wcol { min-height: 0; } }

/* notifications page */
.chipbar { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; } .chipbar .lg b { background: #eef2f0; border-radius: 999px; padding: 0 7px; font-size: .7rem; } .chipbar .lg.on b { background: rgba(255,255,255,.25); }
.nrow { align-items: center; } .nrow .nbody { text-decoration: none; color: inherit; } .nrow.fresh { animation: nflash 2.4s ease-out 1; } @keyframes nflash { from { background: #d8f3e3; } to { background: #f3faf6; } }
.nrow [data-tg] { min-width: 34px; padding: 4px 8px; line-height: 1; } .nrow.unread [data-tg] { color: #0b5d3b; }
@media (max-width: 700px) { .topbar { padding-right: 72px; } .topbar b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } }

.rowdetail { cursor: pointer; } .rowdetail:hover td { background: #f5faf7; }
/* a password is never cut off: it wraps and can be selected */
.pw { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; max-width: 100%; justify-content: flex-end; } .pwv { word-break: break-all; overflow-wrap: anywhere; white-space: normal; font-family: ui-monospace, Consolas, monospace; font-size: .92rem; background: #eef6f1; padding: 3px 9px; border-radius: 6px; user-select: all; max-width: 100%; } .dots { letter-spacing: 2px; }
table.rt td[data-label="Password"], table.rt td[data-label="User ID"] { min-width: 150px; overflow-wrap: anywhere; word-break: break-word; }
@media (min-width: 701px) { table.rt td[data-label="Password"] .pw { justify-content: flex-start; } }
/* the papers list fits its page */
table.rt.compact { min-width: 0; } table.rt.compact td, table.rt.compact th { padding: 12px 10px; } table.rt.compact td[data-label="Paper"] { min-width: 150px; } table.rt.compact td .btns { flex-wrap: wrap; gap: 6px; } table.rt.compact td b { word-break: break-word; }
table.rt.compact td[data-label="Paper"] a, table.rt.compact td[data-label="Paper"] b { display: block; }

.flow { display: flex; flex-wrap: wrap; gap: 8px; align-items: stretch; margin: 6px 0 10px; } .flow .fs { flex: 1 1 150px; border: 1px solid var(--line, #dde5e0); border-radius: 14px; padding: 12px 14px; background: #fafcfb; } .flow .fs small { display: block; color: #5b6672; font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; } .flow .fs b { font-size: 1.25rem; } .flow .fs.bad { border-color: #e6a29c; background: #fdf1ef; } .flow .fs.bad b { color: #b3261e; } .flow .fs.ok { border-color: #9fd3b4; background: #f0faf4; } .flow .fa { align-self: center; font-size: 1.3rem; color: #94a3b8; }
@media (max-width: 700px) { .flow .fa { display: none; } }

.flow .fs em { display: block; font-style: normal; color: #7a8690; font-size: .72rem; margin-top: 2px; } .flow .fs.blue { border-color: #b7cdf0; background: #f2f7fe; } .flow .fs.blue b { color: #1f55a8; } .flow .fa { font-weight: 700; }
.flowsay { background: #f5faf7; border: 1px solid #d5e8dd; border-radius: 12px; padding: 10px 14px; font-size: 1rem; }
[hidden] { display: none !important; }

/* admissions: taken = confirmed + in progress + cancelled + rejected */
.admflow { border: 1px solid var(--line, #dde5e0); border-radius: 16px; background: #fff; padding: 14px 18px; margin: 0 0 16px; } .afh { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; } .afbig { font-size: 1.7rem; } .afeq { color: #94a3b8; font-weight: 700; } .afi { display: inline-flex; gap: 6px; align-items: baseline; padding: 4px 10px; border-radius: 10px; } .afi i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; align-self: center; } .afi em { font-style: normal; color: #5b6672; font-size: .78rem; } .afi.drillable { cursor: pointer; } .afi.drillable:hover { background: #eef7f2; }
.afbar { display: flex; height: 12px; border-radius: 8px; overflow: hidden; background: #eef2f0; margin: 10px 0 8px; } .afbar i { display: block; height: 100%; } .afs { color: #38413d; font-size: .95rem; }

/* dashboard v2: one clear sequence */
.dashhead { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin: 0 0 14px; } .dashhead h1 { margin: 0; } .dashtop { align-items: start; margin-bottom: 8px; } .dashtop .pulsebox { grid-template-columns: 1fr; } .dashtop .section-title { margin-top: 4px; }
.periodbar { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; } .sct { font-size: .78rem; font-weight: 600; margin-left: 8px; text-transform: none; letter-spacing: 0; }
details.bigmore { margin-top: 26px; border: 1px dashed var(--line, #dde5e0); border-radius: 16px; padding: 4px 16px 16px; background: #fcfdfc; } details.bigmore > summary { cursor: pointer; font-weight: 700; padding: 12px 0; color: #38413d; }

/* the top bar: search, + New, bell */
.apptop { position: sticky; top: 0; z-index: 45; display: flex; gap: 14px; align-items: center; padding: 10px 28px; background: rgba(244, 247, 245, .94); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line, #dde5e0); }
.gsearch { position: relative; flex: 1; max-width: 640px; } .gsearch input { width: 100%; padding: 11px 16px 11px 42px; border-radius: 999px; border: 1px solid var(--line, #dde5e0); background: #fff; font-size: .95rem; } .gsearch input:focus { outline: 2px solid #138a62; outline-offset: 1px; } .gsi { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); opacity: .6; pointer-events: none; }
.gsres { position: absolute; top: calc(100% + 8px); left: 0; right: 0; max-height: 70vh; overflow: auto; background: #fff; border: 1px solid var(--line, #dde5e0); border-radius: 16px; box-shadow: 0 18px 44px rgba(10, 50, 35, .25); padding: 6px; z-index: 80; } .gsres[hidden] { display: none; }
.gsh { padding: 8px 12px 4px; font-size: .7rem; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: #5b6672; } .gsr { display: flex; gap: 10px; padding: 9px 12px; border-radius: 10px; text-decoration: none; color: inherit; align-items: center; } .gsr:hover, .gsr.on { background: #eef7f2; } .gsri { font-size: 1.1rem; } .gsrt { display: flex; flex-direction: column; min-width: 0; } .gsrt small { color: #5b6672; font-size: .78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tbr { margin-left: auto; display: flex; gap: 12px; align-items: center; } .qadd { position: relative; } .qamenu { position: absolute; right: 0; top: calc(100% + 8px); min-width: 230px; background: #fff; border: 1px solid var(--line, #dde5e0); border-radius: 14px; box-shadow: 0 18px 44px rgba(10, 50, 35, .25); padding: 6px; z-index: 80; } .qamenu[hidden] { display: none; }
.qai { display: flex; gap: 10px; padding: 10px 12px; border-radius: 10px; text-decoration: none; color: inherit; font-weight: 600; } .qai:hover { background: #eef7f2; } .qai span { width: 22px; text-align: center; }
.apptop .bellwrap { position: static; } .apptop .bellbtn { width: 42px; height: 42px; box-shadow: none; } .apptop .bellpanel { top: 50px; }
.eyebrow { font-size: .72rem; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; color: #138a62; margin: 0 0 2px; }
@media (max-width: 900px) { .apptop { padding: 8px 12px; position: static; } .qadd #qa span { display: none; } }

/* WhatsApp */
.wabtn { border: 1px solid #b7e4cd; background: #e9f9f0; color: #0b6b43; border-radius: 999px; padding: 2px 9px; font-size: .8rem; cursor: pointer; line-height: 1.4; vertical-align: middle; } .wabtn:hover { background: #d4f3e2; }
.watpl { border: 1px solid var(--line, #dde5e0); border-radius: 12px; padding: 12px 14px; margin-bottom: 12px; background: #fbfdfc; } .wahist > div { padding: 8px 0; border-top: 1px solid var(--line, #dde5e0); } .wahist > div:first-child { border-top: 0; }
/* phone width: nothing may push the page sideways */
@media (max-width: 700px) { table.rt td { min-width: 0 !important; overflow-wrap: anywhere; flex-wrap: wrap; } table.rt td > *, table.rt td .muted { max-width: 100%; } table.rt { min-width: 0 !important; width: 100%; } .tablewrap, .tw { overflow-x: hidden; } }
.pgrid2 > * { min-width: 0; } @media (max-width: 700px) { .pgrid2 { grid-template-columns: minmax(0, 1fr) !important; } }

/* messages */
.msgc { border: 1px solid var(--line, #dde5e0); border-left: 4px solid #94a3b8; border-radius: 12px; padding: 12px 16px; margin-bottom: 12px; background: #fff; } .msgc.unread { border-left-color: #138a62; background: #f3fbf7; } .msgc.imp { border-left-color: #dc2626; }
.msghead { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 6px; } .msgwho { margin-left: auto; font-size: .82rem; } .msgcase { font-weight: 700; text-decoration: none; }
.msgtext { white-space: pre-wrap; line-height: 1.5; } .msgfoot { margin-top: 10px; } .msgto { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px; }
.rcp { border: 1px solid var(--line, #dde5e0); border-radius: 999px; padding: 2px 10px; font-size: .8rem; color: #5b6672; } .rcp.seen { color: #0b5ea8; border-color: #b6d4f0; } .rcp.ok { color: #0b6b43; border-color: #b7e4cd; background: #e9f9f0; }
.mgroups { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-bottom: 6px; } .chk { display: flex; gap: 8px; align-items: center; font-weight: 500; }
.mpeople { max-height: 220px; overflow: auto; border: 1px solid var(--line, #dde5e0); border-radius: 10px; padding: 6px 10px; } .prow { padding: 5px 0; }

.msgthread { margin-top: 10px; border-top: 1px dashed var(--line, #dde5e0); padding-top: 8px; } .msgrep { padding: 6px 10px; margin: 6px 0; border-radius: 10px; background: #f4f7f5; } .msgrep.mine { background: #e9f9f0; margin-left: 28px; } .msgrep b { font-size: .85rem; }
.msgreply { display: flex; gap: 8px; margin-top: 10px; } .msgreply .mrin { flex: 1; min-width: 0; } .msgreply .mrto { max-width: 190px; }

/* wide screens use their width; a table wider than its box gets a scroll bar ABOVE it (always in view), a fixed first column and a hint */
@media (min-width: 1500px) { .content { max-width: 1500px; } }
@media (min-width: 1800px) { .content { max-width: 1700px; } }
.hsbar { overflow-x: auto; overflow-y: hidden; height: 16px; margin: 0 0 4px; border-radius: 8px; background: #eef3f0; } .hsin { height: 1px; }
.hsbar::-webkit-scrollbar { height: 12px; } .hsbar::-webkit-scrollbar-thumb { background: #9fb4a9; border-radius: 8px; } .hsbar::-webkit-scrollbar-thumb:hover { background: #138a62; }
.hshint { font-size: .78rem; color: #5b6672; margin: 2px 2px 4px; }
.tablewrap.hs-on td:first-child { position: sticky; left: 0; background: #fff; z-index: 1; box-shadow: 2px 0 0 #edf1ef; } .tablewrap.hs-on th:first-child { position: sticky; left: 0; z-index: 3; box-shadow: 2px 0 0 #e3eae6; }
.tablewrap.hs-on tr:hover td:first-child { background: #f5faf7; }
@media (max-width: 700px) { .hsbar, .hshint { display: none !important; } .tablewrap.hs-on td:first-child, .tablewrap.hs-on th:first-child { position: static; box-shadow: none; } }
@media print { .hsbar, .hshint { display: none !important; } .tablewrap.hs-on td:first-child, .tablewrap.hs-on th:first-child { position: static; box-shadow: none; } }

/* case discussion */
.ctsum { background: #f4f9f6; border: 1px solid #dcebe3; border-radius: 12px; padding: 10px 14px; } .ctlinks { margin-top: 4px; display: flex; gap: 16px; }
.cbox { max-height: 420px; overflow: auto; padding: 8px 4px; display: flex; flex-direction: column; gap: 8px; border: 1px solid var(--line, #dde5e0); border-radius: 12px; background: #fbfdfc; padding: 12px; }
.ctday { align-self: center; font-size: .75rem; font-weight: 700; color: #5b6672; background: #eef3f0; padding: 2px 12px; border-radius: 999px; margin: 6px 0 2px; }
.cpost { max-width: 78%; align-self: flex-start; background: #fff; border: 1px solid #e3eae6; border-radius: 14px 14px 14px 4px; padding: 8px 12px; } .cpost.mine { align-self: flex-end; background: #e9f9f0; border-color: #c4ead6; border-radius: 14px 14px 4px 14px; }
.cph { font-size: .8rem; display: flex; gap: 6px; align-items: center; margin-bottom: 2px; } .cpt { white-space: pre-wrap; line-height: 1.45; }
.ccomp { display: flex; gap: 10px; margin-top: 10px; align-items: flex-end; } .ccomp textarea { flex: 1; min-width: 0; }
.cprivate > .card { border: 0; box-shadow: none; padding: 0; margin-top: 10px; }
.ccase { cursor: default; } .ccrow { display: flex; gap: 20px; justify-content: space-between; align-items: flex-start; cursor: pointer; } .ccl { text-align: right; max-width: 46%; } .ccbody { margin-top: 10px; } .ccbody:empty { display: none; }
@media (max-width: 700px) { .ccrow { flex-direction: column; } .ccl { text-align: left; max-width: none; } .cpost { max-width: 92%; } }
/* columns take the room their words need (no three-line names); long text stops at a sensible width */


/* case handover */
.hoflow { display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px; margin: 4px 0 16px; } .hoar { align-self: center; color: #9fb4a9; font-size: 1.3rem; }
.hostep { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 150px; padding: 12px 16px; border: 1px solid var(--line, #dde5e0); border-radius: 14px; background: #fff; cursor: pointer; text-align: left; font: inherit; position: relative; } .hostep b { font-size: 1.7rem; line-height: 1.1; } .hostep span:last-child { font-size: .85rem; color: #5b6672; }
.hostep:hover { border-color: #138a62; } .hostep.on { border-color: #138a62; background: #eef8f2; box-shadow: 0 0 0 2px #cfeadb; } .hostep.side { margin-left: 18px; border-style: dashed; background: #fafcfb; }
.hostep .hon { position: absolute; top: 10px; right: 12px; width: 22px; height: 22px; border-radius: 50%; background: #138a62; color: #fff; font-size: .75rem; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.hostep.handed { border-top: 4px solid #e08a1e; } .hostep.picked, .hostep.assigned, .hostep.working { border-top: 4px solid #2f6fd1; } .hostep.done { border-top: 4px solid #1f9d55; }
.hocard.late { border-left: 4px solid #dc2626; } .honote { background: #fff8e8; border: 1px solid #f3e2b3; border-radius: 10px; padding: 8px 12px; margin-top: 8px; }
.hostrip { padding: 12px 16px; } .hsl { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.hotl { display: flex; flex-direction: column; gap: 10px; border-left: 2px solid #dce8e1; margin-left: 6px; padding-left: 14px; } .hoe { display: flex; gap: 10px; position: relative; } .hod { position: absolute; left: -21px; top: 6px; width: 10px; height: 10px; border-radius: 50%; background: #138a62; }
@media (max-width: 700px) { .hostep { min-width: 46%; } .hoar { display: none; } .hostep.side { margin-left: 0; } }
/* the work file: a card per portal, five steps in a line */
.trkgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(440px, 1fr)); gap: 14px; } @media (max-width: 700px) { .trkgrid { grid-template-columns: minmax(0, 1fr); } }
.trk { border: 1px solid var(--line, #dde5e0); border-radius: 14px; padding: 14px 16px; background: #fff; } .trk.voided { opacity: .55; } .trkh { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; margin-bottom: 10px; }
.stps { display: flex; gap: 6px; margin-bottom: 12px; } .stp { flex: 1; min-width: 0; border-radius: 10px; padding: 7px 6px; text-align: center; background: #f4f6f5; border: 1px solid #e3eae6; font-size: .78rem; display: flex; flex-direction: column; align-items: center; gap: 1px; } .stp i { font-style: normal; font-size: 1.05rem; line-height: 1; } .stp b { font-weight: 700; } .stp small { color: #5b6672; font-size: .7rem; }
.stp.done { background: #e9f9f0; border-color: #b7e4cd; color: #0b6b43; } .stp.doing { background: #fff6e3; border-color: #f3e2b3; color: #8a5a00; } .stp.na { opacity: .55; }
.trkkv { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; } .trkkv > div { min-width: 0; overflow-wrap: anywhere; } .trkkv span { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: #5b6672; font-weight: 700; }
.stmini { display: inline-flex; gap: 2px; } .stmini i { font-style: normal; width: 18px; text-align: center; font-size: .85rem; color: #9aa7a0; } .stmini i.done { color: #1f9d55; } .stmini i.doing { color: #e08a1e; }
.trkline { margin: 2px 0; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.steprow { display: grid; grid-template-columns: 120px 140px 160px 1fr; gap: 8px; align-items: center; margin-bottom: 6px; } @media (max-width: 700px) { .steprow { grid-template-columns: 1fr 1fr; } .steprow input[name^=n_] { grid-column: 1 / -1; } }

.wkp { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; } .wk { font-size: .72rem; padding: 1px 8px; border-radius: 999px; background: #f0f3f1; border: 1px solid #e0e7e3; color: #5b6672; white-space: nowrap; } .wk.some { background: #fff6e3; border-color: #f3e2b3; color: #8a5a00; } .wk.all { background: #e9f9f0; border-color: #b7e4cd; color: #0b6b43; }
.trkkv .pw { display: inline-flex; gap: 6px; align-items: center; justify-content: flex-start; }

/* entrance scores */
.scl { border: 1px solid var(--line, #dde5e0); border-radius: 14px; padding: 12px 16px 6px; margin-bottom: 12px; background: #fbfdfc; } .sclh { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.scview { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; } .scv { border: 1px solid var(--line, #dde5e0); border-radius: 12px; padding: 10px 14px; background: #fff; } .scvh { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 6px; }
.scvk { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 6px 14px; } .scvk span { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: #5b6672; font-weight: 700; } .scvk b { font-size: 1.05rem; }

/* the bar that stays at the bottom of a case until it is handed over */
.handbar { position: sticky; bottom: 14px; z-index: 40; margin: 18px 0 0; display: flex; gap: 14px; align-items: center; justify-content: space-between; background: #0b6b43; color: #fff; padding: 12px 18px; border-radius: 16px; box-shadow: 0 12px 30px rgba(10, 50, 35, .35); max-width: calc(100% - 330px); }
.handbar .btn { background: #fff; color: #0b6b43; font-weight: 800; border: 0; } .handbar span { font-weight: 700; }
@media (max-width: 900px) { .handbar { max-width: none; flex-direction: column; align-items: stretch; text-align: center; margin-bottom: 70px; } }

/* a wide table: the bar above it stays under the top bar while the table is on screen, so left and right is always one click away */
.hsbar { position: sticky; top: 70px; z-index: 12; display: flex; align-items: center; gap: 8px; height: auto; overflow: visible; background: rgba(244, 247, 245, .96); padding: 6px 2px; margin: 0 0 6px; border-radius: 12px; }
.hssc { flex: 1; overflow-x: auto; overflow-y: hidden; height: 16px; border-radius: 8px; background: #e3ebe6; } .hssc::-webkit-scrollbar { height: 12px; } .hssc::-webkit-scrollbar-thumb { background: #7fa391; border-radius: 8px; } .hssc::-webkit-scrollbar-thumb:hover { background: #138a62; }
.hsb { width: 34px; height: 30px; border-radius: 10px; border: 1px solid #c9d8d0; background: #fff; color: #0b6b43; font-size: .85rem; cursor: pointer; line-height: 1; } .hsb:hover { background: #138a62; color: #fff; }
.tablewrap.hs-on { cursor: grab; } .tablewrap.dragging { cursor: grabbing; user-select: none; }
.tablewrap.hs-on td:first-child, .tablewrap.hs-on th:first-child { max-width: 300px; }
/* columns keep a readable width; the table fills its box and scrolls only when the columns need more */
.tablewrap > table.rt td { min-width: 96px; } .tablewrap > table.rt td.num, .tablewrap > table.rt td.sno, .tablewrap > table.rt td.actions { min-width: 0; } .tablewrap > table.rt td:first-child { min-width: 170px; }
/* on a medium screen the tables sit a little tighter, so fewer of them need to slide */
@media (min-width: 701px) and (max-width: 1500px) { td { padding: 10px 9px; font-size: .88rem; } th { padding: 10px 9px; letter-spacing: .04em; } .tablewrap > table.rt td { min-width: 84px; } .tablewrap > table.rt td:first-child { min-width: 150px; } .tablewrap.hs-on td:first-child, .tablewrap.hs-on th:first-child { max-width: 240px; } }

/* arrows that float in the middle of the screen over a wide table */
.hsfloat[hidden] { display: none; } .hsf { position: fixed; z-index: 60; width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(11, 107, 67, .88); color: #fff; font-size: 1rem; cursor: pointer; box-shadow: 0 6px 18px rgba(10, 50, 35, .35); } .hsf:hover { background: #0b6b43; }
@media (max-width: 700px), print { .hsfloat { display: none !important; } }

/* the case file: one page, six parts in order */
.casehead .btns { align-items: center; } .casemenu { position: relative; } .casemenu > summary { list-style: none; cursor: pointer; } .casemenu > summary::-webkit-details-marker { display: none; }
.menupanel { position: absolute; right: 0; top: calc(100% + 6px); z-index: 50; min-width: 230px; background: #fff; border: 1px solid var(--line, #dde5e0); border-radius: 14px; box-shadow: 0 18px 44px rgba(10, 50, 35, .25); padding: 6px; display: flex; flex-direction: column; }
.menupanel a, .menupanel button { display: block; text-align: left; padding: 10px 12px; border: 0; background: none; border-radius: 10px; font: inherit; font-weight: 600; color: inherit; text-decoration: none; cursor: pointer; } .menupanel a:hover, .menupanel button:hover { background: #eef7f2; } .menupanel .dng { color: #b42318; }
.casenav { position: sticky; top: 70px; z-index: 20; display: flex; gap: 8px; flex-wrap: wrap; padding: 8px 4px; margin: 4px 0 14px; background: rgba(244, 247, 245, .95); backdrop-filter: blur(6px); } .casenav a { padding: 7px 14px; border-radius: 999px; background: #fff; border: 1px solid var(--line, #dde5e0); text-decoration: none; font-weight: 700; font-size: .88rem; color: #0b6b43; } .casenav a:hover { background: #138a62; color: #fff; }
.casesec { margin-bottom: 8px; scroll-margin-top: 130px; } .casesec:not(:has(.card, .notice, .tablewrap, .scview, table)) { display: none; }
.kvh { grid-column: 1 / -1; font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #138a62; margin-top: 8px; padding-top: 6px; border-top: 1px dashed #dde5e0; } .kv > .kvh:first-child { margin-top: 0; border-top: 0; padding-top: 0; }
.gapcard { border-left: 5px solid #e08a1e; } .gapcard.allgood { border-left-color: #1f9d55; } .gaphead { display: flex; justify-content: space-between; gap: 18px; align-items: center; } .gapbar { flex: 0 0 160px; height: 10px; background: #e8eeea; border-radius: 999px; overflow: hidden; } .gapbar i { display: block; height: 100%; background: #1f9d55; }
.gapchips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; } .gapchip { padding: 6px 12px; border-radius: 999px; background: #fff3e0; border: 1px solid #f3d8a8; color: #8a5a00; font-size: .85rem; font-weight: 600; text-decoration: none; } a.gapchip:hover { background: #ffe3b3; } .gapchip.ok { background: #e9f9f0; border-color: #b7e4cd; color: #0b6b43; } .gapdone { margin-top: 8px; }
.allots { display: flex; flex-direction: column; gap: 10px; } .allot { display: flex; justify-content: space-between; gap: 14px; align-items: center; border: 1px solid var(--line, #dde5e0); border-radius: 12px; padding: 10px 14px; background: #fbfdfc; }
.printhead { display: none; }
@media print {
  .apptop, .sidebar, .casenav, .hsbar, .hsfloat, .handbar, .noprint, .docbar, .menupanel, #gpx .gapdone { display: none !important; }
  .printhead { display: block; font-weight: 800; border-bottom: 2px solid #000; padding-bottom: 6px; margin-bottom: 10px; }
  .casesec { break-inside: auto; margin-bottom: 14px; } .casesec .card { break-inside: avoid; box-shadow: none; border: 1px solid #999; }
  .content, .main { margin: 0 !important; padding: 0 !important; max-width: none !important; } .cbox { max-height: none !important; overflow: visible !important; }
}
@media (max-width: 700px) { .gaphead { flex-direction: column; align-items: stretch; } .gapbar { flex-basis: 10px; } .allot { flex-direction: column; align-items: stretch; } }
.papkv .pre { white-space: pre-wrap; line-height: 1.45; } .papkv > div > span { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: #5b6672; font-weight: 700; }

h4.kvh { margin: 8px 0 0; }

.howto { background: #f3f8f5; border: 1px solid #d6e6dd; border-radius: 12px; padding: 8px 14px; margin: 10px 0; font-size: .9rem; } .howto > summary { cursor: pointer; font-weight: 700; color: #17483a; list-style: none; } .howto > summary::-webkit-details-marker { display: none; } .howto ol { margin: 8px 0 4px 18px; padding: 0; line-height: 1.6; }
.xstrip { margin-bottom: 12px; padding: 12px 16px; } .xtop { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.xpath { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 4px; } .xnode { background: #eef3f0; border-radius: 999px; padding: 3px 10px; font-size: .82rem; font-weight: 600; } .xarrow { color: #17483a; font-weight: 800; }
.xlist { max-height: 300px; overflow: auto; border: 1px solid var(--line, #dde5e0); border-radius: 12px; padding: 6px; } .xgroup { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: #5b6672; font-weight: 700; padding: 8px 8px 2px; }
.xrow { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; cursor: pointer; } .xrow:hover { background: #f3f8f5; } .xrow.on { background: #e3f1ea; outline: 2px solid #17483a; } .xrow small { margin-left: auto; }
@media print { .xstrip .btn, .howto { display: none !important; } }
.xrow input[type=radio] { width: 18px; height: 18px; min-width: 18px; padding: 0; margin: 0; flex: none; } .xrow > span { flex: 1; min-width: 0; }

.xpanel { margin-top: 2px; } .xroad { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 6px; } .xs { display: inline-flex; flex-direction: column; background: #f1f4f2; color: #6b7681; border-radius: 10px; padding: 5px 10px; font-size: .8rem; font-weight: 600; } .xs small { font-weight: 500; font-size: .7rem; } .xs.done { background: #e3f4ea; color: #0b6b43; } .xs.now { background: #fff3e0; color: #8a5a00; outline: 1px dashed #e0b565; }
.xsay { font-size: .88rem; margin: 2px 0 8px; font-weight: 600; }
.xdest { display: grid; gap: 8px; margin-top: 12px; } .xopt { display: flex; gap: 10px; align-items: flex-start; border: 1.5px solid var(--line, #dde5e0); border-radius: 12px; padding: 10px 12px; cursor: pointer; } .xopt.on { border-color: #17483a; background: #eef7f2; } .xopt.off { opacity: .55; cursor: not-allowed; } .xopt small { display: block; color: #5b6672; font-weight: 500; } .xopt input[type=radio] { width: 18px; height: 18px; min-width: 18px; padding: 0; margin: 2px 0 0; flex: none; }
.hostrip .xpanel .xtop { border-top: 1px dashed var(--line, #dde5e0); padding-top: 8px; }
.rgrid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; } @media (max-width: 900px) { .rgrid { grid-template-columns: 1fr; } }
.rfgot { margin-bottom: 14px; } .gapchip.bad { background: #fdecec; border-color: #f2b8b8; color: #a11a1a; } .gapchip small { font-weight: 500; }
.rfilter { margin: 6px 0 10px; } .rrow { margin-bottom: 10px; padding: 12px 16px; } .rrow.od { border-left: 4px solid #d9534f; } .rtop { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; } .rwhen { font-weight: 700; } .rnote { margin-top: 6px; white-space: pre-wrap; } .rday { margin: 6px 0 10px; }
.rcal { padding: 14px; position: sticky; top: 80px; } .rcn { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; } .rcg { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; } .rcg .dow { text-align: center; font-size: .72rem; color: #5b6672; font-weight: 700; }
.rc { position: relative; border: 0; background: #f6f9f7; border-radius: 8px; padding: 8px 0; font-size: .85rem; cursor: pointer; font-weight: 600; } .rc.out { opacity: .4; } .rc.today { outline: 2px solid #17483a; } .rc.sel { background: #17483a; color: #fff; } .rc i { position: absolute; top: 1px; right: 3px; font-style: normal; font-size: .62rem; background: #e11d48; color: #fff; border-radius: 999px; padding: 0 4px; } .rc i.late { background: #7f1d1d; }
.rlater { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }

.ltemp { display: inline-flex; gap: 4px; } .lt { border: 1px solid var(--line, #dde5e0); background: #fff; border-radius: 999px; padding: 3px 9px; font-size: .78rem; font-weight: 600; cursor: pointer; opacity: .6; } .lt.on { opacity: 1; } .lt.Hot.on { background: #fde8e8; border-color: #f2b8b8; color: #a11a1a; } .lt.Warm.on { background: #fff3e0; border-color: #f3d8a8; color: #8a5a00; } .lt.Cold.on { background: #e6f0fb; border-color: #b8d2ee; color: #1f5fa8; }
.lstage { min-width: 130px; padding: 6px 8px; } .lnote { max-width: 260px; }

.backbtn { flex: none; display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line, #dde5e0); background: #fff; color: #17483a; border-radius: 999px; padding: 8px 14px; font-weight: 700; font-size: .9rem; cursor: pointer; box-shadow: 0 1px 2px rgba(0,0,0,.05); } .backbtn:hover { background: #eef7f2; } .backbtn.hide { display: none; }
@media (max-width: 900px) { .backbtn span { display: none; } .backbtn { padding: 8px 12px; } }
/* on a phone the top bar scrolls away, so the Back button floats at the bottom-left and is always there */
@media (max-width: 900px) {
  .apptop { backdrop-filter: none; -webkit-backdrop-filter: none; }
  .backbtn { position: fixed; left: 12px; bottom: 74px; z-index: 70; padding: 8px 13px; font-size: .85rem; opacity: .94; box-shadow: 0 4px 14px rgba(0, 0, 0, .22); background: #17483a; color: #fff; border-color: #17483a; }
  .backbtn span { display: inline; }
}

.pw-wrap{position:relative;display:block}.pw-wrap>input{width:100%;padding-right:46px}.pw-eye{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:36px;height:36px;border:0;border-radius:8px;background:transparent;cursor:pointer;font-size:1.15rem;opacity:.65}.pw-eye:hover,.pw-eye:focus-visible{opacity:1;background:rgba(127,127,127,.18)}.pw-eye.on{opacity:1;background:rgba(13,148,136,.2)}
/* wide tables (such as the partner table) scroll inside their box on tablets and phones instead of stretching the page */
@media (max-width:1180px){.tablewrap{overflow-x:auto!important;max-width:100%;-webkit-overflow-scrolling:touch}}