/*
 * NorthernSpark theme "default": the look of the admin panel and customer dashboard.
 *
 * A theme is a folder in public/themes/ with these files:
 *   app.css      the panel (every page that uses the app or auth layouts)
 *   billing.css  public invoice pages (pay, receipt, billing sign-up) and the invite page
 *   signup.css   public sign-up (checkout, success)
 *   welcome.css  the landing page
 * Pick a theme with HOSTING_THEME in .env (default: "default"). A theme that leaves a file
 * out uses the default theme's copy. No build step: these are served as they are.
 *
 * Tailwind's classes (bg-white, text-zinc-500, ...) read the palette below, so changing a
 * colour here changes it everywhere it's used. Rules sit in the same cascade layers as
 * before (theme, base, unlayered), so they win and lose exactly as they did.
 */

/* ---- Palette (Tailwind colour variables; values as built) ---- */
@layer theme {
    :root, :host {
        --font-sans:"Instrument Sans",ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
        --font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
        --color-red-50:oklch(97.1% .013 17.38);
        --color-red-100:oklch(93.6% .032 17.717);
        --color-red-200:oklch(88.5% .062 18.334);
        --color-red-300:oklch(80.8% .114 19.571);
        --color-red-400:oklch(70.4% .191 22.216);
        --color-red-500:oklch(63.7% .237 25.331);
        --color-red-600:oklch(57.7% .245 27.325);
        --color-red-700:oklch(50.5% .213 27.518);
        --color-red-800:oklch(44.4% .177 26.899);
        --color-red-900:oklch(39.6% .141 25.723);
        --color-orange-50:oklch(98% .016 73.684);
        --color-orange-200:oklch(90.1% .076 70.697);
        --color-orange-300:oklch(83.7% .128 66.29);
        --color-orange-400:oklch(75% .183 55.934);
        --color-orange-500:oklch(70.5% .213 47.604);
        --color-orange-600:oklch(64.6% .222 41.116);
        --color-orange-700:oklch(55.3% .195 38.402);
        --color-orange-800:oklch(47% .157 37.304);
        --color-orange-950:oklch(26.6% .079 36.259);
        --color-amber-50:oklch(98.7% .022 95.277);
        --color-amber-100:oklch(96.2% .059 95.617);
        --color-amber-200:oklch(92.4% .12 95.746);
        --color-amber-300:oklch(87.9% .169 91.605);
        --color-amber-400:oklch(82.8% .189 84.429);
        --color-amber-500:oklch(76.9% .188 70.08);
        --color-amber-600:oklch(66.6% .179 58.318);
        --color-amber-700:oklch(55.5% .163 48.998);
        --color-amber-800:oklch(47.3% .137 46.201);
        --color-amber-900:oklch(41.4% .112 45.904);
        --color-amber-950:oklch(27.9% .077 45.635);
        --color-yellow-50:oklch(98.7% .026 102.212);
        --color-yellow-200:oklch(94.5% .129 101.54);
        --color-yellow-300:oklch(90.5% .182 98.111);
        --color-yellow-400:oklch(85.2% .199 91.936);
        --color-yellow-500:oklch(79.5% .184 86.047);
        --color-yellow-600:oklch(68.1% .162 75.834);
        --color-yellow-700:oklch(55.4% .135 66.442);
        --color-yellow-800:oklch(47.6% .114 61.907);
        --color-yellow-950:oklch(28.6% .066 53.813);
        --color-lime-50:oklch(98.6% .031 120.757);
        --color-lime-200:oklch(93.8% .127 124.321);
        --color-lime-300:oklch(89.7% .196 126.665);
        --color-lime-400:oklch(84.1% .238 128.85);
        --color-lime-500:oklch(76.8% .233 130.85);
        --color-lime-600:oklch(64.8% .2 131.684);
        --color-lime-700:oklch(53.2% .157 131.589);
        --color-lime-800:oklch(45.3% .124 130.933);
        --color-lime-900:oklch(40.5% .101 131.063);
        --color-lime-950:oklch(27.4% .072 132.109);
        --color-green-50:oklch(98.2% .018 155.826);
        --color-green-100:oklch(96.2% .044 156.743);
        --color-green-200:oklch(92.5% .084 155.995);
        --color-green-300:oklch(87.1% .15 154.449);
        --color-green-400:oklch(79.2% .209 151.711);
        --color-green-500:oklch(72.3% .219 149.579);
        --color-green-600:oklch(62.7% .194 149.214);
        --color-green-700:oklch(52.7% .154 150.069);
        --color-green-800:oklch(44.8% .119 151.328);
        --color-emerald-50:oklch(97.9% .021 166.113);
        --color-emerald-100:oklch(95% .052 163.051);
        --color-emerald-200:oklch(90.5% .093 164.15);
        --color-emerald-300:oklch(84.5% .143 164.978);
        --color-emerald-400:oklch(76.5% .177 163.223);
        --color-emerald-500:oklch(69.6% .17 162.48);
        --color-emerald-600:oklch(59.6% .145 163.225);
        --color-emerald-700:oklch(50.8% .118 165.612);
        --color-emerald-800:oklch(43.2% .095 166.913);
        --color-emerald-900:oklch(37.8% .077 168.94);
        --color-emerald-950:oklch(26.2% .051 172.552);
        --color-teal-50:oklch(98.4% .014 180.72);
        --color-teal-200:oklch(91% .096 180.426);
        --color-teal-300:oklch(85.5% .138 181.071);
        --color-teal-400:oklch(77.7% .152 181.912);
        --color-teal-500:oklch(70.4% .14 182.503);
        --color-teal-600:oklch(60% .118 184.704);
        --color-teal-800:oklch(43.7% .078 188.216);
        --color-cyan-50:oklch(98.4% .019 200.873);
        --color-cyan-200:oklch(91.7% .08 205.041);
        --color-cyan-300:oklch(86.5% .127 207.078);
        --color-cyan-400:oklch(78.9% .154 211.53);
        --color-cyan-500:oklch(71.5% .143 215.221);
        --color-cyan-600:oklch(60.9% .126 221.723);
        --color-cyan-800:oklch(45% .085 224.283);
        --color-sky-50:oklch(97.7% .013 236.62);
        --color-sky-200:oklch(90.1% .058 230.902);
        --color-sky-300:oklch(82.8% .111 230.318);
        --color-sky-400:oklch(74.6% .16 232.661);
        --color-sky-500:oklch(68.5% .169 237.323);
        --color-sky-600:oklch(58.8% .158 241.966);
        --color-sky-700:oklch(50% .134 242.749);
        --color-sky-800:oklch(44.3% .11 240.79);
        --color-sky-900:oklch(39.1% .09 240.876);
        --color-sky-950:oklch(29.3% .066 243.157);
        --color-blue-50:oklch(97% .014 254.604);
        --color-blue-200:oklch(88.2% .059 254.128);
        --color-blue-300:oklch(80.9% .105 251.813);
        --color-blue-400:oklch(70.7% .165 254.624);
        --color-blue-500:oklch(62.3% .214 259.815);
        --color-blue-600:oklch(54.6% .245 262.881);
        --color-blue-700:oklch(48.8% .243 264.376);
        --color-blue-800:oklch(42.4% .199 265.638);
        --color-blue-900:oklch(37.9% .146 265.522);
        --color-indigo-50:oklch(96.2% .018 272.314);
        --color-indigo-200:oklch(87% .065 274.039);
        --color-indigo-300:oklch(78.5% .115 274.713);
        --color-indigo-400:oklch(67.3% .182 276.935);
        --color-indigo-500:oklch(58.5% .233 277.117);
        --color-indigo-600:oklch(51.1% .262 276.966);
        --color-indigo-700:oklch(45.7% .24 277.023);
        --color-indigo-800:oklch(39.8% .195 277.366);
        --color-violet-50:oklch(96.9% .016 293.756);
        --color-violet-200:oklch(89.4% .057 293.283);
        --color-violet-300:oklch(81.1% .111 293.571);
        --color-violet-400:oklch(70.2% .183 293.541);
        --color-violet-500:oklch(60.6% .25 292.717);
        --color-violet-600:oklch(54.1% .281 293.009);
        --color-violet-700:oklch(49.1% .27 292.581);
        --color-violet-800:oklch(43.2% .232 292.759);
        --color-purple-50:oklch(97.7% .014 308.299);
        --color-purple-200:oklch(90.2% .063 306.703);
        --color-purple-300:oklch(82.7% .119 306.383);
        --color-purple-400:oklch(71.4% .203 305.504);
        --color-purple-500:oklch(62.7% .265 303.9);
        --color-purple-600:oklch(55.8% .288 302.321);
        --color-purple-700:oklch(49.6% .265 301.924);
        --color-purple-800:oklch(43.8% .218 303.724);
        --color-fuchsia-50:oklch(97.7% .017 320.058);
        --color-fuchsia-200:oklch(90.3% .076 319.62);
        --color-fuchsia-300:oklch(83.3% .145 321.434);
        --color-fuchsia-400:oklch(74% .238 322.16);
        --color-fuchsia-500:oklch(66.7% .295 322.15);
        --color-fuchsia-600:oklch(59.1% .293 322.896);
        --color-fuchsia-700:oklch(51.8% .253 323.949);
        --color-fuchsia-800:oklch(45.2% .211 324.591);
        --color-pink-50:oklch(97.1% .014 343.198);
        --color-pink-200:oklch(89.9% .061 343.231);
        --color-pink-300:oklch(82.3% .12 346.018);
        --color-pink-400:oklch(71.8% .202 349.761);
        --color-pink-500:oklch(65.6% .241 354.308);
        --color-pink-600:oklch(59.2% .249 .584);
        --color-pink-700:oklch(52.5% .223 3.958);
        --color-pink-800:oklch(45.9% .187 3.815);
        --color-rose-50:oklch(96.9% .015 12.422);
        --color-rose-200:oklch(89.2% .058 10.001);
        --color-rose-300:oklch(81% .117 11.638);
        --color-rose-400:oklch(71.2% .194 13.428);
        --color-rose-500:oklch(64.5% .246 16.439);
        --color-rose-600:oklch(58.6% .253 17.585);
        --color-rose-700:oklch(51.4% .222 16.935);
        --color-rose-800:oklch(45.5% .188 13.697);
        --color-slate-800:oklch(27.9% .041 260.031);
        --color-gray-50:oklch(98.5% .002 247.839);
        --color-gray-100:oklch(96.7% .003 264.542);
        --color-gray-200:oklch(92.8% .006 264.531);
        --color-gray-300:oklch(87.2% .01 258.338);
        --color-gray-400:oklch(70.7% .022 261.325);
        --color-gray-500:oklch(55.1% .027 264.364);
        --color-gray-600:oklch(44.6% .03 256.802);
        --color-gray-700:oklch(37.3% .034 259.733);
        --color-gray-800:oklch(27.8% .033 256.848);
        --color-zinc-50:#fafafa;
        --color-zinc-100:#f5f5f5;
        --color-zinc-200:#e5e5e5;
        --color-zinc-300:#d4d4d4;
        --color-zinc-400:#a3a3a3;
        --color-zinc-500:#737373;
        --color-zinc-600:#525252;
        --color-zinc-700:#404040;
        --color-zinc-800:#262626;
        --color-zinc-900:#171717;
        --color-zinc-950:#0a0a0a;
        --color-neutral-100:oklch(97% 0 0);
        --color-neutral-200:oklch(92.2% 0 0);
        --color-neutral-700:oklch(37.1% 0 0);
        --color-neutral-800:oklch(26.9% 0 0);
        --color-neutral-900:oklch(20.5% 0 0);
        --color-neutral-950:oklch(14.5% 0 0);
        --color-stone-800:oklch(26.8% .007 34.298);
        --color-stone-950:oklch(14.7% .004 49.25);
        --color-black:#000;
        --color-white:#fff;
        --radius-sm:.25rem;
        --radius-md:.375rem;
        --radius-lg:.5rem;
        --radius-xl:.75rem;
        --color-accent:var(--color-neutral-800);
        --color-accent-content:var(--color-neutral-800);
        --color-accent-foreground:var(--color-white);
    }

    .dark {
        --color-accent: var(--color-white);
        --color-accent-content: var(--color-white);
        --color-accent-foreground: var(--color-neutral-800);
    }
}

/* ---- Status colours used by the panel's own classes (ns-*) ---- */
:root {
    --ns-ok: #15803d;            /* text and buttons: green */
    --ns-ok-strong: #166534;
    --ns-warn: #b45309;          /* amber */
    --ns-warn-strong: #92400e;
    --ns-bad: #dc2626;           /* red */
    --ns-bad-strong: #b91c1c;
    --ns-muted: #71717a;

    --ns-ok-border: #bbf7d0;     /* notices, pills, panels */
    --ns-ok-bg: #f0fdf4;
    --ns-ok-text: #166534;
    --ns-warn-border: #fde68a;
    --ns-warn-bg: #fffbeb;
    --ns-warn-text: #92400e;
    --ns-bad-border: #fecaca;
    --ns-bad-bg: #fef2f2;
    --ns-bad-text: #991b1b;
    --ns-neutral-border: #e4e4e7;
    --ns-neutral-bg: #fafafa;
    --ns-neutral-text: #3f3f46;
    --ns-tag-bg: #f4f4f5;

    --ns-meter-ok: #16a34a;      /* usage and progress bars */
    --ns-meter-warn: #f59e0b;
    --ns-meter-bad: #dc2626;
    --ns-meter-failed: #ef4444;
    --ns-meter-none: #d4d4d8;
    --ns-meter-marker: #3f3f46;

    --ns-accent: #2563eb;        /* selected tab, selected choice */
    --ns-accent-text: #1d4ed8;
    --ns-accent-bg: #eff6ff;
    --ns-tab-text: #52525b;

    --ns-code-bg: #18181b;       /* config and log boxes */
    --ns-code-text: #f4f4f5;
    --ns-flash: #fcd34d;         /* a field the page points you to */
}

/* ---- Buttons and inputs ---- */
@layer base {
    .btn {
        cursor: pointer;
        padding-inline: calc(var(--spacing) * 4);
        padding-block: calc(var(--spacing) * 2);
        --tw-font-weight: var(--font-weight-bold);
        font-weight: var(--font-weight-bold);
        border-radius: .25rem;
    }
    .btn-xs {
        font-size: var(--text-sm);
        line-height: var(--tw-leading, var(--text-sm--line-height));
    }
    .btn-primary { background-color: var(--color-blue-500); color: var(--color-white); }
    .btn-primary:hover { background-color: var(--color-blue-700); }
    .btn-secondary { background-color: var(--color-gray-500); color: var(--color-white); }
    .btn-secondary:hover { background-color: var(--color-gray-700); }
    .btn-success { background-color: var(--color-green-500); color: var(--color-white); }
    .btn-success:hover { background-color: var(--color-green-700); }
    .btn-danger { background-color: var(--color-red-500); color: var(--color-white); }
    .btn-danger:hover { background-color: var(--color-red-700); }
    .btn-warning { background-color: var(--color-yellow-500); color: var(--color-white); }
    .btn-warning:hover { background-color: var(--color-yellow-700); }

    .input,
    .input-bordered {
        border-radius: var(--radius-md);
        border-style: var(--tw-border-style);
        border-width: 1px;
        border-color: var(--color-zinc-300);
        background-color: var(--color-white);
        padding-inline: calc(var(--spacing) * 3);
        padding-block: calc(var(--spacing) * 2);
    }
    textarea.input,
    textarea.input-bordered { min-height: calc(var(--spacing) * 24); }
    select.input,
    select.input-bordered { background-color: var(--color-white); }
}

/* ---- Copy-to-clipboard tooltip ---- */
.copyable {
    cursor: pointer;
    position: relative;
}
.copied-tooltip {
    opacity: 0;
    transition: opacity 0.25s;
    pointer-events: none;
    position: absolute;
    right: 0.5rem;
    top: 0.2rem;
    background: #222;
    color: #fff;
    border-radius: 4px;
    padding: 2px 8px;
    font-size: 12px;
    z-index: 2;
}
.copied-tooltip.visible { opacity: 1; }

/* ---- Admin dashboard grid ---- */
.dash-grid-6,
.dash-grid-3,
.dash-grid-2 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}
@media (min-width: 900px) {
    .dash-grid-6 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.75rem;
    }
    .dash-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dash-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dash-span-2 { grid-column: span 2 / span 2; }
}
@media (min-width: 1280px) {
    .dash-grid-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .dash-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/*
 * ---- Panel classes (ns-*) ----
 * These replaced inline styles, and are unlayered so they still win over Tailwind's
 * classes the way the inline styles did.
 */

/* Coloured notices, pills and panels */
.ns-tone-ok { border-color: var(--ns-ok-border); background: var(--ns-ok-bg); color: var(--ns-ok-text); }
.ns-tone-warn { border-color: var(--ns-warn-border); background: var(--ns-warn-bg); color: var(--ns-warn-text); }
.ns-tone-bad { border-color: var(--ns-bad-border); background: var(--ns-bad-bg); color: var(--ns-bad-text); }
.ns-tone-neutral { border-color: var(--ns-neutral-border); background: var(--ns-neutral-bg); color: var(--ns-neutral-text); }
.ns-panel-ok { border-color: var(--ns-ok-border); background: var(--ns-ok-bg); }
.ns-panel-warn { border-color: var(--ns-warn-border); background: var(--ns-warn-bg); }
.ns-panel-bad { border-color: var(--ns-bad-border); background: var(--ns-bad-bg); }
.ns-tag-warn { background: var(--ns-warn-bg); color: var(--ns-warn-text); }
.ns-tag-muted { background: var(--ns-tag-bg); color: var(--ns-muted); }
.ns-border-warn { border-color: var(--ns-meter-warn); }

/* Coloured text */
.ns-text-ok { color: var(--ns-ok); }
.ns-text-warn { color: var(--ns-warn); }
.ns-text-bad { color: var(--ns-bad); }
.ns-text-muted { color: var(--ns-muted); }
.ns-text-inherit { color: inherit; }

/* Buttons whose colour shows a status (Site Image, Resource Limits) */
.ns-btn-ok { color: #fff; background-color: var(--ns-ok); }
.ns-btn-ok:hover { background-color: var(--ns-ok-strong); }
.ns-btn-warn { color: #fff; background-color: var(--ns-warn); }
.ns-btn-warn:hover { background-color: var(--ns-warn-strong); }
.ns-btn-bad { color: #fff; background-color: var(--ns-bad); }
.ns-btn-bad:hover { background-color: var(--ns-bad-strong); }

/* Tabs on the customer site page */
.ns-tab { color: var(--ns-tab-text); }
.ns-tab-active { border-bottom: 2px solid var(--ns-accent); color: var(--ns-accent-text); font-weight: 600; margin-bottom: -1px; }

/* Choice cards (plan picker) */
.ns-choice { border-color: var(--ns-neutral-border); cursor: pointer; }
.ns-choice-selected { border-color: var(--ns-accent); background: var(--ns-accent-bg); }
.ns-choice-unavailable { cursor: not-allowed; opacity: .6; }

/* Usage and progress bars */
.ns-meter-ok { background: var(--ns-meter-ok); }
.ns-meter-warn { background: var(--ns-meter-warn); }
.ns-meter-bad { background: var(--ns-meter-bad); }
.ns-meter-failed { background: var(--ns-meter-failed); }
.ns-meter-none { background: var(--ns-meter-none); }
.ns-meter-marker { position: absolute; top: 0; width: 2px; background: var(--ns-meter-marker); }

/* Config and log boxes */
.ns-code { overflow-x: auto; background: var(--ns-code-bg); color: var(--ns-code-text); }
.ns-code-tight { line-height: 1rem; }
.ns-log-box { min-height: 320px; max-height: 640px; overflow-y: auto; }

/* States */
.ns-disabled { opacity: .5; cursor: not-allowed; }
.ns-flash { box-shadow: 0 0 0 3px var(--ns-flash); }
.ns-faint { opacity: .7; }

/* Small layout helpers */
.ns-inline { display: inline; }
.ns-relative { position: relative; }
.ns-pointer { cursor: pointer; }
.ns-help { cursor: help; }
.ns-help-dotted { text-decoration: underline dotted; cursor: help; }
.ns-strike { text-decoration: line-through; }
.ns-text-left { text-align: left; }
.ns-w-auto { width: auto; }
.ns-w-2 { width: 2rem; }
.ns-w-5-5 { width: 5.5rem; }
.ns-w-6 { width: 6rem; }
.ns-w-8 { width: 8rem; }
.ns-w-12 { width: 12rem; }
.ns-w-16 { width: 16rem; }
.ns-w-18 { width: 18rem; }
.ns-max-w-24 { max-width: 24rem; }
.ns-max-w-32 { max-width: 32rem; }
.ns-max-h-12 { max-height: 12rem; }
.ns-max-h-16 { max-height: 16rem; }
.ns-max-h-24 { max-height: 24rem; }
.ns-max-h-28 { max-height: 28rem; }
.ns-max-h-dialog { max-height: 75vh; }
.ns-mt-check { margin-top: .2rem; }   /* lines a checkbox up with its label's first line */
.ns-mt-hair { margin-top: 2px; }
.ns-mb-2 { margin-bottom: .5rem; }

/* Grids */
.ns-grid-choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: .75rem; }
.ns-grid-checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: .25rem .75rem; }
.ns-grid-checks-compact { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: .25rem .75rem; }
.ns-grid-2 { display: grid; grid-template-columns: 1fr 1fr; column-gap: 1.5rem; row-gap: .75rem; }

/* A sub-page under the item above it in the admin sidebar (e.g. Support > Support email). */
[data-flux-navlist-item].ns-subnav-item {
    margin-inline-start: 1.75rem;
    width: calc(100% - 1.75rem);
    font-size: 0.8125rem;
}