/* ==========================================================================
   BSI UI - foundation stylesheet
   The Business Science Institute design system.
   White surfaces, burgundy #9B0C23 accent, PT Serif, light weights,
   flat 4px corners on controls, soft 8px corners on cards and modals.
   Copy this file as-is into a new project and link it, then assemble
   screens with the documented classes. Pairs with icons.js for pictograms.
   ========================================================================== */

:root {
    /* Accent (burgundy). Used for primary actions, active items, links, focus. */
    --red:          #9B0C23;
    --red-dark:     #7a0a1c;   /* hover / pressed */
    --red-light:    #fef2f2;   /* faint tint background */
    --red-border:   #fecaca;   /* tint border */

    /* Text */
    --text:         #454545;   /* body and headings */
    --text-muted:   #787878;   /* secondary text, captions */
    --text-light:   #9b9b9b;   /* hints, disabled */

    /* Surfaces and lines */
    --surface:      #ffffff;   /* page and card background */
    --bg:           #fafafa;   /* inputs, sidebar, table headers, hovered rows */
    --border:       #e0e0e0;   /* card borders */
    --border-soft:  #e8e8e8;   /* table rows, sidebar edges */
    --border-input: #d0d0d0;   /* form field borders */
    --divider:      #f0f0f0;   /* 2px header/tab dividers */

    /* Status */
    --success-bg:   #f0fdf4;
    --success-text: #166534;
    --success-bdr:  #bbf7d0;
    --danger:       #dc3545;
    --danger-dark:  #c82333;

    /* Radii - flat controls, soft cards */
    --radius:       4px;   /* buttons, inputs, badges */
    --radius-card:  6px;   /* content cards */
    --radius-lg:    8px;   /* modals, login, large surfaces */
    --radius-pill:  20px;  /* status pills, counts */

    /* Shadows - soft and low */
    --shadow-sm:    0 2px 10px rgba(0, 0, 0, .04);
    --shadow:       0 2px 10px rgba(0, 0, 0, .08);
    --shadow-md:    0 4px 20px rgba(0, 0, 0, .10);
    --shadow-lg:    0 10px 40px rgba(0, 0, 0, .15);

    /* Type and metrics */
    --font:         'PT Serif', Arial, Helvetica, 'Nimbus Sans L', sans-serif;
    --control-h:    42px;      /* shared height of inputs and buttons */
    --sidebar-width: 300px;    /* Layout A default; widen for a tree (dataroom uses 450px) */
    --sidebar-collapsed: 60px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font);
    background: var(--surface);
    color: var(--text);
    font-size: 14px;
    line-height: 1.6;
    min-height: 100vh;
}

a {
    color: var(--red);
    text-decoration: none;
}

a:hover {
    color: var(--red-dark);
    text-decoration: underline;
}

/* Headings are light (font-weight: normal) - the BSI signature.
   Meaning is carried by size and the burgundy accent, never by bold weight. */
h1, h2, h3, h4 {
    color: var(--text);
    font-weight: normal;
    line-height: 1.3;
}

h1 { font-size: 24px; letter-spacing: -0.5px; }
h2 { font-size: 22px; }
h3 { font-size: 18px; }
h4 { font-size: 15px; }

/* ─── Buttons ────────────────────────────────────────────────────────────
   Every button shares the 42px control height and 4px radius, so it lines
   up with the fields beside it. Primary is a solid burgundy fill; secondary
   is an outline that inverts on hover; danger is red. */

.btn {
    height: var(--control-h);
    padding: 0 24px;
    background: var(--red);
    color: #ffffff;
    border: none;
    border-radius: var(--radius);
    font-family: var(--font);
    font-size: 14px;
    font-weight: normal;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.3s;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.btn:hover {
    background: var(--red-dark);
    color: #ffffff;
    text-decoration: none;
}

.btn-secondary {
    background: transparent;
    color: var(--red);
    border: 1px solid var(--red);
}

.btn-secondary:hover {
    background: var(--red);
    color: #ffffff;
}

.btn-danger {
    background: var(--danger);
    color: #ffffff;
}

.btn-danger:hover {
    background: var(--danger-dark);
}

.btn-full {
    width: 100%;
}

.btn-small {
    height: auto;
    padding: 8px 16px;
    font-size: 13px;
}

.btn svg {
    display: inline-block;
    vertical-align: -3px;
}

/* Square icon button for toolbars and table rows: outlined, neutral,
   turns burgundy on hover. */
.btn-icon {
    height: 34px;
    min-width: 34px;
    padding: 0 8px;
    background: transparent;
    color: var(--text-muted);
    border: 1px solid var(--border-input);
    border-radius: var(--radius);
    cursor: pointer;
    transition: all 0.3s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-icon:hover {
    color: var(--red);
    border-color: var(--red);
}

.btn-icon svg {
    display: block;
}

/* A borderless icon button used inside modal headers and toolbars. */
.icon-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 6px;
    border-radius: var(--radius);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.icon-btn:hover {
    color: var(--red);
    background: rgba(155, 12, 35, 0.08);
}

.icon-btn.active {
    color: var(--red);
    background: rgba(155, 12, 35, 0.12);
}

/* ─── Form fields ────────────────────────────────────────────────────────
   Inputs, selects and textareas share the same look: faint gray fill, thin
   border, burgundy focus that turns the fill white. Single-line controls
   sit at the 42px control height so buttons align with them. */

label {
    display: block;
    margin-bottom: 8px;
    color: var(--text);
    font-size: 14px;
    font-weight: normal;
}

input[type="text"],
input[type="password"],
input[type="email"],
input[type="search"],
input[type="number"],
input[type="date"],
textarea,
select {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid var(--border-input);
    border-radius: var(--radius);
    font-family: var(--font);
    font-size: 14px;
    color: var(--text);
    background: var(--bg);
    transition: border-color 0.3s, background 0.3s;
}

input[type="text"],
input[type="password"],
input[type="email"],
input[type="search"],
input[type="number"],
input[type="date"],
select {
    height: var(--control-h);
    padding-top: 0;
    padding-bottom: 0;
}

textarea {
    resize: vertical;
    min-height: 80px;
    line-height: 1.6;
}

input:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: var(--red);
    background: var(--surface);
}

/* Select: strip the native chevron and bake in a gray BSI one, so the arrow
   is identical in every browser and the control reads like a text field. */
select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 40px;
    background-color: var(--bg);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23787878' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right 14px center;
}

select:focus {
    background-color: var(--surface);
}

/* Checkboxes, radios and range sliders adopt the accent so their native
   render matches BSI without re-implementing them. */
input[type="checkbox"],
input[type="radio"],
input[type="range"] {
    accent-color: var(--red);
    width: auto;
    height: auto;
    cursor: pointer;
}

input[type="checkbox"],
input[type="radio"] {
    width: 16px;
    height: 16px;
    vertical-align: -2px;
}

/* A checkbox or radio sitting inline with its label. */
.check-field,
.radio-field {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.check-field label,
.radio-field label {
    margin-bottom: 0;
    cursor: pointer;
}

/* Toggle switch: a fully custom on/off control for boolean settings.
   Off is a neutral track, on is the burgundy track with the knob to the right. */
.switch {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

.switch input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.switch .switch-track {
    width: 42px;
    height: 24px;
    border-radius: 20px;
    background: var(--border-input);
    transition: background 0.2s;
    flex-shrink: 0;
    position: relative;
}

.switch .switch-track::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s;
}

.switch input:checked + .switch-track {
    background: var(--red);
}

.switch input:checked + .switch-track::after {
    transform: translateX(18px);
}

/* Range slider value bubble sits next to the track when needed. */
.range-field {
    display: flex;
    align-items: center;
    gap: 12px;
}

.range-field input[type="range"] {
    flex: 1;
}

.range-field .range-value {
    font-size: 13px;
    color: var(--text-muted);
    min-width: 44px;
}

/* Disabled controls: muted, no pointer. */
input:disabled,
select:disabled,
textarea:disabled,
.btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.form-group {
    margin-bottom: 25px;
}

/* Two-column grid for natural pairs; collapses on narrow screens. */
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

/* ─── File input ─────────────────────────────────────────────────────────
   The native <input type="file"> button is never shown raw: it clashes with
   everything else. Hide it and drive it from a styled label. The visible
   trigger reads like an outlined secondary button at the control height, with
   the chosen file name (or a muted placeholder) sitting to its right. */

.file-input {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
}

.file-input input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.file-input-btn {
    height: var(--control-h);
    padding: 0 20px;
    background: transparent;
    color: var(--red);
    border: 1px solid var(--red);
    border-radius: var(--radius);
    font-family: var(--font);
    font-size: 14px;
    letter-spacing: 0.5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.3s;
    white-space: nowrap;
    flex-shrink: 0;
}

.file-input:hover .file-input-btn {
    background: var(--red);
    color: #ffffff;
}

.file-input-name {
    font-size: 14px;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.file-input-name.has-file {
    color: var(--text);
}

/* ─── Alerts ─────────────────────────────────────────────────────────────
   Full-width tinted blocks, centered text, thin matching border. No colored
   left stripe. */

.error,
.alert-error {
    background: var(--red-light);
    color: var(--red);
    border: 1px solid var(--red-border);
    padding: 15px 20px;
    margin-bottom: 25px;
    text-align: center;
    font-size: 14px;
    border-radius: var(--radius);
    line-height: 1.5;
}

.success,
.alert-success {
    background: var(--success-bg);
    color: var(--success-text);
    border: 1px solid var(--success-bdr);
    padding: 15px 20px;
    margin-bottom: 25px;
    text-align: center;
    font-size: 14px;
    border-radius: var(--radius);
}

/* ─── App shell (Layout A: light sidebar) ────────────────────────────────
   A flex shell: a light sidebar next to a scrolling content column. The
   sidebar is not a colored block - it is a faint gray panel bordered off
   from the content. It sticks full height and collapses to an icon rail. */

.app-wrapper {
    display: flex;
    min-height: 100vh;
}

.sidebar {
    width: var(--sidebar-width);
    min-width: var(--sidebar-width);
    background: var(--bg);
    border-right: 1px solid var(--border-soft);
    display: flex;
    flex-direction: column;
    height: 100vh;
    position: sticky;
    top: 0;
    overflow: hidden;
    transition: width 0.25s ease, min-width 0.25s ease;
}

.sidebar-header {
    padding: 25px 20px;
    border-bottom: 1px solid var(--border-soft);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.sidebar-header-text {
    overflow: hidden;
}

.sidebar-header h1 {
    font-size: 18px;
    text-align: left;
    margin-bottom: 4px;
}

.sidebar-header .subtitle {
    text-align: left;
    margin-bottom: 0;
    font-size: 13px;
    color: var(--text-muted);
}

.sidebar-toggle {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px;
    border-radius: var(--radius);
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.sidebar-toggle:hover {
    color: var(--red);
    background: rgba(155, 12, 35, 0.08);
}

.sidebar-nav {
    flex: 1;
    overflow-y: auto;
    padding: 15px 0;
}

/* A flat navigation item; the active one is a solid burgundy row with white
   text (the single place the accent fills a large surface). */
.nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    color: var(--text);
    font-size: 14px;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
    text-decoration: none;
}

.nav-item:hover {
    background: var(--divider);
    text-decoration: none;
}

.nav-item.active {
    background: var(--red);
    color: #ffffff;
}

/* Pictogram at the left of every sidebar item: it is what remains when the
   sidebar collapses to the icon rail, so no nav item ships without one. */
.nav-item .nav-icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.nav-item .nav-label {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nav-item .nav-count {
    margin-left: auto;
    font-size: 11px;
    background: var(--border-soft);
    color: var(--text-muted);
    padding: 2px 8px;
    border-radius: var(--radius-pill);
}

.nav-item.active .nav-count {
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
}

.sidebar-footer {
    padding: 15px 20px;
    border-top: 1px solid var(--border-soft);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.sidebar-footer .user-name {
    font-size: 13px;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-footer .user-role {
    color: var(--text-muted);
    font-size: 12px;
    text-transform: capitalize;
}

.sidebar-footer .footer-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

/* Collapsed rail: hide the labels, keep the icons, center the header. */
.app-wrapper.sidebar-collapsed .sidebar {
    width: var(--sidebar-collapsed);
    min-width: var(--sidebar-collapsed);
}

.app-wrapper.sidebar-collapsed .sidebar-header-text,
.app-wrapper.sidebar-collapsed .sidebar-nav .nav-label,
.app-wrapper.sidebar-collapsed .sidebar-nav .nav-count,
.app-wrapper.sidebar-collapsed .sidebar-footer .user-info {
    display: none;
}

.app-wrapper.sidebar-collapsed .sidebar-header {
    justify-content: center;
    padding: 20px 0;
}

.app-wrapper.sidebar-collapsed .nav-item {
    justify-content: center;
    padding: 10px 0;
}

.app-wrapper.sidebar-collapsed .sidebar-footer {
    justify-content: center;
    padding: 15px 0;
}

.app-wrapper.sidebar-collapsed .sidebar-footer .footer-actions {
    flex-direction: column;
    gap: 10px;
}

/* ─── Main content ───────────────────────────────────────────────────────*/

.main-content {
    flex: 1;
    padding: 30px 40px;
    overflow-y: auto;
    min-width: 0;
}

/* Page header: title on the left, actions on the right, a 2px light rule
   under the whole band. The title appears once, here. */
.content-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 2px solid var(--divider);
}

.content-header h2 {
    font-size: 22px;
    font-weight: normal;
    color: var(--text);
}

.content-header .breadcrumb {
    font-size: 13px;
    color: var(--text-muted);
    margin-top: 4px;
}

.content-actions {
    display: flex;
    gap: 10px;
    align-items: center;
}

/* ─── Layout B: top header + tabs (no sidebar) ───────────────────────────
   A centered column with a white header band, a horizontal tab row under
   it, then the content. Chosen when screens read better full width or the
   sections are few. */

.dashboard,
.page-shell {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

.header {
    background: var(--surface);
    border-bottom: 2px solid var(--divider);
    padding: 30px 0;
    margin-bottom: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header h1 {
    font-size: 28px;
    font-weight: normal;
    text-align: left;
    margin: 0 0 5px 0;
}

.header .user-status {
    color: var(--text-muted);
    font-size: 14px;
    text-transform: capitalize;
}

/* ─── Tabs (top navigation and in-page tabs) ─────────────────────────────
   Transparent tabs on a 2px light rule; the active tab is burgundy with a
   3px burgundy underline. Never boxed, never a filled pill. */

.tabs,
.top-tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--divider);
    margin-bottom: 30px;
    overflow-x: auto;
}

.tab,
.top-tab {
    padding: 14px 28px;
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    color: var(--text-muted);
    font-family: var(--font);
    font-size: 15px;
    font-weight: normal;
    cursor: pointer;
    transition: all 0.3s;
    white-space: nowrap;
}

.tab:hover,
.top-tab:hover {
    color: var(--text);
}

.tab.active,
.top-tab.active {
    color: var(--red);
    border-bottom-color: var(--red);
}

.tab-panel,
.tab-content {
    display: none;
}

.tab-panel.active,
.tab-content.active {
    display: block;
}

/* ─── Cards ──────────────────────────────────────────────────────────────
   A plain white card with a 1px border and a 6px radius; hover lifts the
   border to burgundy with a soft tinted shadow. No colored left stripe. */

.card {
    background: var(--surface);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-card);
    padding: 30px;
}

.card-link {
    display: block;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: all 0.3s;
}

.card-link:hover {
    border-color: var(--red);
    box-shadow: 0 4px 20px rgba(155, 12, 35, 0.1);
    text-decoration: none;
}

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 30px;
    align-items: start;
}

/* Square burgundy icon chip that sits at the top of a card. */
.card-icon {
    width: 50px;
    height: 50px;
    background: var(--red);
    color: #ffffff;
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.card-title {
    font-size: 18px;
    font-weight: normal;
    color: var(--text);
    margin-bottom: 12px;
}

.card-text {
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1.6;
}

/* ─── Tables ─────────────────────────────────────────────────────────────
   Full-width table, faint gray header (normal weight), thin row rules,
   rows hover in the same faint gray. Header can stick for long tables. */

.data-table {
    width: 100%;
    border-collapse: collapse;
}

.data-table th,
.data-table td {
    padding: 14px 15px;
    text-align: left;
    border-bottom: 1px solid var(--border-soft);
    font-size: 14px;
}

.data-table th {
    background: var(--bg);
    color: var(--text);
    font-weight: normal;
    position: sticky;
    top: 0;
    z-index: 2;
}

.data-table tr:hover {
    background: var(--bg);
}

.data-table .th-actions {
    text-align: right;
}

.data-table .actions-cell {
    display: flex;
    gap: 6px;
    justify-content: flex-end;
    white-space: nowrap;
}

.data-table .col-num {
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* Sortable header: pointer cursor, burgundy on hover, arrow shows state. */
.sortable-th {
    cursor: pointer;
    user-select: none;
    transition: color 0.2s;
}

.sortable-th:hover {
    color: var(--red);
}

.sort-arrow {
    display: inline-block;
    vertical-align: -2px;
    margin-left: 4px;
    color: var(--red);
}

.sort-arrow-inactive {
    display: inline-block;
    vertical-align: -2px;
    margin-left: 4px;
    opacity: 0.25;
}

/* Drag-to-reorder rows: burgundy insertion line above or below the target. */
.drag-row { cursor: grab; }
.drag-row:active { cursor: grabbing; }
.dragging-row { opacity: 0.4; }
.insert-before td { box-shadow: inset 0 2px 0 var(--red); }
.insert-after td { box-shadow: inset 0 -2px 0 var(--red); }

.drag-handle {
    cursor: grab;
    color: var(--border-input);
    padding: 0 4px;
    user-select: none;
}

.drag-handle:hover { color: var(--red); }
.drag-handle:active { cursor: grabbing; }

/* ─── Badges ─────────────────────────────────────────────────────────────
   Two shapes, both tinted, both used in BSI: a flat 4px type badge
   (uppercase, for file types and short tags) and a soft pill (for roles and
   statuses). Pick per meaning. */

.badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: var(--radius);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: normal;
}

.badge-red    { background: var(--red-light); color: var(--red); }
.badge-blue   { background: #dbeafe; color: #1e40af; }
.badge-green  { background: #dcfce7; color: #166534; }
.badge-amber  { background: #fef3c7; color: #92400e; }
.badge-gray   { background: #f3f4f6; color: #374151; }

.pill {
    display: inline-block;
    padding: 4px 14px;
    border-radius: var(--radius-pill);
    font-size: 12px;
}

.pill-amber { background: #fef3c7; color: #92400e; }
.pill-blue  { background: #dbeafe; color: #1e40af; }
.pill-gray  { background: #f3f4f6; color: #374151; }
.pill-green { background: #dcfce7; color: #166534; }

/* ─── Empty state ────────────────────────────────────────────────────────*/

.empty-state {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-muted);
}

.empty-state p {
    font-size: 15px;
    margin-bottom: 20px;
}

/* ─── Modal ──────────────────────────────────────────────────────────────
   Dark overlay, white card with an 8px radius, header / body / footer bands.
   Replaces every native alert / confirm / prompt. */

.modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.modal-overlay.active {
    display: flex;
}

.modal {
    background: var(--surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    width: 100%;
    max-width: 600px;
    max-height: 90vh;
    overflow-y: auto;
}

.modal-large { max-width: 900px; }

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 25px 30px;
    border-bottom: 1px solid var(--border-soft);
}

.modal-header h3 {
    font-size: 18px;
    font-weight: normal;
    color: var(--text);
}

.modal-close {
    background: none;
    border: none;
    font-size: 22px;
    color: var(--text-muted);
    cursor: pointer;
    padding: 5px;
    line-height: 1;
    transition: color 0.2s;
}

.modal-close:hover { color: var(--text); }

.modal-body { padding: 30px; }

.modal-footer {
    padding: 20px 30px;
    border-top: 1px solid var(--border-soft);
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

/* ─── Upload drop zone ───────────────────────────────────────────────────*/

.upload-drop-zone {
    border: 2px dashed var(--border-input);
    border-radius: var(--radius-lg);
    padding: 40px 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s;
    margin-bottom: 20px;
}

.upload-drop-zone:hover,
.upload-drop-zone.dragover {
    border-color: var(--red);
    background: rgba(155, 12, 35, 0.03);
}

.upload-drop-zone p {
    color: var(--text-muted);
    font-size: 14px;
    margin-bottom: 5px;
}

.upload-drop-zone .formats {
    color: var(--text-light);
    font-size: 12px;
}

.upload-drop-zone input[type="file"] {
    display: none;
}

/* ─── Search bar ─────────────────────────────────────────────────────────*/

.search-bar {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

.search-bar input {
    flex: 1;
    max-width: 350px;
}

/* ─── Login ──────────────────────────────────────────────────────────────
   A centered card on a plain page: institute name, title, fields, a
   full-width burgundy button. */

body.login-page {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.login-container {
    width: 100%;
    max-width: 400px;
}

.login-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    padding: 50px 40px;
}

.login-card .institute-name {
    text-align: center;
    font-size: 18px;
    color: var(--text);
    margin-bottom: 5px;
    font-weight: normal;
}

.login-card h1 {
    text-align: center;
    margin-bottom: 10px;
}

.login-card .subtitle {
    text-align: center;
    color: var(--text-muted);
    font-size: 14px;
    margin-bottom: 40px;
}

/* ─── Split screen (info + form) ─────────────────────────────────────────
   Two-panel card: a faint gray info panel on the left with the logo and
   explanatory copy, a white form panel on the right. For a richer login or
   a public entry screen. Stacks to one column on narrow screens, info on top. */

.split-page {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 60px 20px;
    min-height: 100vh;
}

.split-card {
    display: flex;
    width: 100%;
    max-width: 1120px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    overflow: hidden;
}

.split-info {
    flex: 1.15;
    background: var(--bg);
    border-right: 1px solid var(--border-soft);
    padding: 56px 52px;
}

.split-info .split-logo { height: 62px; margin: 0 0 30px; }
.split-info h1 { margin-bottom: 22px; }
.split-info p { color: var(--text-muted); line-height: 1.75; margin-bottom: 16px; }
.split-info p:last-child { margin-bottom: 0; }

.split-form {
    flex: 1;
    padding: 56px 52px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.split-form h2 { margin-bottom: 28px; }

@media (max-width: 760px) {
    .split-card { flex-direction: column; }
    .split-info { border-right: none; border-bottom: 1px solid var(--border-soft); }
}

@media (max-width: 480px) {
    .split-page { padding: 28px 14px; }
    .split-info, .split-form { padding: 34px 26px; }
    .split-info .split-logo { height: 54px; margin-bottom: 24px; }
}

/* ─── Responsive ─────────────────────────────────────────────────────────*/

@media (max-width: 900px) {
    .app-wrapper { flex-direction: column; }

    .sidebar {
        width: 100%;
        min-width: 100%;
        height: auto;
        position: relative;
        max-height: 50vh;
    }

    .main-content { padding: 20px; }
    .form-row { grid-template-columns: 1fr; }
    .card-grid { grid-template-columns: 1fr; }

    .content-header {
        flex-direction: column;
        gap: 15px;
        align-items: flex-start;
    }

    .data-table {
        display: block;
        overflow-x: auto;
    }
}


/* ==========================================================================
   COMPARE DBA - PROJECT LAYER
   ==========================================================================
   Everything above this line is the BSI UI v1.1 foundation, copied as-is.
   Nothing below overrides a token: this layer only adds the screens the
   foundation does not describe (a public landing page, a 30-criteria
   comparison grid, a step-by-step wizard, a print view) and it builds them
   from the same tokens, per the "no browser default styling, ever" rule.

   Rules honoured here, deliberately:
   - every font-size comes from the BSI type scale (28/24/22/18/15/14/13/11)
   - font-weight is normal everywhere, including table headers
   - radius 4px on controls, 6px on cards, 8px on modals, 20px on pills
   - no colored left border anywhere
   - burgundy is the only accent; the old navy #013B67 is gone
   ========================================================================== */

html { scroll-behavior: smooth; }

/* ─── Contrast correction on the foundation ──────────────────────────────
   --text-muted ships as #787878, which is 4.42:1 on white: just under the
   4.5:1 WCAG AA floor for normal text. It carries the intro copy, the FAQ
   answers, the card text and the field hints, so the whole page failed the
   check once this site moved onto the token (the previous design used #555,
   at 7.4:1). #6b6b6b reads the same at a glance and measures 5.33:1.

   Worth pushing back into BSI UI rather than keeping as a local patch: every
   project on the foundation has the same failure.

   --text-light is 2.78:1 and stays as is on purpose: it is used for
   placeholders, disabled text and the scaled document mock, none of which
   carry meaning that has to be read. Where it was carrying real copy, the
   rule below moves that copy to --text-muted instead.  */
:root {
    --text-muted: #6b6b6b;
}

/* Height of the sticky site header. The criteria table header pins directly
   under it, so the two have to agree; overridden at each breakpoint where the
   header padding changes rather than hard-coding the number twice. */
:root { --site-header-h: 68px; }

body {
    background: var(--bg);
}

/* ─── Public header (Layout B) ───────────────────────────────────────────
   The BSI .header is a white band inside the centered column. This site
   needs it edge to edge and sticky, since the comparison table is long, so
   the band spans the viewport and the inner row is the one that centers. */

#header {
    background: var(--surface);
    border-bottom: 2px solid var(--divider);
    position: sticky;
    top: 0;
    z-index: 200;
}

/* The height is driven by --site-header-h rather than by padding, so the
   sticky table header below can rely on it exactly. Vertical padding would
   let the two drift apart the next time this band changes. */
#header_content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    min-height: calc(var(--site-header-h) - 2px);
    padding: 0 20px;
}

#logotext {
    font-size: 18px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text);
}

#logotext a { color: var(--text); text-decoration: none; }
#logotext a:hover { color: var(--red); text-decoration: none; }
#logotext svg { color: var(--red); flex-shrink: 0; }

#languages { display: flex; gap: 18px; }

/* --text, not --text-muted: these sat white-on-navy before the restyle at
   roughly 8:1, and muted grey on white would have quietly dropped them to the
   worst contrast on the page. 9.59:1 here, burgundy on hover. */
#languages a {
    color: var(--text);
    font-size: 13px;
    transition: color 0.2s;
}

#languages a:hover { color: var(--red); text-decoration: none; }

/* ─── Centered column ────────────────────────────────────────────────────*/

#main {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    animation: cpdReveal 0.3s ease;
}

@keyframes cpdReveal {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* No overflow:hidden here, deliberately.
   It used to clip the card corners, but an ancestor with overflow:hidden
   becomes the scroll container for position:sticky, and this one never
   scrolls: the criteria header was pushed down by its own top offset and
   sat on top of the first data row instead of pinning under the site
   header. (Same defect in the previous design, at 55px.) The corners are
   rounded on the first header cells further down instead. */
#content {
    background: var(--surface);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-card);
}

#content form > table:first-of-type thead th:first-child {
    border-top-left-radius: var(--radius-card);
}

#content form > table:first-of-type thead th:last-child {
    border-top-right-radius: var(--radius-card);
}

/* ─── Hero ───────────────────────────────────────────────────────────────*/

#hero {
    background: var(--surface);
    padding: 48px 0 56px;
    border-bottom: 1px solid var(--border-soft);
}

#hero-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

#hero h1 {
    font-size: 28px;
    letter-spacing: -0.5px;
    margin: 0 0 24px;
    color: var(--text);
}

/* Editorial two-column intro. Kept as content, restyled as form. */
.hero-text {
    column-count: 2;
    column-gap: 40px;
    margin-bottom: 40px;
}

.hero-text p {
    font-size: 14px;
    line-height: 1.7;
    color: var(--text-muted);
    margin: 0 0 14px;
    text-align: justify;
    break-inside: avoid;
}

.hero-text p:last-child { margin-bottom: 0; }
.hero-text strong { color: var(--text); font-weight: normal; }

/* Three supporting cards, the BSI .card shape without the hover lift. */
.hero-highlights {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 48px;
    align-items: stretch;
}

.hero-hl {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    background: var(--surface);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-card);
    padding: 22px;
}

.hero-hl-icon {
    flex-shrink: 0;
    color: var(--red);
    margin-top: 2px;
}

.hero-hl strong {
    display: block;
    font-size: 15px;
    font-weight: normal;
    margin-bottom: 5px;
    color: var(--text);
}

.hero-hl div span {
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.6;
    display: block;
}

/* ─── Mode selector ──────────────────────────────────────────────────────*/

.hero-mode-section {
    border-top: 1px solid var(--divider);
    padding-top: 48px;
    padding-bottom: 48px;
}

.hero-section-title {
    font-size: 22px;
    margin: 0 0 28px;
    color: var(--text);
}

#hero #mode-selector {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    margin: 0;
}

.mode-col { display: flex; flex-direction: column; }

.mode-col-title {
    font-size: 18px;
    color: var(--text);
    margin: 0 0 10px;
}

.mode-col-desc {
    font-size: 14px;
    color: var(--text-muted);
    line-height: 1.7;
    margin: 0 0 20px;
    flex: 1;
}

/* The launch buttons are the BSI primary button, full width in their column. */
#hero .mode-btn {
    height: var(--control-h);
    width: 100%;
    padding: 0 24px;
    background: var(--red);
    color: #ffffff;
    border: none;
    border-radius: var(--radius);
    font-family: var(--font);
    font-size: 14px;
    font-weight: normal;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.3s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

#hero .mode-btn:hover { background: var(--red-dark); }

#hero .mode-btn.active {
    background: var(--red-dark);
}

/* ─── FAQ ────────────────────────────────────────────────────────────────*/

.hero-faq {
    border-top: 1px solid var(--divider);
    padding-top: 48px;
}

.hero-faq h2 {
    font-size: 22px;
    color: var(--text);
    margin: 0 0 24px;
}

.faq-list { display: flex; flex-direction: column; }

.faq-item { border-bottom: 1px solid var(--border-soft); }
.faq-item:first-child { border-top: 1px solid var(--border-soft); }

.faq-item summary {
    padding: 16px 36px 16px 0;
    font-size: 15px;
    color: var(--text);
    cursor: pointer;
    list-style: none;
    position: relative;
    line-height: 1.5;
    transition: color 0.2s;
}

.faq-item summary:hover { color: var(--red); }
.faq-item summary::-webkit-details-marker { display: none; }

/* Chevron built from a rotated border, so it matches the BSI select arrow
   without loading another asset. */
.faq-item summary::after {
    content: '';
    position: absolute;
    right: 10px;
    top: 50%;
    width: 9px;
    height: 9px;
    border-right: 2px solid var(--text-muted);
    border-bottom: 2px solid var(--text-muted);
    transform: translateY(-65%) rotate(45deg);
    transition: transform 0.2s ease;
}

.faq-item[open] summary::after { transform: translateY(-35%) rotate(-135deg); }

.faq-item p {
    padding: 0 36px 20px 0;
    margin: 0;
    font-size: 14px;
    line-height: 1.7;
    color: var(--text-muted);
}

.faq-item p a { color: var(--red); text-decoration: underline; }
.faq-item p a:hover { color: var(--red-dark); }

/* ─── Toolbar above the form ─────────────────────────────────────────────*/

#main-topbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    padding: 0 0 16px;
}

#back-to-start {
    height: 34px;
    padding: 0 14px;
    background: transparent;
    color: var(--text-muted);
    border: 1px solid var(--border-input);
    border-radius: var(--radius);
    font-family: var(--font);
    font-size: 13px;
    cursor: pointer;
    transition: all 0.3s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

#back-to-start:hover { color: var(--red); border-color: var(--red); }

/* ─── Comparison grid ────────────────────────────────────────────────────
   The BSI .data-table look applied to the criteria tables: faint gray
   header at normal weight, thin rules, faint gray row hover. The header
   sticks under the site header because a table can run past 30 rows. */

/* border-collapse stays "separate", unlike the BSI .data-table which
   collapses: position:sticky does not work on a <thead> inside a collapsed
   table, and the criteria grid needs the header pinned over 30+ rows. With
   border-spacing at 0 and one border per cell the result is visually the
   same 1px rule. */
#content table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

#content table + table { margin-top: 24px; }

#content thead {
    background: var(--bg);
    position: sticky;
    top: var(--site-header-h);
    z-index: 60;
}

.wizard-mode thead { position: static; }
.wizard-mode table + table { margin-top: 0; }

#content thead th {
    background: var(--bg);
    color: var(--text);
    font-weight: normal;
    font-size: 14px;
    padding: 14px 15px;
    text-align: left;
    vertical-align: middle;
    border-bottom: 1px solid var(--border);
}

#content tbody th,
#content tbody td {
    padding: 10px 15px;
    font-size: 14px;
    border-bottom: 1px solid var(--border-soft);
    vertical-align: middle;
}

#content tbody th {
    font-weight: normal;
    color: var(--text);
    text-align: left;
}

#content tbody tr:hover td,
#content tbody tr:hover th { background: var(--bg); }

/* Column widths: 3 visible columns plus the narrow "+" rail. */
#content thead th:nth-child(1),
#content tbody th:nth-child(1),
#content tbody td:nth-child(1) { width: 34%; }

#content thead th:nth-child(2),
#content tbody td:nth-child(2) { width: 28%; }

#content thead th:nth-child(3),
#content tbody td:nth-child(3) { width: 34%; }

/* ─── Third program column: collapsed rail, expandable ───────────────────
   Behaviour is unchanged from before the restyle: the header cell is a 40px
   "+" target, the body cells are removed from the table entirely, and
   table.show-c3 swaps both. Only the colors moved to BSI tokens. */

th.col-c3 {
    width: 40px !important;
    min-width: 40px;
    max-width: 40px;
    text-align: center;
    cursor: pointer;
    padding: 14px 4px !important;
    background: var(--divider);
    transition: width 0.25s ease, min-width 0.25s ease, max-width 0.25s ease, padding 0.25s ease;
}

th.col-c3:hover { background: var(--red-light); }

th.col-c3 .col-c3-plus {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    line-height: 1;
    color: var(--red);
}

th.col-c3 .col-c3-content { display: none; }

td.col-c3 { display: none !important; }

/* #content-prefixed to match the specificity of the collapsed widths above.
   Without the prefix these lose to #content thead th:nth-child(n) and the
   first three columns keep 34/28/34, leaving 4% for the fourth. */
#content .show-c3 thead th:nth-child(1),
#content .show-c3 tbody th:nth-child(1),
#content .show-c3 tbody td:nth-child(1) { width: 28%; }

#content .show-c3 thead th:nth-child(2),
#content .show-c3 tbody td:nth-child(2) { width: 22%; }

#content .show-c3 thead th:nth-child(3),
#content .show-c3 tbody td:nth-child(3) { width: 25%; }

.show-c3 th.col-c3 {
    width: 25% !important;
    min-width: 100px;
    max-width: none;
    text-align: left;
    cursor: default;
    padding: 14px 15px !important;
    background: var(--bg);
}

.show-c3 th.col-c3:hover { background: var(--bg); }
.show-c3 th.col-c3 .col-c3-plus { display: none !important; }

.show-c3 th.col-c3 .col-c3-content {
    display: flex;
    align-items: center;
    gap: 8px;
}

.show-c3 td.col-c3 { display: table-cell !important; }

/* Close cross: the BSI borderless icon button, at pill radius. */
.col-c3-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    background: transparent;
    border: 1px solid var(--border-input);
    border-radius: var(--radius-pill);
    color: var(--text-muted);
    font-size: 13px;
    font-family: var(--font);
    cursor: pointer;
    flex-shrink: 0;
    line-height: 1;
    padding: 0;
    transition: all 0.2s;
}

.col-c3-close:hover { color: var(--red); border-color: var(--red); }

/* Program name field inside a header cell: a BSI input at header density. */
.program-name-input {
    flex: 1;
    min-width: 0;
    height: 34px;
    padding: 0 10px;
    border: 1px solid var(--border-input);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text);
    font-family: var(--font);
    font-size: 14px;
    transition: border-color 0.3s;
}

.program-name-input::placeholder { color: var(--text-light); }
.program-name-input:focus { outline: none; border-color: var(--red); }

/* ─── Criteria controls inside the grid ──────────────────────────────────
   The foundation sets every select and number input to 42px full width,
   which is right for a form and too tall for 30 stacked rows. These two
   rules bring the grid controls down to the 34px in-table density while
   keeping the BSI border, radius, focus and baked-in chevron. */

#content td select,
#content td input[type="number"] {
    height: 34px;
    font-size: 14px;
}

#content td select { padding: 0 36px 0 12px; }
#content td input[type="number"] { padding: 0 12px; }

#content td input[type="number"]:disabled {
    background: var(--divider);
    color: var(--text-light);
    cursor: not-allowed;
}

.num-field { display: flex; flex-direction: column; gap: 6px; }

/* The foundation makes every label a block; this one sits inline with its
   checkbox, so it opts back out. */
.num-field .num-unknown {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 0;
    font-size: 13px;
    color: var(--text-muted);
    cursor: pointer;
}

.num-field .num-unknown input[type="checkbox"] {
    width: 14px;
    height: 14px;
    margin: 0;
}

/* ─── Tooltips ───────────────────────────────────────────────────────────
   Not in the foundation, so built from its tokens: --text fill, 4px radius,
   13px copy, the soft shadow. */

.tooltip-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    cursor: help;
    color: var(--text-light);
    vertical-align: text-bottom;
    margin-left: 4px;
    position: relative;
    flex-shrink: 0;
    transition: color 0.2s;
}

.tooltip-icon:hover { color: var(--red); }
.tooltip-icon svg { width: 14px; height: 14px; }

[data-tooltip] { position: relative; }

[data-tooltip]:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 9px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--text);
    color: var(--surface);
    padding: 10px 14px;
    border-radius: var(--radius);
    font-size: 13px;
    line-height: 1.5;
    white-space: normal;
    width: max-content;
    max-width: 320px;
    z-index: 500;
    pointer-events: none;
    box-shadow: var(--shadow-md);
}

[data-tooltip]:hover::before {
    content: '';
    position: absolute;
    bottom: calc(100% + 3px);
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: var(--text);
    z-index: 500;
    pointer-events: none;
}

th:first-child [data-tooltip]:hover::after { left: 0; transform: none; }
th:first-child [data-tooltip]:hover::before { left: 14px; transform: none; }

/* ─── Submit area ────────────────────────────────────────────────────────*/

.cta-section {
    padding: 40px 30px;
    text-align: center;
    background: var(--bg);
    border-top: 1px solid var(--border-soft);
}

.downloadButton {
    height: var(--control-h);
    padding: 0 32px;
    background: var(--red);
    color: #ffffff;
    border: none;
    border-radius: var(--radius);
    font-family: var(--font);
    font-size: 14px;
    font-weight: normal;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.3s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.downloadButton:hover { background: var(--red-dark); }

/* ─── Flash message ─────────────────────────────────────────────────────
   The BSI alert shape. The previous version carried a 4px amber stripe down
   its left edge, which the "never use a colored left border" rule forbids:
   the border is uniform now and the tint alone carries the meaning. */

.message {
    padding: 14px 18px;
    border-radius: var(--radius);
    margin-bottom: 20px;
    font-size: 14px;
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #fde68a;
}

/* ─── Autosave bar ───────────────────────────────────────────────────────*/

#autosave-bar {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 16px;
    background: var(--success-bg);
    border: 1px solid var(--success-bdr);
    border-radius: var(--radius);
    font-size: 13px;
    color: var(--success-text);
}

#autosave-clear {
    height: 30px;
    padding: 0 14px;
    background: transparent;
    border: 1px solid var(--success-text);
    color: var(--success-text);
    border-radius: var(--radius);
    cursor: pointer;
    font-size: 13px;
    font-family: var(--font);
    transition: all 0.3s;
}

#autosave-clear:hover { background: var(--success-text); color: var(--surface); }

/* ─── Wizard progress ────────────────────────────────────────────────────
   A progress bar is one of the elements the foundation does not show, so it
   is built from the tokens: a --border track, a burgundy fill, pill ends. */

#wizard-progress {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 200px;
}

#wizard-progress-bar {
    flex: 1;
    height: 6px;
    background: var(--border);
    border-radius: var(--radius-pill);
    overflow: hidden;
}

#wizard-progress-fill {
    height: 100%;
    background: var(--red);
    border-radius: var(--radius-pill);
    transition: width 0.4s ease;
}

#wizard-progress-text {
    font-size: 13px;
    color: var(--text-muted);
    white-space: nowrap;
}

/* ─── Wizard navigation ──────────────────────────────────────────────────*/

#wizard-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 24px 30px;
}

.wizard-nav-btn {
    height: var(--control-h);
    padding: 0 24px;
    background: transparent;
    color: var(--red);
    border: 1px solid var(--red);
    border-radius: var(--radius);
    font-family: var(--font);
    font-size: 14px;
    font-weight: normal;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.3s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.wizard-nav-btn:hover { background: var(--red); color: #ffffff; }

.wizard-nav-primary { background: var(--red); color: #ffffff; }
.wizard-nav-primary:hover { background: var(--red-dark); color: #ffffff; }

#wizard-step-label { font-size: 13px; color: var(--text-muted); }

/* ─── Wizard step transitions ────────────────────────────────────────────*/

.wizard-mode table[data-wizard-step] { animation: cpdReveal 0.3s ease; }

/* ─── Wizard step 0 ──────────────────────────────────────────────────────*/

#wizard-step0 { animation: cpdReveal 0.3s ease; }

.wizard-step0-inner {
    padding: 48px 32px;
    text-align: center;
    max-width: 640px;
    margin: 0 auto;
}

.wizard-step0-inner h2 {
    font-size: 24px;
    color: var(--text);
    margin: 0 0 12px;
}

.wizard-step0-inner p {
    font-size: 14px;
    color: var(--text-muted);
    line-height: 1.7;
    margin: 0 0 32px;
}

.wizard-step0-fields {
    display: flex;
    gap: 20px;
    margin-bottom: 32px;
    align-items: flex-end;
}

.wizard-step0-field { flex: 1; text-align: left; }

.wizard-step0-field label {
    display: block;
    font-size: 14px;
    color: var(--text);
    margin-bottom: 8px;
}

.wizard-step0-field-fixed { flex: none; }

/* The fixed institute name reads as a value, not a field: the BSI pill. */
.wizard-step0-bsi {
    height: var(--control-h);
    display: inline-flex;
    align-items: center;
    padding: 0 18px;
    background: var(--red-light);
    border: 1px solid var(--red-border);
    border-radius: var(--radius);
    font-size: 14px;
    color: var(--red);
    white-space: nowrap;
}

.wizard-step0-input {
    width: 100%;
    height: var(--control-h);
    padding: 0 15px;
    border: 1px solid var(--border-input);
    border-radius: var(--radius);
    background: var(--bg);
    font-size: 14px;
    font-family: var(--font);
    color: var(--text);
    transition: border-color 0.3s, background 0.3s;
}

.wizard-step0-input:focus {
    outline: none;
    border-color: var(--red);
    background: var(--surface);
}

.wizard-step0-btn {
    height: var(--control-h);
    padding: 0 32px;
    background: var(--red);
    color: #ffffff;
    border: none;
    border-radius: var(--radius);
    font-size: 14px;
    font-weight: normal;
    letter-spacing: 0.5px;
    font-family: var(--font);
    cursor: pointer;
    transition: all 0.3s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.wizard-step0-btn:hover { background: var(--red-dark); }

/* ─── Criterion explanation (wizard only) ────────────────────────────────
   In step-by-step mode the tooltip text is printed under the criterion
   instead of hidden behind an icon, so the icon is removed there. */

.wizard-mode tbody th .criterion-explanation {
    display: block;
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.6;
    margin-top: 4px;
}

.wizard-mode tbody th .tooltip-icon { display: none; }

/* ─── Resume dialog ──────────────────────────────────────────────────────
   Now the BSI modal: 8px radius, --shadow-lg, header / body / footer bands.
   It is a confirmation, so per the rules it is never a native confirm() and
   never closes on an overlay click.  */

#resume-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: cpdFade 0.2s ease;
}

@keyframes cpdFade { from { opacity: 0; } to { opacity: 1; } }

#resume-dialog {
    background: var(--surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    width: 100%;
    max-width: 480px;
    overflow: hidden;
}

#resume-dialog h3 {
    font-size: 18px;
    color: var(--text);
    margin: 0;
    padding: 25px 30px;
    border-bottom: 1px solid var(--border-soft);
}

#resume-dialog p {
    font-size: 14px;
    color: var(--text-muted);
    line-height: 1.6;
    margin: 0;
    padding: 30px;
}

#resume-dialog-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    padding: 20px 30px;
    border-top: 1px solid var(--border-soft);
}

.resume-btn {
    height: var(--control-h);
    padding: 0 24px;
    border-radius: var(--radius);
    font-size: 14px;
    font-weight: normal;
    letter-spacing: 0.5px;
    font-family: var(--font);
    cursor: pointer;
    transition: all 0.3s;
}

.resume-btn-primary { background: var(--red); color: #ffffff; border: none; }
.resume-btn-primary:hover { background: var(--red-dark); }

.resume-btn-secondary {
    background: transparent;
    color: var(--red);
    border: 1px solid var(--red);
}

.resume-btn-secondary:hover { background: var(--red); color: #ffffff; }

/* ─── Icon slots ─────────────────────────────────────────────────────────*/

[data-icon] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    line-height: 0;
}

[data-icon] svg { display: block; flex-shrink: 0; }

/* ─── Honeypot ───────────────────────────────────────────────────────────
   Off-screen rather than display:none, which bots skip. */

.hp-field {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ─── Screen-reader only ─────────────────────────────────────────────────*/

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ─── Print ──────────────────────────────────────────────────────────────
   The header was a solid navy band that had to be forced through with
   print-color-adjust. The BSI header is faint gray, so the print sheet no
   longer fights the browser over background printing. */

@media print {
    #header, #hero, #languages, .cta-section, .downloadButton, .no-print,
    #wizard-nav, #wizard-progress, #autosave-bar, #mode-selector,
    #main-topbar { display: none !important; }

    body { background: #ffffff; }
    #main { padding: 0; max-width: 100%; }
    #content { border: none; border-radius: 0; }

    #content thead { position: static !important; }

    #content thead th {
        background: var(--bg) !important;
        color: var(--text) !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    #content table, #content tr { page-break-inside: avoid; }
}

/* ─── Responsive ─────────────────────────────────────────────────────────*/

@media (max-width: 900px) {
    #hero #mode-selector { grid-template-columns: 1fr; gap: 28px; }
    .hero-highlights { grid-template-columns: 1fr; gap: 14px; }
}

@media (max-width: 768px) {
    :root { --site-header-h: 56px; }
    #header_content { padding: 0 16px; }
    #logotext { font-size: 15px; }
    #languages { gap: 12px; }
    #main { padding: 14px 12px; }

    #hero { padding: 32px 0 32px; }
    #hero-content { padding: 0 16px; }
    #hero h1 { font-size: 24px; }
    .hero-text { column-count: 1; }
    .hero-section-title { font-size: 18px; }
    .hero-faq h2 { font-size: 18px; }

    #main-topbar { padding: 0 0 14px; }

    #content thead th,
    #content tbody th,
    #content tbody td { padding: 10px 10px; font-size: 13px; }

    #content td select,
    #content td input[type="number"] { font-size: 13px; }
    #content td select { padding: 0 32px 0 10px; }

    /* The third column has no room on a phone, so the step 0 field that asks
       for its name is hidden too rather than collecting an unusable answer. */
    th.col-c3, td.col-c3 { display: none !important; }
    .wizard-step0-field-c3 { display: none !important; }

    .cta-section { padding: 28px 16px; }
    .downloadButton { width: 100%; }
    #wizard-nav { padding: 20px 16px; }
    .wizard-step0-inner { padding: 32px 20px; }
    .wizard-step0-fields { flex-direction: column; align-items: stretch; }
}

@media (max-width: 480px) {
    /* the header stacks the logo over the languages here, so it is taller */
    :root { --site-header-h: 88px; }
    #header_content { flex-direction: column; justify-content: center; gap: 8px; padding: 10px 12px; }
    #languages { justify-content: center; }
    #hero { padding: 24px 0 24px; }
    #hero-content { padding: 0 12px; }
    #hero h1 { font-size: 22px; }
    .faq-item summary { font-size: 14px; }
    #content thead th,
    #content tbody th,
    #content tbody td { padding: 8px; font-size: 13px; }
    #resume-dialog-actions { flex-direction: column; }
    .resume-btn { width: 100%; }
}


/* ==========================================================================
   DOWNLOAD PAGE
   ==========================================================================
   Previously an inline <style> block inside download.php. Moved here so the
   project has one stylesheet, per the BSI asset layout, and rebuilt on the
   tokens: the navy bands and the 6.5px mock type are gone.
   ========================================================================== */

@media print {
    .no-print { display: none !important; }
    .page-break { page-break-before: always; }
}

/* ─── Report head ────────────────────────────────────────────────────────*/

.pdf-header {
    text-align: center;
    margin: 40px 0 30px;
    padding: 0 20px 24px;
    border-bottom: 2px solid var(--divider);
}

.pdf-header h1 { font-size: 24px; color: var(--text); margin: 0 0 8px; }
.pdf-header p { color: var(--text-muted); font-size: 13px; margin: 0; }

.save-btn-wrap { text-align: center; margin-bottom: 30px; }

/* ─── Report tables ──────────────────────────────────────────────────────
   The BSI .data-table treatment: faint gray header at normal weight, thin
   rules, no zebra striping (the rules are enough and stripes fight the
   burgundy values). */

.pdf-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 30px;
}

.pdf-table th,
.pdf-table td {
    padding: 12px 15px;
    border-bottom: 1px solid var(--border-soft);
    font-size: 14px;
    text-align: left;
}

.pdf-table thead th {
    background: var(--bg);
    color: var(--text);
    font-weight: normal;
    border-bottom: 1px solid var(--border);
}

/* ─── Criteria index ─────────────────────────────────────────────────────*/

.index-section { padding: 40px 30px; }
.index-section h2 { font-size: 22px; color: var(--text); margin: 0 0 10px; }

.index-section .index-intro {
    color: var(--text-muted);
    font-size: 14px;
    margin-bottom: 30px;
    line-height: 1.7;
}

.index-item {
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--divider);
}

.index-item:last-child { border-bottom: none; }
.index-item h3 { font-size: 15px; color: var(--text); margin: 0 0 5px; }
.index-item p { font-size: 14px; color: var(--text-muted); line-height: 1.6; margin: 0; }

/* ─── Split screen tuning ────────────────────────────────────────────────
   The BSI split card, with the info panel centring the document preview
   instead of carrying copy. */

.split-card { margin-bottom: 20px; }

.split-info-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 40px;
}

.split-form .card-icon { margin-bottom: 24px; }
.split-form h2 { font-size: 24px; margin-bottom: 8px; }

.split-form .split-subtitle {
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1.6;
    margin: 0 0 32px;
}

.optin-group { margin: 20px 0 28px; }
.optin-group .check-field { margin-bottom: 12px; }
.optin-group .check-field:last-child { margin-bottom: 0; }
.optin-group .check-field label { font-size: 13px; color: var(--text-muted); }

/* ─── Document preview ───────────────────────────────────────────────────
   A scaled mock of the generated report. Its type is deliberately far below
   the BSI scale because it is a picture of a page, not text to read: the
   whole sheet is rendered at roughly a third of size. */

.pdf-mock {
    background: var(--surface);
    width: 100%;
    max-width: 360px;
    aspect-ratio: 210 / 297;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    padding: 24px 20px;
    overflow: hidden;
    position: relative;
    transform: perspective(800px) rotateY(-2deg);
    transition: transform 0.3s;
}

.pdf-mock:hover { transform: perspective(800px) rotateY(0deg); }

.pdf-mock-header {
    text-align: center;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--divider);
    margin-bottom: 12px;
}

.pdf-mock-header h3 {
    font-size: 11px;
    color: var(--text);
    margin: 0 0 3px;
    letter-spacing: 0.3px;
}

.pdf-mock-header p { font-size: 7px; color: var(--text-light); margin: 0; }

.pdf-mock-table { width: 100%; border-collapse: collapse; margin-bottom: 10px; }

.pdf-mock-table thead th {
    background: var(--bg);
    color: var(--text);
    padding: 4px 5px;
    font-size: 6.5px;
    font-weight: normal;
    text-align: left;
}

.pdf-mock-table tbody td {
    padding: 3px 5px;
    font-size: 6.5px;
    color: var(--text-muted);
    border-bottom: 1px solid var(--divider);
}

.pdf-mock-fade {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 80px;
    background: linear-gradient(transparent, var(--surface));
    pointer-events: none;
}

/* The corner ribbon: burgundy, uppercase, at the badge size. */
.pdf-mock-badge {
    position: absolute;
    top: 12px;
    right: -28px;
    background: var(--red);
    color: #ffffff;
    font-size: 11px;
    padding: 2px 32px;
    transform: rotate(45deg);
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

@media (max-width: 760px) {
    .split-info-preview { padding: 32px 20px; }
    .pdf-mock { max-width: 280px; transform: none; }
    .pdf-mock:hover { transform: none; }
}

@media (max-width: 480px) {
    .pdf-header { margin: 28px 0 24px; }
    .index-section { padding: 28px 18px; }
}


/* ==========================================================================
   UNSUBSCRIBE PAGE
   ==========================================================================
   One decision on a page of its own: a centred BSI card, the outcome carried
   by an alert. The confirm button is .btn-danger because the action removes
   the reader's record.
   ========================================================================== */

.unsub-page {
    max-width: 640px;
    margin: 0 auto;
    padding: 60px 20px;
}

.unsub-card h1 { font-size: 24px; margin-bottom: 20px; }
.unsub-card p { color: var(--text-muted); font-size: 14px; line-height: 1.7; }
.unsub-card .unsub-intro { margin-bottom: 28px; }
.unsub-card .unsub-back { margin-top: 32px; margin-bottom: 0; }
.unsub-card .alert-error,
.unsub-card .alert-success { margin-bottom: 0; }

@media (max-width: 480px) {
    .unsub-page { padding: 32px 14px; }
    .unsub-card { padding: 28px 22px; }
}


/* ==========================================================================
   MANAGER
   ==========================================================================
   Layout A: the faint gray sidebar with the section list, content on the
   right. Previously an 8KB inline <style> in manager.php with its own palette
   (#8b1538, #222730), its own button scale and uppercase bold table headers.
   The shell classes now come from the foundation above; what follows is only
   what the foundation does not describe: the KPI row, the language and status
   badges, the pager, and the two composer forms.
   ========================================================================== */

/* ─── Login notice ───────────────────────────────────────────────────────*/

.login-card .manager-setup-notice {
    text-align: left;
    line-height: 1.6;
    font-size: 13px;
}

.login-card .manager-setup-notice code {
    background: var(--surface);
    border: 1px solid var(--red-border);
    border-radius: var(--radius);
    padding: 1px 5px;
    font-family: var(--font);
}

/* ─── Sidebar extras ─────────────────────────────────────────────────────
   The foundation styles .sidebar, .nav-item and the collapsed rail. These
   add the pieces this app needs: the count on a nav row and the signed-in
   user above the logout button. */

.sidebar-nav .nav-item { justify-content: flex-start; }
.sidebar-nav .nav-label { flex: 1; }

.nav-count {
    background: var(--divider);
    color: var(--text-muted);
    border-radius: var(--radius-pill);
    padding: 1px 10px;
    font-size: 12px;
}

.nav-item.active .nav-count {
    background: rgba(255, 255, 255, 0.22);
    color: #ffffff;
}

/* The foundation lays the footer out as a flex row, name on the left and
   actions on the right. That assumes a short username: this app signs people
   in by email address, and a 35-character address in a 300px rail wrapped onto
   three lines and pushed the logout button past the sidebar edge. Stacked
   here, with the address truncated on one line and the full value on hover. */
.sidebar-footer {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
}

.sidebar-user {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    color: var(--text-muted);
    font-size: 13px;
}

/* min-width:0 on the flex child is what lets the ellipsis engage at all. */
.sidebar-user .user-name {
    min-width: 0;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-user [data-icon] { flex-shrink: 0; }

/* ─── KPI row ────────────────────────────────────────────────────────────
   Not a foundation component, so built from the tokens: a card surface, the
   label at caption size, the figure at the page-title size. No bold: the
   figure reads as the largest thing on the row because of its size. */

.stats-bar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.stat-card {
    background: var(--surface);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-card);
    padding: 22px;
}

.stat-card .stat-label {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 6px;
}

.stat-card .stat-value { font-size: 28px; color: var(--text); line-height: 1.2; }
/* real copy, so --text-muted rather than --text-light (2.78:1) */
.stat-card .stat-sub { font-size: 12px; color: var(--text-muted); margin-top: 5px; }

/* ─── Panels ─────────────────────────────────────────────────────────────*/

.panel {
    background: var(--surface);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-card);
}

.panel-header {
    padding: 20px 24px;
    border-bottom: 1px solid var(--border-soft);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.panel-header h2 { font-size: 18px; color: var(--text); }

.search-box {
    width: 260px;
    height: var(--control-h);
    padding: 0 15px;
    border: 1px solid var(--border-input);
    border-radius: var(--radius);
    background: var(--bg);
    font-family: var(--font);
    font-size: 14px;
    color: var(--text);
    transition: border-color 0.3s, background 0.3s;
}

.search-box:focus { outline: none; border-color: var(--red); background: var(--surface); }

/* ─── Manager tables ─────────────────────────────────────────────────────
   The .data-table treatment applied to the panels' bare tables: faint gray
   header at normal weight and in sentence case, thin rules, faint gray row
   hover. The previous version shouted in uppercase bold 11px. */

.table-wrap { overflow-x: auto; }

.panel table { width: 100%; border-collapse: collapse; }

.panel th,
.panel td {
    padding: 14px 15px;
    text-align: left;
    border-bottom: 1px solid var(--border-soft);
    font-size: 14px;
}

.panel th {
    background: var(--bg);
    color: var(--text);
    font-weight: normal;
    white-space: nowrap;
    cursor: pointer;
    transition: color 0.2s;
}

.panel th:hover { color: var(--red); }
.panel tbody tr:hover { background: var(--bg); }

/* An empty table is one muted row, per the content rules. */
.panel .empty-row td {
    text-align: center;
    color: var(--text-muted);
    padding: 40px 15px;
}

/* ─── Language and opt-in markers ────────────────────────────────────────
   Five languages, five tints, all at the badge size and normal weight. */

.lang-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.lang-en { background: #dbeafe; color: #1e40af; }
.lang-fr { background: var(--red-light); color: var(--red); }
.lang-de { background: #fef3c7; color: #92400e; }
.lang-es { background: #f3e8ff; color: #6b21a8; }
.lang-cn { background: #dcfce7; color: #166534; }

.optin-yes { color: var(--success-text); }
.optin-no { color: var(--text-light); }

a.link-pdf { color: var(--red); }
a.link-pdf:hover { text-decoration: underline; }

/* ─── Queue status ───────────────────────────────────────────────────────*/

.status-badge {
    display: inline-block;
    padding: 3px 12px;
    border-radius: var(--radius-pill);
    font-size: 12px;
}

.status-pending { background: #fef3c7; color: #92400e; }
.status-sent    { background: #dcfce7; color: #166534; }
.status-failed  { background: var(--red-light); color: var(--red); }

.queue-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* ─── Settings and composer forms ────────────────────────────────────────
   Both are plain BSI field stacks; the foundation already styles label,
   input, select and textarea, so only the spacing lives here. */

.settings-form { padding: 24px; max-width: 620px; }
.email-compose { padding: 24px; }

.settings-form .field,
.email-compose .field { margin-bottom: 22px; }

.settings-form .hint {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 6px;
}

.email-compose textarea { min-height: 220px; }

.email-filters { display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-end; }
.email-filters .field { flex: 1; min-width: 170px; margin-bottom: 0; }

.email-templates { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 22px; }

.template-btn {
    height: 34px;
    padding: 0 16px;
    background: transparent;
    border: 1px solid var(--border-input);
    border-radius: var(--radius-pill);
    cursor: pointer;
    font-family: var(--font);
    font-size: 13px;
    color: var(--text-muted);
    transition: all 0.3s;
}

.template-btn:hover,
.template-btn.active { background: var(--red); color: #ffffff; border-color: var(--red); }

.email-preview-count {
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 22px;
    padding: 12px 16px;
    background: var(--bg);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
}

/* ─── Feedback bands ─────────────────────────────────────────────────────
   Mapped onto the foundation's alert shapes; the old .error-msg /
   .success-msg / .settings-saved / .settings-error all said the same thing
   four different ways. */

.error-msg,
.settings-error {
    background: var(--red-light);
    color: var(--red);
    border: 1px solid var(--red-border);
    padding: 14px 18px;
    border-radius: var(--radius);
    margin-bottom: 20px;
    font-size: 14px;
}

.success-msg,
.settings-saved {
    background: var(--success-bg);
    color: var(--success-text);
    border: 1px solid var(--success-bdr);
    padding: 14px 18px;
    border-radius: var(--radius);
    margin-bottom: 20px;
    font-size: 14px;
}

/* ─── Pagination ─────────────────────────────────────────────────────────
   Another element the foundation does not show; same tokens, 34px controls. */

.pager {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    padding: 18px 24px;
    border-top: 1px solid var(--border-soft);
}

.pager-btn {
    height: 34px;
    padding: 0 14px;
    border: 1px solid var(--border-input);
    border-radius: var(--radius);
    font-size: 13px;
    color: var(--text-muted);
    background: var(--surface);
    display: inline-flex;
    align-items: center;
    transition: all 0.3s;
}

.pager-btn:hover { border-color: var(--red); color: var(--red); text-decoration: none; }

.pager-btn.active {
    background: var(--red);
    color: #ffffff;
    border-color: var(--red);
}

.pager-gap { color: var(--text-light); font-size: 13px; }
.pager-info { margin-left: auto; font-size: 12px; color: var(--text-muted); }

/* ─── Statistics ─────────────────────────────────────────────────────────*/

.chart-container { padding: 24px; }
.chart-title { font-size: 15px; color: var(--text); margin-bottom: 20px; }

.bar-chart {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    height: 160px;
    padding: 24px 0;
}

.bar {
    background: var(--red);
    border-radius: var(--radius) var(--radius) 0 0;
    min-width: 20px;
    flex: 1;
    position: relative;
    transition: background 0.3s;
}

.bar:hover { background: var(--red-dark); }

.bar-label {
    position: absolute;
    bottom: -22px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 11px;
    color: var(--text-light);
    white-space: nowrap;
}

.bar-value {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 12px;
    color: var(--text-muted);
}

@media (max-width: 900px) {
    .stats-bar { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 14px; }
    .search-box { width: 100%; }
    .panel th, .panel td { padding: 12px 10px; font-size: 13px; }
}