/* ==========================================================================
   MasTec Executive KPI Dashboard — UI theme (light mode)
   Presentation layer only. No data, routing or business logic lives here.
   ========================================================================== */

:root{
    --brand:#1d4ed8;
    --brand-600:#2563eb;
    --brand-500:#3b82f6;
    --brand-soft:rgba(37,99,235,.10);
    --success:#0f9d58;
    --success-soft:rgba(15,157,88,.12);
    --warning:#d97706;
    --warning-soft:rgba(217,119,6,.13);
    --danger:#dc2626;
    --danger-soft:rgba(220,38,38,.12);
    --info:#0891b2;
    --info-soft:rgba(8,145,178,.12);

    --ink:#0f172a;
    --ink-2:#334155;
    --muted:#64748b;
    --line:#e6eaf2;
    --surface:#ffffff;
    --canvas:#f5f7fb;

    --radius-sm:12px;
    --radius:16px;
    --radius-lg:22px;

    --shadow-xs:0 1px 2px rgba(15,23,42,.05);
    --shadow-sm:0 4px 14px rgba(15,23,42,.06);
    --shadow:0 10px 30px rgba(15,23,42,.08);
    --shadow-lg:0 22px 50px rgba(15,23,42,.14);

    --sidebar-w:260px;
    --topbar-h:72px;
}

*{ scrollbar-color:#cbd5e1 transparent; }

html{ scroll-behavior:smooth; }

body{
    background:
        radial-gradient(1100px 520px at 12% -12%, rgba(59,130,246,.10), transparent 60%),
        radial-gradient(900px 480px at 100% 0%, rgba(15,157,88,.08), transparent 55%),
        var(--canvas);
    background-attachment:fixed;
    color:var(--ink);
    font-family:"Inter","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
    font-size:.95rem;
    -webkit-font-smoothing:antialiased;
}

::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-thumb{ background:#cbd5e1; border-radius:999px; border:3px solid transparent; background-clip:content-box; }
::-webkit-scrollbar-thumb:hover{ background:#94a3b8; background-clip:content-box; }

h1,h2,h3,h4,h5,h6{ color:var(--ink); letter-spacing:-.015em; }

a{ text-decoration:none; }

/* ==========================================================================
   App shell
   ========================================================================== */
.app-shell{ min-height:100vh; }

.app-sidebar{
    width:var(--sidebar-w);
    position:fixed;
    inset:0 auto 0 0;
    z-index:1045;
    display:flex;
    flex-direction:column;
    background:linear-gradient(180deg,#0b1220 0%,#111c34 55%,#0b1220 100%);
    border-right:1px solid rgba(255,255,255,.06);
    overflow-y:auto;
    transition:transform .28s cubic-bezier(.4,0,.2,1);
}

.app-sidebar__brand{
    display:flex;
    align-items:center;
    gap:.75rem;
    padding:1.1rem 1.15rem;
    border-bottom:1px solid rgba(255,255,255,.08);
}

.app-sidebar__logo{
    flex:1;
    height:52px;
    background-color:#fff;
    background-size:contain;
    background-position:center;
    background-repeat:no-repeat;
    border-radius:12px;
    padding:.35rem .6rem;
    box-shadow:0 6px 18px rgba(0,0,0,.25);
}

.app-sidebar__section{
    padding:1.15rem 1.15rem .4rem;
    font-size:.68rem;
    font-weight:700;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:rgba(226,232,240,.45);
}

.app-nav{ display:flex; flex-direction:column; gap:.2rem; padding:0 .7rem 1.2rem; }

.app-nav__link{
    position:relative;
    display:flex;
    align-items:center;
    gap:.7rem;
    padding:.68rem .8rem;
    border-radius:12px;
    color:rgba(226,232,240,.78);
    font-weight:500;
    font-size:.9rem;
    transition:background .18s ease, color .18s ease, transform .18s ease;
}

.app-nav__link .app-nav__icon{ font-size:1rem; width:1.35rem; text-align:center; }

.app-nav__link:hover{ background:rgba(255,255,255,.07); color:#fff; transform:translateX(2px); }

.app-nav__link.is-active{
    background:linear-gradient(90deg, rgba(59,130,246,.30), rgba(59,130,246,.08));
    color:#fff;
    box-shadow:inset 0 0 0 1px rgba(147,197,253,.22);
}

.app-nav__link.is-active::before{
    content:"";
    position:absolute;
    left:-.7rem;
    top:.55rem;
    bottom:.55rem;
    width:3px;
    border-radius:0 4px 4px 0;
    background:#60a5fa;
}

.app-nav__link.is-soon{
    color:rgba(226,232,240,.38);
    cursor:not-allowed;
    pointer-events:none;
    justify-content:space-between;
}

.app-nav__badge{
    font-size:.6rem;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
    padding:.2rem .45rem;
    border-radius:999px;
    background:rgba(255,255,255,.08);
    color:rgba(226,232,240,.6);
}

.app-sidebar__footer{
    margin-top:auto;
    padding:1rem 1.15rem 1.3rem;
    border-top:1px solid rgba(255,255,255,.07);
    color:rgba(226,232,240,.45);
    font-size:.72rem;
    line-height:1.5;
}

.app-main{
    margin-left:var(--sidebar-w);
    min-height:100vh;
    display:flex;
    flex-direction:column;
}

.sidebar-backdrop{
    position:fixed;
    inset:0;
    background:rgba(15,23,42,.45);
    backdrop-filter:blur(2px);
    z-index:1040;
    opacity:0;
    visibility:hidden;
    transition:opacity .25s ease, visibility .25s ease;
}

body.sidebar-open .sidebar-backdrop{ opacity:1; visibility:visible; }

/* ==========================================================================
   Topbar
   ========================================================================== */
.app-topbar{
    position:sticky;
    top:0;
    z-index:1030;
    min-height:var(--topbar-h);
    display:flex;
    align-items:center;
    gap:1rem;
    padding:.85rem 1.6rem;
    background:rgba(255,255,255,.88);
    backdrop-filter:saturate(180%) blur(12px);
    border-bottom:1px solid var(--line);
    transition:box-shadow .2s ease;
}

.app-topbar.is-stuck{ box-shadow:var(--shadow-sm); }

.app-topbar__title{ font-size:1.12rem; font-weight:700; margin:0; line-height:1.25; }
.app-topbar__subtitle{ font-size:.78rem; color:var(--muted); margin:0; }

.sidebar-toggle{
    display:none;
    border:1px solid var(--line);
    background:#fff;
    border-radius:10px;
    width:40px;
    height:40px;
    align-items:center;
    justify-content:center;
    color:var(--ink-2);
}

.sidebar-toggle span{ display:block; width:18px; height:2px; background:currentColor; border-radius:2px; position:relative; }
.sidebar-toggle span::before,
.sidebar-toggle span::after{ content:""; position:absolute; left:0; width:18px; height:2px; background:currentColor; border-radius:2px; }
.sidebar-toggle span::before{ top:-6px; }
.sidebar-toggle span::after{ top:6px; }

.pill-status{
    display:inline-flex;
    align-items:center;
    gap:.45rem;
    padding:.4rem .8rem;
    border-radius:999px;
    background:var(--success-soft);
    color:#0b7a45;
    font-size:.78rem;
    font-weight:600;
    white-space:nowrap;
}

.pill-status .dot{
    width:8px; height:8px; border-radius:50%;
    background:#12b76a;
    box-shadow:0 0 0 0 rgba(18,183,106,.55);
    animation:pulse-dot 2.2s infinite;
}

@keyframes pulse-dot{
    0%{ box-shadow:0 0 0 0 rgba(18,183,106,.5); }
    70%{ box-shadow:0 0 0 7px rgba(18,183,106,0); }
    100%{ box-shadow:0 0 0 0 rgba(18,183,106,0); }
}

.user-chip{
    display:flex;
    align-items:center;
    gap:.6rem;
    padding:.32rem .7rem .32rem .35rem;
    border:1px solid var(--line);
    border-radius:999px;
    background:#fff;
}

.user-chip__avatar{
    width:32px; height:32px;
    border-radius:50%;
    display:grid;
    place-items:center;
    background:linear-gradient(135deg,var(--brand-600),#22d3ee);
    color:#fff;
    font-weight:700;
    font-size:.78rem;
}

.user-chip__name{ font-size:.82rem; font-weight:600; line-height:1.1; }
.user-chip__role{ font-size:.68rem; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; }

.app-content{ padding:1.6rem; flex:1; }

.page-head{ margin-bottom:1.25rem; }
.page-head h2{ font-size:1.45rem; font-weight:750; margin:0 0 .2rem; }
.page-head p{ color:var(--muted); margin:0; font-size:.88rem; }

.eyebrow-label{
    display:inline-flex;
    align-items:center;
    gap:.4rem;
    padding:.3rem .7rem;
    border-radius:999px;
    background:var(--brand-soft);
    color:var(--brand);
    font-size:.68rem;
    font-weight:700;
    letter-spacing:.1em;
    text-transform:uppercase;
    margin-bottom:.6rem;
}

/* ==========================================================================
   Cards
   ========================================================================== */
.card{
    border:1px solid var(--line);
    border-radius:var(--radius);
    background:var(--surface);
    box-shadow:var(--shadow-xs);
}

.card.shadow,
.card.shadow-sm{ box-shadow:var(--shadow-sm) !important; }

.card-header{
    background:#fff;
    border-bottom:1px solid var(--line);
    padding:.95rem 1.15rem;
    border-radius:var(--radius) var(--radius) 0 0 !important;
}

.card-header h5,
.card-header h6{ font-size:.98rem; font-weight:650; margin:0; }

.panel-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1rem;
    flex-wrap:wrap;
}

.panel-header__title{
    display:flex;
    align-items:center;
    gap:.6rem;
}

.panel-icon{
    width:34px; height:34px;
    border-radius:10px;
    display:grid;
    place-items:center;
    background:var(--brand-soft);
    color:var(--brand);
    font-size:.95rem;
    flex:none;
}

.panel-icon.is-success{ background:var(--success-soft); color:var(--success); }
.panel-icon.is-warning{ background:var(--warning-soft); color:var(--warning); }
.panel-icon.is-info{ background:var(--info-soft); color:var(--info); }

.section-title{
    display:flex;
    align-items:center;
    gap:.6rem;
    font-size:1.02rem;
    font-weight:700;
    margin:0 0 .9rem;
}

.section-title::after{
    content:"";
    flex:1;
    height:1px;
    background:linear-gradient(90deg,var(--line),transparent);
}

/* ==========================================================================
   KPI cards
   ========================================================================== */
.kpi-card{
    position:relative;
    border:1px solid var(--line);
    border-radius:var(--radius-lg);
    background:var(--surface);
    box-shadow:var(--shadow-xs);
    overflow:hidden;
    height:100%;
    transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.kpi-card::before{
    content:"";
    position:absolute;
    inset:0 0 auto 0;
    height:3px;
    background:linear-gradient(90deg,var(--brand-500),var(--brand-600));
    opacity:.9;
}

.kpi-card.kpi--success::before{ background:linear-gradient(90deg,#34d399,var(--success)); }
.kpi-card.kpi--danger::before{ background:linear-gradient(90deg,#fb7185,var(--danger)); }
.kpi-card.kpi--warning::before{ background:linear-gradient(90deg,#fbbf24,var(--warning)); }
.kpi-card.kpi--info::before{ background:linear-gradient(90deg,#22d3ee,var(--info)); }
.kpi-card.kpi--muted::before{ background:linear-gradient(90deg,#cbd5e1,#94a3b8); }

.kpi-card:hover{
    transform:translateY(-3px);
    box-shadow:var(--shadow);
    border-color:rgba(37,99,235,.25);
}

.kpi-card .card-body{ padding:1.15rem 1.2rem; }

.kpi-card__label{
    font-size:.7rem;
    font-weight:700;
    letter-spacing:.1em;
    text-transform:uppercase;
    color:var(--muted);
    margin:0 0 .45rem;
}

.kpi-card__value{
    font-size:2rem;
    font-weight:750;
    line-height:1.05;
    margin:0;
    letter-spacing:-.02em;
    font-variant-numeric:tabular-nums;
}

.kpi-card__hint{
    margin:.4rem 0 0;
    font-size:.76rem;
    color:var(--muted);
    line-height:1.4;
}

.kpi-card__icon{
    width:42px; height:42px;
    border-radius:13px;
    display:grid;
    place-items:center;
    font-size:1.1rem;
    background:var(--brand-soft);
    color:var(--brand);
    flex:none;
}

.kpi-card__icon.is-success{ background:var(--success-soft); color:var(--success); }
.kpi-card__icon.is-danger{ background:var(--danger-soft); color:var(--danger); }
.kpi-card__icon.is-warning{ background:var(--warning-soft); color:var(--warning); }
.kpi-card__icon.is-info{ background:var(--info-soft); color:var(--info); }
.kpi-card__icon.is-muted{ background:rgba(100,116,139,.12); color:var(--muted); }

.kpi-tag{
    display:inline-flex;
    align-items:center;
    gap:.3rem;
    padding:.26rem .6rem;
    border-radius:999px;
    font-size:.7rem;
    font-weight:700;
    background:rgba(100,116,139,.1);
    color:var(--ink-2);
    white-space:nowrap;
}

.kpi-tag.is-primary{ background:var(--brand-soft); color:var(--brand); }
.kpi-tag.is-success{ background:var(--success-soft); color:var(--success); }
.kpi-tag.is-danger{ background:var(--danger-soft); color:var(--danger); }
.kpi-tag.is-warning{ background:var(--warning-soft); color:var(--warning); }

.kpi-card__spark{
    height:4px;
    border-radius:999px;
    background:rgba(15,23,42,.07);
    overflow:hidden;
    margin-top:.9rem;
}

.kpi-card__spark > i{
    display:block;
    height:100%;
    border-radius:999px;
    background:linear-gradient(90deg,var(--brand-500),var(--brand-600));
    width:0;
    transition:width .9s cubic-bezier(.22,1,.36,1);
}

.kpi-card.kpi--success .kpi-card__spark > i{ background:linear-gradient(90deg,#34d399,var(--success)); }
.kpi-card.kpi--danger .kpi-card__spark > i{ background:linear-gradient(90deg,#fb7185,var(--danger)); }
.kpi-card.kpi--warning .kpi-card__spark > i{ background:linear-gradient(90deg,#fbbf24,var(--warning)); }
.kpi-card.kpi--info .kpi-card__spark > i{ background:linear-gradient(90deg,#22d3ee,var(--info)); }

/* Compact KPI tile (engineer page) */
.kpi-tile{
    height:100%;
    border:1px solid var(--line);
    border-radius:var(--radius);
    background:var(--surface);
    padding:.95rem 1rem;
    box-shadow:var(--shadow-xs);
    transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.kpi-tile:hover{ transform:translateY(-2px); box-shadow:var(--shadow-sm); border-color:rgba(37,99,235,.22); }

.kpi-tile__label{
    font-size:.66rem;
    font-weight:700;
    letter-spacing:.09em;
    text-transform:uppercase;
    color:var(--muted);
    margin:0 0 .35rem;
    display:flex;
    align-items:center;
    gap:.35rem;
}

.kpi-tile__value{
    font-size:1.55rem;
    font-weight:750;
    margin:0;
    line-height:1.1;
    font-variant-numeric:tabular-nums;
}

/* ==========================================================================
   Filters
   ========================================================================== */
.filter-card{
    border:1px solid var(--line);
    border-radius:var(--radius);
    background:linear-gradient(180deg,#ffffff,#fbfcff);
    box-shadow:var(--shadow-xs);
}

.filter-panel{
    min-width:min(100%,560px);
    border-radius:var(--radius);
    background:rgba(255,255,255,.85);
    backdrop-filter:blur(8px);
}

.form-label{
    font-size:.72rem;
    font-weight:700;
    letter-spacing:.07em;
    text-transform:uppercase;
    color:var(--muted);
    margin-bottom:.35rem;
}

.form-select,
.form-control{
    border-radius:11px;
    border:1px solid var(--line);
    padding:.55rem .8rem;
    font-size:.88rem;
    color:var(--ink);
    background-color:#fff;
    transition:border-color .16s ease, box-shadow .16s ease;
}

.form-select:focus,
.form-control:focus{
    border-color:var(--brand-500);
    box-shadow:0 0 0 4px rgba(59,130,246,.14);
}

.btn{ border-radius:11px; font-weight:600; font-size:.88rem; transition:transform .15s ease, box-shadow .15s ease, background .15s ease; }
.btn:active{ transform:translateY(1px); }

.btn-primary{
    background:linear-gradient(135deg,var(--brand-600),var(--brand));
    border:none;
    box-shadow:0 8px 18px rgba(37,99,235,.24);
}

.btn-primary:hover,
.btn-primary:focus{
    background:linear-gradient(135deg,#1d4ed8,#1e40af);
    box-shadow:0 10px 24px rgba(37,99,235,.32);
}

.btn-outline-secondary{ border-color:var(--line); color:var(--ink-2); background:#fff; }
.btn-outline-secondary:hover{ background:#f1f5f9; color:var(--ink); border-color:#cbd5e1; }

.filter-chips{ display:flex; flex-wrap:wrap; gap:.4rem; align-items:center; }

.filter-chip{
    display:inline-flex;
    align-items:center;
    gap:.35rem;
    padding:.28rem .65rem;
    border-radius:999px;
    background:var(--brand-soft);
    color:var(--brand);
    font-size:.72rem;
    font-weight:600;
}

.filter-chip b{ font-weight:700; }
.filter-chip--empty{ background:rgba(100,116,139,.1); color:var(--muted); }

/* ==========================================================================
   Tables
   ========================================================================== */
.table-toolbar{
    display:flex;
    align-items:center;
    gap:.6rem;
    flex-wrap:wrap;
}

.table-search{
    position:relative;
    min-width:210px;
}

.table-search input{
    padding-left:2.1rem;
    font-size:.84rem;
    border-radius:999px;
}

.table-search::before{
    content:"\1F50D";
    position:absolute;
    left:.75rem;
    top:50%;
    transform:translateY(-50%);
    font-size:.8rem;
    opacity:.55;
    pointer-events:none;
}

.table-wrap{ max-height:560px; overflow:auto; border-radius:0 0 var(--radius) var(--radius); }

.table{ margin:0; color:var(--ink-2); font-size:.86rem; }

.table > thead th{
    position:sticky;
    top:0;
    z-index:2;
    background:#f8fafc;
    color:var(--ink);
    font-size:.7rem;
    font-weight:700;
    letter-spacing:.07em;
    text-transform:uppercase;
    padding:.75rem .9rem;
    border-bottom:1px solid var(--line);
    white-space:nowrap;
}

.table-kpi-header th{
    background:#0f2a4a;
    color:#fff;
    border-color:rgba(255,255,255,.12);
}

.table > tbody > tr > td{
    padding:.7rem .9rem;
    border-bottom:1px solid #f1f5f9;
    vertical-align:middle;
    font-variant-numeric:tabular-nums;
}

.table > tbody > tr:last-child > td{ border-bottom:none; }

.table-striped > tbody > tr:nth-of-type(odd) > td{ background:rgba(248,250,252,.7); }

.table-hover > tbody > tr{ transition:background .15s ease; }
.table-hover > tbody > tr:hover > td{ background:rgba(37,99,235,.06); }

.table tbody tr.is-hidden{ display:none; }

.table th.sortable{ cursor:pointer; user-select:none; }
.table th.sortable::after{ content:"\2195"; margin-left:.35rem; opacity:.35; font-size:.75rem; }
.table th.sortable.sort-asc::after{ content:"\2191"; opacity:.9; }
.table th.sortable.sort-desc::after{ content:"\2193"; opacity:.9; }

.cell-strong{ font-weight:650; color:var(--ink); }

.table-empty-row td{
    text-align:center;
    color:var(--muted);
    padding:1.6rem .9rem !important;
    font-size:.85rem;
}

.table-market-tag{
    display:inline-flex;
    align-items:center;
    padding:.26rem .6rem;
    border-radius:999px;
    background:var(--brand-soft);
    color:var(--brand);
    font-weight:700;
    font-size:.75rem;
}

/* Status indicators */
.status-circle{
    display:inline-flex;
    align-items:center;
    gap:.4rem;
    padding:.22rem .6rem;
    border-radius:999px;
    font-weight:650;
    font-size:.78rem;
    background:rgba(100,116,139,.09);
    color:var(--ink-2);
}

.status-circle__dot{
    width:8px; height:8px;
    border-radius:50%;
    background:currentColor;
    flex:none;
}

.status-circle.green{ background:var(--success-soft); color:#0b7a45; }
.status-circle.green .status-circle__dot{ background:#12b76a; }
.status-circle.orange{ background:var(--warning-soft); color:#a65c00; }
.status-circle.orange .status-circle__dot{ background:#f59e0b; }
.status-circle.red{ background:var(--danger-soft); color:#b42318; }
.status-circle.red .status-circle__dot{ background:#ef4444; }

/* ==========================================================================
   Charts
   ========================================================================== */
.chart-card{
    height:100%;
    border:1px solid var(--line);
    border-radius:var(--radius);
    background:var(--surface);
    box-shadow:var(--shadow-xs);
    transition:box-shadow .22s ease, transform .22s ease;
    overflow:hidden;
}

.chart-card:hover{ box-shadow:var(--shadow); transform:translateY(-2px); }

.chart-card .card-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:.75rem;
    background:linear-gradient(180deg,#ffffff,#fafbff);
}

.chart-card__meta{
    font-size:.68rem;
    letter-spacing:.08em;
    text-transform:uppercase;
    font-weight:700;
    color:var(--muted);
    background:rgba(100,116,139,.09);
    padding:.22rem .55rem;
    border-radius:999px;
    white-space:nowrap;
}

.chart-card .card-body{ padding:1rem 1.1rem 1.15rem; }

.chart-canvas-wrap{ position:relative; height:290px; }
.chart-canvas-wrap canvas{ max-height:100%; }

.chart-group{
    border:1px solid var(--line);
    border-radius:var(--radius-lg);
    background:linear-gradient(180deg,#ffffff,#fafbfd);
    box-shadow:var(--shadow-xs);
}

.chart-group > .card-header{
    border-radius:var(--radius-lg) var(--radius-lg) 0 0 !important;
    background:linear-gradient(120deg,rgba(37,99,235,.07),rgba(34,211,238,.05));
    border-bottom:1px solid var(--line);
}

/* ==========================================================================
   Engineer page extras
   ========================================================================== */
.engineer-page{ color:var(--ink); }

.roster-card{
    height:100%;
    border:1px solid var(--line);
    border-radius:var(--radius);
    background:linear-gradient(180deg,#ffffff,#f9fbff);
    padding:.95rem 1rem;
    transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.roster-card:hover{ transform:translateY(-2px); box-shadow:var(--shadow-sm); border-color:rgba(37,99,235,.25); }

.roster-card__names{
    font-size:.8rem;
    color:var(--muted);
    line-height:1.55;
    max-height:5.2rem;
    overflow:auto;
}

.badge{ font-weight:650; border-radius:999px; padding:.34rem .6rem; font-size:.72rem; }
.badge.text-bg-primary{ background:var(--brand) !important; }
.badge.text-bg-dark{ background:#0f172a !important; }

.mini-stat{
    border-radius:var(--radius);
    padding:.85rem 1rem;
    background:rgba(15,23,42,.035);
    border:1px solid var(--line);
    height:100%;
}

.mini-stat span{
    display:block;
    font-size:.68rem;
    text-transform:uppercase;
    letter-spacing:.07em;
    color:var(--muted);
    margin-bottom:.2rem;
}

.mini-stat strong{ font-size:1.3rem; line-height:1; }

.metric-chip{
    border-radius:var(--radius-sm);
    padding:.7rem .8rem;
    background:rgba(15,23,42,.035);
    border:1px solid var(--line);
    height:100%;
}

.metric-chip span{
    display:block;
    font-size:.66rem;
    color:var(--muted);
    text-transform:uppercase;
    letter-spacing:.06em;
    margin-bottom:.15rem;
}

.metric-chip strong{ font-size:1.05rem; }

.score-pill{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:82px;
    padding:.4rem .7rem;
    border-radius:999px;
    color:#fff;
    font-weight:700;
}

.score-pill-high{ background:linear-gradient(135deg,#0f9d58,#34d399); }
.score-pill-medium{ background:linear-gradient(135deg,var(--brand-600),#60a5fa); }
.score-pill-low{ background:linear-gradient(135deg,#dc2626,#fb7185); }

.score-progress{ height:8px; background:rgba(15,23,42,.08); border-radius:999px; overflow:hidden; }
.score-progress .progress-bar{ border-radius:999px; background:linear-gradient(90deg,var(--brand-600),#22d3ee); }

.dashboard-highlight{
    background:linear-gradient(120deg,rgba(37,99,235,.08),rgba(34,211,238,.05));
    border:1px solid rgba(37,99,235,.14);
    border-radius:var(--radius);
}

.alert{ border-radius:var(--radius-sm); border:1px solid var(--line); font-size:.88rem; }
.alert-secondary{ background:#f8fafc; color:var(--ink-2); }

/* ==========================================================================
   Entrance animation
   ========================================================================== */
.reveal{ opacity:0; transform:translateY(12px); }
.reveal.is-visible{ opacity:1; transform:none; transition:opacity .5s ease, transform .5s cubic-bezier(.22,1,.36,1); }

@media (prefers-reduced-motion: reduce){
    .reveal,
    .reveal.is-visible{ opacity:1; transform:none; transition:none; }
    .kpi-card:hover,
    .chart-card:hover,
    .kpi-tile:hover,
    .roster-card:hover{ transform:none; }
    .pill-status .dot{ animation:none; }
}

/* ==========================================================================
   Back to top
   ========================================================================== */
.back-to-top{
    position:fixed;
    right:1.2rem;
    bottom:1.2rem;
    width:42px;
    height:42px;
    border-radius:50%;
    border:1px solid var(--line);
    background:#fff;
    color:var(--brand);
    box-shadow:var(--shadow);
    display:grid;
    place-items:center;
    opacity:0;
    visibility:hidden;
    transform:translateY(8px);
    transition:all .25s ease;
    z-index:1035;
}

.back-to-top.is-visible{ opacity:1; visibility:visible; transform:none; }
.back-to-top:hover{ background:var(--brand); color:#fff; }

/* ==========================================================================
   Login & error pages
   ========================================================================== */
.login-page{
    min-height:100vh;
    background:
        radial-gradient(900px 500px at 10% 0%, rgba(59,130,246,.35), transparent 60%),
        radial-gradient(800px 500px at 100% 100%, rgba(16,185,129,.25), transparent 55%),
        linear-gradient(135deg,#0b1220 0%,#111c34 55%,#0f172a 100%);
}

.login-wrapper{
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:1.5rem;
}

.login-card{
    width:100%;
    max-width:27rem;
    border-radius:var(--radius-lg);
    border:1px solid rgba(255,255,255,.6);
    box-shadow:var(--shadow-lg);
    background:rgba(255,255,255,.97);
    backdrop-filter:blur(8px);
}

.login-logo{ max-height:52px; max-width:100%; object-fit:contain; }

.login-badge{
    display:inline-flex;
    align-items:center;
    gap:.4rem;
    padding:.28rem .7rem;
    border-radius:999px;
    background:var(--brand-soft);
    color:var(--brand);
    font-size:.68rem;
    font-weight:700;
    letter-spacing:.1em;
    text-transform:uppercase;
}

.password-field{ position:relative; }

.password-toggle{
    position:absolute;
    right:.5rem;
    top:50%;
    transform:translateY(-50%);
    border:none;
    background:transparent;
    color:var(--muted);
    font-size:.95rem;
    padding:.25rem .4rem;
    border-radius:8px;
    line-height:1;
}

.password-toggle:hover{ color:var(--ink); background:#f1f5f9; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1199.98px){
    .chart-canvas-wrap{ height:270px; }
}

@media (max-width: 991.98px){
    .app-sidebar{ transform:translateX(-100%); box-shadow:var(--shadow-lg); }
    body.sidebar-open .app-sidebar{ transform:translateX(0); }
    .app-main{ margin-left:0; }
    .sidebar-toggle{ display:flex; }
    .app-content{ padding:1.1rem; }
    .app-topbar{ padding:.7rem 1rem; }
    .app-topbar__title{ font-size:1rem; }
}

@media (max-width: 575.98px){
    .kpi-card__value{ font-size:1.7rem; }
    .chart-canvas-wrap{ height:240px; }
    .user-chip__meta{ display:none; }
}

@media print{
    .app-sidebar,.app-topbar,.back-to-top,.table-toolbar,.filter-card{ display:none !important; }
    .app-main{ margin-left:0; }
    .card,.chart-card{ box-shadow:none; break-inside:avoid; }
}


/* ---- Engineer KPI tile grid (7-up, no orphan row) ---- */
.kpi-tile-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}
@media (min-width: 768px) {
    .kpi-tile-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1200px) {
    .kpi-tile-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .85rem; }
}
.kpi-tile-col { min-width: 0; display: flex; }
.kpi-tile-col > .kpi-tile { width: 100%; }