/* ============================================================
   CivilMovement Enterprise Platform - application stylesheet
   Modern professional theme, no external dependencies.
   Palette (unchanged): deep green primary, terracotta accent,
   near-black green sidebar, neutral cool-gray surfaces.
   Features: responsive layout, CSS dark mode, smooth transitions.
   ============================================================ */

:root {
    --bg: #f4f6f9;
    --surface: #ffffff;
    --surface-2: #f8fafc;
    --border: #dfe4ea;
    --border-strong: #cdd5de;
    --text: #1f2733;
    --muted: #6b7684;
    --primary: #1f5f4b;
    --primary-hover: #164738;
    --primary-soft: #e9f2ee;
    --accent: #c8462d;
    --accent-soft: #f9e9e5;
    --success: #1c7a4d;
    --warning: #a3651b;
    --danger: #b3312a;
    --info: #2a5d8f;
    --sidebar-bg: #16211d;
    --sidebar-bg-2: #1d2b26;
    --sidebar-text: #c7d2cc;
    --sidebar-muted: #8fa39a;
    --radius: 12px;
    --radius-sm: 8px;
    --radius-xs: 6px;
    --shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 4px 14px rgba(16, 24, 40, .06);
    --shadow-lg: 0 4px 10px rgba(16, 24, 40, .07), 0 14px 34px rgba(16, 24, 40, .10);
    --ring: 0 0 0 3px rgba(31, 95, 75, .18);
    --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --transition: .15s ease;

    /* Dark mode overrides (prefers-color-scheme) */
    @media (prefers-color-scheme: dark) {
        --bg: #0d1117;
        --surface: #162127;
        --surface-2: #1f2b3a;
        --border: #30363d;
        --border-strong: #3a414a;
        --text: #f0f4f8;
        --muted: #8b949e;
        /* Soft tints stay LIGHT in :root, which made light-on-light chips in
           dark mode - they must darken together with the surface. */
        --primary-soft: #1d3b31;
        --accent-soft: #3a241d;
        --sidebar-bg: #0d1117;
        --sidebar-bg-2: #14191f;
        --sidebar-text: #a8b2be;
        --sidebar-muted: #5a626e;
    }
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

/* ============================================
   Root typography & page base
   ============================================ */

html, body {
    margin: 0;
    padding: 0;
    background: var(--bg);
    color: var(--text);
    font: 15px/1.55 var(--font);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    -webkit-tap-highlight-color: transparent;
}

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

h1 { font-size: 1.5rem; font-weight: 750; letter-spacing: -.02em; margin: 0 0 .25rem; }
h2 { font-size: 1.12rem; font-weight: 700; letter-spacing: -.01em; margin: 0 0 .75rem; }
h3 { font-size: .98rem; font-weight: 650; margin: 0 0 .5rem; }

.muted { color: var(--muted); }
.mono { font-family: var(--mono); }
.right { text-align: right; }
.nowrap { white-space: nowrap; }

/* Focus ring (accessibility) */
:focus-visible { outline: none; box-shadow: var(--ring); }

/* Selection color */
::selection { background: rgba(31, 95, 75, .18); }

/* ============================================
   App shell / sidebar / main
   ============================================ */

.layout { display: flex; min-height: 100vh; }

.sidebar {
    width: 264px;
    flex: 0 0 264px;
    background:
        radial-gradient(140% 60% at 0% 0%, rgba(46, 110, 88, .35) 0%, transparent 55%),
        var(--sidebar-bg);
    color: var(--sidebar-text);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    transition: width .2s ease;
}

/* ---------- Brand (sidebar + guest header) ---------- */

.brand {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: 1.15rem 1.15rem 1.05rem;
    min-height: 70px;
}

/* Uploaded logo — constrained so it never overflows or touches the edge */
.brand-logo {
    display: block;
    max-width: 44px;
    max-height: 44px;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 9px;
    flex: 0 0 auto;
}

/* Text fallback mark ("CM") */
.brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 11px;
    flex: 0 0 40px;
    background: linear-gradient(135deg, #2f8263, #14453a);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 4px 10px rgba(0, 0, 0, .28);
    color: #fff;
    font-weight: 750;
    letter-spacing: .5px;
    font-size: .9rem;
}

.brand > div {
    min-width: 0;
}

.brand strong {
    display: block;
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -.01em;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.brand small {
    display: block;
    color: var(--sidebar-muted);
    font-size: .72rem;
    line-height: 1.3;
    margin-top: 1px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Guest page: centered brand above the card */
.brand-center { justify-content: center; margin-bottom: 1.25rem; }

/* ---- Nav links ----
     Each nav item is a <a class="nav-link"> inside <nav class="nav">.
     The <nobr> prevents the link text from wrapping,
     and the inline-flex layout with .nav-icon ensures the icon
     character stays on the left of the label.             ---- */
.nav { flex: 1; padding: .5rem .65rem; overflow-y: auto; display: flex; flex-direction: column; align-items: stretch; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.18) transparent; }
.nav::-webkit-scrollbar { width: 8px; }
.nav::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .14); border-radius: 8px; }
.nav-link {
    display: flex; align-items: center; gap: .65rem;
    padding: .5rem .7rem; margin-bottom: 2px; border-radius: 9px;
    color: var(--sidebar-text); font-size: .9rem; font-weight: 500;
    position: relative;
    transition: background .14s ease, color .14s ease;
    white-space: nowrap;
}
.nav-link:hover { background: rgba(255, 255, 255, .07); text-decoration: none; color: #fff; }
.nav-link.active { background: rgba(255, 255, 255, .12); color: #fff; font-weight: 650; }
.nav-link.active::before {
    content: ""; position: absolute; left: -0.65rem; top: 50%; transform: translateY(-50%);
    width: 3px; height: 20px; border-radius: 0 3px 3px 0; background: #4aa37e;
}
.nav-icon { width: 18px; text-align: center; opacity: .85; flex: 0 0 18px; }
.nav-section {
    display: block;
    font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .09em;
    color: var(--sidebar-muted); padding: .9rem .7rem .35rem;
}
.sidebar-footer { padding: .8rem; border-top: 1px solid rgba(255, 255, 255, .08); }
.lang-switch label { font-size: .72rem; color: var(--sidebar-muted); display: block; margin-bottom: .25rem; font-weight: 600; }
.lang-switch select {
    width: 100%; padding: .4rem .55rem; border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, .16); background: #0f1915; color: #fff;
    font: inherit; font-size: .85rem;
}
.lang-switch select:focus-visible { box-shadow: 0 0 0 3px rgba(74, 163, 126, .35); }
.user-box { margin-top: .8rem; display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.user-name { font-size: .85rem; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Main content area */
.main { flex: 1; padding: 1.75rem 2.25rem; max-width: 1560px; }
@media (max-width: 640px) {
    .main { padding: 1rem; }
}
.footer { margin-top: 3rem; color: var(--muted); font-size: .78rem; border-top: 1px solid var(--border); padding-top: .9rem; }

/* ============================================
   Guest page (login)
   ============================================ */

.guest-body {
    background:
        radial-gradient(1200px 520px at 18% -10%, #e7f0eb 0%, transparent 60%),
        radial-gradient(900px 420px at 92% 112%, #f3e7e2 0%, transparent 55%),
        var(--bg);
    min-height: 100vh;
}
.guest-wrap { max-width: 440px; margin: 0 auto; padding: 9vh 1rem 2rem; }
.guest-card { padding: 2rem; }
.guest-lang { text-align: center; margin-top: 1.2rem; font-size: .85rem; }

/* ============================================
   Cards / layout helpers
   ============================================ */

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1.2rem 1.35rem;
    margin-bottom: 1.25rem;
    transition: box-shadow .18s ease, border-color .18s ease, transform .18s ease;
}
.card:hover { box-shadow: var(--shadow-lg); }
.card:focus-visible { outline: var(--ring); }
.card-link, a.card { display: block; color: inherit; }
a.card:hover { text-decoration: none; border-color: var(--border-strong); transform: translateY(-1px); }

.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.35rem; flex-wrap: wrap; }
.page-actions { display: flex; gap: .5rem; flex-wrap: wrap; }

.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 1.25rem; }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.25rem; }
@media (max-width: 480px) {
    .grid-3 { grid-template-columns: 1fr; }
}

.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.stat-card { text-align: center; padding: 1.35rem 1rem; }
.stat-value { font-size: 2rem; font-weight: 750; letter-spacing: -.02em; display: block; color: var(--primary); font-variant-numeric: tabular-nums; }
.stat-label { color: var(--muted); font-size: .83rem; font-weight: 550; }
.link-card:hover { text-decoration: none; }

/* ============================================
   Tables
   ============================================ */

.table-wrap { overflow-x: auto; border-radius: var(--radius-sm); }
.table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.table th, .table td { padding: .6rem .75rem; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.table th {
    background: var(--surface-2); font-weight: 650; font-size: .76rem; text-transform: uppercase;
    letter-spacing: .05em; color: var(--muted); border-bottom: 1px solid var(--border);
}
.table tbody tr { transition: background .12s ease; }
.table tbody tr:hover td { background: #f6f9f8; }
.table tbody tr:last-child td { border-bottom: 0; }
.table td.right, .table th.right { text-align: right; }
.table .check-cell { width: 46px; text-align: center; }

/* ============================================
   Forms
   ============================================ */

.form { display: block; }
.form-group { margin-bottom: .95rem; }
.form-group > label { display: block; font-size: .82rem; font-weight: 650; margin-bottom: .3rem; color: var(--text); letter-spacing: .01em; }
.form-group .hint { font-size: .76rem; color: var(--muted); }
.form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .9rem; }

/* Inputs — normal (light mode) background is white */
.input, select.input, textarea.input {
    width: 100%;
    padding: .55rem .7rem;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: #fff;
    color: var(--text);
    font: inherit;
    transition: border-color .14s ease, box-shadow .14s ease;
}
.input:hover { border-color: #b9c3cd; }
.Input:focus { outline: none; border-color: var(--primary); box-shadow: var(--ring); }
textarea.input { min-height: 110px; resize: vertical; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--primary); width: 16px; height: 16px; }

/* Dark-mode overrides — ONLY touch background/color of input elements */
@media (prefers-color-scheme: dark) {
    .input, select.input { background: #1f2b3a; color: #f0f4f8; border-color: #3a414a; }
    textarea.input { background: #1f2b3a; color: #f0f4f8; border-color: #3a414a; }
    .input:hover { border-color: #4a525a; }
}

/* ============================================
   Buttons
   ============================================ */

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
    padding: .5rem .95rem;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text);
    font: inherit; font-size: .88rem; font-weight: 600; letter-spacing: .01em;
    cursor: pointer;
    transition: background .14s ease, border-color .14s ease, box-shadow .14s ease, transform .1s ease;
}
.btn:hover { background: var(--surface-2); text-decoration: none; border-color: var(--muted); }
.btn:active { transform: translateY(1px); }
.btn-primary {
    background: linear-gradient(180deg, #25705a, var(--primary));
    border-color: var(--primary); color: #fff;
    box-shadow: 0 1px 2px rgba(31, 95, 75, .25);
}
.btn-primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
.btn-danger { background: linear-gradient(180deg, #c23a32, var(--danger)); border-color: var(--danger); color: #fff; }
.btn-danger:hover { background: #93261f; border-color: #93261f; }
.btn-ghost { background: transparent; border-color: rgba(255, 255, 255, .25); color: #fff; }
.btn-ghost:hover { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .4); }
.btn-sm { padding: .3rem .6rem; font-size: .8rem; border-radius: 7px; }
.btn-block { width: 100%; margin-top: .4rem; }
.btn[disabled] { opacity: .55; cursor: not-allowed; }

/* ============================================
   Badges
   ============================================ */

.badge {
    display: inline-flex; align-items: center; gap: .3rem;
    padding: .16rem .55rem; border-radius: 999px;
    font-size: .71rem; font-weight: 700; letter-spacing: .02em; line-height: 1.35;
    background: #e8ecf1; color: #445060;
}
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .75; }
.badge-success { background: #dff3e7; color: var(--success); }
.badge-warning { background: #fdefd8; color: var(--warning); }
.badge-danger  { background: #fbe1df; color: var(--danger); }
.badge-info    { background: #dfebf7; color: var(--info); }
.badge-muted   { background: #eceef1; color: var(--muted); }

/* ============================================
   Flash messages
   ============================================ */

.flash {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: .7rem 1rem; border-radius: var(--radius); margin-bottom: 1rem;
    font-size: .89rem; font-weight: 550; border: 1px solid transparent;
}
.flash-success { background: #e2f5ea; border-color: #b7e3cb; color: var(--success); }
.flash-error   { background: #fce6e4; border-color: #f1c2be; color: var(--danger); }
.flash-warning { background: #fdf2dc; border-color: #f0dcae; color: var(--warning); }
.flash-info    { background: #e5eefa; border-color: #c4d7f0; color: var(--info); }
.flash-close { background: none; border: 0; font-size: 1.1rem; cursor: pointer; color: inherit; opacity: .6; padding: 0 .2rem; }
.flash-close:hover { opacity: 1; }

/* ============================================
   Lists
   ============================================ */

.list { list-style: none; margin: 0; padding: 0; }
.list li { padding: .55rem 0; border-bottom: 1px solid var(--border); }
.list li:last-child { border-bottom: 0; }

/* ============================================
   Error page
   ============================================ */

.error-card { max-width: 520px; margin: 12vh auto; text-align: center; padding: 2.5rem; }
.error-code { font-size: 3.2rem; font-weight: 800; color: var(--accent); line-height: 1; margin-bottom: .5rem; letter-spacing: -.02em; }

/* ============================================
   Kanban boards (responsive + dark mode)
   ============================================ */

.board-columns {
    display: flex; gap: 1rem; align-items: flex-start; overflow-x: auto; padding-bottom: 1rem;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}
.board-columns::-webkit-scrollbar { width: 8px; }
.board-columns::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 8px; }

.kanban-column {
    flex: 0 0 280px; background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); padding: .7rem; min-height: 140px;
    transition: box-shadow .18s ease;
}
.kanban-column:hover { box-shadow: var(--shadow-lg); }
.kanban-column.over { outline: 2px dashed var(--primary); outline-offset: -3px; }

.kanban-col-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: .6rem; }
.kanban-col-head h3 { margin: 0; font-size: .82rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; }
.kanban-wip { font-size: .72rem; color: var(--muted); font-weight: 600; }

.task-card {
    background: var(--surface); border: 1px solid var(--border); border-radius: 9px;
    padding: .6rem .7rem; margin-bottom: .55rem; box-shadow: var(--shadow);
    cursor: grab; transition: box-shadow .14s ease, border-color .14s ease;
    user-select: none;
}
.task-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-lg); }
.task-card:active { cursor: grabbing; }
.task-card.dragging { opacity: .45; }
.task-title { font-weight: 600; font-size: .9rem; display: block; margin-bottom: .25rem; }
.task-meta { display: flex; justify-content: space-between; align-items: center; font-size: .75rem; color: var(--muted); }

/* Board cards: small icon tools sit ON the card, top-right */
.board-card { position: relative; }
.board-card .card-link { padding-right: 4.25rem; }

.card-tools {
    position: absolute;
    top: .55rem;
    right: .55rem;
    display: flex;
    gap: .3rem;
    z-index: 2;
}

/* Icon-only button: gear (muted) / trash (danger) */
.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-2);
    color: var(--muted);
    cursor: pointer;
    box-shadow: var(--shadow);
    transition: color .14s ease, background .14s ease, border-color .14s ease;
}
.icon-btn:hover {
    color: var(--text);
    background: var(--surface);
    border-color: var(--border-strong);
}
.icon-btn:active { transform: translateY(1px); }
.icon-btn svg { width: 15px; height: 15px; display: block; }

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

/* Priority left-bars */
.prio-low { border-left: 3px solid #9aa5b1; }
.prio-normal { border-left: 3px solid var(--info); }
.prio-high { border-left: 3px solid var(--warning); }
.prio-urgent { border-left: 3px solid var(--danger); }

/* Responsive: mobile */
@media (max-width: 600px) {
    .kanban-column { flex: 0 0 100%; min-height: 120px; }
    .board-columns { gap: .5rem; }
}

/* ============================================
   Calendar
   ============================================ */

.calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.calendar-cell {
    min-height: 94px; background: var(--surface); border: 1px solid var(--border);
    border-radius: 9px; padding: .4rem .5rem; font-size: .78rem; position: relative;
    transition: border-color .14s ease, box-shadow .14s ease;
}
.calendar-cell:hover { border-color: var(--border-strong); }
.calendar-cell.other-month { background: #f6f8fa; color: var(--muted); }
.calendar-cell.today { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }
.calendar-daynum { font-weight: 700; font-variant-numeric: tabular-nums; }
.calendar-event {
    display: block; margin-top: .25rem; padding: .12rem .35rem; border-radius: 5px;
    background: #e8f1ed; color: var(--primary); font-size: .7rem; font-weight: 600;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.filter-bar { display: flex; gap: .6rem; flex-wrap: wrap; align-items: flex-end; margin-bottom: 1rem; }
.filter-bar .form-group { margin-bottom: 0; }

/* ============================================
   Mail
   ============================================ */

.mail-layout { display: grid; grid-template-columns: 220px 1fr; gap: 1.25rem; align-items: start; }
.mail-folders { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: .7rem; box-shadow: var(--shadow); }
.mail-folder { display: block; padding: .42rem .65rem; border-radius: 8px; font-size: .88rem; font-weight: 550; }
.mail-folder:hover, .mail-folder.active { background: #eef2f7; text-decoration: none; }
.mail-row { cursor: pointer; }
.mail-row.unread td { font-weight: 700; }
.mail-body { background: #fbfcfd; border: 1px solid var(--border); border-radius: 9x; padding: 1rem; overflow-x: auto; }
.mail-body iframe { width: 100%; min-height: 420px; border: 0; background: #fff; }

/* ---------- Member picker (board settings) ---------- */

.member-picker { position: relative; }

.member-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    min-height: 2rem;
    margin-bottom: .55rem;
}
.member-empty { color: var(--muted); font-size: .82rem; align-self: center; }

.member-chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .18rem .3rem .18rem .6rem;
    border-radius: 999px;
    background: var(--primary-soft);
    border: 1px solid var(--border);
    color: var(--text);
    font-size: .82rem;
    font-weight: 550;
}
.member-chip-name { color: var(--text); }
.member-chip-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--muted);
    font-size: .95rem;
    line-height: 1;
    cursor: pointer;
    transition: background .14s ease, color .14s ease;
}
.member-chip-remove:hover { background: var(--danger); color: #fff; }

.member-bar { position: relative; display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.member-search { flex: 1 1 180px; }

.member-list {
    position: absolute;
    z-index: 20;
    top: calc(100% + .35rem);
    left: 0;
    right: 0;
    max-height: 260px;
    overflow-y: auto;
    margin: 0;
    padding: .3rem;
    list-style: none;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    color: var(--text);
}
.member-option {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .42rem .55rem;
    border-radius: 8px;
    font-size: .89rem;
    cursor: pointer;
    transition: background .12s ease;
}
.member-option:hover,
.member-option:focus-visible { background: var(--surface-2); outline: none; }
.member-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    border: 1px solid var(--border-strong);
    border-radius: 5px;
    background: var(--surface);
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
}
.member-option[aria-selected="true"] .member-box {
    background: var(--primary);
    border-color: var(--primary);
}
.member-option[aria-selected="true"] .member-option-name { font-weight: 650; }
.member-option-name { color: var(--text); }
.member-no-match { padding: .5rem .55rem; color: var(--muted); font-size: .85rem; }

@media (max-width: 600px) {
    .member-bar { flex-direction: column; align-items: stretch; }
    .member-search { flex: 1 1 auto; }
}

/* ---------- Task detail modal (kanban) ---------- */

body.modal-open { overflow: hidden; }

.task-modal {
    position: fixed;
    inset: 0;
    z-index: 90;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: clamp(1rem, 6vh, 5rem) 1rem 2rem;
    overflow-y: auto;
    opacity: 0;
    transition: opacity .18s ease;
}
.task-modal[hidden] { display: none; }
.task-modal.is-open { opacity: 1; }

.task-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(9, 14, 20, .62);
    backdrop-filter: blur(2px);
}

.task-modal-dialog {
    position: relative;
    width: min(720px, 100%);
    max-height: calc(100vh - clamp(2rem, 12vh, 8rem));
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    transform: translateY(10px) scale(.985);
    transition: transform .18s ease;
    outline: none;
}
.task-modal.is-open .task-modal-dialog { transform: none; }

.task-modal-head {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem 1.1rem;
    border-bottom: 1px solid var(--border);
    background: var(--surface-2);
    border-radius: var(--radius) var(--radius) 0 0;
}
.task-modal-heading { flex: 1 1 auto; min-width: 0; }
.task-modal-head h2 {
    margin: 0 0 .45rem;
    font-size: 1.05rem;
    line-height: 1.35;
    overflow-wrap: anywhere;
}
.task-modal-meta { display: flex; flex-wrap: wrap; gap: .3rem; }

.task-modal-close {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-xs);
    background: var(--surface);
    color: var(--muted);
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    transition: background .14s ease, color .14s ease, border-color .14s ease;
}
.task-modal-close:hover {
    background: var(--danger);
    border-color: var(--danger);
    color: #fff;
}

.task-modal-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 1.1rem;
}

.task-modal-section + .task-modal-section {
    margin-top: 1.35rem;
    padding-top: 1.35rem;
    border-top: 1px solid var(--border);
}
.task-modal-section h3 {
    margin: 0 0 .7rem;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--muted);
}

.task-modal-desc {
    line-height: 1.6;
    overflow-wrap: anywhere;
}

/* --------------------------------------------
   Task images (attachments)
   -------------------------------------------- */
/* Card badge: the same 13px icon size as the comment badge next to it. */
.task-images svg { width: 13px; height: 13px; display: block; flex: 0 0 auto; }

.task-modal-images {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
    gap: .6rem;
    list-style: none;
    margin: 0 0 .9rem;
    padding: 0;
}
.task-modal-images li {
    position: relative;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--surface-2);
}
.task-modal-image { display: block; line-height: 0; }
.task-modal-image img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
    background: var(--surface);
}
.task-modal-image:hover img,
.task-modal-image:focus-visible img { filter: brightness(1.07); }
.task-modal-image-name {
    display: block;
    padding: .35rem .45rem .4rem;
    font-size: .72rem;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* The delete control sits on the picture so it is reachable without hunting
   for a separate row, and it is a sibling of the link rather than inside it
   so the two never swallow each other's clicks. */
.task-image-delete {
    position: absolute;
    top: .3rem;
    right: .3rem;
    margin: 0;
    line-height: 0;
}
.task-image-delete-btn {
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    color: var(--danger);
    cursor: pointer;
    box-shadow: 0 1px 3px rgb(0 0 0 / .3);
}
.task-image-delete-btn:hover { background: var(--danger); border-color: var(--danger); color: #fff; }
.task-image-delete-btn svg { width: 13px; height: 13px; display: block; }
.task-image-upload {
    margin-top: .35rem;
    padding-top: .85rem;
    border-top: 1px solid var(--border);
}
.task-image-upload .input[type="file"] { padding: .45rem .6rem; }

.task-modal-check {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-weight: 500;
    cursor: pointer;
}

.task-modal-comments { margin: 0; padding: 0; list-style: none; }
.task-modal-comments li {
    padding: .6rem .7rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
}
.task-modal-comments li + li { margin-top: .5rem; }
.task-comment-head {
    display: flex;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: .25rem;
    font-size: .82rem;
}
.task-comment-body { line-height: 1.55; overflow-wrap: anywhere; }

.task-modal-danger {
    padding: .8rem;
    border: 1px solid var(--danger);
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--danger) 7%, transparent);
}
.task-modal-danger + .task-modal-section,
.task-modal-section + .task-modal-danger { border-top: 0; }

/* Compact card action row */
.task-actions {
    display: flex;
    align-items: center;
    gap: .35rem;
    margin-top: .5rem;
    padding-top: .5rem;
    border-top: 1px dashed var(--border);
}
.task-actions .icon-btn { width: 28px; height: 28px; }
.task-actions .icon-btn svg { width: 14px; height: 14px; }
.task-comments {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    margin-left: auto;
}
.task-comments svg { width: 13px; height: 13px; }
/* When watchers precede the comment badge, the free space is taken by the
   watcher group instead so the two stay grouped at the right edge. */
.task-actions .task-watchers + .task-comments { margin-left: .3rem; }

/* Watcher eye + follower initials on the card. Deliberately smaller than the
   pencil action (14px) so the card's visual weight stays on the title. */
.task-watchers {
    display: inline-flex;
    align-items: center;
    gap: .18rem;
    margin-left: auto;
    color: var(--muted);
}
.task-watchers svg {
    width: 13px;
    height: 13px;
    display: block;
    flex: 0 0 auto;
}
.task-watcher {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 .28rem;
    border-radius: 999px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--text);
    font-size: .56rem;
    line-height: 1;
    font-weight: 700;
    letter-spacing: .01em;
}
.task-watcher-more { color: var(--muted); font-weight: 600; }

/* The droplist must not be clipped by the modal's scrolling body, so inside a
   dialog it opens in normal flow and pushes the form down. */
.task-modal .member-list {
    position: static;
    margin-top: .35rem;
    max-height: 220px;
}
/* When the toggle sits close to the bottom of the visible area the picker
   flips upward and floats over the form instead (height is set by JS to the
   space actually available). */
.task-modal .member-list.member-list--up {
    position: absolute;
    top: auto;
    bottom: calc(100% + .35rem);
    margin-top: 0;
}

/* --------------------------------------------
   Dashboard: my boards + my tasks
   -------------------------------------------- */
.board-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}
.board-chip {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .4rem .7rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--text);
    text-decoration: none;
    font-size: .88rem;
    font-weight: 600;
    transition: border-color .12s ease, background .12s ease;
}
.board-chip:hover,
.board-chip:focus-visible {
    border-color: var(--primary);
    background: var(--primary-soft);
}
.board-chip-count { font-weight: 600; }

.task-table tbody tr.task-row { cursor: pointer; }
/* The anchor carries the row's text; strip its decoration so the row reads as
   one clickable unit while staying a real link for keyboards and readers. */
.task-row-title a {
    color: var(--text);
    font-weight: 600;
    text-decoration: none;
}
.task-row-title a:hover,
.task-row-title a:focus-visible { color: var(--primary); text-decoration: underline; }
.task-row-overdue { color: var(--danger); font-weight: 600; }
.task-row-late {
    display: inline-block;
    margin-left: .35rem;
    font-size: .74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}

@media (max-width: 600px) {
    .task-modal { padding: .75rem .5rem 1.5rem; }
    .task-modal-dialog { max-height: calc(100vh - 1.5rem); }
    .task-modal-head { padding: .85rem; }
    .task-modal-body { padding: .85rem; }
    .task-modal-head h2 { font-size: .98rem; }
}

/* ============================================
   AI console
   ============================================ */

.ai-chat { display: flex; flex-direction: column; gap: .7rem; max-height: 480px; overflow-y: auto; padding: .4rem; scrollbar-width: thin; }
.ai-chat::-webkit-scrollbar { width: 6px; }
.ai-chat::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 6px; }
.ai-msg { padding: .65rem .9rem; border-radius: 14px; max-width: 85%; font-size: .9rem; white-space: pre-wrap; line-height: 1.5; }
.ai-msg.user { background: linear-gradient(180deg, #25705a, var(--primary)); color: #fff; align-self: flex-end; border-bottom-right-radius: 5px; box-shadow: 0 1px 3px rgba(31, 95, 75, .3); }
.ai-msg.assistant { background: #eef2f7; align-self: flex-start; border-bottom-left-radius: 5px; }

/* ---------- Assistant drafting panel (browser-style tabs) ---------- */

.ai-tabs {
    display: flex;
    gap: .2rem;
    border-bottom: 2px solid var(--border);
    overflow-x: auto;
    flex-wrap: nowrap;
    scrollbar-width: thin;
}
.ai-tabs::-webkit-scrollbar { height: 6px; }
.ai-tabs::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 6px; }

.ai-tab {
    flex: 0 0 auto;
    padding: .55rem .95rem;
    border: 1px solid transparent;
    border-bottom: none;
    border-radius: 9px 9px 0 0;
    background: transparent;
    color: var(--muted);
    font: inherit;
    font-size: .85rem;
    font-weight: 600;
    letter-spacing: .01em;
    cursor: pointer;
    white-space: nowrap;
    transition: color .14s ease, background .14s ease, border-color .14s ease;
}
.ai-tab:hover { color: var(--text); background: var(--surface-2); text-decoration: none; }
.ai-tab.active {
    color: var(--primary);
    background: var(--surface);
    border-color: var(--border);
    box-shadow: inset 0 2px 0 var(--primary);
    margin-bottom: -2px;
}

.ai-panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-top: none;
    border-radius: 0 0 var(--radius) var(--radius);
    padding: 1.35rem 1.5rem 1.5rem;
    box-shadow: var(--shadow);
}

/* Big input / output fields */
.ai-input-big {
    min-height: 190px;
    font-size: .95rem;
    line-height: 1.55;
    resize: vertical;
}
.ai-output-big {
    min-height: 320px;
    font-size: .95rem;
    line-height: 1.6;
    resize: vertical;
    white-space: pre-wrap;
    overflow-y: auto;
    background: var(--surface-2);
    color: var(--text);
}
.ai-output-big:focus { background: var(--surface); }

.ai-output-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: 1.1rem 0 .45rem;
}
.ai-output-head label { font-size: .82rem; font-weight: 650; color: var(--muted); }

.ai-panel-actions {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: .6rem;
}
.ai-lang-group { margin-bottom: 0; min-width: 160px; }
.ai-gate-line { margin: .9rem 0 0; min-height: 1.2rem; }

@media (max-width: 600px) {
    .ai-tab { padding: .45rem .7rem; font-size: .8rem; }
    .ai-input-big { min-height: 150px; }
    .ai-output-big { min-height: 240px; }
}

/* ============================================
   Admin tabs
   ============================================ */

.admin-tabs { display: flex; gap: .35rem; flex-wrap: wrap; margin-bottom: 1.25rem; border-bottom: 1px solid var(--border); padding-bottom: 0; }
.admin-tabs a {
    padding: .5rem .95rem; font-size: .86rem; font-weight: 600; color: var(--muted);
    border-bottom: 2px solid transparent; margin-bottom: -1px; border-radius: 8px 8px 0 0;
    transition: color .14s ease, border-color .14s ease, background .14s ease;
}
.admin-tabs a:hover { color: var(--text); text-decoration: none; background: var(--surface-2); }
.admin-tabs a.active { color: var(--primary); border-bottom-color: var(--primary); }

/* ============================================
   Check list (roles)
   ============================================ */

.check-list { list-style: none; margin: .4rem 0 0; padding: 0; columns: 2; column-gap: 2rem; }
.check-list li { padding: .28rem 0; font-size: .86rem; break-inside: avoid; }

/* ============================================
   Responsive utility
   ============================================ */

@media (max-width: 640px) {
    /* Sidebar can be collapsed via JS adding .sidebar-collapsed class */
    /* .sidebar.collapsed { width: 56px; } */
    .main { padding: 1rem; }
    .grid-2 { grid-template-columns: 1fr; }
    .stat-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   DARK MODE — secondary surfaces that use light-theme hardcoded
   tints get a dark equivalent here. The critical .btn fix lives
   in the Buttons section (background: var(--surface)).
   ============================================================ */

@media (prefers-color-scheme: dark) {
    /* Badges — dark tinted chips, coloured text stays readable */
    .badge          { background: #26313d; color: #c3cdd8; }
    .badge-success  { background: #14291e; color: #56d39a; }
    .badge-warning  { background: #33260f; color: #e8b958; }
    .badge-danger   { background: #331b18; color: #f08b84; }
    .badge-info     { background: #14263a; color: #74b3f0; }
    .badge-muted    { background: #262c33; color: #8b949e; }

    /* Flash messages */
    .flash-success  { background: #14291e; border-color: #1f4433; color: #56d39a; }
    .flash-error    { background: #331b18; border-color: #4d2620; color: #f08b84; }
    .flash-warning  { background: #33260f; border-color: #4d3a17; color: #e8b958; }
    .flash-info     { background: #14263a; border-color: #1f3a55; color: #74b3f0; }

    /* Table row hover */
    .table tbody tr:hover td { background: #1c2530; }

    /* AI chat assistant bubble */
    .ai-msg.assistant { background: #26313d; }

    /* Calendar */
    .calendar-cell.other-month { background: #131a22; color: var(--muted); }
    .calendar-event { background: #14291e; color: #56d39a; }

    /* Mail */
    .mail-folder:hover, .mail-folder.active { background: #26313d; }
    .mail-body { background: #131a22; }

    /* Guest page gradients — darker for dark mode */
    .guest-body {
        background:
            radial-gradient(1200px 520px at 18% -10%, #14241d 0%, transparent 60%),
            radial-gradient(900px 420px at 92% 112%, #231a17 0%, transparent 55%),
            var(--bg);
    }
}