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

:root {
  /* Premium Light Theme - Trustworthy Enterprise SaaS palette */
  --color-bg-deep: #F8FAFC;       /* Slate 50 - clean, bright workspace background */
  --color-bg-card: #FFFFFF;       /* Pure White - high contrast container cards */
  --color-bg-light: #F1F5F9;      /* Slate 100 - secondary buttons & tracks */
  --color-border-dark: rgba(15, 23, 42, 0.08); /* Extremely soft slate border */
  --color-border-light: rgba(15, 23, 42, 0.04);
  --color-gold: #2563EB;          /* Royal Cobalt Blue - primary action accent */
  --color-gold-hover: #1D4ED8;    /* Deep Cobalt - active click accent */
  --color-primary: #1E3A8A;       /* Classic Deep Navy - professional brand weight */
  --color-text-primary: #0F172A;  /* Slate 900 - maximum readability headings */
  --color-text-secondary: #334155;/* Slate 700 - optimal body readability */
  --color-text-muted: #64748B;    /* Slate 500 - elegant subtitles */
  --color-success: #10B981;       /* Emerald Green - active indicators */
  --color-warning: #F59E0B;       /* Amber - pending status indicators */
}

body {
  font-family: 'Inter', sans-serif;
  background-color: var(--color-bg-deep);
  color: var(--color-text-secondary);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  color: var(--color-text-primary);
  font-weight: 700;
  letter-spacing: -0.025em;
}

/* Premium Card Layouts with Ultra-Premium iOS Frosted Glassmorphism */
.glass-panel {
  background: rgba(255, 255, 255, 0.75) !important;
  backdrop-filter: blur(20px) saturate(190%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(190%) !important;
  border: 1px solid rgba(255, 255, 255, 0.45) !important;
  box-shadow: 0 15px 35px -5px rgba(15, 23, 42, 0.03), 0 8px 15px -6px rgba(15, 23, 42, 0.02) !important;
  border-radius: 1.25rem !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Premium Hover Cards with iOS Lift and Cobalt Glow */
.glass-panel:hover {
  background: rgba(255, 255, 255, 0.85) !important;
  transform: translateY(-4px) scale(1.008) !important;
  box-shadow: 0 30px 50px -10px rgba(15, 23, 42, 0.06), 0 15px 25px -5px rgba(37, 99, 235, 0.05) !important;
  border-color: rgba(37, 99, 235, 0.25) !important;
}

.glass-panel-light {
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(20px) saturate(190%);
  -webkit-backdrop-filter: blur(20px) saturate(190%);
  border: 1px solid rgba(255, 255, 255, 0.4);
}

/* Cobalt Blue Gradient Accents */
.text-gold-gradient {
  background: linear-gradient(135deg, #1D4ED8 0%, #2563EB 50%, #60A5FA 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.bg-gold-gradient {
  background: linear-gradient(135deg, #1D4ED8 0%, #2563EB 100%);
}

.bg-dark-gradient {
  background: radial-gradient(circle at top right, #EFF6FF 0%, #F8FAFC 100%);
}

.border-gold-glow {
  border: 1px solid rgba(37, 99, 235, 0.15);
  box-shadow: 0 4px 20px rgba(37, 99, 235, 0.02);
}

.border-gold-glow:hover {
  border: 1px solid rgba(37, 99, 235, 0.3);
  box-shadow: 0 10px 30px rgba(37, 99, 235, 0.05);
}

/* Scrollbars */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: var(--color-bg-deep);
}

::-webkit-scrollbar-thumb {
  background: #CBD5E1;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-gold);
}

/* Sky/Cobalt Glowing Background Accents */
.glowing-blob {
  position: absolute;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(59, 130, 246, 0.05) 0%, rgba(248, 250, 252, 0) 70%);
  border-radius: 50%;
  pointer-events: none;
  filter: blur(60px);
}

.glowing-blob-gold {
  position: absolute;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(147, 197, 253, 0.04) 0%, rgba(248, 250, 252, 0) 70%);
  border-radius: 50%;
  pointer-events: none;
  filter: blur(60px);
}

/* Page Animations */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in-up {
  animation: fadeInUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Form Controls - Crisp and Highly Visible */
input:not([type="submit"]):not([type="button"]),
select,
textarea {
  background-color: #FFFFFF !important;
  color: var(--color-text-primary) !important;
  border: 1px solid #D8ECEC; /* Slate 200 border equivalent */
  border-color: rgba(15, 23, 42, 0.12) !important;
  border-radius: 0.50rem !important;
  padding: 0.65rem 1rem !important;
  font-size: 0.875rem !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

input:focus,
select:focus,
textarea:focus {
  outline: none !important;
  border-color: var(--color-gold) !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15) !important;
}

/* Table Hover Effects */
.table-row-hover {
  transition: background-color 0.15s ease-in-out;
}

.table-row-hover:hover {
  background-color: rgba(15, 23, 42, 0.015) !important;
}

/* Logo Image Auto-fit Styles */
.logo-image {
  max-height: 38px;
  width: auto;
  object-fit: contain;
  display: block;
  transition: transform 0.2s ease;
}

.logo-container:hover .logo-image {
  transform: scale(1.02);
}

.logo-container {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}

/* Status Indicators - Clean and visible */
.status-badge-active {
  background-color: rgba(16, 185, 129, 0.1) !important;
  color: #059669 !important;
  border: 1px solid rgba(16, 185, 129, 0.2) !important;
}

.status-badge-pending {
  background-color: rgba(245, 158, 11, 0.1) !important;
  color: #D97706 !important;
  border: 1px solid rgba(245, 158, 11, 0.2) !important;
}

/* ==========================================================================
   Global Override Rules to map Dark Tailwind Classes to Light Theme
   ========================================================================== */

/* Overrides for text colors to ensure readability on light backgrounds */
body, body.text-gray-100 {
  color: var(--color-text-secondary) !important;
}

/* Overriding text-white and gray classes OUTSIDE dark sidebars/headers */
body:not(.dark-mode) .text-white:not(aside *):not(header *):not(.bg-gold *):not(.bg-blue-600 *):not(.bg-emerald-500 *):not(.bg-red-500 *):not(button *):not(.bg-gold-gradient *):not(.bg-goldHover *) {
  color: var(--color-text-primary) !important;
}

body.text-gray-100, body:not(.dark-mode) .text-gray-100:not(aside *):not(header *) { color: var(--color-text-primary) !important; }
body:not(.dark-mode) .text-gray-200:not(aside *):not(header *) { color: var(--color-text-primary) !important; }
body:not(.dark-mode) .text-gray-300:not(aside *):not(header *) { color: var(--color-text-secondary) !important; }
body:not(.dark-mode) .text-gray-400:not(aside *):not(header *) { color: var(--color-text-muted) !important; }
body:not(.dark-mode) .text-gray-500:not(aside *):not(header *) { color: var(--color-text-muted) !important; }

/* Overriding background colors */
body.bg-bgDeep, body:not(.dark-mode) .bg-bgDeep:not(aside *):not(header *) {
  background-color: var(--color-bg-deep) !important;
}
body:not(.dark-mode) .bg-bgCard:not(aside *):not(header *) {
  background-color: var(--color-bg-card) !important;
}
body:not(.dark-mode) .bg-white\/5:not(aside *):not(header *) {
  background-color: rgba(15, 23, 42, 0.02) !important;
}
body:not(.dark-mode) .bg-white\/10:not(aside *):not(header *) {
  background-color: rgba(15, 23, 42, 0.05) !important;
}

/* Overriding borders */
body:not(.dark-mode) .border-white\/5:not(aside *):not(header *) {
  border-color: rgba(15, 23, 42, 0.05) !important;
}
body:not(.dark-mode) .border-white\/10:not(aside *):not(header *) {
  border-color: rgba(15, 23, 42, 0.08) !important;
}

/* Map gold accents to cobalt blue */
body:not(.dark-mode) .text-gold {
  color: var(--color-gold) !important;
}
body:not(.dark-mode) .bg-gold {
  background-color: var(--color-gold) !important;
  color: #FFFFFF !important;
}
body:not(.dark-mode) .border-gold {
  border-color: var(--color-gold) !important;
}
body:not(.dark-mode) .hover\:bg-goldHover:hover {
  background-color: var(--color-gold-hover) !important;
}

/* Table elements tweak */
body:not(.dark-mode) table th {
  color: var(--color-text-primary) !important;
  font-weight: 700;
  background-color: #F1F5F9;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08) !important;
}

/* Sidebar and Header exceptions */
aside {
  background-color: #0A1528 !important; /* Keep deep navy for dashboard sidebar */
  border-right: 1px solid rgba(255, 255, 255, 0.05) !important;
}

aside * {
  color: rgba(243, 244, 246, 0.7);
}

aside a:hover, aside button:hover {
  color: #FFFFFF !important;
  background-color: rgba(255, 255, 255, 0.03);
}

aside .text-white {
  color: #FFFFFF !important;
}

aside .bg-white\/5 {
  background-color: rgba(255, 255, 255, 0.05) !important;
}

aside .text-gold {
  color: #3B82F6 !important; /* Keep sky blue accent in sidebar */
}

/* Main Site Header scroll style */
header.bg-bg-deep\/95 {
  background-color: rgba(255, 255, 255, 0.95) !important;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08) !important;
}

/* ==========================================================================
   Accessibility Badge & Indicator Contrast Overrides for Slate-Light Theme
   ========================================================================== */
body:not(.dark-mode) .text-emerald-400 { color: #047857 !important; }
body:not(.dark-mode) .text-amber-400 { color: #B45309 !important; }
body:not(.dark-mode) .text-amber-300 { color: #B45309 !important; }
body:not(.dark-mode) .text-blue-400 { color: #1D4ED8 !important; }
body:not(.dark-mode) .text-red-400 { color: #B91C1C !important; }

body:not(.dark-mode) .bg-emerald-500\/10 { background-color: rgba(16, 185, 129, 0.12) !important; }
body:not(.dark-mode) .bg-amber-500\/10 { background-color: rgba(245, 158, 11, 0.12) !important; }
body:not(.dark-mode) .bg-blue-500\/10 { background-color: rgba(37, 99, 235, 0.12) !important; }
body:not(.dark-mode) .bg-red-500\/10 { background-color: rgba(239, 68, 68, 0.12) !important; }
body:not(.dark-mode) .bg-gray-500\/10 { background-color: rgba(100, 116, 139, 0.12) !important; }

body:not(.dark-mode) .border-emerald-500\/20 { border-color: rgba(16, 185, 129, 0.25) !important; }
body:not(.dark-mode) .border-amber-500\/20 { border-color: rgba(245, 158, 11, 0.25) !important; }
body:not(.dark-mode) .border-blue-500\/20 { border-color: rgba(37, 99, 235, 0.25) !important; }
body:not(.dark-mode) .border-red-500\/20 { border-color: rgba(239, 68, 68, 0.25) !important; }

/* Dashboard and Alert Status Blocks override */
body:not(.dark-mode) .bg-emerald-950\/40 { 
  background-color: rgba(16, 185, 129, 0.08) !important; 
  color: #047857 !important; 
  border-color: rgba(16, 185, 129, 0.2) !important; 
}
body:not(.dark-mode) .bg-amber-950\/40 { 
  background-color: rgba(245, 158, 11, 0.08) !important; 
  color: #B45309 !important; 
  border-color: rgba(245, 158, 11, 0.2) !important; 
}
body:not(.dark-mode) .bg-blue-950\/40 { 
  background-color: rgba(37, 99, 235, 0.08) !important; 
  color: #1D4ED8 !important; 
  border-color: rgba(37, 99, 235, 0.2) !important; 
}
body:not(.dark-mode) .bg-red-950\/40 { 
  background-color: rgba(239, 68, 68, 0.08) !important; 
  color: #B91C1C !important; 
  border-color: rgba(239, 68, 68, 0.2) !important; 
}

/* ==========================================================================
   iOS Glassmorphic Header & Logo Text Coloring overrides
   ========================================================================== */
body:not(.dark-mode) .logo-container span:not(aside *) {
  color: var(--color-gold) !important; /* Force branding logo text to premium Cobalt Blue, keeping sidebar logo white */
}

body:not(.dark-mode) header.bg-bg-deep\/95 {
  background: rgba(255, 255, 255, 0.8) !important;
  backdrop-filter: blur(25px) saturate(210%) !important;
  -webkit-backdrop-filter: blur(25px) saturate(210%) !important;
  border-bottom: 1px solid rgba(15, 23, 42, 0.06) !important;
}

body:not(.dark-mode) header:not(.fixed) {
  background: rgba(255, 255, 255, 0.8) !important;
  backdrop-filter: blur(25px) saturate(210%) !important;
  -webkit-backdrop-filter: blur(25px) saturate(210%) !important;
  border-bottom: 1px solid rgba(15, 23, 42, 0.06) !important;
}

/* Character overlap preventers for icon inputs */
input.pl-10-override { padding-left: 2.75rem !important; }
input.pl-12-override { padding-left: 3.25rem !important; }