/* © 2026 Vortex Group. Alle rettigheder forbeholdt. */
/* ============================================================
   base.css — Farver, typografi, variabler & inputs
   ÆNDR FARVER HER: --color-accent, --color-bg osv. (nederst i :root)
   ============================================================ */
/* ============================================================
   FlowAxe App — Modern Dark UI v2 (redesign)
   Roligt, moderne dark theme — indigo → cyan accent på dyb blå-sort
   ============================================================ */

:root {
    /* ── Surfaces ── */
    --color-bg: #080B12;
    --color-bg-dark: #05070C;
    --color-surface: #0F1520;
    --color-surface-hover: #161E2E;
    --color-bg-card: var(--color-surface);
    --color-bg-elevated: #131B2A;

    /* ── Borders & lines ── */
    --color-border: rgba(148, 163, 184, 0.09);
    --color-border-strong: rgba(148, 163, 184, 0.18);

    /* ── Brand accent (indigo → cyan) ── */
    --color-accent: #818CF8;
    --color-accent-hover: #93A0FA;
    --color-accent-soft: rgba(129, 140, 248, 0.13);
    --color-accent-glow: rgba(129, 140, 248, 0.28);
    --color-accent-2: #38BDF8;

    /* ── Semantic palette ── */
    --color-gold: #F2C14E;
    --color-success: #34D399;
    --color-success-soft: rgba(52, 211, 153, 0.14);
    --color-warning: #FBBF24;
    --color-warning-soft: rgba(251, 191, 36, 0.14);
    --color-danger: #FB7185;
    --color-danger-soft: rgba(251, 113, 133, 0.14);
    --color-info: #38BDF8;
    --color-info-soft: rgba(56, 189, 248, 0.14);
    --color-violet: #A78BFA;
    --color-violet-soft: rgba(167, 139, 250, 0.14);
    --color-teal: #2DD4BF;

    /* ── Text ── */
    --color-white: #F4F7FC;
    --color-text-primary: #E7ECF4;
    --color-text-secondary: #9AA7BC;
    --color-text-muted: #5B6B84;

    /* ── Status mapping (tasks) ── */
    --color-completed: var(--color-success);
    --color-in-progress: var(--color-accent);
    --color-pending: var(--color-info);
    --color-overdue: var(--color-danger);
    --color-reminder: var(--color-violet);

    /* ── Shape & depth ── */
    --border-radius: 16px;
    --border-radius-sm: 12px;
    --border-radius-xs: 9px;
    --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.35), 0 8px 24px rgba(0, 0, 0, 0.25);
    --shadow-lift: 0 2px 6px rgba(0, 0, 0, 0.4), 0 16px 40px rgba(0, 0, 0, 0.42);
    --shadow-glow: 0 0 0 1px rgba(129, 140, 248, 0.30), 0 8px 32px rgba(129, 140, 248, 0.16);

    /* ── Typography ── */
    --font-display: 'Space Grotesk', sans-serif;
    --font-body: 'Inter', sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    /* Accent til individuelle agenter */
    --ac: var(--color-accent);
}

/* ── Base ─────────────────────────────────────────────────── */
* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    background:
        radial-gradient(900px 480px at 8% -10%, rgba(129, 140, 248, 0.07) 0%, transparent 60%),
        radial-gradient(900px 480px at 96% 108%, rgba(56, 189, 248, 0.05) 0%, transparent 60%),
        var(--color-bg);
    color: var(--color-text-primary);
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.6;
    padding-top: 148px;   /* topbar (140px) + luft */
    padding-bottom: 96px; /* plads til flydende bottom-nav (kun mobil) */
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

::selection { background: var(--color-accent); color: var(--color-bg-dark); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--color-bg-dark); }
::-webkit-scrollbar-thumb {
    background: #232C3E;
    border-radius: 8px;
    border: 2px solid var(--color-bg-dark);
}
::-webkit-scrollbar-thumb:hover { background: #2E3A52; }


/* ── INPUTS ───────────────────────────────────────────────── */
.input {
    background: var(--color-bg);
    border: 1.5px solid var(--color-border-strong);
    border-radius: var(--border-radius-xs);
    color: var(--color-white);
    padding: 11px 15px;
    font-family: var(--font-body);
    font-size: 15px;
    width: 100%;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.input:focus {
    border-color: var(--color-accent);
    outline: none;
    box-shadow: 0 0 0 3px rgba(129, 140, 248, 0.16);
}
.input::placeholder { color: var(--color-text-muted); }
select.input option { background: var(--color-surface); color: var(--color-text-primary); }

#projectSelector {
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border-strong);
    border-radius: 10px;
    color: var(--color-white);
    font-family: var(--font-body);
    font-size: 0.82rem;
    cursor: pointer;
    padding: 8px 12px;
    transition: border-color 0.2s;
}
#projectSelector:hover { border-color: var(--color-text-muted); }
#projectSelector:focus {
    border-color: var(--color-accent);
    outline: none;
    box-shadow: 0 0 0 3px rgba(129, 140, 248, 0.16);
}
#projectSelector option { background: var(--color-surface); color: var(--color-text-primary); }

/* ── RESPONSIVE ───────────────────────────────────────────── */
@media (max-width: 767px) {
    /* Kompakt topbar på mobil: logo + topbar skrumper så indholdet får plads */
    body { padding-top: 72px; padding-bottom: 108px; }
    .main { padding: 14px 12px 24px; }
}

@media (min-width: 768px) {
    body { padding-bottom: 0; }
    .bottom-nav { display: none; }
    .main { padding: 24px 28px 40px; }
}

@media (min-width: 1024px) {
    .kanban-column { min-width: 320px; }
}