/* UTC Remote Diagnosis Portal — shared styling.
   Colors deliberately copied from the existing Admin Portal/IMS ecosystem
   source (tgii-ims-frontend) so this app looks like it belongs there —
   including that app's own inconsistency between its auth pages (raw hex
   #0D3D4A) and its app shell (brand-teal token #1a3a4a). Both are
   reproduced faithfully rather than "fixed", since the goal is visual
   parity with the reference, not improving on it. */

:root {
  /* App shell tokens (Sidebar.jsx / TopBar.jsx / index.css @theme) */
  --brand-teal: #1a3a4a;
  --brand-teal-light: #2a5a6a;
  --brand-teal-dark: #0f2530;
  --brand-gold: #c9a84c;
  --brand-gold-light: #d4bc6a;

  /* Auth-page tokens (Login.jsx / AuthLayout.jsx hardcode these directly) */
  --auth-teal: #0D3D4A;
  --auth-gold: #B8962E;
  --auth-text: #1A2B30;
  --auth-border: #D1D9DC;
  --auth-muted: #A0ADB2;
  --auth-divider: #E8ECEE;
  --auth-restrict: #6B7A80;
  --auth-error: #E03131;
  --auth-error-bg: #FFF0EE;
  --auth-error-border: #FECACA;

  --danger: #dc2626;
  --success: #16a34a;
  --warning: #d97706;
  --info: #2563eb;
  --border: #e5e7eb;
  --text: #1f2937;
  --text-muted: #6b7280;
  --bg: #f9fafb;

  /* Diagnosis Page — Rail Pressure / Back Leak Test / Closed Rail
     Pressure combined checklist table header color — same color as the
     sidebar (--brand-teal), not a distinct green. */
  --diag-green: var(--brand-teal);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text);
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; }
svg.icon { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; display: block; }

/* ─── Auth layout (login page) — matches AuthLayout.jsx ────────────── */
.auth-shell { display: flex; min-height: 100vh; overflow: hidden; background: #fff; }
.auth-left {
  position: relative; overflow: hidden;
  width: 42%; min-width: 360px;
  background: var(--auth-teal); color: #fff;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 3rem 2.25rem 2rem;
}
.auth-watermark-zone {
  flex: 1.1; min-height: 0; display: flex; align-items: flex-end; justify-content: center;
  overflow: hidden; pointer-events: none;
}
.auth-watermark { width: 100%; max-width: 520px; opacity: 0.32; display: block; }
.auth-left .brand-center {
  flex: 1; min-height: 0; text-align: center; width: 100%;
  display: flex; align-items: flex-start; justify-content: center;
}
.auth-left .brand-center .brand-card {
  display: inline-block; background: #fff; padding: 1.25rem 2rem;
  border-radius: 1rem; box-shadow: 0 20px 40px -12px rgba(0,0,0,0.35);
}
.auth-left .brand-center img { width: 320px; max-width: 100%; display: block; }
.auth-left .footer-note { position: relative; z-index: 2; font-size: 11px; color: rgba(255,255,255,0.4); }
.auth-left .footer-note strong { color: rgba(255,255,255,0.6); }

.auth-right { flex: 1; display: flex; align-items: center; justify-content: center; padding: 2.5rem; background: #fff; }
.auth-form-wrap { width: 100%; max-width: 400px; }
.auth-form-wrap .auth-footer { text-align: center; margin-top: 2rem; font-size: 11px; color: var(--auth-muted); }
@media (max-width: 1023px) { .auth-left { display: none; } }

.auth-heading { text-align: center; margin-bottom: 1.75rem; }
.auth-heading h1 { font-size: 1.5rem; font-weight: 700; color: var(--auth-text); margin: 0; line-height: 1.3; }

.auth-alert {
  display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1.25rem;
  padding: 0.6rem 0.9rem; border-radius: 0.5rem;
  background: var(--auth-error-bg); border: 1.5px solid var(--auth-error-border);
  color: #991B1B; font-size: 13px;
}
.auth-alert svg.icon { stroke: var(--auth-error); width: 16px; height: 16px; flex-shrink: 0; }

.auth-field { margin-bottom: 1.25rem; }
.auth-field label { display: block; font-size: 13px; font-weight: 600; color: var(--auth-text); margin-bottom: 0.4rem; }
.auth-input-wrap { position: relative; }
.auth-input-wrap svg.icon.leading { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--auth-teal); width: 18px; height: 18px; }
.auth-input {
  width: 100%; height: 48px; border-radius: 0.5rem; font-size: 14px; color: var(--auth-text);
  background: #fff; border: 1.5px solid var(--auth-border); outline: none;
  padding: 0 0.9rem 0 2.6rem; font-family: inherit;
}
.auth-input:focus { border-color: var(--auth-teal); }
.auth-input.has-error { border-color: var(--auth-error); }
.auth-input.with-toggle { padding-right: 2.6rem; }
.auth-toggle-visibility {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  background: none; border: none; padding: 0; cursor: pointer; color: var(--auth-muted);
  display: flex;
}
.auth-field-error { font-size: 12px; color: var(--auth-error); margin-top: 0.3rem; }

.auth-forgot-row { text-align: right; margin: 0.4rem 0 1.25rem; }
.auth-forgot-row a { font-size: 12px; color: var(--auth-gold); font-weight: 500; }

.auth-submit {
  width: 100%; height: 48px; border-radius: 0.5rem; font-size: 15px; font-weight: 600;
  display: flex; align-items: center; justify-content: center; gap: 0.5rem;
  background: var(--auth-teal); color: #fff; border: none; cursor: pointer;
}
.auth-submit:hover { background: #0F4A59; }

.auth-divider { display: flex; align-items: center; gap: 0.75rem; margin: 1.25rem 0; }
.auth-divider hr { flex: 1; border: none; border-top: 1px solid var(--auth-divider); margin: 0; }
.auth-divider span { font-size: 12px; color: var(--auth-muted); white-space: nowrap; }

.auth-restrict {
  display: flex; align-items: center; justify-content: center; gap: 0.4rem;
  font-size: 12px; color: var(--auth-restrict); text-align: center; margin: 0;
}
.auth-restrict svg.icon { width: 14px; height: 14px; }

/* ─── App shell ─────────────────────────────────────────── */
.app-shell { display: flex; height: 100vh; overflow: hidden; }

.sidebar {
  position: relative; width: 280px; height: 100vh; background: var(--brand-teal); color: #fff;
  display: flex; flex-direction: column; flex-shrink: 0; transition: width 0.3s ease;
}
.sidebar.collapsed { width: 72px; }

.sidebar-collapse-toggle {
  position: absolute; right: -12px; top: 80px; z-index: 20; width: 24px; height: 24px;
  background: var(--brand-teal); border: 2px solid rgba(255,255,255,0.2); border-radius: 999px;
  display: flex; align-items: center; justify-content: center; color: #fff; cursor: pointer;
  box-shadow: 0 4px 6px -1px rgba(0,0,0,0.3); transition: background 0.15s ease;
}
.sidebar-collapse-toggle:hover { background: var(--brand-teal-light); }
.sidebar-collapse-toggle svg.icon { width: 14px; height: 14px; }
.sidebar-collapse-toggle .chevron-collapsed { display: none; }
.sidebar.collapsed .sidebar-collapse-toggle .chevron-expanded { display: none; }
.sidebar.collapsed .sidebar-collapse-toggle .chevron-collapsed { display: flex; }

.sidebar .logo-block { padding: 0.75rem; border-bottom: 1px solid rgba(255,255,255,0.1); display: flex; justify-content: center; overflow: hidden; flex-shrink: 0; }
.sidebar .logo-block .brand-card { background: #fff; padding: 0.4rem 0.6rem; border-radius: 0.6rem; display: inline-flex; }
.sidebar .logo-block img { max-width: none; width: 100%; display: block; }

.sidebar .profile-block { padding: 1rem 1.25rem; border-bottom: 1px solid rgba(255,255,255,0.1); display: flex; align-items: center; gap: 0.75rem; overflow: hidden; }
.sidebar.collapsed .profile-block { justify-content: center; }
.sidebar .profile-block .avatar { width: 40px; height: 40px; font-size: 0.85rem; flex-shrink: 0; }
.sidebar .profile-block .profile-text { min-width: 0; transition: opacity 0.2s ease; }
.sidebar.collapsed .profile-block .profile-text { display: none; }
.sidebar .profile-block .name { font-size: 0.875rem; font-weight: 500; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar .profile-block .role-pill {
  display: inline-block; margin-top: 0.2rem; padding: 0.1rem 0.55rem; border-radius: 999px;
  font-size: 0.7rem; background: rgba(34,197,94,0.2); color: #4ade80;
}

.sidebar nav {
  flex: 1; min-height: 0; padding: 1rem 0.75rem; overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.25) transparent;
}
.sidebar nav::-webkit-scrollbar { width: 6px; }
.sidebar nav::-webkit-scrollbar-track { background: transparent; }
.sidebar nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.25); border-radius: 999px; }
.sidebar nav::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.4); }
.sidebar .nav-section-title {
  font-size: 0.7rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em;
  color: #6b7280; padding: 0 1rem 0.5rem; margin-top: 1.25rem;
}
.sidebar .nav-section-title:first-child { margin-top: 0; }
.sidebar.collapsed .nav-section-title {
  color: transparent; font-size: 0; height: 1px; background: rgba(255,255,255,0.2);
  width: 24px; margin: 1.25rem auto 0.5rem; padding: 0;
}
.sidebar.collapsed .nav-section-title:first-child { margin-top: 0; }
.sidebar .nav-item {
  position: relative; display: flex; align-items: center; gap: 0.75rem;
  padding: 0.625rem 1rem; border-radius: 0.5rem; margin-bottom: 0.125rem;
  color: #d1d5db; font-size: 0.875rem; border-left: 3px solid transparent;
}
.sidebar.collapsed .nav-item { justify-content: center; padding: 0.625rem 0.5rem; gap: 0; }
.sidebar .nav-item svg.icon { width: 18px; height: 18px; flex-shrink: 0; }
.sidebar .nav-item:hover { background: rgba(255,255,255,0.1); color: #fff; }
.sidebar .nav-item.active { background: var(--brand-gold); color: var(--brand-teal-dark); font-weight: 700; border-left-color: var(--brand-gold); }
.sidebar.collapsed .nav-item span {
  position: absolute; left: 100%; top: 50%; transform: translateY(-50%); margin-left: 0.6rem;
  background: #111827; color: #fff; font-size: 0.75rem; font-weight: 400; padding: 0.35rem 0.6rem;
  border-radius: 0.375rem; white-space: nowrap; opacity: 0; pointer-events: none;
  transition: opacity 0.15s ease; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.3); z-index: 30;
}
.sidebar.collapsed .nav-item:hover span { opacity: 1; }

.sidebar .logout-block { padding: 0.75rem; border-top: 1px solid rgba(255,255,255,0.1); }
.sidebar .logout-btn {
  display: flex; align-items: center; gap: 0.75rem; width: 100%;
  padding: 0.625rem 1rem; border-radius: 0.5rem; background: none; border: none; cursor: pointer;
  color: #fb923c; font-size: 0.875rem;
}
.sidebar.collapsed .logout-btn { justify-content: center; padding: 0.625rem 0.5rem; gap: 0; }
.sidebar .logout-btn:hover { background: rgba(249,115,22,0.1); color: #fdba74; }
.sidebar.collapsed .logout-btn { position: relative; }
.sidebar.collapsed .logout-btn span {
  position: absolute; left: 100%; top: 50%; transform: translateY(-50%); margin-left: 0.6rem;
  background: #111827; color: #fff; font-size: 0.75rem; font-weight: 400; padding: 0.35rem 0.6rem;
  border-radius: 0.375rem; white-space: nowrap; opacity: 0; pointer-events: none;
  transition: opacity 0.15s ease; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.3); z-index: 30;
}
.sidebar.collapsed .logout-btn:hover span { opacity: 1; }

.main-column { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; }

.topbar { height: 64px; display: flex; align-items: center; justify-content: space-between; padding: 0 1.5rem; background: #fff; border-bottom: 1px solid #e5e7eb; flex-shrink: 0; }
.topbar .breadcrumb { font-size: 0.875rem; color: #6b7280; }
.topbar .breadcrumb .current { color: #111827; font-weight: 500; }
.topbar .breadcrumb .sep { margin: 0 0.4rem; color: #d1d5db; }

.topbar .user-menu { position: relative; }
.topbar .user-chip { display: flex; align-items: center; gap: 0.75rem; cursor: pointer; padding: 0.4rem 0.5rem; border-radius: 0.5rem; background: none; border: none; }
.topbar .user-chip:hover { background: #f9fafb; }
.topbar .user-chip .who { text-align: right; }
.topbar .user-chip .who .name { font-size: 0.875rem; font-weight: 500; color: #111827; }
.topbar .user-chip .who .role { font-size: 0.75rem; color: #6b7280; }

.avatar { width: 32px; height: 32px; border-radius: 999px; background: var(--brand-gold); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.8rem; flex-shrink: 0; }

.dropdown-menu {
  position: absolute; right: 0; top: calc(100% + 0.5rem); background: #fff;
  border: 1px solid #e5e7eb; border-radius: 0.75rem; min-width: 220px;
  box-shadow: 0 10px 25px -5px rgba(0,0,0,0.15); display: none; z-index: 30; overflow: hidden;
}
.dropdown-menu.open { display: block; }
.dropdown-menu .dropdown-header { padding: 0.75rem 1rem; border-bottom: 1px solid #f3f4f6; }
.dropdown-menu .dropdown-header .name { font-size: 0.875rem; font-weight: 500; color: #111827; }
.dropdown-menu .dropdown-header .role-pill { display: inline-block; margin-top: 0.25rem; padding: 0.1rem 0.5rem; border-radius: 999px; font-size: 0.7rem; background: rgba(26,58,74,0.1); color: var(--brand-teal); font-weight: 500; }
.dropdown-menu a, .dropdown-menu button {
  display: flex; align-items: center; gap: 0.6rem; width: 100%; text-align: left; padding: 0.65rem 1rem;
  font-size: 0.875rem; background: none; border: none; cursor: pointer; color: #374151;
}
.dropdown-menu a svg.icon, .dropdown-menu button svg.icon { width: 16px; height: 16px; color: #9ca3af; }
.dropdown-menu a:hover, .dropdown-menu button:hover { background: #f9fafb; }
.dropdown-menu .logout-item { border-top: 1px solid #f3f4f6; color: #dc2626; }
.dropdown-menu .logout-item svg.icon { color: #dc2626; }
.dropdown-menu .logout-item:hover { background: #fef2f2; }

.content { padding: 1.5rem; flex: 1; min-height: 0; overflow-y: auto; background: var(--bg); }

/* ─── Cards / page header ───────────────────────────────── */
.page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.25rem; }
.page-header h1 { font-size: 1.35rem; margin: 0; }
.page-header .subtitle { color: var(--text-muted); font-size: 0.875rem; margin-top: 0.15rem; }
.card { background: #fff; border: 1px solid var(--border); border-radius: 0.75rem; padding: 1.5rem; }

/* ─── Buttons ────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 0.4rem; justify-content: center;
  padding: 0.55rem 1.1rem; border-radius: 0.5rem; font-size: 0.875rem; font-weight: 600;
  border: 1px solid transparent; cursor: pointer;
}
.btn-primary { background: var(--brand-teal); color: #fff; }
.btn-primary:hover { background: var(--brand-teal-light); }
.btn-gold { background: var(--brand-gold); color: #fff; }
.btn-gold:hover { background: var(--brand-gold-light); }
.btn-outline { background: #e9eaec; color: var(--text); border-color: #e9eaec; }
.btn-outline:hover { background: #dcdde0; }
.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:hover { background: #b91c1c; }
.btn-danger { background: var(--danger); color: #fff; }
.btn-sm { padding: 0.35rem 0.7rem; font-size: 0.8rem; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ─── Forms ──────────────────────────────────────────────── */
.form-group { margin-bottom: 1.1rem; }
.form-group label { display: block; font-size: 0.85rem; font-weight: 600; margin-bottom: 0.35rem; }
.split-datetime { display: flex; gap: 0.5rem; }
.split-datetime > * { min-width: 0; flex: 1; }
.form-control {
  width: 100%; padding: 0.6rem 0.75rem; border: 1px solid var(--border); border-radius: 0.5rem;
  font-size: 0.9rem; font-family: inherit;
}
.form-control:focus { outline: 2px solid var(--brand-teal-light); outline-offset: -1px; border-color: var(--brand-teal); }
.form-control-multi {
  width: 100%; padding: 0.35rem; border: 1px solid var(--border); border-radius: 0.5rem;
  font-size: 0.9rem; font-family: inherit;
}
.form-control-multi:focus { outline: 2px solid var(--brand-teal-light); outline-offset: -1px; border-color: var(--brand-teal); }
.form-control-multi option { padding: 0.3rem 0.5rem; border-radius: 0.3rem; }
.form-control-multi option:checked { background: var(--brand-teal-light); }
.field-error { color: var(--danger); font-size: 0.8rem; margin-top: 0.3rem; }
.required-mark { color: var(--danger); font-weight: 700; }
.form-hint { color: var(--text-muted); font-size: 0.8rem; margin-top: 0.3rem; }

/* Token Create's "Scan Document to Auto-fill (OCR)" status line — bold
   and color-coded by outcome so it's actually noticeable (a plain
   .form-hint is too easy to miss), both while scanning is in progress and
   once the result (success/partial/error) is known. */
.ocr-status { font-size: 0.85rem; font-weight: 700; margin-top: 0.4rem; }
.ocr-status--scanning { color: var(--info); }
.ocr-status--success { color: var(--success); }
.ocr-status--warning { color: var(--warning); }
.ocr-status--error { color: var(--danger); }

/* ─── Searchable select (progressive enhancement over <select class="form-control">) ─── */
.ss-select { position: relative; }
.ss-select select.form-control { position: absolute; opacity: 0; pointer-events: none; height: 0; padding: 0; border: 0; }
.ss-trigger {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
  padding: 0.6rem 0.75rem; border: 1px solid var(--border); border-radius: 0.5rem;
  font-size: 0.9rem; font-family: inherit; background: #fff; cursor: pointer; color: var(--text);
}
.ss-trigger.placeholder { color: var(--text-muted); }
.ss-trigger.ss-disabled { background: var(--bg); color: var(--text-muted); cursor: not-allowed; }
/* Without min-width:0, a flex item won't shrink below its text's full
   natural width — a long selected value (e.g. "Kumbakonam") in a narrow
   trigger (a 3-up Pin Code/City/State row) then refuses to shrink at all,
   shoving the dropdown chevron out past the box or straight through the
   tail of the text instead of the label truncating around it. */
.ss-trigger-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ss-trigger svg.icon { width: 16px; height: 16px; color: var(--text-muted); flex-shrink: 0; }
.ss-select.open .ss-trigger { outline: 2px solid var(--brand-teal-light); outline-offset: -1px; border-color: var(--brand-teal); }
.ss-panel {
  /* Above .modal-overlay's z-index:50 — a searchable select can sit
     inside a modal (e.g. Conclusion's Add Replaced Part popup), and its
     panel must render above that modal's own backdrop, not behind it. */
  display: none; position: absolute; top: calc(100% + 0.3rem); left: 0; right: 0; z-index: 60;
  background: #fff; border: 1px solid var(--border); border-radius: 0.5rem;
  box-shadow: 0 8px 20px rgba(0,0,0,0.12); overflow: hidden;
}
.ss-select.open .ss-panel { display: block; }
.ss-panel-search {
  display: flex; align-items: center; gap: 0.4rem; padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--border);
}
.ss-panel-search svg.icon { width: 15px; height: 15px; color: var(--text-muted); flex-shrink: 0; }
.ss-panel-search input {
  border: 0; outline: none; font-size: 0.875rem; font-family: inherit; width: 100%; padding: 0.15rem 0;
}
.ss-options { max-height: 220px; overflow-y: auto; padding: 0.3rem; }
.ss-option {
  padding: 0.5rem 0.6rem; border-radius: 0.4rem; font-size: 0.875rem; cursor: pointer;
}
.ss-option:hover, .ss-option.active { background: var(--bg); }
.ss-option.selected { color: var(--brand-teal); font-weight: 600; }
.ss-empty { padding: 0.6rem; font-size: 0.8rem; color: var(--text-muted); text-align: center; }


/* ─── Site Configuration — tab strip (matches IMS TabBar.jsx) ─── */
.sc-tabs { display: flex; gap: 0; border-bottom: 1px solid #e5e7eb; margin-bottom: 1.25rem; }
.sc-tab {
  padding: 0.75rem 1.25rem; font-size: 0.875rem; font-weight: 500; color: #6b7280;
  border-bottom: 3px solid transparent; margin-bottom: -1px; border-radius: 0.4rem 0.4rem 0 0;
  transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}
.sc-tab:hover { color: #374151; background: #f9fafb; }
.sc-tab.active {
  color: var(--brand-teal); font-weight: 700; border-bottom-color: var(--brand-teal);
  background: rgba(26,58,74,0.08);
}
.checkbox-row { display: flex; align-items: center; gap: 0.5rem; }

/* ─── Alerts ─────────────────────────────────────────────── */
.alert { padding: 0.8rem 1rem; border-radius: 0.5rem; font-size: 0.875rem; margin-bottom: 1rem; }
.alert-error { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }
.alert-success { background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; }

/* ─── Tables ─────────────────────────────────────────────── */
table.data-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
table.data-table th {
  text-align: left; padding: 0.75rem 0.9rem; background: var(--bg); color: var(--text);
  font-weight: 700; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.03em;
  border-bottom: 2px solid var(--border);
}
table.data-table td { padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--border); }
table.data-table tr:last-child td { border-bottom: none; }
table.data-table thead th:last-child { text-align: center; }
table.data-table .row-actions { display: flex; gap: 0.4rem; justify-content: center; }
table.nowrap-table th, table.nowrap-table td { white-space: nowrap; }
.empty-state { text-align: center; padding: 2.5rem 1rem; color: var(--text-muted); }

/* Diagnosis Page — Rail Pressure During Cranking / Back Leak Test /
   Closed Rail Pressure combined checklist table (client's reference FCR
   layout: a dark green row-label column plus dark green column
   sub-headers, white value cells). */
table.diag-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
table.diag-table th, table.diag-table td {
  border: 1px solid var(--border); padding: 0.55rem 0.7rem; text-align: center; vertical-align: middle;
}
table.diag-table .diag-label {
  background: var(--diag-green); color: #fff; font-weight: 600; text-align: left; white-space: nowrap;
}
table.diag-table .diag-subhead { background: var(--diag-green); color: #fff; font-weight: 600; }
table.diag-table td.diag-value { background: #fff; }
table.diag-table .diag-value .form-control { text-align: center; margin: 0; }

/* ─── Badges ─────────────────────────────────────────────── */
.badge { display: inline-flex; align-items: center; padding: 0.2rem 0.6rem; border-radius: 999px; font-size: 0.75rem; font-weight: 600; }
.badge-success { background: #f0fdf4; color: #166534; }
.badge-muted { background: #f3f4f6; color: #4b5563; }
.badge-warning { background: #fefce8; color: #854d0e; }
.badge-danger { background: #fef2f2; color: #991b1b; }
.badge-info { background: #eff6ff; color: #1e40af; }

/* ─── Import/Export modal (list pages) ───────────────────── */
.import-form-area { display: flex; flex-direction: column; gap: 1rem; }
.import-template-box {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.9rem 1rem; border-radius: 0.5rem; background: #eff6ff; border: 1px solid #bfdbfe;
}
.import-column-ref-header { display: flex; align-items: center; justify-content: space-between; }
.import-column-ref-title { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); }
.import-required-legend { display: flex; align-items: center; gap: 0.3rem; font-size: 0.75rem; color: var(--text-muted); }
.import-required-legend .dot { width: 6px; height: 6px; border-radius: 999px; background: var(--danger); display: inline-block; }
.import-column-ref { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.chip {
  display: inline-flex; align-items: center; padding: 0.2rem 0.6rem; border-radius: 999px;
  font-size: 0.75rem; font-weight: 600; font-family: monospace; border: 1px solid transparent;
}
.chip-required { background: #fef2f2; color: #b91c1c; border-color: #fecaca; }
.chip-optional { background: #f3f4f6; color: #4b5563; }
.import-dropzone {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.4rem;
  padding: 1.75rem 1rem; border: 1.5px dashed var(--border); border-radius: 0.5rem;
  color: var(--text-muted); font-size: 0.85rem; cursor: pointer; text-align: center;
}
.import-dropzone:hover { border-color: var(--brand-teal); background: #f9fafb; }
.import-dropzone svg.icon { color: #9ca3af; width: 22px; height: 22px; }
.import-dropzone-hint { font-size: 0.75rem; color: #9ca3af; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.import-stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.75rem; }
.import-stat { text-align: center; padding: 0.75rem 0.5rem; border: 1px solid var(--border); border-radius: 0.5rem; }
.import-stat-value { font-size: 1.4rem; font-weight: 700; color: var(--text); }
.import-stat-label { font-size: 0.75rem; color: var(--text-muted); margin-top: 0.2rem; }

/* ─── Pagination (list pages) ────────────────────────────── */
.page-size-select { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8rem; color: var(--text-muted); }
.page-size-select select { padding: 0.3rem 0.5rem; border: 1px solid var(--border); border-radius: 0.4rem; font-size: 0.8rem; font-family: inherit; }

.pagination-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.9rem 1.25rem; border-top: 1px solid var(--border); flex-wrap: wrap; gap: 0.75rem;
}
.pagination-info { font-size: 0.8rem; color: var(--text-muted); }
.pagination-controls { display: flex; align-items: center; gap: 0.3rem; flex-wrap: wrap; }
.pagination-controls a, .pagination-controls span.page-num {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 32px; height: 32px; padding: 0 0.5rem; border-radius: 0.4rem;
  font-size: 0.8rem; border: 1px solid var(--border); color: var(--text);
}
.pagination-controls a:hover { background: var(--bg); }
.pagination-controls span.page-num.active { background: var(--brand-teal); border-color: var(--brand-teal); color: #fff; font-weight: 600; }
.pagination-controls span.disabled { opacity: 0.4; }
.pagination-controls span.page-num-current {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 48px; height: 32px; padding: 0 0.6rem; margin: 0 0.2rem;
  font-size: 0.8rem; font-weight: 600; color: var(--text);
}

/* ─── Filter bar (list pages) ────────────────────────────── */
.filter-bar { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; margin-bottom: 1rem; }
.filter-search { position: relative; flex: 1; min-width: 200px; }
.filter-search > svg.icon { position: absolute; left: 0.75rem; top: 50%; transform: translateY(-50%); color: #9ca3af; width: 16px; height: 16px; }
.filter-search input { width: 100%; padding: 0.5rem 2.2rem 0.5rem 2.2rem; border: 1px solid var(--border); border-radius: 0.5rem; font-size: 0.875rem; font-family: inherit; }
.filter-search input:focus { outline: none; border-color: var(--brand-teal); }
.filter-search .clear-btn { position: absolute; right: 0.5rem; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; color: #9ca3af; padding: 0.2rem; display: flex; }
.filter-select { padding: 0.5rem 0.75rem; border: 1px solid var(--border); border-radius: 0.5rem; font-size: 0.875rem; font-family: inherit; background: #fff; min-width: 160px; }
.filter-clear-link { background: none; border: none; padding: 0.5rem 0.5rem; font-size: 0.8rem; font-weight: 500; color: var(--text-muted); cursor: pointer; }
.filter-clear-link:hover { color: var(--brand-teal); }

/* ─── Row icon action buttons (list pages) ──────────────── */
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 0.4rem; background: none; border: none; cursor: pointer;
  color: #6b7280;
}
.icon-btn:hover { background: #f3f4f6; }
.icon-btn.danger { color: #ef4444; }
.icon-btn.success { color: #16a34a; }
.icon-btn.teal { color: var(--brand-teal); }
.icon-btn.info { color: #2563eb; }
.icon-btn.info:hover { background: #eff6ff; }
.icon-btn.info svg.icon { width: 16px; height: 16px; }

/* ─── Confirm modal (activate/deactivate, list pages) ───── */
.confirm-modal-message { margin: 0 0 1.1rem; color: #374151; font-size: 0.875rem; line-height: 1.5; }
.confirm-modal-actions { display: flex; gap: 0.6rem; justify-content: flex-end; }

/* ─── Record-info modal ──────────────────────────────────── */
.modal-overlay {
  display: none; position: fixed; inset: 0; background: rgba(15, 23, 42, 0.5);
  align-items: center; justify-content: center; z-index: 50; padding: 1rem;
}
.modal-overlay.open { display: flex; }
.modal-box { background: #fff; border-radius: 0.75rem; width: 100%; max-width: 448px; box-shadow: 0 20px 40px -10px rgba(0,0,0,0.25); }
.modal-box .modal-header { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.5rem; border-bottom: 1px solid #f3f4f6; }
.modal-box .modal-header h3 { margin: 0; font-size: 1.125rem; font-weight: 600; color: #111827; }
.modal-box .modal-close { background: none; border: none; cursor: pointer; color: #6b7280; padding: 0.2rem; display: flex; border-radius: 0.4rem; }
.modal-box .modal-close:hover { background: #f3f4f6; }
.modal-box .modal-close svg.icon { width: 20px; height: 20px; }
.modal-box .modal-body { padding: 1rem 1.5rem; display: flex; flex-direction: column; gap: 1rem; }
.modal-box .modal-footer {
  display: flex; align-items: center; justify-content: flex-end; gap: 0.6rem;
  padding: 1rem 1.5rem; border-top: 1px solid #f3f4f6;
}
.audit-row { border: 1px solid #e5e7eb; border-radius: 0.5rem; padding: 1rem; }
.audit-row .audit-label { font-size: 0.75rem; font-weight: 600; color: #6b7280; text-transform: uppercase; letter-spacing: 0.025em; margin-bottom: 0.5rem; }
.audit-row .audit-line { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; color: #1f2937; margin-bottom: 0.375rem; }
.audit-row .audit-line:last-child { margin-bottom: 0; }
.audit-row .audit-line:last-child { color: #4b5563; }
.audit-row .audit-line svg.icon { width: 16px; height: 16px; color: #9ca3af; flex-shrink: 0; }
.audit-value-panel { border-radius: 0.5rem; padding: 0.9rem; margin-bottom: 0.75rem; }
.audit-value-panel:last-child { margin-bottom: 0; }
.audit-value-panel .audit-label { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 0.5rem; }
.audit-value-panel pre { margin: 0; font-size: 0.8rem; white-space: pre-wrap; word-break: break-word; }
.audit-value-panel.old-value { background: #fef2f2; border: 1px solid #fecaca; }
.audit-value-panel.old-value .audit-label { color: #991b1b; }
.audit-value-panel.new-value { background: #f0fdf4; border: 1px solid #bbf7d0; }
.audit-value-panel.new-value .audit-label { color: #166534; }
.audit-row-empty { background: #f9fafb; }
.audit-row-empty .audit-label { margin-bottom: 0.25rem; }
.audit-empty-text { margin: 0; font-size: 0.875rem; color: #9ca3af; }

/* ─── Numbered section cards (create/edit forms) ────────── */
.form-section {
  background: #fff; border: 1px solid var(--border); border-radius: 0.75rem; padding: 1.5rem; margin-bottom: 1.25rem;
  box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05);
}
.form-section-header { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 1.25rem; padding-bottom: 0.9rem; border-bottom: 1px solid var(--border); }
.form-section-header .num {
  width: 26px; height: 26px; border-radius: 6px; background: var(--info, #2563eb); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 0.8rem; font-weight: 700; flex-shrink: 0;
}
.form-section-header h3 { margin: 0; font-size: 1rem; font-weight: 700; color: var(--info, #2563eb); text-transform: uppercase; letter-spacing: 0.02em; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem 1.5rem; }

/* ─── Create/Edit Token: Vehicle Details + Customer/LIS Details half-half ── */
.form-row-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; align-items: stretch; }
.form-row-2col .form-section { margin-bottom: 0; height: 100%; }
@media (max-width: 900px) { .form-row-2col { grid-template-columns: 1fr; } }

.view-field-label {
  font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--text-muted); margin-bottom: 0.3rem;
}
.view-field-value { font-size: 0.875rem; font-weight: 600; color: var(--text); }

.page-header-back {
  display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px;
  border-radius: 0.5rem; color: var(--text-muted); margin-right: 0.6rem; flex-shrink: 0;
}
.page-header-back:hover { background: var(--bg); color: var(--text); }
.page-header-title-row { display: flex; align-items: center; }

/* ─── Status badge with dot ──────────────────────────────── */
.status-badge { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.2rem 0.6rem; border-radius: 999px; font-size: 0.75rem; font-weight: 600; }
.status-badge .dot { width: 6px; height: 6px; border-radius: 999px; }
.status-badge.is-active { background: #f0fdf4; color: #166534; }
.status-badge.is-active .dot { background: #16a34a; }
.status-badge.is-inactive { background: #f3f4f6; color: #4b5563; }
.status-badge.is-inactive .dot { background: #9ca3af; }

/* ─── Permission matrix ──────────────────────────────────── */
.perm-matrix { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.perm-matrix th, .perm-matrix td { padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--border); text-align: center; }
.perm-matrix td:first-child, .perm-matrix th:first-child { text-align: left; }
.perm-matrix .feature-label { font-weight: 600; }

.text-muted { color: var(--text-muted); }
.flex-between { display: flex; align-items: center; justify-content: space-between; }

/* ─── Drag-and-drop upload zone ──────────────────────────── */
.attachments-grid { grid-template-columns: repeat(4, 1fr); }
.attachments-grid.attachments-grid-3 { grid-template-columns: repeat(3, 1fr); }
.attachments-grid.attachments-grid-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 900px) { .attachments-grid { grid-template-columns: repeat(2, 1fr); } }

.dropzone {
  border: 2px dashed var(--border);
  border-radius: 8px;
  padding: 1.25rem;
  min-height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 0.85rem;
  background: var(--bg);
  transition: border-color 0.15s, background 0.15s;
}
.dropzone .dropzone-label { font-weight: 700; }

.attachments-blink-hint {
  font-weight: 700;
  animation: attachments-blink 1s step-start infinite;
}
@keyframes attachments-blink {
  50% { opacity: 0; }
}
.dropzone:hover { border-color: var(--primary, #2563eb); }
.dropzone.dragover { border-color: var(--primary, #2563eb); background: #eff6ff; }
.dropzone.has-file { border-style: solid; color: var(--text); }
.dropzone input[type="file"] { display: none; }
.dropzone-hint { display: block; margin-top: 0.25rem; font-size: 0.75rem; color: var(--text-muted); }

/* ─── UTC Token creation/edit header badge ───────────────────── */
.utc-token-badge {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: #166534;
  color: #fff;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  font-size: 0.85rem;
  white-space: nowrap;
}
.utc-token-badge svg { vertical-align: -2px; margin-right: 0.2rem; width: 14px; height: 14px; }

/* ─── Radio-styled choice fields (Carrying the Parts, etc.) ──── */
.form-group ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 1.25rem; align-items: center; min-height: 2.4rem; }
.form-group ul li { display: flex; align-items: center; }
.form-group ul li label { display: flex; align-items: center; gap: 0.35rem; font-weight: 400; margin: 0; cursor: pointer; }
.form-group ul input[type="radio"] { width: auto; margin: 0; }