/* ==========================================================================
   IRETP · Premium refinement layer (2026)
   --------------------------------------------------------------------------
   Loaded LAST in the cascade. Applies the visual language of current
   best-in-class dashboard kits (AlignUI / Horizon / M3-Expressive class):
   hairline-border cards with micro-shadows, tinted icon chips, delta pills,
   refined data tables with tabular numerals, softer radii, and brand-tinted
   focus rings. Token-level only — no markup dependencies beyond the classes
   the design system already ships (.card, .admin-card, .kpi-*, tables).

   Deliberately does NOT touch the interactive map's custom UI
   (.map-*, .dash-kpi-*, .maplibregl-*, .stats-popup) — that page has its
   own dark visual system.
   ========================================================================== */

:root {
    --prem-border: rgba(16, 24, 40, 0.08);
    --prem-border-strong: rgba(16, 24, 40, 0.14);
    --prem-shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.05);
    --prem-shadow-sm: 0 1px 3px rgba(16, 24, 40, 0.07), 0 1px 2px rgba(16, 24, 40, 0.05);
    --prem-shadow-md: 0 4px 10px -2px rgba(16, 24, 40, 0.09), 0 2px 4px -2px rgba(16, 24, 40, 0.05);
    --prem-shadow-lg: 0 16px 32px -8px rgba(16, 24, 40, 0.16);
    --prem-radius: 14px;
    --prem-radius-sm: 10px;
    --prem-muted: #667085;
    --prem-ink: #101828;
    --prem-canvas: #f6f8f7;
    --prem-hover-tint: rgba(6, 103, 53, 0.035);
}

/* ------------------------------------------------------------------ canvas */
body {
    background-color: var(--prem-canvas);
}

/* ------------------------------------------------------------------- cards */
.card,
.admin-card {
    border: 1px solid var(--prem-border);
    border-radius: var(--prem-radius);
    box-shadow: var(--prem-shadow-xs);
    transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}

.card .card-header {
    background: transparent;
    border-bottom: 1px solid var(--prem-border);
    font-weight: 600;
    color: var(--prem-ink);
}

/* Cards that are links / interactive tiles lift slightly on hover. */
a.card:hover,
a > .card:hover,
.card.card-stats:hover,
.quick-tile:hover {
    box-shadow: var(--prem-shadow-md);
    border-color: var(--prem-border-strong);
    transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
    .card, .admin-card { transition: none; }
    a.card:hover, a > .card:hover, .card.card-stats:hover, .quick-tile:hover { transform: none; }
}

/* --------------------------------------------------------------- KPI cards */
.kpi-card .kpi-label {
    font-size: var(--fs-xs, .75rem);
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--prem-muted);
}

.kpi-card .kpi-value {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--prem-ink);
    font-variant-numeric: tabular-nums;
}

.kpi-card .kpi-icon-wrap {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}

/* Trend indicators become tinted delta pills. Colors chosen for >= 4.5:1
   contrast on their tints (#0f6f4f on 10% green, #b42318 on 10% red). */
.kpi-trend {
    display: inline-flex;
    align-items: center;
    gap: .2rem;
    font-size: .75rem;
    font-weight: 600;
    padding: .1rem .5rem;
    border-radius: 999px;
    margin-top: .15rem;
}

.kpi-trend.up   { background: rgba(52, 195, 143, .14); color: #0f6f4f; }
.kpi-trend.down { background: rgba(244, 106, 106, .14); color: #b42318; }

/* ------------------------------------------------------------- data tables */
.card table thead th,
.admin-card table thead th,
.table > thead > tr > th {
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--prem-muted);
    border-bottom: 1px solid var(--prem-border-strong);
    padding-top: .65rem;
    padding-bottom: .65rem;
    white-space: nowrap;
}

.card table tbody td,
.admin-card table tbody td {
    padding-top: .7rem;
    padding-bottom: .7rem;
    border-color: var(--prem-border);
}

.table-hover > tbody > tr:hover > * {
    background-color: var(--prem-hover-tint);
    --bs-table-bg-state: var(--prem-hover-tint);
}

/* Numeric columns read like a financial terminal. */
.table td.text-end,
.table th.text-end,
.kpi-value,
.stat-value {
    font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------------ badges */
.badge {
    border-radius: 999px;
    font-weight: 600;
    letter-spacing: .01em;
    padding: .3em .65em;
}

/* ----------------------------------------------------------------- buttons */
.btn {
    border-radius: var(--prem-radius-sm);
}

.btn-group > .btn,
.input-group > .btn {
    border-radius: var(--prem-radius-sm);
}

/* Logical properties so grouped-control corners join correctly in both
   LTR and RTL without direction-specific overrides. */
.btn-group > .btn:not(:first-child),
.input-group > .btn:not(:first-child) {
    border-start-start-radius: 0;
    border-end-start-radius: 0;
}

.btn-group > .btn:not(:last-child),
.input-group > .form-control:not(:last-child),
.input-group > .input-group-text:first-child {
    border-start-end-radius: 0;
    border-end-end-radius: 0;
}

.btn:focus-visible,
.form-control:focus,
.form-select:focus {
    box-shadow: 0 0 0 3px rgba(6, 103, 53, 0.22);
}

/* ------------------------------------------------------------------ inputs */
.form-control,
.form-select,
.input-group-text {
    border-radius: var(--prem-radius-sm);
    border-color: #d0d5dd;
}

/* ------------------------------------------------------------------ modals */
.modal-content {
    border: none;
    border-radius: 16px;
    box-shadow: var(--prem-shadow-lg);
}

/* -------------------------------------------------------------- accordions */
.accordion-item {
    border-color: var(--prem-border);
}

.accordion-item:first-of-type {
    border-top-left-radius: var(--prem-radius);
    border-top-right-radius: var(--prem-radius);
}

.accordion-item:last-of-type {
    border-bottom-left-radius: var(--prem-radius);
    border-bottom-right-radius: var(--prem-radius);
}

.accordion-button {
    font-weight: 600;
    color: var(--prem-ink);
}

.accordion-button:not(.collapsed) {
    background: rgba(6, 103, 53, 0.05);
    color: var(--primary-color, #066735);
    box-shadow: inset 0 -1px 0 var(--prem-border);
}

/* --------------------------------------------------------------- nav pills */
.nav-pills .nav-link {
    border-radius: 999px;
    font-weight: 500;
}

/* ------------------------------------------------------------- list groups */
.list-group-item {
    border-color: var(--prem-border);
}

/* ------------------------------------------------------ skeleton / loading */
.esems-skeleton,
.skeleton {
    border-radius: var(--prem-radius-sm);
}

/* ------------------------------------------------------------ chart canvas */
.card canvas {
    border-radius: 6px;
}