/* ===========================================================================
   PNT Auto Glass Dispatch — design system
   Brand tokens layered over Bootstrap 5 (overrides --bs-* so every component
   inherits the theme with no markup changes).
   =========================================================================== */
:root {
    /* Brand palette: steel navy + glass blue/cyan + status colors */
    --pnt-navy: #0F2742;
    --pnt-navy-700: #16365b;
    --pnt-blue: #1C6DD0;
    --pnt-blue-600: #1559ad;
    --pnt-cyan: #0E9CC4;
    --pnt-amber: #E8920C;
    --pnt-green: #1E9E6A;
    --pnt-red: #DC3848;

    --pnt-slate-50: #F6F8FB;
    --pnt-slate-100: #EDF1F6;
    --pnt-slate-200: #DCE3EC;
    --pnt-slate-300: #C3CEDC;
    --pnt-slate-500: #5C6B7E;
    --pnt-slate-700: #33414f;
    --pnt-slate-800: #1F2A37;

    --pnt-radius: .625rem;
    --pnt-shadow: 0 1px 2px rgba(16,39,66,.06), 0 2px 8px rgba(16,39,66,.07);
    --pnt-shadow-lg: 0 10px 30px rgba(16,39,66,.16);

    /* Map onto Bootstrap */
    --bs-primary: var(--pnt-blue);
    --bs-primary-rgb: 28,109,208;
    --bs-link-color: var(--pnt-blue);
    --bs-link-color-rgb: 28,109,208;
    --bs-link-hover-color: var(--pnt-navy);
    --bs-body-color: var(--pnt-slate-800);
    --bs-body-bg: var(--pnt-slate-50);
    --bs-border-color: var(--pnt-slate-200);
    --bs-border-radius: var(--pnt-radius);
    --bs-card-border-color: var(--pnt-slate-200);
    --bs-card-border-radius: var(--pnt-radius);
}

html, body {
    font-family: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
    font-feature-settings: "tnum" 1; /* tabular numerals align times/prices/counts */
    -webkit-text-size-adjust: 100%;
    background-color: var(--pnt-slate-50);
    color: var(--pnt-slate-800);
}

h1, h2, h3, h4, h5, h6 { color: var(--pnt-navy); }
h1:focus { outline: none; }

a, .btn-link { color: var(--pnt-blue); text-underline-offset: 2px; }
a:hover { color: var(--pnt-navy); }

/* ---- Buttons ---- */
.btn { border-radius: .5rem; font-weight: 500; }
.btn-primary { color: #fff; background-color: var(--pnt-blue); border-color: var(--pnt-blue-600); }
.btn-primary:hover, .btn-primary:focus { background-color: var(--pnt-blue-600); border-color: var(--pnt-blue-600); }
.btn-success { background-color: var(--pnt-green); border-color: var(--pnt-green); }
.btn-warning { background-color: var(--pnt-amber); border-color: var(--pnt-amber); color: #fff; }
.btn-warning:hover { color: #fff; }
.btn:focus, .btn:active:focus, .form-control:focus, .form-select:focus, .form-check-input:focus {
    box-shadow: 0 0 0 .2rem rgba(28,109,208,.28);
    border-color: var(--pnt-blue);
}
/* square icon button, ≥44px tap target */
.btn-icon { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; padding: 0; }

/* ---- Cards ---- */
.card { border-radius: var(--pnt-radius); box-shadow: var(--pnt-shadow); border-color: var(--pnt-slate-200); }
.card-title { color: var(--pnt-navy); }
.section-card > .card-header {
    background: #fff; border-bottom: 1px solid var(--pnt-slate-200);
    font-weight: 600; color: var(--pnt-navy); display: flex; align-items: center; gap: .5rem;
    border-radius: var(--pnt-radius) var(--pnt-radius) 0 0;
}
.section-card > .card-header .bi { color: var(--pnt-blue); }

/* ---- Forms ---- */
.form-label { font-size: .825rem; font-weight: 600; color: var(--pnt-slate-700); margin-bottom: .15rem; }
.form-control, .form-select { border-color: var(--pnt-slate-300); border-radius: .5rem; }
.content { padding-top: 1.1rem; }
.valid.modified:not([type=checkbox]) { outline: 1px solid var(--pnt-green); }
.invalid { outline: 1px solid var(--pnt-red); }
.validation-message { color: var(--pnt-red); font-size: .85rem; }

/* ---- Tables ---- */
.table { --bs-table-striped-bg: var(--pnt-slate-50); }
.table > thead { color: var(--pnt-slate-500); font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; }
.table > thead th { border-bottom: 1px solid var(--pnt-slate-200); font-weight: 600; }

/* Tables that collapse to cards on phones (add class="table table-cards") */
@media (max-width: 767.98px) {
    .table-cards thead { display: none; }
    .table-cards tbody, .table-cards tr, .table-cards td { display: block; width: 100%; }
    .table-cards tr {
        border: 1px solid var(--pnt-slate-200); border-radius: var(--pnt-radius);
        margin-bottom: .75rem; padding: .35rem .75rem; box-shadow: var(--pnt-shadow); background: #fff;
    }
    .table-cards td { display: flex; justify-content: space-between; gap: 1rem; border: 0; padding: .3rem 0; }
    .table-cards td::before { content: attr(data-label); font-weight: 600; color: var(--pnt-slate-500); }
    .table-cards td:last-child { justify-content: flex-end; }
}

/* ---- Status badges (brand colors, AA contrast) ---- */
.badge-status { font-weight: 600; padding: .35em .65em; border-radius: 999px; font-size: .75rem; display: inline-block; }
.st-unscheduled { background: var(--pnt-slate-100); color: var(--pnt-slate-700); }
.st-scheduled   { background: #E3F0FB; color: #0B4F8A; }
.st-inprogress  { background: #FCEFD6; color: #8A5300; }
.st-completed   { background: #DDF3E8; color: #0F6B47; }
.st-cancelled   { background: #FBE0E3; color: #A11B28; }

/* ---- Dashboard stat cards ---- */
.stat-card {
    display: flex; flex-direction: column; gap: .15rem; padding: 1.1rem 1.2rem;
    border: 1px solid var(--pnt-slate-200); border-left: 4px solid var(--pnt-slate-300);
    border-radius: var(--pnt-radius); background: #fff; box-shadow: var(--pnt-shadow);
    text-decoration: none; color: inherit; transition: box-shadow .15s, transform .15s; height: 100%;
}
.stat-card:hover { box-shadow: var(--pnt-shadow-lg); transform: translateY(-1px); color: inherit; }
.stat-card__top { display: flex; align-items: center; justify-content: space-between; color: var(--pnt-slate-500); }
.stat-card__top .bi { font-size: 1.25rem; }
.stat-card__value { font-size: 2rem; font-weight: 700; line-height: 1.1; color: var(--pnt-navy); font-variant-numeric: tabular-nums; }
.stat-card__label { color: var(--pnt-slate-500); font-size: .85rem; }
.stat-card--amber { border-left-color: var(--pnt-amber); }
.stat-card--blue  { border-left-color: var(--pnt-blue); }
.stat-card--green { border-left-color: var(--pnt-green); }
.stat-card--slate { border-left-color: var(--pnt-slate-300); }

/* ---- Empty / loading states ---- */
.empty-state { text-align: center; padding: 2.5rem 1rem; color: var(--pnt-slate-500); }
.empty-state .bi { font-size: 2.5rem; color: var(--pnt-slate-300); display: block; margin-bottom: .5rem; }

/* ---- Sticky form action bar ---- */
.form-actions {
    position: sticky; bottom: 0; z-index: 5; margin-top: 1.25rem; padding: .75rem 0;
    background: rgba(255,255,255,.92); backdrop-filter: blur(6px);
    border-top: 1px solid var(--pnt-slate-200); display: flex; gap: .5rem; flex-wrap: wrap; align-items: center;
}

/* ---- Avatar / initials chip ---- */
.avatar {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2rem; height: 2rem; border-radius: 50%; background: var(--pnt-blue); color: #fff;
    font-size: .8rem; font-weight: 600; flex: none;
}

/* ---- Page toolbar ---- */
.page-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.page-toolbar h1 { margin: 0; }

/* ---- Error UI on-brand ---- */
.blazor-error-boundary {
    background: var(--pnt-red); padding: 1rem 1rem 1rem 1rem; color: #fff; border-radius: var(--pnt-radius);
}
.blazor-error-boundary::after { content: "An error has occurred."; }

.darker-border-checkbox.form-check-input { border-color: #929292; }

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder { color: var(--bs-secondary-color); text-align: end; }
.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder { text-align: start; }

@media (prefers-reduced-motion: reduce) {
    .stat-card { transition: none; }
    .import-dropzone { transition: none; }
}

/* ---- Import drop zone ---- */
.import-dropzone {
    position: relative;
    border: 2px dashed var(--pnt-slate-300);
    border-radius: var(--pnt-radius);
    background: var(--pnt-slate-50);
    padding: 2rem 1rem;
    text-align: center;
    transition: border-color .15s ease, background-color .15s ease;
    cursor: pointer;
}
.import-dropzone:hover { border-color: var(--pnt-blue); }
.import-dropzone.is-dragover { border-color: var(--pnt-blue); background: var(--pnt-slate-100); }
.import-dropzone-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.import-dropzone-label { position: relative; pointer-events: none; color: var(--pnt-slate-500); }
.import-dropzone-label i { font-size: 1.9rem; color: var(--pnt-blue); display: block; margin-bottom: .35rem; }

/* ---- Honeypot (bot trap): kept in the DOM for bots, removed from view for humans ---- */
.hp-field { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---- Media capture: file input visually hidden inside a styled .btn label (camera on mobile) ---- */
.media-capture-input { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }