/* Fleet Admin - shares the same design system as FleetPortal and SevenBySevenTraining (same
   :root tokens, .card/.badge/.btn/.auth-*, .data-table/.form-grid components copied from
   FleetPortal/Content/Site.css and SevenBySevenTraining/wwwroot/css/site.css) so this reads as
   the same product family across all three sites, not a fourth reskin. */

:root {
    --ink: #14161a;
    --accent: #e8a33d;
    --accent-dark: #c8842a;
    --bg: #f4f5f7;
    --card-bg: #ffffff;
    --border: #e6e8eb;
    --text: #1c1f24;
    --text-muted: #6b7280;
    --green: #1f9d55;
    --blue: #3b82f6;
    --purple: #8b5cf6;
    --red: #e0403e;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
    background: var(--bg);
    color: var(--text);
}

a { text-decoration: none; color: inherit; }

/* ---- Topbar ---- */
.topbar {
    background: var(--card-bg);
    border-bottom: 1px solid var(--border);
    padding: 14px 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.topbar-left { display: flex; align-items: center; gap: 28px; }
.brand { display: flex; align-items: center; gap: 10px; }
.brand-mark {
    height: 36px;
    width: auto;
    display: block;
}
.brand-name { font-weight: 600; color: var(--text); font-size: 15px; }
.brand-sub { font-size: 12px; color: var(--text-muted); }

.topbar-nav { display: flex; align-items: center; gap: 4px; }
.topbar-nav-link {
    padding: 8px 12px; border-radius: 8px; font-size: 14px; font-weight: 600; color: var(--text-muted);
}
.topbar-nav-link:hover { background: var(--bg); color: var(--text); }
.topbar-nav-link.active { background: var(--ink); color: #fff; }

.account-chip { display: flex; align-items: center; gap: 12px; }
.account-chip-text { text-align: right; }
.account-chip-name { font-size: 13px; font-weight: 600; }
.account-chip-avatar {
    width: 34px; height: 34px; border-radius: 50%;
    background: var(--ink); color: var(--accent);
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 13px;
}

.page-container { max-width: 1100px; margin: 0 auto; padding: 28px 20px; }

/* ---- Cards, badges, buttons, form fields -- copied from FleetPortal/Content/Site.css ---- */
.card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
}
.card-title { font-size: 12px; letter-spacing: .06em; color: var(--text-muted); font-weight: 700; margin-bottom: 6px; }
.card-heading { font-size: 18px; font-weight: 700; margin: 0 0 4px; }

.page-header-row { display: flex; justify-content: space-between; align-items: flex-start; }

.badge { padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; gap: 5px; }
.badge.certified { background: #e6f7ec; color: var(--green); }
.badge.progress { background: #e8f0fe; color: var(--blue); }
.badge.awaiting { background: #f0edfc; color: var(--purple); }
.badge.expired { background: #fdecec; color: var(--red); }
.badge.pending { background: #f3f4f6; color: #6b7280; }
.badge.needs-renewal { background: #fdf3e3; color: var(--accent-dark); }

.btn { -webkit-appearance: none; appearance: none; display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; border: 1px solid var(--border); background: #fff; color: var(--text); }
.btn-dark { background: var(--ink); color: #fff; border-color: var(--ink); }
.btn-outline { background: #fff; color: var(--text); }
.btn-danger-outline { background: #fff; color: var(--red); border-color: #f6c9c8; }
.btn-link { background: none; border: none; color: var(--accent-dark); font-weight: 700; padding: 0; cursor: pointer; }
.btn-sm { padding: 5px 10px; font-size: 12px; }
.btn.disabled, .btn:disabled { opacity: .4; cursor: not-allowed; pointer-events: none; }

.text-input, select.text-input, textarea.text-input {
    width: 100%; padding: 9px 12px; border-radius: 8px; border: 1px solid var(--border); font-size: 14px; font-family: inherit;
}
/* A plain <select> keeps its OS-drawn dropdown arrow even with the padding above matched to
   .btn/.text-input -- on Windows Chrome/Edge that native arrow reserves its own internal height,
   so the control still renders a few px taller or shorter than the button beside it no matter what
   padding says. appearance:none strips that OS chrome entirely and we draw our own arrow via
   background-image, so the box height is 100% CSS-driven and guaranteed to match .btn/.text-input
   exactly -- same reasoning as the file-input-label replacement above, applied to <select> too. */
select.text-input {
    appearance: none; -webkit-appearance: none; -moz-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M4 6l4 4 4-4' fill='none' stroke='%236b7280' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat; background-position: right 12px center; background-size: 14px;
    padding-right: 34px;
}
.form-field { margin-bottom: 14px; }
.form-field label { display: block; font-size: 12px; font-weight: 600; margin-bottom: 5px; color: var(--text-muted); }
.field-note { font-size: 12px; color: var(--text-muted); margin-top: 5px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }

/* Video Bank card's Chapter Assignments / Subtitle panels. Deliberately NOT two tall column <div>s
   each stacking title+list+form -- a real grid with title/list/form as separate rows means each
   row's height is the max of its two cells, so the Assign and Replace forms always start at the
   same Y regardless of how many chapters happen to be listed above them on either side.
   grid-template-areas (not source order) so the <720px collapse below can regroup each topic's
   title/list/form back into one contiguous block instead of interleaving both topics row-by-row. */
.video-detail-grid {
    display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; row-gap: 8px; align-items: start;
    grid-template-areas:
        "chap-title sub-title"
        "chap-list sub-current"
        "chap-form sub-form";
}
.video-detail-grid .chap-title { grid-area: chap-title; }
.video-detail-grid .sub-title { grid-area: sub-title; }
.video-detail-grid .chap-list { grid-area: chap-list; }
.video-detail-grid .sub-current { grid-area: sub-current; }
.video-detail-grid .chap-form { grid-area: chap-form; }
.video-detail-grid .sub-form { grid-area: sub-form; }

/* Native <input type="file"> renders its own OS-drawn "Choose file" button with a height that
   doesn't match .text-input/.btn's CSS-driven height, which is what made the Chapter dropdown row
   and the subtitle file-picker row visually not line up on the Video Bank page. Fix: hide the real
   file input and use a .text-input-styled <label for="..."> as the visible control instead -- it's
   built from the exact same box model as every select/button next to it, so the two rows are
   guaranteed pixel-identical instead of hoping browser chrome happens to match.
   (.form-field .file-input-label.text-input needs 3 classes + 1 type to out-specificity the plain
   ".form-field label" caption rule above, which would otherwise force it back to display:block and
   a 12px muted caption style.) */
.form-field .file-input-label.text-input {
    display: flex; align-items: center; margin-bottom: 0; font-size: 14px; font-weight: 400;
    color: var(--text-muted); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.file-input-hidden {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.inline-panel { background: #fbf8f2; border: 1px solid #f0e3c9; border-radius: 10px; padding: 16px; margin-bottom: 18px; }

/* Billing dashboard's "invoices over time" chart -- plain positioned <div>s (no chart library, no
   build step), matching how the rest of this app is server-rendered Razor + a little inline JS.
   Bar geometry (left/width/height percentages) is computed server-side in Index.cshtml.cs. */
.chart-container { position: relative; height: 200px; margin: 8px 0 32px; border-bottom: 1px solid var(--border); }
.chart-bar-wrap { position: absolute; bottom: 0; height: 100%; box-sizing: border-box; padding: 0 2px; }
.chart-bar { position: absolute; bottom: 0; left: 2px; right: 2px; background: var(--accent); border-radius: 3px 3px 0 0; transition: background .1s; }
.chart-bar:hover { background: var(--accent-dark); }
.chart-label { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 6px; font-size: 10px; color: var(--text-muted); white-space: nowrap; }
.chart-peak { font-size: 12px; color: var(--text-muted); margin-bottom: 4px; }

.kpi-value { font-size: 28px; font-weight: 800; }

/* ---- Data tables (course/video/question lists) -- copied from FleetPortal's Drivers.aspx grid ---- */
.data-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.data-table th { text-align: left; font-size: 11px; letter-spacing: .04em; color: var(--text-muted); padding: 8px 10px; border-bottom: 1px solid var(--border); }
.data-table td { padding: 12px 10px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.data-table tr:last-child td { border-bottom: none; }
.data-table td.actions-cell { display: flex; gap: 6px; flex-wrap: wrap; }

.filter-tabs { display: flex; gap: 6px; margin-bottom: 16px; flex-wrap: wrap; }
.filter-tab { padding: 7px 14px; border-radius: 8px; border: 1px solid var(--border); font-size: 13px; background: var(--card-bg); cursor: pointer; }
.filter-tab.active { background: var(--ink); color: #fff; border-color: var(--ink); }

/* ---- Auth pages -- identical pattern to FleetPortal's/SevenBySevenTraining's own ---- */
.auth-shell { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--ink); padding: 20px; }
.auth-card { background: #fff; border-radius: 14px; padding: 36px; width: 100%; max-width: 380px; }
.auth-title { font-size: 20px; font-weight: 800; margin-bottom: 4px; }
.auth-sub { font-size: 13px; color: var(--text-muted); margin-bottom: 22px; }
.auth-field { margin-bottom: 14px; }
.auth-field label { display: block; font-size: 12px; font-weight: 600; margin-bottom: 5px; }
.auth-error { background: #fdecec; color: #7a1f1e; border: 1px solid #f6c9c8; padding: 10px 12px; border-radius: 8px; font-size: 13px; margin-bottom: 14px; }
.auth-submit { width: 100%; background: var(--ink); color: #fff; border: none; border-radius: 8px; padding: 12px; font-weight: 700; cursor: pointer; margin-top: 6px; }
.auth-footer { text-align: center; font-size: 13px; margin-top: 16px; color: var(--text-muted); }

/* ---- Processing status (video uploads) ---- */
.status-processing { background: #f0edfc; color: var(--purple); }
.status-ready { background: #e6f7ec; color: var(--green); }
.status-failed { background: #fdecec; color: var(--red); }

@media (max-width: 720px) {
    .topbar { flex-wrap: wrap; gap: 10px; row-gap: 8px; }
    .topbar-left { flex-wrap: wrap; gap: 10px; }
    .brand-sub { display: none; }
    .topbar-nav { gap: 2px; }
    .topbar-nav-link { padding: 6px 8px; font-size: 13px; }
    .form-grid { grid-template-columns: 1fr; }
    .video-detail-grid {
        grid-template-columns: 1fr;
        grid-template-areas:
            "chap-title"
            "chap-list"
            "chap-form"
            "sub-title"
            "sub-current"
            "sub-form";
    }
}

@media (max-width: 480px) {
    .auth-card { margin: 24px auto; padding: 24px; border-radius: 0; }
    .topbar { padding: 12px 16px; }
    .account-chip-text { display: none; }
}