/*
 * YanaCorp Status - Corporate Theme Stylesheet
 * Full Light Mode & Dark Mode Compatibility with Automatic Logo Switching
 */

/* ==========================================
   1. COLOR SYSTEM & CSS VARIABLES
   ========================================== */
:root {
  --yana-primary: #2563EB;
  --yana-primary-hover: #1D4ED8;
  --yana-primary-active: #1E40AF;
  --yana-primary-soft: rgba(37, 99, 235, 0.12);

  /* Light Mode Defaults */
  --yana-bg: #F1F5F9;
  --yana-surface: #FFFFFF;
  --yana-surface-elevated: #F8FAFC;
  --yana-border: #CBD5E1;
  --yana-text: #0F172A;
  --yana-text-muted: #475569;
  --yana-text-subtle: #64748B;
  --yana-sidebar-bg: #FFFFFF;
  --yana-sidebar-border: #E2E8F0;
  --yana-sidebar-text: #334155;
  --yana-sidebar-icon: #64748B;
  --yana-sidebar-active-bg: #EFF6FF;
  --yana-sidebar-active-text: #2563EB;

  --yana-font: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.dark, html.dark {
  /* Dark Mode Overrides */
  --yana-bg: #050714;
  --yana-surface: #0E122B;
  --yana-surface-elevated: #161B3B;
  --yana-border: rgba(255, 255, 255, 0.12);
  --yana-text: #F8FAFC;
  --yana-text-muted: #9CA3AF;
  --yana-text-subtle: #64748B;
  --yana-sidebar-bg: #050714;
  --yana-sidebar-border: rgba(255, 255, 255, 0.12);
  --yana-sidebar-text: #CBD5E1;
  --yana-sidebar-icon: #94A3B8;
  --yana-sidebar-active-bg: rgba(37, 99, 235, 0.18);
  --yana-sidebar-active-text: #60A5FA;
}

/* ==========================================
   2. LIGHT MODE & DARK MODE LOGO SWITCHING
   ========================================== */
html:not(.dark) .yana-logo-dark,
:root:not(.dark) .yana-logo-dark {
  display: none !important;
}

html:not(.dark) .yana-logo-light,
:root:not(.dark) .yana-logo-light {
  display: inline-block !important;
}

html.dark .yana-logo-light,
.dark .yana-logo-light {
  display: none !important;
}

html.dark .yana-logo-dark,
.dark .yana-logo-dark {
  display: inline-block !important;
}

/* Strictly Constrain Logo Dimensions Everywhere */
.yana-brand-logo,
.yana-footer-logo,
[data-component="logo"],
[data-component="logo"] img,
[data-component="logomark"],
.fi-logo img,
.fi-sidebar-header img,
.fi-sidebar-header a img,
.status-header img,
.yana-login-logo {
  max-height: 2.5rem !important;
  height: auto !important;
  width: auto !important;
  max-width: max-content !important;
  object-fit: contain !important;
  align-self: flex-start !important;
  flex-shrink: 0 !important;
}

/* Status Header - Matching Dark Corporate Footer Background */
header[data-component="header"],
.status-header {
  background-color: #050716 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* ==========================================
   3. GLOBAL CANVAS & TYPOGRAPHY
   ========================================== */
body, html {
  font-family: var(--yana-font) !important;
  background-color: var(--yana-bg) !important;
  color: var(--yana-text) !important;
}

.fi-body, [data-page] {
  background-color: var(--yana-bg) !important;
  color: var(--yana-text) !important;
}

/* ==========================================
   4. SIDEBAR STYLING (LIGHT & DARK MODE)
   ========================================== */
.fi-sidebar {
  background-color: var(--yana-sidebar-bg) !important;
  border-inline-end: 1px solid var(--yana-sidebar-border) !important;
}

.fi-sidebar-header {
  background-color: var(--yana-sidebar-bg) !important;
  border-bottom: 1px solid var(--yana-sidebar-border) !important;
  padding: 1rem !important;
}

/* Inactive Sidebar Items (Clear text & icons in both modes) */
.fi-sidebar-item:not(.fi-active) > .fi-sidebar-item-btn,
.fi-sidebar-item:not(.fi-active) a,
.fi-sidebar-item:not(.fi-active) button {
  color: var(--yana-sidebar-text) !important;
}

.fi-sidebar-item:not(.fi-active) span,
.fi-sidebar-item:not(.fi-active) label,
.fi-sidebar-item:not(.fi-active) p {
  color: var(--yana-sidebar-text) !important;
}

.fi-sidebar-item:not(.fi-active) svg,
.fi-sidebar-item:not(.fi-active) svg * {
  color: var(--yana-sidebar-icon) !important;
  stroke: var(--yana-sidebar-icon) !important;
}

/* Hover state for inactive sidebar items */
.fi-sidebar-item:not(.fi-active) > .fi-sidebar-item-btn:hover,
.fi-sidebar-item:not(.fi-active) a:hover {
  background-color: var(--yana-primary-soft) !important;
  color: var(--yana-primary) !important;
}

.fi-sidebar-item:not(.fi-active) a:hover svg,
.fi-sidebar-item:not(.fi-active) a:hover svg * {
  color: var(--yana-primary) !important;
  stroke: var(--yana-primary) !important;
}

/* Sidebar Group Labels (SETTINGS, INTEGRATIONS, RESOURCES) */
.fi-sidebar-group-label,
.fi-sidebar-group-label span {
  color: var(--yana-text-muted) !important;
  font-weight: 600 !important;
  letter-spacing: 0.05em !important;
}

/* Active Sidebar Item Styling (YanaCorp Blue in both modes) */
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn,
.fi-sidebar-item.fi-active a,
.fi-sidebar-item.fi-active button {
  background-color: var(--yana-sidebar-active-bg) !important;
  color: var(--yana-sidebar-active-text) !important;
  border-radius: 0.5rem !important;
  box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.3) !important;
}

.fi-sidebar-item.fi-active *,
.fi-sidebar-item.fi-active span,
.fi-sidebar-item.fi-active label,
.fi-sidebar-item.fi-active p {
  color: var(--yana-sidebar-active-text) !important;
}

.fi-sidebar-item.fi-active svg,
.fi-sidebar-item.fi-active svg * {
  color: var(--yana-sidebar-active-text) !important;
  stroke: var(--yana-sidebar-active-text) !important;
}

/* Active Left Indicator Bar */
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn::before,
.fi-sidebar-item-active::before,
.fi-sidebar-item[aria-current="page"]::before {
  background-color: var(--yana-primary) !important;
  border-color: var(--yana-primary) !important;
}

/* Sidebar Count Badges */
.fi-sidebar-item-badge,
.fi-badge,
.fi-sidebar-group-badge {
  background-color: var(--yana-primary-soft) !important;
  color: var(--yana-primary) !important;
  border: 1px solid rgba(37, 99, 235, 0.3) !important;
  font-weight: 600 !important;
}

/* ==========================================
   5. MAIN DASHBOARD CARDS & TABLES
   ========================================== */
.fi-main {
  color: var(--yana-text) !important;
}

.fi-section, .fi-card, .status-overview, [data-component="status-page"] {
  background-color: var(--yana-surface) !important;
  border: 1px solid var(--yana-border) !important;
  color: var(--yana-text) !important;
  border-radius: 0.75rem !important;
}

/* Remove outer container from stats overview so cards stand alone */
.fi-wi-stats-overview,
.fi-wi-widget:has(.fi-wi-stats-overview),
div.fi-wi-stats-overview,
.fi-wi-stats-overview section,
.fi-wi-stats-overview .fi-section,
.fi-wi-stats-overview section.fi-section,
.fi-wi-stats-overview .fi-section-content-ctn,
.fi-wi-stats-overview .fi-section-content,
.fi-wi-stats-overview > div,
.fi-wi-stats-overview > section {
  background-color: transparent !important;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  outline: none !important;
}

/* Individual stat cards - dark navy surface */
.fi-wi-stats-overview-stat {
  background-color: #0E122B !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 0.75rem !important;
  padding: 1rem 1.25rem !important;
  box-shadow: none !important;
}

html:not(.dark) .fi-wi-stats-overview-stat {
  background-color: #FFFFFF !important;
  border: 1px solid #CBD5E1 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
}

.fi-header-heading, .fi-section-header-heading, .fi-ta-header-heading, h1, h2, h3, h4 {
  color: var(--yana-text) !important;
}

.fi-section-header-description, .fi-ta-header-description, p, span.text-gray-500, span.text-gray-400 {
  color: var(--yana-text-muted) !important;
}

/* ==========================================
   OPERATIONAL STATUS SUMMARY & BANNERS
   ========================================== */
/* Dark Mode Operational Status Banner */
html.dark .status-summary,
html.dark [data-component="status-summary"],
html.dark [data-component="status-banner"],
html.dark .status-banner {
  background-color: #064E3B !important;
  border: 1.5px solid #059669 !important;
  color: #ECFDF5 !important;
  border-radius: 0.85rem !important;
  padding: 1.15rem 1.5rem !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4) !important;
}

html.dark .status-summary *,
html.dark [data-component="status-summary"] *,
html.dark .status-summary [data-slot="title"],
html.dark .status-summary [data-slot="last-updated"],
html.dark .status-summary h1,
html.dark .status-summary p,
html.dark .status-summary span,
html.dark .text-custom-800,
html.dark .dark\:text-custom-200 {
  color: #ECFDF5 !important;
}

html.dark .status-summary svg,
html.dark .status-summary svg *,
html.dark .status-summary [data-slot="indicator"] svg {
  color: #34D399 !important;
  fill: currentColor !important;
}

/* Light Mode Operational Status Banner */
html:not(.dark) .status-summary,
html:not(.dark) [data-component="status-summary"],
html:not(.dark) [data-component="status-banner"],
html:not(.dark) .status-banner {
  background-color: #DCFCE7 !important;
  border: 1.5px solid #86EFAC !important;
  color: #14532D !important;
  border-radius: 0.85rem !important;
  padding: 1.15rem 1.5rem !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}

html:not(.dark) .status-summary *,
html:not(.dark) [data-component="status-summary"] *,
html:not(.dark) .status-summary [data-slot="title"],
html:not(.dark) .status-summary [data-slot="last-updated"],
html:not(.dark) .status-summary h1,
html:not(.dark) .status-summary p,
html:not(.dark) .status-summary span,
html:not(.dark) .text-custom-800 {
  color: #14532D !important;
  font-weight: 600 !important;
}

html:not(.dark) .status-summary svg,
html:not(.dark) .status-summary svg *,
html:not(.dark) .status-summary [data-slot="indicator"] svg {
  color: #16A34A !important;
  fill: currentColor !important;
}

/* Public Status Page Light Mode High-Contrast Overrides */
html:not(.dark) [data-component="status-page"],
html:not(.dark) body[data-page] {
  background-color: #F1F5F9 !important;
  color: #0F172A !important;
}

html:not(.dark) h1,
html:not(.dark) h2,
html:not(.dark) h3,
html:not(.dark) h4 {
  color: #0F172A !important;
}

html:not(.dark) p,
html:not(.dark) span.text-zinc-500,
html:not(.dark) span.text-zinc-400,
html:not(.dark) div.text-zinc-500,
html:not(.dark) div.text-zinc-400 {
  color: #475569 !important;
}

/* Date Filters & Form Controls */
input[type="date"],
input[type="text"],
input[type="email"],
input[type="password"],
select,
.fi-input {
  background-color: var(--yana-surface-elevated) !important;
  border: 1px solid var(--yana-border) !important;
  color: var(--yana-text) !important;
  border-radius: 0.5rem !important;
  padding: 0.4rem 0.75rem !important;
}

html:not(.dark) input[type="date"],
html:not(.dark) input[type="text"],
html:not(.dark) select {
  background-color: #FFFFFF !important;
  border: 1px solid #CBD5E1 !important;
  color: #0F172A !important;
}

/* Table Headers & Rows */
.fi-ta-header-cell, th, tr th {
  background-color: var(--yana-surface-elevated) !important;
  color: var(--yana-text) !important;
  font-weight: 600 !important;
  border-bottom: 1px solid var(--yana-border) !important;
}

.fi-ta-row, td, tr td {
  color: var(--yana-text) !important;
  border-bottom: 1px solid var(--yana-border) !important;
}

.fi-ta-empty-state-heading, .fi-ta-empty-state-description {
  color: var(--yana-text-muted) !important;
}

/* ==========================================
   6. BUTTONS & INLINE LINKS
   ========================================== */
.button--primary,
button[type="submit"],
button[type="submit"].bg-accent,
a.bg-accent,
.fi-btn.fi-btn-color-primary:not(.fi-fo-toggle-buttons *):not(.fi-btn-outlined) {
  background-color: var(--yana-primary) !important;
  color: #FFFFFF !important;
  font-weight: 600 !important;
  border-radius: 0.5rem !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}

.button--primary *,
button[type="submit"] *,
a.bg-accent *,
.fi-btn.fi-btn-color-primary:not(.fi-fo-toggle-buttons *):not(.fi-btn-outlined) * {
  color: #FFFFFF !important;
}

.button--primary:hover,
button[type="submit"]:hover,
a.bg-accent:hover,
.fi-btn.fi-btn-color-primary:not(.fi-fo-toggle-buttons *):not(.fi-btn-outlined):hover {
  background-color: var(--yana-primary-hover) !important;
  color: #FFFFFF !important;
}

/* ==========================================
   FILAMENT TOGGLE BUTTONS (STATUS & VISIBILITY)
   ========================================== */

/* 1. Unselected Toggle Button State (Default) */
.fi-fo-toggle-buttons input.fi-fo-toggle-buttons-input:not(:checked) + label.fi-btn,
.fi-fo-toggle-buttons .fi-fo-toggle-buttons-btn-ctn:not(:has(input:checked)) label.fi-btn {
  background-color: rgba(255, 255, 255, 0.05) !important;
  background: rgba(255, 255, 255, 0.05) !important;
  color: #94A3B8 !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  box-shadow: none !important;
  font-weight: 500 !important;
  opacity: 0.75 !important;
  transition: all 0.15s ease-in-out !important;
}

.fi-fo-toggle-buttons input.fi-fo-toggle-buttons-input:not(:checked) + label.fi-btn *,
.fi-fo-toggle-buttons .fi-fo-toggle-buttons-btn-ctn:not(:has(input:checked)) label.fi-btn * {
  color: #94A3B8 !important;
  stroke: #94A3B8 !important;
}

.fi-fo-toggle-buttons input.fi-fo-toggle-buttons-input:not(:checked) + label.fi-btn:hover,
.fi-fo-toggle-buttons .fi-fo-toggle-buttons-btn-ctn:not(:has(input:checked)) label.fi-btn:hover {
  background-color: rgba(255, 255, 255, 0.12) !important;
  color: #F8FAFC !important;
  opacity: 1 !important;
}

html:not(.dark) .fi-fo-toggle-buttons input.fi-fo-toggle-buttons-input:not(:checked) + label.fi-btn,
html:not(.dark) .fi-fo-toggle-buttons .fi-fo-toggle-buttons-btn-ctn:not(:has(input:checked)) label.fi-btn {
  background-color: #F1F5F9 !important;
  background: #F1F5F9 !important;
  color: #64748B !important;
  border: 1px solid #CBD5E1 !important;
  box-shadow: none !important;
  opacity: 0.85 !important;
}

html:not(.dark) .fi-fo-toggle-buttons input.fi-fo-toggle-buttons-input:not(:checked) + label.fi-btn *,
html:not(.dark) .fi-fo-toggle-buttons .fi-fo-toggle-buttons-btn-ctn:not(:has(input:checked)) label.fi-btn * {
  color: #64748B !important;
  stroke: #64748B !important;
}

/* 2. Selected Toggle Button State (Active / Highlighted) */
.fi-fo-toggle-buttons input.fi-fo-toggle-buttons-input:checked + label.fi-btn,
.fi-fo-toggle-buttons .fi-fo-toggle-buttons-btn-ctn:has(input:checked) label.fi-btn {
  background-color: #2563EB !important;
  background: #2563EB !important;
  color: #FFFFFF !important;
  border: 1.5px solid #3B82F6 !important;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.4), 0 2px 8px rgba(0, 0, 0, 0.3) !important;
  font-weight: 700 !important;
  opacity: 1 !important;
}

.fi-fo-toggle-buttons input.fi-fo-toggle-buttons-input:checked + label.fi-btn *,
.fi-fo-toggle-buttons .fi-fo-toggle-buttons-btn-ctn:has(input:checked) label.fi-btn * {
  color: #FFFFFF !important;
  stroke: #FFFFFF !important;
}

/* Specific Component Status Colors when Selected */
/* Operational (Green) */
.fi-fo-toggle-buttons input[value="1"]:checked + label.fi-btn,
.fi-fo-toggle-buttons .fi-fo-toggle-buttons-btn-ctn:has(input[value="1"]:checked) label.fi-btn {
  background-color: #16A34A !important;
  border-color: #22C55E !important;
  box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.4), 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

/* Performance issues (Purple) */
.fi-fo-toggle-buttons input[value="2"]:checked + label.fi-btn,
.fi-fo-toggle-buttons .fi-fo-toggle-buttons-btn-ctn:has(input[value="2"]:checked) label.fi-btn {
  background-color: #9333EA !important;
  border-color: #A855F7 !important;
  box-shadow: 0 0 0 2px rgba(168, 85, 247, 0.4), 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

/* Partial outage (Amber/Orange) */
.fi-fo-toggle-buttons input[value="3"]:checked + label.fi-btn,
.fi-fo-toggle-buttons .fi-fo-toggle-buttons-btn-ctn:has(input[value="3"]:checked) label.fi-btn {
  background-color: #D97706 !important;
  border-color: #F59E0B !important;
  box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.4), 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

/* Major outage (Red) */
.fi-fo-toggle-buttons input[value="4"]:checked + label.fi-btn,
.fi-fo-toggle-buttons .fi-fo-toggle-buttons-btn-ctn:has(input[value="4"]:checked) label.fi-btn {
  background-color: #DC2626 !important;
  border-color: #EF4444 !important;
  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.4), 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

/* Unknown (Slate) */
.fi-fo-toggle-buttons input[value="5"]:checked + label.fi-btn,
.fi-fo-toggle-buttons .fi-fo-toggle-buttons-btn-ctn:has(input[value="5"]:checked) label.fi-btn {
  background-color: #475569 !important;
  border-color: #64748B !important;
  box-shadow: 0 0 0 2px rgba(100, 116, 139, 0.4), 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

/* Under maintenance (Orange) */
.fi-fo-toggle-buttons input[value="6"]:checked + label.fi-btn,
.fi-fo-toggle-buttons .fi-fo-toggle-buttons-btn-ctn:has(input[value="6"]:checked) label.fi-btn {
  background-color: #EA580C !important;
  border-color: #F97316 !important;
  box-shadow: 0 0 0 2px rgba(249, 115, 22, 0.4), 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

.button--primary:hover *,
button[type="submit"]:hover *,
a.bg-accent:hover *,
.fi-btn.fi-btn-color-primary:not(.fi-fo-toggle-buttons *):not(.fi-btn-outlined):hover * {
  color: #FFFFFF !important;
}

/* STATUS HEADER NAVIGATION BUTTONS & LINKS */
header[data-component="header"] a[data-slot="dashboard"],
.status-header a[data-slot="dashboard"] {
  background-color: #2563EB !important;
  color: #FFFFFF !important;
  font-weight: 600 !important;
  border-radius: 0.5rem !important;
  padding: 0.45rem 1.15rem !important;
  text-decoration: none !important;
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.4) !important;
  transition: all 0.2s ease-in-out !important;
  display: inline-flex !important;
  align-items: center !important;
}

header[data-component="header"] a[data-slot="dashboard"]:hover,
.status-header a[data-slot="dashboard"]:hover {
  background-color: #1D4ED8 !important;
  color: #FFFFFF !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.5) !important;
}

header[data-component="header"] a[data-slot="subscribe"],
.status-header a[data-slot="subscribe"] {
  background-color: rgba(37, 99, 235, 0.15) !important;
  border: 1px solid rgba(96, 165, 250, 0.4) !important;
  color: #60A5FA !important;
  font-weight: 600 !important;
  border-radius: 0.5rem !important;
  padding: 0.45rem 1rem !important;
  text-decoration: none !important;
  transition: all 0.2s ease-in-out !important;
  display: inline-flex !important;
  align-items: center !important;
}

header[data-component="header"] a[data-slot="subscribe"]:hover,
.status-header a[data-slot="subscribe"]:hover {
  background-color: #2563EB !important;
  border-color: #2563EB !important;
  color: #FFFFFF !important;
}

header[data-component="header"] button[data-slot="logout-btn"],
header[data-component="header"] form[data-slot="logout"] button,
.status-header form[data-slot="logout"] button {
  background-color: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  color: #F8FAFC !important;
  font-weight: 600 !important;
  border-radius: 0.5rem !important;
  padding: 0.45rem 0.9rem !important;
  transition: all 0.2s ease-in-out !important;
}

header[data-component="header"] form[data-slot="logout"] button:hover,
.status-header form[data-slot="logout"] button:hover {
  background-color: rgba(239, 68, 68, 0.2) !important;
  border-color: rgba(239, 68, 68, 0.5) !important;
  color: #FCA5A5 !important;
}

/* High Contrast Theme Toggle Button */
.yana-theme-toggle-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 0.5rem !important;
  padding: 0.45rem 0.85rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: all 0.2s ease-in-out !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2) !important;
}

html:not(.dark) .yana-theme-toggle-btn {
  background-color: rgba(245, 158, 11, 0.2) !important;
  border: 1px solid rgba(245, 158, 11, 0.6) !important;
  color: #FCD34D !important;
}

html:not(.dark) .yana-theme-toggle-btn svg,
html:not(.dark) .yana-theme-toggle-btn svg path {
  fill: #FCD34D !important;
  color: #FCD34D !important;
}

html.dark .yana-theme-toggle-btn {
  background-color: rgba(56, 189, 248, 0.2) !important;
  border: 1px solid rgba(56, 189, 248, 0.6) !important;
  color: #38BDF8 !important;
}

html.dark .yana-theme-toggle-btn svg,
html.dark .yana-theme-toggle-btn svg path {
  fill: #38BDF8 !important;
  color: #38BDF8 !important;
}

.yana-theme-toggle-btn:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35) !important;
}

/* INLINE TEXT LINKS */
a:not(.fi-btn):not(.button):not(.yana-social-icon):not([data-slot="dashboard"]):not([data-slot="subscribe"]):not([data-slot="brand"]),
.fi-link:not(.fi-btn),
.fi-link-color-primary {
  background-color: transparent !important;
  background: transparent !important;
  color: #2563EB !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  box-shadow: none !important;
}

.dark a:not(.fi-btn):not(.button):not(.yana-social-icon):not([data-slot="dashboard"]):not([data-slot="subscribe"]):not([data-slot="brand"]),
.dark .fi-link:not(.fi-btn),
.dark .fi-link-color-primary {
  color: #60A5FA !important;
}

a:not(.fi-btn):not(.button):not(.yana-social-icon):not([data-slot="dashboard"]):not([data-slot="subscribe"]):not([data-slot="brand"]):hover,
.fi-link:not(.fi-btn):hover {
  color: #1D4ED8 !important;
  text-decoration: none !important;
  background-color: transparent !important;
}

.dark a:not(.fi-btn):not(.button):not(.yana-social-icon):not([data-slot="dashboard"]):not([data-slot="subscribe"]):not([data-slot="brand"]):hover,
.dark .fi-link:not(.fi-btn):hover {
  color: #93C5FD !important;
  text-decoration: none !important;
}

.yana-back-link {
  color: #2563EB !important;
}

.dark .yana-back-link {
  color: #60A5FA !important;
}

.yana-back-link svg {
  width: 1rem !important;
  height: 1rem !important;
}

/* INPUT FIELDS & FOCUS STATES */
input[type="text"],
input[type="email"],
input[type="password"],
textarea,
select,
.fi-input {
  background-color: var(--yana-surface-elevated) !important;
  border: 1px solid var(--yana-border) !important;
  color: var(--yana-text) !important;
  border-radius: 0.5rem !important;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus,
.fi-input:focus-within {
  border-color: var(--yana-primary) !important;
  box-shadow: 0 0 0 3px var(--yana-primary-soft) !important;
}

/* ==========================================
   7. HIGH-CONTRAST AUTHENTICATION CARD & CANVAS
   ========================================== */
.fi-simple-layout .fi-simple-header {
  display: none !important;
}

.fi-simple-layout {
  background-color: var(--yana-bg) !important;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* Light Mode Auth Card */
.fi-simple-main {
  background-color: #FFFFFF !important;
  border: 1px solid #CBD5E1 !important;
  border-radius: 1.25rem !important;
  padding: 2.5rem !important;
  box-shadow: 0 20px 50px -10px rgba(15, 23, 42, 0.15), 0 0 1px rgba(0, 0, 0, 0.08) !important;
  max-width: 28rem;
  width: 100%;
}

/* Dark Mode Auth Card - Distinct Elevated Navy Card with Blue Glow */
.dark .fi-simple-main,
html.dark .fi-simple-main {
  background-color: #121733 !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  box-shadow: 0 25px 65px -10px rgba(0, 0, 0, 0.9), 0 0 35px rgba(37, 99, 235, 0.15) !important;
}

/* Inputs inside Auth Card for Maximum Contrast */
.fi-simple-main input[type="text"],
.fi-simple-main input[type="email"],
.fi-simple-main input[type="password"],
.fi-simple-main .fi-input {
  background-color: #F8FAFC !important;
  border: 1px solid #94A3B8 !important;
  color: #0F172A !important;
}

.dark .fi-simple-main input[type="text"],
.dark .fi-simple-main input[type="email"],
.dark .fi-simple-main input[type="password"],
.dark .fi-simple-main .fi-input {
  background-color: #1C234C !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  color: #F8FAFC !important;
}

.dark .fi-simple-main input[type="text"]:focus,
.dark .fi-simple-main input[type="email"]:focus,
.dark .fi-simple-main input[type="password"]:focus,
.dark .fi-simple-main .fi-input:focus-within {
  border-color: #2563EB !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.35) !important;
}

.yana-login-header {
  text-align: center;
  margin-bottom: 1.75rem;
}

.yana-login-title {
  font-size: 1.125rem !important;
  font-weight: 600 !important;
  color: var(--yana-text) !important;
  margin-bottom: 0.2rem !important;
  letter-spacing: -0.01em !important;
}

.yana-login-subtitle {
  font-size: 0.8125rem !important;
  color: var(--yana-text-muted) !important;
}

/* ==========================================
   8. CORPORATE FOOTER & HIGH-CONTRAST SOCIAL ICONS
   ========================================== */
footer[data-component="footer"], .yana-footer {
  border-top: 1px solid var(--yana-border) !important;
  background-color: #050716 !important;
  padding: 2.5rem 1.5rem !important;
  color: #FFFFFF !important;
  font-size: 0.8125rem;
}

/* Force white logo in footer for both light and dark mode */
footer[data-component="footer"] .yana-logo-light,
.yana-footer .yana-logo-light {
  display: none !important;
}
footer[data-component="footer"] .yana-logo-dark,
.yana-footer .yana-logo-dark {
  display: inline-block !important;
}

.yana-footer-logo {
  display: block !important;
  height: 2.25rem !important;
  max-height: 2.25rem !important;
  width: auto !important;
  max-width: max-content !important;
  object-fit: contain !important;
  align-self: flex-start !important;
  flex-shrink: 0 !important;
}

.yana-footer-container {
  max-width: 72rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.yana-footer-top {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2rem;
}

@media (min-width: 768px) {
  .yana-footer-top {
    flex-direction: row;
    align-items: flex-start;
  }
}

.yana-footer-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start !important;
  gap: 1rem;
}

.yana-social-links {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.yana-social-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 2.5rem !important;
  height: 2.5rem !important;
  border-radius: 50% !important;
  background-color: rgba(255, 255, 255, 0.16) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.45) !important;
  color: #FFFFFF !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
  transition: all 0.2s ease-in-out !important;
}

.yana-social-icon svg,
.yana-social-icon svg path,
.yana-social-icon svg circle {
  width: 1.125rem !important;
  height: 1.125rem !important;
  fill: #FFFFFF !important;
  color: #FFFFFF !important;
  stroke: none !important;
  opacity: 1 !important;
}

.yana-social-icon:hover {
  border-color: #2563EB !important;
  color: #FFFFFF !important;
  background-color: #2563EB !important;
  transform: translateY(-2px) scale(1.08) !important;
  box-shadow: 0 4px 16px rgba(37, 99, 235, 0.6) !important;
}

.yana-social-icon:hover svg,
.yana-social-icon:hover svg path {
  fill: #FFFFFF !important;
  color: #FFFFFF !important;
}

.yana-footer-offices {
  display: flex;
  flex-wrap: wrap;
  gap: 2.5rem;
  color: #FFFFFF !important;
}

.yana-office-block {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 0.75rem;
  line-height: 1.4;
  color: #FFFFFF !important;
}

.yana-office-block span {
  color: #FFFFFF !important;
}

.yana-office-title-dar {
  color: #60A5FA !important;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.yana-office-title-zan {
  color: #FBBF24 !important;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.yana-footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.15) !important;
  padding-top: 1.25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.75rem;
  color: #FFFFFF !important;
}

.yana-footer-disclaimer {
  color: #FFFFFF !important;
  font-size: 0.75rem;
  line-height: 1.5;
  text-align: left;
  opacity: 0.95;
}

.yana-footer-copyright {
  color: #FFFFFF !important;
  font-size: 0.75rem;
  white-space: nowrap;
  text-align: right;
  opacity: 0.95;
}

/* Light Mode Footer Overrides - Keep Footer text and icons bright white on dark footer background */
html:not(.dark) footer[data-component="footer"],
html:not(.dark) .yana-footer {
  background-color: #050716 !important;
  color: #FFFFFF !important;
}

html:not(.dark) .yana-social-icon {
  background-color: rgba(255, 255, 255, 0.16) !important;
  border-color: rgba(255, 255, 255, 0.45) !important;
  color: #FFFFFF !important;
}

html:not(.dark) .yana-social-icon svg,
html:not(.dark) .yana-social-icon svg path,
html:not(.dark) .yana-social-icon svg circle {
  fill: #FFFFFF !important;
  color: #FFFFFF !important;
}

html:not(.dark) .yana-social-icon:hover {
  background-color: #2563EB !important;
  border-color: #2563EB !important;
  color: #FFFFFF !important;
}

html:not(.dark) .yana-social-icon:hover svg,
html:not(.dark) .yana-social-icon:hover svg path {
  fill: #FFFFFF !important;
  color: #FFFFFF !important;
}

html:not(.dark) .yana-footer-bottom {
  border-top-color: rgba(255, 255, 255, 0.15) !important;
  color: #FFFFFF !important;
}

html:not(.dark) .yana-footer-disclaimer,
html:not(.dark) .yana-footer-copyright,
html:not(.dark) .yana-office-block,
html:not(.dark) .yana-office-block span {
  color: #FFFFFF !important;
}

@media (min-width: 640px) {
  .yana-footer-bottom {
    flex-direction: row;
    align-items: center;
    text-align: left;
  }
}

/* ==========================================
   9. HIGH-CONTRAST NAVIGATION BUTTONS (Previous / Today / Next)
   ========================================== */
.yana-nav-pill-container,
nav[data-slot="navigation"] > div,
nav[data-component="page-navigation"] > div {
  background-color: #F1F5F9 !important;
  border: 1px solid #CBD5E1 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
  border-radius: 0.75rem !important;
}

html.dark .yana-nav-pill-container,
html.dark nav[data-slot="navigation"] > div,
html.dark nav[data-component="page-navigation"] > div {
  background-color: #0F172A !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}

.yana-nav-btn,
nav[data-slot="navigation"] a,
nav[data-component="page-navigation"] a {
  background-color: #FFFFFF !important;
  color: #0F172A !important;
  border: 1px solid #CBD5E1 !important;
  font-weight: 600 !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
  transition: all 0.15s ease-in-out !important;
}

.yana-nav-btn svg,
nav[data-slot="navigation"] a svg,
nav[data-component="page-navigation"] a svg {
  color: #0F172A !important;
  fill: currentColor !important;
}

/* Hover States for Light Mode */
.yana-nav-btn:hover,
nav[data-slot="navigation"] a:hover,
nav[data-component="page-navigation"] a:hover {
  background-color: #2563EB !important;
  color: #FFFFFF !important;
  border-color: #2563EB !important;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.35) !important;
}

.yana-nav-btn:hover svg,
nav[data-slot="navigation"] a:hover svg,
nav[data-component="page-navigation"] a:hover svg {
  color: #FFFFFF !important;
}

/* Dark Mode Navigation Buttons */
html.dark .yana-nav-btn,
html.dark nav[data-slot="navigation"] a,
html.dark nav[data-component="page-navigation"] a {
  background-color: rgba(255, 255, 255, 0.08) !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

html.dark .yana-nav-btn svg,
html.dark nav[data-slot="navigation"] a svg,
html.dark nav[data-component="page-navigation"] a svg {
  color: #FFFFFF !important;
}

/* Hover States for Dark Mode */
html.dark .yana-nav-btn:hover,
html.dark nav[data-slot="navigation"] a:hover,
html.dark nav[data-component="page-navigation"] a:hover {
  background-color: #2563EB !important;
  color: #FFFFFF !important;
  border-color: #2563EB !important;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.5) !important;
}

html.dark .yana-nav-btn:hover svg,
html.dark nav[data-slot="navigation"] a:hover svg,
html.dark nav[data-component="page-navigation"] a:hover svg {
  color: #FFFFFF !important;
}