/**
 * FacilityMate Brand Design System
 * ─────────────────────────────────────────────────────────────────────────────
 * Derived directly from the FacilityMate logo:
 *   Primary:   #6969FF  (violet-purple — the building icon color)
 *   Navy:      #1A1A3C  (deep navy — logo dark background)
 *   Coral:     #FF5A5A  (accent — from branding-1 variant)
 *   Orange:    #FF784B  (warm accent — from branding-2 variant)
 *
 * Usage:
 *   var(--fm-primary)     → main brand violet
 *   var(--fm-primary-*)   → shades light→dark
 *   var(--fm-navy)        → dark backgrounds
 *   var(--fm-coral)       → alerts, badges, hot actions
 *   var(--fm-orange)      → warm highlights
 *   var(--fm-*)           → full semantic tokens below
 * ─────────────────────────────────────────────────────────────────────────────
 */

:root {
  /* ── RAW PALETTE ── */
  --fm-violet-50:  #f0f0ff;
  --fm-violet-100: #e4e4ff;
  --fm-violet-200: #cdcdff;
  --fm-violet-300: #a9a9ff;
  --fm-violet-400: #8787ff;
  --fm-violet-500: #6969ff;   /* LOGO PRIMARY */
  --fm-violet-600: #5454e0;
  --fm-violet-700: #4040c4;
  --fm-violet-800: #2e2ea0;
  --fm-violet-900: #1e1e7a;
  --fm-violet-950: #12124f;

  --fm-navy-50:    #eef0f8;
  --fm-navy-100:   #d4d9ef;
  --fm-navy-200:   #aab3df;
  --fm-navy-300:   #7e8dcf;
  --fm-navy-400:   #5567b8;
  --fm-navy-500:   #3a4d9f;
  --fm-navy-600:   #2d3c7a;   /* LOGO DARK BG */
  --fm-navy-700:   #1f2a5a;
  --fm-navy-800:   #141c3c;
  --fm-navy-900:   #0d1228;   /* DEEP DARK */
  --fm-navy-950:   #070b18;

  --fm-coral-50:   #fff2f2;
  --fm-coral-100:  #ffe0e0;
  --fm-coral-200:  #ffc5c5;
  --fm-coral-300:  #ff9d9d;
  --fm-coral-400:  #ff7070;
  --fm-coral-500:  #ff5a5a;   /* BRAND ACCENT 1 */
  --fm-coral-600:  #e83a3a;
  --fm-coral-700:  #c42020;
  --fm-coral-800:  #9e1a1a;
  --fm-coral-900:  #7a1515;

  --fm-orange-50:  #fff5f0;
  --fm-orange-100: #ffe8da;
  --fm-orange-200: #ffcfb2;
  --fm-orange-300: #ffae80;
  --fm-orange-400: #ff9060;
  --fm-orange-500: #ff784b;   /* BRAND ACCENT 2 */
  --fm-orange-600: #e55c2c;
  --fm-orange-700: #c0431a;
  --fm-orange-800: #9a3215;
  --fm-orange-900: #7a2510;

  /* ── SEMANTIC TOKENS ── */
  --fm-primary:         var(--fm-violet-500);
  --fm-primary-light:   var(--fm-violet-400);
  --fm-primary-lighter: var(--fm-violet-300);
  --fm-primary-dark:    var(--fm-violet-600);
  --fm-primary-darker:  var(--fm-violet-700);
  --fm-primary-glow:    rgba(105, 105, 255, 0.3);
  --fm-primary-muted:   rgba(105, 105, 255, 0.08);
  --fm-primary-border:  rgba(105, 105, 255, 0.25);

  --fm-navy:            var(--fm-navy-700);
  --fm-navy-surface:    var(--fm-navy-800);
  --fm-navy-deep:       var(--fm-navy-900);
  --fm-navy-deepest:    var(--fm-navy-950);

  --fm-coral:           var(--fm-coral-500);
  --fm-coral-muted:     rgba(255, 90, 90, 0.1);
  --fm-coral-border:    rgba(255, 90, 90, 0.25);

  --fm-orange:          var(--fm-orange-500);
  --fm-orange-muted:    rgba(255, 120, 75, 0.1);

  /* Success / Warning / Danger aligned to brand */
  --fm-success:       #22c55e;
  --fm-success-muted: rgba(34, 197, 94, 0.1);
  --fm-warning:       #f59e0b;
  --fm-warning-muted: rgba(245, 158, 11, 0.1);
  --fm-danger:        var(--fm-coral-500);
  --fm-danger-muted:  var(--fm-coral-muted);

  /* ── SURFACES (dark theme) ── */
  --fm-surface-1: #12123a;   /* page background */
  --fm-surface-2: #1a1a4a;   /* cards */
  --fm-surface-3: #22225a;   /* elevated cards */
  --fm-surface-4: #2a2a6a;   /* hover states */

  /* ── TEXT (dark theme) ── */
  --fm-text-primary:   #f0f0ff;
  --fm-text-secondary: #a0a0c8;
  --fm-text-muted:     #6060a0;

  /* ── BORDERS (dark theme) ── */
  --fm-border:         rgba(105, 105, 255, 0.12);
  --fm-border-strong:  rgba(105, 105, 255, 0.25);

  /* ── GRADIENTS ── */
  --fm-gradient-primary: linear-gradient(135deg, var(--fm-violet-500) 0%, var(--fm-violet-700) 100%);
  --fm-gradient-hero:    linear-gradient(135deg, var(--fm-navy-900) 0%, var(--fm-violet-950) 100%);
  --fm-gradient-warm:    linear-gradient(135deg, var(--fm-coral-500) 0%, var(--fm-orange-500) 100%);
  --fm-gradient-card:    linear-gradient(135deg, rgba(105,105,255,0.08) 0%, rgba(105,105,255,0.02) 100%);

  /* ── SHADOWS ── */
  --fm-shadow-sm:  0 2px 8px rgba(105, 105, 255, 0.12);
  --fm-shadow-md:  0 4px 20px rgba(105, 105, 255, 0.2);
  --fm-shadow-lg:  0 8px 40px rgba(105, 105, 255, 0.28);
  --fm-shadow-xl:  0 16px 60px rgba(105, 105, 255, 0.35);
  --fm-glow:       0 0 40px rgba(105, 105, 255, 0.4);

  /* ── RADIUS ── */
  --fm-radius-sm: 6px;
  --fm-radius:    10px;
  --fm-radius-md: 14px;
  --fm-radius-lg: 20px;
  --fm-radius-xl: 28px;

  /* ── TYPOGRAPHY ── */
  --fm-font: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --fm-font-mono: 'JetBrains Mono', 'Fira Code', monospace;
}

/* ── LIGHT THEME OVERRIDES ── */
[data-theme="light"], .light-mode {
  --fm-surface-1: #f5f5ff;
  --fm-surface-2: #ffffff;
  --fm-surface-3: #eeeeff;
  --fm-surface-4: #e4e4ff;
  --fm-text-primary:   #1a1a3c;
  --fm-text-secondary: #4a4a80;
  --fm-text-muted:     #8888b8;
  --fm-border:         rgba(105, 105, 255, 0.15);
  --fm-border-strong:  rgba(105, 105, 255, 0.3);
}

/* ═══════════════════════════════════════════════════════════════════
   UTILITY CLASSES
═══════════════════════════════════════════════════════════════════ */

/* Buttons */
.fm-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 0.6rem 1.4rem; border-radius: var(--fm-radius);
  font-family: var(--fm-font); font-size: 0.875rem; font-weight: 600;
  line-height: 1; border: none; cursor: pointer; transition: all 0.2s; text-decoration: none;
  white-space: nowrap;
}
.fm-btn-primary {
  background: var(--fm-gradient-primary); color: #fff;
  box-shadow: var(--fm-shadow-md);
}
.fm-btn-primary:hover { transform: translateY(-1px); box-shadow: var(--fm-shadow-lg); color: #fff; }
.fm-btn-primary:active { transform: translateY(0); }

.fm-btn-secondary {
  background: var(--fm-primary-muted); color: var(--fm-primary);
  border: 1px solid var(--fm-primary-border);
}
.fm-btn-secondary:hover { background: rgba(105,105,255,0.15); }

.fm-btn-ghost {
  background: transparent; color: var(--fm-text-secondary);
  border: 1px solid var(--fm-border);
}
.fm-btn-ghost:hover { border-color: var(--fm-border-strong); color: var(--fm-text-primary); }

.fm-btn-coral {
  background: var(--fm-gradient-warm); color: #fff;
  box-shadow: 0 4px 20px rgba(255, 90, 90, 0.3);
}
.fm-btn-coral:hover { transform: translateY(-1px); box-shadow: 0 6px 30px rgba(255,90,90,0.4); color: #fff; }

.fm-btn-sm { padding: 0.4rem 1rem; font-size: 0.8rem; }
.fm-btn-lg { padding: 0.875rem 2rem; font-size: 1rem; }
.fm-btn-xl { padding: 1rem 2.5rem; font-size: 1.05rem; }

/* Cards */
.fm-card {
  background: var(--fm-surface-2);
  border: 1px solid var(--fm-border);
  border-radius: var(--fm-radius-md);
  padding: 1.5rem;
  transition: all 0.2s;
}
.fm-card:hover { border-color: var(--fm-border-strong); box-shadow: var(--fm-shadow-sm); }
.fm-card-elevated { box-shadow: var(--fm-shadow-md); }

/* KPI tiles */
.fm-kpi {
  background: var(--fm-surface-2);
  border: 1px solid var(--fm-border);
  border-radius: var(--fm-radius-md);
  padding: 1.25rem 1.5rem;
}
.fm-kpi-num {
  font-size: 2rem; font-weight: 800; line-height: 1;
  color: var(--fm-primary);
}
.fm-kpi-label {
  font-size: 0.72rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--fm-text-muted); margin-top: 4px;
}
.fm-kpi-delta {
  font-size: 0.78rem; font-weight: 600;
  display: inline-flex; align-items: center; gap: 4px; margin-top: 6px;
}
.fm-kpi-delta.up   { color: var(--fm-success); }
.fm-kpi-delta.down { color: var(--fm-coral); }

/* Badges */
.fm-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 0.2rem 0.65rem; border-radius: 100px;
  font-size: 0.72rem; font-weight: 600;
}
.fm-badge-primary  { background: var(--fm-primary-muted); color: var(--fm-primary); border: 1px solid var(--fm-primary-border); }
.fm-badge-success  { background: var(--fm-success-muted); color: var(--fm-success); }
.fm-badge-warning  { background: var(--fm-warning-muted); color: var(--fm-warning); }
.fm-badge-danger   { background: var(--fm-coral-muted);   color: var(--fm-coral); }

/* Inputs */
.fm-input {
  width: 100%; padding: 0.75rem 1rem;
  background: var(--fm-surface-2);
  border: 1.5px solid var(--fm-border);
  border-radius: var(--fm-radius);
  color: var(--fm-text-primary);
  font-family: var(--fm-font); font-size: 0.9rem;
  transition: border-color 0.2s, box-shadow 0.2s;
  outline: none;
}
.fm-input:focus {
  border-color: var(--fm-primary);
  box-shadow: 0 0 0 3px var(--fm-primary-muted);
}
.fm-input::placeholder { color: var(--fm-text-muted); }

.fm-label {
  display: block; font-size: 0.75rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--fm-text-muted); margin-bottom: 0.4rem;
}

/* Sidebar overrides */
.app-sidebar, #layout-menu {
  background: var(--fm-navy-deep) !important;
  border-right: 1px solid var(--fm-border) !important;
}
.menu-item.active > .menu-link,
.menu-item .menu-link.active {
  background: var(--fm-primary-muted) !important;
  color: var(--fm-primary) !important;
}
.menu-item .menu-link:hover {
  background: rgba(105,105,255,0.06) !important;
  color: var(--fm-primary-light) !important;
}
.menu-item .menu-icon {
  color: var(--fm-text-muted) !important;
}
.menu-item.active .menu-icon,
.menu-item .menu-link.active .menu-icon {
  color: var(--fm-primary) !important;
}

/* Navbar overrides */
.layout-navbar {
  background: var(--fm-navy-surface) !important;
  border-bottom: 1px solid var(--fm-border) !important;
}

/* Dashboard hero bar */
.fm-hero-bar {
  background: var(--fm-gradient-hero);
  border-bottom: 1px solid var(--fm-border);
  padding: 1.5rem 2rem;
  position: relative; overflow: hidden;
}
.fm-hero-bar::before {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 60% 80% at 80% 50%, rgba(105,105,255,0.15) 0%, transparent 60%);
}

/* Tables */
.fm-table { width: 100%; border-collapse: collapse; }
.fm-table th {
  padding: 0.75rem 1rem; text-align: left;
  font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--fm-text-muted); border-bottom: 1px solid var(--fm-border);
}
.fm-table td {
  padding: 0.875rem 1rem; font-size: 0.875rem;
  border-bottom: 1px solid var(--fm-border); color: var(--fm-text-secondary);
}
.fm-table tr:hover td { background: var(--fm-primary-muted); }

/* Status dots */
.fm-status { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8rem; font-weight: 500; }
.fm-status::before { content: ''; width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.fm-status.online::before  { background: var(--fm-success); box-shadow: 0 0 6px var(--fm-success); }
.fm-status.away::before    { background: var(--fm-warning); }
.fm-status.offline::before { background: var(--fm-text-muted); }
.fm-status.alert::before   { background: var(--fm-coral); }

/* Logo classes */
.fm-logo-icon {
  width: 40px; height: 40px; border-radius: var(--fm-radius);
  background: var(--fm-gradient-primary);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--fm-shadow-md);
  overflow: hidden;
}
.fm-logo-icon img { width: 100%; height: 100%; object-fit: contain; padding: 4px; filter: brightness(0) invert(1); }

/* Gradient text utility */
.fm-text-gradient {
  background: linear-gradient(135deg, var(--fm-violet-400), var(--fm-coral-400));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.fm-text-brand {
  background: linear-gradient(135deg, var(--fm-violet-500), var(--fm-violet-300));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Override the generic blue vars platform-wide */
:root {
  --bs-primary:        #6969ff;
  --bs-primary-rgb:    105, 105, 255;
}
/* Snyncraft vendor theme overrides — point base colors to our violet */
:root {
  --vz-primary:        #6969ff;
  --vz-link-color:     #6969ff;
}