/* ============================================================
   Electronic Permit System – style.css
   Design tokens (Eskom navy / gold) + enterprise chrome
   ============================================================ */

:root {
  --eps-navy: #0B3A82;
  --eps-navy-deep: #002D72;
  --eps-navy-hover: #0a3170;
  --eps-gold: #C9A84C;
  --eps-gold-ink: #3d3208;
  --eps-ink: #1a1a2e;
  --eps-muted: #5c6b7a;
  --eps-border: #c8cfe0;
  --eps-surface: #ffffff;
  --eps-page: #f0f2f8;
  --eps-danger: #b42318;
  --eps-success: #0f5132;
  --eps-radius: 8px;
  --eps-shadow: 0 1px 4px rgba(0, 45, 114, .08);
  --eps-shadow-lg: 0 8px 28px rgba(11, 58, 130, .18);
  --eps-focus: 0 0 0 3px rgba(11, 58, 130, .35);
  --eps-font: 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --eps-touch: 44px;
}

/* ── Reset ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--eps-font);
  font-size: 14px;
  line-height: 1.45;
  color: var(--eps-ink);
  background: var(--eps-page);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

/* Skip link — WCAG 2.2 keyboard bypass */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100000;
  padding: 10px 16px;
  background: var(--eps-navy);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  border-radius: 0 0 6px 0;
}
.skip-link:focus {
  left: 0;
  outline: 3px solid var(--eps-gold);
  outline-offset: 2px;
}

/* Global focus — visible for keyboard, not mouse-only noise */
:focus { outline: none; }
:focus-visible {
  outline: 3px solid var(--eps-navy);
  outline-offset: 2px;
}
.btn:focus-visible,
.app-nav a:focus-visible,
.sig-tab:focus-visible {
  outline: 3px solid var(--eps-gold);
  outline-offset: 2px;
}

/* ── Container ───────────────────────────────────────────── */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px 20px 48px;
}

/* ── App navigation (replaces inline navbar styles) ─────── */
.app-nav {
  background: var(--eps-navy-deep);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 56px;
  padding: 0 16px 0 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .28);
  position: sticky;
  top: 0;
  z-index: 1000;
}
.app-nav-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  text-decoration: none;
  color: #fff;
  min-height: var(--eps-touch);
  padding: 4px 0;
}
.app-nav-brand img {
  width: 36px;
  height: 36px;
  object-fit: contain;
  display: block;
}
.app-nav-brand-text {
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -.01em;
  color: #fff;
  line-height: 1.2;
}
.app-nav-brand-sub {
  display: block;
  font-size: 10px;
  font-weight: 500;
  color: var(--eps-gold);
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-top: 1px;
}
.app-nav-links {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.app-nav-links::-webkit-scrollbar { display: none; }
.app-nav-link {
  color: rgba(255, 255, 255, .88);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 12px;
  border-radius: 6px;
  white-space: nowrap;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
}
.app-nav-link:hover {
  background: rgba(255, 255, 255, .1);
  color: #fff;
}
.app-nav-link.is-active {
  background: rgba(255, 255, 255, .16);
  color: #fff;
}
.app-nav-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  font-size: 13px;
}
.app-nav-user {
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, .85);
  max-width: 220px;
}
.app-nav-user-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 120px;
}
.app-nav-role {
  background: rgba(255, 255, 255, .14);
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
.app-nav-notif {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #fff;
  text-decoration: none;
  font-size: 12px;
  font-weight: 700;
  padding: 6px 10px;
  border-radius: 6px;
  background: rgba(220, 53, 69, .25);
  border: 1px solid rgba(255, 255, 255, .2);
  min-height: 36px;
}
.app-nav-notif:hover { background: rgba(220, 53, 69, .4); }
.app-nav-logout {
  color: var(--eps-gold);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 10px;
  border-radius: 6px;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
}
.app-nav-logout:hover {
  background: rgba(201, 168, 76, .15);
  color: #ffe08a;
}
@media (max-width: 760px) {
  .app-nav { flex-wrap: wrap; padding: 8px 12px; min-height: 0; }
  .app-nav-links { order: 3; width: 100%; padding-top: 4px; }
  .app-nav-user-name { display: none; }
  .app-nav-brand-sub { display: none; }
}

/* ── Auth pages ──────────────────────────────────────────── */
body.auth-page {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #e8eef6;
  min-height: 100vh;
  padding: 24px 16px;
  font-family: var(--eps-font);
}
.auth-card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(11, 58, 130, .28);
  width: 100%;
  max-width: 400px;
  overflow: hidden;
}
.auth-header {
  background: var(--eps-navy);
  color: #fff;
  padding: 32px 32px 24px;
  text-align: center;
}
.auth-header .auth-logo {
  display: block;
  width: 88px;
  height: 88px;
  object-fit: contain;
  margin: 0 auto;
}
.auth-header h1 {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -.01em;
  margin: 12px 0 0;
  line-height: 1.25;
  color: #fff;
}
.auth-header p {
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .01em;
  text-transform: none;
  margin: 4px 0 0;
  line-height: 1.35;
  color: rgba(255, 255, 255, .78);
}
.auth-body  { padding: 28px 32px 24px; }
.auth-body h2  {
  font-size: 20px;
  color: var(--eps-navy);
  margin: 0 0 4px;
  font-weight: 600;
  letter-spacing: -.01em;
}
.auth-sub      { font-size: 13px; color: var(--eps-muted); margin-bottom: 20px; line-height: 1.4; }
.auth-footer   {
  background: #f8f9fb;
  padding: 14px 24px;
  font-size: 11px;
  color: #6b7785;
  text-align: center;
  border-top: 1px solid #e8ecf1;
  line-height: 1.45;
}
.auth-body .form-group { width: 100%; max-width: 320px; margin: 0 auto 14px; text-align: left; }
.auth-body form { text-align: center; }
.auth-body .btn-primary.btn-block {
  display: inline-flex;
  width: auto;
  margin: 20px auto 0;
  padding: 11px 28px;
}
.auth-body .input-icon-wrap { position: relative; display: block; }
.auth-body .input-icon-wrap .input-icon {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  color: #8a97ab; pointer-events: none; z-index: 2;
}
.auth-body .input-icon-wrap input.form-control { padding-left: 42px; }
.auth-body input.form-control {
  min-height: 44px;
  padding: 12px 14px;
  font-size: 14px;
  border-radius: 6px;
}
.pw-wrap { position: relative; }
.pw-wrap input { padding-right: 52px; }
.pw-toggle {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  background: none; border: none; cursor: pointer;
  font-size: 12px; font-weight: 600; color: var(--eps-navy);
  padding: 4px 6px; font-family: inherit;
}

/* ── Page header ─────────────────────────────────────────── */
.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.page-title { font-size: 22px; color: var(--eps-navy-deep); font-weight: 700; letter-spacing: -.02em; }
.page-sub   { font-size: 13px; color: var(--eps-muted); margin-top: 2px; }

/* ── Stat cards ──────────────────────────────────────────── */
.stat-row {
  display: flex;
  gap: 12px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.stat-card {
  background: #fff;
  border-radius: 8px;
  padding: 14px 18px;
  flex: 1;
  min-width: 100px;
  box-shadow: 0 1px 4px rgba(0,0,0,.08);
  border-top: 4px solid #002D72;
  text-align: center;
}
.stat-num   { font-size: 28px; font-weight: 700; color: #002D72; }
.stat-label { font-size: 11px; color: #666; margin-top: 2px; }

/* ── Filter bar ──────────────────────────────────────────── */
.filter-bar {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 16px;
  background: #fff;
  padding: 12px 16px;
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
}

/* ── Form controls ───────────────────────────────────────── */
.form-group { margin-bottom: 14px; }
.form-group label { display: block; font-size: 12px; font-weight: 600; color: #444; margin-bottom: 4px; }
.form-control {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid #c8cfe0;
  border-radius: 5px;
  font-size: 13px;
  transition: border-color .2s;
  background: #fff;
}
.form-control:focus { outline: none; border-color: var(--eps-navy); box-shadow: var(--eps-focus); }
.form-control:disabled,
.form-control[readonly] {
  background: #f3f5f8;
  color: #3d4f5f;
  cursor: default;
}
.req { color: var(--eps-danger); font-size: 12px; }
.field-hint { font-size: 11px; color: var(--eps-muted); margin-top: 4px; line-height: 1.35; }
.field-error {
  font-size: 12px;
  color: var(--eps-danger);
  margin-top: 4px;
  font-weight: 600;
}

.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* ── Buttons ─────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 18px;
  border-radius: 5px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: 2px solid transparent;
  text-decoration: none;
  white-space: nowrap;
  transition: all .15s;
}
.btn-primary  { background: #002D72; color: #fff; border-color: #002D72; }
.btn-primary:hover  { background: #003d99; }
.btn-secondary { background: #6c757d; color: #fff; border-color: #6c757d; }
.btn-secondary:hover { background: #5a6268; }
/* Gold CTA: dark ink for WCAG AA on brand gold */
.btn-warning  { background: var(--eps-gold); color: var(--eps-gold-ink); border-color: var(--eps-gold); }
.btn-warning:hover  { background: #b8932c; color: #1a1403; }
.btn-outline  { background: transparent; color: #002D72; border-color: #002D72; }
.btn-outline:hover  { background: #002D72; color: #fff; }
/* Destructive actions: delete a user, revoke a password, return a
   permit. These were used in manage_users.php with no rule to match, so
   the two most dangerous buttons in the application rendered in the
   plain .btn base style and looked exactly like Cancel. */
.btn-danger   { background: #dc3545; color: #fff; border-color: #dc3545; }
.btn-danger:hover   { background: #bb2d3b; border-color: #bb2d3b; }
.btn-block    { width: 100%; justify-content: center; }
.btn-sm       { padding: 5px 10px; font-size: 12px; }

.btn-sm.btn-primary   { background: #002D72; color: #fff; border: none; border-radius: 4px; cursor: pointer; text-decoration: none; display: inline-block; }
.btn-sm.btn-secondary { background: #6c757d; color: #fff; border: none; border-radius: 4px; cursor: pointer; text-decoration: none; display: inline-block; }
.btn-sm.btn-warning   { background: var(--eps-gold); color: var(--eps-gold-ink); border: none; border-radius: 4px; cursor: pointer; text-decoration: none; display: inline-block; }
.btn-sm.btn-danger    { background: #dc3545; color: #fff; border: none; border-radius: 4px; cursor: pointer; text-decoration: none; display: inline-block; }
.btn-sm.btn-outline   { background: transparent; color: #002D72; border: 1px solid #002D72; border-radius: 4px; cursor: pointer; text-decoration: none; display: inline-block; }

/* ── Alerts ──────────────────────────────────────────────── */
.alert { padding: 12px 16px; border-radius: 6px; margin-bottom: 16px; font-size: 13px; }
.alert-danger  { background: #f8d7da; color: #842029; border: 1px solid #f5c2c7; }
.alert-success { background: #d1e7dd; color: #0f5132; border: 1px solid #badbcc; }
.alert-info    { background: #cfe2ff; color: #084298; border: 1px solid #b6d4fe; }
/* Used by login.php, manage_users.php, permit_office.php and the
   returned-permit banners; previously undefined, so those messages
   rendered with no styling at all. */
.alert-warning { background: #fff3cd; color: #664d03; border: 1px solid #ffecb5; }

/* ── Progress bar (form steps) ───────────────────────────── */
.progress-bar-wrap {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 24px;
  position: relative;
  padding: 0 8px;
}
.progress-bar-wrap::before {
  content: '';
  position: absolute;
  top: 18px;
  left: 36px;
  right: 36px;
  height: 3px;
  background: #d0d8e8;
  z-index: 0;
}
.progress-step { display: flex; flex-direction: column; align-items: center; flex: 1; z-index: 1; }
.ps-circle {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: #d0d8e8;
  color: #888;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
  border: 3px solid #d0d8e8;
  transition: all .3s;
}
.progress-step.active .ps-circle { background: #002D72; color: #fff; border-color: #002D72; }
.progress-step.done   .ps-circle { background: #198754; color: #fff; border-color: #198754; }
.ps-label { font-size: 10px; color: #666; margin-top: 5px; text-align: center; line-height: 1.3; }
.progress-step.active .ps-label { color: #002D72; font-weight: 600; }
.progress-step.done   .ps-label { color: #198754; }

/* ── Form sections ───────────────────────────────────────── */
.form-section {
  background: #fff;
  border-radius: 8px;
  padding: 18px 20px;
  margin-bottom: 16px;
  box-shadow: 0 1px 4px rgba(0,0,0,.07);
}
.section-heading {
  font-weight: 700;
  font-size: 14px;
  color: #002D72;
  background: #eef2fa;
  padding: 8px 12px;
  border-radius: 5px;
  margin-bottom: 14px;
  border-left: 4px solid #002D72;
}
.form-note { font-size: 11px; color: #c00; margin-top: 4px; }

/* ── Checkboxes ──────────────────────────────────────────── */
.checkbox-row { display: flex; flex-wrap: wrap; gap: 14px; }
.check-label  { display: flex; align-items: center; gap: 6px; cursor: pointer; font-size: 13px; }
.check-label input { width: 16px; height: 16px; cursor: pointer; }

/* ── Signature pad ───────────────────────────────────────── */
.sig-wrap {
  border: 2px dashed #002D72;
  border-radius: 6px;
  background: #f8f9ff;
  display: inline-block;
  position: relative;
  overflow: hidden;
}
.sig-wrap canvas { display: block; cursor: crosshair; }
.sig-controls { padding: 4px 8px; display: flex; justify-content: flex-end; background: #eef2fa; }

/* ── Sticker upload box ──────────────────────────────────── */
.sticker-upload-box {
  background: #fffbf0;
  border: 2px solid #C9A84C;
  border-radius: 8px;
  padding: 16px;
  margin-top: 12px;
}
.sticker-label { display: block; font-size: 14px; font-weight: 700; color: #002D72; margin-bottom: 4px; }
.badge-required {
  display: inline-block;
  background: #c00;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 3px;
  margin-left: 8px;
  vertical-align: middle;
}

/* ── Sticker verification box (PO) ──────────────────────── */
.sticker-verify-box {
  border: 3px solid #002D72;
  border-radius: 8px;
  padding: 14px;
  margin-top: 14px;
  background: #f0f4ff;
}

/* ── Info cards ──────────────────────────────────────────── */
.info-card {
  background: #fff;
  border-radius: 8px;
  padding: 16px 18px;
  box-shadow: 0 1px 4px rgba(0,0,0,.07);
}
.info-card + .info-card { margin-top: 12px; }
.info-card-title {
  color: var(--eps-navy-deep);
  margin: 0 0 12px;
  font-size: 15px;
  font-weight: 700;
}
.info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 16px;
}
.info-lbl { font-size: 11px; color: #888; display: block; margin-bottom: 1px; }

/* ── Timeline ────────────────────────────────────────────── */
.timeline { display: flex; flex-direction: column; gap: 0; }
.tl-item {
  display: flex;
  gap: 14px;
  position: relative;
  padding-bottom: 14px;
}
.tl-item::before {
  content: '';
  position: absolute;
  left: 17px;
  top: 36px;
  bottom: 0;
  width: 2px;
  background: #d0d8e8;
}
.tl-item:last-child::before { display: none; }
.tl-icon {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: #d0d8e8;
  color: #888;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px;
  flex-shrink: 0;
  z-index: 1;
}
.tl-done   .tl-icon { background: #198754; color: #fff; }
.tl-active .tl-icon { background: #002D72; color: #fff; }
.tl-content { padding-top: 6px; }
.tl-label   { font-weight: 600; font-size: 14px; }
.tl-who     { font-size: 12px; color: #666; }
.tl-meta    { font-size: 11px; color: #0d6efd; margin-top: 2px; }

.next-action-box {
  margin-top: 14px;
  background: #fff3cd;
  border-left: 4px solid #C9A84C;
  padding: 10px 14px;
  border-radius: 0 5px 5px 0;
  font-size: 13px;
}

/* ── Table ───────────────────────────────────────────────── */
.table-wrap { overflow-x: auto; }
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0,0,0,.07);
}
.data-table th {
  background: #002D72;
  color: #fff;
  padding: 10px 12px;
  text-align: left;
  font-weight: 600;
  white-space: nowrap;
}
.data-table td {
  padding: 9px 12px;
  border-bottom: 1px solid #edf0f7;
  vertical-align: middle;
}
.data-table tr:last-child td { border-bottom: none; }
.data-table tr:hover td { background: #f5f7ff; }
.action-col { white-space: nowrap; }

/* ── Empty state ─────────────────────────────────────────── */
.empty-state {
  text-align: center;
  padding: 48px 24px;
  background: #fff;
  border-radius: 8px;
  color: #888;
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 700px) {
  .two-col     { grid-template-columns: 1fr; }
  .info-grid   { grid-template-columns: 1fr; }
  .stat-row    { gap: 8px; }
  .stat-card   { min-width: 80px; }
  .ps-label    { font-size: 9px; }
  .sig-wrap canvas { width: 300px !important; }
  .filter-bar  { flex-direction: column; align-items: stretch; }
  .page-header { flex-direction: column; }
}

/* ════════════════════════════════════════════════════════════
   Compact permit-form layout
   ────────────────────────────────────────────────────────────
   Opt in with <body class="form-page">. Used by new_permit.php,
   cro_section.php and manager_section.php, which each carried a
   byte-identical 78-line copy of this block inline.

   The copies leaned on !important to beat the base rules; the
   .form-page ancestor supplies enough specificity on its own, so
   these are ordinary declarations. The one !important elsewhere
   in this file targets .sig-wrap canvas inside a media query and
   does not intersect.
   ════════════════════════════════════════════════════════════ */
.form-page .container      { max-width: 820px; margin: 0 auto; }
.form-page .form-section   { padding: 14px 18px; margin-bottom: 12px; }
.form-page .section-heading{ padding: 8px 12px; margin-bottom: 12px; font-size: 13px; }
.form-page .form-control {
  padding: 6px 10px;
  font-size: 13px;
  height: auto;
  box-sizing: border-box;
  width: 100%;
  display: block;
}
.form-page .form-group        { margin-bottom: 10px; }
.form-page .form-group label  { font-size: 12px; margin-bottom: 3px; display: block; }
.form-page .two-col           { gap: 12px; }

/* Field widths matched to expected content, so a clock number does
   not get the same box as a company name. */
.form-page input[type="date"].form-control {
  max-width: 170px;
  height: 34px;
  padding: 5px 8px;
}
.form-page input[name="b_title"].form-control       { max-width: 130px; }
.form-page input[name="b_id_passport"].form-control { max-width: 220px; }
.form-page input[name*="clock"].form-control,
.form-page input[name*="unique"].form-control       { max-width: 180px; }
.form-page input[type="tel"].form-control,
.form-page input[name*="tel"].form-control,
.form-page input[name*="cell"].form-control,
.form-page input[name*="phone"].form-control,
.form-page input[name*="pax"].form-control,
.form-page input[name*="emergency_number"].form-control { max-width: 200px; }
.form-page input[type="email"].form-control         { max-width: 300px; }
.form-page input[name="b_name"].form-control,
.form-page input[name*="dept"].form-control,
.form-page input[name*="company"].form-control,
.form-page input[name*="emergency_name"].form-control,
.form-page input[name*="h_name"].form-control,
.form-page input[name*="designation"].form-control  { max-width: 300px; }
.form-page input[name*="model"].form-control,
.form-page input[name*="serial"].form-control,
.form-page input[name*="uid"].form-control,
.form-page input[name*="bmc"].form-control          { max-width: 260px; }
.form-page textarea.form-control {
  max-width: 100%;
  resize: vertical;
  min-height: 56px;
}

/* ════════════════════════════════════════════════════════════
   Signature widget (draw / type / upload)
   ────────────────────────────────────────────────────────────
   Behaviour lives in assets/signature-widget.js, markup in
   partials/signature_widget.php.

   There were three inline copies of this. They declared different
   canvas heights — 90px in two files, 130px in cro_section.php —
   but every copy was followed by a compact-form block whose
   "height: 85px !important" overrode all of them, so all three
   rendered identically anyway. These are the values that were
   actually taking effect.
   ════════════════════════════════════════════════════════════ */
.sig-widget {
  border: 2px solid var(--eps-navy-deep);
  border-radius: 8px;
  overflow: hidden;
  margin: 4px 0;
  max-width: 540px;
}
.sig-tabs { display: flex; background: #eef2fa; border-bottom: 2px solid var(--eps-navy-deep); }
.sig-tab {
  flex: 1;
  padding: 12px 8px;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--eps-navy-deep);
  cursor: pointer;
  border: none;
  background: none;
  border-right: 1px solid #c8cfe0;
  transition: background .15s, color .15s;
  min-height: var(--eps-touch);
}
.sig-tab:last-child { border-right: none; }
.sig-tab.active     { background: var(--eps-navy-deep); color: #fff; }
.sig-tab:hover:not(.active) { background: #dde5f5; }

.sig-panel        { display: none; padding: 12px; }
.sig-panel.active { display: block; }

.sig-canvas-wrap {
  position: relative;
  background: #f8f9ff;
  border-radius: 6px;
  border: 1px dashed #aab;
  min-height: 140px;
}
.sig-canvas-wrap canvas { display: block; cursor: crosshair; width: 100%; height: 140px; touch-action: none; }
.sig-canvas-hint {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 13px;
  color: #bbb;
  pointer-events: none;
  white-space: nowrap;
}

.sig-type-input {
  width: 100%;
  border: none;
  border-bottom: 2px solid #002D72;
  background: #f8f9ff;
  font-family: 'Dancing Script', cursive;
  font-size: 24px;
  color: #002D72;
  padding: 6px 8px;
  outline: none;
  text-align: center;
}
.sig-type-preview {
  margin-top: 6px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 6px;
  text-align: center;
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sig-type-preview span {
  font-family: 'Dancing Script', cursive;
  font-size: 24px;
  color: #002D72;
  line-height: 1;
}

.sig-font-btns { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.sig-font-btn {
  padding: 4px 12px;
  border: 1px solid #002D72;
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
  font-size: 13px;
  color: #002D72;
  transition: all .15s;
}
.sig-font-btn.active { background: #002D72; color: #fff; }

.sig-upload-area {
  border: 2px dashed #002D72;
  border-radius: 6px;
  padding: 10px;
  text-align: center;
  cursor: pointer;
  background: #f8f9ff;
  transition: all .15s;
}
.sig-upload-area:hover   { background: #eef2fa; }
.sig-upload-preview      { max-height: 100px; max-width: 100%; margin-top: 8px; border-radius: 4px; }
.sig-clear {
  font-size: 12px;
  color: var(--eps-muted);
  background: none;
  border: 1px solid var(--eps-border);
  border-radius: 4px;
  cursor: pointer;
  text-decoration: none;
  margin-top: 8px;
  display: inline-block;
  padding: 8px 12px;
  min-height: 36px;
}
.sig-clear:hover { color: var(--eps-navy); border-color: var(--eps-navy); }
.sig-error {
  display: none;
  margin-top: 8px;
  padding: 10px 12px;
  background: #f8d7da;
  color: #842029;
  border: 1px solid #f5c2c7;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
}
.sig-error.is-visible { display: block; }
.sig-upload-icon {
  width: 28px;
  height: 28px;
  margin: 0 auto;
  color: var(--eps-navy);
}

/* ════════════════════════════════════════════════════════════
   Dashboard layout
   ────────────────────────────────────────────────────────────
   These class names are unique to the dashboard (stats-grid,
   stat-box, dash-grid, …). They are NOT nested under
   .dashboard-page so a missing body class or a partially
   uploaded stylesheet cannot collapse the status cards into a
   single vertical column again.

   .stat-num / .stat-label / .filter-bar already exist above for
   admin.php — those overrides are scoped to .stat-box /
   .dash-grid so admin keeps the base look.
   ════════════════════════════════════════════════════════════ */

/* Date banner */
.date-banner {
  background: linear-gradient(135deg, #002D72 0%, #003d99 100%);
  color: #fff;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 0;
}
.date-banner .site-name {
  font-size: 13px;
  opacity: .75;
  letter-spacing: .5px;
  text-transform: uppercase;
}
.date-banner .current-date { font-size: 15px; font-weight: 700; color: #FFE08A; }
.date-banner .current-time { font-size: 13px; opacity: .85; margin-top: 2px; }

/* Urgent action banner */
.action-banner {
  background: #fff3cd;
  border-left: 5px solid #C9A84C;
  border-radius: 0 8px 8px 0;
  padding: 14px 18px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}
.action-banner .action-text { font-size: 14px; font-weight: 600; color: #664d03; }
.action-banner .action-sub  { font-size: 12px; color: #856404; margin-top: 2px; }

/* Stats grid — MUST be display:grid or cards stack in one column */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
  width: 100%;
}
.stat-box {
  background: #fff;
  border-radius: 10px;
  padding: 16px;
  box-shadow: 0 1px 5px rgba(0,0,0,.08);
  border-top: 4px solid #ddd;
  text-align: center;
  transition: transform .15s;
  cursor: pointer;
  text-decoration: none;
  display: block;
  color: inherit;
}
.stat-box:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,.12); }
.stat-box .stat-icon  { font-size: 24px; margin-bottom: 4px; }
.stat-box .stat-num   { font-size: 32px; font-weight: 800; line-height: 1; }
.stat-box .stat-label {
  font-size: 11px;
  color: #666;
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: .5px;
}

/* Month strip */
.month-strip {
  background: #fff;
  border-radius: 10px;
  padding: 14px 18px;
  margin-bottom: 16px;
  box-shadow: 0 1px 5px rgba(0,0,0,.08);
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  width: 100%;
}
.month-item { text-align: center; }
.month-num  { font-size: 28px; font-weight: 800; color: #002D72; }
.month-lbl  { font-size: 11px; color: #888; text-transform: uppercase; }

/* Two-column layout */
.dash-grid {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 16px;
  align-items: start;
  width: 100%;
}
@media (max-width: 900px) {
  .dash-grid { grid-template-columns: 1fr; }
}

/* Pending-for-my-role card */
.pending-card {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 1px 5px rgba(0,0,0,.08);
  overflow: hidden;
  margin-bottom: 16px;
}
.pending-card-head {
  background: #002D72;
  color: #fff;
  padding: 12px 16px;
  font-weight: 700;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.pending-item {
  padding: 12px 16px;
  border-bottom: 1px solid #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.pending-item:last-child { border-bottom: none; }
.pending-info { font-size: 13px; }
.pending-name { font-weight: 600; color: #1a1a2e; }
.pending-meta { font-size: 11px; color: #888; margin-top: 2px; }

/* Activity feed */
.activity-feed {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 1px 5px rgba(0,0,0,.08);
  overflow: hidden;
}
.activity-head {
  background: #f8f9fa;
  padding: 12px 16px;
  font-weight: 700;
  font-size: 13px;
  color: #002D72;
  border-bottom: 1px solid #eee;
}
.activity-item {
  padding: 10px 16px;
  border-bottom: 1px solid #f5f5f5;
  font-size: 12px;
}
.activity-item:last-child { border-bottom: none; }
.activity-action { font-weight: 600; color: #1a1a2e; }
.activity-meta   { color: #888; margin-top: 2px; }
.activity-dot    { width: 8px; height: 8px; border-radius: 50%; background: #002D72; flex-shrink: 0; margin-top: 4px; }

/* Workflow progress bar */
.workflow-bar {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 1px 5px rgba(0,0,0,.08);
  padding: 16px 18px;
  margin-bottom: 16px;
  width: 100%;
}
.workflow-title { font-size: 13px; font-weight: 700; color: #002D72; margin-bottom: 12px; }
.wf-steps { display: flex; gap: 0; width: 100%; }
.wf-step {
  flex: 1;
  text-align: center;
  padding: 8px 4px;
  font-size: 11px;
  color: #fff;
  position: relative;
}
.wf-step:first-child { border-radius: 6px 0 0 6px; }
.wf-step:last-child  { border-radius: 0 6px 6px 0; }
.wf-count { font-size: 20px; font-weight: 800; display: block; }

/* Filter bar inside the dashboard grid (denser than the base rule) */
.dash-grid .filter-bar {
  background: #fff;
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 12px;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
}

/* ════════════════════════════════════════════════════════════
   Enterprise polish layer (status, empty, access, auth links)
   ════════════════════════════════════════════════════════════ */

.status-badge {
  display: inline-block;
  color: #fff;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  line-height: 1.3;
}
.status-pending_cro { background: #c45a00; }
.status-pending_manager { background: #0b5ed7; }
.status-pending_permit_office { background: #5a32a3; }
.status-returned { background: #b42318; }
.status-completed { background: #0f7a45; }
.status-unknown { background: #5c6b7a; }

.empty-state {
  text-align: center;
  padding: 56px 28px;
  background: var(--eps-surface);
  border-radius: var(--eps-radius);
  color: var(--eps-muted);
  border: 1px dashed var(--eps-border);
}
.empty-state-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--eps-navy-deep);
  margin-bottom: 6px;
}
.empty-state-text { font-size: 13px; max-width: 360px; margin: 0 auto 16px; line-height: 1.5; }

.notif-panel {
  background: #fff;
  border-radius: 10px;
  box-shadow: var(--eps-shadow);
  margin-bottom: 16px;
  overflow: hidden;
  border-left: 4px solid var(--eps-navy-deep);
}
.notif-panel-head {
  background: var(--eps-navy-deep);
  color: #fff;
  padding: 12px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-weight: 700;
  font-size: 14px;
}
.notif-count {
  background: var(--eps-gold);
  color: var(--eps-gold-ink);
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 12px;
  margin-left: 8px;
}
.notif-item {
  padding: 12px 18px;
  border-bottom: 1px solid #f0f0f0;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.notif-item:last-child { border-bottom: none; }
.notif-dot {
  width: 10px;
  height: 10px;
  background: var(--eps-gold);
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 4px;
}
.notif-mark-all {
  background: none;
  border: none;
  color: var(--eps-gold);
  font-size: 12px;
  cursor: pointer;
  padding: 4px 0;
  font-family: inherit;
  font-weight: 600;
  min-height: 32px;
}
.notif-dismiss {
  color: #5c6b7a;
  font-size: 12px;
  padding: 6px 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
  min-height: 36px;
}

.access-denied {
  max-width: 520px;
  margin: 80px auto;
  background: #fff;
  border-radius: 10px;
  box-shadow: var(--eps-shadow-lg);
  padding: 36px 32px;
  text-align: center;
}
.access-denied h1 {
  color: var(--eps-navy-deep);
  font-size: 20px;
  margin: 0 0 8px;
}
.access-denied p {
  color: #555;
  font-size: 14px;
  margin: 0 0 20px;
}

.auth-footer a {
  color: var(--eps-navy) !important;
  font-size: 11px;
  font-weight: 600;
  text-decoration: underline;
}
.auth-footer a:hover { color: var(--eps-navy-deep) !important; }

.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.page-title { font-size: 22px; color: var(--eps-navy-deep); font-weight: 700; letter-spacing: -.02em; }
.page-sub   { font-size: 13px; color: var(--eps-muted); margin-top: 2px; }

.btn {
  min-height: 40px;
}
.btn-sm { min-height: 32px; }

.check-label input {
  width: 18px;
  height: 18px;
  min-width: 18px;
}

@media (max-width: 700px) {
  .btn, .app-nav-link, .sig-tab { min-height: var(--eps-touch); }
  .data-table th, .data-table td { padding: 12px 10px; }
  .action-col .btn { margin-bottom: 4px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Return-to-applicant panel (shared by CRO / Manager / PO) */
.return-panel { border-left: 5px solid var(--eps-danger); }
.return-panel-heading {
  background: #f8d7da !important;
  color: #842029 !important;
  border-left-color: var(--eps-danger) !important;
}

/* Leave / acting delegation — must never look like a normal approval */
.delegation-badge {
  display: inline-block;
  background: #fff3cd;
  color: #664d03;
  border: 1px solid #C9A84C;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  line-height: 1.35;
  white-space: nowrap;
}
.delegation-badge-danger {
  background: #f8d7da;
  color: #842029;
  border-color: #dc3545;
}
.delegation-panel {
  background: #fff8f0;
  border: 1px solid #f0d0a0;
  border-left: 4px solid #b42318;
  border-radius: 6px;
  padding: 12px 14px;
  margin-bottom: 12px;
}
.alert-returned {
  background: #fff3cd;
  color: #664d03;
  border: 1px solid #ffecb5;
  border-left: 5px solid var(--eps-danger);
}

/* Compact status abbreviation in dashboard stat cards */
.stat-box .stat-icon {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--eps-muted);
  text-transform: uppercase;
  margin-bottom: 6px;
}

/* Page action clusters */
.page-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.filter-bar .filter-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.filter-bar .filter-field label {
  font-size: 11px;
  font-weight: 600;
  color: var(--eps-muted);
}
.filter-bar .form-control { min-height: 40px; }

/* Detail grids (view permit) */
.detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 700px) {
  .detail-grid { grid-template-columns: 1fr; }
  .page-actions { width: 100%; }
  .page-actions .btn { flex: 1 1 auto; justify-content: center; }
}

/* Print toolbar (shared look for A4 / card screens) */
.print-toolbar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: #fff;
  border-bottom: 1px solid #d0d8e8;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
}
.print-toolbar .print-toolbar-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.print-toolbar .btn { min-height: 40px; }