/* Shared shell for the operational dashboards (Network, B2B, Channel, TMS).
   Global rather than isolated because the same grid, header and loading
   placeholders are used by several pages, and because the numeric alignment
   rules below have to reach elements that live inside isolated components.

   No font-family is declared anywhere in this file. Every figure inherits the
   application typeface (Montserrat); the tabular-nums rule below is what makes
   columns of numbers line up, which is the job a monospace face would
   otherwise have done. */

.dash-page {
    --dash-surface: #fff;
    --dash-border: #e6e9f0;
    --dash-border-faint: #eef1f6;
    --dash-text: #1f2733;
    --dash-text-dim: #6b7280;
    --dash-bg-soft: #f8fafd;
    /* Shared with the dashboard components, which read the --tms-* names. */
    --tms-surface: #fff;
    --tms-border: #e6e9f0;
    --tms-border-faint: #eef1f6;
    --tms-text-strong: #1f2733;
    --tms-text-dim: #6b7280;
    --tms-blue: #1565c0;
    --tms-purple: #4527a0;
    --tms-green: #2e7d32;
    --tms-amber: #ef6c00;
    --tms-red: #c62828;
    --tms-teal: #00695c;
    --tms-slate: #546e7a;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 4px 0 32px;
    color: var(--dash-text);
    min-width: 0;
}

/* Digits share one advance width, so stacked figures align on their columns
   instead of drifting. This is what gives the number-heavy panels their
   tabular feel without pulling in a second typeface.

   Applied to the TMS page as well, so all four dashboards set their numbers
   identically. */
.dash-page .tms-count,
.dash-page .stat-value,
.dash-page .row-value,
.dash-page .row-secondary,
.dash-page .stage-count,
.dash-page .dash-figure,
.tms-page .tms-count,
.tms-page .stat-value,
.tms-page .row-value,
.tms-page .row-secondary,
.tms-page .stage-count,
.tms-page .donut-center-value {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

/* ---------- page header ---------- */

.dash-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}

.dash-head-titles {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.dash-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    align-self: flex-start;
    padding: 4px 11px;
    border-radius: 999px;
    background: linear-gradient(135deg, #4527a0, #1565c0);
    color: #fff;
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.dash-title {
    margin: 0;
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.15;
    color: var(--dash-text);
}

.dash-sub {
    font-size: .8125rem;
    color: var(--dash-text-dim);
}

.dash-head-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.dash-stamp {
    font-size: .75rem;
    color: var(--dash-text-dim);
    font-variant-numeric: tabular-nums;
}

/* ---------- grids ---------- */

.dash-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 232px), 1fr));
    gap: 12px;
}

.dash-grid-2 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
    gap: 14px;
    align-items: start;
}

.dash-grid-3 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
    gap: 14px;
    align-items: start;
}

.dash-stage-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 132px), 1fr));
    gap: 14px 0;
}

.dash-rows {
    display: flex;
    flex-direction: column;
}

/* ---------- shortcuts ---------- */

.dash-quick {
    display: flex;
    align-items: center;
    gap: 8px 16px;
    flex-wrap: wrap;
}

.dash-quick-label {
    font-size: .625rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--dash-text-dim);
}

.dash-quick a {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: .8125rem;
    font-weight: 600;
    color: #1565c0;
    text-decoration: none;
}

.dash-quick a:hover {
    text-decoration: underline;
}

/* ---------- map ---------- */

.dash-map {
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--dash-border-faint);
    min-height: 320px;
}

.dash-map-wrap {
    position: relative;
    height: 100%;
    width: 100%;
}

.dash-map-wrap #map {
    height: 100%;
    width: 100%;
}

/* Stock-health key. Sits above the tile pane (z-index 200) but below Leaflet
   popups (700), and never swallows a click meant for a marker. */
.dash-map-legend {
    position: absolute;
    left: 10px;
    bottom: 10px;
    z-index: 600;
    pointer-events: none;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 12px;
    padding: 6px 10px;
    border-radius: 8px;
    background: rgba(255, 255, 255, .92);
    border: 1px solid var(--dash-border);
    box-shadow: 0 2px 8px rgba(15, 20, 35, .1);
}

.dash-map-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: .6875rem;
    line-height: 1;
    color: var(--dash-text-dim);
}

.dash-map-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    box-shadow: 0 0 0 1.5px #fff;
}

.dash-map-legend-note {
    font-size: .625rem;
    line-height: 1;
    color: var(--dash-text-dim);
    opacity: .75;
}

@media (max-width: 599px) {
    .dash-map-legend-note {
        display: none;
    }
}

/* ---------- empty state ---------- */

.dash-empty {
    padding: 22px 12px;
    text-align: center;
    font-size: .8125rem;
    color: var(--dash-text-dim);
}

/* ---------- entrance ---------- */

.dash-stagger > * {
    animation: dash-rise .34s ease both;
}

.dash-stagger > *:nth-child(1) { animation-delay: .02s; }
.dash-stagger > *:nth-child(2) { animation-delay: .06s; }
.dash-stagger > *:nth-child(3) { animation-delay: .10s; }
.dash-stagger > *:nth-child(4) { animation-delay: .14s; }
.dash-stagger > *:nth-child(5) { animation-delay: .18s; }
.dash-stagger > *:nth-child(6) { animation-delay: .22s; }

@keyframes dash-rise {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}

/* ---------- loading placeholders ---------- */

/* The highlight is a clearly lighter tone than the base. An earlier version
   swept between two near-identical greys, so the shimmer ran but read as a
   static block. */
.dash-sk {
    position: relative;
    overflow: hidden;
    border-radius: 6px;
    background: linear-gradient(90deg, #e9edf4 0%, #f8fafd 50%, #e9edf4 100%);
    background-size: 200% 100%;
    animation: dash-shimmer 1.4s linear infinite;
}

@keyframes dash-shimmer {
    from { background-position: 200% 0; }
    to   { background-position: -200% 0; }
}

.dash-sk-line { height: 10px; }
.dash-sk-value { height: 26px; width: 62%; border-radius: 7px; }
.dash-sk-bar { height: 6px; border-radius: 3px; }
.dash-sk-tile { width: 44px; height: 44px; border-radius: 11px; flex: 0 0 auto; }
.dash-sk-chip { height: 18px; width: 74px; border-radius: 999px; }

.dash-sk-w25 { width: 25%; }
.dash-sk-w40 { width: 40%; }
.dash-sk-w55 { width: 55%; }
.dash-sk-w70 { width: 70%; }
.dash-sk-w85 { width: 85%; }

.dash-sk-card {
    background: var(--dash-surface);
    border: 1px solid var(--dash-border);
    border-radius: 12px;
    padding: 14px 16px 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

.dash-sk-card-top {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.dash-sk-card-lines {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1 1 auto;
    min-width: 0;
}

.dash-sk-panel {
    background: var(--dash-surface);
    border: 1px solid var(--dash-border);
    border-radius: 14px;
    overflow: hidden;
}

.dash-sk-panel-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--dash-border-faint);
    background: var(--dash-bg-soft);
}

.dash-sk-panel-body {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.dash-sk-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 84px 46px;
    align-items: center;
    gap: 12px;
}

@media (prefers-reduced-motion: reduce) {
    .dash-sk {
        animation: none;
    }

    .dash-stagger > * {
        animation: none;
    }
}