/* ==========================================================================
   Admin console
   Brand theme 2 · "Admin Console" (derived — see docs/BRAND.md)
   Slate #1E2530 shell · Royal Blue #006D08 actions · same status colours
   ========================================================================== */

:root{
  --royal:#006D08;
  --royal-dark:#005406;
  --royal-deep:#003D05;
  --royal-tint:#E8F3E9;
  --slate:#1E2530;
  --slate-2:#2A3342;
  --slate-line:#374156;
  --ink:#2F3742;
  --ink-soft:#5A6473;
  --line:#DCE3EC;
  --bg:#F2F5F9;
  --amber:#D97706;
  --amber-tint:#FEF3E2;
  --green:#15803D;
  --green-tint:#E8F6ED;
  --red:#B42318;
  --red-tint:#FDECEA;
  --brand-accent:#006D08;
  --brand-on-dark:#93D79C;   /* readable brand green on the slate shell */
  --radius:12px;
  --radius-sm:8px;
  --shadow-sm:0 1px 2px rgba(16,32,56,.06),0 2px 8px rgba(16,32,56,.06);
  --shadow-md:0 12px 32px rgba(16,32,56,.12);
  --sidebar:260px;
}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.6 "Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,"Helvetica Neue",Arial,sans-serif;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{line-height:1.25;margin:0;font-weight:700;letter-spacing:-.01em}
h1{font-size:1.5rem}
h2{font-size:1.15rem}
h3{font-size:1rem}
p{margin:0 0 1rem}
a{color:var(--royal);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:3px solid var(--amber);outline-offset:2px;border-radius:4px}
.small{font-size:.85rem}
.muted{color:var(--ink-soft)}
.nowrap{white-space:nowrap}
.right{text-align:right}
.mt-0{margin-top:0}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;background:#fff;padding:10px 16px;border-radius:8px;z-index:100;box-shadow:var(--shadow-md)}

/* ------------------------------ shell ------------------------------ */
.shell{display:flex;min-height:100vh}
.sidebar{width:var(--sidebar);flex:none;background:var(--slate);color:#C9D2E0;display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow-y:auto}
.sidebar .brand{display:flex;gap:.7rem;align-items:center;padding:18px 18px 16px;border-bottom:1px solid var(--slate-line)}
.sidebar .brand svg{width:38px;height:38px;flex:none}
.sidebar .brand b{color:#fff;font-size:.9rem;line-height:1.25;display:block}
.sidebar .brand span{font-size:.72rem;color:#8B97AC}
.sidebar nav{padding:14px 10px;flex:1}
.sidebar .navgroup{font-size:.68rem;text-transform:uppercase;letter-spacing:.12em;color:#76839A;padding:.9rem 10px .35rem}
.sidebar nav a{display:flex;align-items:center;gap:.65rem;padding:.6rem .7rem;border-radius:var(--radius-sm);color:#C9D2E0;font-size:.9rem;font-weight:600;margin-bottom:2px}
.sidebar nav a:hover{background:var(--slate-2);color:#fff;text-decoration:none}
.sidebar nav a.is-active{background:var(--royal);color:#fff}
.sidebar nav a svg{width:17px;height:17px;flex:none;opacity:.9}
.sidebar .who{border-top:1px solid var(--slate-line);padding:14px 18px;font-size:.8rem;color:#8B97AC}
.sidebar .who b{color:#fff;display:block;font-size:.87rem}
.sidebar .who .role{color:var(--brand-on-dark);font-weight:700;font-size:.72rem;text-transform:uppercase;letter-spacing:.08em}

.main{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{background:#fff;border-bottom:1px solid var(--line);padding:14px 26px;display:flex;align-items:center;justify-content:space-between;gap:1rem;position:sticky;top:0;z-index:30}
.topbar h1{font-size:1.25rem}
.topbar .crumbs{font-size:.8rem;color:var(--ink-soft);margin-bottom:.15rem}
.topbar .tools{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap}
.content{padding:24px 26px 60px;max-width:1500px;width:100%}
.sidebar-toggle{display:none}
@media (max-width:1000px){
  .sidebar{position:fixed;left:0;top:0;bottom:0;z-index:60;transform:translateX(-100%);transition:transform .2s ease}
  .sidebar.open{transform:none}
  .sidebar-toggle{display:inline-flex}
  .content{padding:18px 16px 60px}
  .topbar{padding:12px 16px}
}

/* ------------------------------ cards ------------------------------ */
.grid{display:grid;gap:16px}
.g-2{grid-template-columns:repeat(2,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-4{grid-template-columns:repeat(4,1fr)}
@media (max-width:1100px){.g-4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:900px){.g-2,.g-3{grid-template-columns:1fr}}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:20px}
.card--pad0{padding:0;overflow:hidden}
.card h2{font-size:1rem;margin-bottom:.6rem}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:16px 20px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.card-head h2{margin:0}
.card-body{padding:20px}

.stat{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;box-shadow:var(--shadow-sm)}
.stat .k{font-size:.74rem;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-soft);font-weight:700}
.stat .v{font-size:1.75rem;font-weight:800;color:var(--royal-deep);font-variant-numeric:tabular-nums;line-height:1.2;margin-top:.2rem}
.stat .sub{font-size:.78rem;color:var(--ink-soft)}
.stat--ok .v{color:var(--green)}
.stat--warn .v{color:var(--amber)}
.stat--bad .v{color:var(--red)}

/* ------------------------------ chips ------------------------------ */
.chip{display:inline-flex;align-items:center;gap:.35rem;font-size:.75rem;font-weight:700;border-radius:999px;padding:.2rem .65rem;white-space:nowrap}
.chip::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.st-pending{background:#EEF1F6;color:#485364}
.st-processing{background:var(--amber-tint);color:var(--amber)}
.st-cleared{background:var(--green-tint);color:var(--green)}
.st-uncleared{background:var(--red-tint);color:var(--red)}
.badge{display:inline-block;font-size:.72rem;border:1px solid var(--line);border-radius:6px;padding:.15rem .5rem;color:var(--ink-soft);background:#fff}
.badge--brand{border-color:var(--brand-accent);color:#0B5A10;background:#F1F8F1}
.badge--info{border-color:#A8CFAB;color:var(--royal-deep);background:var(--royal-tint)}
.badge--danger{border-color:#F3B4AD;color:var(--red);background:var(--red-tint)}

/* ------------------------------ buttons ---------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.6rem 1rem;border-radius:var(--radius-sm);font:inherit;font-size:.88rem;font-weight:700;border:1.5px solid transparent;cursor:pointer;transition:background .15s ease,transform .12s ease}
.btn:hover{text-decoration:none;transform:translateY(-1px)}
.btn--primary{background:var(--royal);color:#fff}
.btn--primary:hover{background:var(--royal-dark)}
.btn--ghost{background:#fff;color:var(--royal);border-color:#BFDCC1}
.btn--ghost:hover{background:var(--royal-tint)}
.btn--muted{background:#EEF1F6;color:var(--ink)}
.btn--muted:hover{background:#E2E7EF}
.btn--danger{background:var(--red);color:#fff}
.btn--danger:hover{background:#8f1c12}
.btn--sm{padding:.4rem .7rem;font-size:.8rem}
.btn--lg{padding:.8rem 1.3rem;font-size:.95rem}
.btn[disabled]{opacity:.55;cursor:not-allowed;transform:none}
.btn-row{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center}

/* ------------------------------ forms ------------------------------ */
.field{margin-bottom:.9rem}
.field label{display:block;font-size:.83rem;font-weight:700;margin-bottom:.3rem}
.field .req{color:var(--red)}
input[type=text],input[type=email],input[type=tel],input[type=date],input[type=password],input[type=number],input[type=search],select,textarea{
  width:100%;padding:.6rem .75rem;border:1.5px solid var(--line);border-radius:var(--radius-sm);font:inherit;font-size:.9rem;background:#fff;color:var(--ink)
}
input:focus,select:focus,textarea:focus{border-color:var(--royal);outline:none;box-shadow:0 0 0 3px rgba(0,109,8,.16)}
textarea{min-height:90px;resize:vertical}
.hint{font-size:.78rem;color:var(--ink-soft);margin:.25rem 0 0}
.field-error{font-size:.78rem;color:var(--red);font-weight:600;margin:.25rem 0 0}
.filters{display:grid;gap:12px;grid-template-columns:repeat(5,minmax(0,1fr));align-items:end}
@media (max-width:1100px){.filters{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.filters{grid-template-columns:1fr}}
.form-2{display:grid;gap:14px;grid-template-columns:repeat(2,1fr)}
@media (max-width:760px){.form-2{grid-template-columns:1fr}}
.inline-form{display:inline}
.checkline{display:flex;gap:.5rem;align-items:center;font-size:.88rem;font-weight:600}
.checkline input{width:17px;height:17px;accent-color:var(--royal)}
.hp{position:absolute!important;left:-9999px!important;height:0;overflow:hidden}

/* ------------------------------ tables ----------------------------- */
.tablewrap{overflow-x:auto}
table.data{border-collapse:collapse;width:100%;font-size:.88rem}
table.data th,table.data td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:top}
table.data thead th{background:#F7FAF7;color:var(--ink-soft);font-size:.72rem;text-transform:uppercase;letter-spacing:.07em;white-space:nowrap;position:sticky;top:0}
table.data tbody tr:hover{background:#FAFCFA}
table.data tr.is-deleted{background:#FFF9F9}
table.data tr.is-deleted td{color:#8B6B67}
table.data td.num,table.data th.num{text-align:right;font-variant-numeric:tabular-nums}
table.data .name{font-weight:700}
table.data .sub{font-size:.78rem;color:var(--ink-soft)}
table.data tr.is-selected{background:var(--royal-tint)}
.sel-col{width:34px;text-align:center}
.sel-col input{width:16px;height:16px;accent-color:var(--royal)}

/* ------------------------------ notices ---------------------------- */
.notice{border:1.5px solid #F0C98A;background:var(--amber-tint);border-radius:var(--radius);padding:14px 16px;display:flex;gap:.9rem;font-size:.9rem;margin-bottom:16px}
.notice .ni{flex:none;width:30px;height:30px;border-radius:8px;background:#fff;color:var(--amber);display:flex;align-items:center;justify-content:center}
.notice p{margin:0;color:#7A4A08}
.notice h3{font-size:.95rem;margin-bottom:.2rem}
.notice--info{border-color:#A8CFAB;background:var(--royal-tint)}
.notice--info .ni{color:var(--royal)}
.notice--info p{color:var(--royal-deep)}
.notice--ok{border-color:#A8DCBC;background:var(--green-tint)}
.notice--ok .ni{color:var(--green)}
.notice--ok p{color:#0F5C2C}
.notice--danger{border-color:#F3B4AD;background:var(--red-tint)}
.notice--danger .ni{color:var(--red)}
.notice--danger p{color:#7A1D13}
.flash-stack{display:grid;gap:10px;margin-bottom:18px}

/* Anything with the hidden attribute is hidden, whatever display it asks for.
   (.notice{display:flex} was overriding [hidden], so the idle warning never hid.) */
[hidden]{display:none!important}

/* ------------------------------ pager ------------------------------ */
.pager{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:14px 18px;flex-wrap:wrap;font-size:.85rem}
.pager-links{display:flex;gap:.3rem;flex-wrap:wrap}
.pager a,.pager .current,.pager .disabled{padding:.35rem .65rem;border:1px solid var(--line);border-radius:6px;background:#fff;color:var(--ink)}
.pager .current{background:var(--royal);border-color:var(--royal);color:#fff;font-weight:700}
.pager .disabled{color:#B9C2CE}
.pager-info{color:var(--ink-soft)}

/* ------------------------------ misc ------------------------------- */
.tabs{display:flex;gap:.4rem;flex-wrap:wrap;margin-bottom:16px}
.tabs a{padding:.45rem .85rem;border:1.5px solid var(--line);border-radius:999px;background:#fff;font-size:.85rem;font-weight:600;color:var(--ink)}
.tabs a.is-active{background:var(--royal);border-color:var(--royal);color:#fff}
.tabs a .n{opacity:.7;font-weight:700}
.dl{display:grid;grid-template-columns:200px 1fr;gap:.5rem 1rem;font-size:.9rem;margin:0}
.dl dt{color:var(--ink-soft);font-weight:600}
.dl dd{margin:0;font-weight:600}
@media (max-width:640px){.dl{grid-template-columns:1fr}.dl dt{margin-top:.5rem}}
.timeline{list-style:none;margin:0;padding:0}
.timeline li{position:relative;padding:0 0 16px 22px;border-left:2px solid var(--line);font-size:.86rem}
.timeline li:last-child{border-left-color:transparent;padding-bottom:0}
.timeline li::before{content:"";position:absolute;left:-7px;top:.35rem;width:12px;height:12px;border-radius:50%;background:#fff;border:2.5px solid var(--royal)}
.timeline .when{color:var(--ink-soft);font-size:.78rem}
.timeline .who{font-weight:700}
.bar{height:8px;border-radius:999px;background:#EEF1F6;overflow:hidden;margin-top:.35rem}
.bar span{display:block;height:100%;background:var(--royal)}
.bar--ok span{background:var(--green)}
.bar--warn span{background:var(--amber)}
.bar--bad span{background:var(--red)}
.actions-cell{display:flex;gap:.4rem;flex-wrap:wrap}
.auth-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(160deg,#004D06,var(--royal) 60%,#00990F);padding:26px}
.auth-card{background:#fff;border-radius:16px;box-shadow:var(--shadow-md);padding:30px;width:100%;max-width:430px}
.auth-card .crest{width:56px;height:56px;margin:0 auto 14px;display:block;object-fit:contain}
.auth-head{text-align:center;margin-bottom:1.3rem}
.auth-head h1{font-size:1.2rem}
.auth-head p{font-size:.86rem;color:var(--ink-soft);margin:.3rem 0 0}
.error-page{max-width:620px;margin:9vh auto;text-align:center;padding:0 22px}
.section-rule{border:0;border-top:1px solid var(--line);margin:18px 0}
@media print{.sidebar,.topbar,.no-print{display:none!important}.shell{display:block}.content{padding:0}}

/* ---- status, made obvious (update 003) ---------------------------------- */
.sbadge{display:inline-flex;align-items:center;gap:.5rem;font-size:1rem;font-weight:800;
  letter-spacing:.03em;text-transform:uppercase;border:2px solid currentColor;border-radius:999px;
  padding:.5rem 1.1rem;line-height:1;white-space:nowrap}
.sbadge-dot{width:11px;height:11px;border-radius:50%;background:currentColor;flex:none}
.sbadge--sm{font-size:.76rem;gap:.38rem;padding:.24rem .68rem;border-width:1.5px;letter-spacing:.02em}
.sbadge--sm .sbadge-dot{width:7px;height:7px}
.status-banner{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;background:#fff;
  border:1px solid var(--line);border-left:7px solid var(--line);border-radius:14px;
  padding:16px 18px;margin:0 0 20px;box-shadow:var(--shadow-sm)}
.status-banner .sb-k{font-size:.74rem;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--ink-soft)}
.status-banner .sb-note{margin:.25rem 0 0;font-size:.92rem;color:var(--ink-soft)}
.status-banner.sb-cleared{border-left-color:var(--green);background:var(--green-tint)}
.status-banner.sb-processing{border-left-color:var(--amber);background:var(--amber-tint)}
.status-banner.sb-pending{border-left-color:#8A94A6;background:#F4F6F9}
.status-banner.sb-uncleared{border-left-color:var(--red);background:var(--red-tint)}
.status-cell{display:flex;flex-direction:column;gap:.25rem;align-items:flex-start}
tr.row-cleared td:first-child{box-shadow:inset 4px 0 0 var(--green)}
tr.row-uncleared td:first-child{box-shadow:inset 4px 0 0 var(--red)}
tr.row-processing td:first-child{box-shadow:inset 4px 0 0 var(--amber)}
tr.row-pending td:first-child{box-shadow:inset 4px 0 0 #8A94A6}
.stat--pending .v{color:#485364}
.g-5{grid-template-columns:repeat(5,1fr)}
@media (max-width:1400px){.g-5{grid-template-columns:repeat(3,1fr)}}
@media (max-width:900px){.g-5{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.g-5{grid-template-columns:repeat(2,1fr);gap:10px}}

/* Compact tiles for narrow screens: they were stacking one per row and pushing
   the rest of the dashboard off the screen. */
@media (max-width:700px){
  .stat{padding:11px 12px}
  .stat .k{font-size:.66rem;letter-spacing:.05em}
  .stat .v{font-size:1.3rem;margin-top:.15rem}
  .stat .sub{font-size:.7rem}
  .stat .bar{margin-top:.25rem}
}

/* ==========================================================================
   Update 007 — the applicant's page: readable details, a pinned action bar,
   and the correction form. Everything here is additive; no existing rule is
   changed, so the rest of the console is untouched.
   ========================================================================== */

/* ----------------------------- pinned action bar -------------------------- */
.actionbar{
  position:sticky;top:var(--topbar-h,84px);z-index:20;
  background:#fff;border:1px solid var(--line);border-left:6px solid var(--royal);
  border-radius:var(--radius);box-shadow:var(--shadow-sm);
  padding:12px 16px;margin-bottom:16px;
}
.actionbar__lead{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.actionbar__lead .ab-name{font-weight:800;font-size:1.02rem;color:var(--ink)}
.ab-chip{
  display:inline-block;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.85rem;font-weight:700;color:var(--royal-deep);
  background:var(--royal-tint);border:1px solid #BFDCC1;border-radius:6px;padding:.1rem .45rem;
}
.actionbar__form{display:flex;align-items:center;gap:.55rem;flex-wrap:wrap;margin-top:10px}
.ab-label{font-size:.8rem;font-weight:700;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.06em}
.ab-select{width:auto;min-width:170px}
.ab-reason{flex:1 1 260px;min-width:180px}
.ab-note{font-size:.85rem;color:var(--ink-soft)}
.ab-note--edit{color:#7A4A08;font-weight:600}
@media (max-width:760px){
  .actionbar{padding:10px 12px}
  .actionbar__form{gap:.45rem}
  .ab-label{display:none}
  .ab-select,.ab-reason{flex:1 1 100%;width:100%}
}

/* --------------------------- readable record page ------------------------- */
.record-page{font-size:1.10rem}
.record-name{font-size:1.58rem;line-height:1.25}
.record-sub{display:flex;align-items:center;gap:.55rem;flex-wrap:wrap;margin:.3rem 0 0;color:var(--ink-soft)}
.record-h{
  font-size:.95rem;text-transform:uppercase;letter-spacing:.09em;color:var(--royal-deep);
  margin:1.6rem 0 .55rem;padding-bottom:.35rem;border-bottom:2px solid var(--royal-tint);
}
.detail{display:grid;grid-template-columns:minmax(155px,220px) 1fr;gap:0;margin:0;font-size:1.08rem}
.detail dt{
  color:#4A5464;font-weight:700;font-size:1.02rem;padding:11px 12px 11px 0;border-bottom:1px solid #EDF1F5;
}
.detail dd{
  margin:0;font-weight:700;font-size:1.20rem;color:#1E2530;padding:11px 0;border-bottom:1px solid #EDF1F5;
  line-height:1.45;
}
.detail dt:last-of-type,.detail dd:last-of-type{border-bottom:none}
.detail .detail-sub{display:block;font-weight:600;font-size:.99rem;color:var(--ink-soft);margin-top:2px}
.detail .license-value{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:1.26rem;letter-spacing:.02em;color:var(--royal-deep);
  background:var(--royal-tint);border-radius:6px;padding:.15rem .45rem;display:inline-block;
}
.detail-line{font-size:1.04rem;color:var(--ink);margin:0}
.badge--lg{font-size:.92rem;padding:.3rem .66rem;border-radius:7px;font-weight:700}
@media (max-width:640px){
  .detail{grid-template-columns:1fr;font-size:1.06rem}
  .detail dt{padding-bottom:0;border-bottom:none;font-size:.82rem;text-transform:uppercase;letter-spacing:.06em}
  .detail dd{padding-top:2px}
}

/* -------------------- form pieces the console was missing ----------------- */
.form-grid{display:grid;gap:14px;grid-template-columns:repeat(2,1fr)}
.form-grid--3{grid-template-columns:repeat(3,1fr)}
.span-2{grid-column:1 / -1}
@media (max-width:900px){.form-grid--3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:700px){.form-grid,.form-grid--3{grid-template-columns:1fr}}
.fieldset-legend{display:block;font-size:.83rem;font-weight:700;margin-bottom:.3rem}
.check-grid{display:grid;gap:8px;grid-template-columns:repeat(3,1fr);margin-top:.35rem}
.check-grid--dense{grid-template-columns:repeat(4,1fr)}
.check{
  display:flex;gap:.55rem;align-items:flex-start;border:1.5px solid var(--line);
  border-radius:var(--radius-sm);padding:.5rem .65rem;font-size:.85rem;cursor:pointer;background:#fff;
}
.check:hover{border-color:#BFDCC1;background:#FBFDFB}
.check input{margin:.15rem 0 0;flex:none;width:17px;height:17px;accent-color:var(--royal)}
.check span{font-weight:600}
@media (max-width:1100px){.check-grid--dense{grid-template-columns:repeat(3,1fr)}}
@media (max-width:900px){.check-grid,.check-grid--dense{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.check-grid,.check-grid--dense{grid-template-columns:1fr}}
.counter{font-size:.78rem;color:var(--ink-soft)}
.is-error{border-color:var(--red)!important;background:#FFFCFC}
.error-summary{border:1.5px solid #F3B4AD;background:var(--red-tint);border-radius:var(--radius);padding:16px 20px;margin-bottom:18px}
.error-summary h3{color:var(--red);font-size:1rem;margin-bottom:.4rem}
.error-summary ul{margin:0;padding-left:1.2rem;font-size:.94rem}

/* ==========================================================================
   Update 008 — the applicant's page laid out for a wide screen, a landscape
   print sheet, and the small pieces the queue needs for its row actions.
   Additive: no rule above is changed.
   ========================================================================== */

.record-wrap{width:100%}

/* ------------------------------- the wide grid ---------------------------- */
.record-grid{
  display:grid;
  gap:16px;
  align-items:start;
  grid-template-columns:minmax(0,1.5fr) minmax(330px,1fr) minmax(310px,.92fr);
}
/* without the history column (update 009 — nursing officer) the record is two columns */
.record-grid--two{grid-template-columns:minmax(0,1.5fr) minmax(330px,1fr)}
.record-col--details{grid-column:1 / 2}
.detail-inline{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin:0}
.record-col--side{display:grid;gap:16px}
.record-col--history{grid-column:3 / 4}
@media (max-width:1400px){
  .record-grid{grid-template-columns:minmax(0,1.35fr) minmax(320px,1fr)}
  .record-col--history{grid-column:1 / -1}
}
@media (max-width:980px){
  .record-grid{grid-template-columns:1fr}
  .record-col--history{grid-column:auto}
}

/* ---------------------------- the licence strip --------------------------- */
.licence-strip{
  display:flex;gap:18px;align-items:center;justify-content:space-between;flex-wrap:wrap;
  background:var(--royal-tint);border:1px solid #BFDCC1;border-radius:10px;padding:12px 16px;
}
.licence-strip__main{display:flex;flex-direction:column;gap:2px;min-width:0}
.licence-strip__expiry{display:flex;flex-direction:column;gap:2px;text-align:right}
.licence-strip__label{
  font-size:.80rem;text-transform:uppercase;letter-spacing:.09em;color:var(--royal-deep);font-weight:700;
}
.licence-strip .lic{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:1.36rem;font-weight:800;color:var(--royal-deep);letter-spacing:.02em;word-break:break-word;
}
.licence-strip .exp{font-size:1.20rem;font-weight:800;color:var(--ink)}
.licence-strip .sub{font-size:.92rem;color:var(--ink-soft)}
@media (max-width:640px){.licence-strip__expiry{text-align:left}}

/* ------------------------- groups of label/value rows --------------------- */
.detail-groups{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 30px;margin-top:16px}
@media (max-width:1200px){.detail-groups{grid-template-columns:1fr}}
.detail--narrow{grid-template-columns:minmax(140px,195px) 1fr}
.detail--narrow dt{font-size:.86rem}
.detail--narrow dd{font-size:1rem}

/* ------------------------------ the history card -------------------------- */
.history-scroll{max-height:620px;overflow:auto;padding-right:6px}
.history-scroll .timeline li{font-size:.96rem}

/* ------------------------------- queue rows ------------------------------- */
.row-actions{display:flex;gap:.4rem;flex-wrap:wrap}
.row-actions .btn{white-space:nowrap}

/* ---------------------------- printing (landscape) ------------------------ */
@media print{
  /* One tidy landscape sheet (update 008). */
  @page{size:A4 landscape;margin:10mm}

  body{background:#fff;font-size:10.5pt}
  .sidebar,.topbar,.actionbar,.no-print,.tabs,.filters,.skip{display:none!important}
  .content{padding:0;max-width:none}
  .shell{display:block}

  .record-grid,.record-grid--two{display:block;gap:0}
  .record-col--details,.record-col--side,.record-col--history{display:block}
  .card{
    box-shadow:none;border:1px solid #CCC;break-inside:avoid;page-break-inside:avoid;
    margin-bottom:6mm;padding:4mm 5mm;
  }
  .card + .card{margin-top:0}
  .history-scroll{max-height:none;overflow:visible}
  .detail--narrow{grid-template-columns:minmax(110px,150px) 1fr}
  .detail dt,.detail dd{font-size:10pt;padding:3px 0}
  .licence-strip{background:#fff;border:1px solid #999;padding:3mm 4mm}
  .licence-strip .lic{font-size:12pt}
  .badge,.badge--lg{border:1px solid #999;background:#fff}
  a{color:#000;text-decoration:none}
  h1{font-size:14pt}
  h2{font-size:12pt}
  .record-h{font-size:9pt;border-bottom:1px solid #999}
}

/* Update 010 — the record-page history drawer. The timeline is folded away so the
   record page reads as a working page, not an audit dump; the Super Admin opens it
   with one click (and only he sees it at all). */
.history-drawer > summary {
  cursor: pointer;
  font-weight: 600;
  padding: 10px 14px;
  border: 1px solid var(--line, #dfe6df);
  border-radius: 10px;
  background: #f6f9f6;
  list-style: revert;
  margin-bottom: 10px;
}
.history-drawer[open] > summary { border-radius: 10px 10px 0 0; margin-bottom: 0; }
.history-drawer > summary:hover { background: #eef4ee; }
@media print { .history-drawer { display: none; } }

/* ==========================================================================
   Update 012 — the on-screen record is one full-width information panel.

   On a wide screen the licence and Decision share the top row. All applicant
   information then lives in one continuous panel below them: the headings
   remain for orientation, but the four sections are no longer four separate
   cards. The folded history comes underneath at full width. At the medium
   breakpoint the existing card structure returns, and at the narrow
   breakpoint the page becomes one readable column.
   ========================================================================== */
@media (min-width:1201px){
  .record-grid,
  .record-grid--two{
    grid-template-columns:minmax(0,2.2fr) minmax(340px,.8fr);
  }

  /* Hoist the licence, one continuous information panel and hint into the
     board without changing the semantic section or the printed page. */
  .record-col--details{display:contents}
  .record-col--details > .licence-strip{
    grid-column:1;
    grid-row:1;
  }
  .record-col--details > .detail-groups{
    display:grid;
    grid-column:1 / -1;
    grid-row:2;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:2px 30px;
    margin-top:0;
    background:#fff;
    border:1px solid var(--line);
    border-radius:var(--radius);
    box-shadow:var(--shadow-sm);
    padding:0 22px 22px;
  }
  .record-col--details > .detail-groups > .detail-group{
    min-width:0;
    background:transparent;
    border:0;
    border-radius:0;
    box-shadow:none;
    padding:0;
  }
  .record-col--details > .hint{
    grid-column:1 / -1;
    grid-row:3;
  }
  .record-col--side{
    grid-column:2;
    grid-row:1;
    align-self:stretch;
  }
  .record-col--side .card{height:100%}
  .record-col--history{
    grid-column:1 / -1;
    grid-row:4;
  }
}

@media (max-width:1200px){
  .record-grid,
  .record-grid--two{
    grid-template-columns:minmax(0,1.5fr) minmax(320px,1fr);
  }
  .record-col--details{
    display:block;
    grid-column:1 / 2;
  }
  .record-col--details > .detail-groups{display:grid}
  .record-col--details > .detail-groups > .detail-group{
    background:transparent;
    border:0;
    border-radius:0;
    box-shadow:none;
    padding:0;
  }
  .record-col--side{grid-column:2 / 3;grid-row:auto}
  .record-col--history{grid-column:1 / -1;grid-row:auto}
}

@media (max-width:980px){
  .record-grid,
  .record-grid--two{grid-template-columns:1fr}
  .record-col--details,
  .record-col--side,
  .record-col--history{grid-column:auto;grid-row:auto}
}

/* The screen-only display rules above must never alter the A4 print sheet. */
@media print{
  .record-grid,.record-grid--two{display:block;grid-template-columns:none}
  .record-col--details{display:block}
  .record-col--side,.record-col--history{grid-column:auto;grid-row:auto}
  .record-col--details > .detail-groups{display:grid}
  .record-col--details > .detail-groups > .detail-group{
    background:transparent;
    border:0;
    border-radius:0;
    box-shadow:none;
    padding:0;
  }
}