/* ==========================================================================
   Woodhouse — brand theme (plain CSS port)
   --------------------------------------------------------------------------
   Faithful port of the Tailwind v4 `brand.css` used by the quoting platform,
   expressed as plain CSS custom properties + component classes so it works
   without a build step. Token names and component class names are IDENTICAL
   to the Tailwind original, so the two tools stay in step: if a value changes
   there, change it here.

   Tailwind utilities have been expanded to their default v4 values, e.g.
     rounded-xl  -> 0.75rem        shadow-sm -> 0 1px 2px 0 rgb(0 0 0/.05)
     text-sm     -> .875rem/1.25   slate-200 -> #e2e8f0

   TYPEFACE: brand face is Arboria (commercial licence). Poppins is the free
   stand-in, loaded in index.html. If you licence Arboria, host the web fonts
   and change --font-sans below; nothing else needs to move.
   ========================================================================== */

:root {
  --font-sans: "Poppins", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;

  /* --- Core brand (Woodhouse Brand Guidelines 2026) ---------------------- */
  --color-wh-ink:   #03203a;   /* darkest — body text, primary ink            */
  --color-wh-navy:  #072c48;   /* primary brand navy — headers, secondary btn */
  --color-wh-blue:  #145798;   /* interactive blue — links, accents           */
  --color-wh-sky:   #84bcdb;   /* light blue — muted accents on dark          */
  --color-wh-ice:   #eef4fe;   /* palest tint — subtle fills, hovers          */

  /* --- Solar sub-brand --------------------------------------------------- */
  --color-wh-solar: #fcc000;   /* the accent — primary buttons, highlights    */
  --color-wh-lime:  #daf016;   /* secondary solar tint, sparingly             */

  /* --- Status / feedback ------------------------------------------------- */
  --color-wh-green: #01a539;

  /* --- Surfaces ---------------------------------------------------------- */
  --color-wh-surface: #f7f9fb;

  /* --- Data-visualisation palette ----------------------------------------
     Categorical colours for charts, validated for colour-blind separation.
     Use these for series identity — NOT the raw brand colours (solar is too
     light, sky too low chroma). Always pair a colour with a label.          */
  --color-wh-stream-solar:   #c99400;
  --color-wh-stream-ev:      #0d9488;
  --color-wh-stream-aircon:  #145798;
  --color-wh-stream-battery: #7c3aed;
  --color-wh-stream-boilers: #be123c;

  --color-wh-series-1: #145798;
  --color-wh-series-2: #01a539;

  /* --- Neutrals (Tailwind slate, used by the components below) ----------- */
  --slate-100: #f1f5f9;
  --slate-200: #e2e8f0;
  --slate-300: #cbd5e1;
  --slate-400: #94a3b8;
  --slate-500: #64748b;
  --slate-700: #334155;

  /* --- Shadows (Tailwind defaults) --------------------------------------- */
  --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);

  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;
}

/* --------------------------------------------------------------------------
   BASE
   -------------------------------------------------------------------------- */
html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body {
  font-family: var(--font-sans);
  background-color: var(--color-wh-surface);
  color: var(--color-wh-ink);
}

/* --------------------------------------------------------------------------
   COMPONENTS
   The recurring patterns from the quoting platform. Reach for these first so
   the tools read as one product; drop to bespoke CSS for one-offs.
   -------------------------------------------------------------------------- */

/* Surface card — default container for any panel of content */
.wh-card {
  border-radius: var(--radius-xl);
  border: 1px solid var(--slate-200);
  background: #fff;
  padding: 1.25rem;
  box-shadow: var(--shadow-sm);
}

/* Buttons ----------------------------------------------------------------- */
.wh-btn-primary,
.wh-btn-secondary,
.wh-btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--font-sans);
  cursor: pointer;
  border: none;
  white-space: nowrap;
}

/* Primary: the solar accent. One clear primary action per view. */
.wh-btn-primary {
  border-radius: var(--radius-xl);
  background: var(--color-wh-solar);
  padding: 0.75rem 1.25rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
  color: var(--color-wh-ink);
  box-shadow: var(--shadow-md);
  transition: transform .15s ease, box-shadow .15s ease;
}
.wh-btn-primary:hover { transform: scale(1.01); box-shadow: var(--shadow-lg); }

/* Secondary: navy. Confirmations, saves, adds. */
.wh-btn-secondary {
  border-radius: var(--radius-lg);
  background: var(--color-wh-navy);
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  color: #fff;
  transition: background-color .15s ease;
}
.wh-btn-secondary:hover { background: var(--color-wh-ink); }

/* Ghost: low-emphasis, sits on the surface. */
.wh-btn-ghost {
  border-radius: var(--radius-lg);
  background: transparent;
  padding: 0.5rem 0.75rem;
  gap: 0.375rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  color: var(--slate-500);
  transition: background-color .15s ease, color .15s ease;
}
.wh-btn-ghost:hover { background: var(--slate-100); color: var(--color-wh-ink); }

.wh-btn-primary:disabled,
.wh-btn-secondary:disabled,
.wh-btn-ghost:disabled { opacity: .45; cursor: not-allowed; transform: none; }

/* Status pill — base + one status colour class alongside ------------------- */
.wh-pill {
  display: inline-flex;
  align-items: center;
  border-radius: 9999px;
  padding: 0.125rem 0.625rem;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 500;
  white-space: nowrap;
}
.wh-pill-new      { background: var(--color-wh-ice); color: var(--color-wh-blue); }
.wh-pill-progress { background: #ede9fe; color: #6d28d9; }
.wh-pill-review   { background: #ccfbf1; color: #0f766e; }
.wh-pill-pending  { background: #fef3c7; color: #b45309; }
.wh-pill-success  { background: #dcfce7; color: #15803d; }
.wh-pill-muted    { background: var(--slate-200); color: var(--slate-500); }
/* Addition for this tool: RAG red. The shared palette has no danger pill —
   if it gains one upstream, adopt that instead. */
.wh-pill-danger   { background: #fee2e2; color: #b91c1c; }

/* Form field + label ------------------------------------------------------ */
.wh-input {
  width: 100%;
  border-radius: var(--radius-xl);
  border: 2px solid transparent;
  background: #fff;
  padding: 0.75rem 1rem;
  font-family: var(--font-sans);
  font-size: 15px;
  color: var(--color-wh-ink);
  box-shadow: var(--shadow-sm);
  outline: none;
  transition: border-color .15s ease;
}
.wh-input:focus { border-color: var(--color-wh-solar); }

/* Denser variant for admin/internal tools */
.wh-input-sm {
  width: 100%;
  border-radius: var(--radius-lg);
  border: 1px solid var(--slate-300);
  background: #fff;
  padding: 0.5rem 0.75rem;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: var(--color-wh-ink);
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.wh-input-sm:focus {
  border-color: var(--color-wh-blue);
  box-shadow: 0 0 0 2px rgb(20 87 152 / 0.2);
}

.wh-label {
  display: block;
  margin-bottom: 0.25rem;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--slate-400);
}

/* KPI / stat tile — big number over a muted label -------------------------- */
.wh-stat {
  border-radius: var(--radius-xl);
  border: 1px solid var(--slate-200);
  background: #fff;
  padding: 1.25rem;
  box-shadow: var(--shadow-sm);
}
.wh-stat-value {
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--color-wh-ink);
}