/* ===================================================================
 * DRC TMS — shared list-page UI primitives
 * ================================================================ */

/* Metric cards with colored left accent bar */
.drc-metric-card {
    background: #fff;
    border: 1px solid #eef0f4;
    border-radius: .85rem;
    padding: 1rem 1.1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .06);
    position: relative;
    overflow: hidden;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
    cursor: pointer;
}
.drc-metric-card::before {
    content: "";
    position: absolute;
    left: 0; top: 14%; bottom: 14%;
    width: 4px;
    border-radius: 0 4px 4px 0;
    background: var(--drc-accent, #4361ee);
}
.drc-metric-card:hover { transform: translateY(-1px); box-shadow: 0 6px 12px rgba(16, 24, 40, .08); }
.drc-metric-card.is-active { border-color: #4361ee; box-shadow: 0 0 0 2px rgba(67, 97, 238, .12); }
.drc-metric-card .drc-metric-label {
    font-size: .72rem;
    color: #667085;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.drc-metric-card .drc-metric-value {
    font-size: 1.6rem;
    font-weight: 700;
    color: #101828;
    margin: .15rem 0 0;
    line-height: 1.1;
}
.drc-metric-card .drc-metric-icon {
    color: #98a2b3;
    font-size: 1.15rem;
    margin-left: 1rem;
}

/* Accent variants */
.drc-metric-card.drc-blue   { --drc-accent: #4361ee; }
.drc-metric-card.drc-cyan   { --drc-accent: #06b6d4; }
.drc-metric-card.drc-green  { --drc-accent: #16a34a; }
.drc-metric-card.drc-orange { --drc-accent: #f59e0b; }
.drc-metric-card.drc-red    { --drc-accent: #ef4444; }
.drc-metric-card.drc-violet { --drc-accent: #8b5cf6; }
.drc-metric-card.drc-pink   { --drc-accent: #ec4899; }
.drc-metric-card.drc-grey   { --drc-accent: #94a3b8; }

/* Multi-date filter trigger button — use the same theme tokens as every other
 * filter control (search input, form-select, filter-pill) so the border /
 * height / colour all match across the whole filter bar. */
.drc-date-trigger {
    background: var(--surface-1, #fff);
    border: 1px solid var(--border-default, #e2e8f0);
    border-radius: var(--r-md, .5rem);
    padding: 0 12px;
    height: var(--input-height, 34px);
    font-size: var(--input-font-size, 13px);
    color: var(--text-primary, #1e293b);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: border-color var(--dur-fast), background var(--dur-fast);
}
.drc-date-trigger i { color: var(--text-muted, #64748b); }
.drc-date-trigger:hover { border-color: var(--border-medium, #cbd5e1); background: var(--surface-hover, #f8fafc); }
.drc-date-trigger:focus-visible { outline: none; border-color: var(--brand, #2563eb); box-shadow: 0 0 0 3px rgba(37,99,235,.12); }
.drc-date-trigger .drc-date-pill {
    background: var(--surface-2, #f1f5f9);
    border-radius: 99px;
    padding: 1px 9px;
    font-size: 11px;
    color: var(--text-muted, #475467);
}

/* Multi-date filter popover */
.drc-date-popover {
    width: 360px;
    padding: 1rem;
    border: 1px solid #eaecf0;
    border-radius: .85rem;
    box-shadow: 0 12px 24px rgba(16, 24, 40, .12);
}
.drc-date-popover .drc-quick {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .35rem .9rem;
    margin-bottom: .85rem;
}
.drc-date-popover .drc-quick a {
    color: #344054;
    font-size: .85rem;
    text-decoration: none;
    padding: .25rem .15rem;
    border-radius: .35rem;
    cursor: pointer;
}
.drc-date-popover .drc-quick a:hover { background: #f2f4f7; }
.drc-date-popover .drc-quick a.is-active { color: #4361ee; font-weight: 600; }
.drc-date-popover hr { margin: .25rem 0 .85rem; opacity: .5; }
.drc-date-popover .drc-range-row { display: grid; grid-template-columns: 1fr 1fr; gap: .65rem; margin-bottom: .85rem; }
.drc-date-popover .drc-range-row .form-label { font-size: .7rem; font-weight: 600; color: #667085; letter-spacing: .04em; }
.drc-date-popover .drc-range-row input { font-size: .85rem; }
.drc-date-popover .drc-foot { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.drc-date-popover .drc-foot a {
    font-size: .82rem; font-weight: 500; text-decoration: none; color: #475467;
    background: #fff; border: 1px solid #d0d5dd; border-radius: .4rem;
    padding: .35rem .85rem; cursor: pointer;
    transition: background .12s, border-color .12s, color .12s;
}
.drc-date-popover .drc-foot a:hover { background: #f9fafb; border-color: #98a2b3; color: #1d2939; }

/* Filter row tweak */
.drc-filter-row { gap: .65rem; }
.drc-filter-row .form-select, .drc-filter-row .form-control { min-height: 38px; }

/* Advanced filters accordion */
.drc-accordion .accordion-button {
    background: #fff;
    color: #344054;
    font-weight: 600;
    font-size: .9rem;
    padding: .55rem .9rem;
    box-shadow: none !important;
}
.drc-accordion .accordion-button:not(.collapsed) { background: #f9fafb; color: #4361ee; }
.drc-accordion .accordion-item { border: 1px solid #eaecf0; border-radius: .65rem; }
.drc-accordion .accordion-body { padding: 1rem; background: #fcfcfd; }