/* ============================================================
   GlowInvoicing Theme — CSS Custom Properties
   Loaded after bootstrap.min.css so --bs-* overrides cascade
   through every existing .btn/.card/.badge/.table with no
   per-view class changes needed for color/radius alone.
   ============================================================ */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('/lib/fonts/inter/Inter-Variable.woff2') format('woff2');
}

:root {
  /* ---- Primary (deep slate/navy) ---- */
  --color-primary-900: #0F172A;   /* darkest navy — headers, primary buttons, sidebar */
  --color-primary-800: #1E293B;   /* nav bar, secondary dark surfaces */
  --color-primary-700: #334155;   /* borders on dark surfaces, muted navy text */

  /* ---- Accent (emerald default) — ramp, not one flat value. Tenant-overridable: Organization
     Settings > Appearance swaps all 7 of these (hex + matching -rgb triplet) via a per-tenant
     <style> block rendered after this stylesheet — every accent-tied rule below MUST read from
     these variables (never a hardcoded hex/rgb literal) or it silently won't re-theme. ---- */
  --color-accent-500: #10B981;    /* decoration only: icons, left-border accents, chart lines, focus rings */
  --color-accent-600: #059669;    /* button backgrounds w/ white text (passes 3:1 UI-component contrast) */
  --color-accent-700: #047857;    /* hover/active state on accent buttons */
  --color-accent-tint: #ECFDF5;   /* light wash — success banners, badge fills paired with dark text */
  --color-accent-500-rgb: 16, 185, 129;   /* same as --color-accent-500, as an "R, G, B" triplet for rgba() composition */
  --color-accent-600-rgb: 5, 150, 105;
  --color-accent-700-rgb: 4, 120, 87;

  /* ---- Neutrals / surfaces ---- */
  --color-bg: #F8FAFC;
  --color-surface: #FFFFFF;
  --color-surface-muted: #F1F5F9;  /* table header bg, subtle section fills */
  --color-border: #E2E8F0;

  /* ---- Text (contrast-checked against --color-bg / --color-surface) ---- */
  --color-text-primary: #0F172A;    /* 17:1 — body, headings */
  --color-text-secondary: #475569;  /* 5.4:1 — labels, secondary content (NOT slate-500, which fails AA) */
  --color-text-tertiary: #94A3B8;   /* ~2.4:1 — large text / disabled / decorative only, never body copy */

  /* ---- Semantic status (kept distinct from the brand accent) ---- */
  --color-success: #059669;
  --color-warning: #D97706;
  --color-danger: #DC2626;
  --color-info: #0369A1;

  /* ---- Typography ---- */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* ---- Radius ---- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;

  /* ---- Shadows: soft, layered, diffused — not flat borders ---- */
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08), 0 1px 3px rgba(15, 23, 42, 0.06);
  --shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.12), 0 2px 6px rgba(15, 23, 42, 0.06);

  /* ---- Motion ---- */
  --transition-fast: 150ms ease-out;   /* hover/focus micro-interactions */
  --transition-base: 200ms ease-out;
  --transition-slow: 350ms ease-out;   /* page-load fade-in */

  /* ---- Restrained gradients (stat cards + auth hero only) ---- */
  --gradient-primary: linear-gradient(135deg, var(--color-primary-900) 0%, var(--color-primary-800) 100%);
  --gradient-accent-wash: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(20, 184, 166, 0.03) 100%);
}

/* ============================================================
   Bootstrap 5.3 variable overrides — cascades to every
   .btn-primary/.card/.badge/.table/body across the whole app.
   ============================================================ */
:root {
  --bs-body-font-family: var(--font-sans);
  --bs-body-bg: var(--color-bg);
  --bs-body-color: var(--color-text-primary);
  --bs-border-radius: var(--radius-sm);
  --bs-border-radius-lg: var(--radius-md);
  --bs-border-color: var(--color-border);
  --bs-link-color: var(--color-accent-600);
  --bs-link-color-rgb: var(--color-accent-600-rgb);
  --bs-link-hover-color: var(--color-accent-700);
  --bs-link-hover-color-rgb: var(--color-accent-700-rgb);

  --bs-primary: var(--color-primary-900);
  --bs-primary-rgb: 15, 23, 42;
  --bs-success: var(--color-success);
  --bs-success-rgb: 5, 150, 105;
  --bs-danger: var(--color-danger);
  --bs-danger-rgb: 220, 38, 38;
  --bs-warning: var(--color-warning);
  --bs-warning-rgb: 217, 119, 6;
  --bs-info: var(--color-info);
  --bs-info-rgb: 3, 105, 161;
}

body {
  font-feature-settings: "cv11", "ss01";
}

/* ============================================================
   Button variant overrides.
   Bootstrap 5.3 bakes each .btn-* variant's colors into its own
   component-scoped --bs-btn-* custom properties AT BUILD TIME —
   they do NOT read the root --bs-primary/--bs-success/etc. at
   runtime, so overriding those root variables alone (above) has
   no effect on buttons. Every variant actually used in this app
   (checked via grep across Views/) gets an explicit block here —
   one place, still no per-view changes needed.
   ============================================================ */
.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--color-primary-900);
  --bs-btn-border-color: var(--color-primary-900);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--color-primary-800);
  --bs-btn-hover-border-color: var(--color-primary-800);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--color-primary-700);
  --bs-btn-active-border-color: var(--color-primary-700);
  --bs-btn-focus-shadow-rgb: 15, 23, 42;
  --bs-btn-disabled-bg: var(--color-primary-900);
  --bs-btn-disabled-border-color: var(--color-primary-900);
}

.btn-outline-primary {
  --bs-btn-color: var(--color-primary-900);
  --bs-btn-border-color: var(--color-primary-900);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--color-primary-900);
  --bs-btn-hover-border-color: var(--color-primary-900);
  --bs-btn-active-bg: var(--color-primary-800);
  --bs-btn-active-border-color: var(--color-primary-800);
  --bs-btn-focus-shadow-rgb: 15, 23, 42;
}

.btn-outline-secondary {
  --bs-btn-color: var(--color-text-secondary);
  --bs-btn-border-color: var(--color-border);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--color-text-secondary);
  --bs-btn-hover-border-color: var(--color-text-secondary);
  --bs-btn-active-bg: var(--color-primary-800);
  --bs-btn-active-border-color: var(--color-primary-800);
  --bs-btn-focus-shadow-rgb: 71, 85, 105;
}

.btn-success,
.btn-outline-success {
  --bs-btn-bg: var(--color-accent-600);
  --bs-btn-border-color: var(--color-accent-600);
  --bs-btn-color: #fff;
  --bs-btn-hover-bg: var(--color-accent-700);
  --bs-btn-hover-border-color: var(--color-accent-700);
  --bs-btn-active-bg: var(--color-accent-700);
  --bs-btn-active-border-color: var(--color-accent-700);
  --bs-btn-focus-shadow-rgb: var(--color-accent-600-rgb);
}
.btn-outline-success {
  --bs-btn-color: var(--color-accent-600);
  --bs-btn-bg: transparent;
  --bs-btn-hover-color: #fff;
}

.btn-danger,
.btn-outline-danger {
  --bs-btn-bg: var(--color-danger);
  --bs-btn-border-color: var(--color-danger);
  --bs-btn-hover-bg: #B91C1C;
  --bs-btn-hover-border-color: #B91C1C;
  --bs-btn-active-bg: #B91C1C;
  --bs-btn-active-border-color: #B91C1C;
  --bs-btn-focus-shadow-rgb: 220, 38, 38;
}
.btn-outline-danger {
  --bs-btn-color: var(--color-danger);
  --bs-btn-bg: transparent;
  --bs-btn-hover-color: #fff;
}

.btn-outline-dark {
  --bs-btn-color: var(--color-primary-800);
  --bs-btn-border-color: var(--color-primary-800);
  --bs-btn-hover-bg: var(--color-primary-800);
  --bs-btn-hover-border-color: var(--color-primary-800);
  --bs-btn-focus-shadow-rgb: 30, 41, 59;
}

/* ---- Focus rings: accent color, not Bootstrap's default blue ---- */
.form-control:focus,
.form-select:focus {
  border-color: var(--color-accent-500);
  box-shadow: 0 0 0 0.25rem rgba(var(--color-accent-500-rgb), 0.2);
}

/* ---- Money/tabular figures — apply on invoice/quotation/payment amount cells ---- */
.tnum {
  font-variant-numeric: tabular-nums;
}

/* ---- Table row hover: background tint only — a translateY lift on <tr> causes
   visible layout jank on dense tables, unlike cards/buttons, so this is
   deliberately not the same .hover-lift treatment used elsewhere. ---- */
.table-modern tbody tr {
  transition: background-color var(--transition-fast);
}
.table-modern tbody tr:hover {
  background-color: var(--color-accent-tint);
}

/* ---- Action-button cells: keep buttons on one line instead of wrapping onto a second
   line mid-row (the cause of the "wrapping, doesn't look good" complaint) — every action
   cell in this app is right-aligned via .text-end, tabular-number cells share the same
   class but are single tokens already, so this is safe to apply broadly. Tables get a
   .table-responsive wrapper so a row that still can't fit scrolls horizontally instead. ---- */
.table-modern td.text-end {
  white-space: nowrap;
}

/* ---- Card depth: replaces flat Bootstrap borders with soft shadows. Explicit surface
   background is required — Bootstrap's own --bs-card-bg otherwise resolves to --bs-body-bg,
   which is the SAME color as the page (--color-bg), leaving the card invisible except for a
   near-imperceptible shadow. ---- */
.card {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  border-radius: var(--radius-md);
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}
.card-body {
  padding: 1.5rem;
}
/* ---- Nested card (e.g. a Line Items table sitting inside an entry form's outer card) reads
   as a recessed panel rather than a second floating card competing with the outer one. ---- */
.card .card {
  box-shadow: none;
  background-color: var(--color-surface-muted);
}

/* ---- Entry-form labels: consistent weight/color/tracking across every Create/Edit page,
   matching the filter-bar label treatment used on Index pages. ---- */
.form-label {
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--color-text-secondary);
}

/* ---- Table headers: every list page's <thead> gets a distinct tinted band instead of
   blending into the body text above it — small caps, letter-spaced, on a muted surface. ---- */
.table-modern thead th {
  background-color: var(--color-surface-muted);
  color: var(--color-text-secondary);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 2px solid var(--color-border);
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
.table-modern thead th a {
  color: inherit;
}

/* ---- Primary app navbar: dark, branded, icon-based nav with dropdown groups ---- */
.app-navbar {
  background-color: var(--color-primary-900);
  box-shadow: var(--shadow-sm);
  padding-top: 0.6rem;
  padding-bottom: 0.6rem;
}
.app-navbar .navbar-brand {
  color: #fff;
  font-weight: 700;
  font-size: 1.15rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.app-navbar .nav-link {
  color: rgba(255, 255, 255, 0.75);
  font-weight: 500;
  font-size: 0.92rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.85rem;
  border-radius: var(--radius-sm);
  transition: background-color var(--transition-fast), color var(--transition-fast);
}
.app-navbar .nav-link:hover,
.app-navbar .nav-link:focus-visible {
  color: #fff;
  background-color: rgba(255, 255, 255, 0.08);
}
.app-navbar .nav-link.active {
  color: #fff;
  background-color: rgba(var(--color-accent-500-rgb), 0.18);
  box-shadow: inset 0 -2px 0 var(--color-accent-500);
}
.app-navbar .nav-link i {
  font-size: 0.98rem;
  color: var(--color-accent-500);
}
.app-navbar .dropdown-menu {
  border: none;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: 0.4rem;
  margin-top: 0.4rem;
  min-width: 220px;
}
.app-navbar .dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  border-radius: var(--radius-sm);
  padding: 0.5rem 0.75rem;
  color: var(--color-text-primary);
  font-weight: 500;
  font-size: 0.9rem;
}
.app-navbar .dropdown-item:hover,
.app-navbar .dropdown-item:focus-visible {
  background-color: var(--color-accent-tint);
  color: var(--color-primary-900);
}
.app-navbar .dropdown-item i {
  color: var(--color-accent-600);
  font-size: 0.95rem;
  width: 1rem;
  text-align: center;
}
.app-navbar .dropdown-item.active-child {
  background-color: var(--color-accent-tint);
  font-weight: 600;
}
.app-navbar .dropdown-divider {
  margin: 0.3rem 0.25rem;
}
.app-navbar .btn-outline-secondary {
  --bs-btn-color: #fff;
  --bs-btn-border-color: rgba(255, 255, 255, 0.4);
  --bs-btn-hover-color: var(--color-primary-900);
  --bs-btn-hover-bg: #fff;
  --bs-btn-hover-border-color: #fff;
}
.app-navbar .navbar-toggler {
  border-color: rgba(255, 255, 255, 0.3);
  padding: 0.3rem 0.5rem;
}
.app-navbar .navbar-toggler:focus {
  box-shadow: 0 0 0 0.2rem rgba(var(--color-accent-500-rgb), 0.35);
}

/* ---- Sub-section pill nav (Organization Settings) — sits directly under a .page-header band ---- */
.org-settings-nav {
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 0.75rem;
  gap: 0.4rem;
}
.org-settings-nav .nav-link {
  color: var(--color-text-secondary);
  font-weight: 500;
  font-size: 0.9rem;
  padding: 0.4rem 0.9rem;
  border-radius: var(--radius-sm);
  transition: background-color var(--transition-fast), color var(--transition-fast);
}
.org-settings-nav .nav-link:hover {
  background-color: var(--color-surface-muted);
  color: var(--color-primary-900);
}
.org-settings-nav .nav-link.active {
  background-color: var(--color-primary-900);
  color: #fff;
}

/* ---- Filter bar: the search/date-range/customer/project/status controls at the top of
   every Index list page. A distinct surface (not just bare form controls in the page flow)
   makes it read as one filtering "tool", consistent with the .card depth treatment used
   elsewhere rather than a flat Bootstrap row. ---- */
.filter-bar {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: 1.1rem 1.25rem 0.85rem;
  margin-bottom: 1.75rem;
}
.filter-bar-heading {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-secondary);
  margin-bottom: 0.85rem;
}
.filter-bar-heading i {
  color: var(--color-accent-600);
  font-size: 0.95rem;
}
.filter-bar label {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-text-tertiary);
  margin-bottom: 0.3rem;
}
.filter-bar .form-control,
.filter-bar .form-select {
  border-color: var(--color-border);
}
.filter-bar .search-input-group {
  position: relative;
}
.filter-bar .search-input-group i {
  position: absolute;
  left: 0.65rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-tertiary);
  font-size: 0.85rem;
  pointer-events: none;
}
.filter-bar .search-input-group input {
  padding-left: 1.85rem;
}
.filter-bar .btn i {
  font-size: 0.85rem;
}

/* ---- Appearance settings: accent-color swatch picker ---- */
.accent-swatch-option {
  cursor: pointer;
}
.accent-swatch {
  display: block;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.accent-swatch-option:hover .accent-swatch {
  transform: scale(1.08);
}
.accent-swatch-input:checked + .accent-swatch {
  box-shadow: 0 0 0 3px var(--color-surface), 0 0 0 5px var(--color-primary-900);
}
.accent-swatch-input:focus-visible + .accent-swatch {
  outline: 2px solid var(--color-primary-900);
  outline-offset: 2px;
}

/* ---- Cookie notice: a lightweight, dismissible, non-blocking bar — informational only, since
   every cookie this app sets today is strictly necessary (auth, CSRF, TempData). This is
   deliberately not a consent gate: there's nothing non-essential to opt in/out of, so it never
   blocks the page or requires a choice — see cookie-notice.js for the one-time dismissal logic. ---- */
.cookie-notice {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1090;
  background-color: var(--color-primary-900);
  box-shadow: var(--shadow-lg);
  padding: 0.85rem 1.25rem;
}
.cookie-notice-inner {
  max-width: 1140px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.cookie-notice-text {
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.88rem;
  margin: 0;
  flex: 1 1 320px;
}
.cookie-notice-text a {
  color: #fff;
  text-decoration: underline;
  font-weight: 600;
}

/* ---- Motion utilities ---- */
.hover-lift {
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.hover-lift:hover,
.hover-lift:focus-visible {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

/* ---- Buttons get a gentle lift app-wide, not just where .hover-lift is added by hand —
   this is the one truly global "every button" motion rule the brief calls for. Smaller
   lift for .btn-sm (dense table action buttons) so it never visibly disturbs row layout. ---- */
.btn {
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}
.btn:hover,
.btn:focus-visible {
  transform: translateY(-1px);
}
.btn:not(.btn-sm):hover,
.btn:not(.btn-sm):focus-visible {
  transform: translateY(-2px);
}
.btn:active {
  transform: translateY(0);
}

/* ---- Page header: gradient title band, reused across every Index/Create/Edit/Details
   screen via the shared _PageHeader partial. Same --gradient-primary already proven on
   the auth hero and marketing CTA bands — no new palette introduced. ---- */
.page-header {
  background: var(--gradient-primary);
  border-radius: var(--radius-lg);
  padding: 1.75rem 2rem;
  margin-bottom: 1.75rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  box-shadow: var(--shadow-md);
}
.page-header h1 {
  color: #fff;
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0;
}
.page-header-caption {
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.92rem;
  margin: 0.25rem 0 0;
}
.page-header .btn-light {
  --bs-btn-color: var(--color-primary-900);
  font-weight: 600;
  white-space: nowrap;
}
/* ---- Header action buttons rendered by hand (multi-action Details pages) need their
   colors adapted for a dark gradient background — .btn-primary's navy fill would
   otherwise blend into the header itself. Primary keeps solid-white emphasis;
   secondary/outline actions become a white outline, hover-filling to white. ---- */
.page-header .btn-primary {
  --bs-btn-color: var(--color-primary-900);
  --bs-btn-bg: #fff;
  --bs-btn-border-color: #fff;
  --bs-btn-hover-color: var(--color-primary-900);
  --bs-btn-hover-bg: var(--color-surface-muted);
  --bs-btn-hover-border-color: var(--color-surface-muted);
  --bs-btn-focus-shadow-rgb: 255, 255, 255;
}
.page-header .btn-outline-primary,
.page-header .btn-outline-secondary,
.page-header .btn-outline-danger {
  --bs-btn-color: #fff;
  --bs-btn-bg: transparent;
  --bs-btn-border-color: rgba(255, 255, 255, 0.55);
  --bs-btn-hover-color: var(--color-primary-900);
  --bs-btn-hover-bg: #fff;
  --bs-btn-hover-border-color: #fff;
  --bs-btn-focus-shadow-rgb: 255, 255, 255;
}
.page-header .text-muted {
  color: rgba(255, 255, 255, 0.65) !important;
}

@keyframes fade-in-up {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fade-in-up {
  animation: fade-in-up var(--transition-slow) ease-out both;
}

/* ---- Respect OS-level reduced-motion preference (accessibility, non-negotiable) ---- */
@media (prefers-reduced-motion: reduce) {
  .fade-in-up { animation: none; opacity: 1; transform: none; }
  .hover-lift, .btn { transition: none; }
  .hover-lift:hover, .hover-lift:focus-visible,
  .btn:hover, .btn:focus-visible, .btn:active { transform: none; }
}