/*
 * 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;
}

/* ============================================================
   Table row loading state

   A row whose link is mid-request. The row itself is named as the
   hx-indicator, so HTMX puts .htmx-request here rather than on the
   anchor — which is what lets the feedback be row-scale.

   Row scale matters in a long health table: a 16px spinner beside
   the store id is easy to lose track of when the eye has already
   moved down the column, and the CSR page it navigates to takes
   seconds to fan out across its backends. Without visible feedback
   the click reads as a no-op and people click again.

   Written here rather than as Tailwind classes because
   tailwind.config.js has no variant for .htmx-request, so this
   state cannot be expressed in the utility classes on the row.
   ============================================================ */

tr.htmx-request {
  background: rgb(var(--color-primary) / 0.08);
  box-shadow: inset 3px 0 0 0 rgb(var(--color-primary));
  cursor: progress;
}

/* Beats the row's own hover:bg-surface-hover — the pointer is by
   definition over this row, so without this the hover colour wins
   and the loading tint never shows. */
tr.htmx-request:hover {
  background: rgb(var(--color-primary) / 0.08);
}

/* A second click queues a second request against a page that is
   already loading. Blocking it is the point of showing the state. */
tr.htmx-request a {
  pointer-events: none;
}

/* ============================================================
   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;
  line-height: 1.25;
  border-radius: 9999px;
  border-width: 1px;
  border-style: solid;
  /* Never wrap. A two-word badge ("On time", "At risk") in a narrow column
     used to break across lines, and a 9999px radius on a two-line box renders
     as a circle rather than a pill. Keeping it on one line is what makes the
     radius read as intended — the column widens instead. */
  white-space: nowrap;
}
.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)); }

/* Two-line variant: a primary value above a smaller gloss. The base badge's
   0.125rem vertical padding is fine for one line and cramped for two, and a
   9999px radius on a two-line box reads as a lozenge rather than a pill.
   Declared after .status-badge so it wins the cascade regardless of where
   Tailwind's utilities land. */
.status-badge-stack {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  padding: 0.3125rem 0.625rem;
  line-height: 1.25;
  border-radius: 0.5rem;
  text-align: center;
  white-space: nowrap;
}
.status-badge-stack .sb-sub {
  font-size: 0.625rem;
  font-weight: 400;
  opacity: 0.85;
}