/*
 * Brevvie Theme System
 *
 * All colors are defined as CSS custom properties using raw RGB values.
 * Tailwind references these via tailwind.config.js, so you get:
 *   bg-primary, text-primary, border-primary, hover:bg-primary, etc.
 *
 * To change the entire app's look: swap the values below.
 * To support per-tenant theming: add [data-theme="bluerhino"] selectors.
 *
 * WHY RGB values without rgb()? Because Tailwind needs raw channel values
 * to support opacity modifiers like bg-primary/50. If we stored "rgb(249,208,39)"
 * Tailwind couldn't do bg-primary/50 → rgba(249,208,39,0.5).
 *
 * OPACITY CONTROL — use any root color with an alpha value:
 *   rgb(var(--color-primary) / 0.5)      → 50% opacity yellow
 *   rgb(var(--color-background) / 0.8)   → 80% opacity page bg
 *   rgb(var(--color-border-strong) / 0.7) → same as rgba(156,163,175,0.7)
 *   Works in any CSS property: background, border, box-shadow, color, etc.
 */

/* ============================================================
   Default Theme (Brevvie)
   ============================================================ */
:root {
  /* Brand colors */
  --color-primary: 202 138 4;        /* #ca8a04 — yellow-600 */
  --color-primary-hover: 161 98 7;   /* #a16207 — yellow-700 */
  --color-primary-active: 133 77 14; /* #854d0e — yellow-800 */
  --color-secondary: 79 81 81;       /* #4f5151 — dark gray */
  --color-accent: 59 130 246;        /* #3b82f6 — blue-500 for links/actions */

  /* Neutral palette */
  --color-surface: 255 255 255;      /* #ffffff — cards, modals */
  --color-background: 242 242 242;          /* #f2f2f2 — page background */
  --color-border: 209 213 219;       /* #d1d5db — gray-300 */
  --color-border-strong: 107 114 128; /* #6b7280 — gray-500 */

  /* Text */
  --color-text: 55 65 81;            /* #374151 — gray-700, body text */
  --color-text-muted: 107 114 128;   /* #6b7280 — gray-500, secondary text */
  --color-text-faint: 156 163 175;   /* #9ca3af — gray-400, placeholders */
  --color-text-inverse: 255 255 255; /* #ffffff — on dark backgrounds */

  /* Semantic */
  --color-success: 21 128 61;          /* #15803d — green-700 */
  --color-success-hover: 20 83 45;     /* #14532d — green-900 (border: 100 darker) */
  --color-warning: 245 158 11;         /* #f59e0b — amber-500 */
  --color-warning-hover: 217 119 6;    /* #d97706 — amber-600 (border: 100 darker) */
  --color-danger: 239 68 68;           /* #ef4444 — red-500 */
  --color-danger-hover: 220 38 38;     /* #dc2626 — red-600  (border: 100 darker) */
  --color-info: 59 130 246;            /* #3b82f6 — blue-500 */
  --color-info-hover: 37 99 235;       /* #2563eb — blue-600 (border: 100 darker) */

  /* Semantic subtle (light backgrounds for KPI cards, callouts) */
  --color-success-subtle: 220 252 231; /* #dcfce7 — green-100 */
  --color-warning-subtle: 255 251 235; /* #fffbeb — amber-50 */
  --color-danger-subtle:  254 242 242; /* #fef2f2 — red-50 */
  --color-info-subtle:    239 246 255; /* #eff6ff — blue-50 */

  /* Surface variants */
  --color-surface-muted:    250 250 250; /* #fafafa — table thead, empty states */
  --color-surface-hover:    244 244 245; /* #f4f4f5 — table row hover */
  --color-surface-disabled: 229 231 235; /* #e5e7eb — gray-200, disabled controls */
  --color-surface-border:   229 231 235; /* #e5e7eb — gray-200, border 100-darker than gray-100 bg */

  /* On-color — text placed on top of the primary background */
  --color-on-primary: 255 255 255;   /* #ffffff — white on Brevvie yellow */

  /* Spacing & sizing */
  --header-height: 4rem;
  --sidebar-width: 16rem;
  --footer-height: 2.5rem;
  --content-max-width: 80rem;

  /* Typography */
  --font-sans: 'Inter', 'Lato', system-ui, -apple-system, sans-serif;

  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);

  /* Border radius */
  --radius-sm: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;
}

/* ============================================================
   Per-Tenant Theme Overrides
   ============================================================
   Apply via <html data-theme="bluerhino"> in layout.py
   based on session scope/company.
   ============================================================ */

[data-theme="propane"] {
  /* Primary inherits yellow-600 from :root — override here to re-brand propane */
}

/* ============================================================
   Base Styles
   ============================================================ */

*, *::before, *::after {
  box-sizing: border-box;
}

html {
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Safe area insets for iOS notch */
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

body {
  background-color: rgb(var(--color-background));
  color: rgb(var(--color-text));
  min-height: 100dvh;
}

/* ============================================================
   HTMX Component-Level Indicators
   ============================================================
   Usage: place an element with class "htmx-indicator" next to or
   inside the HTMX trigger, then point to it with hx-indicator.
   HTMX adds .htmx-request to the indicator during the request.
   ============================================================ */

.htmx-indicator {
  display: none;
}

.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
  display: inline-flex;
}

/* Inline spinner (used inside buttons, next to forms, etc.) */
.htmx-spinner {
  width: 1.25rem;
  height: 1.25rem;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
  opacity: 0.8;
}

.htmx-spinner.sm {
  width: 1rem;
  height: 1rem;
}

.htmx-spinner.lg {
  width: 1.5rem;
  height: 1.5rem;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ============================================================
   Section Loading Overlay
   ============================================================
   Shows a semi-transparent overlay with spinner when a dashboard
   section is re-fetching data (e.g. after Apply filter).
   HTMX adds .htmx-request to the element with hx-* attrs during
   the request. The overlay is a child of that element.
   ============================================================ */

.section-loading-overlay {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 20;
  background: rgb(var(--color-border-strong) / 0.7);
  border-radius: var(--radius-xl);
  align-items: center;
  justify-content: center;
}

.htmx-request .section-loading-overlay {
  display: flex;
}

/* ============================================================
   Scrollbar Styling
   ============================================================ */

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgb(var(--color-border-strong));
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgb(var(--color-text-muted));
}

/* ============================================================
   Status Badge CSS Classes — for JS-rendered content
   ============================================================
   Use these class names in JavaScript instead of building raw
   Tailwind color strings. Keeps JS free of hardcoded colors.

   Usage in JS:
     '<span class="status-badge status-badge-warning">' + text + '</span>'
   ============================================================ */

.status-badge {
  display: inline-block;
  padding: 0.125rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 500;
  border-radius: 9999px;
  border-width: 1px;
  border-style: solid;
}
.status-badge-success { background: rgb(var(--color-success-subtle)); color: rgb(var(--color-success));    border-color: rgb(var(--color-success) / 0.4); }
.status-badge-warning { background: rgb(var(--color-warning-subtle)); color: rgb(var(--color-warning));    border-color: rgb(var(--color-warning) / 0.4); }
.status-badge-danger  { background: rgb(var(--color-danger-subtle));  color: rgb(var(--color-danger));     border-color: rgb(var(--color-danger)  / 0.4); }
.status-badge-info    { background: rgb(var(--color-info-subtle));    color: rgb(var(--color-info));       border-color: rgb(var(--color-info)    / 0.4); }
.status-badge-neutral { background: rgb(var(--color-surface-muted));  color: rgb(var(--color-text-muted)); border-color: rgb(var(--color-border)); }