:root{
  --bg:#f4f6f8;
  --card:#ffffff;
  --text:#18212f;
  --muted:#667085;
  --border:#d8dee8;
  --primary:#185abc;
  --green:#137333;
  --amber:#9a6700;
  --red:#b42318;
  --shadow:0 4px 18px rgba(0,0,0,.06);
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text)}
button,input,select{font:inherit;font-size:16px}
button{min-height:44px;cursor:pointer;border:0;border-radius:9px;font-weight:700;padding:10px 15px}
.shell{max-width:1100px;margin:0 auto;padding:16px}
.site-header{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--border);border-radius:16px;padding:14px 18px;box-shadow:var(--shadow);margin-bottom:16px}
.logo{width:70px;height:70px;object-fit:contain}
.site-title{font-size:22px;font-weight:850;line-height:1.15}
.site-subtitle{color:var(--muted);margin-top:4px}
.card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:18px;margin-bottom:14px;box-shadow:var(--shadow)}
h1,h2,h3{margin-top:0}
.muted{color:var(--muted)}
.primary{background:var(--primary);color:#fff}
.secondary{background:#e8edf5;color:var(--text)}
.danger{background:#fdecea;color:var(--red)}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.spread{justify-content:space-between}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.dashboard-card{background:#fff;border:1px solid var(--border);border-radius:12px;padding:16px}
.big{font-size:28px;font-weight:850}
label{display:block;font-weight:700;margin:12px 0 6px}
input,select{width:100%;padding:11px;border:1px solid #b9c2cf;border-radius:9px;background:#fff}
.login{max-width:520px;margin:36px auto}
.error{border-left:5px solid var(--red);background:#fff5f4}
.success{border-left:5px solid var(--green);background:#f4fff8}
.pill{display:inline-block;padding:5px 9px;border-radius:999px;background:#eef2f7;font-size:13px;margin:2px}
.pill.green{background:#e6f4ea;color:var(--green)}
.pill.amber{background:#fff4ce;color:var(--amber)}
.member-card{cursor:pointer}
.member-card:hover{border-color:#99b7e8}
table{width:100%;border-collapse:collapse}
th,td{padding:9px;border-bottom:1px solid var(--border);text-align:left;font-size:14px}
th{background:#f7f9fc}
footer{text-align:center;color:var(--muted);font-size:12px;padding:18px}
@media(max-width:760px){
  .shell{padding:10px}
  .site-header{padding:12px}
  .logo{width:58px;height:58px}
  .site-title{font-size:18px}
  .grid{grid-template-columns:1fr 1fr}
}
@media(max-width:520px){
  .grid{grid-template-columns:1fr}
}


/* Driving member dashboard */
.driving-appliance-card{
  border-left:5px solid var(--primary);
}
.driving-appliance-heading h2{
  margin-bottom:3px;
}
.driving-progress-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px;
  margin-top:14px;
}
.driving-status-box{
  display:flex;
  gap:10px;
  align-items:flex-start;
  border:1px solid var(--border);
  border-radius:11px;
  padding:12px;
  background:#fbfcfe;
  min-height:126px;
}
.driving-step{
  display:flex;
  align-items:center;
  justify-content:center;
  width:28px;
  height:28px;
  min-width:28px;
  border-radius:50%;
  background:#e8edf5;
  color:var(--primary);
  font-weight:850;
}
.driving-value{
  margin:7px 0 4px;
  font-size:20px;
  font-weight:850;
}
.status-authorised{
  color:var(--green);
}
.status-not-authorised{
  color:var(--red);
}
@media(max-width:900px){
  .driving-progress-grid{
    grid-template-columns:1fr 1fr;
  }
}
@media(max-width:560px){
  .driving-progress-grid{
    grid-template-columns:1fr;
  }
}


/* Grouped probationary skills */
.probationary-area-card{
  border-left:5px solid var(--primary);
}
.probationary-area-heading h2{
  margin-bottom:3px;
}
.probationary-skill-list{
  margin-top:14px;
  border-top:1px solid var(--border);
}
.probationary-skill-row{
  display:grid;
  grid-template-columns:minmax(260px,1.7fr) minmax(170px,.7fr) minmax(150px,.6fr);
  gap:16px;
  align-items:center;
  padding:14px 0;
  border-bottom:1px solid var(--border);
}
.probationary-skill-row:last-child{
  border-bottom:0;
}
.probationary-skill-main strong{
  font-size:15px;
}
.skill-subtext{
  margin-top:3px;
}
.field-label{
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:var(--muted);
  font-weight:700;
  margin-bottom:4px;
}
.skill-value{
  font-size:18px;
  font-weight:850;
  margin-bottom:7px;
}
.probationary-skill-practice button{
  width:100%;
}
@media(max-width:760px){
  .probationary-skill-row{
    grid-template-columns:1fr;
    gap:10px;
  }
  .probationary-skill-practice,
  .probationary-skill-assessment{
    padding-top:2px;
  }
}

.officer-skill-row{
  grid-template-columns:minmax(260px,1.7fr) minmax(150px,.65fr) minmax(140px,.6fr);
}
.officer-skill-row button{width:100%}
@media(max-width:760px){
  .officer-skill-row{grid-template-columns:1fr}
}

@media(min-width:761px){
  .grid:has(.dashboard-card:nth-child(4)){
    grid-template-columns:repeat(4,1fr);
  }
}

.modal-overlay{
  position:fixed;
  inset:0;
  background:rgba(10,20,35,.58);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
  z-index:9999;
}
.modal-card{
  width:min(720px,100%);
  background:#fff;
  border-radius:14px;
  padding:18px;
  box-shadow:0 18px 60px rgba(0,0,0,.28);
}
#signatureCanvas{
  width:100%;
  height:180px;
  border:2px dashed var(--border);
  border-radius:10px;
  background:#fff;
  touch-action:none;
}

.readiness-list{margin-top:14px}
.readiness-row{
  display:grid;
  grid-template-columns:1fr 220px;
  gap:14px;
  align-items:center;
  padding:12px 0;
  border-bottom:1px solid var(--border)
}
.readiness-row:last-child{border-bottom:0}
textarea{font:inherit;font-size:16px}
@media(max-width:650px){
  .readiness-row{grid-template-columns:1fr}
}

.officer-skill-row{
  grid-template-columns:40px minmax(240px,1.7fr) minmax(150px,.65fr) minmax(140px,.6fr);
}
.bulkSkillCheck{
  transform:scale(1.3);
  margin-top:4px;
}
@media(max-width:760px){
  .officer-skill-row{
    grid-template-columns:40px 1fr;
  }
  .officer-skill-row > div:nth-child(3),
  .officer-skill-row > div:nth-child(4){
    grid-column:2;
  }
}

.skill-admin-area{margin-bottom:20px}
.skill-drop-zone{border:1px solid var(--border);border-radius:12px;overflow:hidden;background:#fff}
.skill-drag-row{display:grid;grid-template-columns:42px minmax(260px,1.5fr) minmax(200px,.9fr) 110px 120px 90px;gap:10px;align-items:center;padding:10px;border-bottom:1px solid var(--border);background:#fff}
.skill-drag-row:last-child{border-bottom:0}
.skill-drag-row.dragging{opacity:.45;background:#eef4ff}
.skill-retired{opacity:.65;background:#f7f7f7}
.drag-handle{font-size:24px;cursor:grab;user-select:none;text-align:center}
.drag-handle:active{cursor:grabbing}
.skill-admin-main input{font-weight:700}
.mini-label{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin:0 0 3px}
@media(max-width:950px){.skill-drag-row{grid-template-columns:38px 1fr 1fr}}
@media(max-width:650px){.skill-drag-row{grid-template-columns:36px 1fr}.skill-drag-row>div:not(.drag-handle){grid-column:2}}

.control-centre-section{
  border-left:5px solid var(--primary);
}
@media(max-width:760px){
  .modal-card{
    max-height:90vh;
    overflow:auto;
  }
}

.status-summary-grid{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}.status-toolbar{display:grid;grid-template-columns:1fr 210px 220px;gap:10px}.status-member-card{border:1px solid var(--border);border-radius:12px;padding:15px;margin-bottom:12px;background:#fff}.status-member-card.needs-attention{border-left:5px solid #d97706}.status-member-head{display:flex;justify-content:space-between;gap:14px}.status-member-head h3{margin:0}.status-columns{display:grid;grid-template-columns:1.5fr .8fr;gap:18px;margin-top:14px}.progress-track{height:10px;border-radius:999px;background:#e5e7eb;overflow:hidden;margin:7px 0}.progress-fill{height:100%;background:#2563eb}.driving-mini-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:8px;margin-top:12px}.driving-mini{border:1px solid var(--border);border-radius:9px;padding:9px;font-size:13px}@media print{header,.status-toolbar,#statusBackBtn,#printStatusBtn,#csvStatusBtn,.statusOpenBtn{display:none!important}.card,.status-member-card{box-shadow:none;break-inside:avoid}}@media(max-width:760px){.status-toolbar,.status-columns{grid-template-columns:1fr}.status-member-head{display:block}}

.probationary-progress-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px}
.officer-member-progress{margin-top:12px}
@media(max-width:760px){.probationary-progress-summary{grid-template-columns:1fr}}

.training-admin-nav{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:14px;
  padding-top:12px;
  border-top:1px solid var(--border);
}
.bulk-status-actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
  margin-bottom:12px;
  padding-bottom:12px;
  border-bottom:1px solid var(--border);
}
.member-notification-list{
  display:grid;
  gap:10px;
}
.member-notification{
  display:flex;
  justify-content:space-between;
  gap:14px;
  padding:12px;
  border:1px solid var(--border);
  border-left:5px solid var(--primary);
  border-radius:10px;
  background:#fff;
}
.member-notification.is-read{opacity:.72;border-left-color:#98a2b3}
.activity-timeline{display:grid;gap:0}
.activity-item{
  display:grid;
  grid-template-columns:18px 1fr;
  gap:10px;
  position:relative;
  padding:0 0 18px;
}
.activity-item:not(:last-child):before{
  content:"";
  position:absolute;
  left:6px;
  top:12px;
  bottom:-2px;
  width:2px;
  background:var(--border);
}
.activity-dot{
  width:14px;height:14px;border-radius:50%;
  background:var(--primary);
  margin-top:3px;
  z-index:1;
}
.template-row{
  display:flex;
  justify-content:space-between;
  gap:14px;
  padding:12px 0;
  border-bottom:1px solid var(--border);
}
@media(max-width:650px){
  .member-notification,.template-row{display:block}
  .member-notification .row{margin-top:10px}
  .training-admin-nav button{flex:1 1 45%}
}

/* Clean admin navigation */
.training-admin-nav{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:14px;
}
.training-admin-nav button{
  margin:0;
}
@media(max-width:700px){
  .training-admin-nav button{
    flex:1 1 145px;
  }
}

.admin-tools-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:10px;
  margin-top:12px;
}
.tool-card{
  text-align:left;
  border:1px solid var(--border);
  border-radius:12px;
  background:#fff;
  padding:15px;
  cursor:pointer;
}
.tool-card:hover{
  border-color:#2563eb;
}
.tool-card strong{
  display:block;
  font-size:16px;
  margin-bottom:5px;
}
.tool-card span{
  display:block;
  color:var(--muted);
  font-size:13px;
}
.task-list{display:grid;gap:10px}
.task-card{
  display:flex;
  justify-content:space-between;
  gap:14px;
  border:1px solid var(--border);
  border-left:5px solid #98a2b3;
  border-radius:10px;
  padding:12px;
}
.task-card.priority-high{border-left-color:#d97706}
.task-card.priority-urgent{border-left-color:#b42318}
.quick-entry-shell{max-width:760px;margin:0 auto}
.quick-entry-shell select{min-height:140px}
.quick-action-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:14px;
}
@media(max-width:650px){
  .task-card{display:block}
  .quick-action-grid{grid-template-columns:1fr}
}

.session-list{display:grid;gap:10px}
.session-setup-grid{
  display:grid;
  grid-template-columns:1fr 1.25fr;
  gap:14px;
}
.check-list{
  display:grid;
  gap:7px;
  max-height:620px;
  overflow:auto;
}
.check-row{
  display:flex;
  align-items:flex-start;
  gap:9px;
  padding:8px;
  border:1px solid var(--border);
  border-radius:8px;
  margin:0;
}
.check-row input{
  width:auto;
  margin-top:3px;
}
.session-skill-row{
  display:grid;
  grid-template-columns:1fr 170px;
  gap:10px;
  align-items:center;
}
.config-edit-row{
  display:grid;
  grid-template-columns:minmax(180px,1.5fr) minmax(120px,.8fr) 110px 120px 80px;
  gap:8px;
  align-items:center;
  padding:8px 0;
  border-bottom:1px solid var(--border);
}
@media(max-width:900px){
  .session-setup-grid{grid-template-columns:1fr}
  .config-edit-row{grid-template-columns:1fr 1fr}
}
@media(max-width:600px){
  .session-skill-row,.config-edit-row{grid-template-columns:1fr}
}

.role-portal-nav{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.compact-nav-card{
  padding-top:12px;
  padding-bottom:12px;
  position:sticky;
  top:8px;
  z-index:20;
}
.role-portal-nav button{
  margin:0;
}
@media(max-width:700px){
  .role-portal-nav{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .role-portal-nav button{
    width:100%;
  }
  .compact-nav-card{
    position:static;
  }
}

.health-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px}

.drive-auth-badge{display:inline-flex;align-items:center;gap:5px;border-radius:999px;padding:5px 9px;font-size:.82rem;font-weight:700;margin:3px 0}
.drive-auth-badge.is-authorised{background:#e7f6ec;border:1px solid #a9d8b8}
.drive-auth-badge.is-not-authorised{background:#f3f4f6;border:1px solid #d7dbe0}
.driving-overview-member{padding:14px 0;border-bottom:1px solid var(--border)}
.driving-overview-apps{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:9px;margin-top:10px}
.driving-overview-app{border:1px solid var(--border);border-radius:10px;padding:10px}
.status-line{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--border)}
.record-meta{font-size:.78rem;color:var(--muted);margin-top:4px}
.driving-declaration-officer{margin-top:12px;padding-top:10px;border-top:1px solid var(--border)}
.driving-mini{border-radius:12px}
.driving-mini div:last-child{font-weight:700;margin-top:5px}
@media(max-width:650px){.status-line{align-items:flex-start;flex-direction:column}.driving-overview-apps{grid-template-columns:1fr}}


/* Final cleanup: sticky portal navigation on long pages */
.compact-nav-card,
.admin-sticky-nav{
  position:sticky !important;
  top:8px !important;
  z-index:50 !important;
  padding-top:10px;
  padding-bottom:10px;
  box-shadow:0 8px 20px rgba(15,23,42,.08);
}

.admin-sticky-nav .training-admin-nav{
  margin-top:0;
  padding-top:0;
  border-top:0;
}

@media(max-width:700px){
  .compact-nav-card,
  .admin-sticky-nav{
    position:sticky !important;
    top:4px !important;
  }
}

/* Easier editing for notification/templates/descriptions */
.modal-card textarea,
.modal-card .long-text,
textarea.long-text{
  width:100% !important;
  min-height:170px;
  box-sizing:border-box;
  resize:vertical;
}

/* Keep sticky menus compact when scrolling */
.compact-nav-card .role-portal-nav,
.admin-sticky-nav .training-admin-nav{
  margin:0;
}
/* Production V2 Stage 3 */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(145px,1fr));gap:10px;margin-top:10px}.stat{border:1px solid var(--border,#d8dee9);border-radius:10px;padding:12px;background:#fff}.stat strong{display:block;font-size:1.15rem}.stat span{display:block;margin-top:3px;color:#5d6778;font-size:.9rem}

/* Stage 4.2.3 - mobile-safe modal scrolling (portal-wide) */
.modal-overlay{
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}
.modal-card{
  max-height:calc(100dvh - 36px);
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}
@media(max-width:760px){
  .modal-overlay{
    align-items:flex-start;
    padding:8px;
  }
  .modal-card{
    width:100%;
    max-height:calc(100dvh - 16px);
    margin:0;
    padding:14px;
    overflow-y:auto;
  }
  .modal-card > .row:last-child{
    position:sticky;
    bottom:-14px;
    z-index:5;
    background:#fff;
    padding:12px 0 14px;
    margin-bottom:-14px;
    border-top:1px solid var(--border);
  }
}



/* Stage 5.1.3: sticky role-aware global navigation */
.portal-global-nav{position:sticky;top:0;z-index:9990;background:#fff;border-bottom:1px solid var(--border);box-shadow:0 2px 10px rgba(0,0,0,.08);padding:8px 12px;margin-bottom:12px}
.portal-global-nav-inner{max-width:1200px;margin:0 auto;display:flex;align-items:center;gap:8px}
.portal-nav-fixed{width:auto;min-height:42px;white-space:nowrap}
.portal-nav-menu-wrap{position:relative}
.portal-nav-menu-toggle{width:auto;min-height:42px}
.portal-nav-dropdown{position:absolute;top:calc(100% + 7px);left:0;min-width:220px;background:#fff;border:1px solid var(--border);border-radius:10px;box-shadow:0 8px 28px rgba(0,0,0,.16);padding:6px;z-index:9995}
.portal-nav-dropdown[hidden]{display:none}
.portal-nav-item{display:block;width:100%;text-align:left;background:transparent;color:inherit;border:0;border-radius:7px;padding:10px 12px;box-shadow:none}
.portal-nav-item:hover,.portal-nav-item:focus{background:#f1f4f7}
.portal-nav-role{margin-left:auto;text-transform:capitalize;font-size:.82rem;color:var(--muted);white-space:nowrap}
@media(max-width:640px){.portal-global-nav{padding:6px 8px}.portal-global-nav-inner{gap:6px}.portal-nav-fixed,.portal-nav-menu-toggle{min-height:42px;padding:8px 10px;font-size:.92rem}.portal-nav-role{display:none}.portal-nav-dropdown{position:fixed;left:8px;right:8px;top:58px;min-width:0;max-height:calc(100dvh - 74px);overflow-y:auto}.portal-nav-item{min-height:44px}body{padding-bottom:0}}

/* Stage 5.1.3.2 — global Sign out placement */
.portal-nav-signout{width:auto;min-height:42px;white-space:nowrap;margin-left:0}
@media(min-width:641px){
  .portal-nav-dropdown .portal-nav-item:last-child{display:none}
}
@media(max-width:640px){
  .portal-nav-signout{display:none}
}

/* Stage 5.1.4 — top navigation is the single portal navigation surface. */
.admin-sticky-nav,
.role-portal-nav {
  display: none !important;
}

/* Stage 5.1.4.1 — long Training Officer menu remains usable on smaller displays. */
@media(min-width:641px){
  .portal-nav-dropdown{max-height:calc(100vh - 90px);overflow-y:auto;min-width:260px}
}

/* Stage 5.1.4.2: authoritative member module isolation */
[hidden] { display: none !important; }