/**
 * VMHS Design System — county brand tokens
 * Trans Nzoia County · Customer Care HelpDesk
 * Primary brand: #B7670F (amber-burnt-sienna)
 */
:root {
  /* ── Fonts ──────────────────────────────────────────────────────── */
  --vmhs-font: "Public Sans", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --vmhs-display: "Fraunces", Georgia, serif;

  /* ── County brand ───────────────────────────────────────────────── */
  --vmhs-brand:          #b7670f;
  --vmhs-primary:        var(--vmhs-brand);
  --vmhs-primary-hover:  #92400e;
  --vmhs-primary-dark:   #7a3f0a;
  --vmhs-primary-light:  #fff8f0;
  --vmhs-primary-subtle: rgba(183, 103, 15, 0.10);
  --vmhs-brand-ring:     rgba(183, 103, 15, 0.20);
  --vmhs-brand-gradient-end: #d97706;

  /* PMTS-compatible aliases */
  --pmts-brand:             var(--vmhs-brand);
  --dashboard-brand:        var(--vmhs-brand);
  --dashboard-brand-dark:   var(--vmhs-primary-hover);
  --dashboard-brand-light:  var(--vmhs-primary-light);
  --dashboard-brand-ring:   var(--vmhs-brand-ring);
  --dashboard-surface:      #f5f7fa;
  --dashboard-panel-bg:     #ffffff;
  --dashboard-border:       #e4e8ee;
  --dashboard-border-strong:#c9d0da;
  --dashboard-text:         #0f1c2e;
  --dashboard-text-muted:   #5f6f84;

  /* ── Semantic accents ───────────────────────────────────────────── */
  --vmhs-secondary:       #2563eb;
  --vmhs-secondary-light: #dbeafe;
  --vmhs-secondary-subtle:rgba(37, 99, 235, 0.10);
  --vmhs-success:         #16a34a;
  --vmhs-success-light:   #dcfce7;
  --vmhs-warning:         #d97706;
  --vmhs-warning-light:   #fef3c7;
  --vmhs-danger:          #dc2626;
  --vmhs-danger-light:    #fee2e2;
  --vmhs-info:            #0891b2;
  --vmhs-info-light:      #cffafe;

  /* ── Status palette ─────────────────────────────────────────────── */
  --vmhs-status-completed:   #16a34a;
  --vmhs-status-ongoing:     #2563eb;
  --vmhs-status-stalled:     #dc2626;
  --vmhs-status-procurement: #0891b2;
  --vmhs-status-not-started: #64748b;

  /* ── Surface & typography ───────────────────────────────────────── */
  --vmhs-bg:           #f5f7fa;
  --vmhs-card-bg:      #ffffff;
  --vmhs-card-border:  rgba(15, 28, 46, 0.07);
  --vmhs-surface-muted:rgba(248, 250, 252, 0.95);
  --vmhs-text:         #0f1c2e;
  --vmhs-text-muted:   #4b5e72;
  --vmhs-text-muted-65:rgba(15, 28, 46, 0.60);

  /* ── Elevation ──────────────────────────────────────────────────── */
  --vmhs-shadow-xs: 0 1px 2px rgba(15, 28, 46, 0.05);
  --vmhs-shadow-sm: 0 1px 3px rgba(15, 28, 46, 0.06), 0 1px 2px rgba(15, 28, 46, 0.04);
  --vmhs-shadow:    0 4px 8px -2px rgba(15, 28, 46, 0.08), 0 2px 4px -2px rgba(15, 28, 46, 0.05);
  --vmhs-shadow-md: 0 12px 24px -6px rgba(15, 28, 46, 0.10), 0 4px 8px -4px rgba(15, 28, 46, 0.06);
  --vmhs-shadow-lg: 0 24px 48px -12px rgba(15, 28, 46, 0.14);
  --vmhs-shadow-hover: 0 20px 40px -8px rgba(15, 28, 46, 0.13);

  /* ── Border radii ───────────────────────────────────────────────── */
  --vmhs-radius-xs: 0.375rem;
  --vmhs-radius-sm: 0.5rem;
  --vmhs-radius:    0.75rem;
  --vmhs-radius-lg: 1rem;
  --vmhs-radius-xl: 1.25rem;
  --vmhs-radius-2xl:1.5rem;
  --vmhs-radius-full: 9999px;

  /* ── Navigation ─────────────────────────────────────────────────── */
  --vmhs-sidebar-active-bg:   var(--vmhs-primary-subtle);
  --vmhs-sidebar-active-text: var(--vmhs-brand);
  --vmhs-raise-ticket:        #dc2626;
  --vmhs-raise-ticket-hover:  #b91c1c;

  /* ── Public portal aliases ──────────────────────────────────────── */
  --vmhs-public-primary:       var(--vmhs-brand);
  --vmhs-public-primary-hover: var(--vmhs-primary-hover);
  --vmhs-public-primary-light: var(--vmhs-primary-light);
  --app-primary:               var(--vmhs-brand);

  /* ── Native / mobile grouped UI ────────────────────────────────── */
  --vmhs-native-bg:        #f2f2f7;
  --vmhs-native-group:     #ffffff;
  --vmhs-native-separator: rgba(60, 60, 67, 0.11);
  --vmhs-native-radius:    0.75rem;

  /* ── Channel accents ────────────────────────────────────────────── */
  --vmhs-channel-web:            #2563eb;
  --vmhs-channel-web-soft:       #dbeafe;
  --vmhs-channel-whatsapp:       #16a34a;
  --vmhs-channel-whatsapp-soft:  #dcfce7;
  --vmhs-channel-exec:           #7c3aed;
  --vmhs-channel-exec-soft:      #ede9fe;
  --vmhs-surface-waiting:        #fffbeb;
  --vmhs-surface-waiting-border: #fde68a;

  /* ── Charts ─────────────────────────────────────────────────────── */
  --vmhs-chart-1: #b7670f;
  --vmhs-chart-2: #6366f1;
  --vmhs-chart-3: #f59e0b;
  --vmhs-chart-4: #10b981;
  --vmhs-chart-5: #ef4444;
}

/* ── Bootstrap + Able Pro brand override (preset-1 = county orange) ── */
[data-pc-preset="preset-1"] {
  --bs-primary:       #b7670f;
  --bs-primary-rgb:   183, 103, 15;
  --bs-link-color:    #b7670f;
  --bs-link-hover-color: #92400e;
  --pc-sidebar-active-color: #b7670f;
  --dt-row-selected:  183, 103, 15;
}
[data-pc-preset="preset-1"] .btn-link {
  --bs-btn-color:        #b7670f;
  --bs-btn-hover-color:  #92400e;
  --bs-btn-active-color: #92400e;
}
[data-pc-preset="preset-1"] .link-primary        { color: #b7670f !important; }
[data-pc-preset="preset-1"] .link-primary:hover,
[data-pc-preset="preset-1"] .link-primary:focus   { color: #92400e !important; }

/* ── Base typography smoothing ──────────────────────────────────── */
.vmhs-app,
.vmhs-public.vmhs-app-shell {
  font-family: var(--vmhs-font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.vmhs-app .pc-content,
body[data-vmhs-theme] .pc-content {
  background: var(--vmhs-bg);
}

/* ── Staff dashboard button overrides ──────────────────────────── */
.vmhs-app .btn-primary,
body[data-vmhs-theme] .btn-primary {
  background: linear-gradient(160deg, var(--vmhs-brand-gradient-end) 0%, var(--vmhs-brand) 100%);
  border-color: var(--vmhs-brand);
  color: #fff;
}
.vmhs-app .btn-primary:hover,
body[data-vmhs-theme] .btn-primary:hover {
  background: var(--vmhs-primary-hover);
  border-color: var(--vmhs-primary-hover);
}
.vmhs-app .btn-outline-primary,
body[data-vmhs-theme] .btn-outline-primary {
  color: var(--vmhs-brand);
  border-color: var(--vmhs-brand);
}
.vmhs-app .btn-outline-primary:hover,
body[data-vmhs-theme] .btn-outline-primary:hover {
  background: var(--vmhs-primary-subtle);
  color: var(--vmhs-primary-hover);
  border-color: var(--vmhs-primary-hover);
}
.vmhs-app .text-primary,
body[data-vmhs-theme] .text-primary  { color: var(--vmhs-brand) !important; }
.vmhs-app .bg-primary,
body[data-vmhs-theme] .bg-primary    { background-color: var(--vmhs-brand) !important; }
.vmhs-app .bg-primary-subtle,
body[data-vmhs-theme] .bg-primary-subtle {
  background-color: var(--vmhs-primary-light) !important;
  color: var(--vmhs-primary-hover) !important;
}
.vmhs-app .border-primary,
body[data-vmhs-theme] .border-primary { border-color: var(--vmhs-brand) !important; }
.vmhs-app .alert-primary,
body[data-vmhs-theme] .alert-primary {
  background: var(--vmhs-primary-light);
  border-color: #fde68a;
  color: var(--vmhs-primary-hover);
}

/* ── Card defaults (staff dashboard) ───────────────────────────── */
.vmhs-app .card:not(.metric-card):not(.card-elevated),
body[data-vmhs-theme] .card:not(.metric-card):not(.card-elevated) {
  border-radius: var(--vmhs-radius-lg);
  border: 1px solid var(--vmhs-card-border);
  box-shadow: var(--vmhs-shadow-sm);
  background: var(--vmhs-card-bg);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.vmhs-desktop-shell .card:not(.metric-card):not(.card-elevated):hover,
.vmhs-app:not(.vmhs-desktop-shell) .card:not(.metric-card):not(.card-elevated):hover,
body[data-vmhs-theme] .card:not(.metric-card):not(.card-elevated):hover {
  box-shadow: var(--vmhs-shadow-md);
}

/* ── Tables ─────────────────────────────────────────────────────── */
.vmhs-app .table,
body[data-vmhs-theme] .table { color: var(--vmhs-text); }
.vmhs-app .table thead th,
body[data-vmhs-theme] .table thead th {
  font-weight: 700;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--vmhs-text-muted);
  border-bottom: 1px solid var(--vmhs-card-border);
  padding: 0.75rem 1rem;
}
.vmhs-app .table tbody td,
body[data-vmhs-theme] .table tbody td {
  padding: 0.875rem 1rem;
  vertical-align: middle;
}
.vmhs-app .table-hover tbody tr:hover,
body[data-vmhs-theme] .table-hover tbody tr:hover { background: var(--vmhs-primary-subtle); }
.vmhs-app .table-light thead,
body[data-vmhs-theme] .table-light thead { background: var(--vmhs-bg); }

/* ── Badges ─────────────────────────────────────────────────────── */
.vmhs-app .badge.bg-primary,
body[data-vmhs-theme] .badge.bg-primary { background: var(--vmhs-brand) !important; }
.vmhs-app .badge.bg-success,
body[data-vmhs-theme] .badge.bg-success { background: var(--vmhs-success) !important; }

/* ── Form focus ─────────────────────────────────────────────────── */
.vmhs-app .form-control:focus,
.vmhs-app .form-select:focus,
body[data-vmhs-theme] .form-control:focus,
body[data-vmhs-theme] .form-select:focus {
  border-color: var(--vmhs-brand);
  box-shadow: 0 0 0 3px var(--vmhs-brand-ring);
  outline: none;
}
.vmhs-app .form-label,
body[data-vmhs-theme] .form-label {
  color: var(--vmhs-text-muted);
  font-weight: 600;
}

/* ── Accent utilities ───────────────────────────────────────────── */
.vmhs-page-header-accent {
  display: inline-block;
  width: 2.75rem;
  height: 3px;
  margin-bottom: 0.75rem;
  border-radius: var(--vmhs-radius-full);
  background: linear-gradient(90deg, var(--vmhs-brand), var(--vmhs-brand-gradient-end));
}
.vmhs-branded-panel-header {
  border-left: 3px solid var(--vmhs-brand);
  background: linear-gradient(90deg, #fffbf5 0%, #ffffff 30%);
}
.vmhs-progress-bar {
  height: 0.5rem;
  border-radius: var(--vmhs-radius-full);
  background: #e4e8ee;
  overflow: hidden;
}
.vmhs-progress-bar > span,
.vmhs-progress-bar__fill {
  display: block;
  height: 100%;
  border-radius: var(--vmhs-radius-full);
  background: linear-gradient(90deg, var(--vmhs-primary-hover), var(--vmhs-brand));
}

/* ── Card tiers ─────────────────────────────────────────────────── */
.vmhs-app .card-flat,
body[data-vmhs-theme] .card-flat {
  border: 1px solid var(--vmhs-card-border) !important;
  border-radius: var(--vmhs-radius-lg) !important;
  box-shadow: none !important;
  background: var(--vmhs-card-bg) !important;
  transition: none !important;
}
.vmhs-app .card-elevated,
body[data-vmhs-theme] .card-elevated {
  border: 1px solid var(--vmhs-card-border) !important;
  border-radius: var(--vmhs-radius-lg) !important;
  box-shadow: var(--vmhs-shadow-sm) !important;
  background: var(--vmhs-card-bg) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.vmhs-desktop-shell .card-elevated:hover {
  transform: translateY(-1px);
  box-shadow: var(--vmhs-shadow) !important;
}
.vmhs-app .card-hero,
body[data-vmhs-theme] .card-hero {
  border: none !important;
  border-radius: var(--vmhs-radius-xl) !important;
  box-shadow: var(--vmhs-shadow-md) !important;
  overflow: hidden;
  background: var(--vmhs-card-bg) !important;
}