/* ===========================================================================
   Clean — a bright, neutral thinking studio.
   Editorial serif (Fraunces) for marquee text, clean grotesque (Hanken Grotesk)
   for UI, mono for numerals. One calm blue signature on white.
   =========================================================================== */

:root {
    /* Cool neutral surfaces, light to white. */
    --ink-900: #f4f6f8;   /* page */
    --ink-850: #fbfcfd;   /* sidebar / panels */
    --ink-800: #ffffff;   /* canvas */
    --ink-750: #ffffff;   /* raised / inputs */
    --ink-700: #ffffff;   /* cards / nodes */
    --ink-600: #eef1f5;   /* hover / chips */
    --line: rgba(15, 23, 42, 0.10);
    --line-strong: rgba(15, 23, 42, 0.16);
    --overlay: rgba(15, 23, 42, 0.05);
    --overlay-strong: rgba(15, 23, 42, 0.09);

    --text: #1e293b;      /* slate ink */
    --text-dim: #475569;  /* secondary text — AA on all light surfaces */
    --text-faint: #64748b; /* tertiary text — still AA */

    --accent: #2563eb;        /* blue — borders, flourishes, fills */
    --accent-text: #1d4ed8;   /* darker blue — accent-coloured TEXT/links (AA on white) */
    --accent-bright: #3b82f6; /* bright blue — fills only */
    --accent-deep: #1e40af;
    --accent-soft: rgba(37, 99, 235, 0.12);
    --accent-ink: #ffffff;    /* text on blue fills */

    --danger: #c8443b;
    --danger-soft: rgba(200, 68, 59, 0.12);

    --radius: 14px;
    --radius-lg: 18px;
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.07);
    --shadow: 0 12px 32px rgba(15, 23, 42, 0.12);
    --shadow-glow: 0 6px 22px rgba(37, 99, 235, 0.35);

    --font-ui: 'Hanken Grotesk', system-ui, sans-serif;
    --font-display: 'Fraunces', Georgia, serif;
    --font-mono: 'JetBrains Mono', ui-monospace, monospace;

    /* Workflow status colors */
    --color-status-todo: #8f8879;
    --color-status-wip: #3b82c4;
    --color-status-done: #4a9d5b;
    --color-status-delegated: #8a5bd0;
    --color-status-blocked: #c8443b;

    /* Priority colors */
    --color-priority-low: #8f8879;
    --color-priority-medium: #3b82c4;
    --color-priority-high: #d98324;
    --color-priority-urgent: #c8443b;

    /* Node color tints */
    --tint-red: #f9cabb;
    --tint-bd-red: #d4604a;
    --tint-orange: #fbdca3;
    --tint-bd-orange: #d68f2c;
    --tint-green: #cee9bb;
    --tint-bd-green: #6aa84f;
    --tint-blue: #c5ddfa;
    --tint-bd-blue: #4a90d9;
    --tint-purple: #ddccf5;
    --tint-bd-purple: #9b6fd4;
    --tint-grey: #ded8cd;
    --tint-bd-grey: #a99d88;

    /* Swatches in floating toolbar */
    --swatch-red: #f9cabb;
    --swatch-orange: #fbdca3;
    --swatch-green: #cee9bb;
    --swatch-blue: #c5ddfa;
    --swatch-purple: #ddccf5;
    --swatch-grey: #ded8cd;

    --overlay-miss: rgba(244, 246, 248, 0.72);
}

/* --- Dark Theme Tokens --------------------------------------------------- */
[data-theme="dark"] {
    --ink-900: #0b0f17;   /* deep slate-black page background */
    --ink-850: #111827;   /* sidebar / drawers / secondary panels */
    --ink-800: #0f172a;   /* canvas surface */
    --ink-750: #1e293b;   /* elevated surfaces / inputs / card containers */
    --ink-700: #1e293b;   /* cards / mind map nodes */
    --ink-600: #334155;   /* hover states / chips / scrollbar */
    --line: rgba(255, 255, 255, 0.08);
    --line-strong: rgba(255, 255, 255, 0.16);
    --overlay: rgba(255, 255, 255, 0.06);
    --overlay-strong: rgba(255, 255, 255, 0.12);

    --text: #f8fafc;      /* crisp white-slate text */
    --text-dim: #94a3b8;  /* secondary text (high contrast AA) */
    --text-faint: #64748b; /* muted labels */

    --accent: #3b82f6;        /* vibrant blue */
    --accent-text: #60a5fa;   /* bright readable blue text */
    --accent-bright: #60a5fa;
    --accent-deep: #2563eb;
    --accent-soft: rgba(59, 130, 246, 0.18);
    --accent-ink: #ffffff;

    --danger: #f87171;
    --danger-soft: rgba(239, 68, 68, 0.18);

    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5);
    --shadow: 0 14px 36px rgba(0, 0, 0, 0.6);
    --shadow-glow: 0 6px 24px rgba(59, 130, 246, 0.35);

    /* Workflow status colors */
    --color-status-todo: #a8a29e;
    --color-status-wip: #60a5fa;
    --color-status-done: #4ade80;
    --color-status-delegated: #c084fc;
    --color-status-blocked: #f87171;

    /* Priority colors */
    --color-priority-low: #a8a29e;
    --color-priority-medium: #60a5fa;
    --color-priority-high: #fbbf24;
    --color-priority-urgent: #f87171;

    /* Node color tints (dark theme - darker and eye-friendly, opaque to hide connectors) */
    --tint-red: #2a1518;
    --tint-bd-red: #8f2832;
    --tint-orange: #281a0f;
    --tint-bd-orange: #954112;
    --tint-green: #102618;
    --tint-bd-green: #1f6b3b;
    --tint-blue: #112236;
    --tint-bd-blue: #23589e;
    --tint-purple: #221434;
    --tint-bd-purple: #6e2d9b;
    --tint-grey: #17212f;
    --tint-bd-grey: #4c5e75;

    /* Swatches in floating toolbar remain recognizable and vibrant */
    --swatch-red: #ef4444;
    --swatch-orange: #f59e0b;
    --swatch-green: #22c55e;
    --swatch-blue: #3b82c4;
    --swatch-purple: #a855f7;
    --swatch-grey: #94a3b8;

    --overlay-miss: rgba(11, 15, 23, 0.75);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --ink-900: #0b0f17;
        --ink-850: #111827;
        --ink-800: #0f172a;
        --ink-750: #1e293b;
        --ink-700: #1e293b;
        --ink-600: #334155;
        --line: rgba(255, 255, 255, 0.08);
        --line-strong: rgba(255, 255, 255, 0.16);
        --overlay: rgba(255, 255, 255, 0.06);
        --overlay-strong: rgba(255, 255, 255, 0.12);

        --text: #f8fafc;
        --text-dim: #94a3b8;
        --text-faint: #64748b;

        --accent: #3b82f6;
        --accent-text: #60a5fa;
        --accent-bright: #60a5fa;
        --accent-deep: #2563eb;
        --accent-soft: rgba(59, 130, 246, 0.18);
        --accent-ink: #ffffff;

        --danger: #f87171;
        --danger-soft: rgba(239, 68, 68, 0.18);

        --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5);
        --shadow: 0 14px 36px rgba(0, 0, 0, 0.6);
        --shadow-glow: 0 6px 24px rgba(59, 130, 246, 0.35);

        /* Workflow status colors */
        --color-status-todo: #a8a29e;
        --color-status-wip: #60a5fa;
        --color-status-done: #4ade80;
        --color-status-delegated: #c084fc;
        --color-status-blocked: #f87171;

        /* Priority colors */
        --color-priority-low: #a8a29e;
        --color-priority-medium: #60a5fa;
        --color-priority-high: #fbbf24;
        --color-priority-urgent: #f87171;

        /* Node color tints */
        --tint-red: #2a1518;
        --tint-bd-red: #8f2832;
        --tint-orange: #281a0f;
        --tint-bd-orange: #954112;
        --tint-green: #102618;
        --tint-bd-green: #1f6b3b;
        --tint-blue: #112236;
        --tint-bd-blue: #23589e;
        --tint-purple: #221434;
        --tint-bd-purple: #6e2d9b;
        --tint-grey: #17212f;
        --tint-bd-grey: #4c5e75;

        /* Swatches in floating toolbar */
        --swatch-red: #ef4444;
        --swatch-orange: #f59e0b;
        --swatch-green: #22c55e;
        --swatch-blue: #3b82c4;
        --swatch-purple: #a855f7;
        --swatch-grey: #94a3b8;

        --overlay-miss: rgba(11, 15, 23, 0.75);
    }
}

/* --- Status & Priority Utility Chip Tokens -------------------------------- */
.mm-s-todo, .status-todo { --chip: var(--color-status-todo, #8f8879); }
.mm-s-wip, .status-wip { --chip: var(--color-status-wip, #3b82c4); }
.mm-s-done, .status-done { --chip: var(--color-status-done, #4a9d5b); }
.mm-s-delegated, .status-delegated { --chip: var(--color-status-delegated, #8a5bd0); }
.mm-s-blocked, .status-blocked { --chip: var(--color-status-blocked, #c8443b); }

.mm-p-low, .priority-low { --chip: var(--color-priority-low, #8f8879); }
.mm-p-medium, .priority-medium { --chip: var(--color-priority-medium, #3b82c4); }
.mm-p-high, .priority-high { --chip: var(--color-priority-high, #d98324); }
.mm-p-urgent, .priority-urgent { --chip: var(--color-priority-urgent, #c8443b); }

/* --- Node Color Tints ---------------------------------------------------- */
.mm-c-red { --tint: var(--tint-red); --tint-bd: var(--tint-bd-red); --swatch: var(--swatch-red); }
.mm-c-orange { --tint: var(--tint-orange); --tint-bd: var(--tint-bd-orange); --swatch: var(--swatch-orange); }
.mm-c-green { --tint: var(--tint-green); --tint-bd: var(--tint-bd-green); --swatch: var(--swatch-green); }
.mm-c-blue { --tint: var(--tint-blue); --tint-bd: var(--tint-bd-blue); --swatch: var(--swatch-blue); }
.mm-c-purple { --tint: var(--tint-purple); --tint-bd: var(--tint-bd-purple); --swatch: var(--swatch-purple); }
.mm-c-grey { --tint: var(--tint-grey); --tint-bd: var(--tint-bd-grey); --swatch: var(--swatch-grey); }

/* --- Full-bleed canvas layout ------------------------------------------- */
.content:has(.mm-stage) {
    padding: 0;
    overflow: hidden;
}

/* --- Theme Icon Visibility ---------------------------------------------- */
[data-theme="dark"] .theme-icon-sun { display: block; }
[data-theme="dark"] .theme-icon-moon { display: none; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .theme-icon-sun { display: block; }
    :root:not([data-theme="light"]) .theme-icon-moon { display: none; }
}

html, body {
    font-family: var(--font-ui);
    background-color: var(--ink-900);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body {
    margin: 0;
}

::selection {
    background: var(--accent-soft);
    color: var(--text);
}

a, .btn-link {
    color: var(--accent-text);
    text-decoration: none;
}

a:hover {
    color: var(--accent-text);
    text-decoration: underline;
}

/* --- Scrollbars ---------------------------------------------------------- */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--ink-600) transparent;
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-thumb {
    background: var(--ink-600);
    border-radius: 8px;
    border: 2px solid transparent;
    background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--line-strong);
    background-clip: content-box;
}

/* --- Buttons (override Bootstrap) ---------------------------------------- */
.btn {
    --bs-btn-focus-box-shadow: none;
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: 0.9rem;
    letter-spacing: 0.01em;
    border-radius: 10px;
    border: 1px solid transparent;
    padding: 0.5rem 0.95rem;
    transition: background-color 0.15s ease, border-color 0.15s ease,
                color 0.15s ease, box-shadow 0.15s ease, transform 0.06s ease;
}

.btn:active {
    transform: translateY(1px);
}

.btn:disabled,
.btn.disabled {
    opacity: 0.55;
}

.btn-primary {
    color: var(--accent-ink);
    background: linear-gradient(180deg, var(--accent-bright), var(--accent));
    border-color: transparent;
    box-shadow: var(--shadow-glow);
}

.btn-primary:hover,
.btn-primary:focus {
    color: var(--accent-ink);
    background: linear-gradient(180deg, #93c5fd, var(--accent-bright));
    box-shadow: 0 8px 30px rgba(37, 99, 235, 0.4);
}

.btn-outline-secondary {
    color: var(--text-dim);
    background: transparent;
    border-color: var(--line-strong);
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
    color: var(--text);
    background: var(--overlay);
    border-color: var(--line-strong);
}

.btn-outline-danger {
    color: var(--danger);
    background: transparent;
    border-color: rgba(200, 68, 59, 0.4);
}

.btn-outline-danger:hover,
.btn-outline-danger:focus {
    color: #fff;
    background: var(--danger);
    border-color: var(--danger);
}

.btn-sm {
    padding: 0.3rem 0.6rem;
    font-size: 0.8rem;
    border-radius: 8px;
}

.btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--accent-soft);
}

/* --- Inputs -------------------------------------------------------------- */
.form-control {
    background-color: var(--ink-750);
    border: 1px solid var(--line);
    color: var(--text);
    border-radius: 10px;
    padding: 0.5rem 0.8rem;
    font-family: var(--font-ui);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-control::placeholder {
    color: var(--text-faint);
}

.form-control:focus {
    background-color: var(--ink-750);
    border-color: var(--accent);
    color: var(--text);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus,
.form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 3px var(--accent-soft);
}

h1, h2, h3 {
    color: var(--text);
}

h1:focus {
    outline: none;
}

/* --- Auth (sign in / register / sign out) -------------------------------- */
.auth-shell {
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}

.auth-card {
    width: 100%;
    max-width: 380px;
    background: var(--ink-750);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    padding: 2rem 1.8rem;
}

.auth-title {
    margin: 0 0 0.3rem;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.6rem;
    letter-spacing: -0.01em;
}

.auth-sub {
    margin: 0 0 1.4rem;
    color: var(--text-dim);
    font-size: 0.92rem;
}

.auth-label {
    display: block;
    margin-bottom: 1rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-dim);
}

.auth-label .form-control {
    margin-top: 0.35rem;
    width: 100%;
}

.auth-submit {
    width: 100%;
    margin-top: 0.4rem;
}

.auth-alt {
    margin: 1.2rem 0 0;
    text-align: center;
    font-size: 0.88rem;
    color: var(--text-dim);
}

.auth-divider {
    display: flex;
    align-items: center;
    text-align: center;
    margin: 1.25rem 0;
    color: var(--text-dim);
    font-size: 0.8rem;
    font-weight: 500;
}

.auth-divider::before,
.auth-divider::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid var(--line);
}

.auth-divider span {
    padding: 0 0.75rem;
    font-size: 0.78rem;
    letter-spacing: 0.02em;
}

.auth-google-btn {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    font-weight: 500;
    font-size: 0.92rem;
    padding: 0.6rem 1rem;
    background: var(--ink-700);
    border-color: var(--line-strong);
    color: var(--text);
    border-radius: var(--radius);
    transition: all 0.15s ease;
    text-decoration: none;
}

.auth-google-btn:hover {
    background: var(--ink-600);
    border-color: var(--accent);
    color: var(--text);
}

.auth-error {
    margin: 0 0 1rem;
    padding: 0.6rem 0.8rem;
    border-radius: 10px;
    background: var(--danger-soft);
    color: var(--danger);
    font-size: 0.88rem;
}

.auth-info {
    margin: 0 0 1rem;
    padding: 0.6rem 0.8rem;
    border-radius: 10px;
    background: var(--accent-soft);
    color: var(--accent-text);
    font-size: 0.88rem;
}

/* --- Template leftovers (validation / error UI) -------------------------- */
.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid var(--danger);
}

.validation-message {
    color: var(--danger);
}

.blazor-error-boundary {
    background: #b32121;
    padding: 1rem 1rem 1rem 1.2rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }