/* =====================================================================
   LemonadeJS components — template / theming contract
   ---------------------------------------------------------------------
   Every component styles itself from the --lm-* tokens below. Nothing in
   a component's own style.css should hardcode a color, radius, shadow or
   focus ring — it reads a token, so the whole catalog re-themes from one
   place.

   To customize globally: override any token on :root (or on a scope).
       :root { --lm-main-color: #7c3aed; --lm-radius: 8px; }

   To create a theme: declare a class that overrides tokens, then add the
   class to a container (see .lm-green below for the pattern).
       <div class="lm-purple"> ... </div>

   Dark mode: follows the OS automatically (prefers-color-scheme) and can
   be forced either way with the .lm-dark-mode / .lm-light-mode classes.
   ===================================================================== */
:root {
    --lm-font-color: var(--lm-neutral-12);
    --lm-main-color: #2563eb;
    --lm-main-color-alpha: #2563eb88;
    --lm-main-color-highlight: #1d4ed8;
    /* Accent-derived tint — hover/selected wash for text & outline controls.
       Derives from the accent via color-mix, so a theme that changes
       --lm-main-color re-tints every hover state in the catalog for free. */
    --lm-main-color-tint: color-mix(in srgb, var(--lm-main-color) 10%, transparent);
    --lm-main-color-tint-strong: color-mix(in srgb, var(--lm-main-color) 16%, transparent);
    --lm-secondary-color: var(--lm-neutral-11);

    /* ---- Neutral ramp (Radix-slate-derived) — the single grey scale the
       whole catalog is built from. Surface/border/text tokens below are
       VIEWS onto this ramp, so the palette stays internally consistent and
       a theme can shift the entire neutral feel by moving these 12 values. */
    --lm-neutral-1: #fcfcfc;   /* app background, subtle */
    --lm-neutral-2: #f7f7f7;   /* subtle surface (headers) */
    --lm-neutral-3: #f0f0f0;   /* ui element background */
    --lm-neutral-4: #e8e8e8;   /* hovered ui background */
    --lm-neutral-5: #e0e0e0;   /* active / selected ui background */
    --lm-neutral-6: #d8d8d8;   /* subtle borders, separators */
    --lm-neutral-7: #cccccc;   /* ui element border */
    --lm-neutral-8: #bbbbbb;   /* hovered / strong border */
    --lm-neutral-9: #8d8d8d;   /* solid neutral fill */
    --lm-neutral-10: #838383;  /* hovered solid neutral */
    --lm-neutral-11: #646464;  /* low-contrast text, icons */
    --lm-neutral-12: #202020;  /* high-contrast text */

    /* Surface / border / text — views onto the ramp (names unchanged so all
       existing components re-theme automatically). */
    --lm-border-color: var(--lm-neutral-6);
    --lm-border-color-light: var(--lm-neutral-4);
    --lm-border-color-highlight: var(--lm-neutral-8);
    --lm-border-outline: #000;
    --lm-background-color: #fff;
    --lm-background-color-header: var(--lm-neutral-2);
    --lm-background-color-highlight: var(--lm-neutral-4);
    --lm-background-color-active: var(--lm-neutral-5);
    --lm-background-color-input: initial;
    --lm-icon-color: var(--lm-neutral-11);

    --lm-font-grayout: var(--lm-neutral-11);

    /* ---- Spacing scale (4px base) — controls and surfaces pad from these
       instead of ad-hoc px, which is what keeps rhythm consistent. */
    --lm-space-1: 4px;
    --lm-space-2: 8px;
    --lm-space-3: 12px;
    --lm-space-4: 16px;
    --lm-space-5: 24px;
    --lm-space-6: 32px;
    --lm-input-padding: 6px;

    /* Radius scale — controls use --lm-radius, surfaces use --lm-radius-lg,
       text inputs use the tighter --lm-radius-input (Paul: input radius was
       too large). */
    --lm-radius: 6px;
    --lm-radius-lg: 10px;
    --lm-radius-input: 4px;
    --lm-border-radius: var(--lm-radius); /* legacy alias, kept for back-compat */

    /* Input border — its own token so fields read crisper than surface
       separators (Paul: #ccc in light mode). Dark value set in the dark blocks. */
    --lm-border-input: #ccc;

    /* Elevation — popovers, menus, dialogs */
    --lm-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
    --lm-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.06);

    /* Motion — one duration + one easing token for the whole catalog. Wrapped
       by the prefers-reduced-motion block at the foot of this file. */
    --lm-duration: 0.15s;
    --lm-ease: cubic-bezier(0.4, 0, 0.2, 1);

    /* Soft halo painted behind the focus outline on focus-visible */
    --lm-focus-ring: rgba(0, 0, 0, 0.12);

    /* Semantic status colors — shared by progress, rating, switch, card,
       toast, badges... so "success / danger" looks identical everywhere. */
    --lm-color-info: var(--lm-main-color);
    --lm-color-success: #16a34a;
    --lm-color-warning: #ea580c;
    --lm-color-danger: #dc2626;
    --lm-color-purple: #9333ea;

    /* Shared categorical palette — the single source of series colors for
       every data component (chart, gantt, kanban, schedule, progress...).
       Override these on a theme class and every chart + board recolors. */
    --lm-series-1: #4b81de;
    --lm-series-2: #6342a1;
    --lm-series-3: #c0554a;
    --lm-series-4: #bd7f40;
    --lm-series-5: #578163;
    --lm-series-6: #45889c;
    --lm-series-7: #b05a7e;
    --lm-series-8: #75808f;
    --lm-series-9: #a3a442;
    --lm-series-10: #8b6a52;

    --lm-safe-area-top: 0;
    --lm-safe-area-bottom: 0;
    --lm-text-color: #000;
}

/* =====================================================================
   Themes — token-override classes. Apply ONE to a container (usually the
   <body>):  <body class="lm-application lm-theme-modern">
   A theme sets the accent, colour palette, radius, padding and outline.
   You can still override any single token at the component level (inline
   style or a scoped class), and a chart's palette can be set per-chart via
   its `palette` / `colors` props. Dark mode (defined AFTER the themes) is
   layered on top and wins the SURFACE colours, so any theme composes with
   .lm-dark-mode while keeping its own accent / radius / padding.
   ===================================================================== */

/* Modern — clean SaaS default: blue accent, 6px radius, soft borders */
.lm-theme-modern {
    --lm-main-color: #2563eb;
    --lm-main-color-alpha: #2563eb88;
    --lm-main-color-highlight: #1d4ed8;
    --lm-border-color: #e4e4e7;
    --lm-border-color-light: #f0f0f1;
    --lm-radius: 6px;
    --lm-radius-lg: 10px;
    --lm-input-padding: 6px;
    --lm-border-outline: #000;
    --lm-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
    --lm-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.06);
    --lm-series-1: #4b81de;
    --lm-series-2: #6342a1;
    --lm-series-3: #c0554a;
    --lm-series-4: #bd7f40;
    --lm-series-5: #578163;
    --lm-series-6: #45889c;
    --lm-series-7: #b05a7e;
    --lm-series-8: #75808f;
    --lm-series-9: #a3a442;
    --lm-series-10: #8b6a52;
}

/* Minimal — dense + crisp: near-mono slate accent, 3px radius, tight pad */
.lm-theme-minimal {
    --lm-main-color: #1f2937;
    --lm-main-color-alpha: #1f293788;
    --lm-main-color-highlight: #111827;
    --lm-border-color: #d1d5db;
    --lm-border-color-light: #e5e7eb;
    --lm-radius: 3px;
    --lm-radius-lg: 4px;
    --lm-input-padding: 4px;
    --lm-border-outline: #000;
    --lm-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
    --lm-shadow-lg: 0 4px 14px rgba(0, 0, 0, 0.12);
    --lm-series-1: #334155;
    --lm-series-2: #0d9488;
    --lm-series-3: #b45309;
    --lm-series-4: #be123c;
    --lm-series-5: #4f46e5;
    --lm-series-6: #0369a1;
    --lm-series-7: #a21caf;
    --lm-series-8: #64748b;
    --lm-series-9: #4d7c0f;
    --lm-series-10: #78716c;
}

/* Soft — friendly + rounded: indigo accent, 12px radius, roomy pad, pastel */
.lm-theme-soft {
    --lm-main-color: #6366f1;
    --lm-main-color-alpha: #6366f188;
    --lm-main-color-highlight: #4f46e5;
    --lm-border-color: #e5e7eb;
    --lm-border-color-light: #f3f4f6;
    --lm-radius: 12px;
    --lm-radius-lg: 16px;
    --lm-input-padding: 9px;
    --lm-border-outline: #6366f1;
    --lm-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
    --lm-shadow-lg: 0 12px 34px rgba(99, 102, 241, 0.16), 0 4px 12px rgba(0, 0, 0, 0.06);
    --lm-focus-ring: rgba(99, 102, 241, 0.18);
    --lm-series-1: #818cf8;
    --lm-series-2: #34d399;
    --lm-series-3: #fbbf24;
    --lm-series-4: #fb7185;
    --lm-series-5: #a78bfa;
    --lm-series-6: #38bdf8;
    --lm-series-7: #f472b6;
    --lm-series-8: #94a3b8;
    --lm-series-9: #a3e635;
    --lm-series-10: #d4a373;
}

/* Accent-only example themes (override just the main colour) */
.lm-green {
    --lm-main-color: #39a33b;
    --lm-main-color-alpha: #39a33b88;
    --lm-main-color-highlight: #2f8431;
}

.lm-purple {
    --lm-main-color: #7c3aed;
    --lm-main-color-alpha: #7c3aed88;
    --lm-main-color-highlight: #6d28d9;
}

/* Dark mode — layered AFTER the themes so it wins the surface colours
   (bg / text / borders / shadow) while a theme keeps its accent + shape.
   Token values are shared by the OS-driven and the forced (class) paths;
   CSS can't share a block, so the same overrides live in both rules. */
.lm-dark-mode {
    /* Native controls (selects, date inputs, scrollbars) must follow */
    color-scheme: dark;

    /* Dark neutral ramp (Radix-slate-dark) — same view model as light */
    --lm-neutral-1: #111111;
    --lm-neutral-2: #191919;
    --lm-neutral-3: #222222;
    --lm-neutral-4: #2a2a2a;
    --lm-neutral-5: #313131;
    --lm-neutral-6: #3a3a3a;
    --lm-neutral-7: #484848;
    --lm-neutral-8: #606060;
    --lm-neutral-9: #6e6e6e;
    --lm-neutral-10: #7b7b7b;
    --lm-neutral-11: #b4b4b4;
    --lm-neutral-12: #eeeeee;

    --lm-font-color: var(--lm-neutral-12);
    --lm-font-grayout: var(--lm-neutral-11);
    --lm-border-color: var(--lm-neutral-6);
    --lm-border-color-light: var(--lm-neutral-3);
    --lm-border-color-highlight: var(--lm-neutral-8);
    --lm-border-input: var(--lm-neutral-7);
    --lm-border-outline: #fff;
    --lm-background-color: var(--lm-neutral-1);
    --lm-background-color-header: var(--lm-neutral-2);
    --lm-background-color-highlight: var(--lm-neutral-4);
    --lm-background-color-active: var(--lm-neutral-5);
    --lm-background-color-input: var(--lm-neutral-2);
    --lm-icon-color: var(--lm-neutral-11);

    --lm-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    --lm-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.6), 0 2px 8px rgba(0, 0, 0, 0.4);
    --lm-focus-ring: rgba(255, 255, 255, 0.16);
    --lm-text-color: #fff;

    --lm-color-success: #22c55e;
    --lm-color-warning: #fb923c;
    --lm-color-danger: #f87171;
    --lm-color-purple: #c084fc;

    --lm-series-1: #4dabf5;
    --lm-series-2: #51cf66;
    --lm-series-3: #ffc34d;
    --lm-series-4: #ff8787;
    --lm-series-5: #b197fc;
    --lm-series-6: #3bc9db;
    --lm-series-7: #f783ac;
    --lm-series-8: #adb5bd;
    --lm-series-9: #a9e34b;
    --lm-series-10: #d9a66c;
}

/* Follow the OS unless the app forced light with .lm-light-mode */
@media (prefers-color-scheme: dark) {
    :root:not(.lm-light-mode) {
        color-scheme: dark;

        --lm-neutral-1: #111111;
        --lm-neutral-2: #191919;
        --lm-neutral-3: #222222;
        --lm-neutral-4: #2a2a2a;
        --lm-neutral-5: #313131;
        --lm-neutral-6: #3a3a3a;
        --lm-neutral-7: #484848;
        --lm-neutral-8: #606060;
        --lm-neutral-9: #6e6e6e;
        --lm-neutral-10: #7b7b7b;
        --lm-neutral-11: #b4b4b4;
        --lm-neutral-12: #eeeeee;

        --lm-font-color: var(--lm-neutral-12);
        --lm-font-grayout: var(--lm-neutral-11);
        --lm-border-color: var(--lm-neutral-6);
        --lm-border-color-light: var(--lm-neutral-3);
        --lm-border-color-highlight: var(--lm-neutral-8);
        --lm-border-input: var(--lm-neutral-7);
        --lm-border-outline: #fff;
        --lm-background-color: var(--lm-neutral-1);
        --lm-background-color-header: var(--lm-neutral-2);
        --lm-background-color-highlight: var(--lm-neutral-4);
        --lm-background-color-active: var(--lm-neutral-5);
        --lm-background-color-input: var(--lm-neutral-2);
        --lm-icon-color: var(--lm-neutral-11);

        --lm-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
        --lm-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.6), 0 2px 8px rgba(0, 0, 0, 0.4);
        --lm-focus-ring: rgba(255, 255, 255, 0.16);
        --lm-text-color: #fff;

        --lm-color-success: #22c55e;
        --lm-color-warning: #fb923c;
        --lm-color-danger: #f87171;
        --lm-color-purple: #c084fc;

        --lm-series-1: #4dabf5;
        --lm-series-2: #51cf66;
        --lm-series-3: #ffc34d;
        --lm-series-4: #ff8787;
        --lm-series-5: #b197fc;
        --lm-series-6: #3bc9db;
        --lm-series-7: #f783ac;
        --lm-series-8: #adb5bd;
        --lm-series-9: #a9e34b;
        --lm-series-10: #d9a66c;
    }
}

/* fallback */
@font-face {
    font-family: 'Material Symbols Outlined';
    font-style: normal;
    font-weight: 300;
    src: url(https://fonts.gstatic.com/s/materialsymbolsoutlined/v351/kJF4BvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oDMzByHX9rA6RzaxHMPdY40KH8nGzv3fzfVJU22ZZLsYEpzC_1qmr5Y0.woff2) format('woff2');
}

.material-symbols-outlined {
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
}

/* Focus rings are NOT set globally (a catalog-wide [class^="lm-"] rule
   ringed things it should not — dialog panels, custom-focus grids — and
   its box-shadow clobbered component elevation). Components that want
   the house ring declare it on their own controls:
       outline: 2px solid var(--lm-border-outline);
       outline-offset: -1px;
   Everything else keeps the browser native focus-visible ring. */

/* Reduced motion — honor the OS preference catalog-wide. Components author
   their transitions/animations normally; this neutralizes them in one place
   for users who ask for less motion (WCAG 2.3.3 / 2.2.2). */
@media (prefers-reduced-motion: reduce) {
    [class^="lm-"],
    [class*=" lm-"],
    .lm-application *,
    [class^="lm-"]::before,
    [class*=" lm-"]::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}


body.lm-application {
    margin: 0;
    padding: 0;
    font-family: Montserrat, sans-serif;
    background: var(--lm-background-color);
    color: var(--lm-font-color);
}

.lm-application input[type='text'],
.lm-application input[type='number'],
.lm-application input[type='password'],
.lm-application select,
.lm-application textarea,
.lm-application button,
.lm-input {
    padding: var(--lm-input-padding) var(--lm-input-padding) var(--lm-input-padding) 8px;
    box-sizing: border-box;
    border: 1px solid var(--lm-border-input, #ccc);
    background-color: var(--lm-background-color-input);
    line-height: initial;
    border-radius: var(--lm-radius-input, 4px);
    color: var(--lm-font-color);
    font-family: inherit;
    font-size: inherit;
}

.lm-application *:disabled {
    color: #888;
}

[visible='false'] {
    display: none;
}

[visible='true'] {
    display: block;
}

.lm-container {
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
}

.lm-row {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: space-between;
    box-sizing: border-box;
}

.lm-row.lm-container {
    flex-wrap: nowrap;
}

.lm-row.lm-middle {
    align-items: center;
}

.lm-row.lm-start {
    justify-content: start;
}

.lm-column {
    box-sizing: border-box;
}

.lm-column.lm-top {
    align-self: flex-start;
}

.lm-column.lm-bottom {
    align-self: flex-end;
}

.lm-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.lm-form .lm-row {
    gap: 12px;
}

.lm-form-group {
    width: 100%;
    padding-right: 8px;
    padding-bottom: 8px;
    box-sizing: border-box;
}

.lm-form .lm-form-group {
    padding: initial;
}

.lm-form-group input[type='text'],
.lm-form-group input[type='email'],
.lm-form-group input[type='tel'],
.lm-form-group input[type='time'],
.lm-form-group input[type='date'],
.lm-form-group input[type='password'],
.lm-form-group input[type='number'],
.lm-form-group select,
.lm-form-group textarea,
.lm-form-group {
    width: 100%;
}

.lm-form-group label {
    display: block;
    margin-bottom: 4px;
}

.lm-form-group label.lm-switch {
    display: inline-flex;
    margin: initial;
}

.lm-f1 {
    flex: 1;
}

.lm-f2 {
    flex: 2;
}

.lm-f3 {
    flex: 3;
}

.lm-f4 {
    flex: 4;
}

.lm-f5 {
    flex: 5;
}

.lm-f6 {
    flex: 6;
}

.lm-f7 {
    flex: 7;
}

.lm-f8 {
    flex: 8;
}

.lm-p0 {
    padding: 0;
}

.lm-p2 {
    padding: 2px;
}

.lm-p4 {
    padding: 4px;
}

.lm-p6 {
    padding: 6px;
}

.lm-p8 {
    padding: 8px;
}

.lm-p10 {
    padding: 10px;
}

.lm-p15 {
    padding: 15px;
}

.lm-p20 {
    padding: 20px;
}

.lm-p25 {
    padding: 25px;
}

.lm-p30 {
    padding: 30px;
}

.lm-application .lm-button,
.lm-button {
    padding: var(--lm-input-padding) 20px;
    border-radius: var(--lm-radius, 6px);
    cursor: pointer;
    outline: none;

    background-color: var(--lm-secondary-color, #737373);
    border: 1px solid transparent;
    color: #fff;
}

/* outline: none above removes the always-on ring; keyboard focus gets the
   house ring back (WCAG 2.4.7) — same convention as accordion/toast. */
.lm-application .lm-button:focus-visible,
.lm-button:focus-visible {
    outline: 2px solid var(--lm-border-outline, #2563eb);
    outline-offset: 2px;
}

.lm-application .lm-button.red,
.lm-button.red {
    background-color: #a23131;
    border: 1px solid transparent;
    color: #fff;
}

.lm-application .lm-button.blue,
.lm-button.blue {
    border: 1px solid transparent;
    color: #fff;
    background-color: #1a73e8;
}

.lm-ripple {
    background-position: center;
    transition: background 0.8s;
}

.lm-ripple:hover {
    background: var(--lm-background-color-highlight, #ebebeb) radial-gradient(circle, transparent 1%, var(--lm-background-color-highlight, #ebebeb) 1%) center/15000%;
}

.lm-ripple:active {
    background-color: var(--lm-background-color-active, #e8e8e8);
    background-size: 100%;
    transition: background 0s;
}

.lm-cursor {
    cursor: pointer;
}

.lm-center {
    text-align: center;
}

.lm-loading::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    z-index: 9999;
    animation: lm-loading 2s linear infinite;
    background: #e0e0e0 repeating-linear-gradient(to right, var(--lm-main-color-highlight, #66b244), var(--lm-main-color-highlight, #66b244) 50%, #e0e0e0 50%, #e0e0e0);
    background-size: 200% 100%;
}

.lm-icon {
    font-family: "Material Symbols Outlined", "Material Icons", "FontAwesome";
    font-size: 24px;
    width: 24px;
    height: 24px;
    line-height: 24px;
    font-style: normal;
}

@keyframes lm-loading {
    from {
        background-position: 100% 0;
    }
    to {
        background-position: 0 0;
    }
}

/** Dark mode */

body.lm-dark-mode {
    background-color: var(--lm-background-color);
}

.lm-dark-mode a {
    color: white;
}

.lm-dark-mode .lm-button {
    background-color: #555;
    border: 1px solid transparent;
    color: white;
}

@media (min-width: 320px) {
    .lm-container {
        padding: 0 2% 0 2%;
    }
}

@media (min-width: 1200px) {
    .lm-container {
        padding: 0 5% 0 5%;
    }
}

@media (max-width: 720px) {
    .lm-row {
        flex-wrap: wrap;
    }

    .lm-column {
        min-width: 100%;
    }

    .lm-column .lm-form-group {
        padding: 0;
    }

    ::placeholder {
        text-transform: uppercase;
    }

    ::-webkit-input-placeholder {
        text-transform: uppercase;
    }

    :-moz-placeholder {
        text-transform: uppercase;
    }

    :-ms-input-placeholder {
        text-transform: uppercase;
    }
}