/* 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; }

/* Sign in with 1LIS (webui/oidc.py) — outlined, secondary to the password form. */
.auth-sso {
  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: #fff; color: var(--auth-teal); border: 1.5px solid var(--auth-teal); text-decoration: none;
}
.auth-sso:hover { background: #EEF5F7; }
.auth-sso svg.icon { width: 18px; height: 18px; }

.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; }
/* A top-level menu with no sub-items (Gyan Mandir, Help) — set apart
   from the section above it, like a section of its own. */
.sidebar .nav-item-main { margin-top: 1.25rem; }
.sidebar .nav-item-main + .nav-item-main { 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; }

/* ─── Dashboard stat tiles ───────────────────────────────── */
.dashboard-stat-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem;
}
.dashboard-stat-card {
  padding: 1.25rem; background: var(--brand-teal); border-color: var(--brand-teal);
  border-left: 4px solid var(--brand-gold); color: #fff;
  display: block; text-decoration: none; transition: background 0.15s, transform 0.15s;
  position: relative; padding-right: 4rem;
}
a.dashboard-stat-card:hover { transform: translateY(-2px); }
.dashboard-stat-icon {
  position: absolute; top: 1rem; right: 1rem; width: 2.5rem; height: 2.5rem; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(201, 168, 76, 0.18); color: var(--brand-gold);
}
.dashboard-stat-icon svg.icon { width: 20px; height: 20px; }
a.dashboard-stat-card:hover { background: var(--brand-teal-light); }
.dashboard-stat-value { font-size: 2.25rem; font-weight: 700; color: var(--brand-gold); line-height: 1.1; }
.dashboard-stat-label { font-size: 0.85rem; font-weight: 600; margin-top: 0.45rem; opacity: 0.92; }
.dashboard-stat-hint { color: var(--text-muted); font-size: 0.8rem; margin-top: 0.2rem; }

/* ─── Dashboard panels (charts, breakdowns, recent tickets) ── */
.dash-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 1rem; }
.dash-panel {
  padding: 1.1rem 1.25rem; min-width: 0;
  box-shadow: 0 1px 2px rgba(15, 37, 48, 0.04), 0 4px 14px rgba(15, 37, 48, 0.06);
  transition: box-shadow 0.15s, transform 0.15s;
}
.dash-panel:hover { box-shadow: 0 2px 4px rgba(15, 37, 48, 0.06), 0 10px 24px rgba(15, 37, 48, 0.09); transform: translateY(-1px); }
.dash-panel-wide, .dash-panel-full { grid-column: 1 / -1; }
.dash-panel-head { display: flex; justify-content: space-between; align-items: baseline; gap: 0.75rem; margin-bottom: 0.9rem; }
.dash-panel-head h3 {
  margin: 0; font-size: 1rem; color: var(--text); display: flex; align-items: center; gap: 0.5rem;
  position: relative; padding-bottom: 0.45rem;
}
.dash-panel-head h3::after {
  content: ''; position: absolute; left: 0; bottom: 0; width: 2.25rem; height: 2px;
  background: var(--brand-gold); border-radius: 2px;
}
.dash-panel-icon {
  width: 1.9rem; height: 1.9rem; border-radius: 0.5rem; display: inline-flex; align-items: center; justify-content: center;
  background: rgba(26, 58, 74, 0.08); color: var(--brand-teal);
}
.dash-panel-icon svg.icon { width: 16px; height: 16px; }
.dash-panel-sub { color: var(--text-muted); font-size: 0.8rem; }
a.dash-panel-sub:hover { color: var(--brand-teal); }
.dash-empty { color: var(--text-muted); font-size: 0.875rem; margin: 0.25rem 0; }

.dash-columns { display: flex; gap: 0.5rem; height: 180px; padding-top: 1.2rem; }
.dash-columns-axis { display: flex; flex-direction: column; justify-content: space-between; color: var(--text-muted); font-size: 0.75rem; text-align: right; min-width: 1.5rem; }
.dash-columns-plot {
  flex: 1; display: flex; align-items: flex-end; gap: 2px; border-bottom: 1px solid var(--border);
  background-image: linear-gradient(to top, #eef0f2 1px, transparent 1px); background-size: 100% 25%;
}
.dash-col { flex: 1; height: 100%; display: flex; align-items: flex-end; justify-content: center; cursor: default; }
.dash-col-bar { position: relative; width: 100%; max-width: 24px; min-height: 2px; background: var(--brand-teal-light); border-radius: 4px 4px 0 0; }
.dash-col-bar.is-peak { background: var(--brand-teal); }
.dash-col-peak {
  position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); margin-bottom: 0.25rem;
  font-size: 0.75rem; font-weight: 700; color: var(--text); white-space: nowrap;
}
.dash-col:hover .dash-col-bar { background: var(--brand-teal); }
.dash-columns-labels { display: flex; justify-content: space-between; color: var(--text-muted); font-size: 0.75rem; margin: 0.3rem 0 0 2rem; }

.dash-bar-row { display: grid; grid-template-columns: minmax(0, 9rem) 1fr 2.5rem; align-items: center; gap: 0.6rem; padding: 0.3rem 0; }
.dash-bar-label { font-size: 0.85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-bar-track { height: 12px; background: #eef2f4; border-radius: 999px; overflow: hidden; }
.dash-bar { display: block; height: 100%; min-width: 4px; background: var(--brand-teal-light); border-radius: 999px; }
.dash-bar-label { display: flex; align-items: center; gap: 0.4rem; }
.dash-dot { width: 0.6rem; height: 0.6rem; border-radius: 50%; flex: none; background: var(--brand-teal-light); }
/* Warranty decision colours — status meaning, always shown with the text label. */
.dash-bar.decision-warranty_accepted, .dash-dot.decision-warranty_accepted { background: var(--success); }
.dash-bar.decision-warranty_rejected, .dash-dot.decision-warranty_rejected { background: var(--danger); }
.dash-bar.decision-goodwill, .dash-dot.decision-goodwill { background: var(--warning); }
.dash-bar.decision-cancelled, .dash-dot.decision-cancelled { background: #9ca3af; }
.dash-bar-row:hover .dash-bar { filter: brightness(0.88); }
.dash-bar-value { font-size: 0.85rem; font-weight: 600; text-align: right; }

.dash-pending-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.dash-pending-head { display: flex; justify-content: space-between; align-items: center; font-size: 0.85rem; font-weight: 600; margin-bottom: 0.4rem; }
.dash-pending-count { background: var(--brand-gold); color: #fff; border-radius: 999px; padding: 0.05rem 0.55rem; font-size: 0.8rem; }
.dash-pending { background: var(--bg); border: 1px solid var(--border); border-radius: 0.6rem; padding: 0.75rem; }
.dash-pending-item {
  display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; padding: 0.45rem 0.6rem; margin-top: 0.35rem;
  background: #fff; border: 1px solid var(--border); border-radius: 0.45rem; font-size: 0.85rem; color: var(--text); text-decoration: none;
}
.dash-pending-ticket { font-weight: 600; }
.dash-age { font-size: 0.75rem; font-weight: 600; padding: 0.1rem 0.5rem; border-radius: 999px; background: #eef0f2; color: var(--text-muted); white-space: nowrap; }
.dash-age.age-mid { background: #fdf3e3; color: #92400e; }
.dash-age.age-old { background: #fdecec; color: #991b1b; }
.dash-pending-item:hover { border-color: var(--brand-teal-light); color: var(--brand-teal); }

.dash-table-wrap { overflow-x: auto; }
.dash-table td, .dash-table th { padding: 0.5rem 0.6rem; }
.dash-table th { font-size: 0.75rem; }
.dash-table td:not(:first-child), .dash-table th:not(:first-child) { text-align: right; width: 3.5rem; }
.dash-table.nowrap-table td, .dash-table.nowrap-table th { text-align: left; width: auto; }
.dash-table a { color: var(--brand-teal); font-weight: 600; text-decoration: none; }
.dash-zebra tbody tr:nth-child(even) td { background: #f9fafb; }
.dash-zebra tbody tr:hover td { background: #eef4f6; }
.dash-pill { display: inline-block; font-size: 0.75rem; font-weight: 600; padding: 0.15rem 0.6rem; border-radius: 999px; background: #eef0f2; color: var(--text); }
.dash-pill.stage-1 { background: #eaf1fe; color: #1e40af; }
.dash-pill.stage-2 { background: #fdf3e3; color: #92400e; }
.dash-pill.stage-3 { background: #e9f7ee; color: #166534; }
.dash-pill.decision-warranty_accepted { background: #e9f7ee; color: #166534; }
.dash-pill.decision-warranty_rejected { background: #fdecec; color: #991b1b; }
.dash-pill.decision-goodwill { background: #fdf3e3; color: #92400e; }
.dash-pill.decision-cancelled { background: #eef0f2; color: #4b5563; }

.dash-tooltip { position: fixed; z-index: 1000; pointer-events: none; background: var(--text); color: #fff; font-size: 0.8rem; padding: 0.3rem 0.55rem; border-radius: 0.35rem; white-space: nowrap; }

@media (max-width: 900px) {
  .dash-grid, .dash-pending-grid { grid-template-columns: 1fr; }
}

/* ─── 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; }
/* Chassis/Engine Number duplicate-check row — error text plus a View icon
   linking to the existing ticket, shown together (webui:token-duplicate-check). */
.field-error-row { display: flex; align-items: center; gap: 0.35rem; margin-top: 0.3rem; }
.field-error-row .field-error-text { color: var(--danger); font-size: 0.8rem; }
.field-error-row .icon-btn { width: 22px; height: 22px; }
/* Our own `display` rules above (and .icon-btn's own `display: inline-flex`)
   outrank the browser's default `[hidden] { display: none }` rule once a
   same-specificity author rule exists for an element — so without this,
   the row/icon would stay visible even with the `hidden` attribute set. */
.field-error-row[hidden], .icon-btn[hidden] { display: none; }
.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,
.ss-select select.form-control-multi { 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; }


/* ─── Image/Video attachment tiles (Diagnosis page's Photos/Videos lists,
   pending uploads and already-saved alike) — a thumbnail grid instead of
   a plain filename-per-row list, client request. ─── */
.attachment-tile-grid { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.attachment-tile {
  display: flex; flex-direction: column; gap: 0.2rem; width: 110px; flex-shrink: 0;
}
.attachment-tile .attachment-tile-media {
  position: relative; width: 110px; height: 110px; border-radius: 0.5rem; overflow: hidden;
  background: var(--bg); border: 1px solid #e5e7eb;
}
.attachment-tile img, .attachment-tile video {
  width: 100%; height: 100%; object-fit: cover; display: block; background: #000;
}
.attachment-tile .attachment-tile-checkbox {
  position: absolute; top: 0.3rem; left: 0.3rem; width: 16px; height: 16px; z-index: 2;
}
.attachment-tile .attachment-tile-remove {
  position: absolute; top: 0.25rem; right: 0.25rem; z-index: 2;
  background: rgba(0, 0, 0, 0.55); color: #fff; border: 0; border-radius: 50%;
  width: 26px; height: 26px; display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 1.1rem; line-height: 1; padding: 0;
}
/* The plain-row "×" remove button next to a pending upload's filename
   (ICOMET Report, Others, VJO, Service History file lists — wireDropzone's
   non-thumbnail showFileList rows, base.html) — bigger than the shared
   .icon-btn default so it reads clearly as a remove action. */
.icon-btn.pending-file-remove-btn { width: 26px; height: 26px; font-size: 1.3rem; }
.attachment-tile .attachment-tile-view {
  position: absolute; bottom: 0.25rem; right: 0.25rem; z-index: 2;
  background: rgba(0, 0, 0, 0.55); color: #fff; border-radius: 50%;
  width: 22px; height: 22px; display: flex; align-items: center; justify-content: center;
}
.attachment-tile .attachment-tile-video-badge {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: #fff; background: rgba(0, 0, 0, 0.15); pointer-events: none;
}
.attachment-tile .attachment-tile-name {
  padding: 0 0.1rem; color: var(--text-muted, #6b7280);
  font-size: 0.78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.attachment-tile.ss-option-drop-target .attachment-tile-media { outline: 2px solid var(--brand-teal); outline-offset: -2px; }


/* ─── 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; }

/* ─── Toast (Token Creation's Engine/Chassis duplicate warning) ───── */
/* A container, not each .toast individually, owns the fixed position —
   Chassis Number and Engine Number can both be flagged at once (e.g. both
   OCR-filled with values that already exist), and two independently
   fixed-position toasts would render stacked exactly on top of each
   other, each unreadable through the other. The flex column here stacks
   any number of simultaneous toasts, spaced apart, instead. */
.toast-container {
  position: fixed; top: 1rem; right: 1rem; z-index: 1000;
  display: flex; flex-direction: column; gap: 0.5rem;
  pointer-events: none;
}
.toast {
  padding: 0.8rem 1.1rem; border-radius: 0.5rem; font-size: 0.875rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  opacity: 0; transform: translateY(-8px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: auto;
}
.toast-visible { opacity: 1; transform: translateY(0); }
.toast-error { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }

/* ─── 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.data-table tr.group-row td {
  background: #f3f6f7; color: var(--brand-teal); font-weight: 600; padding: 0.5rem 0.9rem;
}
table.data-table tr.group-row .group-row-count { color: var(--text-muted); font-weight: 400; }

/* ─── Conclusion: CR System row checkboxes ────────────────── */
#cr-system-section table.data-table td:first-child,
#cr-system-section table.data-table th:first-child { width: 2.5rem; text-align: center; }
#cr-system-section table.data-table td:first-child input[type="checkbox"] { width: 1.05rem; height: 1.05rem; }
table.nowrap-table th, table.nowrap-table td { white-space: nowrap; }
.empty-state { text-align: center; padding: 2.5rem 1rem; color: var(--text-muted); }

/* ─── UTC Summary (Token List): sticky columns ──────────────
   S.No / Actions / UTC Ticket No / Chassis No / Engine No / Status /
   Warranty (client request) stay pinned to the left edge while the
   remaining columns scroll underneath them — these 7 are the first 7
   columns in the table (token_list.html), in this exact order, so each
   one's sticky `left` is just the running total of the fixed widths
   below it. Explicit widths (not content-driven) are what make that
   running total possible at all. z-index lifts them above the
   scrolling columns, which would otherwise paint on top as they slide
   underneath (later DOM siblings paint over earlier ones by default). */
table.sticky-token-table th:nth-child(1), table.sticky-token-table td:nth-child(1) { position: sticky; left: 0; width: 3.2rem; min-width: 3.2rem; z-index: 1; }
table.sticky-token-table th:nth-child(2), table.sticky-token-table td:nth-child(2) { position: sticky; left: 3.2rem; width: 8.5rem; min-width: 8.5rem; z-index: 1; text-align: center; }
table.sticky-token-table th:nth-child(3), table.sticky-token-table td:nth-child(3) { position: sticky; left: 11.7rem; width: 8rem; min-width: 8rem; z-index: 1; }
table.sticky-token-table th:nth-child(4), table.sticky-token-table td:nth-child(4) { position: sticky; left: 19.7rem; width: 8.5rem; min-width: 8.5rem; z-index: 1; }
table.sticky-token-table th:nth-child(5), table.sticky-token-table td:nth-child(5) { position: sticky; left: 28.2rem; width: 8rem; min-width: 8rem; z-index: 1; }
table.sticky-token-table th:nth-child(6), table.sticky-token-table td:nth-child(6) { position: sticky; left: 36.2rem; width: 9rem; min-width: 9rem; z-index: 1; }
table.sticky-token-table th:nth-child(7), table.sticky-token-table td:nth-child(7) { position: sticky; left: 45.2rem; width: 5rem; min-width: 5rem; z-index: 1; box-shadow: 2px 0 4px -2px rgba(0, 0, 0, 0.2); }
table.sticky-token-table td:nth-child(-n+7) { background: #fff; }
table.sticky-token-table th:nth-child(-n+7) { background: var(--bg); z-index: 2; }

/* 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%; table-layout: fixed; 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;
  overflow-wrap: break-word;
}
table.diag-table .diag-label {
  background: var(--diag-green); color: #fff; font-weight: 600; text-align: left;
}
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);
}
.page-jump-input {
  width: 84px; height: 32px; padding: 0 0.5rem; border: 1px solid var(--border); border-radius: 0.4rem;
  font-size: 0.8rem; font-family: inherit; color: var(--text);
}
.page-jump-input:focus { outline: 2px solid var(--brand-teal-light); outline-offset: -1px; border-color: var(--brand-teal); }
.page-jump-error { font-size: 0.78rem; color: #dc2626; display: none; }

/* ─── 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; }
/* Plain text filter input (no leading search icon, unlike .filter-search)
   with its own trailing "clear this filter" (x) button — OEM Dealer/
   Pincode on the UTC Summary filter bar. */
.filter-clear-wrap { position: relative; display: inline-flex; }
.filter-clear-wrap input { padding-right: 2.2rem; }
.filter-clear-wrap .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; }
/* Dropdown filter (UTC Summary filter bar) + its own "remove just this
   filter" icon, shown only while that filter has a value — client
   request: every active filter needs a visible remove icon next to it,
   not only the free-text ones (which already had one via .filter-clear-wrap
   above). Plain inline placement (not absolutely overlaid like the text
   inputs') since a <select>'s width already varies with its chosen label. */
.filter-inline-clear { display: inline-flex; align-items: center; gap: 0.15rem; }
.filter-inline-clear .icon-btn { width: 26px; height: 26px; }
.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; }
/* align-items: start — CSS Grid's default (stretch) makes every
   .form-group in a row match the tallest sibling's height; since a
   .form-group's own hint text often differs in line count from field to
   field (or is absent entirely), that stretch left visible empty space
   under the shorter fields (e.g. Diagnosis/Conclusion's Case
   Identification row) instead of each field sizing to its own content. */
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem 1.5rem; align-items: start; }

/* ─── 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); }

/* ─── UTC Summary: Attachments grouped by category ───────── */
.attachments-summary { display: flex; flex-direction: column; gap: 1.25rem; }
.attachments-summary-files { display: flex; flex-direction: column; gap: 0.5rem; }
.attachments-summary-file {
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
  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; }

/* ─── Warranty emoji (Conclusion page live cue + Token Listing) ──── */
.warranty-emoji { font-size: 1.9em; line-height: 1; vertical-align: middle; display: inline-block; }

/* ─── UTC Summary: Warranty emoji legend (below the search/filter bar) ── */
.warranty-legend {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem;
  padding: 0.5rem 0; margin-bottom: 0.75rem;
  font-size: 1rem; color: var(--text-muted);
}
.warranty-legend span { display: inline-flex; align-items: center; gap: 0.4rem; }
.warranty-legend .warranty-emoji { font-size: 1.6em; }
.warranty-legend-btn {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.35rem 0.9rem 0.35rem 0.7rem; border-radius: 999px;
  border: 1px solid transparent; background: #fff;
  font-size: 1rem; font-family: inherit; color: var(--text-muted); cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
/* Bright pastel tint per decision, even at rest — not just on hover/active
   — so each button reads as its own colored chip rather than a plain
   gray control, using the same hue its emoji/decision already implies. */
.warranty-legend-btn-accepted { background: #dcfce7; border-color: #bbf7d0; color: #166534; }
.warranty-legend-btn-rejected { background: #fee2e2; border-color: #fecaca; color: #991b1b; }
.warranty-legend-btn-goodwill { background: #fef3c7; border-color: #fde68a; color: #92400e; }
.warranty-legend-btn-cancelled { background: #f3f4f6; border-color: #e5e7eb; color: #4b5563; }
.warranty-legend-btn-accepted:hover { background: #bbf7d0; }
.warranty-legend-btn-rejected:hover { background: #fecaca; }
.warranty-legend-btn-goodwill:hover { background: #fde68a; }
.warranty-legend-btn-cancelled:hover { background: #e5e7eb; }
.warranty-legend-btn.is-active { font-weight: 700; box-shadow: inset 0 0 0 2px currentColor; }
.warranty-legend-btn-accepted.is-active { background: #86efac; }
.warranty-legend-btn-rejected.is-active { background: #fca5a5; }
.warranty-legend-btn-goodwill.is-active { background: #fcd34d; }
.warranty-legend-btn-cancelled.is-active { background: #d1d5db; }
.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; }
.status-badge.is-warning { background: #fdf3e3; color: #92400e; }
.status-badge.is-warning .dot { background: #d97706; }

/* ─── 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, minmax(0, 1fr)); }
.attachments-grid.attachments-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.attachments-grid.attachments-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 900px) { .attachments-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Equal columns whatever the file names — a long name used to stretch its
   column and push the last one off the page; names are cut with "…" (full
   name on hover via title). */
.attachments-grid > * { min-width: 0; }

/* A grid row's items stretch to the tallest sibling's height by default
   — harmless while the only extra content was wrapped text inside the
   box itself, but VJO's own selected-file list (each with its own Remove
   button, rendered BELOW the box, growing with however many files are
   picked) made that row height wildly variable, and Service History's
   otherwise-empty column kept inflating to match it — a dropzone with
   nothing selected has no business growing several times its normal
   height just because its neighbor has a long file list underneath it.
   align-items: start turns that default stretch off, so each dropzone
   sizes to its own content only. (Title/duplicate-error alignment is
   handled separately, via always-reserved invisible space, so it's
   unaffected by this.) */
.attachments-grid { align-items: start; }

.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; }
.dropzone-title { display: block; font-size: 0.85rem; font-weight: 600; margin-bottom: 0.35rem; }

.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); }

/* ─── "Uploading…" state (shown for the duration of the real form
   submit, once Save/Submit is clicked) ─────────────────────── */
.upload-status { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.8rem; color: var(--brand-teal, #0d9488); font-weight: 600; }
.upload-spinner {
  width: 12px; height: 12px; border-radius: 50%;
  border: 2px solid rgba(13, 148, 136, 0.25); border-top-color: var(--brand-teal, #0d9488);
  display: inline-block; animation: upload-spin 0.7s linear infinite;
}
@keyframes upload-spin { to { transform: rotate(360deg); } }

/* ─── 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; }

/* × on searchable dropdowns that allow free text (e.g. OEMD Name) */
.ss-clear { margin-left: auto; margin-right: 0.35rem; padding: 0 0.3rem; font-size: 1.05rem; line-height: 1; color: var(--text-muted); cursor: pointer; border-radius: 0.25rem; }
.ss-clear:hover { color: var(--danger); background: #fdecec; }
.ss-clear[hidden] { display: none; }

/* ─── Dashboard date range filter (webui/dashboard.html) ─────────── */
.ops-filters { display: flex; margin-bottom: 1rem; }
.ops-filter label { display: block; font-size: 0.75rem; color: var(--text-muted); margin-bottom: 0.25rem; }
.ops-date-range { display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; }
.ops-range-btn {
  display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.45rem 0.95rem; border: 1px solid var(--border);
  border-radius: 0.5rem; background: #fff; color: var(--text); font: inherit; font-size: 0.85rem; text-decoration: none; cursor: pointer;
}
.ops-range-btn svg.icon { width: 14px; height: 14px; }
.ops-range-btn:hover { border-color: var(--brand-teal-light); color: var(--brand-teal); }
.ops-range-btn.active { background: var(--brand-teal); border-color: var(--brand-teal); color: #fff; }
.ops-custom-dates { margin-left: 0.25rem; }
.ops-custom-dates { display: flex; align-items: center; gap: 0.35rem; }
.ops-custom-dates[hidden] { display: none; }
.ops-custom-dates span { color: var(--text-muted); }

/* ─── Dashboard 24h SLA card + bar ─────────── */
.dashboard-stat-of { font-size: 1.2rem; font-weight: 600; opacity: 0.85; }
.dashboard-stat-progress {
  position: relative; height: 5px; margin: 0.5rem 2.4rem 0 0; border-radius: 999px; background: rgba(255, 255, 255, 0.18);
}
.dashboard-stat-progress span { display: block; height: 100%; background: #22c55e; border-radius: 999px; }
.dashboard-stat-progress em { position: absolute; right: -2.4rem; top: -0.45rem; font-style: normal; font-size: 0.72rem; color: #fff; }
.ops-sla-bar { display: flex; height: 40px; border-radius: 6px; overflow: hidden; }
.ops-sla-bar a { display: flex; align-items: center; justify-content: center; min-width: 2.6rem; color: #fff; font-weight: 700; font-size: 0.9rem; text-decoration: none; }
.ops-sla-bar a:hover { filter: brightness(0.9); }
.sla-met { background: #22a050; }
.sla-at_risk { background: #e0a526; }
.sla-breached { background: #dc3545; }
.sla-cancelled { background: #9ca3af; }
.ops-sla-legend { display: flex; justify-content: space-between; gap: 1rem; margin-top: 0.6rem; font-size: 0.82rem; }
.ops-sla-legend a { text-decoration: none; }
.ops-sla-legend a span { color: var(--text-muted); }
.sla-met-text { color: #15803d; }
.sla-at_risk-text { color: #b7791f; }
.sla-breached-text { color: #c53030; }
.sla-cancelled-text { color: #4b5563; }


/* ─── Dashboard FSE Performance Analysis ─────────── */
.fse-perf-panel { margin-top: 1rem; }
.sap-incomplete-panel { margin-top: 1rem; }
.sap-export-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin: 0.25rem 0 0.75rem; }
.sap-export-bar label { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.85rem; color: var(--text-muted); }
.sap-export-bar .form-control { width: auto; }
.fse-perf-wrap { max-height: 440px; overflow: auto; }
.fse-perf-table th { position: sticky; top: 0; z-index: 1; }
.fse-perf-table td:nth-child(n+3), .fse-perf-table th:nth-child(n+3) { text-align: right; }
.fse-perf-table tr.is-idle td { color: var(--text-muted); }
.fse-idle { font-size: 0.75rem; color: var(--text-muted); }
.fse-tat { font-weight: 700; }
.fse-tat.good { color: #15803d; }
.fse-tat.mid { color: #b7791f; }
.fse-tat.bad { color: #c53030; }

/* ─── Dashboard SAP incomplete processes (retry) ─────────── */
.sap-retry-table td, .sap-retry-table th { white-space: nowrap; vertical-align: middle; }
.sap-retry-table td.sap-retry-error { white-space: normal; min-width: 9rem; color: var(--text-muted); font-size: 0.8rem; }
.sap-retry-table a { color: var(--brand-teal); font-weight: 600; text-decoration: none; }
.sap-step { display: inline-block; font-size: 0.78rem; font-weight: 600; padding: 0.15rem 0.55rem; border-radius: 999px; }
.sap-step-done { background: #e7f6ec; color: #15803d; }
.sap-step-failed { background: #fde8e8; color: #b91c1c; }
.sap-step-pending { background: #eef0f2; color: var(--text-muted); }

/* ─── Dashboard lower panels (webui/dashboard.html: Delay Ownership …
   Data Quality Alerts) ─────────── */

.ops-row { display: grid; gap: 1rem; margin-top: 1rem; }
.ops-row-3 { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.9fr) minmax(0, 1fr); }
.ops-row-tables { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.15fr) minmax(0, 0.85fr); }
.ops-panel { padding: 1.1rem 1.2rem; min-width: 0; }
.ops-panel-head { display: flex; justify-content: space-between; align-items: baseline; gap: 0.75rem; margin-bottom: 0.9rem; }
.ops-panel-head h3 {
  margin: 0; font-size: 1rem; display: flex; align-items: center; gap: 0.5rem; color: var(--text);
  padding-bottom: 0.35rem; border-bottom: 2px solid var(--brand-gold);
}
.ops-panel-icon { display: inline-flex; color: var(--brand-teal); }
.ops-panel-icon svg.icon { width: 17px; height: 17px; }
.ops-panel-sub { color: var(--text-muted); font-size: 0.8rem; text-decoration: none; white-space: nowrap; }
a.ops-panel-sub:hover { color: var(--brand-teal); }

table.data-table.ops-table td, table.data-table.ops-table th { padding: 0.45rem 0.4rem; font-size: 0.8rem; white-space: nowrap; }
table.data-table.ops-table th { font-size: 0.74rem; text-transform: none; letter-spacing: 0; }
.ops-table a { color: var(--brand-teal); font-weight: 600; text-decoration: none; }
.ops-table tbody tr:hover td { background: #eef4f6; }
.ops-num-table td:not(:first-child), .ops-num-table th:not(:first-child) { text-align: right; }

.ops-delay-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(95px, 1fr)); gap: 0.5rem; margin-bottom: 0.9rem; }
.ops-delay-tile { border-radius: 0.5rem; padding: 0.5rem 0.65rem; border-left: 4px solid; font-size: 0.75rem; font-weight: 600; }
.ops-delay-tile div { display: flex; justify-content: space-between; align-items: baseline; margin-top: 0.15rem; }
.ops-delay-tile strong { font-size: 1.35rem; }
.ops-delay-tile em { font-style: normal; font-weight: 700; }
.ops-delay-tile.dly-lis { background: #fdf3e0; border-color: #d9a541; }
.ops-delay-tile.dly-oemd { background: #f1eafd; border-color: #8b5cf6; }
.ops-delay-tile.dly-dtvs { background: #e6f0fd; border-color: #3b82f6; }
.ops-delay-tile.dly-other { background: #f1f2f4; border-color: #9ca3af; }
.ops-delay-tile.dly-none { background: #e7f6ec; border-color: #22a35a; }
.ops-delay-body { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 1rem; }
.ops-mini-title { font-size: 0.8rem; font-weight: 600; margin-bottom: 0.4rem; }
.ops-mini-title span { color: var(--text-muted); font-weight: 400; }
.ops-stack-chart { display: flex; align-items: flex-end; gap: 3px; height: 110px; border-bottom: 1px solid var(--border); }
.ops-stack-col { flex: 1; height: 100%; display: flex; flex-direction: column-reverse; }
.ops-stack-col span { display: block; width: 100%; }
.ops-stack-labels { display: flex; justify-content: space-between; color: var(--text-muted); font-size: 0.7rem; margin-top: 0.2rem; }
.ops-legend { display: flex; flex-wrap: wrap; gap: 0.6rem; font-size: 0.72rem; color: var(--text-muted); margin-top: 0.4rem; }
.ops-legend i { display: inline-block; width: 0.6rem; height: 0.6rem; border-radius: 2px; margin-right: 0.25rem; vertical-align: -1px; }
span.dly-lis, i.dly-lis { background: #d9a541; }
span.dly-oemd, i.dly-oemd { background: #8b5cf6; }
span.dly-dtvs, i.dly-dtvs { background: #3b82f6; }
span.dly-other, i.dly-other { background: #9ca3af; }
span.dly-none, i.dly-none { background: #22a35a; }
.ops-reason { margin-bottom: 0.45rem; font-size: 0.78rem; }
.ops-reason div { display: flex; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.15rem; }
.ops-reason div span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ops-reason-track { display: block; height: 5px; background: #eef2f4; border-radius: 999px; overflow: hidden; }
.ops-reason-track span { display: block; height: 100%; background: #d9a541; border-radius: 999px; }

.ops-closure-row { display: grid; grid-template-columns: 2rem 1fr 2.5rem 2.8rem; align-items: center; gap: 0.6rem; padding: 0.55rem 0; border-bottom: 1px solid #f1f3f5; }
.ops-closure-row:last-child { border-bottom: 0; }
.ops-closure-icon { width: 2rem; height: 2rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.ops-closure-icon svg.icon { width: 15px; height: 15px; }
.cl-warranty_accepted { background: #e7f6ec; color: #16a34a; }
.cl-goodwill { background: #fdf3e0; color: #c08a1e; }
.cl-warranty_rejected { background: #fde8e8; color: #dc2626; }
.cl-cancelled { background: #f1f2f4; color: #6b7280; }
.cl-closed { background: #e7f6ec; color: #15803d; }
.cl-fcr { background: #f1eafd; color: #7c3aed; }
.ops-closure-label { font-size: 0.88rem; }
.ops-closure-row strong { text-align: right; }
.ops-closure-pct { color: var(--text-muted); font-size: 0.8rem; text-align: right; }

.ops-tabs { display: flex; gap: 1.2rem; border-bottom: 1px solid var(--border); margin-bottom: 0.7rem; }
.ops-tabs button {
  background: none; border: 0; padding: 0.35rem 0.1rem; font: inherit; font-size: 0.82rem; color: var(--text-muted);
  cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.ops-tabs button.active { color: var(--text); font-weight: 600; border-bottom-color: var(--brand-gold); }
.ops-rank-row { display: grid; grid-template-columns: 1.2rem minmax(0, 1.4fr) minmax(0, 1fr) 2rem; align-items: center; gap: 0.5rem; padding: 0.4rem 0; font-size: 0.8rem; }
.ops-rank-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ops-rank-row .ops-reason-track { height: 9px; }
.ops-rank-row .ops-reason-track span { background: var(--brand-teal-light); }
.ops-rank-row strong { text-align: right; }

.ops-sla-cell { display: inline-flex; align-items: center; gap: 0.4rem; }
.ops-sla-cell i { display: inline-block; width: 2rem; height: 7px; background: #eef2f4; border-radius: 999px; overflow: hidden; }
.ops-sla-cell b { display: block; height: 100%; }
.ops-sla-cell.good span { color: #15803d; } .ops-sla-cell.good b { background: #22a050; }
.ops-sla-cell.mid span { color: #b7791f; } .ops-sla-cell.mid b { background: #e0a526; }
.ops-sla-cell.bad span { color: #c53030; } .ops-sla-cell.bad b { background: #dc3545; }

.ops-alert { border-bottom: 1px solid #f1f3f5; }
.ops-alert summary {
  list-style: none; cursor: pointer; display: grid; grid-template-columns: minmax(0, 1fr) 2.2rem minmax(0, 1fr) 1rem;
  align-items: center; gap: 0.5rem; padding: 0.55rem 0 0.55rem 0.6rem; border-left: 3px solid #e0a526; font-size: 0.82rem;
}
.ops-alert summary::-webkit-details-marker { display: none; }
.ops-alert:first-of-type summary { border-left-color: #dc3545; }
.ops-alert.is-zero summary { border-left-color: #d1d5db; color: var(--text-muted); }
.ops-alert-count { justify-self: center; background: #e0a526; color: #fff; font-weight: 700; font-size: 0.75rem; border-radius: 999px; padding: 0.05rem 0.5rem; }
.ops-alert:first-of-type .ops-alert-count { background: #dc3545; }
.ops-alert.is-zero .ops-alert-count { background: #e5e7eb; color: var(--text-muted); }
.ops-alert-hint { color: var(--text-muted); font-size: 0.75rem; }
.ops-alert-chevron svg.icon { width: 14px; height: 14px; transition: transform 0.15s; }
.ops-alert[open] .ops-alert-chevron svg.icon { transform: rotate(90deg); }
.ops-alert-list { display: flex; flex-wrap: wrap; gap: 0.35rem 0.8rem; padding: 0.2rem 0 0.7rem 0.95rem; font-size: 0.8rem; }
.ops-alert-list a { color: var(--brand-teal); font-weight: 600; text-decoration: none; }
@media (max-width: 1400px) {
  .ops-row-3, .ops-row-tables { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 1000px) {
  .ops-row-3, .ops-row-tables, .ops-delay-body { grid-template-columns: minmax(0, 1fr); }
}

/* Automatic Uppercase Conversion for Free-Text Fields (core/form_utils.
   apply_uppercase_widget_style) — shows typing in uppercase right away;
   the saved value itself is uppercased server-side (apply_uppercase_on_clean).
   Placeholders keep their normal case. */
.uc-field { text-transform: uppercase; }
.uc-field::placeholder { text-transform: none; }

/* ─── Gyan Mandir gallery + Help (webui/gyan_mandir/) ─────────── */
.gallery-filter-bar { flex-wrap: wrap; row-gap: 0.6rem; }
.gallery-filter-bar label { display: flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; color: var(--text-muted); }
.gallery-folders { display: flex; flex-wrap: wrap; gap: 1.5rem; padding: 1.25rem 1.5rem; margin-bottom: 1rem; }
.gallery-folder { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; width: 96px; padding: 0.5rem; border-radius: 8px; text-decoration: none; color: var(--brand-teal); }
.gallery-folder:hover, .gallery-folder.active { background: rgba(0, 128, 128, 0.08); }
.gallery-folder-icon { width: 60px; height: 50px; }
.gallery-folder-label { font-size: 0.9rem; text-decoration: underline; }
.gallery-folder-count { font-size: 0.75rem; color: var(--text-muted); }
.gallery-results { padding: 1.25rem 1.5rem; }
.gallery-grid { margin-top: 0.75rem; }
.gallery-tile-meta { font-size: 0.72rem; color: var(--text-muted); padding: 0 0.35rem 0.35rem; line-height: 1.35; }
.gallery-tile-meta a { color: var(--brand-teal); font-weight: 600; text-decoration: none; }
.gallery-file-ext { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-weight: 700; color: var(--text-muted); background: #eef0f2; }
.help-upload-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; padding: 1rem 1.25rem; margin-bottom: 1rem; }
.help-upload-bar .form-control { width: auto; flex: 1 1 200px; }
.gallery-grid .gallery-tile { width: 150px; }
.gallery-grid .gallery-tile .attachment-tile-media { width: 150px; height: 150px; }
.help-viewer-box { max-width: min(1000px, 95vw); }
.help-viewer-frame { display: block; width: 100%; height: 80vh; border: 0; border-radius: 0 0 0.75rem 0.75rem; }
.help-viewer-media { display: block; max-width: 100%; max-height: 80vh; margin: 0 auto; }
.help-viewer-empty { padding: 2rem 1rem; text-align: center; color: var(--text-muted, #64748b); }
.gallery-viewer-box { max-width: min(1100px, 95vw); }
.gallery-viewer-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 60vw; }
.gallery-viewer-body { position: relative; display: flex; align-items: center; justify-content: center; background: #111; border-radius: 0 0 0.75rem 0.75rem; height: 75vh; }
.gallery-viewer-stage { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.gallery-viewer-stage img, .gallery-viewer-stage video { max-width: 100%; max-height: 100%; object-fit: contain; }
.gallery-viewer-stage iframe { width: 100%; height: 100%; border: 0; background: #fff; }
.gallery-viewer-nopreview { color: #e5e7eb; font-size: 0.95rem; }
.gallery-viewer-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 40px; height: 40px; border: 0; border-radius: 50%; background: rgba(255,255,255,0.85); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.gallery-viewer-nav.prev { left: 0.75rem; }
.gallery-viewer-nav.next { right: 0.75rem; }
.gallery-viewer-nav[hidden] { display: none; }
.email-log-box { max-width: min(860px, 95vw); }
.email-log-frame { width: 100%; height: 55vh; border: 1px solid #e5e7eb; border-radius: 0.5rem; background: #fff; }