/* ================================================================
   ItsSuite — Bootstrap 5 theme overrides
   Indigo brand, refined components, modern spacing.
   Loaded after bootstrap.css in every server-rendered (non-island) page.
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* ---------- Bootstrap CSS variable overrides ---------- */
:root {
  --bs-primary:        #4F46E5;
  --bs-primary-rgb:    79, 70, 229;
  --bs-success:        #10B981;
  --bs-success-rgb:    16, 185, 129;
  --bs-warning:        #F59E0B;
  --bs-warning-rgb:    245, 158, 11;
  --bs-danger:         #EF4444;
  --bs-danger-rgb:     239, 68, 68;
  --bs-info:           #3B82F6;

  --brand-50:  #EEF2FF;
  --brand-100: #E0E7FF;
  --brand-200: #C7D2FE;
  --brand-300: #A5B4FC;
  --brand-400: #818CF8;
  --brand-500: #6366F1;
  --brand-600: #4F46E5;
  --brand-700: #4338CA;
  --brand-800: #3730A3;
  --brand-900: #312E81;

  --violet-50:  #F5F3FF;
  --violet-100: #EDE9FE;
  --violet-500: #8B5CF6;
  --violet-600: #7C3AED;
  --violet-700: #6D28D9;

  --bs-body-font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --bs-font-monospace:   'Inter', system-ui, -apple-system, sans-serif;
  --bs-body-color:       #0F172A;
  --bs-body-bg:          #F8FAFC;
  --bs-secondary-color:  #64748B;
  --bs-tertiary-color:   #94A3B8;

  --bs-border-radius:    .5rem;
  --bs-border-radius-sm: .375rem;
  --bs-border-radius-lg: .625rem;
  --bs-border-radius-xl: .875rem;
  --bs-border-color:     #E2E8F0;
}

body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* ---------- Refined components ---------- */
.card           { border-color: var(--bs-border-color); box-shadow: 0 1px 2px rgba(15,23,42,.04); }
.btn            { font-weight: 500; }
.btn-primary    {
  --bs-btn-bg: #4F46E5;        --bs-btn-border-color: #4F46E5;
  --bs-btn-hover-bg: #4338CA;  --bs-btn-hover-border-color: #4338CA;
  --bs-btn-active-bg: #3730A3; --bs-btn-active-border-color: #3730A3;
}
.btn-outline-primary {
  --bs-btn-color: #4F46E5;     --bs-btn-border-color: #4F46E5;
  --bs-btn-hover-bg: #4F46E5;  --bs-btn-hover-border-color: #4F46E5;
}
.btn-light {
  --bs-btn-bg: #F1F5F9;        --bs-btn-border-color: #F1F5F9;
  --bs-btn-hover-bg: #E2E8F0;  --bs-btn-hover-border-color: #E2E8F0;
}

.form-control, .form-select { font-size: .875rem; }
.form-control:focus, .form-select:focus {
  border-color: var(--brand-400);
  box-shadow: 0 0 0 .2rem rgba(79,70,229,.15);
}
.form-label { font-size: .75rem; font-weight: 500; color: #334155; margin-bottom: .375rem; }

.badge          { font-weight: 600; letter-spacing: .025em; }
.table          { font-size: .8125rem; }
.table > :not(caption) > * > * { padding: .65rem .75rem; }
.table > thead { background: #F8FAFC; }
.table > thead th { font-size: .6875rem; text-transform: uppercase; letter-spacing: .04em; color: var(--bs-secondary-color); font-weight: 600; }

/* Brand utilities */
.text-brand      { color: var(--brand-600) !important; }
.text-brand-200  { color: var(--brand-200) !important; }
.bg-brand        { background-color: var(--brand-600) !important; }
.bg-brand-50     { background-color: var(--brand-50) !important; }
.bg-brand-100    { background-color: var(--brand-100) !important; }
.border-brand    { border-color: var(--brand-600) !important; }
.text-violet     { color: var(--violet-700) !important; }
.bg-violet-50    { background-color: var(--violet-50) !important; }
.bg-violet-100   { background-color: var(--violet-100) !important; }

/* ---------- App shell (sidebar + main) ---------- */
.app-shell { display: flex; height: 100vh; overflow: hidden; }

.app-sidebar {
  width: 256px;
  background: #0F172A;
  color: #CBD5E1;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
}
.app-sidebar .sidebar-brand {
  height: 64px; padding: 0 1.25rem;
  display: flex; align-items: center;
  border-bottom: 1px solid #1E293B;
}
.app-sidebar .workspace-switcher {
  padding: .75rem; border-bottom: 1px solid #1E293B;
}
.app-sidebar .nav-link {
  color: #CBD5E1;
  padding: .5rem .75rem;
  border-radius: .375rem;
  font-size: .875rem;
  display: flex; align-items: center; gap: .625rem;
  margin-bottom: 2px;
}
.app-sidebar .nav-link:hover  { background: #1E293B; color: #fff; }
.app-sidebar .nav-link.active { background: rgba(79,70,229,.18); color: #fff; font-weight: 500; }
.app-sidebar .sidebar-footer  { padding: 1rem; border-top: 1px solid #1E293B; }

.app-main    { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-width: 0; }
.app-topbar  { height: 64px; background: #fff; border-bottom: 1px solid var(--bs-border-color); display: flex; align-items: center; padding: 0 1.5rem; gap: 1rem; flex-shrink: 0; }
.app-content { flex: 1; overflow-y: auto; }

/* ---------- Pills (compact status badges) ---------- */
.pill          { display: inline-flex; align-items: center; font-size: 10px; font-weight: 600; padding: 2px 6px; border-radius: 4px; letter-spacing: .025em; text-transform: uppercase; line-height: 1.2; }
.pill-success  { background: #D1FAE5; color: #047857; }
.pill-warning  { background: #FEF3C7; color: #92400E; }
.pill-danger   { background: #FEE2E2; color: #B91C1C; }
.pill-info     { background: #DBEAFE; color: #1D4ED8; }
.pill-brand    { background: var(--brand-50); color: var(--brand-700); }
.pill-violet   { background: var(--violet-100); color: var(--violet-700); }
.pill-slate    { background: #F1F5F9; color: #475569; }

/* ---------- Avatar ---------- */
.avatar    { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 50%; color: #fff; font-weight: 600; font-size: .75rem; flex-shrink: 0; }
.avatar-sm { width: 1.75rem; height: 1.75rem; font-size: .625rem; }
.avatar-lg { width: 2.5rem; height: 2.5rem; font-size: .875rem; }

.gradient-purple-pink   { background: linear-gradient(135deg, #C084FC, #EC4899); }
.gradient-blue-teal     { background: linear-gradient(135deg, #60A5FA, #2DD4BF); }
.gradient-emerald-cyan  { background: linear-gradient(135deg, #34D399, #22D3EE); }
.gradient-orange-red    { background: linear-gradient(135deg, #FB923C, #EF4444); }
.gradient-violet-fuchsia{ background: linear-gradient(135deg, #A78BFA, #E879F9); }
.gradient-amber-pink    { background: linear-gradient(135deg, #FBBF24, #EC4899); }
.gradient-brand         { background: linear-gradient(135deg, var(--brand-400), var(--brand-700)); }
.gradient-amber         { background: linear-gradient(135deg, #FCD34D, #F59E0B); }
.gradient-teal-emerald  { background: linear-gradient(135deg, #2DD4BF, #10B981); }

/* ---------- Brand gradient cards ---------- */
.brand-gradient-card {
  background: linear-gradient(135deg, #4F46E5 0%, #3730A3 70%, #312E81 100%);
  color: #fff;
  position: relative;
  overflow: hidden;
  border: 0;
}
.brand-gradient-card::before {
  content: ""; position: absolute;
  top: -80px; right: -80px; width: 200px; height: 200px;
  background: rgba(255,255,255,.08); border-radius: 50%;
}
.brand-gradient-card::after {
  content: ""; position: absolute;
  bottom: 0; right: 80px; width: 140px; height: 140px;
  background: rgba(255,255,255,.05); border-radius: 50%;
}
.brand-gradient-card > * { position: relative; }

/* ---------- Mobile bottom tab bar ---------- */
.mobile-tabbar {
  position: fixed; bottom: 0; left: 0; right: 0;
  background: #fff; border-top: 1px solid var(--bs-border-color);
  display: grid; grid-template-columns: repeat(5,1fr);
  z-index: 30;
}
.mobile-tabbar a {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 10px 0; color: #64748B; text-decoration: none; font-size: 10px; font-weight: 500;
  position: relative;
}
.mobile-tabbar a.active { color: var(--brand-600); }
.mobile-tabbar .tab-fab {
  background: var(--brand-600); color: #fff;
  width: 44px; height: 44px; border-radius: 50%;
  margin-top: -12px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 12px rgba(79,70,229,.4);
  border: 4px solid #fff;
}

/* ---------- Scrollbar ---------- */
.scroll-thin::-webkit-scrollbar       { width: 6px; height: 6px; }
.scroll-thin::-webkit-scrollbar-thumb { background: #CBD5E1; border-radius: 3px; }

/* ---------- Super-admin variant ---------- */
.super-admin .app-sidebar { background: linear-gradient(180deg, #020617 0%, #0F172A 100%); }
.super-admin-banner {
  height: 28px;
  background: #B91C1C;
  color: #fff;
  font-size: 11px; font-weight: 500;
  display: flex; align-items: center; justify-content: center; gap: .5rem;
}

/* ---------- Helpers ---------- */
.text-tiny    { font-size: .6875rem; }
/* `.text-mono` is kept as a class name for compatibility (used in 15+
   places for code / IDs / IPs / tokens) but DOES NOT load a monospace
   font. Inter renders these strings with tabular-nums + slashed-zero so
   digit columns line up and '0' can't be confused with '8' or 'O'. */
.text-mono,
.text-tabular,
.kpi-value,
code, pre, kbd, samp {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-variant-numeric: slashed-zero tabular-nums;
  font-feature-settings: "zero" 1, "tnum" 1;
}
.cursor-pointer { cursor: pointer; }
.divide-y > * + * { border-top: 1px solid var(--bs-border-color); }

/* KPI cards */
.kpi-card .kpi-label   { font-size: .75rem; color: var(--bs-secondary-color); font-weight: 500; }
.kpi-card .kpi-value   { font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; }
.kpi-card .kpi-delta   { font-size: .75rem; font-weight: 600; }
.kpi-card .kpi-delta-pos { color: #047857; }
.kpi-card .kpi-delta-neg { color: #B91C1C; }

/* Sparkline */
.sparkline { display: flex; align-items: flex-end; gap: 2px; height: 22px; }
.sparkline > div { flex: 1; border-radius: 2px 2px 0 0; }