/* ============================================================
   FlowKlar – Global Shared Stylesheet
   ============================================================ */

/* === Design Tokens (CSS Custom Properties) ===
   Alle Farbwerte sind hier zentral definiert.
   Ähnliche Farben wurden zusammengeführt (z. B. grays, reds).
   ============================================================ */
:root {
    /* ── Neutral / Slate ─────────────────────────────────── */
    --clr-white:        #fff;
    --clr-slate-50:     #f8fafc;   /* page bg, table headers, very light surfaces */
    --clr-slate-100:    #f1f5f9;   /* tag bg, list separators, subtle fills */
    --clr-slate-200:    #e2e8f0;   /* borders, dividers */
    --clr-slate-300:    #cbd5e1;   /* hover borders, input borders */
    --clr-slate-400:    #94a3b8;   /* placeholder text, muted icons */
    --clr-slate-500:    #64748b;   /* secondary text, captions */
    --clr-slate-600:    #475569;   /* body text, card body */
    --clr-slate-700:    #334155;   /* form labels, medium headings */
    --clr-slate-800:    #1e293b;   /* primary text, dark surfaces */
    --clr-slate-900:    #0f172a;   /* darkest text, sidebar bg */

    /* ── Blue / Primary ──────────────────────────────────── */
    --clr-blue-50:      #eff6ff;   /* very light blue bg */
    --clr-blue-100:     #dbeafe;   /* status in-progress bg, tag bg */
    --clr-blue-200:     #bfdbfe;   /* tag pill border, active tag */
    --clr-blue-300:     #93c5fd;   /* bar chart, tag hover border */
    --clr-blue-400:     #60a5fa;   /* brand icon, sidebar footer hover */
    --clr-blue-500:     #3b82f6;   /* primary accent, focus ring */
    --clr-blue-600:     #2563eb;   /* links, active tabs, today dot */
    --clr-blue-700:     #1d4ed8;   /* project badge */
    --clr-blue-800:     #1e40af;   /* tag text, status in-progress text */
    --clr-blue-900:     #1e3a8a;   /* active sub-link hover */

    /* ── Green / Emerald (success) ───────────────────────── */
    --clr-green-50:     #f0fdf4;   /* success alert bg */
    --clr-green-100:    #dcfce7;   /* status completed bg */
    --clr-green-200:    #bbf7d0;   /* success alert border */
    --clr-green-500:    #22c55e;   /* status completed dot, chart bar */
    --clr-green-600:    #16a34a;   /* success button, toast success, valid outline */
    --clr-green-700:    #15803d;   /* success button hover */
    --clr-green-800:    #166534;   /* success alert text, status completed text */
    --clr-emerald-100:  #d1fae5;   /* start node badge bg */
    --clr-emerald-500:  #10b981;   /* completed progress bar, project completed dot */
    --clr-emerald-900:  #065f46;   /* start node badge text */

    /* ── Amber / Yellow (warning) ────────────────────────── */
    --clr-amber-50:     #fffbeb;   /* calendar in-progress bg */
    --clr-amber-100:    #fef3c7;   /* locked banner bg, status open bg, draft badge */
    --clr-amber-400:    #fbbf24;   /* beta badge bg, node open border */
    --clr-amber-500:    #f59e0b;   /* warning button, calendar dot, amber accent */
    --clr-amber-600:    #d97706;   /* warning button hover */
    --clr-amber-700:    #b45309;   /* calendar in-progress text */
    --clr-amber-800:    #92400e;   /* locked banner text, status open text */
    --clr-amber-900:    #78350f;   /* beta badge text */

    /* ── Red (danger / error) ────────────────────────────── */
    --clr-red-50:       #fef2f2;   /* error alert bg, danger hover bg */
    --clr-red-100:      #fee2e2;   /* priority critical bg, btn-icon hover */
    --clr-red-200:      #fecaca;   /* error alert border, danger zone border */
    --clr-red-300:      #fca5a5;   /* danger button border */
    --clr-red-400:      #f87171;   /* danger button hover border */
    --clr-red-500:      #ef4444;   /* indicator dot red, notification badge */
    --clr-red-600:      #dc2626;   /* danger text, error, invalid outline, overdue */
    --clr-red-800:      #991b1b;   /* priority critical text, blazor error bg */

    /* ── Orange (high priority) ──────────────────────────── */
    --clr-orange-100:   #ffedd5;   /* priority high bg */
    --clr-orange-500:   #f97316;   /* high-priority card accent */
    --clr-orange-700:   #c2410c;   /* priority high text */

    /* ── Violet / Purple (roles, admin) ──────────────────── */
    --clr-violet-50:    #f5f3ff;   /* calendar followup bg */
    --clr-violet-100:   #ede9fe;   /* role admin bg */
    --clr-violet-200:   #ddd6fe;   /* role chip bg */
    --clr-violet-400:   #a78bfa;   /* user bar gradient end */
    --clr-violet-500:   #8b5cf6;   /* stat accent violet, calendar followup dot */
    --clr-violet-600:   #7c3aed;   /* role chip small text */
    --clr-violet-700:   #6d28d9;   /* role admin text */
    --clr-violet-800:   #5b21b6;   /* role chip text */

    /* ── Indigo (tag filter highlights) ─────────────────── */
    --clr-indigo-100:   #e0e7ff;   /* tag bar item hover bg */
    --clr-indigo-200:   #c7d2fe;   /* tag bar item hover border */
    --clr-indigo-800:   #3730a3;   /* tag bar item hover text */

    /* ── Teal (create / new-item actions) ────────────────── */
    --clr-teal-50:      #f0fdfa;   /* create row hover */
    --clr-teal-100:     #ccfbf1;   /* create badge bg */
    --clr-teal-200:     #99f6e4;   /* lpm toggle hint border */
    --clr-teal-600:     #0d9488;   /* lpm toggle hint text */
    --clr-teal-700:     #0f766e;   /* create row text, create badge text */

    /* ── Cyan (charts, analytics) ────────────────────────── */
    --clr-cyan-500:     #06b6d4;   /* stat accent cyan */

    /* ── Sky (assignee chips, popover accents) ───────────── */
    --clr-sky-100:      #e0f2fe;   /* assignee chip bg */
    --clr-sky-300:      #7dd3fc;   /* license modal eyebrow */
    --clr-sky-700:      #0369a1;   /* assignee chip text */

    /* ── Pink (inline code) ──────────────────────────────── */
    --clr-pink-700:     #be185d;   /* inline code color */

    /* ── Navy (license pricing modal gradient) ───────────── */
    --clr-navy-900:     #152c48;
    --clr-navy-800:     #172f50;
    --clr-navy-700:     #1e4072;

    /* ── Semantic / Fixed (never change in dark mode) ─────── */
    --clr-always-white: #fff;
    --clr-code-bg:      #0f172a;
    --clr-code-text:    #e2e8f0;

    /* ── Adaptive Shadows ─────────────────────────────────── */
    --shadow-xs:        0 1px 4px rgba(0, 0, 0, 0.06);
    --shadow-sm:        0 1px 6px rgba(0, 0, 0, 0.04);
    --shadow-md:        0 2px 12px rgba(0, 0, 0, 0.07);
    --shadow-lg:        0 8px 30px rgba(0, 0, 0, 0.12);
}

/* ============================================================
   Dark Mode – Variable Overrides
   Applied when:
     • data-theme="dark" is set on <html> (manual Dark)
     • System prefers dark AND no data-theme attribute (Auto)
   ============================================================ */

html[data-theme="dark"] {
    color-scheme: dark;

    /* ── Surfaces ─────────────────────────────────────────── */
    --clr-white:        #1b2a3d;   /* card / modal bg */
    --clr-slate-50:     #0d1724;   /* page background */
    --clr-slate-100:    #1b2a3d;   /* subtle fills (= card bg) */
    --clr-slate-200:    #253d56;   /* borders */
    --clr-slate-300:    #365470;   /* hover borders */
    --clr-slate-400:    #6888a8;   /* muted icons */
    --clr-slate-500:    #8aa3bf;   /* secondary text */
    --clr-slate-600:    #a8c0d6;   /* body text */
    --clr-slate-700:    #c4d5e7;   /* labels */
    --clr-slate-800:    #dce8f2;   /* primary text */
    --clr-slate-900:    #edf3f8;   /* headings */

    /* ── Blue accents (light bg variants darkened) ────────── */
    --clr-blue-50:      #0d2348;
    --clr-blue-100:     #163767;

    /* ── Green accents ────────────────────────────────────── */
    --clr-green-50:     #052e16;
    --clr-green-100:    #14532d;
    --clr-green-200:    #166534;

    /* ── Red accents ──────────────────────────────────────── */
    --clr-red-50:       #3b0a0a;
    --clr-red-100:      #7f1d1d;
    --clr-red-200:      #991b1b;
    --clr-red-300:      #b91c1c;

    /* ── Amber accents ────────────────────────────────────── */
    --clr-amber-50:     #451a03;
    --clr-amber-100:    #78350f;

    /* ── Orange ───────────────────────────────────────────── */
    --clr-orange-100:   #431407;

    /* ── Violet / Purple ──────────────────────────────────── */
    --clr-violet-50:    #1a1040;
    --clr-violet-100:   #2d1a60;
    --clr-violet-200:   #4c2d8a;

    /* ── Teal ─────────────────────────────────────────────── */
    --clr-teal-50:      #022c22;
    --clr-teal-100:     #064e3b;
    --clr-teal-200:     #065f46;

    /* ── Sky / Cyan ───────────────────────────────────────── */
    --clr-sky-100:      #0c3357;

    /* ── Indigo ───────────────────────────────────────────── */
    --clr-indigo-100:   #1e2a5e;
    --clr-indigo-200:   #312e81;

    /* ── Emerald ──────────────────────────────────────────── */
    --clr-emerald-100:  #064e3b;

    /* ── Pink (brighter for dark surfaces) ─────────────────── */
    --clr-pink-700:     #f472b6;

    /* ── Accent text (light on dark coloured backgrounds) ──── */
    --clr-blue-700:     #93c5fd;
    --clr-blue-800:     #bfdbfe;
    --clr-green-700:    #86efac;
    --clr-green-800:    #bbf7d0;
    --clr-amber-700:    #fcd34d;
    --clr-amber-800:    #fde68a;
    --clr-orange-700:   #fb923c;
    --clr-violet-700:   #c4b5fd;
    --clr-emerald-900:  #6ee7b7;
    --clr-sky-700:      #38bdf8;
    --clr-teal-700:     #2dd4bf;
    --clr-indigo-800:   #a5b4fc;

    /* ── Shadows (stronger on dark surfaces) ──────────────── */
    --shadow-xs:        0 1px 4px rgba(0, 0, 0, 0.4);
    --shadow-sm:        0 2px 8px rgba(0, 0, 0, 0.35);
    --shadow-md:        0 4px 16px rgba(0, 0, 0, 0.45);
    --shadow-lg:        0 8px 32px rgba(0, 0, 0, 0.5);
}

/* Sidebar & mobile header always stay dark – override scoped styles */
html[data-theme="dark"] .sidebar,
html[data-theme="dark"] .mobile-header {
    background: #09111e;
}

html[data-theme="dark"] .mobile-header {
    color: var(--clr-slate-400);
}

html[data-theme="dark"] .sidebar-brand-text,
html[data-theme="dark"] .mobile-brand {
    color: var(--clr-always-white);
}

html[data-theme="dark"] .menu-toggle {
    color: var(--clr-slate-500);
}

html[data-theme="dark"] .menu-toggle:hover {
    background: #162135;
    color: var(--clr-slate-300);
}

html[data-theme="dark"] .priority-critical {
    color: var(--clr-red-400);
}

/* ── Auto dark mode (system preference, no manual override) ── */

@media (prefers-color-scheme: dark) {
    html:not([data-theme]) {
        color-scheme: dark;

        --clr-white:        #1b2a3d;
        --clr-slate-50:     #0d1724;
        --clr-slate-100:    #1b2a3d;
        --clr-slate-200:    #253d56;
        --clr-slate-300:    #365470;
        --clr-slate-400:    #6888a8;
        --clr-slate-500:    #8aa3bf;
        --clr-slate-600:    #a8c0d6;
        --clr-slate-700:    #c4d5e7;
        --clr-slate-800:    #dce8f2;
        --clr-slate-900:    #edf3f8;

        --clr-blue-50:      #0d2348;
        --clr-blue-100:     #163767;
        --clr-green-50:     #052e16;
        --clr-green-100:    #14532d;
        --clr-green-200:    #166534;
        --clr-red-50:       #3b0a0a;
        --clr-red-100:      #7f1d1d;
        --clr-red-200:      #991b1b;
        --clr-red-300:      #b91c1c;
        --clr-amber-50:     #451a03;
        --clr-amber-100:    #78350f;
        --clr-orange-100:   #431407;
        --clr-violet-50:    #1a1040;
        --clr-violet-100:   #2d1a60;
        --clr-violet-200:   #4c2d8a;
        --clr-teal-50:      #022c22;
        --clr-teal-100:     #064e3b;
        --clr-teal-200:     #065f46;
        --clr-sky-100:      #0c3357;
        --clr-indigo-100:   #1e2a5e;
        --clr-indigo-200:   #312e81;
        --clr-emerald-100:  #064e3b;

        --clr-pink-700:     #f472b6;

        --clr-blue-700:     #93c5fd;
        --clr-blue-800:     #bfdbfe;
        --clr-green-700:    #86efac;
        --clr-green-800:    #bbf7d0;
        --clr-amber-700:    #fcd34d;
        --clr-amber-800:    #fde68a;
        --clr-orange-700:   #fb923c;
        --clr-violet-700:   #c4b5fd;
        --clr-emerald-900:  #6ee7b7;
        --clr-sky-700:      #38bdf8;
        --clr-teal-700:     #2dd4bf;
        --clr-indigo-800:   #a5b4fc;

        --shadow-xs:        0 1px 4px rgba(0, 0, 0, 0.4);
        --shadow-sm:        0 2px 8px rgba(0, 0, 0, 0.35);
        --shadow-md:        0 4px 16px rgba(0, 0, 0, 0.45);
        --shadow-lg:        0 8px 32px rgba(0, 0, 0, 0.5);
    }

    html:not([data-theme]) .sidebar,
    html:not([data-theme]) .mobile-header {
        background: #09111e;
    }

    html:not([data-theme]) .mobile-header {
        color: var(--clr-slate-400);
    }

    html:not([data-theme]) .sidebar-brand-text,
    html:not([data-theme]) .mobile-brand {
        color: var(--clr-always-white);
    }

    html:not([data-theme]) .menu-toggle {
        color: var(--clr-slate-500);
    }

    html:not([data-theme]) .menu-toggle:hover {
        background: #162135;
        color: var(--clr-slate-300);
    }

    html:not([data-theme]) .priority-critical {
        color: var(--clr-red-400);
    }
}

/* === Reset & Base === */
*, *::before, *::after {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 15px;
    line-height: 1.6;
    color: var(--clr-slate-800);
    background: var(--clr-slate-50);
    height: 100%;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
    margin-top: 0;
    font-weight: 600;
    color: var(--clr-slate-900);
    line-height: 1.3;
}

h1 { font-size: 1.5rem; }
h2 { font-size: 1.2rem; }
h3 { font-size: 1.05rem; }

a {
    color: var(--clr-blue-600);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

h1:focus { outline: none; }

/* === SVG Icon === */
.icon {
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 0;
}

.brand-icon {
    stroke: var(--clr-blue-400);
}

/* === Cards === */
.card-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.card {
    background: var(--clr-white);
    border-radius: 10px;
    border: 1px solid var(--clr-slate-200);
    padding: 1.1rem;
    transition: box-shadow 0.2s, border-color 0.2s;
}

.card:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--clr-slate-300);
}

.card-title {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
    color: var(--clr-slate-900);
}

.card-subtitle {
    font-size: 0.82rem;
    color: var(--clr-slate-500);
    margin-bottom: 0.6rem;
}

.card-body {
    font-size: 0.88rem;
    color: var(--clr-slate-600);
}

/* === Tags === */
.tag {
    display: inline-block;
    background: var(--clr-slate-100);
    color: var(--clr-slate-600);
    border-radius: 6px;
    padding: 0.1rem 0.5rem;
    font-size: 0.78rem;
    font-weight: 500;
}

.tags-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

/* === Tag Pills (TagPicker component) === */
.tag-pill {
    display: inline-flex;
    align-items: center;
    height: 28px;
    background: var(--clr-blue-50);
    color: var(--clr-blue-800);
    border: 1px solid var(--clr-blue-200);
    border-radius: 99px;
    padding: 0 0.75rem;
    font-size: 0.8rem;
    font-weight: 500;
    white-space: nowrap;
    box-sizing: border-box;
}

.tag-pill--editable {
    padding-right: 0.35rem;
    transition: background 0.12s;
}

.tag-pill--editable:hover {
    background: var(--clr-blue-100);
}

.tag-pill-remove {
    background: none;
    border: none;
    color: inherit;
    opacity: 0.55;
    cursor: pointer;
    padding: 0;
    margin-left: 0.3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    transition: opacity 0.12s, background 0.12s;
    flex-shrink: 0;
}

.tag-pill-remove:hover {
    opacity: 1;
    background: rgba(30, 64, 175, 0.12);
}

/* === Buttons === */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    border: 1px solid transparent;
    font-size: 0.88rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, box-shadow 0.15s, border-color 0.15s;
    text-decoration: none !important;
    line-height: 1.4;
    white-space: nowrap;
    font-family: inherit;
}

.btn:hover {
    text-decoration: none !important;
}

.btn:focus-visible {
    outline: 2px solid var(--clr-blue-500);
    outline-offset: 2px;
}

.btn-primary {
    background: var(--clr-slate-800);
    color: var(--clr-white);
    border-color: var(--clr-slate-800);
}

.btn-primary:hover {
    background: var(--clr-slate-900);
}

.btn-secondary {
    background: var(--clr-white);
    color: var(--clr-slate-700);
    border-color: var(--clr-slate-300);
}

.btn-secondary:hover {
    background: var(--clr-slate-50);
    border-color: var(--clr-slate-400);
}

.btn-success {
    background: var(--clr-green-600);
    color: var(--clr-always-white);
    border-color: var(--clr-green-600);
}

.btn-success:hover {
    background: var(--clr-green-700);
}

.btn-warning {
    background: var(--clr-amber-500);
    color: var(--clr-always-white);
    border-color: var(--clr-amber-500);
}

.btn-warning:hover {
    background: var(--clr-amber-600);
}

.btn-danger {
    background: var(--clr-white);
    color: var(--clr-red-600);
    border-color: var(--clr-red-300);
}

.btn-danger:hover {
    background: var(--clr-red-50);
    border-color: var(--clr-red-400);
}

.btn-sm {
    padding: 0.3rem 0.65rem;
    font-size: 0.82rem;
}

.btn-group {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.btn-icon {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--clr-slate-400);
    padding: 0.15rem;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
}

.btn-icon:hover {
    color: var(--clr-red-600);
    background: var(--clr-red-100);
}

.btn-icon-only {
    padding: 0.35rem;
    min-width: unset;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* === Forms === */
.form-group {
    margin-bottom: 1rem;
}

.form-group label {
    display: block;
    font-weight: 500;
    margin-bottom: 0.3rem;
    font-size: 0.88rem;
    color: var(--clr-slate-700);
}

.form-control {
    width: 100%;
    padding: 0.55rem 0.75rem;
    border: 1px solid var(--clr-slate-300);
    border-radius: 8px;
    font-size: 0.88rem;
    background: var(--clr-white);
    color: var(--clr-slate-800);
    transition: border-color 0.15s, box-shadow 0.15s;
    font-family: inherit;
}

.form-control:focus {
    outline: none;
    border-color: var(--clr-blue-500);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}

textarea.form-control {
    resize: vertical;
    min-height: 80px;
}

/* === Search === */
.search-bar {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
}

.search-bar .form-control {
    flex: 1;
}

/* === Toolbar === */
.page-toolbar {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

/* === Back Link === */
.back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.82rem;
    color: var(--clr-slate-500) !important;
    text-decoration: none !important;
    margin-bottom: 0.25rem;
}

.back-link:hover {
    color: var(--clr-slate-700) !important;
    text-decoration: none !important;
}

/* === Filter Bar === */
.filter-bar {
    display: flex;
    gap: 0.4rem;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}

/* === Progress === */
.progress-bar-container {
    background: var(--clr-slate-200);
    border-radius: 999px;
    height: 6px;
    overflow: hidden;
    margin-top: 0.4rem;
}

.progress-bar-fill {
    background: var(--clr-slate-800);
    height: 100%;
    border-radius: 999px;
    transition: width 0.3s;
}

.progress-text {
    font-size: 0.78rem;
    color: var(--clr-slate-500);
    margin-top: 0.2rem;
}

/* === Empty State === */
.empty-state {
    text-align: center;
    padding: 2.5rem 1rem;
    color: var(--clr-slate-400);
}

.empty-state p {
    font-size: 0.95rem;
    margin-bottom: 1rem;
}

/* === Section Header === */
.section-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.section-header h2 {
    margin-bottom: 0;
}

.indicator-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}

.indicator-dot.red    { background: var(--clr-red-500); }
.indicator-dot.blue   { background: var(--clr-blue-500); }
.indicator-dot.green  { background: var(--clr-green-500); }
.indicator-dot.amber  { background: var(--clr-amber-500); }

/* === Date Row === */
.date-row {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* === Validation === */
.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--clr-green-600);
}

.invalid {
    outline: 1px solid var(--clr-red-600);
}

.validation-message {
    color: var(--clr-red-600);
}

/* === Blazor Error UI === */
.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, var(--clr-red-800);
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

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

/* === Alerts === */
.alert {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.65rem 0.85rem;
    border-radius: 8px;
    font-size: 0.85rem;
    margin-bottom: 1rem;
}

.alert-success {
    background: var(--clr-green-50);
    color: var(--clr-green-800);
    border: 1px solid var(--clr-green-200);
}

.alert-error {
    background: var(--clr-red-50);
    color: var(--clr-red-600);
    border: 1px solid var(--clr-red-200);
}

/* === Role Badges === */
.role-admin {
    background: var(--clr-violet-100);
    color: var(--clr-violet-700);
}

.role-user {
    background: var(--clr-slate-100);
    color: var(--clr-slate-600);
}

/* === Role Chips === */
.role-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.1rem 0.5rem;
    border-radius: 6px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--chip-color, var(--clr-slate-600));
    background: color-mix(in srgb, var(--chip-color, var(--clr-slate-600)) 12%, white);
    white-space: nowrap;
}

.role-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    align-items: center;
}

/* === Overdue === */
.overdue {
    color: var(--clr-red-600) !important;
    font-weight: 600;
}

/* === Edit Form === */
.edit-form {
    padding: 0.25rem 0;
}

.edit-form .form-group {
    margin-bottom: 0.75rem;
}

/* === Toggle Label === */
.toggle-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-size: 0.88rem;
}

.toggle-label input[type="checkbox"] {
    margin: 0;
}

/* === Checkbox Label === */
.checkbox-label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.88rem;
    cursor: pointer;
}

.checkbox-label input[type="checkbox"] {
    accent-color: var(--clr-slate-800);
    width: 1rem;
    height: 1rem;
}

/* === Status Badges === */
.status-badge {
    display: inline-block;
    padding: 0.15rem 0.6rem;
    border-radius: 6px;
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
}

.status-open {
    background: var(--clr-amber-100);
    color: var(--clr-amber-800);
}

.status-inprogress {
    background: var(--clr-blue-100);
    color: var(--clr-blue-800);
}

.status-completed {
    background: var(--clr-green-100);
    color: var(--clr-green-800);
}

.status-cancelled {
    background: var(--clr-slate-100);
    color: var(--clr-slate-500);
    text-decoration: line-through;
}

/* === Project Status Badges === */
.project-status-badge {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.15rem 0.5rem;
    border-radius: 6px;
    white-space: nowrap;
}

.project-status-badge.status-active    { background: var(--clr-blue-100);    color: var(--clr-blue-700); }
.project-status-badge.status-completed { background: var(--clr-emerald-100); color: var(--clr-emerald-900); text-decoration: none; }
.project-status-badge.status-cancelled { background: var(--clr-slate-100);   color: var(--clr-slate-500); text-decoration: none; }

/* === Priority Badges === */
.priority-badge {
    display: inline-block;
    padding: 0.15rem 0.6rem;
    border-radius: 6px;
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
}

.priority-low {
    background: var(--clr-slate-100);
    color: var(--clr-slate-500);
}

.priority-normal {
    background: var(--clr-blue-100);
    color: var(--clr-blue-800);
}

.priority-high {
    background: var(--clr-orange-100);
    color: var(--clr-orange-700);
}

.priority-critical {
    background: var(--clr-red-100);
    color: var(--clr-red-800);
}

/* === Detail Sections === */
.detail-section {
    background: var(--clr-white);
    border-radius: 10px;
    border: 1px solid var(--clr-slate-200);
    padding: 0.85rem;
    margin-bottom: 0.75rem;
}

.detail-section h2 {
    margin-bottom: 0.5rem;
    font-size: 1rem;
}

details.detail-section > summary {
    list-style: none;
}

details.detail-section > summary::-webkit-details-marker {
    display: none;
}

.section-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
}

.section-toggle h2 {
    margin-bottom: 0.5rem;
}

.toggle-arrow {
    color: var(--clr-slate-400);
    transition: transform 0.2s;
    flex-shrink: 0;
}

details.detail-section:not([open]) .toggle-arrow {
    transform: rotate(-90deg);
}

.detail-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 0.75rem;
    margin-bottom: 0.15rem;
}

.detail-field {
    min-width: 0;
}

.detail-field dt {
    font-size: 0.7rem;
    color: var(--clr-slate-500);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.1rem;
}

.detail-field dd {
    margin: 0 0 0.5rem 0;
    font-size: 0.85rem;
}

/* === Checklist === */
.checklist {
    list-style: none;
    padding: 0;
    margin: 0;
}

.checklist-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.7rem 0;
    border-bottom: 1px solid var(--clr-slate-100);
}

.checklist-item:last-child {
    border-bottom: none;
}

.checklist-content {
    flex: 1;
    min-width: 0;
}

.checklist-label {
    font-weight: 500;
    font-size: 0.92rem;
}

.checklist-label.done {
    text-decoration: line-through;
    color: var(--clr-slate-400);
}

.checklist-desc {
    font-size: 0.8rem;
    color: var(--clr-slate-500);
    margin-top: 0.1rem;
}

.checklist-number {
    font-size: 0.78rem;
    color: var(--clr-slate-400);
    font-weight: 600;
    min-width: 1.5rem;
    text-align: center;
    margin-top: 0.15rem;
}

.checklist-step-row {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
    margin-bottom: 0.5rem;
}

.checklist-step-inputs {
    flex: 1;
    min-width: 0;
}

/* === Attachments === */
.attachment-upload {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.attachment-hint {
    font-size: 0.78rem;
    color: var(--clr-slate-400);
}

.attachment-list {
    list-style: none;
    padding: 0;
    margin: 0.5rem 0 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.attachment-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--clr-slate-50);
    border: 1px solid var(--clr-slate-200);
    border-radius: 8px;
    padding: 0.5rem 0.75rem;
}

.attachment-info {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-width: 0;
}

.attachment-icon {
    color: var(--clr-slate-500);
    flex-shrink: 0;
}

.attachment-name {
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--clr-slate-800);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.attachment-meta {
    font-size: 0.75rem;
    color: var(--clr-slate-400);
}

.attachment-actions {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-shrink: 0;
}

/* === Danger Zone === */
.danger-zone {
    border-color: var(--clr-red-200);
}

.danger-zone h2 {
    color: var(--clr-red-600);
    font-size: 0.95rem;
}

/* === Shared Editor Styles (Workflow / Project) === */

.properties-panel {
    position: fixed;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    width: 280px;
    background: var(--clr-white);
    border: 1px solid var(--clr-slate-200);
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
    z-index: 50;
    overflow: hidden;
}

.panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--clr-slate-200);
    background: var(--clr-slate-50);
    cursor: grab;
    user-select: none;
}

.panel-header:active {
    cursor: grabbing;
}

.panel-header h3 {
    margin: 0;
    font-size: 0.95rem;
}

.panel-body {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.panel-info {
    font-size: 0.85rem;
    color: var(--clr-slate-500);
}

.node-connector {
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    cursor: crosshair;
    padding: 4px;
    z-index: 5;
}

.connector-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--clr-slate-400);
    border: 2px solid var(--clr-always-white);
    transition: background 0.15s, transform 0.15s;
}

.node-connector:hover .connector-dot {
    background: var(--clr-blue-500);
    transform: scale(1.3);
}

.node-footer {
    position: relative;
    height: auto;
    margin-top: 0.5rem;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.25rem;
}

.node-action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: transparent;
    border: none;
    color: var(--clr-slate-400);
    cursor: pointer;
    padding: 0;
    transition: color 0.15s, background 0.15s;
    border-radius: 3px;
    pointer-events: auto;
}

/* ============================================================
   Form Editor – Drag & Drop (global styles for body-appended elements)
   ============================================================ */

/* Body state: disable text selection & set grab cursor globally while dragging */
body.fe-is-dragging {
    cursor: grabbing !important;
    -webkit-user-select: none;
    user-select: none;
}

body.fe-is-dragging * {
    cursor: grabbing !important;
}

/* Ghost element following cursor */
.fe-ghost {
    position: fixed;
    z-index: 10000;
    padding: 0.4rem 0.75rem;
    background: var(--clr-white, #fff);
    border: 1px solid var(--clr-blue-400, #60a5fa);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15), 0 2px 6px rgba(59, 130, 246, 0.2);
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--clr-slate-700, #334155);
    white-space: nowrap;
    pointer-events: none;
    opacity: 0.92;
    transform: scale(1.02);
    transition: opacity 0.1s;
}

/* Drop indicator line between fields */
.fe-drop-indicator {
    position: relative;
    height: 3px;
    background: var(--clr-blue-500, #3b82f6);
    border-radius: 2px;
    grid-column: 1 / -1;
    margin: -1px 0;
    pointer-events: none;
    animation: fe-indicator-pulse 1s ease-in-out infinite;
}

.fe-drop-indicator::before,
.fe-drop-indicator::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--clr-blue-500, #3b82f6);
    transform: translateY(-50%);
}

.fe-drop-indicator::before {
    left: -4px;
}

.fe-drop-indicator::after {
    right: -4px;
}

@keyframes fe-indicator-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

/* ============================================================
   Print – hide chrome, show only form submission content
   ============================================================ */
@media print {
    /* Hide all layout chrome */
    .sidebar,
    .sidebar-backdrop,
    .mobile-header,
    .back-link,
    .fs-actions,
    .danger-zone,
    .notification-bell-wrapper,
    #blazor-error-ui,
    .toast-container {
        display: none !important;
    }

    /* Remove layout constraints so content fills the page */
    .app-layout,
    .main-content {
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        max-width: none !important;
    }

    body {
        background: #fff !important;
        color: #000 !important;
        font-size: 11pt;
    }

    /* Ensure links print as plain text */
    a[href]::after {
        content: none !important;
    }

    /* Page breaks */
    .fs-form {
        page-break-inside: auto;
    }

    .fs-field-wrapper {
        page-break-inside: avoid;
    }
}
.node-delete-btn:hover {
    color: var(--clr-red-500);
    background: var(--clr-red-100);
}

.node-clone-btn:hover {
    color: var(--clr-blue-500);
    background: var(--clr-blue-100);
}

.wf-edge-group,
.wf-edge-label {
    pointer-events: all;
    cursor: pointer;
}

/* === Handbook Tags === */
.handbook-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-top: 0.5rem;
}

.handbook-tag {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    background: var(--clr-slate-100);
    border: 1px solid var(--clr-slate-200);
    border-radius: 12px;
    font-size: 0.72rem;
    color: var(--clr-slate-600);
    font-weight: 500;
}

/* ============================================================
   Tablet (>= 640px)
   ============================================================ */
@media (min-width: 640px) {
    .card-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .detail-row {
        display: flex;
        flex-direction: row;
        gap: 2rem;
    }

    .detail-field {
        min-width: 160px;
    }

    .detail-field dt {
        font-size: 0.75rem;
    }

    .detail-field dd {
        margin-bottom: 0.75rem;
        font-size: 0.92rem;
    }

    .detail-section h2 {
        font-size: 1.1rem;
        margin-bottom: 0.75rem;
    }

    details.detail-section > summary {
        pointer-events: none;
        cursor: default;
    }

    .toggle-arrow {
        display: none;
    }

    .detail-section {
        padding: 1.5rem;
    }

    .date-row {
        flex-direction: row;
        gap: 1rem;
    }

    .date-row > * {
        flex: 1;
    }

    .page-toolbar {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    .search-bar {
        max-width: 400px;
    }
}

/* ============================================================
   Desktop (>= 768px)
   ============================================================ */
@media (min-width: 768px) {
    h1 { font-size: 1.65rem; }
    h2 { font-size: 1.3rem; }
}

/* ============================================================
   Wide (>= 1024px)
   ============================================================ */
@media (min-width: 1024px) {
    .card-grid {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    }
}

/* ============================================================
   TinyMCE – dark-mode border / wrapper overrides
   ============================================================ */

html[data-theme="dark"] .tox-tinymce {
    border-color: var(--clr-slate-600) !important;
}

html[data-theme="dark"] .tinymce-wrapper {
    border-radius: 8px;
    overflow: hidden;
}

@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) .tox-tinymce {
        border-color: var(--clr-slate-600) !important;
    }

    html:not([data-theme="light"]) .tinymce-wrapper {
        border-radius: 8px;
        overflow: hidden;
    }
}

/* ══════════════════════════════════════════════════════════
   Form Editor – JS-created elements (global, not scoped)
   ══════════════════════════════════════════════════════════ */

/* Grabbing cursor globally while dragging */
body.fe-is-dragging,
body.fe-is-dragging * {
    cursor: grabbing !important;
}

/* Ghost element (dragging clone, appended to body) */
.fe-ghost {
    position: fixed;
    z-index: 9999;
    pointer-events: none;
    background: var(--clr-white);
    border: 1px solid var(--clr-slate-300);
    border-radius: 8px;
    padding: 0.45rem 0.85rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.06);
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--clr-slate-600);
    display: flex;
    align-items: center;
    gap: 0.35rem;
    max-width: 220px;
    white-space: nowrap;
    opacity: 0.9;
    animation: fe-ghost-in 0.12s ease-out;
}

@keyframes fe-ghost-in {
    from { opacity: 0; transform: translateY(-3px); }
    to { opacity: 0.9; transform: translateY(0); }
}

/* Drop indicator (inserted by JS into the field list) */
.fe-drop-indicator {
    grid-column: 1 / -1;
    height: 2px;
    pointer-events: none;
    position: relative;
    background: var(--clr-blue-500);
    border-radius: 1px;
    margin: 0.3rem 0;
    overflow: visible;
}

/* Left endpoint dot */
.fe-drop-indicator::after {
    content: '';
    position: absolute;
    top: 50%;
    left: -3px;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    background: var(--clr-blue-500);
    border-radius: 50%;
}

/* Right endpoint dot */
.fe-drop-indicator-dot-right {
    position: absolute;
    top: 50%;
    right: -3px;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    background: var(--clr-blue-500);
    border-radius: 50%;
}

/* Drop indicator inside column zones */
.fe-column-zone > .fe-drop-indicator {
    grid-column: unset;
    margin: 0.15rem 0;
}

/* === External Provider Badge === */
.badge-external-provider {
    display: inline-block;
    padding: 0.15rem 0.4rem;
    background: var(--clr-blue-100, #dbeafe);
    color: var(--clr-blue-700, #1d4ed8);
    border-radius: 0.25rem;
    font-size: 0.7rem;
    font-weight: 600;
    margin-left: 0.4rem;
    vertical-align: middle;
}