/* portal-glass.css
 * ═══════════════════════════════════════════════════════════════════
 * UNIFIED GLASS DESIGN SYSTEM - Ligatrix Portal
 * ═══════════════════════════════════════════════════════════════════
 *
 * WHY THIS EXISTS:
 * All 26 portal pages had inline CSS with glass values copy-pasted
 * and slightly different. This file is the single source of truth.
 *
 * DESIGN PRINCIPLES (from NN/g, Apple HIG, Axess Lab research):
 * 1. Glass is for chrome (sidebar, modals), not for content itself
 * 2. Max 3-5 glass surfaces visible per viewport
 * 3. Content cards use dark-base glass (guaranteed contrast)
 * 4. Hierarchy through opacity tiers, not "everything is glass"
 * 5. Accessibility fallbacks are mandatory, not optional
 *
 * TIER SYSTEM:
 * ┌─────────────┬──────────────────┬────────┬──────────────────────┐
 * │ Tier        │ Background       │ Blur   │ Use For              │
 * ├─────────────┼──────────────────┼────────┼──────────────────────┤
 * │ Chrome      │ rgba(10,15,22,.8)│ 40px   │ Sidebar, nav         │
 * │ Surface     │ rgba(17,24,39,.5)│ 12px   │ Content cards        │
 * │ Elevated    │ rgba(255,255,255,│ 24px   │ Modals, hero cards   │
 * │             │ .05)             │        │                      │
 * │ Overlay     │ rgba(0,0,0,.5)   │ 8px    │ Modal backdrops      │
 * │ Inert       │ rgba(17,24,39,.8)│ none   │ Forms, tables, data  │
 * └─────────────┴──────────────────┴────────┴──────────────────────┘
 */

/* ── Glass Variables ── */
:root {
  /* Surface backgrounds */
  --glass-chrome: rgba(10, 15, 22, 0.80);
  --glass-surface: rgba(17, 24, 39, 0.50);
  --glass-elevated: rgba(255, 255, 255, 0.05);
  --glass-overlay: rgba(0, 0, 0, 0.50);
  --glass-inert: rgba(17, 24, 39, 0.80);

  /* Blur scale - cost increases with square of radius */
  --blur-sm: 8px;
  --blur-md: 12px;
  --blur-lg: 24px;
  --blur-xl: 40px;

  /* Border opacity scale */
  --border-faint: rgba(255, 255, 255, 0.03);
  --border-subtle: rgba(255, 255, 255, 0.06);
  --border-medium: rgba(255, 255, 255, 0.10);
  --border-strong: rgba(255, 255, 255, 0.15);

  /* Shadows - dark theme needs higher opacity than light */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.15);
  --shadow-md: 0 4px 24px rgba(0, 0, 0, 0.25);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.35);
  --shadow-xl: 0 12px 48px rgba(0, 0, 0, 0.45);

  /* WHY: Inset highlight creates the "top light" that makes glass feel
     real - light catching the top edge of a glass pane. */
  --inset-light: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  --inset-light-strong: inset 0 1px 0 rgba(255, 255, 255, 0.10);

  /* WHY: Inner glow adds warmth and depth - the card feels like it has
     light trapped inside, not just sitting on a dark surface. */
  --inner-glow: inset 0 0 20px rgba(255, 255, 255, 0.02);
  --inner-glow-strong: inset 0 0 30px rgba(255, 255, 255, 0.03);

  /* Accent glow - used sparingly on interactive elements */
  --glow-accent: 0 0 40px rgba(94, 234, 212, 0.04);
  --glow-accent-hover: 0 0 60px rgba(94, 234, 212, 0.06);

  /* Glass card radius - premium feel requires generous rounding */
  --glass-radius: 16px;
  --glass-radius-sm: 12px;
  --glass-radius-xs: 8px;
}

/* ═══════════════════════════════════════════════════════════════════
 * TIER 1: CHROME GLASS - Sidebar, top nav, persistent UI frame
 * WHY: The frame around content. Heaviest blur because it's always
 * visible and users look THROUGH it, not AT it.
 * ═══════════════════════════════════════════════════════════════════ */
.glass-chrome {
  background: var(--glass-chrome);
  backdrop-filter: blur(var(--blur-xl)) saturate(130%);
  -webkit-backdrop-filter: blur(var(--blur-xl)) saturate(130%);
  border: 1px solid var(--border-faint);
}


/* ═══════════════════════════════════════════════════════════════════
 * TIER 2: SURFACE GLASS - Content cards, panels, list containers
 * WHY: The main card style. Dark-base glass guarantees text contrast
 * regardless of what's behind it. saturate keeps colors alive.
 *
 * This UPGRADES the existing .glass-card class across all pages.
 * ═══════════════════════════════════════════════════════════════════ */
.glass-card,
.glass-surface {
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.04) 0%,
      rgba(255, 255, 255, 0.00) 40%,
      rgba(0, 0, 0, 0.10) 100%
    ),
    var(--glass-surface);
  backdrop-filter: blur(var(--blur-md)) saturate(130%);
  -webkit-backdrop-filter: blur(var(--blur-md)) saturate(130%);
  border: 1px solid var(--border-subtle);
  border-top-color: var(--border-medium);
  border-radius: var(--glass-radius);
  box-shadow:
    var(--shadow-md),
    var(--inset-light),
    var(--inner-glow);
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.glass-card:hover,
.glass-surface:hover {
  border-color: var(--border-medium);
  border-top-color: var(--border-strong);
  box-shadow:
    var(--shadow-lg),
    var(--inset-light-strong),
    var(--inner-glow);
  transform: translateY(-1px);
}

/* WHY: "Active" variant for cards that are selected or focused.
   Slightly brighter border + subtle accent glow. */
.glass-card.active,
.glass-surface.active {
  border-color: rgba(94, 234, 212, 0.15);
  border-top-color: rgba(94, 234, 212, 0.20);
  box-shadow:
    var(--shadow-md),
    var(--inset-light-strong),
    var(--inner-glow),
    0 0 30px rgba(94, 234, 212, 0.04);
}


/* ═══════════════════════════════════════════════════════════════════
 * TIER 3: ELEVATED GLASS - Modals, floating panels, hero stats
 * WHY: Maximum glass effect. White-at-5% with heavy blur + saturate
 * creates the "Apple glass" feel. Only for elements that FLOAT above
 * everything else.
 * ═══════════════════════════════════════════════════════════════════ */
.glass-elevated {
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.07) 0%,
      rgba(255, 255, 255, 0.01) 30%,
      rgba(0, 0, 0, 0.12) 100%
    ),
    var(--glass-elevated);
  backdrop-filter: blur(var(--blur-lg)) saturate(150%);
  -webkit-backdrop-filter: blur(var(--blur-lg)) saturate(150%);
  border: 1px solid var(--border-medium);
  border-top-color: var(--border-strong);
  border-radius: calc(var(--glass-radius) + 2px);
  box-shadow:
    var(--shadow-xl),
    var(--glow-accent),
    var(--inset-light-strong),
    var(--inner-glow-strong);
  transition: border-color 0.25s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

.glass-elevated:hover {
  border-color: var(--border-strong);
  border-top-color: rgba(255, 255, 255, 0.20);
  box-shadow:
    var(--shadow-xl),
    var(--glow-accent-hover),
    var(--inset-light-strong),
    var(--inner-glow-strong);
  transform: translateY(-2px);
}


/* ═══════════════════════════════════════════════════════════════════
 * TIER 4: OVERLAY GLASS - Modal/dialog backdrops
 * WHY: Dims the background. Low blur so the covered content stays
 * recognizable (user knows where they are). Dark tint, not dark blur.
 * ═══════════════════════════════════════════════════════════════════ */
.glass-overlay,
.modal-overlay {
  background: var(--glass-overlay);
  backdrop-filter: blur(var(--blur-sm));
  -webkit-backdrop-filter: blur(var(--blur-sm));
}


/* ═══════════════════════════════════════════════════════════════════
 * TIER 5: INERT - Forms, tables, dense data
 * WHY: Research says NEVER glass on forms or data tables. High-opacity
 * dark background with NO backdrop-filter. Zero GPU cost. Maximum
 * readability. Consistent contrast.
 * ═══════════════════════════════════════════════════════════════════ */
.glass-inert {
  background: var(--glass-inert);
  border: 1px solid var(--border-subtle);
  border-top-color: var(--border-medium);
  border-radius: var(--glass-radius);
  box-shadow: var(--shadow-sm), var(--inset-light);
}


/* ═══════════════════════════════════════════════════════════════════
 * UTILITY: Glass dividers & separators
 * ═══════════════════════════════════════════════════════════════════ */
.glass-divider {
  height: 1px;
  width: 100%;
  background: var(--border-subtle);
  border: none;
}

.glass-divider-strong {
  height: 1px;
  width: 100%;
  background: var(--border-medium);
  border: none;
}


/* ═══════════════════════════════════════════════════════════════════
 * UTILITY: Glass pills & badges
 * ═══════════════════════════════════════════════════════════════════ */
.glass-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-faint);
  border-radius: 100px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: rgba(226, 232, 240, 0.7);
  transition: background 0.15s ease, border-color 0.15s ease;
}

.glass-pill:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--border-subtle);
}

.glass-pill.glass-pill--accent {
  border-color: rgba(94, 234, 212, 0.15);
  color: #5EEAD4;
}


/* ═══════════════════════════════════════════════════════════════════
 * UTILITY: Glass progress bars
 * ═══════════════════════════════════════════════════════════════════ */
.glass-progress-track {
  height: 6px;
  width: 100%;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 3px;
  overflow: hidden;
}

.glass-progress-fill {
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.3));
  transition: width 0.6s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.glass-progress-fill--accent {
  background: linear-gradient(90deg, #5EEAD4, rgba(94, 234, 212, 0.4));
}


/* ═══════════════════════════════════════════════════════════════════
 * UTILITY: Glass stat items (for dashboard cards)
 * ═══════════════════════════════════════════════════════════════════ */
.glass-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 4px;
  transition: transform 0.15s ease;
}

.glass-stat:hover {
  transform: translateY(-2px);
}

.glass-stat-value {
  font-size: 24px;
  font-weight: 700;
  color: #E2E8F0;
  letter-spacing: -0.02em;
}

.glass-stat-label {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(226, 232, 240, 0.45);
}


/* ═══════════════════════════════════════════════════════════════════
 * UTILITY: Glass card sections (inner content areas)
 * ═══════════════════════════════════════════════════════════════════ */
.glass-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border-faint);
  margin-bottom: 16px;
}

.glass-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border-faint);
}


/* ═══════════════════════════════════════════════════════════════════
 * RESPONSIVE: Reduce glass on mobile (GPU budget)
 * WHY: Mobile GPUs are weaker. Research shows backdrop-filter is the
 * #1 cause of scroll jank on mobile. Reduce blur and limit surfaces.
 * ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .glass-card,
  .glass-surface {
    backdrop-filter: blur(8px) saturate(110%);
    -webkit-backdrop-filter: blur(8px) saturate(110%);
  }

  .glass-elevated {
    backdrop-filter: blur(16px) saturate(120%);
    -webkit-backdrop-filter: blur(16px) saturate(120%);
  }

  .glass-chrome {
    backdrop-filter: blur(24px) saturate(120%);
    -webkit-backdrop-filter: blur(24px) saturate(120%);
  }
}


/* ═══════════════════════════════════════════════════════════════════
 * ACCESSIBILITY: prefers-reduced-transparency
 * WHY: Some users have this OS setting enabled (macOS "Reduce
 * Transparency", Windows "Transparency effects"). Glass becomes
 * solid. Non-negotiable accessibility requirement.
 * ═══════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-transparency: reduce) {
  .glass-card,
  .glass-surface {
    background: rgba(17, 24, 39, 0.95);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .glass-elevated {
    background: rgba(17, 24, 39, 0.95);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-top-color: var(--border-medium);
  }

  .glass-chrome {
    background: rgba(10, 15, 22, 0.98);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .glass-overlay,
  .modal-overlay {
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}


/* ═══════════════════════════════════════════════════════════════════
 * ACCESSIBILITY: prefers-contrast (high contrast mode)
 * WHY: Increases border visibility and removes translucency.
 * ═══════════════════════════════════════════════════════════════════ */
@media (prefers-contrast: more) {
  .glass-card,
  .glass-surface,
  .glass-elevated {
    background: rgba(17, 24, 39, 0.95);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-color: rgba(255, 255, 255, 0.25);
  }

  .glass-pill {
    border-color: rgba(255, 255, 255, 0.20);
  }

  .glass-divider,
  .glass-divider-strong {
    background: rgba(255, 255, 255, 0.20);
  }
}


/* ═══════════════════════════════════════════════════════════════════
 * FALLBACK: Browsers without backdrop-filter support
 * WHY: Firefox ESR, older browsers. Degrade gracefully to solid.
 * ═══════════════════════════════════════════════════════════════════ */
@supports not (backdrop-filter: blur(1px)) {
  .glass-card,
  .glass-surface {
    background: rgba(17, 24, 39, 0.90);
  }

  .glass-elevated {
    background: rgba(17, 24, 39, 0.92);
  }

  .glass-chrome {
    background: rgba(10, 15, 22, 0.95);
  }

  .glass-overlay,
  .modal-overlay {
    background: rgba(0, 0, 0, 0.70);
  }
}


/* ═══════════════════════════════════════════════════════════════════
 * PAGE-LEVEL CARD OVERRIDES
 * WHY: Many pages define their own .card, .stat-card, .glass-card
 * inline with weak values (6px radius, no glow, flat borders).
 * These overrides enforce the premium glass treatment everywhere
 * without editing each of the 14 page files individually.
 * Loaded AFTER page styles via <link> order, so these win by cascade.
 * ═══════════════════════════════════════════════════════════════════ */

/* ── Premium gradient overlay mixin ──
 * WHY: This gradient creates the "light catching the top edge" effect.
 * White at top fading to transparent then dark at bottom = 3D depth.
 * Applied via background-image so it layers ON TOP of existing bg color. */

/* Dashboard stat cards */
.stat-card {
  background-image:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.04) 0%,
      rgba(255, 255, 255, 0.00) 40%,
      rgba(0, 0, 0, 0.08) 100%
    ) !important;
  border-radius: var(--glass-radius-sm) !important;
  border-top-color: var(--border-medium) !important;
  box-shadow:
    var(--shadow-md),
    var(--inset-light),
    var(--inner-glow) !important;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}
.stat-card:hover {
  border-color: var(--border-medium) !important;
  border-top-color: var(--border-strong) !important;
  box-shadow:
    var(--shadow-lg),
    var(--inset-light-strong),
    var(--inner-glow) !important;
  transform: translateY(-1px);
}

/* Dashboard & page-level .card containers */
.main .card,
.main .glass-card {
  background-image:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.04) 0%,
      rgba(255, 255, 255, 0.00) 40%,
      rgba(0, 0, 0, 0.10) 100%
    ) !important;
  border-radius: var(--glass-radius) !important;
  border-top-color: var(--border-medium) !important;
  box-shadow:
    var(--shadow-md),
    var(--inset-light),
    var(--inner-glow) !important;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}
.main .card:hover,
.main .glass-card:hover {
  border-color: var(--border-medium) !important;
  border-top-color: var(--border-strong) !important;
  box-shadow:
    var(--shadow-lg),
    var(--inset-light-strong),
    var(--inner-glow) !important;
  transform: translateY(-1px);
}

/* Page-specific card containers - full glass treatment
   WHY: .booking-card and .meeting-card excluded - meetings.html
   has its own premium glass styling inline (GlassCalendar upgrade). */
.main .project-card,
.main .warranty-card,
.main .schedule-card,
.main .invoice-card,
.main .methods-card,
.main .saved-card {
  background-image:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.04) 0%,
      rgba(255, 255, 255, 0.00) 40%,
      rgba(0, 0, 0, 0.10) 100%
    ) !important;
  border-radius: var(--glass-radius) !important;
  border-top-color: var(--border-medium) !important;
  box-shadow:
    var(--shadow-md),
    var(--inset-light),
    var(--inner-glow) !important;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}
.main .project-card:hover,
.main .warranty-card:hover {
  border-color: var(--border-medium) !important;
  border-top-color: var(--border-strong) !important;
  box-shadow:
    var(--shadow-lg),
    var(--inset-light-strong),
    var(--inner-glow) !important;
  transform: translateY(-1px);
}

/* Inner card elements - items, rows, sub-sections */
.card-item,
.team-member,
.notif-item,
.ticket-card,
.thread-item {
  border-radius: var(--glass-radius-sm) !important;
}

/* Modals and floating panels */
.modal,
.modal-content,
.panel,
.invite-panel {
  border-radius: var(--glass-radius) !important;
  border-top-color: var(--border-strong) !important;
  box-shadow:
    var(--shadow-xl),
    var(--inset-light-strong),
    var(--inner-glow-strong) !important;
}

/* Form inputs - keep these tight but upgrade slightly */
.main input[type="text"],
.main input[type="email"],
.main input[type="password"],
.main input[type="search"],
.main input[type="number"],
.main textarea,
.main select {
  border-radius: var(--glass-radius-xs) !important;
}

/* Buttons - subtle radius upgrade */
.main .btn,
.main button:not(.nav-item):not(.sidebar-toggle) {
  border-radius: var(--glass-radius-xs) !important;
}

/* Filter pills */
.filter-pills .pill,
.filter-pills button,
[data-filter] {
  border-radius: var(--glass-radius-xs) !important;
}

/* Status badges keep pill shape */
.status-badge,
.role-badge,
.glass-pill {
  border-radius: 100px !important;
}