/* ===========================================================================
   eg-ui-polish.css — global UI consistency layer, loaded on every page.
   Handles the cross-page polish that would otherwise be repeated per view:
     • one type family + weight/size scale for all interactive chrome
     • a visible calendar icon on every date input
     • readable contrast for "muted" filter / card / label text
   Page-specific CSS still wins (this file is loaded before page styles).
   =========================================================================== */

/* ── 1. Type standardization ─────────────────────────────────────────────
   Pin one font stack so headings, tables, form controls and buttons all read
   the same across pages (some views had drifted to browser defaults). */
:root {
    --eg-font: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, "Helvetica Neue", Arial, sans-serif;
}
body,
.eg-card, .eg-card-title,
.form-control, .form-select, .btn,
table, .table, th, td,
.nav-link, .menu-link, .badge {
    font-family: var(--eg-font);
}
/* Consistent control + table sizing */
.form-control, .form-select { font-size: 0.875rem; }
.table, .eg-table { font-size: 0.875rem; }
.eg-card-title, .card-title { font-weight: 700; letter-spacing: -0.01em; }

/* ── 2. Calendar icon on every date field ────────────────────────────────
   Date inputs are upgraded to the flatpickr (Bootstrap) calendar by
   eg-datepicker.js; flatpickr swaps the field to a text "altInput" tagged
   .eg-fp-input. Give that a trailing calendar icon so it clearly reads as a
   date field, and leave room for it. The .flatpickr-input covers any field the
   script hasn't wrapped yet (brief flash before JS runs). */
.eg-fp-input,
input.flatpickr-input,
input[type="date"],
input[type="datetime-local"],
input[type="month"] {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='16'%20height='16'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%232C7BE5'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='3'%20y='4'%20width='18'%20height='18'%20rx='2'/%3E%3Cline%20x1='16'%20y1='2'%20x2='16'%20y2='6'/%3E%3Cline%20x1='8'%20y1='2'%20x2='8'%20y2='6'/%3E%3Cline%20x1='3'%20y1='10'%20x2='21'%20y2='10'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 34px !important;
    cursor: pointer;
}
/* flatpickr's own calendar popup should sit above cards/modals. */
.flatpickr-calendar { z-index: 12050 !important; }

/* ── 3. Contrast for muted / filter text ─────────────────────────────────
   Several filter bars and card sub-labels used a near-invisible grey. Lift
   the floor so labels and placeholders are legible on white and tinted cards. */
.text-muted,
.form-label.small,
.pi-chip:not(.active),
.inv-chip:not(.active),
label.small,
small.text-muted,
.card .small.text-muted {
    color: #5a5570 !important;      /* was ~#b0adc0 in places — too light */
}
::placeholder { color: #8a86a0 !important; opacity: 1; }
/* Filter-bar chips: give inactive chips a visible border so they read as controls */
.pi-chip:not(.active), .inv-chip:not(.active) {
    border-color: #d9d5ec !important;
}
/* Table header labels that had gone faint */
.eg-table thead th, .table thead th {
    color: #3a3550;
    font-weight: 700;
}

/* ── 4. Controls sitting ON a coloured card header ────────────────────────
   The eg-card-header has a blue/green gradient, so outline buttons and links
   placed in it (Sample CSV, Upload CSV, "back", etc.) rendered blue-on-green
   and were invisible. Force them to white with a translucent fill so they
   read clearly against any header colour. */
.eg-card-header .btn-outline-info,
.eg-card-header .btn-outline-secondary,
.eg-card-header .btn-outline-primary,
.eg-card-header .btn-outline-light,
.eg-card-header .btn-outline-dark,
.eg-card-header a:not(.btn-primary):not(.btn-success):not(.btn-danger) {
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.65) !important;
    background-color: rgba(255, 255, 255, 0.12) !important;
}
.eg-card-header .btn-outline-info:hover,
.eg-card-header .btn-outline-secondary:hover,
.eg-card-header .btn-outline-primary:hover,
.eg-card-header .btn-outline-light:hover,
.eg-card-header .btn-outline-dark:hover {
    color: #1e1e2d !important;
    background-color: #ffffff !important;
    border-color: #ffffff !important;
}
/* Filter labels / captions inside a coloured header (PART, WORKSHOP, FROM…)
   were dark-on-gradient and barely legible — force white for consistency. */
.eg-card-header label,
.eg-card-header .form-label,
.eg-card-header small,
.eg-card-header .text-muted,
.eg-card-header .small {
    color: #ffffff !important;
    opacity: 0.95;
}
/* Selects on a coloured header: white field + dark text, same as inputs. */
.eg-card-header input.form-control,
.eg-card-header input.form-control-sm,
.eg-card-header select.form-select,
.eg-card-header select.form-select-sm {
    background-color: #ffffff !important;
    color: #1e1e2d !important;
    border-color: rgba(255,255,255,0.5) !important;
}
/* Date inputs on a coloured header keep the calendar icon (defined above) and
   stay on a white field so the blue icon is visible. */
.eg-card-header input[type="date"],
.eg-card-header input[type="datetime-local"],
.eg-card-header input[type="month"] {
    background-color: #ffffff !important;
    color: #1e1e2d !important;
}
.eg-card-header .badge.bg-label-secondary,
.eg-card-header .badge {
    background-color: rgba(255, 255, 255, 0.22) !important;
    color: #ffffff !important;
}