/* ========== Komgo Time Tracker — branded after the Komgo API Portal ========== */

:root {
    --primary: #6C5CE7;
    --primary-light: #a29bfe;
    --primary-bg: #f5f3ff;
    --sidebar-width: 250px;
    --header-height: 56px;
    --text: #2d3436;
    --text-muted: #636e72;
    --border: #e2e8f0;
    --bg: #fafafa;
    --white: #ffffff;
    --success: #00b894;
    --success-bg: #e6f9f3;
    --danger: #e74c3c;
    --danger-bg: #fdecea;
    --warning: #fdcb6e;
    --weekend-bg: #faf9fd;
}

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

/* ========== Icons ========== */
.ico { width: 1.05em; height: 1.05em; vertical-align: -0.16em; flex: none; }
.sidebar-link .ico { width: 18px; height: 18px; opacity: 0.9; }
.btn .ico { width: 1em; height: 1em; }
.lock-state .ico { width: 15px; height: 15px; vertical-align: -0.2em; }

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: var(--text);
    background: var(--bg);
    line-height: 1.6;
}

a { color: var(--primary); }

/* ========== Header ========== */
.header {
    position: fixed; top: 0; left: 0; right: 0;
    height: var(--header-height);
    background: var(--white);
    border-bottom: 1px solid var(--border);
    display: flex; align-items: center;
    padding: 0 24px;
    z-index: 100;
}
.header-right { margin-left: auto; }
.header-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--primary); font-weight: 700; }
.header-logo img { height: 24px; vertical-align: middle; }
.header-logo .app-tag { font-size: 0.95rem; font-weight: 600; color: var(--text); border-left: 1px solid var(--border); padding-left: 10px; }
.header-right { display: flex; align-items: center; gap: 16px; }
.header-user { font-size: 0.85rem; color: var(--text-muted); display: flex; align-items: center; gap: 8px; }
.header-user a { color: var(--primary); text-decoration: none; font-weight: 500; }
.header-user a:hover { text-decoration: underline; }

/* ========== Sidebar ========== */
.sidebar {
    position: fixed; top: var(--header-height); left: 0; bottom: 0;
    width: var(--sidebar-width);
    background: var(--white);
    border-right: 1px solid var(--border);
    overflow-y: auto;
    padding: 24px 0;
    z-index: 50;
}
.sidebar-section { padding: 0 16px; margin-bottom: 24px; }
.sidebar-section-title {
    font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--text-muted);
    margin-bottom: 8px; padding: 0 8px;
}
.sidebar-link {
    display: flex; align-items: center; gap: 10px; padding: 8px 12px; margin: 2px 0;
    font-size: 0.9rem; color: var(--text);
    text-decoration: none; border-radius: 8px;
    border-left: 3px solid transparent;
    transition: all 0.15s;
}
.sidebar-link:hover { background: var(--primary-bg); color: var(--primary); }
.sidebar-link.active {
    color: var(--primary); font-weight: 600;
    background: var(--primary-bg);
    border-left-color: var(--primary);
}

/* ========== Main ========== */
.main {
    margin-left: var(--sidebar-width);
    margin-top: var(--header-height);
    padding: 32px 40px;
    max-width: 1500px;
}
.main h1 { font-size: 1.8rem; font-weight: 700; color: var(--primary); margin-bottom: 6px; }
.page-subtitle { color: var(--text-muted); margin-bottom: 24px; }

/* ========== Buttons ========== */
.btn {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 0.9rem; font-weight: 600;
    padding: 9px 16px; border-radius: 8px;
    border: 1px solid transparent; cursor: pointer;
    text-decoration: none; transition: all 0.15s;
    white-space: nowrap; line-height: 1.2;
}
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { background: #5a4bd4; }
.btn-secondary { background: var(--white); color: var(--text); border-color: var(--border); }
.btn-secondary:hover { border-color: var(--primary); color: var(--primary); }
.btn-danger { background: var(--white); color: var(--danger); border-color: #f3c4c0; }
.btn-danger:hover { background: var(--danger-bg); }
.btn-microsoft { background: var(--white); color: var(--text); border-color: var(--border); font-weight: 600; }
.btn-microsoft:hover { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-bg); }
.btn-sm { padding: 5px 10px; font-size: 0.8rem; }
.btn-block { width: 100%; justify-content: center; }

/* ========== Alerts ========== */
.alert { padding: 12px 16px; border-radius: 8px; margin-bottom: 20px; font-size: 0.9rem; }
.alert-success { background: var(--success-bg); color: #0a7d62; border: 1px solid #b7ecdc; }
.alert-error { background: var(--danger-bg); color: #b23128; border: 1px solid #f3c4c0; }
.alert-info { background: var(--primary-bg); color: var(--primary); border: 1px solid #ddd6fe; }
.alert-warn { background: #fff8e6; color: #97670a; border: 1px solid #f3e0b3; }
/* Internal project: hide the planning blocks (man-days, dates, portfolio, progress, rate, KPD, status). */
.proj-edit.internal-on .internal-hideable { display: none; }
/* Payment milestone rows: read-only by default; "Modifier" reveals the fields (.editing). */
.pay-row .pay-edit { display: none; }
.pay-row.editing .pay-read { display: none; }
.pay-row.editing .pay-edit { display: inline-block; }
.alert-warn a { color: #97670a; font-weight: 600; }

/* ========== Forms ========== */
.form-group { margin-bottom: 16px; }
.form-group label { display: block; font-size: 0.85rem; font-weight: 600; margin-bottom: 6px; }
.form-group input, .form-group select, .form-group textarea {
    width: 100%; padding: 9px 12px; font-size: 0.9rem;
    border: 1px solid var(--border); border-radius: 8px; font-family: inherit;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
    outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-bg);
}
/* Nicer dropdowns: custom chevron, no native arrow, branded focus */
.form-group select, select.mini-select {
    -webkit-appearance: none; -moz-appearance: none; appearance: none;
    background-color: var(--white); cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236C5CE7' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 10px center; background-size: 13px;
    padding-right: 30px;
}
select.mini-select { background-position: right 7px center; padding-right: 24px; }
.form-group select:hover, select.mini-select:hover { border-color: var(--primary-light); }

.form-row { display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-end; }
.form-row .form-group { flex: 1; min-width: 160px; }
/* Field hint: sits ABOVE the input, between it and the label. The row bottom-aligns
   (align-items: flex-end), so the extra height grows upwards and every input stays on one line —
   a hint placed *under* an input would be what aligns and would lift its own field out of the row. */
.form-row .form-group .field-hint {
    display: block; font-size: 0.72rem; line-height: 1.25; margin: -2px 0 6px;
}

/* Add-project form: a single clean row — name field grows, checkbox + button sit at the end, aligned;
   wraps on narrow screens. Avoids the label/height mismatch that made the button overlap the text. */
.add-project-form { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.add-project-name { flex: 1 1 280px; display: flex; flex-direction: column; gap: 6px;
    font-size: 0.85rem; font-weight: 600; min-width: 200px; margin: 0; }
.add-project-form input[type=text] {
    width: 100%; padding: 9px 12px; font-size: 0.9rem; font-family: inherit;
    border: 1px solid var(--border); border-radius: 8px; box-sizing: border-box; }
.add-project-form input[type=text]:focus {
    outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-bg); }
.add-project-form .btn { flex: 0 0 auto; white-space: nowrap; }
.add-project-form .check-pill { flex: 0 0 auto; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; align-items: start; }
.form-grid .form-group { margin-bottom: 0; }
.checkbox-row { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; }
.checkbox-row input { width: auto; }
.radio-pill { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; margin-right: 8px;
    border: 1px solid var(--border); border-radius: 8px; cursor: pointer; font-size: 0.85rem; font-weight: 600;
    color: var(--text-muted); user-select: none; }
.radio-pill input { width: auto; margin: 0; accent-color: var(--primary); }
.radio-pill:has(input:checked) { border-color: var(--primary); background: var(--primary-bg); color: var(--primary); }

/* ========== Cards ========== */
.card {
    background: var(--white); border: 1px solid var(--border);
    border-radius: 12px; padding: 24px; margin-bottom: 24px;
}
.card h2 { font-size: 1.1rem; color: var(--text); margin-bottom: 16px; }

/* ========== Stat cards ========== */
.stats { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.stat {
    background: var(--white); border: 1px solid var(--border); border-radius: 12px;
    padding: 18px 22px; min-width: 160px;
}
.stat .value { font-size: 1.6rem; font-weight: 700; color: var(--primary); }
.stat .label { font-size: 0.8rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; }

/* ========== Dashboard ========== */
.card-row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 24px; }
@media (max-width: 900px) { .card-row { grid-template-columns: 1fr; } }
.chart-card h2 { font-size: 1rem; color: var(--text); margin-bottom: 16px; }
.seg { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.seg a { padding: 6px 14px; font-size: 0.85rem; font-weight: 600; color: var(--text-muted); text-decoration: none; background: var(--white); }
.seg a.active { background: var(--primary); color: #fff; }

/* ========== Tables ========== */
.table { width: 100%; border-collapse: collapse; background: var(--white); border-radius: 12px; overflow: hidden; border: 1px solid var(--border); }
.table th, .table td { padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--border); font-size: 0.88rem; }
.table th { background: #f8f7ff; font-weight: 600; color: var(--text-muted); text-transform: uppercase; font-size: 0.72rem; letter-spacing: 0.05em; }
.table tr:last-child td { border-bottom: none; }
.table td.num, .table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.bar { height: 8px; border-radius: 4px; background: var(--primary); }
.bar-track { background: var(--primary-bg); border-radius: 4px; width: 120px; }

.badge { display: inline-block; font-size: 0.72rem; font-weight: 600; padding: 3px 10px; border-radius: 20px; }
.badge-on { background: var(--success-bg); color: #0a7d62; }
.badge-off { background: #f1f1f1; color: #888; }
.badge-role { background: var(--primary-bg); color: var(--primary); }
.badge-pitch { background: #e6f9f3; color: #0a7d62; }
.badge-no-pitch { background: #fff4e6; color: #c2660a; }
.badge-risk { background: var(--danger-bg); color: #b23128; }
/* "Pitch done" tick on a timeline task bar. */
.tl-pitch-done { font-weight: 700; margin-right: 3px; opacity: .95; }

/* Mandatory-field marker (the monthly status' Remaining MD). */
.req-mark { color: var(--danger); font-weight: 700; margin-left: 3px; }

/* Draggable report columns (colorder.js): the header is the handle. */
.col-drag { cursor: grab; user-select: none; }
.col-drag:active { cursor: grabbing; }
.col-drag-over { box-shadow: inset 3px 0 0 var(--primary); }

/* Missing monthly update: one month silent (amber) vs two or more (red). */
.badge-warn { background: #fff7e6; color: #b7791f; }
.badge-late { background: var(--danger-bg); color: #b23128; }

/* Allocation grid */
.alloc-grid td.alloc-cell { background: var(--primary-bg); font-weight: 600; }
.alloc-grid tr.alloc-total td { background: #f3f1fe; font-weight: 700; font-variant-numeric: tabular-nums; }
.alloc-grid input.alloc-inp {
    /* Leaves room for the "%" suffix on the same line (see .pct-unit). */
    width: calc(100% - 14px); display: inline-block; vertical-align: middle;
    box-sizing: border-box; border: 1px solid transparent; background: transparent;
    text-align: center; font: inherit; padding: 4px 2px; border-radius: 4px; font-variant-numeric: tabular-nums;
}
.alloc-grid input.alloc-inp:hover { border-color: var(--border); }
.alloc-grid input.alloc-inp:focus { outline: none; border-color: var(--primary); background: #fff; }
.alloc-grid input.alloc-inp.dirty { border-color: var(--primary); }
.alloc-grid input.alloc-inp.saved { background: var(--success-bg, #e7f6ec); }
/* UAT / Go-Live milestone chips on a project row (next to the name — the date reference):
   a plain pill, small-caps label + month. No icons. */
.ms-chip {
    display: inline-flex; align-items: baseline; gap: 5px; margin-left: 6px;
    padding: 2px 8px; border-radius: 999px; border: 1px solid transparent;
    font-size: 0.68rem; line-height: 1.45; white-space: nowrap; vertical-align: middle;
}
.ms-chip .ms-lbl {
    font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; opacity: 0.8;
}
.ms-chip .ms-val { font-weight: 600; font-variant-numeric: tabular-nums; }
.ms-gl { background: #f1eefe; border-color: #ded7fb; color: #5a3fd6; }
/* Delivery variance */
.var-late { color: var(--danger); font-weight: 600; }
.var-early { color: var(--success); font-weight: 600; }

/* Merged Projects page — expandable edit area */
.proj-edit { display: flex; flex-direction: column; gap: 16px; padding: 6px 2px 12px; }
.proj-block { background: #faf9fd; border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; }
.proj-label { display: block; font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); margin-bottom: 8px; }
.assignee-chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.proj-status-line { font-size: 0.85rem; padding: 3px 0; display: flex; align-items: center; gap: 6px; }

/* Project weather icons (read-only, e.g. in tables) */
.wx { display: inline-flex; align-items: center; }
.wx-sunny { color: #00b894; }
.wx-cloudy { color: #c2660a; }
.wx-stormy { color: #e74c3c; }

/* Project weather picker (clickable icons for the PM) */
.wx-picker { display: inline-flex; gap: 6px; }
.wx-picker .wx-opt { cursor: pointer; border: 1px solid var(--border); border-radius: 8px; padding: 6px 8px; color: #b8b8b8; line-height: 0; background: var(--white); transition: all 0.12s; }
.wx-picker .wx-opt input { display: none; }
.wx-picker .wx-opt .ico { width: 18px; height: 18px; }
.wx-picker .wx-opt:hover { border-color: var(--primary-light); }
.wx-picker .wx-sunny:has(input:checked)  { color: #00b894; border-color: #00b894; background: #e6f9f3; }
.wx-picker .wx-cloudy:has(input:checked) { color: #c2660a; border-color: #c2660a; background: #fff4e6; }
.wx-picker .wx-stormy:has(input:checked) { color: #e74c3c; border-color: #e74c3c; background: var(--danger-bg); }

/* Project / product group header row (standard-week, /month, allocation still use it). */
.grid tr.group-row td {
    background: #efeafe; color: var(--primary); font-weight: 700;
    text-align: left; position: sticky; left: 0;
    font-size: 0.84rem; letter-spacing: 0.01em;
}
.grid tr.group-row:hover td { background: #e6def9; }

/* Timesheet flat list: each row carries a project pill; a caret folds a project's sub-tasks. */
/* Tighten the left of the name column so the pill sits close to the edge; keep each row on one line. */
.grid td.epic-col, .grid th.epic-col { padding-left: 4px; }
.grid td.epic-col { white-space: nowrap; }
.ts-caret {
    display: inline-flex; align-items: center; justify-content: center;
    width: 20px; height: 22px; border-radius: 6px;
    color: var(--primary); cursor: pointer; user-select: none;
    font-size: 1.05rem; font-weight: 700; line-height: 1; vertical-align: middle;
    margin-right: 0; transition: background 0.12s, transform 0.12s;
}
.ts-caret:not(.spacer):hover { background: #e6def9; }
.ts-caret.spacer { color: transparent; cursor: default; background: none; }
.proj-pill {
    display: inline-block; background: var(--primary); color: #fff;
    font-size: 0.68rem; font-weight: 700; letter-spacing: 0.02em;
    padding: 2px 8px; border-radius: 999px; vertical-align: middle; margin: 0 8px 0 0;
    max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
a.proj-pill.pill-link { text-decoration: none; color: #fff; }
a.proj-pill.pill-link:hover { background: #5a4bd4; text-decoration: none; }
/* Project header row (the "parent"): highlighted only when EXPANDED (tinted band + colour rail);
   when collapsed it reads as a plain single row. */
.grid tr.ts-head td { background: #efeafe; font-weight: 700; }
.grid tr.ts-head td.epic-col { background: #efeafe; border-left: 3px solid var(--primary); }
.grid tr.ts-head .head-name { color: var(--text); font-weight: 700; max-width: 240px; }
.grid tr.ts-head .ts-agg-cell { font-variant-numeric: tabular-nums; color: var(--primary); font-weight: 700; }
/* Collapsed → neutral, no highlight, no rail. */
.grid tr.ts-head.collapsed td { background: var(--white); font-weight: 600; }
.grid tr.ts-head.collapsed td.epic-col { background: var(--white); border-left: none; }

/* ========== Timesheet grid ========== */
.toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; }
.toolbar .spacer { flex: 1; }
.week-label { font-weight: 600; font-size: 1rem; }
.week-label small { color: var(--text-muted); font-weight: 400; }

/* Small right-aligned control strip sitting on top of a grid (e.g. the allocation month horizon). */
.grid-toolbar {
    display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin: 0 0 8px;
}
.grid-toolbar label { font-size: 0.8rem; color: var(--muted); margin: 0; }
.grid-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 12px; background: var(--white); }
.grid { width: 100%; border-collapse: collapse; }
.grid th, .grid td { border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); padding: 8px; text-align: center; }
.grid th { background: #f8f7ff; font-size: 0.8rem; }
.grid th.epic-col, .grid td.epic-col {
    text-align: left; position: sticky; left: 0; background: var(--white); z-index: 2;
    min-width: 280px; max-width: 360px;
}
.grid th.epic-col { background: #f8f7ff; }
.grid td.epic-col .epic-key { font-weight: 700; color: var(--primary); font-size: 0.82rem; }
/* Project key — same color/weight whether it's a linked RAD-… or a plain INTERNAL-… key */
.epic-key { font-weight: 700; color: var(--primary); }
a.epic-link { text-decoration: none; }
a.epic-link:hover { text-decoration: underline; }
a.epic-link::after { content: " ↗"; font-size: 0.7em; opacity: 0.6; }
/* In-app link (e.g. allocation → the Projects portfolio): no external-link arrow. */
a.epic-link.epic-internal::after { content: none; }
/* ----- Time Tracker grids (weekly timesheet + standard week): compact rows -----
   Same treatment as the allocation grid: tighter padding/fonts so a full project list fits on one
   screen. Scoped to .ts-grid so /month and the other .grid tables keep their roomier layout. */
/* NB: doubled `.grid.ts-grid` on purpose — the generic `.grid input.hours` / `.grid .note-btn` rules
   sit further down the file, so an equally-specific `.ts-grid …` selector would lose on source order. */
.ts-grid th, .ts-grid td { padding: 1px 6px; }
.ts-grid th { font-size: 0.74rem; }
.ts-grid td.epic-col { line-height: 1.25; font-size: 0.8rem; }
.ts-grid .proj-pill { font-size: 0.62rem; padding: 1px 6px; margin-right: 6px; max-width: 110px; }
.ts-grid .ts-caret { width: 16px; height: 18px; font-size: 0.9rem; border-radius: 4px; }
.ts-grid .st-connector { width: 12px; }
.ts-grid .day-date { font-size: 0.66rem; }
.grid.ts-grid input.hours { width: 44px; padding: 1px 2px; font-size: 0.82rem; }
/* The note button moves ONTO the input's line (it used to sit under it, which is what made every row
   ~55px tall); the whole cell is now a single line. */
.grid.ts-grid .note-btn {
    display: inline-flex; align-items: center; justify-content: center;
    margin: 0 0 0 1px; width: 16px; height: 16px; vertical-align: middle;
}
.grid.ts-grid .note-btn .ico { width: 11px; height: 11px; }
.ts-grid tr.ts-head td { padding-top: 2px; padding-bottom: 2px; }

/* Drag handle to move a project row inside its person's block. */
.al-handle { cursor: grab; color: var(--text-muted); opacity: 0.45; margin-right: 4px; font-size: 0.7rem; letter-spacing: -2px; }
.al-handle:hover { opacity: 1; color: var(--primary); }
tr.al-proj.al-dragging { opacity: 0.45; }
tr.al-proj.al-drop-target td { border-top: 2px solid var(--primary); }

/* Allocation: the month header stays visible while scrolling. `position: sticky` resolves against the
   nearest SCROLLING ancestor — .grid-wrap already scrolls horizontally (overflow-x: auto makes the block
   axis auto too), so it must also get a bounded height, otherwise the header would scroll away with the
   page. The project column keeps its own left-sticky, and the corner cell needs both + a higher z-index. */
.grid-wrap.sticky-head { max-height: calc(100vh - 240px); overflow: auto; } /* JS refines it to the exact space left */
.sticky-head .alloc-grid thead th { position: sticky; top: 0; z-index: 3; }
.sticky-head .alloc-grid thead th.epic-col { left: 0; z-index: 4; }
/* Grand total across everybody, pinned at the bottom of the grid. */
.alloc-grid tfoot td { position: sticky; bottom: 0; z-index: 3; background: #efeafe; font-weight: 700; }
.alloc-grid tfoot td.epic-col { left: 0; z-index: 4; background: #efeafe; }

/* ----- Allocation grid: compact rows + fold by person ----- */
/* Tighter than the generic .grid so a dozen people fit on one screen. */
.alloc-grid th, .alloc-grid td { padding: 2px 6px; font-size: 0.8rem; }
/* The name column must never push into the month columns. It is laid out as a flex row so the PROJECT
   NAME is what absorbs the truncation (ellipsis + full value in the tooltip), while the key, the go-live
   pill and the AE badge keep their size instead of being cut in half. */
.alloc-grid td.epic-col { line-height: 1.3; overflow: hidden; }
/* First line as a flex row so the PROJECT NAME absorbs the truncation (ellipsis + tooltip) instead of
   the key / go-live pill being cut in half; the AE badge sits on its own line below. */
.alloc-grid td.epic-col .al-line { display: flex; align-items: center; gap: 6px; }
.alloc-grid td.epic-col .epic-summary {
    flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.alloc-grid td.epic-col .al-handle,
.alloc-grid td.epic-col .epic-key,
.alloc-grid td.epic-col .ms-chip { flex: 0 0 auto; }
.alloc-grid td.epic-col .row-sub { display: block; margin-top: 2px; }
.alloc-grid td.epic-col .row-sub .badge-role {
    max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block;
    vertical-align: middle;
}
.alloc-grid td.epic-col .epic-key { font-size: 0.76rem; }
.alloc-grid td.epic-col .epic-summary { font-size: 0.78rem; }
.alloc-grid .ms-chip { padding: 0 6px; font-size: 0.62rem; }
.alloc-grid .ms-chip .ms-lbl { font-size: 0.56rem; }
.alloc-grid .badge { padding: 0 5px; font-size: 0.62rem; }
.alloc-grid input.alloc-inp { padding: 1px 4px; font-size: 0.8rem; }
.alloc-grid tr.group-row td { padding: 3px 6px; }
/* Person header: clickable, with a rotating caret. */
.alloc-grid tr.al-head { cursor: pointer; user-select: none; }
.alloc-grid tr.al-head .al-caret { display: inline-block; transition: transform 0.12s; opacity: 0.7; }
.alloc-grid tr.al-head.collapsed .al-caret { transform: rotate(-90deg); }
.alloc-grid tr.al-head .al-count { font-size: 0.7rem; margin-left: 4px; }

/* Secondary line under a grid row's project (e.g. the account executive on the allocation grid). */
.grid td.epic-col .row-sub {
    display: flex; align-items: center; flex-wrap: wrap; gap: 4px; margin-top: 4px;
}
.grid td.epic-col .row-sub .ms-chip { margin-left: 0; }
/* Flat list: name + project pill on one line; the title truncates with an ellipsis. */
.grid td.epic-col .epic-summary {
    font-size: 0.82rem; color: var(--text);
    display: inline-block; vertical-align: middle;
    max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Sub-task (child) rows: indented under the header, connected by the same left colour rail + a ↳ mark. */
.grid tr.subtask-row td.epic-col {
    border-left: 3px solid var(--primary); background: #faf9ff; padding-left: 10px;
}
.st-connector { display: inline-block; width: 16px; text-align: center; color: var(--primary); opacity: 0.5; vertical-align: middle; }
.grid td.epic-col .epic-summary.subtask-name { color: var(--text-muted); font-weight: 500; }
/* A project WITHOUT sub-tasks reads as its own line (bold pill + summary). */
.grid tr.project-row td.epic-col .epic-summary { color: var(--text); font-weight: 600; }

/* Sidebar collapsed = more room → show the full project name (wider name column). */
html.sidebar-collapsed .grid td.epic-col, html.sidebar-collapsed .grid th.epic-col { max-width: 640px; }
html.sidebar-collapsed .grid td.epic-col .epic-summary { max-width: 480px; }
html.sidebar-collapsed .grid td.epic-col .head-name { max-width: 540px; }
.grid th.weekend, .grid td.weekend { background: var(--weekend-bg); }
.grid th.today { color: var(--primary); }
.grid .day-name { font-weight: 600; }
.grid .day-date { font-size: 0.72rem; color: var(--text-muted); font-weight: 400; }
.grid input.hours {
    width: 56px; text-align: center; padding: 6px 4px;
    border: 1px solid transparent; border-radius: 6px; font-size: 0.9rem; background: transparent;
    font-variant-numeric: tabular-nums;
}
.grid input.hours:hover { border-color: var(--border); }
.grid input.hours:focus { outline: none; border-color: var(--primary); background: #fff; box-shadow: 0 0 0 3px var(--primary-bg); }
.grid input.hours.dirty { background: #fffbe6; }
.grid input.hours.saved { background: var(--success-bg); }
/* Per-cell work note: compact, subtle line under the hours; expands a touch on focus. */
.grid input.cell-note {
    display: block; width: 72px; margin: 3px auto 0; padding: 2px 4px;
    border: 1px solid transparent; border-radius: 5px; font-size: 0.68rem; color: var(--text-muted);
    background: transparent; text-align: center;
}
.grid input.cell-note::placeholder { color: #c9c9d4; }
.grid input.cell-note:hover { border-color: var(--border); }
.grid input.cell-note:focus { outline: none; border-color: var(--primary); background: #fff; color: var(--text); box-shadow: 0 0 0 3px var(--primary-bg); }
.grid input.cell-note.saved { background: var(--success-bg); }
/* Per-cell work-note button (opens the note popup); highlighted when a note exists. */
.grid .note-btn {
    display: block; margin: 2px auto 0; padding: 1px; width: 22px; height: 18px;
    border: 0; background: transparent; color: #c9c9d4; cursor: pointer; border-radius: 4px; line-height: 0;
}
.grid .note-btn .ico { width: 13px; height: 13px; }
.grid .note-btn:hover { background: var(--primary-bg); color: var(--primary); }
.grid .note-btn.has-note { color: var(--primary); }
.grid td.total, .grid th.total { font-weight: 700; background: #f8f7ff; font-variant-numeric: tabular-nums; }
.grid tfoot td { font-weight: 700; background: #f3f1fe; font-variant-numeric: tabular-nums; }
.grid tfoot td.epic-col { color: var(--text); }
.grid .row-empty { padding: 32px; color: var(--text-muted); text-align: center; }

/* ========== Assignment picker ========== */
.pick-search {
    padding: 8px 12px; font-size: 0.9rem; border: 1px solid var(--border);
    border-radius: 8px; min-width: 240px; font-family: inherit;
}
.pick-search:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-bg); }
.pick-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 12px; margin-top: 8px;
}
.pick-card {
    display: flex; align-items: center; gap: 12px;
    border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px;
    cursor: pointer; background: var(--white); transition: all 0.12s; user-select: none;
}
.pick-card:hover { border-color: var(--primary-light); }
.pick-card input { display: none; }
.pick-check {
    flex: 0 0 22px; height: 22px; border: 2px solid var(--border); border-radius: 6px;
    display: flex; align-items: center; justify-content: center; color: transparent; font-size: 0.8rem;
}
.pick-card:has(input:checked) { border-color: var(--primary); background: var(--primary-bg); }
/* Read-only picker (e.g. HEAD/ADMIN who sees everything without assignment): greyed, non-interactive. */
.pick-card:has(input:disabled) { opacity: 0.5; cursor: not-allowed; background: var(--surface-2, #f5f4fa); }
.pick-card:has(input:disabled):hover { border-color: var(--border); }
.pick-card:has(input:checked) .pick-check { background: var(--primary); border-color: var(--primary); color: #fff; }
.pick-body { display: flex; flex-direction: column; min-width: 0; }
.pick-title { font-weight: 700; color: var(--primary); font-size: 0.9rem; }
.pick-sub { font-size: 0.82rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ========== Toasts ========== */
.toast-wrap { position: fixed; top: 70px; right: 20px; z-index: 2000; display: flex; flex-direction: column; gap: 10px; }
.toast {
    background: var(--white); border: 1px solid var(--border); border-left: 4px solid var(--primary);
    border-radius: 10px; padding: 12px 16px; box-shadow: 0 8px 28px rgba(45,52,54,0.16);
    font-size: 0.88rem; max-width: 360px; animation: toastIn 0.15s ease;
}
.toast.error { border-left-color: var(--danger); background: var(--danger-bg); color: #b23128; }
.toast.warn { border-left-color: var(--warning); background: #fff8e6; color: #97670a; }
.toast.success { border-left-color: var(--success); background: var(--success-bg); color: #0a7d62; }
.toast.fade-out { opacity: 0; transition: opacity 0.3s ease; }
@keyframes toastIn { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: none; } }

/* ========== Modal ========== */
.modal-overlay {
    position: fixed; inset: 0; background: rgba(45,52,54,0.45);
    display: flex; align-items: center; justify-content: center; z-index: 2001;
    animation: toastIn 0.12s ease;
}
.modal-overlay[hidden] { display: none; }
.modal-card {
    background: var(--white); border-radius: 16px; padding: 28px; width: 440px; max-width: 92vw;
    box-shadow: 0 24px 70px rgba(45,52,54,0.3);
}
.modal-card h3 { color: var(--primary); font-size: 1.15rem; margin-bottom: 6px; }
.modal-card .modal-sub { color: var(--text-muted); font-size: 0.88rem; margin-bottom: 18px; }
.modal-card .modal-sub strong { color: var(--text); }
.modal-textarea {
    width: 100%; padding: 10px 12px; font-size: 0.9rem; font-family: inherit;
    border: 1px solid var(--border); border-radius: 8px; resize: vertical;
}
.modal-textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-bg); }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }

/* ========== Login ========== */
.login-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #f5f3ff, #fafafa); }
.login-card { background: var(--white); border: 1px solid var(--border); border-radius: 16px; padding: 40px; width: 380px; box-shadow: 0 10px 40px rgba(108,92,231,0.08); }
.login-card .brand { text-align: center; margin-bottom: 8px; }
.login-card .brand img { height: 30px; }
.login-card h1 { font-size: 1.3rem; text-align: center; color: var(--text); margin-bottom: 4px; }
.login-card .subtitle { text-align: center; color: var(--text-muted); font-size: 0.9rem; margin-bottom: 24px; }
.muted { color: var(--text-muted); font-size: 0.85rem; }
.sso-divider { display: flex; align-items: center; gap: 12px; color: var(--text-muted); font-size: 0.85rem; margin-bottom: 16px; }
.sso-divider::before, .sso-divider::after { content: ""; flex: 1; border-top: 1px solid var(--border); }
.text-right { text-align: right; }
.text-center { text-align: center; }
.mt-2 { margin-top: 16px; }

/* ========== Language switch ========== */
.lang-switch { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8rem; color: var(--text-muted); }
.lang-switch a { color: var(--text-muted); text-decoration: none; font-weight: 600; }
.lang-switch a:hover { color: var(--primary); }
.lang-switch a.active-lang { color: var(--primary); text-decoration: underline; }

/* ========== Inline calendar selector ========== */
.inline-form { display: inline-flex; align-items: center; gap: 8px; }
.mini-select {
    padding: 5px 8px; font-size: 0.8rem; border: 1px solid var(--border);
    border-radius: 8px; font-family: inherit; background: var(--white);
}
.mini-select:focus { outline: none; border-color: var(--primary); }

/* ========== Public holidays in grid ========== */
.grid th.holiday, .grid td.holiday { background: #fff4e6; }
.grid th.holiday { color: #c2660a; }
.holiday-dot { color: #e67e22; font-size: 0.6rem; display: block; line-height: 1; }

/* Locked (weekend/holiday not unlocked) */
.grid th.locked, .grid td.locked { background: repeating-linear-gradient(45deg, #f4f4f6, #f4f4f6 6px, #eceaf0 6px, #eceaf0 12px); }
.grid td.locked input.hours { color: #b8b8b8; cursor: not-allowed; }
.lock-state { display: inline-block; margin-top: 2px; font-size: 0.85rem; text-decoration: none; cursor: pointer; }

/* Unlocked (approved) weekend/holiday — clearly editable */
.grid th.unlocked, .grid td.unlocked { background: var(--success-bg); }
.grid th.unlocked { color: #0a7d62; }
.unlocked-mark { cursor: default; }

/* ========== Monthly project status ========== */
.month-status { display: flex; flex-direction: column; gap: 14px; }
/* Each project's monthly status is a self-contained card: name header on its own line, then the
   input fields in a row, a context line, and the comment full-width — readable instead of one cramped row. */
.status-row { display: flex; align-items: flex-end; gap: 14px 20px; padding: 14px 16px; border: 1px solid var(--border);
              border-radius: 10px; background: var(--white); flex-wrap: wrap; }
.status-project { order: -1; flex: 1 1 100%; display: flex; align-items: baseline; gap: 8px; font-size: 0.95rem;
                  border-bottom: 1px solid var(--border); padding-bottom: 8px; }
.status-project .epic-key { font-weight: 700; color: var(--primary); }
.status-field { display: flex; flex-direction: column; gap: 4px; font-size: 0.75rem; color: var(--text-muted); font-weight: 600; }
.status-field .mini-select,
.status-field input[type=number],
.status-field input[type=date] { width: 150px; }
.status-reached { text-transform: none; font-weight: 500; }
/* Visual checkbox pill (matches the app's other selectable controls): a bordered chip that highlights when checked. */
.check-pill { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; border: 1px solid var(--border);
              border-radius: 8px; padding: 5px 10px; font-size: 0.78rem; font-weight: 600; color: var(--text-muted);
              background: var(--white); transition: all 0.12s; margin-top: 4px; }
.check-pill:hover { border-color: var(--primary-light); }
.check-pill input { accent-color: var(--primary); width: 15px; height: 15px; margin: 0; cursor: pointer; }
.check-pill:has(input:checked) { border-color: var(--primary); color: var(--primary); background: var(--primary-bg); }
/* Days-signed / last-remaining context — its own line, lighter. */
.status-context { order: 5; flex: 1 1 100%; font-size: 0.8rem; color: var(--text-muted); font-weight: 500; }
/* Comment on its own full-width line at the bottom. */
.status-row textarea, .status-row .modal-textarea { order: 10; flex: 1 1 100%; min-height: 44px; }
.status-saved { flex: 0 0 18px; color: var(--success); font-weight: 700; align-self: center; }

/* Sidebar count badge */
.nav-badge {
    display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 6px;
    background: var(--danger); color: #fff; border-radius: 10px;
    font-size: 0.7rem; font-weight: 700; text-align: center; line-height: 18px;
}

/* ========== Sidebar collapse (widen the content / timeline) ========== */
.sidebar-toggle {
    background: none; border: none; cursor: pointer; font-size: 1.2rem;
    color: var(--text-muted); padding: 4px 10px; margin-right: 4px; border-radius: 8px;
    line-height: 1;
}
.sidebar-toggle:hover { background: var(--primary-bg); color: var(--primary); }
html.sidebar-collapsed .sidebar { display: none; }
html.sidebar-collapsed .main { margin-left: 0; }

/* ========== Header: back-to-portal link ========== */
.header-apps {
    margin-left: 18px; font-size: 0.85rem; font-weight: 600;
    color: var(--text-muted); text-decoration: none;
}
.header-apps:hover { color: var(--primary); }

/* ========== Portal landing ========== */
.portal-main {
    margin-top: var(--header-height);
    min-height: calc(100vh - var(--header-height));
    padding: 48px 40px; box-sizing: border-box;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.portal-h1 { font-size: 1.9rem; font-weight: 700; color: var(--primary); margin-bottom: 6px; }
.portal-sub { color: var(--text-muted); margin-bottom: 32px; }
.portal-grid {
    display: flex; flex-wrap: wrap; gap: 20px;
    justify-content: center; align-items: stretch;
    width: 100%;
}
.portal-tile {
    width: 240px;
    display: flex; flex-direction: column; gap: 8px;
    padding: 24px; background: var(--white);
    border: 1px solid var(--border); border-radius: 14px;
    text-decoration: none; color: var(--text);
    transition: all 0.15s;
}
.portal-tile:hover {
    border-color: var(--primary-light);
    box-shadow: 0 6px 24px rgba(108, 92, 231, 0.12);
    transform: translateY(-2px);
}
.portal-ico { color: var(--primary); }
.portal-ico .ico { width: 28px; height: 28px; }
.portal-tile-title { font-size: 1.15rem; font-weight: 700; }
.portal-tile-desc { font-size: 0.85rem; color: var(--text-muted); }

/* ========== Product timeline (Asana-like) ========== */
.timeline-scroll { overflow-x: auto; }
.tl-zoom { display: inline-flex; gap: 4px; align-items: center; }
.tl-zoom .btn { min-width: 30px; }
.timeline {
    --tl-name-w: 200px;
    background: var(--white); border: 1px solid var(--border); border-radius: 12px;
    overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.tl-head { display: flex; align-items: stretch; border-bottom: 1px solid var(--border); }
.tl-name-col {
    flex: 0 0 var(--tl-name-w); width: var(--tl-name-w); box-sizing: border-box;
    padding: 0 14px; border-right: 1px solid var(--border);
    display: flex; align-items: center; gap: 10px;
}
.tl-corner { background: #fbfbfe; }
.tl-track { position: relative; flex: 1; }
/* Remove-person "×" on a timeline row: faint by default, red on hover; appears on row hover. */
.tl-person-remove { border: none; background: transparent; color: var(--text-muted); cursor: pointer;
    font-size: 1.05rem; line-height: 1; padding: 2px 4px; border-radius: 4px; opacity: 0; transition: all 0.12s; }
.tl-row:hover .tl-person-remove { opacity: 0.6; }
.tl-person-remove:hover { opacity: 1; color: var(--danger); background: var(--danger-bg); }

/* Drag handle to reorder people (tasks follow their person). Faint until row hover. */
.tl-row-handle { cursor: grab; color: var(--text-muted); opacity: 0; user-select: none;
    font-size: 0.9rem; line-height: 1; letter-spacing: -1px; transition: opacity 0.12s; }
.tl-person-row:hover .tl-row-handle { opacity: 0.55; }
.tl-row-handle:hover { opacity: 1; }
.tl-person-row.row-dragging { opacity: 0.5; background: #f3f0ff; }
/* Highlighted target row while dragging a task/OFF onto another engineer (reassign). */
.tl-person-row.tl-row-drop-target { background: #ede9ff; box-shadow: inset 0 0 0 2px var(--primary, #6C5CE7); }
/* Comment indicator dot on a task bar carrying a note. */
.tl-note-dot { pointer-events: none; margin-left: 3px; font-weight: 900; opacity: 0.85; }

/* Budget consumption bar on a project's Progress block (consumed vs days signed). */
.budget-bar { height: 8px; border-radius: 5px; background: var(--border); overflow: hidden; margin-top: 8px; max-width: 420px; }
.budget-bar > span { display: block; height: 100%; background: #00b894; border-radius: 5px; }
.budget-bar > span.warn { background: #e0a43b; }
.budget-bar > span.over { background: #e05a5a; }

/* "Notify finance" toggle next to the Reached button (head-of/admin only). */
.notify-lbl { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; font-size: .74rem;
    color: var(--text-muted); cursor: pointer; white-space: nowrap; }
.notify-lbl input[type="checkbox"] { margin: 0; }

/* Report notes modal: one entry per time-log note. */
.pn-body { max-height: 60vh; overflow-y: auto; }
.pn-item { padding: 10px 0; border-bottom: 1px solid var(--border); }
.pn-item:last-child { border-bottom: none; }
.pn-meta { font-size: 0.78rem; color: var(--text-muted); margin-bottom: 3px; }
.pn-note { font-size: 0.9rem; color: var(--text); white-space: pre-wrap; }

/* two-level header */
.tl-qrow { display: flex; border-bottom: 1px solid var(--border); }
.tl-quarter {
    box-sizing: border-box; padding: 6px 12px; font-size: 0.72rem; font-weight: 700;
    letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted);
    border-left: 1px solid var(--border); background: #fbfbfe;
}
.tl-quarter:first-child { border-left: none; }
.tl-mrow { display: flex; }
.tl-month {
    box-sizing: border-box; padding: 7px 12px; font-size: 0.82rem; font-weight: 600;
    color: var(--text); border-left: 1px solid var(--border);
}
.tl-month:first-child { border-left: none; }
.tl-month.even { background: #fafafe; }

/* body + rows */
.tl-body { position: relative; }
.tl-row { display: flex; align-items: stretch; border-bottom: 1px solid #eef0f4; }
.tl-row:last-child { border-bottom: none; }
.tl-row:hover { background: #fcfcff; }
.tl-name { font-size: 0.88rem; font-weight: 600; color: var(--text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-avatar {
    flex: 0 0 26px; width: 26px; height: 26px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 0.7rem; font-weight: 700; color: #fff; letter-spacing: 0.02em;
}

/* month gridlines */
.tl-grid { position: absolute; inset: 0; display: flex; pointer-events: none; }
.tl-month-cell { box-sizing: border-box; border-left: 1px solid #eef0f4; }
.tl-month-cell:first-child { border-left: none; }
.tl-month-cell.even { background: #fafafe; }
/* week header cells (week zoom) — narrower labels */
.tl-week { padding: 7px 4px; font-size: 0.72rem; text-align: center; }
.tl-week-cell { flex: none; }
/* greyed weekends (overlay band, behind bars) */
.tl-weekend { position: absolute; top: 0; bottom: 0; background: rgba(108, 92, 231, 0.07); }
.tl-granularity { margin-left: 4px; }

/* today marker */
.tl-today { position: absolute; top: 0; bottom: 0; width: 2px; background: #0984e3; z-index: 3; }
.tl-today::before {
    content: ""; position: absolute; top: -1px; left: -3px;
    width: 8px; height: 8px; border-radius: 50%; background: #0984e3;
}

/* bars */
.tl-bar {
    position: absolute; height: 25px; min-width: 6px;
    background: var(--primary); color: #fff;
    border: none; border-radius: 6px; padding: 0 9px;
    font-size: 0.78rem; font-weight: 600; line-height: 25px; text-align: left;
    overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
    cursor: pointer; box-shadow: 0 1px 2px rgba(0,0,0,0.18); z-index: 2;
    transition: filter 0.12s, transform 0.12s;
}
.tl-bar:hover { filter: brightness(1.06); transform: translateY(-1px); box-shadow: 0 3px 8px rgba(0,0,0,0.22); }
.tl-bar.tl-drag { cursor: grab; }
.tl-bar.dragging { opacity: 0.85; cursor: grabbing; z-index: 6; transform: none; }
.tl-milestone.tl-drag { cursor: grab; }
.tl-bar.off { background: #ffeaa7; color: #8d7400; box-shadow: none; font-weight: 700; }
.tl-bar-label { pointer-events: none; }
.tl-monthnav { display: inline-flex; gap: 4px; }
.tl-toolbar-form { display: inline-flex; }

/* bar / avatar color palette (by person) */
.tl-c0 { background: #6C5CE7; } .tl-c1 { background: #0984e3; }
.tl-c2 { background: #00b894; } .tl-c3 { background: #e17055; }
.tl-c4 { background: #e84393; } .tl-c5 { background: #009432; }
.tl-c6 { background: #8854d0; } .tl-c7 { background: #eb3b5a; }

/* cycles band (product-level Shape-Up cycles + milestones) */
.tl-band { background: #f7f6fe; border-bottom: 2px solid var(--border); }
.tl-band:hover { background: #f7f6fe; }
.tl-band-title { font-size: 0.78rem; font-weight: 700; color: var(--text-muted);
    text-transform: uppercase; letter-spacing: 0.04em; }
.tl-bar.tl-cycle.build { background: #2d3561; color: #fff; }
.tl-bar.tl-cycle.cooldown { background: #b2bec3; color: #2d3436; box-shadow: none; }

/* milestone diamond + label */
.tl-milestone {
    position: absolute; transform: translateX(-7px); background: none; border: none;
    padding: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
    height: 25px; white-space: nowrap; z-index: 4;
}
.tl-diamond {
    width: 12px; height: 12px; background: #00b894;
    border: 2px solid #fff; transform: rotate(45deg); box-shadow: 0 1px 3px rgba(0,0,0,0.3);
    flex: 0 0 auto;
}
.tl-ms-label { font-size: 0.76rem; font-weight: 700; color: #0a7a5e; }
.tl-milestone:hover .tl-diamond { filter: brightness(1.1); }

/* read-only monthly status block on the Projects page */
.status-readonly { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; font-size: 0.85rem; }

/* Accordion ("éventail") project rows on /admin/epics */
.epic-row { cursor: pointer; }
.epic-row:hover { background: var(--primary-bg); }
.row-caret { display: inline-block; color: #aaa; font-size: 0.8rem; transition: transform .15s ease; }
.epic-row.open .row-caret { transform: rotate(90deg); }

/* KPD ideas list (per project, on /admin/epics) */
.kpd-list { width: 100%; border-collapse: collapse; font-size: 0.82rem; margin-top: 4px; }
.kpd-list th { text-align: left; font-weight: 600; color: #888; padding: 4px 8px; border-bottom: 1px solid var(--border); }
.kpd-list td { padding: 4px 8px; border-bottom: 1px solid #f0f0f0; vertical-align: top; }
.kpd-list .badge { background: var(--primary-bg); color: var(--primary); white-space: nowrap; }

/* allocation — portfolio (per chef de projet) */
.lead-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.lead-head h2 { font-size: 1.05rem; font-weight: 700; color: var(--primary); margin: 0; }
.lead-meta { font-size: 0.82rem; }

/* ========== Simple modal (timeline) ========== */
.tl-modal {
    position: fixed; inset: 0; z-index: 200;
    background: rgba(45, 52, 54, 0.45);
    display: flex; align-items: center; justify-content: center;
}
.tl-modal-card {
    background: var(--white); border-radius: 14px; padding: 24px;
    width: 460px; max-width: calc(100vw - 40px); box-shadow: 0 20px 60px rgba(0,0,0,0.25);
}
.tl-modal-card h3 { font-size: 1.2rem; font-weight: 700; color: var(--primary); margin-bottom: 16px; }
.mt-2 { margin-top: 8px; }
.status-reached { display: inline-flex; gap: 4px; align-items: center; font-size: 0.75rem; color: var(--text-muted); margin-top: 4px; }

/* ========== Mobile / phones ========== */
@media (max-width: 768px) {
    /* Header: compact; drop the long display name + separators, keep the action links */
    .header { padding: 0 10px; gap: 6px; }
    .header-logo .app-tag { display: none; }
    .header-logo img { height: 22px; }
    .header-right { gap: 10px; }
    .header-user { font-size: 0.78rem; gap: 8px; }
    .header-user span { display: none; }          /* hides the name and the "·" separators */

    /* Full-width content; the sidebar becomes an off-canvas drawer (starts collapsed on phones) */
    .main { margin-left: 0; padding: 16px 14px; max-width: 100%; }
    .main h1 { font-size: 1.4rem; }
    .sidebar { width: 82%; max-width: 300px; box-shadow: 2px 0 24px rgba(30, 20, 60, 0.20); }
    .sidebar-toggle { font-size: 1.3rem; }

    /* Wide data tables scroll horizontally instead of blowing out the page width */
    .table { display: block; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; }

    /* Stack multi-column layouts */
    .card-row { grid-template-columns: 1fr; }
    .pick-grid { grid-template-columns: 1fr; }
    .stats > .stat, .kpi-row > .card { flex: 1 1 100%; }
    .form-row .form-group { min-width: 100%; }

    /* Bigger tap targets for the timesheet cells */
    .grid input.hours { min-height: 34px; }
}

/* ---- Searchable project combobox (Payments → By project) ---- */
.proj-combo { position: relative; display: inline-block; min-width: 340px; }
.proj-combo .combo-input { width: 100%; padding-right: 30px; }
.proj-combo .combo-list {
    position: absolute; z-index: 50; left: 0; right: 0; margin: 4px 0 0; padding: 5px;
    list-style: none; background: var(--white); border: 1px solid var(--border);
    border-radius: 11px; max-height: 260px; overflow: auto;
    box-shadow: 0 12px 30px -10px rgba(60, 40, 140, .28);
}
.proj-combo .combo-opt {
    display: flex; align-items: center; gap: 10px; padding: 8px 10px;
    border-radius: 8px; cursor: pointer;
}
.proj-combo .combo-opt:hover,
.proj-combo .combo-opt.active { background: var(--primary-bg); }
.proj-combo .combo-opt.sel { background: #efe9ff; }
.proj-combo .combo-pill {
    flex: none; font-size: .72rem; font-weight: 800; color: var(--primary);
    background: var(--primary-bg); padding: 3px 9px; border-radius: 20px;
    font-variant-numeric: tabular-nums;
}
.proj-combo .combo-pill.closed { color: #8a8699; background: #f0eef6; }
.proj-combo .combo-nm {
    font-size: .88rem; color: var(--text); white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
}

/* Cross-app sidebar link (e.g. Project Planning → Time Tracker) — subtly separated. */
.sidebar-link.sidebar-link-cross { margin-top: 10px; border-top: 1px solid var(--border); padding-top: 14px; color: var(--text-muted); }

/* Secondary line inside a combobox option (e.g. the person's email). */
.proj-combo .combo-opt { flex-wrap: wrap; }
.proj-combo .combo-sub { flex: 1 0 100%; font-size: .74rem; }

/* Allocation totals: green while within capacity (<=100%), red once over-allocated (.var-late). */
.alloc-total-cell.alloc-ok { color: var(--success); font-weight: 700; }
/* Muted "%" unit next to an allocation input (the input itself holds a plain number). */
/* Shown only once the cell holds a value (the blank placeholder drives :placeholder-shown). */
.pct-unit { display: none; font-size: .72rem; color: var(--text-muted); vertical-align: middle; }
.alloc-inp:not(:placeholder-shown) + .pct-unit { display: inline; }