/* Base Typography & Sizing */
html {
  background-color: #e2e8f0; /* Slate-200 page canvas background */
  font-size: 100%; /* Default 16px base font on mobile viewports */
}

@media (min-width: 768px) {
  html {
    font-size: 115%; /* Enhanced ~18.4px desktop base font for large displays */
  }
}

/* Clean Horizontal Touch Scrolling (Hide Native Scrollbars) */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

body {
  background: linear-gradient(#e2e8f0 55%, #94a3b8) fixed;
  font-family: 'IBM Plex Sans Condensed', 'IBM Plex Sans', 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size-adjust: from-font;
}

/* Top Navigation Bar — subtly lit upper half, solid dark base from midpoint to bottom */
#main-header {
  background: linear-gradient(180deg, #1e293b 0%, #020617 50%, #020617 100%);
}

/* Tabular Numbers for JetBrains Mono */
.font-mono-numbers,
.font-mono {
  font-variant-numeric: tabular-nums;
}

/* Universal Form Field Labels (Default Natural Spacing) */
label:not(.flex):not(.cursor-pointer):not(.select-none),
label.block:not(.flex),
form label:not(.flex):not(.cursor-pointer):not(.select-none) {
  font-size: 0.55rem !important; /* 80% micro-label (down from 0.68rem) */
  font-weight: 700 !important;
  color: #64748b !important; /* Slate-500 for clean optical contrast */
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  line-height: 1.1 !important;
}

/* Bottom alignment utility for form field grid rows */
.items-end,
.field-row-aligned {
  align-items: flex-end !important;
}

/* Compact Tonal Well Formfield Inputs (Border-Minimal Insets, Slimmer Padding, 110% Condensed Fill Text) */
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([type="range"]):not([type="button"]):not([type="submit"]):not([type="color"]),
select {
  background-color: #f1f5f9 !important; /* Slate-100 tonal well */
  padding-top: 0.22rem !important; /* Reduced vertical padding */
  padding-bottom: 0.22rem !important;
  min-height: 1.65rem !important; /* Uniform height for horizontal row alignment */
  border-radius: 0.375rem !important;
  border: 1px solid transparent !important;
  box-shadow: inset 0 1px 2px 0 rgba(15, 23, 42, 0.06) !important;
  transition: background-color 0.12s ease, box-shadow 0.12s ease !important;
  font-family: 'IBM Plex Sans Condensed', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-size: 0.88rem !important; /* ~110% larger condensed fill text for high density */
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  line-height: 1.25 !important;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([type="range"]):not([type="button"]):not([type="submit"]):not([type="color"]):focus,
select:focus {
  background-color: #ffffff !important;
  border-color: #3b82f6 !important;
  box-shadow: inset 0 1px 1px 0 rgba(15, 23, 42, 0.04), 0 0 0 2px rgba(59, 130, 246, 0.35) !important;
}

textarea {
  background-color: #f1f5f9 !important;
  padding-top: 0.26rem !important;
  padding-bottom: 0.26rem !important;
  border-radius: 0.375rem !important;
  border: 1px solid transparent !important;
  box-shadow: inset 0 1px 2px 0 rgba(15, 23, 42, 0.06) !important;
  transition: background-color 0.12s ease, box-shadow 0.12s ease !important;
  font-family: 'IBM Plex Sans Condensed', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-size: 0.88rem !important;
  font-weight: 500 !important;
  line-height: 1.35 !important;
}

textarea:focus {
  background-color: #ffffff !important;
  border-color: #3b82f6 !important;
  box-shadow: inset 0 1px 1px 0 rgba(15, 23, 42, 0.04), 0 0 0 2px rgba(59, 130, 246, 0.35) !important;
}

/* Slightly trim standard horizontal padding while preserving icon offsets (e.g. pl-8, pr-9) */
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([type="range"]):not([type="button"]):not([type="submit"]):not([type="color"]):not([class*="pl-"]),
select:not([class*="pl-"]),
textarea:not([class*="pl-"]) {
  padding-left: 0.48rem !important;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([type="range"]):not([type="button"]):not([type="submit"]):not([type="color"]):not([class*="pr-"]),
select:not([class*="pr-"]),
textarea:not([class*="pr-"]) {
  padding-right: 0.48rem !important;
}

/* Monospace inputs for codes, dates and monetary values */
input.font-mono,
input[class*="font-mono"],
input[id*="travel"],
input[id*="issued"],
input[id*="cost"],
input[id*="invoiceNo"],
input[id*="accountNo"],
input[id*="pnr"] {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  font-variant-numeric: tabular-nums !important;
  letter-spacing: -0.01em !important;
}

/* Subtle, clear placeholder styling */
input::placeholder,
textarea::placeholder {
  color: #94a3b8 !important; /* Slate-400 */
  font-weight: 400 !important;
  font-size: 0.82rem !important;
}

/* Custom Scrollbars */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: #f1f5f9;
}
::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* --- BORDER-MINIMAL LAYERED PSEUDO-3D CARDS & ELEVATION --- */
.card-floating {
  background: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 0.75rem; /* 12px crisp radius */
  box-shadow: 
    inset 0 1px 0 0 rgba(255, 255, 255, 0.95),
    0 1px 3px 0 rgba(15, 23, 42, 0.05),
    0 6px 14px -3px rgba(15, 23, 42, 0.07),
    0 2px 4px -1px rgba(15, 23, 42, 0.02);
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

.card-floating:hover {
  transform: translateY(-2px);
  box-shadow: 
    inset 0 1px 0 0 rgba(255, 255, 255, 1),
    0 3px 6px 0 rgba(15, 23, 42, 0.05),
    0 14px 24px -5px rgba(15, 23, 42, 0.11),
    0 4px 8px -2px rgba(15, 23, 42, 0.03);
}

/* Refined 3D Elevation for Active/Toggled Cards */
.task-card-active {
  transform: translateY(-2.5px) !important;
  border: 1px solid transparent !important;
  box-shadow: 
    inset 0 1px 0 0 rgba(255, 255, 255, 1),
    0 0 0 2px rgba(59, 130, 246, 0.55),
    0 20px 36px -8px rgba(37, 99, 235, 0.18),
    0 6px 12px -3px rgba(15, 23, 42, 0.08) !important;
  background-color: #ffffff !important;
  position: relative;
  z-index: 10;
}

.badge-pulse {
  animation: pulse-ring 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes pulse-ring {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.5;
    transform: scale(1.08);
  }
}

.shake-anim {
  animation: shake 0.35s ease-in-out;
}
@keyframes shake {
  0%, 100% {
    transform: translateX(0);
  }
  20%, 60% {
    transform: translateX(-6px);
  }
  40%, 80% {
    transform: translateX(6px);
  }
}

/* Autocomplete styling */
.autocomplete-item.bg-blue-100 {
  background-color: #eff6ff !important;
}
.autocomplete-item:active {
  background-color: #dbeafe !important;
}

/* FIN Subtab Toggle Styling */
#fin-subtab-bar button.is-active {
  background-color: #2563eb !important;
  color: #ffffff !important;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  font-weight: 700 !important;
}
#fin-subtab-bar button.is-inactive {
  background-color: transparent !important;
  color: #334155 !important;
  box-shadow: none !important;
  font-weight: 600 !important;
}
#fin-subtab-bar button.is-inactive:hover {
  background-color: #e2e8f0 !important;
  color: #0f172a !important;
}