/* ===== UP Adventure Sports Portal — Shared CSS ===== */
:root {
  --navy: #0f2d4a; --navy2: #1a4068;
  --sf: #FF6700;   --sf2: #e05900;
  --gr: #1a6b2e;   --gr2: #145522;
  --g50: #f8f9fa;  --g100: #f0f2f5; --g200: #e8eaed;
  --g300: #d0d3d9; --g500: #777;    --g700: #444; --g900: #1a2940;
  --ok: #1a6b2e; --wn: #E65100; --er: #C62828; --inf: #1565C0;
  --r: 8px; --rl: 12px; --sh: 0 2px 12px rgba(0,0,0,.08);
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Segoe UI', Arial, sans-serif; font-size: 15px; background: var(--g100); overflow-x: hidden; }

/* ── BUTTONS ── */
/* Bootstrap's own .btn (loaded first, in _AdminLayout) also sets the border shorthand, so without
   :not() here the two rules fight over border-color: same specificity, shared.css loads later, so
   this unqualified border wins and overwrites Bootstrap's --bs-btn-border-color with currentColor
   even on a plain .btn-primary. Excluding elements that carry a Bootstrap variant class lets
   Bootstrap's own border-color stand for those, while every .bp/.bo/.bd button — which sets
   border-color itself right after — is unaffected either way. */
.btn:not([class*="btn-"]) { display: inline-flex; align-items: center; gap: 6px; padding: 10px 20px; border-radius: var(--r); font-size: 13px; font-weight: 600; cursor: pointer; border: 1.5px solid; transition: all .15s; white-space: nowrap; text-decoration: none; font-family: inherit; }
.bp  { background: var(--sf);  color: #fff; border-color: var(--sf);  } .bp:hover  { background: var(--sf2); }
.bo  { background: #fff; color: var(--navy); border-color: var(--g300); } .bo:hover  { background: var(--g50); }
.bg  { background: var(--gr);  color: #fff; border-color: var(--gr);  } .bg:hover  { background: var(--gr2); }
.bd  { background: #fff; color: var(--er);  border-color: #FFCDD2; } .bd:hover  { background: #FFEBEE; }
.bd:disabled { opacity: .45; cursor: not-allowed; pointer-events: none; }
.bw  { background: #fff; color: var(--wn);  border-color: #FFE0B2; } .bw:hover  { background: #FFF3E0; }
.bsm { padding: 7px 14px !important; font-size: 12px !important; min-height: 32px; }
.blg { padding: 13px 28px; font-size: 16px; }

/* Bootstrap buttons, recolored to the portal's palette (SOP has no colour rules — this is house
   style). Overriding Bootstrap's own custom properties keeps every built-in .btn-* behaviour
   (hover, active, focus ring, disabled) working without reimplementing it. */
.btn-primary {
    --bs-btn-bg: #0d6efd; --bs-btn-border-color: #0d6efd;
    --bs-btn-hover-bg: #0b5ed7; --bs-btn-hover-border-color: #0a58ca;
    --bs-btn-active-bg: #0a58ca; --bs-btn-active-border-color: #0a53be;
    --bs-btn-disabled-bg: #0d6efd; --bs-btn-disabled-border-color: #0d6efd;
}
.btn-danger {
    --bs-btn-bg: #EA2831; --bs-btn-border-color: #EA2831;
    --bs-btn-hover-bg: #d0141d; --bs-btn-hover-border-color: #c31219;
    --bs-btn-active-bg: #c31219; --bs-btn-active-border-color: #b61017;
    --bs-btn-disabled-bg: #EA2831; --bs-btn-disabled-border-color: #EA2831;
}
.btn-accent {
    font-size:.80rem !important;
    --bs-btn-color: #fff; --bs-btn-bg: var(--sf); --bs-btn-border-color: var(--sf);
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--sf2); --bs-btn-hover-border-color: var(--sf2);
    --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--sf2); --bs-btn-active-border-color: var(--sf2);
    --bs-btn-disabled-color: #fff; --bs-btn-disabled-bg: var(--sf); --bs-btn-disabled-border-color: var(--sf);
}
.btn-outline-accent {
    --bs-btn-color: var(--sf); --bs-btn-border-color: var(--sf);
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--sf); --bs-btn-hover-border-color: var(--sf);
    --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--sf); --bs-btn-active-border-color: var(--sf);
    --bs-btn-disabled-color: var(--sf);
}

/* ── GOVT HEADER ── */
.gh  { background: var(--navy); padding: 6px 0; border-bottom: 3px solid var(--sf); }
.ghi { max-width: 1200px; margin: 0 auto; padding: 0 16px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px; }
.gh-l { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1 1 auto; }
.gh-l > div { min-width: 0; }
.gh-t1 { color: #fff; font-size: 13px; font-weight: 700; }
.gh-t2 { color: rgba(255,255,255,.55); font-size: 10px; }
.gh-r  { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; flex-shrink: 0; }
.ghl   { color: rgba(255,255,255,.65); font-size: 13px; cursor: pointer; text-decoration: none; } .ghl:hover { color: #fff; }
.ghsep { color: rgba(255,255,255,.2); }
.flag  { display: flex; height: 14px; width: 22px; border-radius: 2px; overflow: hidden; flex-shrink: 0; }
.fs    { flex: 1; }

/* ── PUBLIC NAV ── */
.lnav  { background: #fff; border-bottom: 1px solid var(--g200); position: sticky; top: 0; z-index: 100; box-shadow: var(--sh); }
.lnavi { max-width: 1200px; margin: 0 auto; padding: 0 16px; display: flex; align-items: center; height: 58px; gap: 12px; }
.nlogo { font-size: 15px; font-weight: 700; color: var(--navy); display: flex; align-items: center; gap: 8px; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex-shrink: 1; }
.nlogo img { flex-shrink: 0; }
.nlinks { display: flex; flex: 1; margin-left: 12px; }
.nl    { padding: 0 13px; height: 58px; display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--g700); text-decoration: none; border-bottom: 3px solid transparent; font-weight: 500; white-space: nowrap; transition: all .15s; }
.nl:hover, .nl.on { color: var(--sf); border-bottom-color: var(--sf); }
/* A public page with no controller yet — same "not built" idiom as .ni.off in the sidebar. */
.nl.off { color: var(--g300); cursor: default; }
.nl.off:hover { color: var(--g300); border-bottom-color: transparent; }
.nl.off::after { content: "soon"; font-size: 8px; letter-spacing: .5px; text-transform: uppercase; color: var(--g300); border: 1px solid var(--g200); border-radius: 8px; padding: 1px 5px; }
.ncta  { display: flex; gap: 8px; margin-left: auto; align-items: center; }

/* ── TICKER ── */
.ticker { background: var(--sf); padding: 8px 0; overflow: hidden; }
.ticki  { max-width: 1200px; margin: 0 auto; padding: 0 16px; display: flex; align-items: center; gap: 12px; }
.tlbl   { background: rgba(0,0,0,.2); padding: 3px 10px; border-radius: 10px; font-size: 13px; font-weight: 700; color: #fff; white-space: nowrap; letter-spacing: .5px; flex-shrink: 0; }
.ttxt   { flex: 1; min-width: 0; font-size: 13px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── CAROUSEL ── */
.car        { position: relative; overflow: hidden; height: 480px; }
.car-slides { display: flex; transition: transform .6s ease; height: 100%; }
.car-slide  { min-width: 100%; height: 100%; position: relative; display: flex; align-items: center; }
.car-slide img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.car-ov    { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(15,45,74,.85) 0%, rgba(15,45,74,.5) 60%, transparent 100%); }
.car-cnt   { position: relative; z-index: 2; max-width: 1200px; margin: 0 auto; padding: 0 32px; width: 100%; }
.car-badge { display: inline-flex; align-items: center; gap: 6px; background: rgba(255,103,0,.25); border: 1px solid rgba(255,103,0,.5); color: #FFA559; padding: 5px 12px; border-radius: 20px; font-size: 13px; font-weight: 700; margin-bottom: 14px; }
.car-hi    { font-size: 18px; color: rgba(255,255,255,.65); margin-bottom: 6px; }
.car-h1    { font-size: 34px; font-weight: 800; color: #fff; line-height: 1.2; margin-bottom: 12px; max-width: 560px; }
.car-p     { font-size: 12px; color: rgba(255,255,255,.8); line-height: 1.7; max-width: 480px; margin-bottom: 22px; }
.car-prev, .car-next { position: absolute; top: 50%; transform: translateY(-50%); z-index: 10; background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.3); color: #fff; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 16px; }
.car-prev:hover, .car-next:hover { background: rgba(255,255,255,.3); }
.car-prev { left: 12px; } .car-next { right: 12px; }
.car-dots  { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); display: flex; gap: 6px; z-index: 10; }
.cdot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.4); cursor: pointer; transition: all .2s; }
.cdot.on { background: #fff; width: 20px; border-radius: 4px; }
.hstats { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin-top: 28px; max-width: 440px; }
.hs     { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.15); border-radius: var(--r); padding: 12px; text-align: center; }
.hs-n   { font-size: 22px; font-weight: 800; color: #FFA559; }
.hs-l   { font-size: 10px; color: rgba(255,255,255,.6); margin-top: 2px; }
.hero-aside { position: absolute; right: 32px; top: 50%; transform: translateY(-50%); z-index: 5; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15); border-radius: var(--rl); padding: 22px; backdrop-filter: blur(8px); width: 260px; }
.ha-t { font-size: 12px; font-weight: 700; color: #fff; margin-bottom: 14px; }
.ql   { display: flex; align-items: center; gap: 10px; padding: 9px 11px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: var(--r); cursor: pointer; margin-bottom: 7px; transition: all .15s; text-decoration: none; }
.ql:last-child { margin-bottom: 0; }
.ql:hover { background: rgba(255,255,255,.14); border-color: rgba(255,103,0,.4); }
.ql-ic { width: 30px; height: 30px; border-radius: 6px; background: rgba(255,103,0,.2); display: flex; align-items: center; justify-content: center; font-size: 13px; color: #FFA559; flex-shrink: 0; }
.ql-t  { font-size: 13px; font-weight: 600; color: #fff; }
.ql-s  { font-size: 10px; color: rgba(255,255,255,.45); }

/* ── INFO STRIP ── */
.istrip { background: var(--g50); border-top: 1px solid var(--g200); border-bottom: 1px solid var(--g200); padding: 22px 16px; }
.istri  { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; }
.is-ic  { width: 40px; height: 40px; border-radius: 8px; background: rgba(255,103,0,.1); display: flex; align-items: center; justify-content: center; font-size: 18px; color: var(--sf); flex-shrink: 0; }

/* ── SECTIONS ── */
.sec    { padding: 52px 16px; max-width: 1200px; margin: 0 auto; }
.secbg  { background: #fff; }
.sec-hdr { text-align: center; margin-bottom: 6px; }
.sec-hdr h2 { font-size: 26px; font-weight: 800; color: var(--navy); margin-bottom: 8px; }
.sec-hdr p  { font-size: 12px; color: var(--g500); max-width: 520px; margin: 0 auto; }
.sbadge { display: inline-block; background: rgba(255,103,0,.12); color: var(--sf); font-size: 13px; font-weight: 700; padding: 4px 12px; border-radius: 10px; margin-bottom: 10px; letter-spacing: .5px; text-transform: uppercase; }

/* ── PROCESS STEPS ── */
.pgrid { display: grid; grid-template-columns: repeat(4,1fr); gap: 18px; counter-reset: step; }
.pc    { background: #fff; border: 1px solid var(--g200); border-radius: var(--rl); padding: 18px; position: relative; counter-increment: step; }
.pc::before { content: counter(step); position: absolute; top: -12px; left: 18px; width: 26px; height: 26px; background: var(--sf); color: #fff; border-radius: 50%; font-size: 13px; font-weight: 800; display: flex; align-items: center; justify-content: center; line-height: 26px; text-align: center; }
.pc-ic { width: 44px; height: 44px; border-radius: 10px; background: var(--g100); display: flex; align-items: center; justify-content: center; font-size: 20px; margin-bottom: 10px; color: var(--sf); }
.pc-t  { font-size: 12px; font-weight: 700; color: var(--navy); margin-bottom: 5px; }
.pc-d  { font-size: 13px; color: var(--g500); line-height: 1.6; }

/* ── ACTIVITY CARDS ── */
.agrid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.acard { background: #fff; border: 1px solid var(--g200); border-radius: var(--rl); overflow: hidden; transition: box-shadow .2s; }
.acard:hover { box-shadow: 0 4px 20px rgba(0,0,0,.12); }
.aimg { height: 160px; position: relative; overflow: hidden; }
.aimg img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.acard:hover .aimg img { transform: scale(1.05); }
.aimg-ov  { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.6), transparent); }
.acat-pill { position: absolute; top: 10px; left: 10px; background: rgba(255,255,255,.9); padding: 3px 10px; border-radius: 10px; font-size: 13px; font-weight: 700; }

/* ── VERIFY BOX ── */
.vbox  { background: linear-gradient(135deg, var(--navy), var(--navy2)); border-radius: var(--rl); padding: 36px; color: #fff; text-align: center; }
.vbox h3 { font-size: 20px; font-weight: 800; margin-bottom: 8px; }
.vbox p  { font-size: 12px; color: rgba(255,255,255,.7); margin-bottom: 22px; }
.vinrow  { display: flex; gap: 8px; max-width: 460px; margin: 0 auto; }
.vinrow input { flex: 1; padding: 11px 14px; border-radius: var(--r); border: none; font-size: 12px; outline: none; }

/* ── DOWNLOADS ── */
.dgrid { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; }
.ddl   { background: #fff; border: 1px solid var(--g200); border-radius: var(--rl); padding: 14px; display: flex; align-items: center; gap: 12px; }

/* ── SITES ── */
.scard     { background: #fff; border: 1px solid var(--g200); border-radius: var(--rl); padding: 16px; margin-bottom: 12px; transition: box-shadow .15s; margin-top:8px }
.scard:hover { box-shadow: 0 4px 16px rgba(15,45,74,.08); }
.scard-hdr { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }
.scard-ic  { width: 52px; height: 52px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0; box-shadow: inset 0 0 0 1px rgba(15,45,74,.06); }
.smeta     { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin-top: 10px; }
.sm-k { font-size: 13px; color: var(--g500); }
.sm-v { font-size: 13px; font-weight: 700; color: var(--navy); margin-top: 1px; }

/* Category colour pairs, shared by badges and icon tiles across Sites and Activities */
.cat-water { background: #EEF4FF; color: #1565C0; }
.cat-air   { background: #E8EAF6; color: #283593; }
.cat-land  { background: #E8F5E9; color: #1B5E20; }

/* ── CONTACT ── */
.cgrid  { display: grid; grid-template-columns: 1fr 1.4fr; gap: 24px; }
.ci-box { background: var(--navy); color: #fff; border-radius: var(--rl); padding: 28px; }
.ci-item { display: flex; gap: 12px; margin-bottom: 20px; }
.ci-ic  { width: 36px; height: 36px; background: rgba(255,103,0,.2); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 15px; color: var(--sf); flex-shrink: 0; margin-top: 2px; }

/* ── FAQ ── */
.faq    { background: #fff; border: 1px solid var(--g200); border-radius: var(--r); overflow: hidden; margin-bottom: 8px; }
.faq summary { padding: 12px 14px; font-size: 12px; font-weight: 700; color: var(--navy); display: flex; align-items: center; gap: 10px; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq-ic { margin-left: auto; color: var(--g500); font-size: 13px; transition: transform .2s; }
details[open] .faq-ic { transform: rotate(180deg); }
.faq-a  { padding: 10px 14px 12px 38px; font-size: 13px; color: var(--g500); line-height: 1.7; border-top: 1px solid var(--g100); }

/* ── FOOTER ── */
.footer { background: var(--navy); color: #fff; padding: 36px 16px 16px; }
.fgrid  { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 32px; margin-bottom: 24px; }
.fgt    { font-size: 13px; font-weight: 700; color: rgba(255,255,255,.9); margin-bottom: 12px; text-transform: uppercase; letter-spacing: .5px; }
.fgl    { display: block; font-size: 13px; color: rgba(255,255,255,.5); margin-bottom: 7px; text-decoration: none; } .fgl:hover { color: #fff; }
.fbot   { border-top: 1px solid rgba(255,255,255,.1); padding-top: 14px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; font-size: 10px; color: rgba(255,255,255,.35); }

/* ── FORMS ── */
input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=hidden]),
select, textarea {
  width: 100%; padding: 10px 12px; border: 1.5px solid var(--g300); border-radius: var(--r);
  font-size: 13px; color: var(--g700); background: #fff; outline: none;
  transition: border .15s; font-family: inherit;
}
input:focus, select:focus, textarea:focus { border-color: var(--sf); }
textarea { min-height: 72px; resize: vertical; }
.fl    { font-size: 12px; color: var(--g500); margin-bottom: 4px; display: block; font-weight: 600; }
.fl .req { color: var(--er); }
.fl .opt { font-weight: 400; color: var(--g500); }
.fhint { font-size: 13px; color: var(--g500); margin-top: 3px; }
.fsec  { font-size: 13px; font-weight: 700; color: var(--navy); margin: 16px 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--g200); display: flex; align-items: center; gap: 6px; }
.fg1   { margin-bottom: 8px; }
.fg2   { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.fg3   { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
.fg-full { grid-column: 1 / -1; }
.upload-area { border: 2px dashed var(--g300); border-radius: var(--r); padding: 22px; text-align: center; cursor: pointer; background: var(--g50); transition: border .15s; position: relative; overflow: hidden; }
.upload-area:hover { border-color: var(--sf); background: #FFF8F3; }
.upload-area input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.upload-icon { font-size: 24px; color: var(--g300); margin-bottom: 6px; }
.upload-hint { font-size: 11px; color: var(--g500); }
.upload-selected { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 11px; color: var(--navy); font-weight: 600; }
.upload-clear { position: relative; z-index: 1; border: none; background: none; color: var(--g500); font-size: 14px; line-height: 1; cursor: pointer; padding: 0 2px; }
.upload-clear:hover { color: var(--sf); }

/* ── CARDS / TABLES (portal) ── */
/* display:block is deliberate. Bootstrap ships its own .card as a flex column, and it loads before
   this file, so without this every card here became a flex container with stretched children —
   which is why a plain button inside a card ran the full width. The template these styles came
   from has no Bootstrap, so block is the layout they were drawn against. */
.card {
    display: block;
    background: rgba(255, 255, 255, 0.68) !important;
    border: 1px solid rgba(0, 60, 120, 0.09);
    box-shadow: 0 2px 8px rgba(15, 40, 70, 0.035);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border-radius: 2px;
    border: 1px solid #e5e7eb;
    padding: 16px;
    margin-bottom: 5px;
    min-width: 0;
}
.card.card-form { max-width: 840px; }
.form-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 14px; }
.form-actions-between { display: flex; gap: 10px; justify-content: space-between; margin-top: 14px; }
.form-actions-start { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.td-actions { display: flex; gap: 6px; flex-wrap: nowrap; align-items: center; justify-content: flex-end; }
/* Equal columns for Download / Open|Renewal|Examine / Suspend (and the Suspended placeholder).
   View Application stays its own width; wrapping was stacking that button above the others. */
.td-actions .act-slot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 6.5rem;
    min-height: 32px;
    flex-shrink: 0;
}
.td-actions .act-slot .btn { width: 100%; justify-content: center; }
.ct    { font-size: 14px; font-weight: 700; color: var(--navy); margin-bottom: 12px; display: flex; align-items: center; gap: 6px; }
.fai { color: var(--sf); }
.two   { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; align-items: start; }
.two > * { min-width: 0; }
.three { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
.ts    { overflow-x: auto;}
table  { width: 100%; border-collapse: collapse; font-size: 12px; }
th     { text-align: left; padding: 14px 14px; color: var(--g700); font-weight: 700; border-bottom: 1px solid var(--g200); background: var(--g50); font-size: 12px; white-space: nowrap; }
td     { padding: 11px 14px; border-bottom: 1px solid var(--g200); color: var(--g700); vertical-align: middle; font-size: 12px; }
tr:last-child td { border-bottom: none; }
tr:hover td { background: var(--g50); }

/* ── BADGES ── */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 7px 10px;
    border-radius: 18px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
}
.b-draft { background: #f5f5f5;  color: #616161; }
.b-sub   { background: #EEF4FF;  color: #1565C0; }
.b-up    { background: #E3F2FD;  color: #0277BD; }
.b-q {
    background: #FFF8E1;
    color: #ef7305;
    border: 1px solid;
}
.b-resp  { background: #F1F8E9;  color: #558B2F; }
.b-infra { background: #EDE7F6;  color: #4527A0; }
.b-fwd   { background: #E8EAF6;  color: #283593; }
.b-dm    { background: #FFF3E0;  color: #E65100; }
.b-prov  { background: #F3E5F5;  color: #6A1B9A; }
.b-ins   { background: #FBE9E7;  color: #BF360C; }
.b-pass  { background: #E8F5E9;  color: #1B5E20; }
.b-app {
    background: #E8F5E9;
    color: #1B5E20;
    border: 1px solid #b5f6aa;
}
.b-rej {
    background: #FFEBEE;
    color: #B71C1C;
    border: 1px solid #f7c4c4;
}
.b-iss   { background: #E0F2F1;  color: #004D40; }
.b-susp  { background: #FFF3E0;  color: #E65100; }
.b-exp   { background: #FFF3E0;  color: #E65100; }
.b-wn    { background: #FFF3E0;  color: #E65100; }
.b-pay   { background: #F3E5F5;  color: #6A1B9A; }
.b-water {
    background: #e9eeff;
    color: #0063d4;
    border: 1px solid #d3e5f9;
}
.b-air   { background: #E8EAF6;  color: #283593; }
.b-land {
    background: #dbffeb;
    color: #018a30;
    border: 1px solid #a9ffc7;
}

/* ── ALERT / REMARK ── */
.alert {
    padding: 12px 15px;
    border-radius: var(--r);
    font-size: 13px;
    margin-bottom: 5px !important;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
input[type="checkbox"] {
    width: 18px !important;
    height: 18px !important;
    display:inline-flex;
}
.a-w  { background: #FFF3E0; border: 1px solid #FFE0B2; color: var(--wn); }
.a-i  { background: #E3F2FD; border: 1px solid #BBDEFB; color: var(--inf); }
.a-ok { background: #E8F5E9; border: 1px solid #C8E6C9; color: var(--ok); }
.a-e  { background: #FFEBEE; border: 1px solid #FFCDD2; color: var(--er); }
.alert-link { color: inherit; font-weight: 700; }
.remark { background: #FFF8F3; border: 1px solid #FFD5B0; border-radius: var(--r); padding: 10px 12px; font-size: 13px; color: #8B4513; margin-top: 8px; line-height: 1.5; }
.btn {font-size:.85rem;}
/* ── STAT GRID ── */
.sg { display: grid; grid-template-columns: repeat(4,1fr); gap: 5px; margin-bottom: 5px; }
.sc {
    background: rgba(255, 255, 255, 0.78) !important;
    border-radius: 2px;
    border: 1px solid #e5e7eb;
    padding: 16px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}
.sc-body { min-width: 0; }
.sl { font-size: 12px; color: var(--g500); margin-bottom: 5px; }
.sv { font-size: 24px; font-weight: 800; color: var(--g900); }
.ss { font-size: 13px; color: var(--g500); margin-top: 2px; }
/* The tile's icon chip. One modifier class per accent colour the dashboard actually uses — the
   portal's existing status palette — rather than an inline style per tile. */
.sc-ic {
    width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center; font-size: 16px;
}
.sc-ic.sc-accent { color: var(--sf); background: rgba(255,103,0,.12); }
.sc-ic.sc-info   { color: var(--inf); background: rgba(21,101,192,.12); }
.sc-ic.sc-ok     { color: var(--ok);  background: rgba(26,107,46,.12); }
.sc-ic.sc-warn   { color: var(--wn);  background: rgba(230,81,0,.12); }
.sc-ic.sc-danger { color: var(--er);  background: rgba(198,40,40,.12); }

/* ── DASHBOARD CHARTS ── */
/* Fixed height, not aspect-ratio: a canvas with no bound grows unbounded inside a CSS grid cell,
   taking the chart.js default aspect ratio with it — Chart.js needs maintainAspectRatio:false and
   this wrapper together, one without the other still misbehaves. */
.chart-box { position: relative; height: 260px; }
.mb10 { margin-bottom: 10px; }
.mb16 { margin-bottom: 16px; }
.list-link { font-size: 11px; color: var(--sf); display: block; margin-top: 8px; text-decoration: none; }
.list-link:hover { text-decoration: underline; }
.card-note { padding: 14px 0; text-align: center; font-size: 12px; color: var(--g500); }

/* ── PILLS / TABS ── */
.pills   { display: flex; gap: 4px; flex-wrap: wrap; }
.pill    { padding: 6px 14px; border: 1px solid var(--g300); border-radius: 18px; font-size: 12px; cursor: pointer; color: var(--g500); background: #fff; text-decoration: none; transition: all .15s; }
.pill.on, .pill:hover { background: var(--sf); color: #fff; border-color: var(--sf); }
.tab-bar { display: flex; border-bottom: 1px solid var(--g200); margin-bottom: 18px; }
.tab     { padding: 10px 17px; font-size: 12px; font-weight: 600; color: var(--g500); cursor: pointer; border-bottom: 2.5px solid transparent; transition: all .15s; text-decoration: none; }
.tab.on  { color: var(--sf); border-bottom-color: var(--sf); }

/* ── BUTTON ROWS ── */
.btn-row { display: flex; gap: 8px; flex-wrap: wrap; }
.btn-row .btn { flex: 1 1 auto; justify-content: center; min-width: 0; }
/* Same gap/wrap as .btn-row but buttons keep their natural width instead of stretching —
   for secondary link pairs (e.g. View Application + Download) rather than stacked primary actions. */
.btn-row-compact { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
@media (max-width: 768px) {
  .btn-row { flex-direction: column; }
  .btn-row .btn { width: 100%; flex: none; }
}

/* ── PORTAL LAYOUT ── */
.portal { display: flex; height: 100vh; overflow: hidden; max-width: 100vw; }
.sb {
    width: 238px;
    background: radial-gradient(circle at 15% 20%, rgba(255, 183, 51, 0.05), transparent 25%), radial-gradient(circle at 85% 80%, rgba(19, 136, 8, 0.05), transparent 25%), #f8fafc !important;
    border-right: 1px solid rgba(0, 60, 120, 0.10);
    border-right: 1px solid var(--g200);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    overflow: hidden;
    transition: width .2s;
}
    .sb::before {
        content: "☸";
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 420px;
        font-family: "Segoe UI Symbol", sans-serif;
        color: rgba(0, 51, 102, 0.025);
        pointer-events: none;
        z-index: 0;
    }
.sb-brand { padding: 14px; border-bottom: 1px solid var(--g200); display: flex; align-items: center; gap: 10px; height: 56px; }
.sb-embl  { width: 40px; height: 40px; overflow: hidden; background: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sb-embl img { width: 100%; height: 100%; object-fit: contain; }
.sb-bt .t1 { color: var(--navy); font-size: 14px; font-weight: 600; white-space: nowrap; }
.sb-bt .t2 { color: var(--g500); font-size: 10px; white-space: nowrap; }
.sb-nav { flex: 1; overflow-y: auto; padding: 6px 0; scrollbar-width: thin; scrollbar-color: transparent transparent; }
.sb-nav:hover { scrollbar-color: var(--g300) transparent; }
.sb-nav::-webkit-scrollbar { width: 4px; }
.sb-nav::-webkit-scrollbar-track { background: transparent; }
.sb-nav::-webkit-scrollbar-thumb { background: transparent; border-radius: 4px; }
.sb-nav:hover::-webkit-scrollbar-thumb { background: var(--g300); }
.sb-sec { padding: 10px 14px 2px; color: var(--g500); font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .8px; white-space: nowrap; overflow: hidden; }
.ni     { display: flex; align-items: center; gap: 8px; padding: 9px 12px; color: var(--g700); font-size: 12px; font-weight: 500; border-left: 3px solid transparent; transition: all .15s; white-space: nowrap; overflow: hidden; text-decoration: none; }
.ni:hover { background: var(--g50); color: var(--navy); }
.ni.on    { background: rgba(255,103,0,.1); border-left-color: var(--sf); color: var(--sf2); font-weight: 700; }
/* A screen whose feature has not been built. It is a <span>, so it cannot be clicked; this only
   makes that visible instead of leaving it looking like a link that does nothing. */
.ni.off   { color: var(--g300); cursor: default; }
.ni.off:hover { background: none; color: var(--g300); }
.ni.off::after { content: "soon"; margin-left: auto; font-size: 9px; letter-spacing: .5px; text-transform: uppercase; color: var(--g300); border: 1px solid var(--g200); border-radius: 8px; padding: 1px 5px; }
.sb.col .ni.off::after { display: none; }
.ni .fai  { font-size: 14px; width: 16px; text-align: center; flex-shrink: 0; }
.nb       { margin-left: auto; background: var(--sf); color: #fff; font-size: 13px; padding: 2px 6px; border-radius: 8px; flex-shrink: 0; }
.sb-foot  { padding: 11px 13px; border-top: 1px solid var(--g200); }
.urow     { display: flex; align-items: center; gap: 8px; }
.uav      { width: 30px; height: 30px; border-radius: 50%; background: var(--sf); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 10px; font-weight: 700; flex-shrink: 0; }
.un       { color: var(--navy); font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ur       { color: var(--g500); font-size: 10px; }
.sb-logout-form { display: inline; flex-shrink: 0; }
.sb-logout { background: none; border: none; padding: 0; cursor: pointer; color: var(--g500); font-size: 13px; }
.sb-logout:hover { color: var(--er); }
.pmain    { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-width: 0; }
.topbar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 18px;
    height: 56px;
    background: linear-gradient( 90deg, rgba(255,255,255,0.98), rgba(248,251,254,0.94) ) !important;
    border-bottom: 1px solid rgba(0, 60, 120, 0.10);
    /* subtle glass effect */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--g200);
    flex-shrink: 0;
    overflow: hidden;
}
.tb-t     { font-size: 16px; font-weight: 700; color: var(--navy); flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-src   { display: flex; align-items: center; gap: 6px; background: var(--g50); border: 1px solid var(--g200); border-radius: var(--r); padding: 8px 13px; font-size: 13px; color: var(--g500); width: 220px; }
.tb-gr    { font-size: 12px; color: var(--g500); white-space: nowrap; }
.ca {
    flex: 1;
    overflow-y: auto;
    padding: 5px;
    background: radial-gradient(circle at 15% 20%, rgba(255, 183, 51, 0.05), transparent 25%), radial-gradient(circle at 85% 80%, rgba(19, 136, 8, 0.10), transparent 25%), #f8fafc !important;
}
.ca > *   { margin-left: auto; margin-right: auto; }

/* ── MISC PORTAL ── */
.rv  { background: var(--g50); border-radius: var(--r); padding: 12px 14px; margin-bottom: 10px; }
.rr  { display: flex; gap: 8px; margin-bottom: 6px; font-size: 13px; }
.rr:last-child { margin-bottom: 0; }
.rk  { color: var(--g500); min-width: 130px; flex-shrink: 0; }
.rv-v { color: var(--g900); font-weight: 700; }
.cert-card { border: 2.5px solid var(--sf); border-radius: 12px; padding: 24px; background: #fff; position: relative; overflow: hidden; max-width: 600px; margin: 0 auto; }
.cert-wm   { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 120px; font-weight: 900; color: var(--gr); opacity: .025; user-select: none; pointer-events: none; }
.cf-l { color: var(--g500); font-size: 10px; margin-bottom: 2px; }
.cf-v { font-weight: 700; color: var(--navy); font-size: 12px; }
.dr {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 8px;
    border: 1px solid #dedee2;
    background: #f9f9f9;
    border-radius: 8px;
    margin-bottom: 4px;
}
.dr:last-child { border-bottom: none; }
/* Query thread: officer queries and operator responses get distinct backgrounds so the reader can
   tell who's speaking without reading the author line. */
.dr-officer {
    background: #f9f9f9;
    border-color: #D6E4FA;
}
    .dr-officer .di {
        background: #f9e7ea;
    }
.dr-op {
    background: #fff;
    border-color: #e2e2e1;
}
    .dr-op .di {
        background: #f9e7ea;
    }
.di   { width: 28px; height: 28px; background: #EEF4FF; border-radius: 6px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
/* The Annexure II row is a grid, not a flex line: three columns when the operator is declaring
   (item, response) and four when the inspection agency is filling it in (item, response, comment).
   Columns matter here — with 26 statutory items the inspector needs to scan straight down the
   response column to see what is still unanswered, which a flex row with varying heights prevents. */
.chkr    { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 6px 14px; align-items: start; padding: 9px 12px; border-bottom: 1px solid #f5f6f8; }
.chkr-c  { grid-template-columns: 22px minmax(0, 1fr) auto 230px; }
.chkc    { min-width: 0; }
.chkc textarea { width: 100%; min-height: 40px; font-size: 12px; padding: 6px 8px; }
.chkr:last-child { border-bottom: none; }
.chkn    { width: 22px; height: 22px; background: var(--navy); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; flex-shrink: 0; margin-top: 1px; }
.chkl    { flex: 1; color: var(--g700); font-size: 12px; }
.rg      { display: flex; gap: 8px; flex-wrap: wrap; }
.chkr .rg { padding-top: 1px; }
.ro      { display: flex !important; align-items: center; gap: 4px; font-size: 13px; color: var(--g700); cursor: pointer; }
.ro input { width: 13px; height: 13px; accent-color: var(--sf); }
.br   { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid #f5f6f8; }
.br:last-child { border-bottom: none; }
.brl  { min-width: 130px; color: var(--g700); font-size: 13px; }
.brw  { flex: 1; height: 5px; background: var(--g100); border-radius: 3px; overflow: hidden; }
.brf  { height: 100%; border-radius: 3px; }
.brf-accent  { background: var(--sf); }
.brf-neutral { background: var(--g300); }
.brf-info    { background: var(--inf); }
.brf-warn    { background: var(--wn); }
.brf-ok      { background: var(--ok); }
.brf-purple  { background: #9C27B0; }
.brf-teal    { background: #00897B; }
.brf-indigo  { background: #5C6BC0; }
.brf-danger  { background: var(--er); }
.brn  { min-width: 28px; text-align: right; color: var(--navy); font-weight: 700; font-size: 12px; }
.pipe { display: flex; flex-direction: column; gap: 5px; max-height: 420px; overflow-y: auto; }
.pi   { display: flex; align-items: center; gap: 9px; padding: 8px 11px; border: 1px solid var(--g200); border-radius: var(--r); background: #fff; }
.pi-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.pi.done .pi-dot { background: var(--ok); }
.pi.curr { border-color: var(--sf); background: #FFF8F3; }
.pi.curr .pi-dot { background: var(--sf); }
.pi.todo .pi-dot { background: var(--g300); }
.pi-l { flex: 1; color: var(--g700); font-size: 12px; }
.pi.curr .pi-l { color: var(--navy); font-weight: 700; }
.pi.todo .pi-l { color: #bbb; }
.pi-d { font-size: 13px; color: #bbb; white-space: nowrap; }
.otp-row { display: flex; gap: 10px; justify-content: center; margin: 16px 0; }
.otp-box { width: 48px; height: 52px; text-align: center; font-size: 20px; font-weight: 700; border: 1.5px solid var(--g300); border-radius: var(--r); outline: none; color: var(--navy); }
.otp-box:focus { border-color: var(--sf); }
.steps   { display: flex; align-items: center; margin-bottom: 18px; flex-wrap: wrap; gap: 4px; }
.step    { display: flex; align-items: center; gap: 5px; }
.sn      { width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; flex-shrink: 0; }
.step.done .sn { background: var(--ok);  color: #fff; }
.step.curr .sn { background: var(--sf);  color: #fff; }
.step.todo .sn { background: var(--g200); color: var(--g500); }
.sl2 { font-size: 13px; }
.step.done .sl2 { color: var(--g500); }
.step.curr .sl2 { color: var(--navy); font-weight: 700; }
.step.todo .sl2 { color: #ccc; }
.sline  { flex: 1; height: 1px; background: var(--g200); margin: 0 4px; min-width: 8px; }
.pcat   { background: #fff; border: 1.5px solid var(--g200); border-radius: var(--rl); padding: 14px; cursor: pointer; transition: all .15s; text-align: center; }
.pcat:hover, .pcat.sel { border-color: var(--sf); background: #FFF8F3; }
.pcat-ic { font-size: 22px; color: var(--sf); margin-bottom: 6px; }
.pcat-t  { font-size: 13px; font-weight: 700; color: var(--navy); }
.pcgrid  { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin-bottom: 16px; }

/* ── SIDEBAR ROLE SWITCHER ── */
.sb-role { padding: 9px 12px; border-bottom: 1px solid var(--g200); }
.sb-rl   { color: var(--g500); font-size: 10px; text-transform: uppercase; letter-spacing: .8px; margin-bottom: 4px; }
.sb-rsel { width: 100%; background: var(--g50); border: 1px solid var(--g300); color: var(--navy); font-size: 13px; padding: 6px 8px; border-radius: 6px; cursor: pointer; outline: none; }
.sb-rsel option { background: #fff; }
.sb.col  { width: 54px; }
.sb.col .sb-bt, .sb.col .sb-role, .sb.col .sb-sec, .sb.col .nb, .sb.col .un, .sb.col .ur { display: none; }
.sb.col .sb-brand { justify-content: center; padding: 14px 8px; }
.sb.col .ni { padding: 11px 0; justify-content: center; gap: 0; border-left: none; }
.sb.col .ni.on { border-left: none; background: rgba(255,103,0,.2); border-radius: 0; }
.sb.col .ni .fai { width: 18px; font-size: 16px; }
.sb.col .sb-foot { padding: 10px 0; display: flex; justify-content: center; }
.sb.col .urow { justify-content: center; }
.sb.col .urow a { display: none; }
.tb-mb   { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; cursor: pointer; border-radius: 6px; color: var(--g700); font-size: 16px; flex-shrink: 0; }
.tb-mb:hover { background: var(--g100); }

/* ── RESPONSIVE ── */
@media (max-width: 1024px) {
  .hero-aside { display: none; }
  .pgrid { grid-template-columns: repeat(2,1fr); }
  .agrid { grid-template-columns: repeat(2,1fr); }
  .fgrid { grid-template-columns: 1fr 1fr; }
  .istri { grid-template-columns: 1fr 1fr; }
  .sg    { grid-template-columns: repeat(2,1fr); }
  .cgrid { grid-template-columns: 1fr; }
  .dgrid { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 768px) {
  /* Govt header: title and phone number share one row instead of the title pushing the
     phone below it. The title itself may wrap onto two lines — each clamped and ellipsized
     — while the phone number stays pinned to the right of those two lines. */
  .ghi    { flex-wrap: nowrap; }
  .gh-l   { min-width: 0; }
  .gh-t1  { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
  .gh-t2  { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .car    { height: 460px; }
  .car-hi { display: none; }
  .car-h1 { font-size: 22px; }
  .car-p  { font-size: 12px; -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
  .hstats { grid-template-columns: repeat(3,1fr); margin-top: 18px; max-width: 100%; }
  .hs     { padding: 8px 6px; }
  .hs-n   { font-size: 16px; }
  .hs-l   { font-size: 9px; }
  .nlinks { display: none; }
  /* Sidebar slides in from left on mobile */
  .sb     { position: fixed; left: -240px; top: 0; bottom: 0; z-index: 100; transition: left .25s; width: 238px !important; }
  .sb.mob { left: 0; }
  /* Stat grids */
  .sg     { grid-template-columns: 1fr 1fr !important; }
  /* Content grids */
  .two    { grid-template-columns: 1fr; }
  .three  { grid-template-columns: 1fr; }
  /*.fg2    { grid-template-columns: 1fr; }*/
  .fg3    { grid-template-columns: 1fr; }
  .agrid  { grid-template-columns: 1fr; }
  .pgrid  { grid-template-columns: 1fr; }
  .pcgrid { grid-template-columns: repeat(2,1fr); }
  .istri  { grid-template-columns: 1fr; }
  /* The template's bar had five stages and hid every label on a phone. The application timeline
     has nine, so hiding them all leaves a row of unlabelled circles. Keep the current stage's
     label — that is the one thing the reader needs. */
  /* Wrap the checklist row-wise on a phone: item, then response, then comment, each full width
     from the number's indent. The inspection form is completed on site (SRS §4.4). */
  .chkr, .chkr-c { grid-template-columns: 22px minmax(0, 1fr); }
  .chkr .rg, .chkr .chkc { grid-column: 2 / -1; }
  .step .sl2 { display: none; }
  .step.curr .sl2 { display: inline; }
  .sline  { min-width: 6px; }
  .dgrid  { grid-template-columns: 1fr; }
  /* Topbar: hide search/greeting, keep hamburger + title + key actions */
  .tb-src, .tb-gr { display: none; }
  .topbar { padding: 0 10px; gap: 8px; }
  .tb-t   { font-size: 14px; }
  /* Table scroll wrapper — constrain scroll to card, not whole page */
  .ts     { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  /* Inline-grid overrides for pages that hardcode grid-template-columns */
  .smeta  { grid-template-columns: 1fr 1fr; }
  /* Key-value rows: allow label to shrink on narrow screens */
  .rk     { min-width: 100px; }
  .rr     { flex-wrap: wrap; }
  /* Cert card full width */
  .cert-card { max-width: 100%; }
  /* Pipe timeline text wrapping */
  .pi-l   { font-size: 13px; }
  /* Pills wrap naturally — already flex-wrap:wrap */
  /* Application selector full width */
  .ca .card select { max-width: 100%; }
  /* Filter rows in audit / reports */
  .fg[style*="min-width"] { min-width: 0 !important; width: 100%; }
}

/* ── Conditional form sections ──
   These were JavaScript show/hide handlers. :has() does the same job declaratively, so the
   markup states the rule and no script has to stay in sync with it. */

/* Correspondence address hides while it matches the registered address. */
form:has(#SameCorrespondenceAddress:checked) #correspondenceAddressGroup { display: none; }

/* "Please specify" appears only for the Others option of SOP Annexure I item 6. */
#applicantTypeOtherGroup { display: none; }
form:has(#ApplicantType option[data-free-text="true"]:checked) #applicantTypeOtherGroup { display: block; }

/* District applies only to the district-scoped roles, DM and Inspector (SRS §2, §7.3). */
#districtGroup { display: none; }
form:has(#Role option[data-district-scoped="true"]:checked) #districtGroup { display: block; }

/* ── Sidebar on mobile ──
   Bootstrap's collapse plugin toggles .show on #sidebar, and _AdminLayout loads both Bootstrap's
   stylesheet and its bundle so .collapse/.collapsing behave as the plugin expects.

   Above the breakpoint the sidebar is permanent, so Bootstrap's `.collapse { display: none }` has
   to be overridden — the same !important override Bootstrap itself uses for
   `.navbar-expand-* .navbar-collapse`. Below it, the plugin is left to do its job and these rules
   only say what "open" looks like.

   The .tb-mb size and hover live further up with the rest of the topbar; only visibility is here. */
@media (min-width: 769px) {
  .portal > .sb.collapse { display: flex !important; }
  .tb-mb, .sb-close { display: none; }
}

@media (max-width: 768px) {
  .portal > .sb.collapse.show {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 100;
    box-shadow: var(--sh);
  }

  .sb-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    margin-left: auto;
    background: none;
    border: none;
    border-radius: 6px;
    color: var(--g500);
    font-size: 16px;
    cursor: pointer;
    flex-shrink: 0;
  }

  .sb-close:hover { background: var(--g100); color: var(--navy); }
}

/* ── APPLICATION LIST AND DETAIL ──
   Replaces the inline styles carried over from the templates on the application list, the detail
   page and the query thread. */
.list-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.ct-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.ct-row .ct { margin-bottom: 0; }
.list-search { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
/* Overrides the global `input { width: 100% }` rule above (its five :not() clauses outweigh this
   class), which otherwise stretches every field here to the full row and wraps the rest below it. */
.list-search input:not([type=hidden]), .list-search select { width: auto !important; }
.list-search input[type="search"] { min-width: 240px; }
.card-flush { padding: 0; }
.card-muted { background: var(--g50); margin-bottom: 12px; }
.ct-inset { padding: 14px 16px 0; }
.table-wide { min-width: 700px; }

/* ── NOTIFICATIONS ── */
.no-list { padding: 4px 16px; display: flex; flex-direction: column; }
.no-time { font-size: 10px; color: var(--g500); white-space: nowrap; }
.no-action-btn { background: none; border: none; padding: 0; font: inherit; cursor: pointer; }
/* A read notification's alert box is left as-is but faded — the All tab otherwise looks identical
   to Unread, with nothing distinguishing what still needs a look. */
.notif-alert.no-read { opacity: .6; }

/* Notification list rows (Areas/Admin/Views/Shared/_NotificationRow.cshtml) reuse .alert/.a-*/
   .alert-link as-is; this is only the one thing they don't already provide — room for the delete
   button and letting the message text take the remaining width. */
.notif-alert-body { flex: 1; min-width: 0; }
.notif-alert-x { background: none; border: none; color: inherit; opacity: .6; font-size: 13px; cursor: pointer; padding: 2px; line-height: 1; }
.notif-alert-x:hover { opacity: 1; }
.td-empty { text-align: center; padding: 24px; color: var(--g500); }
.td-total-label { text-align: right; font-weight: 600; }
.td-total-value { font-weight: 600; }
.td-arn { font-weight: 700; color: var(--navy); }
.td-overdue { color: var(--er); font-weight: 700; }
.detail-text { font-size: 12px; color: var(--g700); white-space: pre-line; margin: 0; }
.detail-strip { display: flex; gap: 20px; flex-wrap: wrap; }
.detail-strip-v { font-weight: 700; color: var(--navy); }
.no-actions { font-size: 12px; color: var(--g500); margin: 0; }
.muted { font-size: 12px; font-weight: 600; color: var(--g500); }
.inline-form { display: inline-block; margin-right: 8px; margin-bottom: 12px; }
.photo-list { display: flex; flex-wrap: wrap; gap: 8px; }
.pager { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 16px; }
.pager-label { font-size: 12px; color: var(--g500); }

/* ── QUERY THREAD ── */
.qt-empty { font-size: 12px; color: var(--g500); }
.qt-author { font-size: 11px; font-weight: 700; color: var(--navy); }
.qt-role { font-weight: 400; color: var(--g500); }
.qt-message { font-size: 11px; color: var(--g700); margin-top: 4px; white-space: pre-line; }
.qt-attach { font-size: 10px; }
.qt-time { font-size: 10px; color: var(--g500); margin-top: 4px; }
.qt-body { flex: 1; }

.verify-card { max-width: 640px; margin: 40px auto; }
.verify-lead, .verify-alt, .verify-meta { font-size: 12px; color: var(--g600); }
.verify-alt { margin-top: 12px; }
.verify-submit { margin-top: 12px; }
.verify-result { margin-top: 20px; }
.verify-meta { margin-top: 8px; }

.renewal-declare { padding: 11px 14px; background: #FFF8F3; border: 1px solid #FFD5B0; border-radius: var(--r); font-size: 11px; margin: 12px 0; }
.renewal-declare label { display: flex; align-items: flex-start; gap: 8px; cursor: pointer; }
.renewal-steps { font-size: 11px; color: var(--g700); line-height: 1.8; }
.renewal-step { display: flex; gap: 8px; margin-bottom: 8px; }
.renewal-amt { text-align: right; font-weight: 700; }
.renewal-total { background: var(--g50); font-weight: 700; }

/* ── ANNEXURE II CHECKLIST ── (row layout lives with .chkr further up) */
.chk-declared { font-size: 11px; color: var(--g500); margin-top: 4px; }
.chk-comment-read { font-size: 11px; color: var(--g700); display: block; }
.chk-response { font-size: 12px; font-weight: 700; color: var(--navy); white-space: nowrap; }

/* ── FEE SUMMARY ── (registration fee in the wizard, licence fee on the detail page) */
.fee-line { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; color: var(--g700); padding: 6px 0; }
.fee-line + .fee-line { border-top: 1px solid var(--g200); }
.fee-amt { font-weight: 700; color: var(--navy); white-space: nowrap; }
.fee-total { font-weight: 700; color: var(--navy); }
.fee-total .fee-amt { font-size: 14px; }

/* The hidden form Razorpay's callback submits — it carries no UI of its own. */
.is-hidden { display: none; }

/* The alert icon is a fixed glyph beside text that may wrap to several lines: without this it
   gets squeezed by the flex row and floats to the vertical middle of the paragraph. */
.alert > i { flex-shrink: 0; width: 14px; text-align: center; align-self: flex-start; margin-top: 2px; }

/* ── PUBLIC VERIFICATION ── */
.card-verify { max-width: 640px; margin: 40px auto; }
.verify-hint { font-size: 12px; color: var(--g600); }
.verify-result { margin-top: 20px; }
.verify-reason { display: block; margin-top: 4px; font-size: 12px; }

/* The secondary call to action on a carousel slide, over the photograph. */
.btn-hero-ghost { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.3); }
.btn-hero-ghost:hover { background: rgba(255,255,255,.2); color: #fff; }

/* ── ROW ACTIONS ── (the small button cluster in the last column of a list) */
.row-actions { display: flex; gap: 4px; }
.row-action-form { display: inline; }
.alert-form-top { margin-bottom: 16px; }
.fhint-error { color: var(--er); }
.btn-grow { flex: 1; justify-content: center; }
.btn-full { width: 100%; justify-content: center; }

/* My Profile — Template/portal/profile.html header and password field. */
.profile-head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--g200); }
.profile-head .badge { margin-top: 4px; }
.uav-lg { width: 54px; height: 54px; font-size: 20px; }
.profile-name { font-size: 15px; font-weight: 700; color: var(--navy); }
.profile-sub { font-size: 11px; color: var(--g500); }
.ct-spaced { margin-top: 12px; }
.pwd-wrap { position: relative; }
.pwd-wrap input { padding-right: 32px; }
.pwd-toggle { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); cursor: pointer; color: var(--g500); font-size: 13px; }
.vbox-note { margin-top: 10px; font-size: 10px; color: rgba(255,255,255,.5); }

/* Auto-submitting payment-return landing pages (ApplicationsController.ConfirmPayment /
   ConfirmLicensePayment) — HDFC SmartGateway's redirect flow, no Razorpay equivalent. */
.payment-confirm-wrap { max-width: 420px; margin: 0 auto; text-align: center; padding-top: 60px; }
.payment-confirm-wrap .card { padding: 32px; }
.payment-confirm-icon { font-size: 28px; color: var(--sf); }
.payment-confirm-title { font-size: 14px; font-weight: 700; color: var(--navy); margin-top: 16px; }
.payment-confirm-sub { font-size: 11px; color: var(--g500); margin-top: 6px; }

/* ── LOGIN — split pane with a locally-drawn SVG illustration ──
   No photograph: the previous single-card layout dropped an Unsplash hero because external
   images cannot load at runtime under CERT-In hosting. An inline SVG has the same problem an
   external image would if it were raster — it doesn't, since it ships in the page. */
.login-wrap { min-height: calc(100vh - 260px); display: flex; align-items: center; justify-content: center; padding: 32px 16px; }
.login-split { display: flex; align-items: center; gap: 40px; width: 100%; max-width: 920px; }
.login-illustration { flex: 0 0 44%; text-align: center; padding: 24px; }
.login-illustration svg { width: 100%; max-width: 320px; height: auto; }
.login-illustration h2 { font-size: 16px; font-weight: 800; color: var(--navy); margin-top: 16px; }
.login-illustration p { font-size: 11px; color: var(--g500); max-width: 260px; margin: 6px auto 0; }
.login-form-col { flex: 1 1 0; max-width: 420px; width: 100%; }
.login-card { padding: 32px; }
.login-card-head { text-align: center; margin-bottom: 22px; }
.login-icon-badge { width: 52px; height: 52px; background: #FFF3E0; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 12px; font-size: 20px; color: var(--sf); }
.login-card-title { font-size: 20px; font-weight: 800; color: var(--navy); }
.login-card-sub { font-size: 11px; color: var(--g500); margin-top: 4px; }
.login-alert-gap { margin-bottom: 14px; }
.login-row-end { display: flex; justify-content: flex-end; align-items: center; margin-bottom: 16px; }
.login-link { font-size: 11px; color: var(--sf); }
.login-footer-links { text-align: center; margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--g200); }
.login-footer-line { font-size: 11px; color: var(--g500); }
.login-footer-line + .login-footer-line { margin-top: 6px; }
.login-footer-line a { color: var(--sf); font-weight: 700; }
.login-cert-note { margin-top: 16px; text-align: center; font-size: 10px; color: var(--g500); }
.login-submit-btn { padding: 12px; font-size: 12px; }

/* ── CONTACT (Home/Contact) ── */
.contact-sec { max-width: 900px; }
.contact-hdr { text-align: left; margin-bottom: 24px; }
.contact-hdr h2 { text-align: left; }
.ci-org { margin-bottom: 20px; }
.ci-org-name { font-size: 12px; font-weight: 700; color: #fff; margin-bottom: 6px; }
.ci-org-address { font-size: 11px; color: rgba(255,255,255,.6); line-height: 1.7; }
.ci-label { font-size: 12px; font-weight: 700; color: #fff; }
.ci-value { font-size: 11px; color: rgba(255,255,255,.6); }
.ci-value a { color: inherit; }

/* ── STATUS / ERROR PAGES (Home/StatusCode, Home/Error) ── */
.status-wrap { max-width: 480px; margin: 0 auto; text-align: center; padding: 60px 16px; }
.status-icon { width: 64px; height: 64px; background: #FFF3E0; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 18px; font-size: 26px; color: var(--sf); }
.status-code { font-size: 12px; font-weight: 700; color: var(--g500); letter-spacing: .5px; text-transform: uppercase; margin-bottom: 6px; }
.status-title { font-size: 20px; font-weight: 800; color: var(--navy); margin-bottom: 10px; }
.status-msg { font-size: 12px; color: var(--g500); line-height: 1.7; margin-bottom: 24px; }
.status-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* ── PRINT (any filtered list screen — SRS §4.7/§11.2: browser print, not a PDF report engine) ── */
@media print {
    @page { size: A4 landscape; margin: 12mm; }
    .sb, .topbar, .list-toolbar, .td-actions, .modal, .sb-foot { display: none !important; }
    .pmain { margin: 0 !important; padding: 0 !important; }
    .card, .ts { box-shadow: none !important; border: 1px solid #ccc !important; }
    table { width: 100% !important; }
}
.status-request-id { margin-top: 20px; font-size: 10px; color: var(--g500); }