@import url('fonts.css');

/* ==========================================================================
   RRUDSC - Executive Deep Forest & Emerald Design System
   Rich aesthetics, deep forest sidebar, emerald accents, glassmorphism,
   crisp typography, and smooth micro-interactions.
   ========================================================================== */

:root {
  --app-navbar-h: 68px;
  --app-sidebar-w: 264px;
  --app-sidebar-w-collapsed: 76px;

  /* Typography - Local Self-Hosted IBM Plex Sans Thai */
  --font-sans: 'IBM Plex Sans Thai', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', Menlo, Monaco, Consolas, monospace;

  /* Executive Deep Forest & Emerald Palette */
  --primary: #059669;
  --primary-hover: #047857;
  --primary-soft: #ecfdf5;
  --accent: #10b981;
  --accent-soft: #d1fae5;
  --focus: #059669;

  /* Gradients */
  --grad-primary: linear-gradient(135deg, #059669 0%, #047857 100%);
  --grad-primary-hover: linear-gradient(135deg, #10b981 0%, #059669 100%);
  --grad-accent: linear-gradient(135deg, #10b981 0%, #047857 100%);
  --grad-brand: linear-gradient(135deg, #064e3b 0%, #059669 50%, #10b981 100%);
  --grad-success: linear-gradient(135deg, #10b981 0%, #047857 100%);
  --grad-warning: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  --grad-danger: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);

  /* Surfaces & Canvas (Light) */
  --canvas: #f6faf8;
  --surface: #ffffff;
  --surface-subtle: #f8fbf9;
  --surface-muted: #eaf3ee;
  --text: #0f241d;
  --text-soft: #2e4d41;
  --muted: #5e7a6f;
  --border: #e0ece5;
  --border-strong: #c2d8cc;

  /* Deep Forest Sidebar Tokens */
  --sidebar-bg: #061d15;
  --sidebar-border: #0d2e23;
  --sidebar-text: #ecfdf5;
  --sidebar-text-muted: #85a396;
  --sidebar-nav-hover: rgba(16, 185, 129, 0.08);
  --sidebar-nav-active-bg: linear-gradient(90deg, rgba(16, 185, 129, 0.16) 0%, rgba(16, 185, 129, 0.04) 100%);
  --sidebar-nav-active-text: #34d399;

  /* Navbar Glassmorphism */
  --navbar-bg: rgba(255, 255, 255, 0.88);
  --navbar-border: rgba(5, 150, 105, 0.12);

  /* Shadows */
  --shadow-card: 0 2px 8px -2px rgba(6, 78, 59, 0.04), 0 12px 28px -4px rgba(6, 78, 59, 0.05);
  --shadow-card-hover: 0 6px 16px -2px rgba(6, 78, 59, 0.08), 0 20px 38px -6px rgba(6, 78, 59, 0.09);
  --shadow-primary-btn: 0 4px 16px 0 rgba(5, 150, 105, 0.36);
  --shadow-primary-hover: 0 6px 22px 0 rgba(5, 150, 105, 0.46);
  --shadow-badge: 0 2px 6px rgba(6, 78, 59, 0.04);
}

/* Obsidian Emerald Dark Mode */
html[data-theme="dark"] {
  --primary: #34d399;
  --primary-hover: #10b981;
  --primary-soft: rgba(5, 150, 105, 0.2);
  --accent: #6ee7b7;
  --accent-soft: rgba(16, 185, 129, 0.2);
  --focus: #34d399;

  --grad-primary: linear-gradient(135deg, #10b981 0%, #059669 100%);
  --grad-primary-hover: linear-gradient(135deg, #34d399 0%, #10b981 100%);

  --canvas: #06120d;
  --surface: #0a1f17;
  --surface-subtle: #0e271e;
  --surface-muted: #143428;
  --text: #ecfdf5;
  --text-soft: #a7f3d0;
  --muted: #7ca895;
  --border: #183d2e;
  --border-strong: #245541;

  --sidebar-bg: #040e0a;
  --sidebar-border: #0e271e;
  --navbar-bg: rgba(6, 18, 13, 0.88);
  --navbar-border: rgba(16, 185, 129, 0.16);

  --shadow-card: 0 2px 10px rgba(0, 0, 0, 0.3), 0 14px 32px -4px rgba(0, 0, 0, 0.45);
  --shadow-card-hover: 0 6px 18px rgba(0, 0, 0, 0.35), 0 22px 42px -6px rgba(0, 0, 0, 0.55);
  --shadow-primary-btn: 0 4px 16px 0 rgba(16, 185, 129, 0.35);
}

/* `html`'s own background matters on mobile: iOS/Android rubber-band
   overscroll at the very top/bottom reveals whatever is behind `body`
   (the browser default, usually white) for an instant — set it to match
   `--canvas` so that overscroll "gap" reads as more canvas, not a flash
   of the wrong color, in both light and dark mode. */
html {
  background-color: var(--canvas);
  overscroll-behavior-y: none;
}

body {
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: var(--canvas);
  color: var(--text);
  margin: 0;
  padding: 0;
  /* Stops the scroll from chaining past the top/bottom of the page into
     the browser's own gesture — that chain is what triggers Chrome's
     native pull-to-refresh (a white browser-chrome strip, not something
     page CSS can recolor) and Safari's rubber-band bounce. */
  overscroll-behavior-y: none;
  font-weight: 400;
}

/* Typography Weight Refinements (Normal Elegant Bold across system) */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-sans);
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.015em;
}

b, strong {
  font-weight: 600;
}

label {
  font-weight: 500;
  color: var(--text);
}

/* ==========================================================================
   App Shell & Layout
   ========================================================================== */

.app-shell {
  display: flex;
  min-height: 100dvh;
  background-color: var(--canvas);
  position: relative;
}

/* ===== Deep Forest Sidebar ===== */
html:not(.app-ready) .app-sidebar,
html:not(.app-ready) .app-sidebar * {
  transition: none !important;
}

.app-sidebar {
  width: var(--app-sidebar-w);
  flex-shrink: 0;
  background: var(--sidebar-bg);
  border-right: 1px solid var(--sidebar-border);
  display: flex;
  flex-direction: column;
  transition: width 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  overflow-x: hidden;
  position: sticky;
  top: 0;
  height: 100dvh;
  z-index: 30;
}

.app-sidebar-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  height: var(--app-navbar-h);
  padding: 0 18px;
  border-bottom: 1px solid var(--sidebar-border);
  flex-shrink: 0;
  text-decoration: none;
  color: inherit;
}

.brand-logo-wrap {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.brand-logo-img {
  height: 42px;
  width: auto;
  max-width: 58px;
  object-fit: contain;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.45));
  transition: transform 0.22s ease, filter 0.22s ease;
}

.app-sidebar-brand:hover .brand-logo-img {
  transform: scale(1.06);
  filter: drop-shadow(0 6px 16px rgba(16, 185, 129, 0.45));
}

.app-sidebar-brand .mark {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--grad-brand);
  color: #ffffff;
  display: grid;
  place-items: center;
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.38);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.app-sidebar-brand:hover .mark {
  transform: translateY(-1px) scale(1.04);
  box-shadow: 0 6px 18px rgba(16, 185, 129, 0.48);
}

.app-sidebar-brand .label {
  min-width: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.app-sidebar-brand .label strong {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--sidebar-text);
  letter-spacing: -0.01em;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.app-sidebar-brand .label small {
  display: block;
  font-size: 11px;
  color: var(--sidebar-text-muted);
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.app-sidebar,
.app-sidebar-nav-scroll {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE / Edge */
}

.app-sidebar::-webkit-scrollbar,
.app-sidebar-nav-scroll::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
  width: 0;
  height: 0;
}

.app-sidebar-nav-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 16px 12px;
}

.app-sidebar .oc-sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.app-sidebar .nav-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.app-sidebar .nav-group + .nav-group {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--sidebar-border);
}

.app-sidebar .nav-group-label {
  padding: 6px 14px 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--sidebar-text-muted);
  text-transform: uppercase;
  opacity: 0.75;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.app-sidebar .oc-sidebar-nav a {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 12px;
  color: var(--sidebar-text-muted);
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 500;
  position: relative;
  transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}

.app-sidebar .oc-sidebar-nav a svg {
  flex-shrink: 0;
  color: var(--sidebar-text-muted);
  transition: color 0.18s ease, transform 0.18s ease;
}

.app-sidebar .oc-sidebar-nav a:hover {
  background: var(--sidebar-nav-hover);
  color: var(--sidebar-text);
  transform: translateX(2px);
}

.app-sidebar .oc-sidebar-nav a:hover svg {
  color: #34d399;
  transform: scale(1.08);
}

.app-sidebar .oc-sidebar-nav a.active {
  background: var(--sidebar-nav-active-bg);
  color: var(--sidebar-nav-active-text);
  font-weight: 600;
}

.app-sidebar .oc-sidebar-nav a.active svg {
  color: #34d399;
}

.app-sidebar .oc-sidebar-nav a.active::before {
  content: '';
  position: absolute;
  left: -2px;
  top: 8px;
  bottom: 8px;
  width: 4px;
  border-radius: 4px;
  background: linear-gradient(180deg, #34d399 0%, #059669 100%);
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.6);
}

.app-sidebar .oc-sidebar-nav .nav-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.app-sidebar-footer {
  border-top: 1px solid var(--sidebar-border);
  padding: 12px 14px;
  flex-shrink: 0;
  background: var(--sidebar-bg);
}

.app-sidebar-footer .app-user-meta {
  display: flex;
  align-items: center;
  gap: 10px;
}

.app-sidebar-footer .app-user-meta .label {
  min-width: 0;
  overflow: hidden;
}

.app-sidebar-footer .app-user-meta .label strong {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--sidebar-text);
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.app-sidebar-footer .app-user-meta .label small {
  display: block;
  font-size: 11px;
  color: var(--sidebar-text-muted);
}

/* Collapsed Sidebar Rail */
.app-shell[data-sidebar="collapsed"] .app-sidebar {
  width: var(--app-sidebar-w-collapsed);
}

.app-shell[data-sidebar="collapsed"] .app-sidebar-brand .label,
.app-shell[data-sidebar="collapsed"] .oc-sidebar-nav .nav-label,
.app-shell[data-sidebar="collapsed"] .oc-sidebar-nav .nav-group-label,
.app-shell[data-sidebar="collapsed"] .app-sidebar-footer .app-user-meta .label {
  display: none;
}

.app-shell[data-sidebar="collapsed"] .oc-sidebar-nav a {
  justify-content: center;
  padding: 10px;
}

.app-shell[data-sidebar="collapsed"] .oc-sidebar-nav a:hover {
  transform: none;
}

.app-shell[data-sidebar="collapsed"] .oc-sidebar-nav a.active::before {
  left: 2px;
}

/* ==========================================================================
   Navbar (Glassmorphism Emerald)
   ========================================================================== */

.app-content-col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.app-navbar {
  height: var(--app-navbar-h);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 24px;
  background: var(--navbar-bg);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border-bottom: 1px solid var(--navbar-border);
  position: sticky;
  top: 0;
  z-index: 20;
  box-shadow: 0 1px 3px rgba(6, 78, 59, 0.02);
}

.app-navbar-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  gap: 10px;
}

.app-navbar-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: var(--primary-soft);
  color: var(--primary);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
}

.status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.25);
  display: inline-block;
  animation: pulse-dot 2s infinite ease-in-out;
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(0.85); }
}

.app-navbar-spacer {
  flex: 1;
}

.app-navbar-landing-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-soft);
  background: var(--surface-muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.app-navbar-landing-link:hover {
  color: var(--primary);
  background: var(--surface);
  border-color: var(--primary);
}

@media (max-width: 1024px) {
  .app-navbar-landing-link span {
    display: none;
  }
  .app-navbar-landing-link {
    padding: 6px 8px;
  }
}

@media (max-width: 1180px) {
  .app-navbar-badge {
    display: none;
  }
}

/* User Menu Trigger in Navbar */
.app-user-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--grad-primary);
  color: #ffffff;
  font-weight: 600;
  font-size: 12.5px;
  flex: 0 0 auto;
  box-shadow: 0 2px 8px rgba(5, 150, 105, 0.28);
}

.app-user-menu-trigger {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 999px;
  padding: 4px 12px 4px 4px;
  cursor: pointer;
  transition: all 0.18s ease;
}

.app-user-menu-trigger:hover {
  background: var(--surface-muted);
  border-color: var(--border-strong);
  transform: translateY(-1px);
}

.app-user-menu-trigger .meta {
  text-align: left;
  line-height: 1.25;
  display: none;
}

@media (min-width: 640px) {
  .app-user-menu-trigger .meta { display: block; }
}

.app-user-menu-trigger .meta strong {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
}

.app-user-menu-trigger .meta small {
  display: block;
  font-size: 11px;
  color: var(--muted);
}

.app-user-popover {
  right: 0;
  left: auto;
  width: 230px;
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 16px 36px rgba(6, 78, 59, 0.12);
  border: 1px solid var(--border);
  background: var(--surface);
}

.app-user-popover-head {
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

.app-user-popover-head strong {
  display: block;
  font-size: 14px;
  color: var(--text);
}

.app-user-popover-head small {
  display: block;
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
}

/* ==========================================================================
   Page Head & Hero Accents
   ========================================================================== */

.app-main {
  flex: 1;
  min-width: 0;
  padding: 24px 32px 56px;
}

.app-page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin: 16px 0 24px;
}

.app-page-head h1 {
  font-size: 24px;
  font-weight: 600;
  margin: 0 0 6px;
  color: var(--text);
  letter-spacing: -0.015em;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.app-page-head p {
  margin: 0;
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.5;
  max-width: 720px;
}

/* ==========================================================================
   KPI Metric Cards (Deep Forest & Emerald)
   ========================================================================== */

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 18px 20px;
  box-shadow: var(--shadow-card);
  display: flex;
  align-items: flex-start;
  gap: 16px;
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card-hover);
  border-color: var(--border-strong);
}

.stat-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.stat-icon.primary {
  background: var(--primary-soft);
  color: var(--primary);
}

.stat-icon.success {
  background: #ecfdf5;
  color: #059669;
}

.stat-icon.warning {
  background: #fffbeb;
  color: #d97706;
}

.stat-icon.info {
  background: #f0fdf4;
  color: #047857;
}

.stat-content {
  flex: 1;
  min-width: 0;
}

.stat-label {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--muted);
  margin-bottom: 4px;
}

.stat-val {
  font-size: 24px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
  letter-spacing: -0.015em;
}

.stat-sub {
  font-size: 11.5px;
  color: var(--text-soft);
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* ==========================================================================
   Modern App Card & Panels
   ========================================================================== */

.app-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 24px;
  box-shadow: var(--shadow-card);
  margin-bottom: 24px;
  transition: box-shadow 0.2s ease;
}

.app-card-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* ==========================================================================
   Modern Redesigned Empty State
   ========================================================================== */

.premium-empty-state {
  padding: 48px 24px 40px;
  text-align: center;
  max-width: 820px;
  margin: 0 auto;
}

.empty-icon-wrap {
  width: 80px;
  height: 80px;
  border-radius: 24px;
  background: var(--primary-soft);
  color: var(--primary);
  display: grid;
  place-items: center;
  margin: 0 auto 20px;
  box-shadow: 0 8px 24px rgba(5, 150, 105, 0.16);
  position: relative;
}

.empty-icon-wrap::after {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 32px;
  background: var(--primary-soft);
  opacity: 0.5;
  z-index: -1;
  animation: pulse-ring 3s infinite ease-out;
}

@keyframes pulse-ring {
  0% { transform: scale(0.95); opacity: 0.6; }
  50% { transform: scale(1.06); opacity: 0.25; }
  100% { transform: scale(0.95); opacity: 0.6; }
}

.premium-empty-state h3 {
  font-size: 19px;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 8px;
}

.premium-empty-state p {
  color: var(--muted);
  font-size: 14.5px;
  max-width: 520px;
  margin: 0 auto 28px;
  line-height: 1.55;
}

.empty-workflow-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  text-align: left;
  margin: 32px 0 28px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}

.workflow-step-card {
  background: var(--surface-subtle);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px;
  transition: transform 0.18s ease, border-color 0.18s ease;
}

.workflow-step-card:hover {
  transform: translateY(-2px);
  border-color: var(--border-strong);
}

.workflow-step-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: var(--primary);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 10px;
}

.workflow-step-card h4 {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 4px;
}

.workflow-step-card p {
  font-size: 12px;
  color: var(--muted);
  margin: 0;
  line-height: 1.45;
}

/* ==========================================================================
   Modern Table Layout & Details
   ========================================================================== */

.table-showcase-wrap {
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  background: var(--surface);
}

.table-showcase {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

.checks-table {
  table-layout: fixed;
  width: 100%;
}

.checks-table th,
.checks-table td {
  overflow-wrap: break-word;
  word-break: normal;
}

.checks-table td > div {
  overflow-wrap: break-word;
  word-break: normal;
}

.checks-equip-name {
  white-space: normal !important;
  word-break: break-word !important;
  overflow-wrap: break-word !important;
  line-height: 1.45;
}

.checks-table th {
  padding: 12px 10px;
}

.checks-table td {
  padding: 14px 10px;
}

/* Balanced proportional column distribution on desktop/laptop */
.checks-table .col-code { width: 12%; }
.checks-table .col-name { width: 31%; }
.checks-table .col-requestor { width: 22%; }
.checks-table .col-status { width: 13%; }
.checks-table .col-date { width: 12%; }
.checks-table .col-action { width: 10%; text-align: right; }

@media (max-width: 1024px) {
  .checks-table .col-code { width: 20%; }
  .checks-table .col-name { width: 44%; }
  .checks-table .col-status { width: 22%; }
  .checks-table .col-action { width: 14%; text-align: right; }
  .checks-table th,
  .checks-table td {
    padding: 12px 10px;
  }
}

.btn-view-detail {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 500;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
  transition: all 0.16s ease;
  white-space: nowrap;
}

.btn-view-detail:hover {
  background: var(--primary-soft, rgba(5, 150, 105, 0.08));
  border-color: var(--primary, #059669);
  color: var(--primary, #059669);
  transform: translateY(-1px);
  box-shadow: var(--shadow-xs, 0 1px 2px rgba(0, 0, 0, 0.05));
}

.table-showcase thead th {
  background: var(--surface-subtle);
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  white-space: nowrap;
}

.table-showcase tbody td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  font-size: 13.5px;
  color: var(--text);
  vertical-align: top;
  transition: background 0.15s ease;
}

.table-showcase tbody tr:last-child td {
  border-bottom: none;
}

.table-showcase tbody tr:hover td {
  background: var(--surface-subtle);
}

/* Pill Badges */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  box-shadow: var(--shadow-badge);
}

.badge.success {
  background: #ecfdf5;
  color: #047857;
  border: 1px solid #a7f3d0;
}

.badge.warning {
  background: #fffbeb;
  color: #b45309;
  border: 1px solid #fde68a;
}

.badge.danger {
  background: #fef2f2;
  color: #b91c1c;
  border: 1px solid #fecaca;
}

.badge.info {
  background: #f0fdf4;
  color: #065f46;
  border: 1px solid #bbf7d0;
}

.badge.neutral {
  background: var(--surface-muted);
  color: var(--muted);
  border: 1px solid var(--border);
}

/* Version Pill */
.version-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  background: var(--surface-muted);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  font-family: var(--font-mono);
  color: var(--text);
}

.request-code-text {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 13px;
  color: var(--text);
  letter-spacing: -0.01em;
}

/* ==========================================================================
   Buttons & Interactive Elements
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 18px;
  border-radius: 10px;
  font-size: 13.5px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
  text-decoration: none;
  line-height: 1.25;
  white-space: nowrap;
}

.btn.primary {
  background: var(--grad-primary);
  color: #ffffff;
  box-shadow: var(--shadow-primary-btn);
}

.btn.primary:hover {
  background: var(--grad-primary-hover);
  box-shadow: var(--shadow-primary-hover);
  transform: translateY(-1px);
}

.btn.secondary {
  background: var(--surface);
  border-color: var(--border-strong);
  color: var(--text);
}

.btn.secondary:hover {
  background: var(--surface-muted);
  transform: translateY(-1px);
}

.btn.ghost {
  background: transparent;
  color: var(--text-soft);
  border-color: transparent;
}

.btn.ghost:hover {
  background: var(--surface-muted);
  color: var(--text);
}

.btn.small {
  padding: 6px 12px;
  font-size: 12.5px;
  border-radius: 8px;
}

.btn-action {
  height: 32px;
  padding: 0 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* Borderless row action in a top-aligned table row. The label uses the same
   font size/line height as the row text, and the negative margin cancels the
   top padding plus the 1px transparent .btn border, so the label sits on the first text line of the other
   cells while the hover/tap area stays about 32px tall. */
.btn-action.btn-action-top {
  height: auto;
  min-height: 0;
  padding: 6px 10px;
  margin-top: -7px;
  vertical-align: top;
  font-size: 12.5px;
  line-height: 1.58;
}

.btn.danger.ghost {
  background: transparent;
  color: var(--danger);
  border-color: transparent;
}

.btn.danger.ghost:hover {
  background: rgba(239, 68, 68, 0.12);
  color: var(--danger);
}

.btn.success.ghost {
  background: transparent;
  color: var(--success);
  border-color: transparent;
}

.btn.success.ghost:hover {
  background: rgba(16, 185, 129, 0.12);
  color: var(--success);
}

.btn-action.btn-icon,
.btn-icon {
  width: 32px;
  height: 32px;
  min-width: 32px;
  padding: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  flex-shrink: 0;
}

/* ==========================================================================
   Form Controls (AGENTS.md & Custom Select compliance)
   ========================================================================== */

input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="file"],
textarea,
select {
  width: 100%;
  box-sizing: border-box;
  font-family: inherit;
  font-size: 14px;
  color: var(--text);
  background-color: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  padding: 9px 13px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--focus);
  box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.18);
}

select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23059669' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem !important;
  cursor: pointer;
}

/* Upload Dropzone Container */
.upload-dropzone-box {
  border: 2px dashed var(--border-strong);
  border-radius: 16px;
  padding: 32px 24px;
  text-align: center;
  background: var(--surface-subtle);
  cursor: pointer;
  transition: border-color 0.22s ease, background 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease;
  position: relative;
}

.upload-dropzone-box:hover {
  border-color: var(--primary);
  background: var(--primary-soft);
}

.upload-dropzone-box.dragover {
  border-color: var(--primary);
  background: var(--primary-soft);
  transform: scale(1.01);
  box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.16);
}

.upload-dropzone-box.has-file {
  border-style: solid;
  border-color: rgba(5, 150, 105, 0.45);
  background: linear-gradient(180deg, rgba(5, 150, 105, 0.05) 0%, rgba(5, 150, 105, 0.015) 100%);
  padding: 22px 20px;
}

[data-theme="dark"] .upload-dropzone-box.has-file {
  border-color: rgba(16, 185, 129, 0.35);
  background: linear-gradient(180deg, rgba(16, 185, 129, 0.08) 0%, rgba(16, 185, 129, 0.02) 100%);
}

.upload-dropzone-box .dropzone-prompt-icon {
  width: 36px;
  height: 36px;
  color: var(--primary);
  margin-bottom: 8px;
  transition: transform 0.2s ease;
}

.upload-dropzone-box:hover .dropzone-prompt-icon {
  transform: translateY(-2px);
}

/* Big PDF Icon & File Preview Inside Dropzone */
.dropzone-file-preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  animation: pdfPopIn 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes pdfPopIn {
  0% {
    opacity: 0;
    transform: scale(0.86) translateY(6px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.pdf-big-icon-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
}

.pdf-big-icon {
  width: 48px;
  height: 56px;
  display: block;
  filter: drop-shadow(0 6px 14px rgba(220, 38, 38, 0.25));
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), filter 0.25s ease;
}

.upload-dropzone-box:hover .pdf-big-icon {
  transform: translateY(-2px) scale(1.05);
  filter: drop-shadow(0 8px 18px rgba(220, 38, 38, 0.35));
}

.pdf-file-details {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  max-width: 92%;
}

.pdf-file-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.4;
  word-break: break-word;
  text-align: center;
}

.pdf-file-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 12px;
}

.pdf-file-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 11.5px;
}

.pdf-file-badge.size {
  background: var(--surface);
  color: var(--text-soft);
  border: 1px solid var(--border);
}

.pdf-file-badge.ready {
  background: rgba(16, 185, 129, 0.12);
  color: #059669;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

[data-theme="dark"] .pdf-file-badge.ready {
  color: #34d399;
  border-color: rgba(52, 211, 153, 0.35);
}

.pdf-change-action {
  margin-top: 4px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  color: var(--primary);
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(5, 150, 105, 0.08);
  border: 1px solid rgba(5, 150, 105, 0.2);
  transition: all 0.2s ease;
}

.upload-dropzone-box:hover .pdf-change-action {
  background: var(--primary);
  color: #ffffff;
  border-color: var(--primary);
}

/* ==========================================================================
   AI Suggestion Card & Step Progress
   ========================================================================== */

.ai-suggestion-card {
  border: 1px solid rgba(5, 150, 105, 0.28);
  background: linear-gradient(135deg, rgba(5, 150, 105, 0.05) 0%, rgba(16, 185, 129, 0.02) 100%);
  border-radius: 16px;
  padding: 20px;
  margin-top: 14px;
  position: relative;
  overflow: hidden;
}

.ai-card-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--grad-primary);
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
  margin-bottom: 12px;
}

.step-progress-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  margin: 16px 0 24px;
}

.step-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  z-index: 2;
  /* Matches the enclosing .app-card's own background (not --canvas, the
     page background) so this patch — which only exists to mask the
     connecting .step-line passing behind the circle/label — blends in
     instead of showing up as a visible rectangle. */
  background: var(--surface);
  padding: 0 8px;
}

.step-node-circle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 700;
  background: var(--surface-muted);
  border: 2px solid var(--border);
  color: var(--muted);
  transition: all 0.2s ease;
}

.step-node.done .step-node-circle {
  background: #059669;
  border-color: #059669;
  color: #fff;
}

.step-node.current .step-node-circle {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
  box-shadow: 0 0 0 4px rgba(5, 150, 105, 0.2);
}

.step-node-label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-soft);
}

.step-line {
  position: absolute;
  top: 16px;
  left: 24px;
  right: 24px;
  height: 2px;
  background: var(--border);
  z-index: 1;
}

/* ==========================================================================
   Responsive Breakpoints & Adjustments
   ========================================================================== */

.mini-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 8px;
}

.mini-breadcrumb a {
  color: var(--muted);
  text-decoration: none;
  transition: color 0.15s ease;
}

.mini-breadcrumb a:hover {
  color: var(--primary);
}

.mini-breadcrumb-sep {
  color: var(--border-strong);
}

.app-mobile-only {
  display: none;
}

/* Mobile & Tablet (<= 1024px) */
@media (max-width: 1024px) {
  .app-mobile-only { display: inline-flex; }
  .app-sidebar-desktop-toggle { display: none; }

  .app-sidebar,
  .app-shell[data-sidebar="collapsed"] .app-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: min(300px, 84vw) !important;
    height: 100dvh;
    transform: translateX(-100%);
    transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 50;
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.4);
  }

  .app-shell[data-sidebar-mobile="open"] .app-sidebar {
    transform: translateX(0);
  }

  .app-shell[data-sidebar="collapsed"] .app-sidebar-brand .label,
  .app-shell[data-sidebar="collapsed"] .app-sidebar-footer .app-user-meta .label {
    display: block;
  }

  .app-shell[data-sidebar="collapsed"] .oc-sidebar-nav .nav-label {
    display: inline;
  }

  .app-shell[data-sidebar="collapsed"] .oc-sidebar-nav .nav-group-label {
    display: block;
  }

  .app-shell[data-sidebar="collapsed"] .oc-sidebar-nav a {
    justify-content: flex-start;
  }

  .app-sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(6, 29, 21, 0.65);
    backdrop-filter: blur(4px);
    z-index: 45;
  }

  .app-shell[data-sidebar-mobile="open"] .app-sidebar-backdrop {
    display: block;
  }

  .app-navbar {
    padding: 0 16px;
    gap: 10px;
  }

  .app-navbar-title {
    font-size: 14px;
    max-width: clamp(180px, 42vw, 380px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .app-navbar-badge {
    display: none !important;
  }

  .app-main {
    padding: 16px 20px 40px;
  }

  .stat-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .table-col-tablet-hide {
    display: none !important;
  }

  .table-sub-meta {
    display: block !important;
  }

  .table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
}

/* Full-screen blocking alert for mobile phones (< 768px) */
.mobile-unsupported-barrier {
  display: none;
}

@media (max-width: 767px) {
  .mobile-unsupported-barrier {
    display: flex !important;
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100dvh;
    z-index: 999999;
    background: radial-gradient(ellipse at 50% 15%, rgba(5, 150, 105, 0.16) 0%, var(--canvas, #f8fafc) 70%);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  body:has(.mobile-unsupported-barrier) {
    overflow: hidden !important;
  }

  .mobile-unsupported-dialog {
    width: 100%;
    max-width: 380px;
    background: var(--surface, #ffffff);
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 24px;
    padding: 28px 22px;
    text-align: center;
    box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.12), 0 0 1px 1px rgba(0, 0, 0, 0.04);
    animation: modalPopIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .mobile-unsupported-icon-box {
    width: 64px;
    height: 64px;
    border-radius: 18px;
    background: color-mix(in srgb, var(--danger, #ef4444) 10%, var(--surface, #ffffff));
    border: 1px solid color-mix(in srgb, var(--danger, #ef4444) 25%, transparent);
    color: var(--danger, #ef4444);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
  }

  .mobile-unsupported-badge {
    display: inline-block;
    padding: 3px 10px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--danger, #ef4444);
    background: color-mix(in srgb, var(--danger, #ef4444) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--danger, #ef4444) 22%, transparent);
    border-radius: 9999px;
    margin-bottom: 12px;
  }

  .mobile-unsupported-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--text, #0f172a);
    margin: 0 0 10px;
    line-height: 1.35;
    letter-spacing: -0.015em;
  }

  .mobile-unsupported-desc {
    font-size: 13px;
    color: var(--muted, #64748b);
    line-height: 1.6;
    margin: 0 0 16px;
  }

  .mobile-unsupported-guide {
    background: color-mix(in srgb, var(--text, #0f172a) 3%, var(--surface, #ffffff));
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 14px;
    padding: 12px 14px;
    text-align: left;
    margin-bottom: 20px;
  }

  .mobile-unsupported-guide-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text, #0f172a);
    margin-bottom: 6px;
  }

  .mobile-unsupported-guide ul {
    margin: 0;
    padding-left: 18px;
    font-size: 12px;
    color: var(--text-soft, #475569);
    line-height: 1.55;
  }

  .mobile-unsupported-guide li {
    margin-bottom: 3px;
  }

  .mobile-unsupported-guide li:last-child {
    margin-bottom: 0;
  }

  .mobile-unsupported-btn {
    width: 100%;
    justify-content: center;
    padding: 11px;
    font-size: 14px;
    border-radius: 12px;
  }
}

@media (max-width: 640px) {
  .app-navbar-title {
    display: none;
  }
  .app-main {
    padding: 14px 12px 36px;
  }
}

@media (min-width: 1025px) {
  .app-sidebar-backdrop { display: none; }
  .table-sub-meta { display: none; }
}

/* Laptop (1280px - 1535px) */
@media (min-width: 1280px) and (max-width: 1535px) {
  .app-main { padding: 22px 28px 48px; }
}

/* Large Desktop (1536px+) */
@media (min-width: 1536px) {
  .app-main { padding: 28px 40px 60px; }
  .stat-grid { grid-template-columns: repeat(4, 1fr); }
}

/* Shared confirmation: an equipment submission can contain several items
   extracted from one PDF, so keep the review list inside the modal's body. */
#shared-confirm-modal .modal {
  display: flex;
  flex-direction: column;
  max-height: calc(100dvh - 36px);
  overflow: hidden;
}

#shared-confirm-modal .modal-head,
#shared-confirm-modal .modal-foot {
  flex-shrink: 0;
}

#shared-confirm-modal .modal-body {
  min-height: 0;
  overflow-y: auto;
}

.confirm-review-summary {
  margin-top: 16px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-subtle);
}

.confirm-review-summary-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 13px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  font-size: 13px;
}

.confirm-review-summary-head span {
  flex-shrink: 0;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.confirm-review-items {
  max-height: min(38dvh, 330px);
  overflow-y: auto;
}

.confirm-review-item {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 12px 13px;
}

.confirm-review-item + .confirm-review-item {
  border-top: 1px solid var(--border);
}

.confirm-review-item-order {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 50%;
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.confirm-review-item-detail {
  min-width: 0;
}

.confirm-review-item-detail strong,
.confirm-review-item-detail span {
  display: block;
  overflow-wrap: anywhere;
}

.confirm-review-item-detail strong {
  color: var(--text);
  font-size: 13.5px;
  line-height: 1.45;
}

.confirm-review-item-detail span {
  margin-top: 3px;
  color: var(--text-soft);
  font-size: 12.5px;
}

@media (max-width: 430px) {
  #shared-confirm-modal {
    min-height: 100dvh;
    padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom));
  }

  #shared-confirm-modal .modal {
    max-height: calc(100dvh - max(24px, env(safe-area-inset-top) + env(safe-area-inset-bottom)));
  }

  #shared-confirm-modal .modal-foot {
    display: grid;
    grid-template-columns: 1fr;
  }

  #shared-confirm-modal .modal-foot .btn {
    width: 100%;
  }
}

/* Reusable in-page PDF viewer for uploaded specification and criteria files. */
.pdf-preview-backdrop {
  min-height: 100dvh;
  padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
}

.pdf-preview-modal {
  width: min(1180px, 100%);
  height: calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  max-height: none;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.pdf-preview-head,
.pdf-preview-foot { flex-shrink: 0; }
.pdf-preview-head .icon-btn { width: 44px; height: 44px; flex-shrink: 0; }
.pdf-preview-head h2 { margin: 0; font-size: 18px; }
.pdf-preview-head p { margin: 3px 0 0; color: var(--muted); font-size: 12.5px; overflow-wrap: anywhere; }
.pdf-preview-body { min-height: 0; flex: 1; padding: 0; overflow: hidden; background: var(--surface-muted); }
.pdf-preview-body iframe { display: block; width: 100%; height: 100%; border: 0; background: var(--surface); }
.pdf-preview-foot { align-items: center; }
.pdf-preview-foot > span { margin-right: auto; color: var(--muted); font-size: 12px; }
.pdf-preview-foot > div { display: flex; gap: 8px; }

@media (max-width: 600px) {
  .pdf-preview-backdrop {
    padding: max(6px, env(safe-area-inset-top)) max(6px, env(safe-area-inset-right)) max(6px, env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left));
  }
  .pdf-preview-modal {
    height: calc(100dvh - 12px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    border-radius: 14px;
  }
  .pdf-preview-head { padding: 12px 14px; }
  .pdf-preview-head h2 { font-size: 16px; }
  .pdf-preview-foot { padding: 10px 12px; }
  .pdf-preview-foot > span { display: none; }
  .pdf-preview-foot > div { width: 100%; }
  .pdf-preview-foot .btn { flex: 1; min-width: 0; min-height: 44px; }
}

/* ==========================================================================
   AI Loading Overlay (assets/ai-loading.js) — shown while a form's submit
   waits on a synchronous AI call (new check / recheck)
   ========================================================================== */

.ai-loading-overlay {
  position: fixed;
  inset: 0;
  min-height: 100dvh;
  background: rgba(10, 14, 26, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.ai-loading-overlay[hidden] { display: none; }

/* Deliberately no background/border/shadow here — the dots + text float
   directly on the blurred backdrop above, no card frame around them. */
.ai-loading-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  max-width: 320px;
  text-align: center;
}

.ai-loading-dots { display: flex; gap: 9px; }

.ai-loading-dots span {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  display: block;
  animation: ai-loading-wave 1.2s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}

/* A cool-to-warm spectrum keeps all five steps visually distinct on the
   overlay's consistently dark backdrop, independent of the active theme. */
.ai-loading-dots span:nth-child(1) { background:#22d3ee; box-shadow:0 4px 16px rgba(34, 211, 238, 0.48); animation-delay:0s; }
.ai-loading-dots span:nth-child(2) { background:#3b82f6; box-shadow:0 4px 16px rgba(59, 130, 246, 0.48); animation-delay:0.12s; }
.ai-loading-dots span:nth-child(3) { background:#8b5cf6; box-shadow:0 4px 16px rgba(139, 92, 246, 0.48); animation-delay:0.24s; }
.ai-loading-dots span:nth-child(4) { background:#ec4899; box-shadow:0 4px 16px rgba(236, 72, 153, 0.48); animation-delay:0.36s; }
.ai-loading-dots span:nth-child(5) { background:#fb7185; box-shadow:0 4px 16px rgba(251, 113, 133, 0.48); animation-delay:0.48s; }

/* Keeps extraction feedback attached to the PDF being processed instead of
   covering the whole form, so officers can still review the fields beside it. */
.spec-pdf-extract-loading {
  position: absolute;
  inset: 1px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  border-radius: 11px;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  color: var(--text);
  font-size: 13px;
  font-weight: 650;
  text-align: center;
}

.spec-pdf-extract-loading[hidden] { display: none; }

/* Fixed light color, not the theme-dependent --text token — this overlay's
   own backdrop is always dark regardless of site theme, so its text must
   stay light for contrast in both light and dark mode. */
.ai-loading-text {
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.95);
}

@keyframes ai-loading-wave {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.75; }
  30% { transform: translateY(-14px); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .ai-loading-dots span {
    animation: ai-loading-pulse 1.4s ease-in-out infinite;
  }
  @keyframes ai-loading-pulse {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 1; }
  }
}
@media print {
  /* The mobile blocking dialog is only for interactive screen use. Print
     preview can evaluate narrow-width media queries too, so force it out of
     paper/PDF output and restore normal page overflow. */
  .mobile-unsupported-barrier { display:none !important; }
  body:has(.mobile-unsupported-barrier) { overflow:visible !important; }

  /* Flash messages confirm an on-screen action; they are not part of an
     official report and must never appear in paper/PDF output. The :has()
     fallback also covers a report tab that was already open before the
     wrapper received its dedicated class. */
  .app-flash-message,
  .app-main > div:has(> .alert) { display:none !important; }
}
/* AI provider settings: full-width operational layout, one column on touch screens. */
.ai-provider-form {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
}
.ai-provider-form > input[type="hidden"] {
  display: none !important;
}
.ai-provider-overview { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding:16px 18px; border:1px solid var(--border); border-radius:var(--radius-md); background:var(--surface-subtle); }
.ai-provider-overview p { margin:4px 0 0; color:var(--text-soft); font-size:13px; max-width:75ch; }
.ai-task-routing { padding:18px; border:1px solid var(--border); border-radius:var(--radius-lg); background:var(--surface-subtle); }
.ai-task-routing-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.ai-web-search-toggle { min-height:68px; display:flex; align-items:center; justify-content:space-between; gap:18px; margin-top:16px; padding:12px 14px; border:1px solid var(--border); border-radius:var(--radius-md); background:var(--surface); }
.ai-web-search-toggle > div:first-child { min-width:0; }
.ai-web-search-toggle strong, .ai-web-search-toggle small { display:block; }
.ai-web-search-toggle strong { color:var(--text); font-size:14px; }
.ai-web-search-toggle small { margin-top:3px; color:var(--muted); font-size:12.5px; line-height:1.45; }
.ai-web-search-options { display:grid; grid-template-columns:repeat(2, minmax(72px, 1fr)); gap:4px; flex:0 0 auto; padding:4px; border:1px solid var(--border); border-radius:var(--radius-md); background:var(--surface-muted); }
.ai-web-search-option { position:relative; display:flex; align-items:center; justify-content:center; min-height:38px; padding:7px 12px; border-radius:calc(var(--radius-md) - 4px); color:var(--text-soft); font-size:12.5px; font-weight:800; cursor:pointer; transition:background-color .16s ease, color .16s ease, box-shadow .16s ease; }
.ai-web-search-option input { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.ai-web-search-option:has(input:checked) { color:var(--primary); background:var(--surface); box-shadow:var(--shadow-xs); }
.ai-web-search-option:has(input:focus-visible) { outline:3px solid var(--focus); outline-offset:2px; }
.ai-task-checklist { margin-top:16px; overflow:hidden; border:1px solid var(--border); border-radius:var(--radius-md); background:var(--surface); }
.ai-task-checklist-head, .ai-task-checklist-row { display:grid; grid-template-columns:minmax(260px, 1.35fr) repeat(2, minmax(170px, .75fr)); gap:12px; align-items:stretch; }
.ai-task-checklist-head { padding:10px 14px; color:var(--text-soft); background:var(--surface-muted); font-size:12px; font-weight:700; }
.ai-task-checklist-head span:not(:first-child) { text-align:center; }
.ai-task-checklist-row { min-width:0; margin:0; padding:12px 14px; border:0; border-top:1px solid var(--border); }
.ai-task-checklist-label { min-width:0; margin:0; padding:5px 10px 5px 0; }
.ai-task-checklist-label strong, .ai-task-checklist-label small { display:block; }
.ai-task-checklist-label strong { color:var(--text); font-size:14px; }
.ai-task-checklist-label small { margin-top:3px; color:var(--muted); font-size:12.5px; line-height:1.45; }
.ai-task-checklist-label .badge { display:inline-flex; margin-top:7px; }
.ai-task-choice { position:relative; min-width:0; min-height:58px; display:flex; align-items:center; gap:10px; padding:10px 12px; border:1px solid var(--border-strong); border-radius:var(--radius-sm); background:var(--surface); cursor:pointer; transition:border-color .16s ease, background-color .16s ease; }
.ai-task-choice:hover { border-color:var(--primary); background:var(--primary-soft); }
.ai-task-choice:has(input:focus-visible) { outline:3px solid var(--focus); outline-offset:2px; }
.ai-task-choice:has(input:checked) { border-color:var(--primary); background:var(--primary-soft); }
.ai-task-choice input { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.ai-task-choice-indicator { width:22px; height:22px; flex:0 0 22px; display:inline-flex; align-items:center; justify-content:center; border:1.5px solid var(--border-strong); border-radius:6px; color:transparent; background:var(--surface); }
.ai-task-choice:has(input:checked) .ai-task-choice-indicator { color:var(--surface); border-color:var(--primary); background:var(--primary); }
.ai-task-choice-copy { min-width:0; }
.ai-task-choice-copy strong, .ai-task-choice-copy small { display:block; }
.ai-task-choice-copy strong { color:var(--text); font-size:13px; }
.ai-task-choice-copy small { margin-top:2px; color:var(--muted); font-size:11.5px; }
.ai-task-choice.is-locked { cursor:not-allowed; opacity:.72; }
.ai-task-choice.is-locked:hover { border-color:var(--border-strong); background:var(--surface); }
.ai-task-choice.is-locked:has(input:checked) { opacity:1; border-color:var(--border-strong); background:var(--surface-subtle); }
.ai-task-choice.is-locked:has(input:checked) .ai-task-choice-indicator { border-color:var(--text-soft); background:var(--text-soft); }
.ai-task-routing-note { margin:14px 0 0; color:var(--text-soft); font-size:12.5px; }
.ai-section-heading { margin-bottom:10px; }
.ai-section-heading h3 { margin:0; font-size:15px; }
.ai-section-heading p { margin:3px 0 0; color:var(--text-soft); font-size:12.5px; line-height:1.5; }
.ai-connection-status { margin-bottom:0; }
.ai-connection-grid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:14px; }
.ai-connection-card { min-width:0; padding:16px; border:1px solid var(--border); border-radius:var(--radius-md); background:var(--surface); }
.ai-connection-head { display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:space-between; gap:12px; }
.ai-connection-identity { min-width:0; display:flex; align-items:center; gap:10px; }
.ai-connection-icon { width:36px; height:36px; flex:0 0 36px; display:inline-flex; align-items:center; justify-content:center; border-radius:10px; color:var(--primary); background:var(--primary-soft); }
.ai-connection-identity h4 { margin:0; font-size:15px; line-height:1.3; }
.ai-connection-identity span { display:block; margin-top:2px; color:var(--text-soft); font-size:12px; }
.ai-connection-meta { display:grid; grid-template-columns:auto minmax(0, 1fr); gap:7px 12px; margin:14px 0 0; padding-top:12px; border-top:1px solid var(--border); font-size:12.5px; line-height:1.45; }
.ai-connection-meta dt { color:var(--text-soft); }
.ai-connection-meta dd { min-width:0; margin:0; color:var(--text); font-weight:600; overflow-wrap:anywhere; text-align:right; }
.ai-provider-grid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:18px; }
.ai-timeout-section { padding-top:2px; }
.ai-timeout-grid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:14px; }
.ai-cache-setting { width:100%; }
.ai-provider-credentials { align-items:stretch; }
.ai-provider-section { min-width:0; padding:18px; border:1px solid var(--border); border-radius:var(--radius-lg); background:var(--surface-subtle); }
.ai-provider-section-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; }
.ai-provider-section-head h3 { margin:0; font-size:16px; }
.ai-quota-rules { margin:4px 0 16px; padding:12px 14px; border:1px solid var(--border); border-radius:var(--radius-md); background:var(--surface); color:var(--text-soft); font-size:12.5px; line-height:1.6; }
.ai-quota-rules p { margin:0; }
.ai-quota-rules .ai-quota-rules-title { margin-bottom:4px; color:var(--text); font-size:13px; font-weight:600; }
.ai-quota-rules dl { display:grid; gap:6px; margin:10px 0; }
.ai-quota-rules dl > div { display:grid; grid-template-columns:44px minmax(0, 1fr); gap:8px; align-items:baseline; }
.ai-quota-rules dt { color:var(--primary-hover); font-family:var(--font-mono); font-size:12px; font-weight:600; }
.ai-quota-rules dd { margin:0; min-width:0; }
.ai-quota-rules .ai-quota-rules-caution { padding-top:8px; border-top:1px solid var(--border); color:var(--muted); }
@media (max-width: 767px) {
  .ai-provider-form { gap: 18px; }
  .ai-provider-grid, .ai-connection-grid, .ai-timeout-grid { grid-template-columns:1fr; gap:14px; }
  .ai-provider-overview, .ai-provider-section-head { align-items:flex-start; flex-direction:column; }
  .ai-task-routing-heading { align-items:flex-start; flex-direction:column; }
  .ai-task-checklist-head { display:none; }
  .ai-task-checklist-row { grid-template-columns:1fr 1fr; gap:10px; padding:14px; }
  .ai-task-checklist-label { grid-column:1 / -1; padding:0 0 2px; }
  .ai-task-choice { min-height:62px; }
  .ai-provider-section { padding:14px; }
  .ai-connection-card { padding:14px; }
}
@media (max-width: 430px) {
  .ai-task-routing { padding:14px; }
  .ai-task-checklist-row { grid-template-columns:1fr; }
  .ai-task-checklist-label { grid-column:auto; }
  .ai-web-search-toggle { align-items:stretch; flex-direction:column; }
  .ai-web-search-options { width:100%; }
}

/* ==========================================================================
   Page Transitions & Navigation Smoothness
   ========================================================================== */

/* Cross-document View Transitions (Chrome 126+, Safari 18.2+, Edge) */
@view-transition {
  navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.2s;
}

/* Sidebar & Navbar remain rock-solid and static during page transitions */
.app-sidebar {
  view-transition-name: app-sidebar;
}

.app-navbar {
  view-transition-name: app-navbar;
}

.app-main {
  view-transition-name: app-main;
}

::view-transition-old(app-main) {
  animation: 0.12s cubic-bezier(0.4, 0, 1, 1) both app-main-fade-out;
}

::view-transition-new(app-main) {
  animation: 0.2s cubic-bezier(0, 0, 0.2, 1) both app-main-fade-in;
}

@keyframes app-main-fade-out {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(-3px); }
}

@keyframes app-main-fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Fallback entrance animation for browsers without View Transitions */
@media (prefers-reduced-motion: no-preference) {
  .app-main {
    animation: appMainEnter 0.22s cubic-bezier(0.16, 1, 0.3, 1) backwards;
    transition: opacity 0.15s ease, transform 0.15s ease;
  }
}

.app-main.app-main-leaving {
  opacity: 0.4;
  transform: translateY(-2px);
  pointer-events: none;
}

@keyframes appMainEnter {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Top Loading Progress Bar (YouTube/GitHub/Next.js style) */
.app-nav-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #10b981 0%, #34d399 50%, #059669 100%);
  z-index: 999999;
  transform: scaleX(0);
  transform-origin: 0% 50%;
  pointer-events: none;
  opacity: 0;
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.8), 0 0 4px rgba(52, 211, 153, 0.6);
  transition: opacity 0.15s ease;
}

.app-nav-progress.is-loading {
  opacity: 1;
  animation: appProgressRunning 1.1s cubic-bezier(0.2, 0.8, 0.3, 1) infinite;
}

.app-nav-progress.is-complete {
  opacity: 1;
  transform: scaleX(1);
  transition: transform 0.12s ease-out, opacity 0.2s ease 0.1s;
}

@keyframes appProgressRunning {
  0% {
    transform: scaleX(0);
  }
  40% {
    transform: scaleX(0.68);
  }
  80% {
    transform: scaleX(0.88);
  }
  100% {
    transform: scaleX(0.94);
  }
}