/*
 * FriendlyQ Custom daisyUI Themes
 *
 * These themes override daisyUI CSS custom properties for the FQ-branded
 * light and dark themes. They are loaded after /nexus-static/assets/app.css
 * so they take precedence over the default Nexus themes.
 *
 * The six original Nexus themes (light, dark, dim, material, contrast,
 * material-dark) are fully preserved and still usable.
 *
 * TO REVERT: remove the <link> tag for this file in the layout templates
 * and restore the bootstrap script defaults. Nothing else needs changing.
 */

/* == Poppins font (matches Anvil frontend) == */
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap");

/* ============================================================
   FQ Light — warm cream with a vibrant teal-green primary
   ============================================================ */
html[data-theme="fq-light"] {
    color-scheme: light;

    /* == Layout chrome == */
    --root-bg: #FBF5EC;
    --layout-sidebar-background: #FBF5EC;
    --layout-topbar-background: #FBF5EC;

    /* == Base surfaces == */
    /* base-100 = cards / panels   base-200 = page bg   base-300 = borders / dividers */
    --color-base-100: #FFFDF9;   /* cards / panels */
    --color-base-200: #FBF5EC;   /* page background */
    --color-base-300: #EDE5DB;   /* borders / dividers */
    --color-base-content: #2A2017; /* On Background */

    /* == Brand colours == */
    --color-primary: #3D8B72;          /* vibrant teal-green */
    --color-primary-content: #ffffff;
    --color-secondary: #6B5D52;        /* Secondary / Outline */
    --color-secondary-content: #ffffff;
    --color-accent: #BDE0D6;           /* Tertiary Container */
    --color-accent-content: #002018;   /* On Tertiary Container */
    --color-neutral: #1A1410;          /* Primary (dark brown) */
    --color-neutral-content: #FFFCF8;

    /* == Semantic colours == */
    --color-info: #0270c8;
    --color-info-content: #ffffff;
    --color-success: #2E7D32;          /* Anvil Dark green */
    --color-success-content: #ffffff;
    --color-warning: #c47900;
    --color-warning-content: #ffffff;
    --color-error: #BA1A1A;            /* Anvil Error */
    --color-error-content: #ffffff;

    /* == Sizing == */
    --radius-field: 0.5rem;
    --radius-box: 1rem;
    --rounded-box: 1rem;
    --radius-selector: 0.5rem;
    --size-selector: 0.25rem;
    --size-field: 0.25rem;
    --border: 1px;
    --depth: 1;
    --noise: 0;

    /* == Typography == */
    --font-sans: "Poppins", sans-serif;
}

/* Nexus hardcodes topbar-menu min/max-height to 64px (spacing * 16).
   Override to a slimmer 48px (spacing * 12). */
#layout-topbar.topbar-menu {
    min-height: calc(var(--spacing) * 12);
    max-height: calc(var(--spacing) * 12);
}

/* Nexus draws borders on sidebar/topbar using border-color: var(--color-base-200).
   In fq-light the sidebar/topbar backgrounds match base-200, so the border becomes
   invisible. Override border-color to use base-300 (a clearly visible warm tone). */
html[data-theme="fq-light"] #layout-sidebar,
html[data-theme="fq-light"] #layout-topbar {
    border-color: var(--color-base-300);
}

/* In fq-light, --layout-sidebar-background equals --color-base-200, so the
   default bg-base-200 active-item highlight is invisible against the sidebar.
   Use base-300 instead so the selected nav link has a clearly visible background. */
html[data-theme="fq-light"] #layout-sidebar .menu-item.active {
    background-color: var(--color-base-300);
}

/* == Sidebar nav items — more breathing room for a friendlier feel == */
html[data-theme="fq-light"] #layout-sidebar .menu-item,
html[data-theme="fq-dark"]  #layout-sidebar .menu-item {
    height: 2.25rem;
}

/* == Modal overlay / backdrop ================================================
   Controls the dimming + blur applied behind every modal in the app.
   Both DaisyUI modals (.modal[open]) and the custom file-preview overlay
   read these variables, so changing them here updates every modal at once.

   DaisyUI's native backdrop is oklch(0%0 0/0.4) on .modal[open].
   We override that here and add a blur for a consistent frosted-glass look.
   =========================================================================== */
:root {
    --fq-modal-backdrop-color: rgba(0, 0, 0, 0.6);
    --fq-modal-backdrop-blur: blur(4px);
}

/* == Prevent layout shift when scrollbar appears / disappears ==
   #layout-main is the only scrolling container in the app (the sidebar
   handles its own scroll via simplebar). Always reserving the scrollbar
   track on that element means the content width never changes and there
   is no horizontal jump when switching between short and long pages. */
#layout-main {
    overflow-y: scroll;
}

.modal.modal-open,
.modal[open],
.modal:target {
    background-color: var(--fq-modal-backdrop-color) !important;
    backdrop-filter: var(--fq-modal-backdrop-blur);
}

/* == Input focus — inset ring instead of expanding outline ==
   DaisyUI's default outline: 2px + outline-offset: 2px expands the element's
   visual footprint, causing clipping in overflow containers and bleeding into
   adjacent join items. An inset box-shadow draws inside the element boundary —
   zero footprint change, no container padding adjustments ever needed. */
.input:focus,
.input:focus-within,
.textarea:focus,
.textarea:focus-within,
.select:focus,
.select:focus-within {
    outline: none;
    box-shadow: inset 0 0 0 2px var(--input-color);
}

/* == Global card shadow ==
   Mirrors Tailwind's shadow-md. Change the two rgba values here to try other levels:
     shadow-sm : 0 1px 3px 0 rgba(0,0,0,.1), 0 1px 2px -1px rgba(0,0,0,.1)
     shadow-md : 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -2px  rgba(0,0,0,.1)
     shadow-lg : 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1)
     shadow-xl : 0 20px 25px -5px rgba(0,0,0,.1), 0 8px 10px -6px rgba(0,0,0,.1) */
.card {
    --tw-shadow: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -2px rgba(0,0,0,.1);
    box-shadow: var(--tw-inset-shadow, 0 0 #0000),
                var(--tw-inset-ring-shadow, 0 0 #0000),
                var(--tw-ring-offset-shadow, 0 0 #0000),
                var(--tw-ring-shadow, 0 0 #0000),
                var(--tw-shadow);
}

/* ============================================================
   FQ Dark — near-black with a subtle dark-green tint
   Blacks shifted toward the hue of #3D8B72 (H ≈ 160°)
   ============================================================ */
html[data-theme="fq-dark"] {
    color-scheme: dark;

    /* == Layout chrome == */
    --root-bg: #111916;
    --layout-sidebar-background: #111916;
    --layout-topbar-background: #111916;

    /* == Base surfaces == */
    --color-base-100: #161f1b;
    --color-base-200: #1e2924;
    --color-base-300: #263530;
    --color-base-content: #d8e8e4;   /* greenish off-white */

    /* == Brand colours == */
    --color-primary: #4db898;          /* vibrant teal-green, matches fq-light primary hue */
    --color-primary-content: #001a12;
    --color-secondary: #a09082;        /* muted warm beige */
    --color-secondary-content: #1e1510;
    --color-accent: #3fd0ba;
    --color-accent-content: #001a12;
    --color-neutral: #d8e8e4;
    --color-neutral-content: #161f1b;

    /* == Semantic colours (same as Nexus dark) == */
    --color-info: #14b4ff;
    --color-info-content: #ffffff;
    --color-success: #0bbf58;
    --color-success-content: #ffffff;
    --color-warning: #f5a524;
    --color-warning-content: #150a00;
    --color-error: #f31260;
    --color-error-content: #ffffff;

    /* == Sizing == */
    --radius-field: 0.5rem;
    --radius-box: 1rem;
    --rounded-box: 1rem;
    --radius-selector: 0.5rem;
    --size-selector: 0.25rem;
    --size-field: 0.25rem;
    --border: 1px;
    --depth: 1;
    --noise: 0;

    /* == Typography == */
    --font-sans: "Poppins", sans-serif;
}

/* ── Busy button (hx-busy-btn) ───────────────────────────────────────────────
   Immediately non-interactive when an HTMX request starts (htmx-request added
   by HTMX automatically). Spinner is hidden by default — no space reserved.
   A 300ms JS timer in base.html.jinja2 adds .hx-busy to show the spinner.

   Two patterns:
     Pattern 1 — button is the HTMX trigger (e.g. standalone action buttons):
       add hx-busy-btn to the button + hx-spinner span inside it.
       JS adds .hx-busy to the button after 300ms.

     Pattern 2 — confirm-dialog (button closes dialog then triggers request):
       add hx-spinner to a span inside the always-visible TRIGGER button and
       give it an id. On the hidden CONFIRM button use hx-indicator="#that-id".
       JS adds .hx-busy directly to the spinner span after 300ms.
   ─────────────────────────────────────────────────────────────────────────── */
.hx-busy-btn.htmx-request {
    pointer-events: none;
    opacity: 0.7;
}
.hx-spinner {
    display: none;
}
/* Pattern 1: spinner lives inside the button that fires the request */
.hx-busy-btn.hx-busy .hx-spinner,
/* Pattern 2: spinner is itself the hx-indicator target               */
.hx-spinner.hx-busy {
    display: inline-flex;
}