@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Amiri:wght@400;700&family=Cairo:wght@400;500;600;700;800;900&display=swap');

/* ==========================================================================
   1. DESIGN TOKENS & SYSTEM VARIABLES (JSMO Institutional Sovereign System)
   ========================================================================== */
:root {
  --primary-navy: #1e3a8a;       /* Sovereign Navy */
  --primary-navy-dark: #0f172a;  /* Obsidian Slate */
  --primary-navy-light: #2563eb;
  --corporate-slate: #0f172a;
  --jsmo-gold: #c59b27;          /* Jordanian Royal Gold */
  --database-navy: #1e1b4b;      /* Deep Database Navy (Indigo 950) */
  --utility-indigo: #4f46e5;
  --utility-indigo-light: #eef2ff;
  --pass-emerald: #059669;       /* Pass Emerald */
  --pass-tint: #ecfdf5;
  --fail-rose: #e11d48;          /* Fail Rose */
  --fail-tint: #fff1f2;
  --neutral-slate: #334155;      /* Neutral Slate */
  --warning-amber: #f59e0b;      /* Warning Amber */
  --warning-tint: #fffbeb;

  --bg-slate: #f8fafc;
  --card-bg: #ffffff;
  --text-main: #0f172a;
  --text-muted: #64748b;
  --border-light: rgba(226, 232, 240, 0.9);
  --border-subtle: #f1f5f9;
  --border-focus: #1e3a8a;
  
  --shadow-2xs: 0 1px 1px 0 rgba(0, 0, 0, 0.03);
  --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-card: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-dropdown: 0 12px 28px -4px rgba(15, 23, 42, 0.12);
  --shadow-sticky-rtl: -4px 0 8px -2px rgba(15, 23, 42, 0.06);

  --font-sans: 'Inter', 'Cairo', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-arabic: 'Amiri', 'Sakkal Majalla', 'Cairo', serif;

  /* Mathematical Radii Hierarchy */
  --radius-sm: 0.375rem; /* 6px */
  --radius-md: 0.5rem;   /* 8px */
  --radius-lg: 0.75rem;  /* 12px - rounded-xl for form inputs and controls */
  --radius-card: 1rem;   /* 16px - rounded-2xl for cards & tables */
  --radius-modal: 1.5rem;/* 24px - rounded-3xl for modals */
  --radius-pill: 9999px; /* rounded-full for pills, chips, toasts */
}

/* ==========================================================================
   2. GLOBAL BASE & CORE RESETS (Tactile Bay Ergonomics & Viewport Hardening)
   ========================================================================== */
* {
  box-sizing: border-box;
  font-family: var(--font-sans);
  -webkit-tap-highlight-color: transparent;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  background-color: var(--bg-slate);
  color: var(--text-main);
  margin: 0;
  padding: 0;
  direction: rtl;
  min-height: 100vh;
  min-height: 100svh;
  text-rendering: optimizeLegibility;
  overscroll-behavior-y: none;
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.font-arabic {
  font-family: var(--font-arabic) !important;
}

/* Precision 5px Micro-Scrollbars */
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

::-webkit-scrollbar-track {
  background: #f8fafc;
}

::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

.hide-scrollbar::-webkit-scrollbar {
  display: none;
}

.hide-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* ==========================================================================
   3. FLAT INSTITUTIONAL CARD & SURFACE DESIGN (Sovereign Navy Aesthetic)
   ========================================================================== */
.modern-card {
  background: var(--card-bg);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-xs);
  transition: all 0.15s ease;
}

.modern-card:hover {
  border-color: #cbd5e1;
  box-shadow: 0 4px 12px -2px rgba(15, 23, 42, 0.06);
}

/* Metric KPI Card */
.metric-card-banking {
  background: var(--card-bg);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-card);
  padding: 0.875rem 1rem;
  box-shadow: var(--shadow-xs);
  transition: all 0.15s ease;
}

.metric-card-banking:hover {
  border-color: #cbd5e1;
  box-shadow: 0 4px 12px -2px rgba(15, 23, 42, 0.06);
  transform: translateY(-1px);
}

/* Solid Sovereign Institutional Header */
.corporate-header {
  background: var(--primary-navy);
  border-bottom: 1px solid #1e3a8a;
}

/* Active Card Glow Rings */
.ring-pass {
  box-shadow: 0 0 0 1px rgba(16, 185, 129, 0.35) !important;
}
.ring-fail {
  box-shadow: 0 0 0 2px rgba(225, 29, 72, 0.8) !important;
}
.ring-pending {
  box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.4) !important;
}

/* ==========================================================================
   4. FORM INPUTS & STRICT 38px PRECISION CONTROLS (DESIGN_SYSTEM Spec)
   ========================================================================== */
.modern-input {
  width: 100%;
  height: 2.375rem; /* Strict 38px Height */
  min-height: 2.375rem;
  padding: 0.4rem 0.75rem;
  background-color: #f8fafc;
  border: 1px solid #cbd5e1;
  border-radius: var(--radius-lg); /* 12px rounded-xl */
  font-size: 0.875rem; /* 14px */
  font-weight: 500;
  line-height: 1.35;
  color: var(--text-main);
  outline: none;
  box-shadow: var(--shadow-2xs);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
  box-sizing: border-box;
}

.modern-input:hover {
  background-color: #ffffff;
  border-color: #94a3b8;
}

.modern-input:focus {
  background-color: #ffffff;
  border-color: var(--border-focus);
  box-shadow: 0 0 0 2px rgba(30, 58, 138, 0.2), 0 1px 2px 0 rgba(0, 0, 0, 0.04);
}

textarea.modern-input {
  height: auto;
  min-height: 3.5rem;
  max-height: 7rem;
  padding: 0.5rem 0.75rem;
  line-height: 1.4;
  resize: vertical;
}

.modern-input::placeholder {
  color: #94a3b8;
  font-weight: 400;
  font-size: 0.8125rem;
}

.modern-input:disabled {
  background-color: #f1f5f9;
  color: #94a3b8;
  border-color: var(--border-light);
  cursor: not-allowed;
}

/* Ensure padding-right and padding-left NEVER get overridden when inputs contain icons/actions */
.modern-input.pr-7,
.relative > .modern-input.pr-7,
.modern-input.has-icon-right {
  padding-right: 1.85rem !important; /* 30px clear space for right icon */
}

.modern-input.pl-11,
.relative > .modern-input.pl-11,
.modern-input.has-action-left {
  padding-left: 2.25rem !important; /* 36px clear space for left buttons */
}

/* Hide scrollbars cleanly across all platforms */
.scrollbar-none::-webkit-scrollbar,
.no-scrollbar::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

.scrollbar-none,
.no-scrollbar {
  -ms-overflow-style: none !important;
  scrollbar-width: none !important;
}

/* Institutional Micro Form Labels (DESIGN_SYSTEM Spec: 10px Bold Uppercase Aligned Baselines) */
#inspectionForm label:not(.custom-control-label):not(.bento-pill),
.modern-field-label {
  font-size: 0.625rem !important; /* 10px */
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  color: #64748b !important; /* slate-500 */
  line-height: 1.1 !important;
  min-height: 22px !important;
  display: flex !important;
  align-items: flex-end !important;
  margin-bottom: 0.25rem !important;
  user-select: none;
}

/* ==========================================================================
   4.1 ULTRA-COMPACT MICRO-INPUTS & ZERO-SCROLL PRECISION SYSTEM (Banking Standard)
   ========================================================================== */

/* 0. In-Border Integrated Micro-Field System (36px Precision for Zero-Scroll) */
.micro-field {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 0.5rem; /* 8px */
  padding: 2px 7px;
  height: 2.375rem; /* 38px */
  min-height: 2.375rem;
  max-height: 2.375rem;
  min-width: 0;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
  box-sizing: border-box;
}

.micro-field:hover {
  border-color: #94a3b8;
}

.micro-field:focus-within {
  border-color: var(--primary-navy);
  box-shadow: 0 0 0 1.5px rgba(13, 40, 71, 0.15);
  background-color: #ffffff;
}

.micro-field .micro-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.5625rem; /* 9px */
  font-weight: 700;
  color: #64748b;
  line-height: 1;
  margin-bottom: 1px;
  user-select: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.micro-field .micro-label .req {
  color: #ef4444;
  margin-right: 1px;
}

.micro-input {
  width: 100% !important;
  height: 1.2rem !important; /* ~19px */
  min-height: 1.2rem !important;
  max-height: 1.2rem !important;
  line-height: 1.2rem !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  outline: none !important;
  background: transparent !important;
  font-size: 0.75rem !important; /* 12px */
  font-weight: 600 !important;
  color: #0f172a !important;
  box-shadow: none !important;
  direction: rtl;
  text-align: right;
  -webkit-appearance: none;
  appearance: none;
}

.micro-input:focus {
  outline: none !important;
  box-shadow: none !important;
}

.micro-input::placeholder {
  color: #94a3b8 !important;
  font-weight: 400 !important;
  font-size: 0.6875rem !important; /* 11px */
}

select.micro-input {
  cursor: pointer;
  padding-left: 14px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2364748b'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left 0px center;
  background-size: 10px 10px;
}

input[type="date"].micro-input {
  padding-left: 0 !important;
  font-family: inherit;
  font-size: 0.6875rem !important; /* 11px */
}

input[type="date"].micro-input::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: 0.6;
  padding: 0;
  margin: 0;
  filter: invert(0.3);
  transform: scale(0.85);
}

/* 1. Compact Field Container */
.compact-field {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  margin-bottom: 0;
}

/* Micro-label: text-[10px] text-slate-500 font-semibold mb-0.5 leading-none */
.compact-field > .micro-label,
.compact-field > label.micro-label,
.compact-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.625rem; /* 10px */
  font-weight: 600;
  line-height: 1;
  color: #64748b; /* slate-500 */
  margin-bottom: 0.125rem; /* 2px (mb-0.5) */
  padding: 0 0.125rem;
  letter-spacing: -0.01em;
  user-select: none;
  -webkit-user-select: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.compact-label .req,
.micro-label .req {
  color: #ef4444; /* rose-500 */
  margin-right: 0.15rem;
  font-weight: 700;
}

.compact-label .hint,
.micro-label .hint {
  font-size: 0.5625rem; /* 9px */
  font-weight: 400;
  color: #94a3b8;
}

/* 2. Modern Compact Input (Height 32px, text-xs, px-2.5, py-1, rounded-lg, crisp border) */
.modern-input-compact {
  width: 100%;
  height: 2rem !important; /* 32px precision height */
  min-height: 2rem !important;
  max-height: 2rem !important;
  padding: 0.25rem 0.625rem !important; /* py-1 px-2.5 (4px 10px) */
  background-color: #ffffff;
  border: 1px solid #cbd5e1 !important; /* crisp slate-300 border */
  border-radius: 0.5rem !important; /* rounded-lg 8px */
  font-size: 0.75rem !important; /* 12px (text-xs) */
  font-weight: 600;
  line-height: 1.25 !important;
  color: var(--text-main);
  outline: none;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.03);
  transition: border-color 0.12s ease, box-shadow 0.12s ease, background-color 0.12s ease;
  direction: rtl;
  text-align: right;
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
}

textarea.modern-input-compact {
  height: auto !important;
  min-height: 2.25rem !important;
  max-height: 3.5rem !important;
  padding: 0.35rem 0.625rem !important;
  line-height: 1.3 !important;
  resize: vertical;
}

.modern-input-compact:focus {
  background-color: #ffffff;
  border-color: var(--border-focus) !important;
  box-shadow: 0 0 0 1px var(--border-focus), 0 1px 2px 0 rgba(13, 40, 71, 0.08) !important;
}

.modern-input-compact::placeholder {
  color: #94a3b8;
  font-weight: 400;
  font-size: 0.6875rem; /* 11px */
}

.modern-input-compact:disabled,
.modern-input-compact[readonly].bg-slate-50 {
  background-color: #f8fafc !important;
  color: #475569;
  border-color: #e2e8f0 !important;
  cursor: default;
}

/* 3. Floating or Integrated Micro-Labels (Zero Extra Vertical Spacing) */

/* Option A: Floating micro-label embedded inside the 32px input */
.compact-field-floating {
  position: relative;
  width: 100%;
  min-width: 0;
  height: 2rem; /* Exactly 32px container */
}

.compact-field-floating .floating-micro-label {
  position: absolute;
  top: 2px;
  right: 0.625rem;
  font-size: 0.5625rem; /* 9px */
  font-weight: 700;
  line-height: 1;
  color: #64748b;
  pointer-events: none;
  z-index: 2;
  user-select: none;
  -webkit-user-select: none;
  letter-spacing: -0.01em;
  transform-origin: right top;
  transition: color 0.15s ease;
}

.compact-field-floating:focus-within .floating-micro-label {
  color: var(--primary-navy-light);
}

.compact-field-floating .modern-input-compact {
  height: 2rem !important;
  min-height: 2rem !important;
  max-height: 2rem !important;
  padding-top: 0.625rem !important; /* 10px from top to clear label */
  padding-bottom: 0.05rem !important;
  padding-right: 0.625rem !important;
  font-size: 0.6875rem !important; /* 11px */
  line-height: 1.1 !important;
}

/* Option B: Inset / Integrated Badge Label (Label pill inside single 32px row) */
.compact-field-integrated {
  position: relative;
  display: flex;
  align-items: center;
  background-color: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 0.5rem;
  height: 2rem;
  min-height: 2rem;
  max-height: 2rem;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.03);
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
  overflow: hidden;
  box-sizing: border-box;
}

.compact-field-integrated:focus-within {
  border-color: var(--border-focus);
  box-shadow: 0 0 0 1px var(--border-focus);
}

.compact-field-integrated .integrated-label {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  padding: 0 0.5rem;
  height: 100%;
  font-size: 0.625rem; /* 10px */
  font-weight: 700;
  color: #475569;
  background-color: #f1f5f9;
  border-left: 1px solid #e2e8f0;
  user-select: none;
  -webkit-user-select: none;
  white-space: nowrap;
}

.compact-field-integrated .integrated-input {
  flex: 1;
  min-width: 0;
  height: 100% !important;
  border: none !important;
  background: transparent !important;
  padding: 0 0.5rem !important;
  font-size: 0.75rem !important;
  font-weight: 600;
  color: var(--text-main);
  outline: none !important;
  box-shadow: none !important;
}

/* Option C: Horizontal Inline Field (Micro-label and 32px input side-by-side) */
.compact-field-inline {
  display: flex;
  align-items: center;
  gap: 0.375rem; /* 6px */
  height: 2rem;
  width: 100%;
  min-width: 0;
}

.compact-field-inline > .compact-label {
  flex-shrink: 0;
  width: auto;
  min-width: 4rem;
  margin-bottom: 0;
  text-align: right;
}

.compact-field-inline > .modern-input-compact {
  flex: 1;
  min-width: 0;
}

/* 4. Ultra-Compact Select Dropdowns (No Mobile Overflow) */
select.modern-input-compact {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2364748b' stroke-width='2.2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: left 0.45rem center !important;
  background-size: 0.75rem 0.75rem !important;
  padding-left: 1.5rem !important;
  padding-right: 0.5rem !important;
  cursor: pointer;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

/* 5. Ultra-Compact Date & Time Pickers */
input[type="date"].modern-input-compact,
input[type="datetime-local"].modern-input-compact,
input[type="time"].modern-input-compact {
  background-image: none !important;
  padding-left: 0.35rem !important;
  padding-right: 0.5rem !important;
  font-size: 0.71875rem !important; /* 11.5px */
  font-family: var(--font-sans);
  direction: rtl;
}

input[type="date"].modern-input-compact::-webkit-calendar-picker-indicator,
input[type="datetime-local"].modern-input-compact::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: 0.7;
  padding: 0;
  margin: 0;
  width: 13px;
  height: 13px;
  transition: opacity 0.12s ease;
}

input[type="date"].modern-input-compact::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
}

/* 6. Icons & Action Controls inside Compact Fields */
.compact-field .input-icon-right {
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  color: #94a3b8;
  font-size: 0.6875rem; /* 11px */
  pointer-events: none;
}

.modern-input-compact.has-icon-right {
  padding-right: 1.625rem !important;
}

.compact-field .input-action-left {
  position: absolute;
  left: 0.25rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1.25rem; /* 20px */
  height: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #94a3b8;
  border-radius: 0.375rem;
  font-size: 0.625rem; /* 10px */
  cursor: pointer;
  transition: color 0.12s ease, background-color 0.12s ease;
}

.compact-field .input-action-left:hover {
  color: var(--text-main);
  background-color: #f1f5f9;
}

.modern-input-compact.has-action-left {
  padding-left: 1.625rem !important;
}

/* 7. Zero-Scroll Form & Density System (Mobile 680-800px Viewport Fit) */
.form-compact-zero-scroll {
  padding: 0.5rem 0.75rem !important;
  gap: 0.375rem !important;
}

.form-row-compact {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.375rem;
}

.form-row-compact-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.375rem;
}

.compact-section {
  border-top: 1px solid #f1f5f9;
  padding-top: 0.375rem;
  margin-top: 0.375rem;
}

/* ==========================================================================
   5. SELECT DROPDOWNS & DATEPICKER CONTROLS (RTL ARROW CLASH FIX)
   ========================================================================== */
/* Custom Select Arrow positioned cleanly on the LEFT for RTL */
select.modern-input,
.modern-card select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2364748b' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left 0.65rem center;
  background-size: 0.75rem 0.75rem;
  padding-left: 1.85rem !important;
  padding-right: 0.65rem;
  cursor: pointer;
}

.select-toolbar-compact {
  padding-left: 1.4rem !important;
  padding-right: 0.5rem !important;
  background-position: left 0.35rem center !important;
  background-size: 0.7rem 0.7rem !important;
}

/* Prevent date & time inputs from inheriting dropdown arrow background images */
input[type="date"].modern-input,
input[type="datetime-local"].modern-input,
input[type="time"].modern-input,
input[type="month"].modern-input {
  background-image: none !important;
  -webkit-appearance: none;
  appearance: none;
  padding-left: 0.5rem;
  padding-right: 0.65rem;
  font-size: 0.75rem;
  font-weight: 600;
}

/* Native WebKit Calendar Picker Indicator styling in RTL */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: 0.6;
  padding: 0;
  margin: 0;
  border-radius: 4px;
  transform: scale(0.8);
  transition: opacity 0.15s ease;
}

input[type="date"]::-webkit-calendar-picker-indicator:hover,
input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
}

input[type="date"]::-webkit-calendar-picker-indicator:hover,
input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
  background-color: #f1f5f9;
}

/* Hide duplicate/clashing native arrows on text inputs with datalists */
input[list]:not([type="date"]):not([type="datetime-local"])::-webkit-calendar-picker-indicator {
  display: none !important;
  -webkit-appearance: none;
}

/* Hide unwanted inner spinners in date & numeric inputs */
input[type="date"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* ==========================================================================
   6. SEGMENTED CONTROLS, PROCEDURE PILLS & CHIPS (Crisp Banking UI)
   ========================================================================== */
.segmented-control {
  display: inline-flex;
  align-items: center;
  background-color: #f1f5f9;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 3px;
  gap: 3px;
  user-select: none;
  -webkit-user-select: none;
}

.banking-tab-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  padding: 0.45rem 0.85rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: #64748b;
  background-color: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.15s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
  outline: none;
  user-select: none;
  -webkit-user-select: none;
}

.banking-tab-btn:hover {
  color: var(--text-main);
  background-color: rgba(255, 255, 255, 0.5);
}

.banking-tab-btn.active {
  background-color: #ffffff !important;
  color: var(--primary-navy) !important;
  font-weight: 700 !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.06), 0 1px 2px 0 rgba(0, 0, 0, 0.04) !important;
}

.banking-tab-btn:active {
  transform: scale(0.97);
}

/* Procedure Pills & Action Chips */
.procedure-pill,
.proc-chip {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.45rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  background-color: transparent;
  color: #64748b;
  cursor: pointer;
  transition: all 0.15s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
  -webkit-user-select: none;
  text-align: center;
  outline: none;
}

.procedure-pill:hover,
.proc-chip:hover {
  color: var(--text-main);
  background-color: rgba(255, 255, 255, 0.6);
}

.procedure-pill.active,
.proc-chip.active {
  background-color: #ffffff !important;
  color: var(--primary-navy) !important;
  font-weight: 800 !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.08), 0 1px 2px 0 rgba(0, 0, 0, 0.04) !important;
}

.procedure-pill:active,
.proc-chip:active {
  transform: scale(0.96);
}

/* Testing Type Segmented Buttons */
#testingTypeSelector {
  background-color: #f1f5f9;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 3px;
  gap: 3px;
}

#testingTypeSelector .testing-btn {
  min-height: 38px;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  color: #64748b;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
  -webkit-user-select: none;
  outline: none;
}

#testingTypeSelector .testing-btn:hover {
  color: var(--text-main);
  background-color: rgba(255, 255, 255, 0.6);
}

#testingTypeSelector .testing-btn.active {
  background-color: #ffffff !important;
  color: var(--primary-navy) !important;
  font-weight: 800 !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.08), 0 1px 2px 0 rgba(0, 0, 0, 0.04) !important;
}

#testingTypeSelector .testing-btn:active {
  transform: scale(0.97);
}

/* Sample Quick 1-Tap Chips */
.sample-quick-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.65rem;
  min-height: 32px;
  border-radius: 6px;
  font-size: 0.72rem;
  font-weight: 600;
  background-color: #ffffff;
  border: 1px solid #e2e8f0;
  color: #1e293b;
  cursor: pointer;
  transition: all 0.15s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
  -webkit-user-select: none;
}

.sample-quick-chip:hover {
  border-color: var(--primary-navy);
  color: var(--primary-navy);
  background-color: #f8fafc;
}

.sample-quick-chip.active {
  background-color: var(--primary-navy);
  border-color: var(--primary-navy);
  color: #ffffff;
  box-shadow: 0 1px 3px rgba(13, 40, 71, 0.2);
}

.sample-quick-chip:active {
  transform: scale(0.96);
}

/* ==========================================================================
   7. MINIMAL HIGH-DENSITY TABLE SYSTEM (RTL Sticky Action Column & Header)
   ========================================================================== */
table {
  font-variant-numeric: tabular-nums;
}

/* Enable text wrapping on table cells to lessen horizontal scroll */
.table-container table {
  white-space: normal;
  line-height: 1.35;
}

.table-container th,
.table-container td {
  vertical-align: middle;
  word-break: break-word;
  overflow-wrap: break-word;
}

.cell-nowrap {
  white-space: nowrap !important;
}

.cell-wrap-sm {
  min-width: 90px;
  max-width: 140px;
  white-space: normal;
  word-break: break-word;
}

.cell-wrap-md {
  min-width: 130px;
  max-width: 200px;
  white-space: normal;
  word-break: break-word;
}

.cell-wrap-lg {
  min-width: 160px;
  max-width: 260px;
  white-space: normal;
  word-break: break-word;
}

.table-container {
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 #f8fafc;
  -webkit-overflow-scrolling: touch;
}

.table-container::-webkit-scrollbar {
  height: 6px;
  width: 6px;
}

.table-container::-webkit-scrollbar-track {
  background: #f8fafc;
}

.table-container::-webkit-scrollbar-thumb {
  background-color: #cbd5e1;
  border-radius: 3px;
}

.table-container::-webkit-scrollbar-thumb:hover {
  background-color: #94a3b8;
}

/* Sticky Action Column in RTL */
.sticky-action-col {
  position: sticky;
  right: 0;
  z-index: 10;
  background-color: #ffffff !important;
  border-left: 1px solid var(--border-light) !important;
  box-shadow: var(--shadow-sticky-rtl);
}

/* Alternating opaque row background for sticky column */
tr:nth-child(even) .sticky-action-col {
  background-color: #fafbfc !important;
}

tr:hover .sticky-action-col {
  background-color: #f1f5f9 !important;
}

/* Header Sticky Action Column - Must float above both scrolled header and body columns */
thead .sticky-action-col,
thead th.sticky-action-col {
  background-color: #f8fafc !important;
  z-index: 30 !important;
  border-left: 1px solid var(--border-light) !important;
  box-shadow: var(--shadow-sticky-rtl);
}

/* ==========================================================================
   8. RESPONSIVE MODAL SYSTEM (Safe-Area Inset, Dynamic Viewport & Scroll Bounce)
   ========================================================================== */
#inspectionDetailsModal,
#newInspectionModal,
#successModal,
#serverModal,
#labModal,
#rssUploadModal,
#inPageConfirmModal,
.modal-overlay {
  background-color: rgba(15, 23, 42, 0.8) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: env(safe-area-inset-top, 16px) env(safe-area-inset-right, 16px) env(safe-area-inset-bottom, 16px) env(safe-area-inset-left, 16px);
}

#newInspectionModal:not(.hidden),
#successModal:not(.hidden),
#serverModal:not(.hidden),
#labModal:not(.hidden),
#rssUploadModal:not(.hidden),
#inPageConfirmModal:not(.hidden) {
  display: flex !important;
}

#newInspectionModal > div,
#successModal > div,
#serverModal > div,
#labModal > div,
#rssUploadModal > div,
#inPageConfirmModal > div,
.modal-dialog {
  max-height: calc(100dvh - 2rem);
  max-height: calc(100vh - 2rem);
  border-radius: var(--radius-modal) !important; /* 24px - rounded-3xl */
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
  border: 1px solid rgba(226, 232, 240, 0.9) !important;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  animation: modalScaleUp 0.18s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes modalScaleUp {
  from {
    opacity: 0;
    transform: scale(0.96) translateY(6px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* ==========================================================================
   9. SUBTLE INSTITUTIONAL BADGES
   ========================================================================== */
.badge-subtle-emerald {
  display: inline-flex;
  align-items: center;
  background-color: #f0fdf4;
  color: #15803d;
  border: 1px solid #bbf7d0;
  padding: 0.125rem 0.5rem;
  border-radius: 0.375rem;
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1.35;
}

.badge-subtle-rose {
  display: inline-flex;
  align-items: center;
  background-color: #fef2f2;
  color: #b91c1c;
  border: 1px solid #fecaca;
  padding: 0.125rem 0.5rem;
  border-radius: 0.375rem;
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1.35;
}

.badge-subtle-slate {
  display: inline-flex;
  align-items: center;
  background-color: #f8fafc;
  color: #475569;
  border: 1px solid #e2e8f0;
  padding: 0.125rem 0.5rem;
  border-radius: 0.375rem;
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.35;
}

.badge-subtle-sky {
  display: inline-flex;
  align-items: center;
  background-color: #f0f9ff;
  color: #0369a1;
  border: 1px solid #bae6fd;
  padding: 0.125rem 0.5rem;
  border-radius: 0.375rem;
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1.35;
}

.badge-subtle-amber {
  display: inline-flex;
  align-items: center;
  background-color: #fffbeb;
  color: #b45309;
  border: 1px solid #fde68a;
  padding: 0.125rem 0.5rem;
  border-radius: 0.375rem;
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1.35;
}

/* ==========================================================================
   10. INSTITUTIONAL FLOATING TOAST NOTIFICATIONS (DESIGN_SYSTEM Spec 7.11)
   ========================================================================== */
#toastContainer {
  position: fixed;
  bottom: 1.25rem; /* bottom-5 */
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
  width: auto;
  max-width: 92vw;
}

.toast {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: var(--radius-pill); /* 9999px rounded-full */
  background: rgba(15, 23, 42, 0.95); /* bg-slate-900/95 */
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: #ffffff;
  border: 1px solid rgba(51, 65, 85, 0.6);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 8px 10px -6px rgba(0, 0, 0, 0.2);
  font-size: 0.75rem;
  font-weight: 500;
  transform: translateY(14px) scale(0.96);
  opacity: 0;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
}

.toast.show {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.toast-success {
  border-color: rgba(16, 185, 129, 0.4);
  color: #a7f3d0;
  box-shadow: 0 10px 25px -5px rgba(5, 150, 105, 0.25);
}

.toast-error {
  border-color: rgba(244, 63, 94, 0.4);
  color: #fecdd3;
  box-shadow: 0 10px 25px -5px rgba(225, 29, 72, 0.25);
}

.toast-info {
  border-color: rgba(59, 130, 246, 0.4);
  color: #bfdbfe;
  box-shadow: 0 10px 25px -5px rgba(37, 99, 235, 0.25);
}

.toast .toast-close-btn {
  background: transparent;
  border: none;
  color: #94a3b8;
  padding: 2px;
  cursor: pointer;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s ease;
  margin-right: 0.25rem;
}

.toast .toast-close-btn:hover {
  color: #ffffff;
}

/* ==========================================================================
   10.1 TACTILE 46px TOUCH PILL SEGMENTS & DEFECT QUICK-CHIPS (Spec 7.5)
   ========================================================================== */
.touch-pill-46 {
  height: 46px !important;
  min-height: 46px !important;
  border-radius: var(--radius-lg) !important; /* 12px rounded-xl */
  font-weight: 700 !important;
  font-size: 0.8125rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.4rem !important;
  transition: all 0.15s ease !important;
  cursor: pointer !important;
  user-select: none !important;
  -webkit-tap-highlight-color: transparent !important;
}

.touch-pill-46:active {
  transform: scale(0.98) !important;
}

.touch-pill-pass {
  background: #f1f5f9;
  color: #334155;
  border: 1px solid #e2e8f0;
}
.touch-pill-pass:hover {
  background: #ecfdf5;
  color: #047857;
  border-color: #a7f3d0;
}
.touch-pill-pass.active {
  background: #059669 !important;
  color: #ffffff !important;
  border-color: #059669 !important;
  box-shadow: 0 4px 12px rgba(5, 150, 105, 0.3) !important;
  outline: 2px solid rgba(52, 211, 153, 0.5) !important;
}

.touch-pill-fail {
  background: #f1f5f9;
  color: #334155;
  border: 1px solid #e2e8f0;
}
.touch-pill-fail:hover {
  background: #fff1f2;
  color: #be123c;
  border-color: #fecdd3;
}
.touch-pill-fail.active {
  background: #e11d48 !important;
  color: #ffffff !important;
  border-color: #e11d48 !important;
  box-shadow: 0 4px 12px rgba(225, 29, 72, 0.3) !important;
  outline: 2px solid rgba(251, 113, 133, 0.5) !important;
}

.touch-pill-na {
  background: #f1f5f9;
  color: #334155;
  border: 1px solid #e2e8f0;
}
.touch-pill-na:hover {
  background: #f8fafc;
  color: #0f172a;
}
.touch-pill-na.active {
  background: #334155 !important;
  color: #ffffff !important;
  border-color: #334155 !important;
  box-shadow: 0 4px 12px rgba(51, 65, 85, 0.3) !important;
  outline: 2px solid rgba(148, 163, 184, 0.5) !important;
}

.defect-quick-chip {
  font-size: 0.6875rem;
  font-weight: 600;
  padding: 0.25rem 0.6rem;
  background-color: #fff1f2;
  color: #be123c;
  border: 1px solid #fecdd3;
  border-radius: 0.5rem;
  transition: all 0.12s ease;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  user-select: none;
}
.defect-quick-chip:hover {
  background-color: #ffe4e6;
  color: #9f1239;
}
.defect-quick-chip:active {
  transform: scale(0.96);
}

/* Micro-Progress Pulse Bar across Sticky Header */
.header-progress-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: #f1f5f9;
  overflow: hidden;
  z-index: 40;
}
.header-progress-bar-inner {
  height: 100%;
  width: 100%;
  background: #10b981;
  animation: pulseEmerald 1.2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes pulseEmerald {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* ==========================================================================
   11. MOBILE POLISH & TOUCH OPTIMIZATIONS (Max Width 640px)
   ========================================================================== */
@media (max-width: 640px) {
  /* Strict 38px Inputs maintained on mobile per DESIGN_SYSTEM spec */
  .modern-input:not(.modern-input-compact):not(.micro-input),
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="button"]):not([type="submit"]):not(.modern-input-compact):not(.integrated-input):not(.micro-input),
  select.modern-input:not(.modern-input-compact):not(.micro-input),
  .modern-card select:not(.modern-input-compact):not(.micro-input) {
    font-size: 0.875rem !important;
    height: 2.375rem !important; /* Strict 38px */
    min-height: 2.375rem !important;
    padding-top: 0.4rem !important;
    padding-bottom: 0.4rem !important;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    border-radius: var(--radius-lg) !important;
  }

  /* Specific padding for inputs with icons on mobile so text NEVER overlaps icons */
  .modern-input.pr-7,
  .relative > .modern-input.pr-7,
  .modern-input.has-icon-right {
    padding-right: 1.85rem !important;
  }

  .modern-input.pl-11,
  .relative > .modern-input.pl-11,
  .modern-input.has-action-left {
    padding-left: 2.25rem !important;
  }

  select.modern-input:not(.modern-input-compact):not(.micro-input),
  .modern-card select:not(.modern-input-compact):not(.micro-input) {
    padding-left: 1.85rem !important;
  }

  /* Ultra-Compact Micro-Input System on Mobile (Strict 32px Zero-Scroll Height) */
  .modern-input-compact {
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
    font-size: 12px !important;
    padding: 0.25rem 0.5rem !important;
    line-height: 1.25 !important;
  }

  .compact-field > .micro-label,
  .compact-field > label.micro-label,
  .compact-label {
    font-size: 10px !important;
    line-height: 1 !important;
    margin-bottom: 2px !important;
  }

  .compact-field-floating .modern-input-compact {
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
    font-size: 11px !important;
    padding-top: 10px !important;
    padding-bottom: 2px !important;
  }

  .compact-field-floating .floating-micro-label {
    font-size: 9px !important;
    top: 2px !important;
  }

  .compact-field-integrated {
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
  }

  .compact-field-integrated .integrated-input {
    font-size: 12px !important;
    height: 100% !important;
  }

  textarea.modern-input:not(.modern-input-compact) {
    font-size: 0.8125rem !important;
    height: auto !important;
    min-height: 3.25rem !important;
    max-height: 5.5rem !important;
    padding: 0.4rem 0.65rem !important;
  }

  /* Segmented pills on mobile touch devices */
  .bento-pill-group {
    height: 2rem !important;
  }

  .procedure-pill,
  .proc-chip {
    min-height: 32px;
    font-size: 0.75rem;
  }

  #testingTypeSelector .testing-btn {
    min-height: 34px;
    font-size: 0.75rem;
  }

  .banking-tab-btn {
    min-height: 38px;
    font-size: 0.75rem;
  }

  .sample-quick-chip {
    min-height: 34px;
    font-size: 0.75rem;
    padding: 0.4rem 0.75rem;
  }

  /* Modal handling on mobile */
  #newInspectionModal,
  #successModal,
  #serverModal,
  #labModal,
  #rssUploadModal,
  .modal-overlay {
    padding: max(0.75rem, env(safe-area-inset-top)) max(0.75rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) max(0.75rem, env(safe-area-inset-left)) !important;
    align-items: center;
    justify-content: center;
  }

  #successModal > div,
  #serverModal > div,
  #labModal > div,
  #rssUploadModal > div,
  .modal-dialog:not(#newInspectionModal .modal-dialog) {
    max-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 2rem) !important;
    max-width: 100% !important;
    width: 100% !important;
    padding: 1.25rem 1rem !important;
    border-radius: 1rem !important;
  }

  /* Mobile Toast positioning follows Spec 7.11 floating bottom pill */
  #toastContainer {
    bottom: 1.25rem;
    left: 50%;
    transform: translateX(-50%);
    top: auto;
    max-width: 92vw;
  }

  /* Mobile floating action bar safe area */
  .fixed.bottom-0 {
    padding-bottom: max(0.625rem, calc(env(safe-area-inset-bottom) + 0.35rem)) !important;
  }

  /* Eliminate excess padding on mobile so inspection form stays above the fold */
  main.above-the-fold-main,
  body.compact-viewport main {
    padding-top: 0.35rem !important;
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
    padding-bottom: 3.5rem !important;
  }

  form.form-compact-zero-scroll,
  .modern-card.card-compact {
    padding: 0.5rem !important;
    border-radius: 0.625rem !important;
  }
}

/* ==========================================================================
   11.1 ABOVE-THE-FOLD ZERO-SCROLL VIEWPORT ADAPTATION (~680px - 820px Screens)
   ========================================================================== */
@media screen and (max-height: 820px) {
  .corporate-header {
    height: 2.5rem !important;
  }
  .corporate-header .h-12 {
    height: 2.5rem !important;
  }
  main {
    padding-top: 0.375rem !important;
    padding-bottom: 3.25rem !important;
  }
  #ocrScanBanner {
    margin-bottom: 0.375rem !important;
  }
  #ocrScanBanner button {
    padding-top: 0.375rem !important;
    padding-bottom: 0.375rem !important;
  }
  .modern-card.form-above-the-fold {
    padding: 0.5rem 0.625rem !important;
  }
  .modern-card.form-above-the-fold > div {
    margin-top: 0.25rem !important;
    padding-top: 0.25rem !important;
  }
}

/* ==========================================================================
   12. PRINT SPECIFIC RULES
   ========================================================================== */
@media print {
  body {
    background: #ffffff !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  .no-print {
    display: none !important;
  }
  .print-page {
    width: 210mm;
    min-height: 297mm;
    padding: 15mm;
    margin: 0 auto;
    page-break-after: always;
    background: #ffffff;
    box-shadow: none !important;
    border: none !important;
  }
  @page {
    size: A4 portrait;
    margin: 0;
  }
}

/* ==========================================================================
   13. MODAL & DIALOG MOBILE REFINEMENTS
   ========================================================================== */
.modal-overlay {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.modal-content {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 transparent;
}

.modal-content::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

.modal-content::-webkit-scrollbar-track {
  background: transparent;
}

.modal-content::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 9999px;
}

@media (max-width: 450px) {
  .modal-dialog {
    margin: 12px !important;
    max-height: calc(100dvh - 24px) !important;
    width: calc(100vw - 24px) !important;
  }
}

/* ==========================================================================
   14. PORTAL SEAMLESS AUTOCOMPLETE DROPDOWN & MODERN LISTS
   ========================================================================== */
.portal-autocomplete-wrap,
.portal-select-wrap {
  position: relative;
}

.portal-autocomplete-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  left: 0;
  z-index: 80;
  background-color: #ffffff !important;
  border: 1px solid #cbd5e1;
  border-radius: 0.75rem; /* 12px */
  box-shadow: 0 12px 28px -4px rgba(15, 23, 42, 0.16), 0 6px 12px -4px rgba(15, 23, 42, 0.08);
  max-height: 240px;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 4px;
}

thead th .portal-autocomplete-dropdown {
  min-width: 175px;
  left: auto;
  right: 0;
}

@media (max-width: 640px) {
  .portal-autocomplete-dropdown {
    max-height: 200px;
  }
  .portal-select-options {
    max-height: 150px !important;
  }
}

.portal-autocomplete-dropdown::-webkit-scrollbar {
  width: 5px;
}
.portal-autocomplete-dropdown::-webkit-scrollbar-thumb {
  background-color: #cbd5e1;
  border-radius: 4px;
}

.portal-dropdown-group {
  margin-bottom: 4px;
}

.portal-dropdown-group-header {
  padding: 6px 10px;
  font-size: 0.6875rem; /* 11px */
  font-weight: 700;
  color: #475569;
  background-color: #f8fafc;
  border-radius: 6px;
  margin-bottom: 2px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  user-select: none;
}

.portal-dropdown-item {
  padding: 9px 12px;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 0.8125rem;
  color: #0f172a;
  background-color: transparent;
  transition: background-color 0.12s ease, color 0.12s ease;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.portal-dropdown-item:hover,
.portal-dropdown-item:active {
  background-color: #f1f5f9;
}

.portal-dropdown-item.active {
  background-color: #e2e8f0;
  font-weight: 700;
}

.portal-dropdown-item-new {
  background-color: #f0fdf4;
  border: 1px dashed #86efac;
  color: #166534;
  margin-top: 4px;
  margin-bottom: 2px;
}

.portal-dropdown-item-new:hover,
.portal-dropdown-item-new:active {
  background-color: #dcfce7;
}

.portal-quick-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  background-color: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
  color: #0f172a;
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  max-width: 100%;
}

.portal-quick-chip:hover {
  background-color: #f8fafc;
  border-color: #94a3b8;
}

.portal-quick-chip:active,
.portal-quick-chip.active {
  background-color: var(--primary-navy);
  border-color: var(--primary-navy);
  color: #ffffff;
}

.portal-quick-chip.active i {
  color: #93c5fd !important;
}

/* ==========================================================================
   SEGMENTED TABS & BENTO ZERO-SCROLL SYSTEM (Mobile & Desktop)
   ========================================================================== */
.form-tab-btn {
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  min-height: 2.375rem; /* 38px */
  cursor: pointer;
  outline: none;
}

.form-tab-btn.active {
  background-color: #ffffff !important;
  color: var(--primary-navy) !important;
  font-weight: 800 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
}

.form-tab-btn.active .tab-num {
  background-color: var(--primary-navy) !important;
  color: #ffffff !important;
}

.form-tab-btn.is-completed .tab-check {
  display: inline-block !important;
}

.form-tab-btn.is-completed .tab-num {
  display: none !important;
}

/* Single Unified Form - all sections visible in a seamless single layout */
.form-tab-pane {
  display: block !important;
}

/* Desktop: Wide 3-column unified layout */
@media (min-width: 1024px) {
  #inspectionForm.desktop-unified-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 1.5rem !important;
  }
  .desktop-unified-grid .form-tab-pane {
    display: block !important;
  }
  .desktop-unified-grid > .desktop-col-full {
    grid-column: span 3 !important;
  }
}

/* Segmented Choice Pills (Procedure, Scope, Label) */
.bento-pill-group {
  display: flex;
  align-items: center;
  background: #f1f5f9;
  padding: 2px;
  border-radius: 0.5rem;
  height: 2rem; /* 32px sleek phone app style */
  gap: 2px;
  border: 1px solid #e2e8f0;
  width: 100%;
}

.bento-pill {
  flex: 1;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6875rem; /* 11px */
  font-weight: 700;
  color: #475569;
  border-radius: 0.375rem;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all 0.12s ease;
  white-space: nowrap;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  padding: 0 4px;
}

.bento-pill:hover {
  color: #0f172a;
}

.bento-pill.active {
  background: #ffffff !important;
  color: var(--primary-navy) !important;
  font-weight: 800 !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08) !important;
}

.bento-pill.active-emerald {
  background: #ecfdf5 !important;
  color: #047857 !important;
  font-weight: 800 !important;
  border: 1px solid #a7f3d0 !important;
}

.bento-pill.active-rose {
  background: #fff1f2 !important;
  color: #be123c !important;
  font-weight: 800 !important;
  border: 1px solid #fecdd3 !important;
}

/* Routine Presets Chips */
.preset-chip {
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}



/* ==========================================================================
   AUXILIARY NEW INSPECTION MODAL - MAXIMUM COMFORTABLE WIDTH SYSTEM
   ========================================================================== */
#newInspectionModal.modal-overlay {
  padding: max(8px, env(safe-area-inset-top, 8px)) 6px max(8px, env(safe-area-inset-bottom, 8px)) 6px !important;
}

#newInspectionModal > div,
#newInspectionModal .modal-dialog {
  width: calc(100vw - 12px) !important;
  max-width: 1240px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  border-radius: 1rem !important;
  box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.25) !important;
}

@media (min-width: 640px) {
  #newInspectionModal.modal-overlay {
    padding: 1rem !important;
  }
  #newInspectionModal > div,
  #newInspectionModal .modal-dialog {
    width: 95vw !important;
    max-width: 1180px !important;
  }
}

@media (min-width: 1024px) {
  #newInspectionModal.modal-overlay {
    padding: 1.5rem !important;
  }
  #newInspectionModal > div,
  #newInspectionModal .modal-dialog {
    width: 92vw !important;
    max-width: 1300px !important;
  }
}

/* ==========================================================================
   11. MODERN BANKING & SMARTPHONE FIRST-PARTY APP COMPONENTS
   ========================================================================== */

/* Mobile Bottom Navigation Bar */
.mobile-nav-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3.5rem; /* 56px standard */
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid rgba(226, 232, 240, 0.9);
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 0 0.5rem;
  z-index: 45;
  box-shadow: 0 -4px 16px rgba(15, 23, 42, 0.05);
}

.mobile-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 4px 12px;
  color: #64748b;
  font-size: 0.65rem;
  font-weight: 700;
  border-radius: var(--radius-lg);
  transition: all 0.15s ease;
  user-select: none;
  cursor: pointer;
  background: transparent;
  border: none;
  outline: none;
}

.mobile-nav-item i {
  font-size: 1.15rem;
  transition: transform 0.15s ease;
}

.mobile-nav-item:hover {
  color: var(--primary-navy);
}

.mobile-nav-item:active {
  transform: scale(0.95);
}

.mobile-nav-item.active {
  color: var(--primary-navy);
}

.mobile-nav-item.active i {
  transform: translateY(-1px);
}

.mobile-nav-item-primary {
  background: var(--primary-navy);
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(30, 58, 138, 0.35);
  padding: 8px 16px;
  border-radius: var(--radius-card); /* rounded-2xl */
  transform: translateY(-4px);
}

.mobile-nav-item-primary:active {
  transform: translateY(-2px) scale(0.95);
}

/* Inspection Cards Stream (Bento Mobile View) */
.inspection-card {
  background: #ffffff;
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: var(--radius-card); /* 16px rounded-2xl */
  padding: 0.875rem 1rem;
  box-shadow: var(--shadow-2xs);
  transition: all 0.15s ease;
  position: relative;
  overflow: hidden;
  user-select: none;
  cursor: pointer;
}

.inspection-card:hover {
  border-color: #cbd5e1;
  box-shadow: 0 4px 12px -2px rgba(15, 23, 42, 0.08);
  transform: translateY(-1px);
}

.inspection-card:active {
  transform: scale(0.98);
}

/* View Mode Segmented Switcher */
.view-mode-toggle {
  display: inline-flex;
  align-items: center;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 0.5rem;
  padding: 2px;
  gap: 2px;
}

.view-mode-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  font-size: 0.75rem;
  font-weight: 600;
  color: #64748b;
  border-radius: 0.375rem;
  border: none;
  background: transparent;
  cursor: pointer;
  transition: all 0.12s ease;
}

.view-mode-btn.active {
  background: #ffffff;
  color: var(--primary-navy);
  font-weight: 700;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

/* Status Filter Pills (Horizontal Scrollable Chips) */
.status-pill-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  font-size: 0.72rem;
  font-weight: 700;
  border-radius: 9999px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  color: #475569;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
  user-select: none;
}

.status-pill-btn:hover {
  background: #f8fafc;
  color: #0f172a;
}

.status-pill-btn.active {
  background: var(--primary-navy) !important;
  color: #ffffff !important;
  border-color: var(--primary-navy) !important;
}

.status-pill-btn.active-compliant {
  background: #ecfdf5 !important;
  color: #047857 !important;
  border-color: #6ee7b7 !important;
}

.status-pill-btn.active-waiting {
  background: #fffbeb !important;
  color: #b45309 !important;
  border-color: #fcd34d !important;
}

.status-pill-btn.active-violation {
  background: #fff1f2 !important;
  color: #be123c !important;
  border-color: #fda4af !important;
}

/* ==========================================================================
   12. v0.45b VISUAL REFINEMENTS & COMFORTABLE TOUCH TARGETS
   ========================================================================== */

/* Modern Utility Polyfills (Tailwind v3/v4 Parity) */
.shadow-2xs {
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.03);
}

.shadow-xs {
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.backdrop-blur-xs {
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* Custom Spacing & Fractional Utilities Polyfill (Tailwind v3 CDN Parity) */
.h-7\.5 {
  height: 1.875rem !important; /* 30px */
}

.h-8\.5 {
  height: 2.125rem !important; /* 34px */
}

.pr-8\.5 {
  padding-right: 2.125rem !important; /* 34px */
}

.pl-8\.5 {
  padding-left: 2.125rem !important; /* 34px */
}

/* Mobile Bottom Navigation Body Clearance (Ensures footer/content is never obscured) */
@media (max-width: 767px) {
  body {
    padding-bottom: 4.75rem !important; /* 76px clearance for 56px bottom nav bar */
  }
}

/* Corporate Header Tab Pills (High-Contrast Active and Inactive States) */
.corporate-header .banking-tab-btn {
  color: rgba(255, 255, 255, 0.85) !important;
}

.corporate-header .banking-tab-btn:hover {
  background-color: rgba(255, 255, 255, 0.15) !important;
  color: #ffffff !important;
}

.corporate-header .banking-tab-btn.active {
  background-color: #ffffff !important;
  color: var(--primary-navy) !important;
  font-weight: 700 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12) !important;
}

.corporate-header .banking-tab-btn.active #tabCountBadge {
  background-color: var(--primary-navy) !important;
  color: #ffffff !important;
}

/* Universal Modal Action & Close Squircles (Desktop 34px, Mobile min 40px) */
.modal-header-btn {
  width: 2.125rem;
  height: 2.125rem;
  border-radius: 0.625rem;
  background-color: #f8fafc;
  border: 1px solid #e2e8f0;
  color: #64748b;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  flex-shrink: 0;
}

.modal-header-btn:hover {
  background-color: #f1f5f9;
  color: #0f172a;
  border-color: #cbd5e1;
}

.modal-header-btn:active {
  transform: scale(0.95);
}

.modal-header-btn-danger:hover {
  background-color: #fff1f2;
  color: #be123c;
  border-color: #fecdd3;
}

/* Filter Bar Unified Precision (Strict 36px Height & Consistent Radius) */
.filter-bar-h9 {
  height: 2.25rem !important; /* 36px */
  min-height: 2.25rem !important;
}

/* Status Filter Pills (Uniform 30px Height & Centered Alignment) */
.status-pill-btn {
  height: 1.875rem !important; /* 30px */
  min-height: 1.875rem !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* High-Density Table Crisp Cell Borders & Row Styling */
#inspectionsTableContainer table {
  border-collapse: separate;
  border-spacing: 0;
}

#inspectionsTableContainer table tbody td {
  border-bottom: 1px solid #f1f5f9;
  border-left: 1px solid #f1f5f9;
  vertical-align: middle;
}

#inspectionsTableContainer table tbody td:last-child {
  border-left: none;
}

#inspectionsTableContainer table tbody tr:nth-child(even) td {
  background-color: #fafbfc;
}

#inspectionsTableContainer table tbody tr:hover td {
  background-color: #eff6ff !important;
}

#inspectionsTableContainer table tbody tr:hover td.sticky-action-col {
  background-color: #eff6ff !important;
}

/* South Schedule Table Styling */
#southTableBody tr {
  border-bottom: 1px solid #f1f5f9;
}

#southTableBody td {
  border-bottom: 1px solid #f1f5f9;
  border-left: 1px solid #f1f5f9;
  vertical-align: middle;
}

#southTableBody td:last-child {
  border-left: none;
}

/* Ensure Dropdown Elevation and Shadow are Clean and Do Not Clip */
.portal-autocomplete-dropdown {
  box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.12), 0 8px 10px -6px rgba(15, 23, 42, 0.08) !important;
  border: 1px solid rgba(226, 232, 240, 0.9) !important;
  border-radius: var(--radius-card, 1rem) !important;
  z-index: 85 !important;
  min-width: 190px !important;
  max-width: calc(100vw - 24px) !important;
  right: 0 !important;
  left: auto !important;
}

/* Mobile Safe-Area and Minimum 40px Touch Targets */
@media (max-width: 640px) {
  .modal-header-btn,
  #clearDraftBtn,
  #ocrUnifiedBtn,
  .modal-dialog button[onclick*="close"],
  #detailEditBtn,
  #detailDeleteBtn {
    min-height: 40px !important;
  }
  .modal-header-btn,
  #clearDraftBtn,
  #ocrUnifiedBtn,
  .modal-dialog button[onclick*="close"],
  #detailEditBtn,
  #detailDeleteBtn {
    min-width: 40px !important;
  }
  .portal-autocomplete-dropdown {
    max-height: 220px !important;
    min-width: 170px !important;
    border-radius: var(--radius-card, 1rem) !important;
  }
  .portal-select-options {
    max-height: 180px !important;
  }
}

/* ==========================================================================
   11. OUTDOOR BAY & ENVIRONMENTAL CONTRAST MODES (DESIGN_SYSTEM Spec 9)
   ========================================================================== */
/* 9.1 Sunlight Mode (High-Glare Desert Direct Sun) */
body.mode-sunlight {
  background-color: #ffffff !important;
  color: #000000 !important;
}
body.mode-sunlight .modern-card,
body.mode-sunlight .inspection-card,
body.mode-sunlight .modal-dialog {
  background-color: #ffffff !important;
  border: 2px solid #000000 !important;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2) !important;
  color: #000000 !important;
  font-weight: 800 !important;
}
body.mode-sunlight .corporate-header,
body.mode-sunlight header {
  background: #000000 !important;
  border-bottom: 2px solid #000000 !important;
  color: #ffffff !important;
}
body.mode-sunlight .modern-input {
  background: #ffffff !important;
  border: 2px solid #000000 !important;
  color: #000000 !important;
  font-weight: 800 !important;
}

/* 9.2 OLED Mode (Low-Light Pit Bay & Battery Saver) */
body.mode-oled {
  background-color: #000000 !important;
  color: #f1f5f9 !important;
}
body.mode-oled .modern-card,
body.mode-oled .inspection-card,
body.mode-oled .modal-dialog {
  background-color: #000000 !important;
  border: 1px solid #1e293b !important;
  color: #f1f5f9 !important;
}
body.mode-oled .corporate-header,
body.mode-oled header {
  background: #0f172a !important;
  border-bottom: 1px solid #334155 !important;
  color: #d8b4fe !important;
}
body.mode-oled .modern-input {
  background: #0f172a !important;
  border: 1px solid #1e293b !important;
  color: #ffffff !important;
}