/* ==========================================================================
   BillKliq Master Material Design 3 Stylesheet
   Ultra High-Contrast Contrast System (WCAG AAA Compliant)
   Harmonized with Official Logo (Navy #0D2040 & Orange #FE6100)
   Full Light & Dark Theme System
   ========================================================================== */

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

/* ==========================================================================
   1. Dynamic CSS Variables & Material Design 3 Tokens
   ========================================================================== */

:root, [data-theme="light"] {
  --kq-paper: #F8FAFC;
  --kq-paper-deep: #EDF2F7;
  --kq-white: #FFFFFF;
  --kq-card-bg: #FFFFFF;
  --kq-ink: #0F172A;          /* Pure High-Contrast Deep Navy (15.2:1) */
  --kq-ink-soft: #1E293B;     /* High-Contrast Slate (12.5:1) */
  --kq-slate: #334155;        /* Ultra Legible Caption Text (9.5:1) */
  --kq-line: #CBD5E1;         /* Crisp Clean Borders */
  --kq-brass: #FE6100;        /* Official Brand Orange */
  --kq-brass-soft: #FF7A29;   /* Tangerine */
  --kq-success: #059669;      /* Emerald Green */
  --kq-rust: #DC2626;         /* Crimson Red */

  /* Dedicated High-Contrast Sidebar Tokens (Light Mode: Crisp White Surface + Deep Navy Text) */
  --kq-sidebar-bg: #FFFFFF;
  --kq-sidebar-border: #CBD5E1;
  --kq-sidebar-title: #0F172A;
  --kq-sidebar-sub: #FE6100;
  --kq-sidebar-link: #0F172A;
  --kq-sidebar-link-muted: #334155;
  --kq-sidebar-link-hover: #EA580C;
  --kq-sidebar-link-hover-bg: #FFF7ED;
  --kq-sidebar-icon: #FE6100;
  --kq-sidebar-footer: #475569;

  --md-sys-color-primary: #FE6100;
  --md-sys-color-on-primary: #FFFFFF;
  --md-sys-color-primary-container: #FFEAE0;
  --md-sys-color-on-primary-container: #4A1700;

  --md-sys-color-secondary: #0D2040;
  --md-sys-color-on-secondary: #FFFFFF;
  --md-sys-color-secondary-container: #E2E8F0;
  --md-sys-color-on-secondary-container: #0F172A;

  --md-sys-color-background: #F8FAFC;
  --md-sys-color-on-background: #0F172A;

  --md-sys-color-surface: #FFFFFF;
  --md-sys-color-surface-dim: #F1F5F9;
  --md-sys-color-surface-container: #FFFFFF;
  --md-sys-color-surface-container-high: #F8FAFC;
  --md-sys-color-on-surface: #0F172A;
  --md-sys-color-on-surface-variant: #334155;

  --md-sys-color-outline: #CBD5E1;
  --md-sys-color-outline-variant: #E2E8F0;

  --md-elevation-1: 0 1px 3px 1px rgba(15, 23, 42, 0.08), 0 1px 2px 0 rgba(15, 23, 42, 0.05);
  --md-elevation-2: 0 4px 16px 2px rgba(15, 23, 42, 0.08), 0 2px 6px 0 rgba(15, 23, 42, 0.04);
  --md-elevation-3: 0 8px 26px 3px rgba(15, 23, 42, 0.1), 0 4px 10px 0 rgba(15, 23, 42, 0.06);

  --md-primary-glow: rgba(254, 97, 0, 0.25);
}

[data-theme="dark"] {
  --kq-paper: #070D1E;
  --kq-paper-deep: #0E1830;
  --kq-white: #111E3B;
  --kq-card-bg: #111E3B;
  --kq-ink: #FFFFFF;          /* Pure High-Contrast White (16.5:1) */
  --kq-ink-soft: #F8FAFC;     /* Soft Crisp White (15.5:1) */
  --kq-slate: #CBD5E1;        /* Highly Legible Slate in Dark (10.2:1) */
  --kq-line: rgba(255, 255, 255, 0.18);
  --kq-brass: #FE6100;
  --kq-brass-soft: #FF7A29;
  --kq-success: #34D399;
  --kq-rust: #F87171;

  /* Dedicated High-Contrast Sidebar Tokens (Dark Mode: Obsidian Navy Surface + Pure White Text) */
  --kq-sidebar-bg: #0A1628;
  --kq-sidebar-border: rgba(255, 255, 255, 0.08);
  --kq-sidebar-title: #FFFFFF;
  --kq-sidebar-sub: #FF7A29;
  --kq-sidebar-link: #F1F5F9;
  --kq-sidebar-link-muted: #94A3B8;
  --kq-sidebar-link-hover: #FF7A29;
  --kq-sidebar-link-hover-bg: rgba(254, 97, 0, 0.22);
  --kq-sidebar-icon: #FF7A29;
  --kq-sidebar-footer: #94A3B8;

  --md-sys-color-primary: #FE6100;
  --md-sys-color-on-primary: #FFFFFF;
  --md-sys-color-primary-container: #662200;
  --md-sys-color-on-primary-container: #FFEAE0;

  --md-sys-color-secondary: #90B3E8;
  --md-sys-color-on-secondary: #07162C;
  --md-sys-color-secondary-container: #1C2D4A;
  --md-sys-color-on-secondary-container: #D6E4FC;

  --md-sys-color-background: #070D1E;
  --md-sys-color-on-background: #FFFFFF;

  --md-sys-color-surface: #111E3B;
  --md-sys-color-surface-dim: #091122;
  --md-sys-color-surface-container: #16264A;
  --md-sys-color-surface-container-high: #1E315C;
  --md-sys-color-on-surface: #FFFFFF;
  --md-sys-color-on-surface-variant: #CBD5E1;

  --md-sys-color-outline: rgba(255, 255, 255, 0.2);
  --md-sys-color-outline-variant: rgba(255, 255, 255, 0.1);

  --md-elevation-1: 0 1px 3px 1px rgba(0, 0, 0, 0.4), 0 1px 2px 0 rgba(0, 0, 0, 0.2);
  --md-elevation-2: 0 4px 16px 2px rgba(0, 0, 0, 0.45), 0 2px 6px 0 rgba(0, 0, 0, 0.25);
  --md-elevation-3: 0 8px 26px 3px rgba(0, 0, 0, 0.5), 0 4px 10px 0 rgba(0, 0, 0, 0.3);

  --md-primary-glow: rgba(254, 97, 0, 0.45);
}

:root {
  --md-font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --md-font-heading: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
  --md-font-mono: 'JetBrains Mono', monospace;

  --md-radius-sm: 8px;
  --md-radius-md: 12px;
  --md-radius-lg: 16px;
  --md-radius-xl: 24px;
  --md-radius-full: 9999px;
}

/* ==========================================================================
   2. Base & High-Contrast Global Typography
   ========================================================================== */

* {
  box-sizing: border-box;
}

body, html {
  font-family: var(--md-font-sans) !important;
  background-color: var(--kq-paper) !important;
  color: var(--kq-ink) !important;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color 0.25s ease, color 0.25s ease;
}

.kq-display, h1, h2, h3, h4, h5, h6 {
  font-family: var(--md-font-heading) !important;
  letter-spacing: -0.02em !important;
  color: var(--kq-ink);
  font-weight: 800 !important;
}

.kq-mono {
  font-family: var(--md-font-mono) !important;
}

/* ==========================================================================
   3. Material Cards & Surfaces (Strict Text Contrast)
   ========================================================================== */

.kq-card, 
div[style*="background: rgb(255, 255, 255)"], 
div[style*="background:#FFFFFF"], 
div[style*="background: #FFFFFF"], 
div[style*="background: rgb(248, 250, 252)"], 
div[style*="background: rgb(247, 248, 251)"],
div[style*="background:var(--kq-white)"],
div[style*="background: var(--kq-white)"] {
  background-color: var(--kq-white) !important;
  color: var(--kq-ink) !important;
  border-radius: var(--md-radius-lg) !important;
  box-shadow: var(--md-elevation-1) !important;
  border: 1.5px solid var(--kq-line) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.kq-card:hover {
  box-shadow: var(--md-elevation-2) !important;
}

/* Force high-contrast text on all card children */
.kq-card p, .kq-card div, .kq-card span:not(.kq-stamp):not([style*="color: #fff"]):not([style*="color:#fff"]) {
  color: var(--kq-ink);
}

.kq-card [style*="color: #5C6B84"], .kq-card [style*="color:#5C6B84"], .kq-card [style*="color: rgb(92, 107, 132)"] {
  color: var(--kq-slate) !important;
  font-weight: 500 !important;
}

/* ==========================================================================
   4. High-Contrast Form Inputs & Controls
   ========================================================================== */

.kq-input, input[type="text"], input[type="number"], input[type="email"], input[type="password"], input[type="tel"], select, textarea {
  background-color: var(--kq-white) !important;
  color: var(--kq-ink) !important;
  border: 1.5px solid var(--kq-line) !important;
  border-radius: var(--md-radius-sm) !important;
  font-family: var(--md-font-sans) !important;
  font-size: 14.5px !important;
  font-weight: 500 !important;
  padding: 10px 14px !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.kq-input::placeholder, input::placeholder, textarea::placeholder {
  color: var(--kq-slate) !important;
  opacity: 0.85 !important;
}

.kq-input:focus, input:focus, select:focus, textarea:focus {
  border-color: var(--kq-brass) !important;
  box-shadow: 0 0 0 3px var(--md-primary-glow) !important;
  outline: none !important;
}

.kq-label {
  color: var(--kq-ink-soft) !important;
  font-family: var(--md-font-sans) !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  letter-spacing: 0.03em !important;
  margin-bottom: 6px !important;
  display: block !important;
}

/* ==========================================================================
   5. Buttons
   ========================================================================== */

.kq-btn-primary, button[style*="background: rgb(254, 97, 0)"], button[style*="background:#FE6100"], button[style*="background: #FE6100"], a[style*="background: rgb(254, 97, 0)"] {
  background: linear-gradient(135deg, #FE6100 0%, #E55600 100%) !important;
  color: #FFFFFF !important;
  border-radius: var(--md-radius-md) !important;
  font-family: var(--md-font-sans) !important;
  font-weight: 700 !important;
  border: none !important;
  box-shadow: 0 4px 14px -2px var(--md-primary-glow) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  cursor: pointer;
}

.kq-btn-primary:hover, button[style*="background: rgb(254, 97, 0)"]:hover {
  transform: translateY(-2px) !important;
  background: linear-gradient(135deg, #FF7A29 0%, #FE6100 100%) !important;
  box-shadow: 0 8px 24px -2px var(--md-primary-glow) !important;
}

.kq-btn-primary span, .kq-btn-primary svg {
  color: #FFFFFF !important;
  fill: #FFFFFF !important;
}

.kq-btn-ghost {
  background-color: var(--kq-paper-deep) !important;
  color: var(--kq-ink) !important;
  border-radius: var(--md-radius-md) !important;
  font-family: var(--md-font-sans) !important;
  font-weight: 600 !important;
  border: 1.5px solid var(--kq-line) !important;
  transition: all 0.15s ease !important;
}

.kq-btn-ghost:hover {
  background-color: var(--kq-white) !important;
  border-color: var(--kq-brass) !important;
  transform: translateY(-1px) !important;
}

/* ==========================================================================
   6. Left Sidebar & Navigation Menu — Dynamic Light & Dark Theme High-Contrast
   ========================================================================== */

/* Target Superadmin, Partner, and Business Sidebar Containers */
.kq-sidebar,
.kq-shell > .kq-sidebar,
.kq-shell > div:first-child[class*="kq-noprint"],
.kq-root > div:first-child,
div[style*="--kq-sidebar-bg"],
div[style*="background: var(--kq-sidebar-bg"],
div[style*="width: 208px"],
div[style*="width: 230px"],
div[style*="width:208px"],
div[style*="width:230px"],
div.kq-noprint:has(.kq-nav-item) {
  background-color: var(--kq-sidebar-bg, #FFFFFF) !important;
  background: var(--kq-sidebar-bg, #FFFFFF) !important;
  color: var(--kq-sidebar-link, #0F172A) !important;
  border-right: 1.5px solid var(--kq-sidebar-border, #CBD5E1) !important;
}

/* Ensure Button Bars & Non-Sidebar containers inside main content have NO dark background */
.kq-card .kq-noprint,
.kq-scrollbar .kq-noprint,
.kq-main .kq-noprint,
div[class*="kq-card"] .kq-noprint,
div[class*="kq-root"] > div:not(:first-child) .kq-noprint {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

/* Business Name, Logo Header & Titles inside Sidebar */
.kq-sidebar .kq-display,
.kq-sidebar .kq-sidebar-title,
.kq-sidebar-title,
div.kq-sidebar-title,
.kq-root > div:first-child .kq-display,
.kq-root > div:first-child [style*="color: #fff"],
.kq-root > div:first-child [style*="color:#fff"] {
  color: var(--kq-sidebar-title, #0F172A) !important;
  font-weight: 800 !important;
  font-size: 16px !important;
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
  text-shadow: none !important;
}

/* Sidebar Tagline / Monospace Subtitles (e.g. SUPERADMIN, RESELLER / PARTNER, ADMIN) */
.kq-sidebar .kq-mono,
.kq-sidebar div[class*="kq-mono"],
.kq-root > div:first-child .kq-mono,
.kq-root > div:first-child div[class*="kq-mono"] {
  color: var(--kq-sidebar-sub, #FE6100) !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  letter-spacing: 0.12em !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* All Navigation Menu Items & Text */
.kq-sidebar .kq-nav-item,
div.kq-nav-item,
[class*="kq-nav-item"],
.kq-root > div:first-child .kq-nav-item {
  color: var(--kq-sidebar-link, #0F172A) !important;
  font-family: var(--md-font-sans, 'Plus Jakarta Sans', system-ui, sans-serif) !important;
  font-weight: 700 !important;
  font-size: 13.5px !important;
  opacity: 1 !important;
  visibility: visible !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 10px 14px !important;
  border-radius: 9px !important;
  margin-bottom: 3px !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: all 0.18s ease !important;
}

.kq-sidebar .kq-nav-item *,
div.kq-nav-item *,
[class*="kq-nav-item"] * {
  color: var(--kq-sidebar-link, #0F172A) !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Icons inside Nav Items */
.kq-sidebar .kq-nav-item svg,
div.kq-nav-item svg,
[class*="kq-nav-item"] svg {
  color: var(--kq-sidebar-icon, #FE6100) !important;
  stroke: var(--kq-sidebar-icon, #FE6100) !important;
  opacity: 1 !important;
  flex-shrink: 0 !important;
}

/* Hover State */
.kq-sidebar .kq-nav-item:hover,
div.kq-nav-item:hover,
[class*="kq-nav-item"]:hover {
  background-color: var(--kq-sidebar-link-hover-bg, #FFF7ED) !important;
  color: var(--kq-sidebar-link-hover, #EA580C) !important;
  transform: translateX(4px) !important;
}

.kq-sidebar .kq-nav-item:hover *,
div.kq-nav-item:hover *,
[class*="kq-nav-item"]:hover * {
  color: var(--kq-sidebar-link-hover, #EA580C) !important;
}

.kq-sidebar .kq-nav-item:hover svg,
div.kq-nav-item:hover svg,
[class*="kq-nav-item"]:hover svg {
  color: var(--kq-sidebar-link-hover, #EA580C) !important;
  stroke: var(--kq-sidebar-link-hover, #EA580C) !important;
}

/* Active Nav Item */
.kq-sidebar .kq-nav-item.active,
div.kq-nav-item.active,
[class*="kq-nav-item active"],
[class*="kq-nav-item"][class*="active"] {
  background: linear-gradient(135deg, #FE6100 0%, #E55600 100%) !important;
  color: #FFFFFF !important;
  font-weight: 800 !important;
  box-shadow: 0 4px 14px -2px rgba(254, 97, 0, 0.5) !important;
}

.kq-sidebar .kq-nav-item.active *,
div.kq-nav-item.active *,
[class*="kq-nav-item active"] *,
[class*="kq-nav-item active"] svg {
  color: #FFFFFF !important;
  stroke: #FFFFFF !important;
  opacity: 1 !important;
}

/* Sidebar Footer & Links */
.kq-root > div:first-child div[style*="marginTop"],
.kq-root > div:first-child div[style*="margin-top"] {
  margin-top: auto !important;
}

.kq-root > div:first-child div[style*="textAlign: \"center\""],
.kq-root > div:first-child div[style*="text-align: center"],
.kq-root > div:first-child div[style*="textAlign: center"] {
  color: var(--kq-sidebar-footer, #475569) !important;
}

.kq-root > div:first-child a,
.kq-sidebar a {
  color: var(--kq-brass, #FE6100) !important;
}

/* ==========================================================================
   7. Table & Ledger Styling
   ========================================================================== */

table {
  color: var(--kq-ink) !important;
  border-color: var(--kq-line) !important;
}

th {
  color: var(--kq-ink-soft) !important;
  font-weight: 800 !important;
  font-size: 13px !important;
  background-color: var(--kq-paper-deep) !important;
  border-bottom: 2px solid var(--kq-line) !important;
}

td {
  color: var(--kq-ink) !important;
  font-weight: 500 !important;
  border-bottom: 1px solid var(--kq-line) !important;
}

/* ==========================================================================
   8. Status Stamps & Badges
   ========================================================================== */

.kq-stamp {
  border-radius: var(--md-radius-full) !important;
  padding: 4px 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
}

/* ==========================================================================
   9. Logo High-Contrast Pill Wrapper
   ========================================================================== */

.brand-logo-pill {
  background: #FFFFFF !important;
  padding: 6px 14px !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.16) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.brand-logo-pill:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22) !important;
}

.brand-logo-pill img {
  height: 34px !important;
  width: auto !important;
  object-fit: contain !important;
  display: block !important;
}

/* ==========================================================================
   10. Quick Actions Floating Button / Dynamic Theme Toggle
   ========================================================================== */

.md3-theme-toggle-fab {
  position: fixed !important;
  bottom: 24px !important;
  right: 24px !important;
  width: 52px !important;
  height: 52px !important;
  border-radius: var(--md-radius-full) !important;
  background: linear-gradient(135deg, #FE6100 0%, #E55600 100%) !important;
  color: #FFFFFF !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: var(--md-elevation-3) !important;
  border: none !important;
  cursor: pointer !important;
  z-index: 9999 !important;
  font-size: 22px !important;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease !important;
}

.md3-theme-toggle-fab:hover {
  transform: scale(1.1) rotate(12deg) !important;
  box-shadow: 0 10px 30px -4px var(--md-primary-glow) !important;
}

/* ==========================================================================
   11. Smooth Modern Scrollbars
   ========================================================================== */

::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: var(--kq-line);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--kq-slate);
}