/*
 * Projects module — shared primitives.
 *
 * Palette is the directive's Reference section:
 *   authority navy #182442, action green #5dc19b,
 *   Done green, In Progress blue, Blocked amber, Not Started gray, red for over estimate.
 */

:root {
    --proj-navy: #182442;
    --proj-green: #5dc19b;
    --proj-done: #5dc19b;
    --proj-inprogress: #3b82f6;
    --proj-blocked: #f59e0b;
    --proj-notstarted: #94a3b8;
    --proj-over: #dc2626;
    --proj-over-tint: #fef2f2;
    --proj-risk-tint: #fffbeb;
    --proj-border: #e2e8f0;
    --proj-muted: #64748b;
}

/* ---------- status pills ---------- */

.status-pill {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    line-height: 1.6;
}

.status-pill.status-done { background-color: var(--proj-done); }
.status-pill.status-inprogress { background-color: var(--proj-inprogress); }
.status-pill.status-blocked { background-color: var(--proj-blocked); }
.status-pill.status-notstarted { background-color: var(--proj-notstarted); }

/* ---------- over estimate ---------- */

.over-estimate-icon {
    color: var(--proj-over);
    margin-right: 4px;
}

/* Tinted row, per the directive. Kept light so the text stays readable. */
tr.row-over-estimate > td { background-color: var(--proj-over-tint); }
tr.row-at-risk > td { background-color: var(--proj-risk-tint); }

.over-pill {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    background-color: var(--proj-over);
    white-space: nowrap;
}

/* ---------- numeric columns ---------- */

.data-table th.numeric,
.data-table td.numeric,
.numeric {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.variance-over { color: var(--proj-over); font-weight: 600; }
.variance-under { color: #059669; }

/* Actual hours past their budget. Rendered by ProjectsCommon.ActualHours, and applied at
   every level of the tree — punch list, phase and project — so an overrun reads the same
   on the Gantt, in the grids and on the dashboard. */
.hours-over { color: var(--proj-over); font-weight: 700; }

/* A KPI card's own .stat-value colour is set by a two-class rule in each dashboard's
   stylesheet, and this file loads first — so the override needs the extra class to win
   on specificity rather than on order. */
.stat-card .stat-value.hours-over { color: var(--proj-over); }

.muted { color: var(--proj-muted); font-size: 12px; }

/* ---------- percent complete ---------- */

.percent-cell {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 120px;
}

.percent-track {
    flex: 1;
    height: 6px;
    background-color: #e2e8f0;
    border-radius: 999px;
    overflow: hidden;
}

.percent-fill {
    height: 100%;
    background-color: var(--proj-green);
    border-radius: 999px;
}

.percent-text {
    font-size: 12px;
    color: var(--proj-muted);
    font-variant-numeric: tabular-nums;
    min-width: 34px;
    text-align: right;
}

/* ---------- burn bar ---------- */

.burn-bar { margin-bottom: 6px; }

.burn-track {
    display: flex;
    height: 10px;
    background-color: #e2e8f0;
    border-radius: 999px;
    overflow: hidden;
}

.burn-fill { background-color: var(--proj-green); }
.burn-over { background-color: var(--proj-over); }

.burn-label {
    font-size: 13px;
    color: #334155;
}

.burn-over-label { color: var(--proj-over); font-weight: 600; }
.burn-muted { color: var(--proj-muted); }

/* ---------- filter chips ---------- */

.drill-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    background-color: #eef2ff;
    color: #3730a3;
    font-size: 12px;
    font-weight: 600;
}

.drill-chip-remove {
    border: none;
    background: transparent;
    color: inherit;
    cursor: pointer;
    padding: 0 0 0 4px;
}

/* ---------- date range filter ---------- */

.date-range-filter {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--proj-muted);
}

.date-range-filter label { margin: 0; font-weight: 600; }
.filter-date { max-width: 150px; }
.date-range-sep { color: var(--proj-muted); }

/* ---------- forms ---------- */

.form-row { margin-bottom: 14px; }

.form-row.two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.form-group label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #334155;
    margin-bottom: 4px;
}

.form-group .required { color: var(--proj-over); }

.form-hint {
    display: block;
    font-size: 12px;
    color: var(--proj-muted);
    margin-top: 4px;
}

.form-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
    background-color: #f8fafc;
    border-left: 3px solid var(--proj-notstarted);
    border-radius: 4px;
    font-size: 13px;
    color: #475569;
}

.form-control-sm {
    width: 100%;
    padding: 3px 6px;
    font-size: 13px;
    border: 1px solid var(--proj-border);
    border-radius: 4px;
}

/* ---------- selects ----------

   Both .filter-input and .form-control-sm set a border but no background, which leaves a
   <select> sitting on the browser's default grey — it reads as disabled next to the text
   inputs beside it. Everywhere else in the app a select is a .form-control on white
   (Jobs > New Inspection is the reference), so match that here.

   Scoped to select on purpose: text and date inputs carrying the same classes already
   inherit white from the page and must not be touched. This file only loads on Projects
   screens, so no other module's filters change. */
select.filter-input,
select.form-control-sm {
    background-color: #ffffff;
    color: #0f172a;
    transition: all 0.2s;
}

/* .filter-input keeps the app's green filter ring; .form-control-sm had no focus state at
   all, so it takes .form-control's blue to match New Inspection. */
select.form-control-sm:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    background-color: #ffffff;
}

select.filter-input:focus {
    background-color: #ffffff;
}

/* ---------- empty states ---------- */

.empty-cell,
.error-cell {
    text-align: center;
    color: var(--proj-muted);
    padding: 24px;
}

.error-cell { color: var(--proj-over); }