/* ==========================================================================
   Remotely console design tokens (EA Tech Partners brand)

   Loaded after plain Bootstrap 5.3 and before site.css.  Everything the
   console looks like is defined here as CSS variables for the two Bootstrap
   color modes, so switching theme is one attribute change on <html>
   (data-bs-theme="dark|light") and needs no reload.

   Brand: bright blue #1273FF, navy #0B1D33, slate #A8B0BC, white; Nunito.
   White on #1273FF is 4.27:1 (AA needs 4.5:1 for small text), so fills that carry
   text use --ea-blue-action (5.2:1 with white); the exact brand blue is for
   accents, borders, focus rings and the logo.
   Fonts and every asset are served from this server: no CDN at runtime.
   ========================================================================== */

/* ---- Typography: Nunito (variable font, self-hosted) -------------------- */
@font-face {
    font-family: "Nunito";
    font-style: normal;
    font-weight: 200 1000;
    font-display: swap;
    src: url("../fonts/nunito-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Nunito";
    font-style: normal;
    font-weight: 200 1000;
    font-display: swap;
    src: url("../fonts/nunito-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---- Brand constants (same in both modes) -------------------------------- */
:root {
    /* Height of the phone brand bar (sidebar collapsed); the nav drawer and topbar hang below it. */
    --zd-mobile-bar-height: 3.5rem;
    --ea-blue: #1273ff;
    --ea-blue-rgb: 18, 115, 255;
    --ea-blue-action: #0e64eb;         /* fills that carry text (white: 5.2:1) */
    --ea-blue-action-rgb: 14, 100, 235;
    --ea-blue-action-hover: #0b54c9;
    --ea-blue-action-active: #0a47a8;
    --ea-on-blue: #ffffff;
    --ea-navy: #0b1d33;
    --ea-navy-rgb: 11, 29, 51;
    --ea-slate: #a8b0bc;

    --bs-font-sans-serif: "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --bs-font-monospace: ui-monospace, "Cascadia Mono", Consolas, "Liberation Mono", monospace;
    --bs-body-font-family: var(--bs-font-sans-serif);
    --bs-body-font-size: 0.925rem;
    --bs-body-line-height: 1.5;
    --bs-border-radius: 0.5rem;
    --bs-border-radius-sm: 0.375rem;
    --bs-border-radius-lg: 0.75rem;

    --bs-primary: var(--ea-blue-action);
    --bs-primary-rgb: var(--ea-blue-action-rgb);
    --bs-focus-ring-color: rgba(var(--ea-blue-rgb), 0.35);

    /* Sidebar is charcoal in BOTH modes: the brand's dark surface. */
    --zd-sidebar-bg: #0b1d33;
    --zd-sidebar-text: #eef0f5;
    --zd-sidebar-muted: #8d9ab0;
    --zd-sidebar-link: #b9c3d4;
    --zd-sidebar-hover: rgba(255, 255, 255, 0.06);
    --zd-sidebar-active: #17314f;
    --zd-sidebar-border: #1d3452;
}

/* ---- Dark mode ----------------------------------------------------------- */
[data-bs-theme="dark"] {
    color-scheme: dark;
    --bs-body-bg: #0a1322;
    --bs-body-bg-rgb: 10, 19, 34;
    --bs-body-color: #e8e9ec;
    --bs-body-color-rgb: 232, 233, 236;
    --bs-emphasis-color: #ffffff;
    --bs-emphasis-color-rgb: 255, 255, 255;
    --bs-heading-color: #f4f4f6;
    --bs-secondary-color: #a1a3ab;
    --bs-secondary-color-rgb: 161, 163, 171;
    --bs-secondary-bg: #101a2d;
    --bs-secondary-bg-rgb: 16, 26, 45;
    --bs-tertiary-color: #7d8089;
    --bs-tertiary-color-rgb: 125, 128, 137;
    --bs-tertiary-bg: #18233a;
    --bs-tertiary-bg-rgb: 24, 35, 58;
    --bs-border-color: #24304a;
    --bs-border-color-translucent: rgba(255, 255, 255, 0.08);
    --bs-link-color: #6fa8ff;
    --bs-link-color-rgb: 111, 168, 255;
    --bs-link-hover-color: #9cc4ff;
    --bs-link-hover-color-rgb: 156, 196, 255;
    --bs-code-color: #9cc4ff;
    --bs-form-control-bg: #0c1527;
    --bs-form-control-disabled-bg: #131d30;
    --bs-highlight-bg: #3a3419;

    --bs-primary-text-emphasis: #9cc4ff;
    --bs-primary-bg-subtle: #12274a;
    --bs-primary-border-subtle: #1f4a8f;
    --bs-success: #4fd08c;
    --bs-success-rgb: 79, 208, 140;
    --bs-success-text-emphasis: #8fe3b8;
    --bs-success-bg-subtle: #102218;
    --bs-success-border-subtle: #1f5c3b;
    --bs-warning: #f5a524;
    --bs-warning-rgb: 245, 165, 36;
    --bs-warning-text-emphasis: #f5c06a;
    --bs-warning-bg-subtle: #2a2210;
    --bs-warning-border-subtle: #5a4415;
    --bs-danger: #f26d6d;
    --bs-danger-rgb: 242, 109, 109;
    --bs-danger-text-emphasis: #ff9d9d;
    --bs-danger-bg-subtle: #2a1414;
    --bs-danger-border-subtle: #6b2a2a;
    --bs-info: #6ea8ff;
    --bs-info-rgb: 110, 168, 255;
    --bs-info-text-emphasis: #a9ceff;
    --bs-info-bg-subtle: #16263b;
    --bs-info-border-subtle: #2f4f7f;

    --zd-surface: #0f192b;
    --zd-surface-2: #162137;
    --zd-code-bg: #0b1424;

    /* In dark mode the sidebar is a shade deeper than the page. */
    --zd-sidebar-bg: #08111f;
    --zd-sidebar-border: #1b2740;
    --zd-sidebar-active: #18233a;
    --zd-sidebar-muted: #7d879d;
    --zd-sidebar-link: #b0b8c9;
}

/* ---- Light mode ---------------------------------------------------------- */
[data-bs-theme="light"] {
    color-scheme: light;
    --bs-body-bg: #f5f6f8;
    --bs-body-bg-rgb: 245, 246, 248;
    --bs-body-color: #1e2130;
    --bs-body-color-rgb: 30, 33, 48;
    --bs-emphasis-color: #0b0d14;
    --bs-emphasis-color-rgb: 11, 13, 20;
    --bs-heading-color: #1e2130;
    --bs-secondary-color: #5b6172;
    --bs-secondary-color-rgb: 91, 97, 114;
    --bs-secondary-bg: #ffffff;
    --bs-secondary-bg-rgb: 255, 255, 255;
    --bs-tertiary-color: #7a8194;
    --bs-tertiary-color-rgb: 122, 129, 148;
    --bs-tertiary-bg: #eceef2;
    --bs-tertiary-bg-rgb: 236, 238, 242;
    --bs-border-color: #d9dce6;
    --bs-border-color-translucent: rgba(30, 33, 48, 0.1);
    /* Links: 5.8:1 on white panels and 5.3:1 on the page background. */
    --bs-link-color: #0b5ed7;
    --bs-link-color-rgb: 11, 94, 215;
    --bs-link-hover-color: #0a4cad;
    --bs-link-hover-color-rgb: 10, 76, 173;
    --bs-code-color: #0a4cad;
    --bs-form-control-bg: #ffffff;
    --bs-form-control-disabled-bg: #eceef2;

    --bs-primary-text-emphasis: #0a4cad;
    --bs-primary-bg-subtle: #e3eeff;
    --bs-primary-border-subtle: #b3d0ff;
    --bs-success: #1f9e60;
    --bs-success-rgb: 31, 158, 96;
    --bs-success-text-emphasis: #11683d;
    --bs-success-bg-subtle: #dff5ea;
    --bs-success-border-subtle: #a9e3c6;
    --bs-warning: #b76e00;
    --bs-warning-rgb: 183, 110, 0;
    --bs-warning-text-emphasis: #7a4a00;
    --bs-warning-bg-subtle: #fff3d6;
    --bs-warning-border-subtle: #f5d38a;
    --bs-danger: #c93b3b;
    --bs-danger-rgb: 201, 59, 59;
    --bs-danger-text-emphasis: #8f2626;
    --bs-danger-bg-subtle: #fde5e5;
    --bs-danger-border-subtle: #f3b3b3;
    --bs-info: #2f6fcf;
    --bs-info-rgb: 47, 111, 207;
    --bs-info-text-emphasis: #1c4a8f;
    --bs-info-bg-subtle: #e3eefc;
    --bs-info-border-subtle: #b3ccf3;

    --zd-surface: #ffffff;
    --zd-surface-2: #eceef2;
    --zd-code-bg: #eef0f4;
}

/* ---- Logos: light-background artwork on the light theme, dark-background on the dark ---- */
[data-bs-theme="dark"] .brand-on-light { display: none !important; }
[data-bs-theme="light"] .brand-on-dark { display: none !important; }

/* ---- Base ---------------------------------------------------------------- */
html, body {
    font-family: var(--bs-body-font-family);
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
    overscroll-behavior-y: contain;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-weight: 600;
    letter-spacing: -0.01em;
}

hr {
    border-top: 1px solid var(--bs-border-color);
    opacity: 1;
}

code, pre, .font-monospace {
    font-family: var(--bs-font-monospace);
}

/* Numbers line up in tables and KPI cards. */
.tabular, table, .badge {
    font-variant-numeric: tabular-nums;
}

/* ---- Primary controls: brand blue with white text ------------------------ */
.btn-primary {
    --bs-btn-color: var(--ea-on-blue);
    --bs-btn-bg: var(--ea-blue-action);
    --bs-btn-border-color: var(--ea-blue-action);
    --bs-btn-hover-color: var(--ea-on-blue);
    --bs-btn-hover-bg: var(--ea-blue-action-hover);
    --bs-btn-hover-border-color: var(--ea-blue-action-hover);
    --bs-btn-active-color: var(--ea-on-blue);
    --bs-btn-active-bg: var(--ea-blue-action-active);
    --bs-btn-active-border-color: var(--ea-blue-action-active);
    --bs-btn-disabled-color: var(--ea-on-blue);
    --bs-btn-disabled-bg: var(--ea-blue-action);
    --bs-btn-disabled-border-color: var(--ea-blue-action);
    --bs-btn-focus-shadow-rgb: var(--ea-blue-action-rgb);
    font-weight: 600;
}

.btn-outline-primary {
    --bs-btn-color: var(--bs-primary-text-emphasis);
    --bs-btn-border-color: var(--ea-blue);
    --bs-btn-hover-color: var(--ea-on-blue);
    --bs-btn-hover-bg: var(--ea-blue-action);
    --bs-btn-hover-border-color: var(--ea-blue-action);
    --bs-btn-active-color: var(--ea-on-blue);
    --bs-btn-active-bg: var(--ea-blue-action-active);
    --bs-btn-active-border-color: var(--ea-blue-action-active);
    --bs-btn-disabled-color: var(--bs-primary-text-emphasis);
    --bs-btn-disabled-border-color: var(--ea-blue);
    --bs-btn-focus-shadow-rgb: var(--ea-blue-rgb);
}

.btn-secondary {
    --bs-btn-color: var(--bs-body-color);
    --bs-btn-bg: var(--bs-tertiary-bg);
    --bs-btn-border-color: var(--bs-border-color);
    --bs-btn-hover-color: var(--bs-emphasis-color);
    --bs-btn-hover-bg: var(--bs-secondary-bg);
    --bs-btn-hover-border-color: var(--bs-border-color);
    --bs-btn-active-color: var(--bs-emphasis-color);
    --bs-btn-active-bg: var(--bs-secondary-bg);
    --bs-btn-active-border-color: var(--bs-border-color);
    --bs-btn-disabled-color: var(--bs-tertiary-color);
    --bs-btn-disabled-bg: var(--bs-tertiary-bg);
    --bs-btn-disabled-border-color: var(--bs-border-color);
}

/* Destructive trigger (style guide A.6).  Bootstrap's fixed #dc3545 text is
   3.96:1 on the dark panels; the dark theme's own danger colour is 6.1:1
   there.  Light keeps Bootstrap's red (4.5:1 on white), and hover keeps the
   solid red with white text in both themes. */
[data-bs-theme="dark"] .btn-outline-danger {
    --bs-btn-color: var(--bs-danger);
    --bs-btn-border-color: var(--bs-danger);
    --bs-btn-disabled-color: var(--bs-danger);
    --bs-btn-disabled-border-color: var(--bs-danger);
}

/* Same for the outline secondary (Reset password, the reveal eye): its fixed
   #6c757d text is 3.7:1 on the dark panels; the theme's secondary text
   colour is about 8:1.  Light keeps Bootstrap's grey (4.7:1 on white). */
[data-bs-theme="dark"] .btn-outline-secondary {
    --bs-btn-color: var(--bs-secondary-color);
    --bs-btn-disabled-color: var(--bs-secondary-color);
}

/* Bootstrap's .table-danger keeps its light pink fill and black text in the
   dark theme, so buttons and code in those rows (Access Control's failed
   sign-ins) were unreadable.  Use the theme's subtle danger colours there. */
[data-bs-theme="dark"] .table-danger {
    --bs-table-color: var(--bs-body-color);
    --bs-table-bg: var(--bs-danger-bg-subtle);
    --bs-table-border-color: var(--bs-danger-border-subtle);
    --bs-table-striped-bg: var(--bs-danger-bg-subtle);
    --bs-table-striped-color: var(--bs-body-color);
    --bs-table-active-bg: var(--bs-danger-border-subtle);
    --bs-table-active-color: var(--bs-body-color);
    --bs-table-hover-bg: var(--bs-danger-border-subtle);
    --bs-table-hover-color: var(--bs-body-color);
    color: var(--bs-table-color);
    border-color: var(--bs-table-border-color);
}

/* Light theme: Bootstrap red on the pink row is 3.4:1; the dark red reads. */
[data-bs-theme="light"] .table-danger .btn-outline-danger {
    --bs-btn-color: var(--bs-danger-text-emphasis);
    --bs-btn-border-color: var(--bs-danger-text-emphasis);
}

.btn-link {
    --bs-btn-color: var(--bs-link-color);
    --bs-btn-hover-color: var(--bs-link-hover-color);
    text-decoration: none;
}

.btn {
    --bs-btn-border-radius: var(--bs-border-radius);
}

.text-primary { color: var(--bs-primary-text-emphasis) !important; }
.bg-primary { background-color: var(--ea-blue-action) !important; color: var(--ea-on-blue); }
.border-primary { border-color: var(--ea-blue) !important; }
.text-bg-primary, .badge.text-bg-primary { background-color: var(--ea-blue-action) !important; color: var(--ea-on-blue) !important; }

.form-check-input:checked,
.form-check-input:checked[type="checkbox"],
.form-check-input:checked[type="radio"] {
    background-color: var(--ea-blue-action);
    border-color: var(--ea-blue-action);
}

/* Unticked boxes keep a visible edge in dark mode (the theme border is close
   to the panels there), and disabled ones stay readable: with Bootstrap s 0.5
   opacity the boxes a delegate cannot change all but disappeared. */
[data-bs-theme="dark"] .form-check-input:not(:checked) {
    border-color: var(--bs-tertiary-color);
}

.form-check-input:disabled {
    opacity: 0.75;
}

.form-control, .form-select {
    background-color: var(--bs-form-control-bg);
    border-color: var(--bs-border-color);
    color: var(--bs-body-color);
}

.form-control:focus, .form-select:focus, .form-check-input:focus {
    border-color: var(--ea-blue);
    box-shadow: 0 0 0 0.25rem var(--bs-focus-ring-color);
}

.form-floating > label {
    color: var(--bs-secondary-color);
}

.nav-pills .nav-link.active,
.list-group-item.active,
.dropdown-item.active,
.dropdown-item:active,
.page-item.active .page-link {
    background-color: var(--ea-blue);
    border-color: var(--ea-blue);
    color: var(--ea-on-blue);
}

.progress-bar { background-color: var(--ea-blue); }
.form-range::-webkit-slider-thumb { background-color: var(--ea-blue); }
.form-range::-moz-range-thumb { background-color: var(--ea-blue); }

/* ---- Surfaces ------------------------------------------------------------ */
.card {
    --bs-card-bg: var(--zd-surface);
    --bs-card-border-color: var(--bs-border-color);
    --bs-card-border-radius: var(--bs-border-radius-lg);
    --bs-card-cap-bg: transparent;
}

.table {
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--bs-border-color-translucent);
    --bs-table-striped-bg: rgba(var(--bs-body-color-rgb), 0.03);
    --bs-table-hover-bg: rgba(var(--bs-body-color-rgb), 0.05);
}

.modal-content {
    background-color: var(--zd-surface);
    border-color: var(--bs-border-color);
    border-radius: var(--bs-border-radius-lg);
}

.dropdown-menu {
    --bs-dropdown-bg: var(--zd-surface);
    --bs-dropdown-border-color: var(--bs-border-color);
    --bs-dropdown-link-color: var(--bs-body-color);
    --bs-dropdown-link-hover-bg: var(--bs-tertiary-bg);
    --bs-dropdown-link-hover-color: var(--bs-emphasis-color);
}

.toast {
    --bs-toast-bg: var(--zd-surface);
    --bs-toast-border-color: var(--bs-border-color);
    --bs-toast-color: var(--bs-body-color);
}

.alert-primary {
    --bs-alert-color: var(--bs-primary-text-emphasis);
    --bs-alert-bg: var(--bs-primary-bg-subtle);
    --bs-alert-border-color: var(--bs-primary-border-subtle);
}

.jumbotron {
    padding: 2rem;
    background-color: var(--zd-surface);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-lg);
}

/* ---- Carried over from the old theme files ------------------------------- */
.console-prompt { color: var(--bs-info-text-emphasis); }
.console-output { color: var(--bs-success-text-emphasis); }

/* ---- Status dots and pills used by the console --------------------------- */
.zd-dot {
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background-color: var(--bs-tertiary-color);
    vertical-align: middle;
}
.zd-dot.online { background-color: var(--bs-success); }
.zd-dot.warning { background-color: var(--bs-warning); }
.zd-dot.danger { background-color: var(--bs-danger); }

.zd-code {
    background-color: var(--zd-code-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    font-family: var(--bs-font-monospace);
    font-size: 0.85rem;
    padding: 0.75rem 0.875rem;
}

/* Theme toggle: the active option is marked by contrast, not by brand color. */
.theme-toggle .btn {
    color: var(--bs-tertiary-color);
}
.theme-toggle .btn.active {
    background-color: var(--bs-tertiary-bg);
    color: var(--bs-emphasis-color);
}

/* The pages use .text-info for help and hint text. Keep it calm instead of
   bright blue, so the only accent on a page is the brand green. */
.text-info {
    color: var(--bs-secondary-color) !important;
}

/* ---- Utility ------------------------------------------------------------- */
.zd-muted { color: var(--bs-secondary-color); }
.zd-mono { font-family: var(--bs-font-monospace); }

/* "Sign in with Microsoft" button, after Microsoft's branding guidelines:
   the four-square logo, 15px semibold Segoe UI, 41px tall; a dark (#2f2f2f)
   variant on the dark theme and the white variant (#5e5e5e text, #8c8c8c
   border) on the light theme.  The logo colors are fixed by the brand and
   must not follow the theme. */
.ms-signin {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    height: 41px;
    padding: 0 12px;
    border-radius: 4px;
    font-family: "Segoe UI", "Segoe UI Web", Nunito, system-ui, sans-serif;
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    text-decoration: none;
    background-color: #2f2f2f;
    color: #fff;
    border: 1px solid #2f2f2f;
    transition: background-color 0.12s ease;
}

.ms-signin:hover {
    background-color: #3b3b3b;
    color: #fff;
}

.ms-signin:focus-visible {
    outline: 2px solid var(--ea-blue);
    outline-offset: 2px;
}

.ms-signin-logo {
    width: 21px;
    height: 21px;
    flex-shrink: 0;
}

[data-bs-theme="light"] .ms-signin {
    background-color: #fff;
    color: #5e5e5e;
    border-color: #8c8c8c;
}

[data-bs-theme="light"] .ms-signin:hover {
    background-color: #f3f3f3;
    color: #5e5e5e;
}

/* ---- Page building blocks (shared by the console pages) -------------------
   One look for every section: a page head, KPI cards, panels with a title and
   an optional subtitle, setting rows (label and help on the left, the control
   on the right), small tags, removable chips.  Dashboard and Real-Time
   Performance use the same shapes in their scoped styles. */
.zd-page {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding-bottom: 4rem;
}

.zd-page-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
}

.zd-page-title {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 600;
}

.zd-page-sub {
    margin-top: 0.2rem;
    font-size: 0.85rem;
    color: var(--bs-secondary-color);
}

.zd-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
    gap: 1rem;
}

.zd-kpi {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 1rem;
    border-radius: var(--bs-border-radius-lg);
    background-color: var(--zd-surface);
    border: 1px solid var(--bs-border-color);
    min-width: 0;
}

.zd-kpi-label {
    font-size: 0.8rem;
    color: var(--bs-secondary-color);
}

.zd-kpi-value {
    font-size: 1.85rem;
    font-weight: 600;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.zd-kpi-of {
    font-size: 1rem;
    font-weight: 500;
    /* Secondary, not tertiary: tertiary is 3.9:1 on white. */
    color: var(--bs-secondary-color);
}

.zd-kpi-note {
    font-size: 0.75rem;
    color: var(--bs-secondary-color);
}

.zd-kpi-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.zd-kpi-warning { border-color: var(--bs-warning-border-subtle); }
.zd-kpi-warning .zd-kpi-value { color: var(--bs-warning-text-emphasis); }

.zd-grid-2,
.zd-grid-3 {
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 1200px) {
    .zd-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .zd-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.zd-panel {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1.1rem 1.25rem;
    border-radius: var(--bs-border-radius-lg);
    background-color: var(--zd-surface);
    border: 1px solid var(--bs-border-color);
    min-width: 0;
}

.zd-panel-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem 1rem;
}

.zd-panel-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
}

.zd-panel-sub {
    margin-top: 0.15rem;
    font-size: 0.8rem;
    color: var(--bs-secondary-color);
}

.zd-panel-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
}

.zd-panel-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--bs-border-color-translucent);
}

.zd-settings { display: flex; flex-direction: column; }

.zd-setting {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.5rem 1.5rem;
    padding: 0.7rem 0;
    border-top: 1px solid var(--bs-border-color-translucent);
}

    .zd-setting:first-child { border-top: none; padding-top: 0.2rem; }

.zd-setting-stack { grid-template-columns: minmax(0, 1fr); }

.zd-setting-label {
    font-weight: 500;
    font-size: 0.9rem;
}

.zd-setting-help {
    margin-top: 0.15rem;
    font-size: 0.78rem;
    line-height: 1.4;
    color: var(--bs-secondary-color);
}

.zd-setting .form-switch .form-check-input {
    width: 2.4em;
    height: 1.3em;
    margin-top: 0;
    cursor: pointer;
}

.zd-setting-number { width: 7rem; }
.zd-setting-select { width: auto; min-width: 11rem; }

.zd-form-grid {
    display: grid;
    gap: 0.9rem 1.25rem;
    grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 900px) {
    .zd-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.zd-field {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-width: 0;
}

.zd-tag {
    display: inline-block;
    padding: 0.05rem 0.45rem;
    border-radius: 999px;
    border: 1px solid var(--bs-border-color);
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--bs-secondary-color);
    vertical-align: middle;
}

.zd-tag-green {
    border-color: var(--ea-blue);
    color: var(--bs-success-text-emphasis);
}

.zd-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    min-height: 1.9rem;
}

.zd-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    max-width: 100%;
    padding: 0.2rem 0.3rem 0.2rem 0.6rem;
    border-radius: var(--bs-border-radius);
    background-color: var(--zd-surface-2);
    border: 1px solid var(--bs-border-color);
    font-size: 0.82rem;
    overflow-wrap: anywhere;
}

.zd-chip-remove {
    border: none;
    background: none;
    padding: 0 0.3rem;
    line-height: 1;
    font-size: 1.05rem;
    color: var(--bs-secondary-color);
    border-radius: var(--bs-border-radius-sm);
}

    .zd-chip-remove:hover,
    .zd-chip-remove:focus-visible {
        color: var(--bs-danger-text-emphasis);
        background-color: var(--bs-tertiary-bg);
    }

.zd-empty-inline {
    font-size: 0.85rem;
    color: var(--bs-secondary-color);
    align-self: center;
}

.zd-user-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
    gap: 0.25rem 1rem;
    max-height: 20rem;
    overflow-y: auto;
}

.zd-user-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.25rem;
    border-radius: var(--bs-border-radius);
    min-width: 0;
    cursor: pointer;
}

    .zd-user-row:hover { background-color: var(--bs-tertiary-bg); }

.zd-user-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.88rem;
}

/* Floating save (style guide A.6 model 1, A.16): a pill that holds the
   page's only Save, fixed at the bottom right.  Preferences and
   Configuration use it. */
.zd-save-float {
    position: fixed;
    right: 2.5rem;
    /* Clear of the version label ("V 1.7.x") in the corner. */
    bottom: 2rem;
    z-index: 1020;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem;
    border-radius: 999px;
    background-color: var(--zd-surface);
    border: 1px solid var(--bs-border-color);
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.25);
}

    .zd-save-float .btn {
        border-radius: 999px;
        padding-left: 1.1rem;
        padding-right: 1.1rem;
    }

/* A page with a floating save keeps room below its last row (A.13). */
.zd-page:has(.zd-save-float) {
    padding-bottom: 6rem;
}

@media (max-width: 640px) {
    .zd-setting { grid-template-columns: minmax(0, 1fr); }
    .zd-setting-number, .zd-setting-select { width: 100%; }
    /* 1rem in from the side; high enough to clear the version label
       ("V 1.7.x", MainLayout) in the bottom-right corner. */
    .zd-save-float { right: 1rem; bottom: 1.75rem; }

    /* Panel feet stack one full-width button per row.  column-reverse reads
       the row from the right: the primary or confirming action (rightmost on
       wider screens) comes first and Cancel last; a destructive trigger kept
       at the far left (me-auto) ends up last too (A.6). */
    .zd-panel-foot {
        flex-direction: column-reverse;
        align-items: stretch;
    }

        .zd-panel-foot > .btn {
            width: 100%;
        }

        /* An empty status line (the SMTP test result before a test) takes
           no row. */
        .zd-panel-foot > :empty {
            display: none;
        }
}

/* ---- Callouts (style guide A.8; the callout part of A.16) -----------------
   A note inside a panel: the warning before a destructive step, a hint, a
   problem that needs action.  Bootstrap's .alert stays for page-level
   banners.  Generalised from the Dashboard's .callout. */
.zd-callout { padding: .6rem .8rem; border-radius: var(--bs-border-radius); font-size: .85rem; border: 1px solid; }
.zd-callout-info    { background: var(--bs-info-bg-subtle);    color: var(--bs-info-text-emphasis);    border-color: var(--bs-info-border-subtle); }
.zd-callout-warning { background: var(--bs-warning-bg-subtle); color: var(--bs-warning-text-emphasis); border-color: var(--bs-warning-border-subtle); }
.zd-callout-danger  { background: var(--bs-danger-bg-subtle);  color: var(--bs-danger-text-emphasis);  border-color: var(--bs-danger-border-subtle); }
/* A bold first line and a short paragraph or two.  Links take the callout's
   colour: the green link colour is too faint on the tinted backgrounds. */
.zd-callout p { margin: .3rem 0 0; }
.zd-callout > :first-child { margin-top: 0; }
.zd-callout a { color: inherit; font-weight: 600; text-decoration: underline; }
/* The same for links in the older callouts and alerts (Dashboard, Downloads):
   the green link colour stays under 4.5:1 on their tinted backgrounds. */
.callout a:not(.btn), .alert a:not(.btn) { color: inherit; font-weight: 600; text-decoration: underline; }

/* ---- Toasts beside the floating save -------------------------------------
   The toast stack (ToastHarness) shares the bottom-right corner with
   .zd-save-float.  While a page shows one, the stack moves above it, lined
   up with its right edge, so a "Saved" toast never hides behind Save. */
body:has(.zd-save-float) {
    --zd-toast-bottom: 6rem;
    --zd-toast-right: 2.5rem;
}

@media (max-width: 640px) {
    body:has(.zd-save-float) { --zd-toast-right: 1rem; --zd-toast-bottom: 5.75rem; }
}

/* ---- More page building blocks (style guide A.16) ------------------------
   Groups inside a panel or a modal, panels that hold a table edge to edge,
   empty states, read-only facts, table heads, and the warning and danger
   tags.  Users & Groups was the first page to need them. */
.zd-subhead { margin: .35rem 0 0; font-size: .72rem; font-weight: 600; letter-spacing: .06em;
              text-transform: uppercase; color: var(--bs-secondary-color); }

.zd-tag-warning { border-color: var(--bs-warning-border-subtle); color: var(--bs-warning-text-emphasis); }
.zd-tag-danger  { border-color: var(--bs-danger-border-subtle);  color: var(--bs-danger-text-emphasis); }

.zd-empty { padding: 1.25rem 0; font-size: .9rem; color: var(--bs-secondary-color); }

.zd-facts { display: grid; grid-template-columns: minmax(8rem, auto) minmax(0, 1fr); gap: .45rem 1rem; margin: 0; font-size: .9rem; }
.zd-facts dt { font-weight: 400; font-size: .8rem; color: var(--bs-secondary-color); padding-top: .1rem; }
.zd-facts dd { margin: 0; overflow-wrap: anywhere; min-width: 0; }

.zd-table th { font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--bs-secondary-color); }

/* A panel whose body is a table: the head and foot keep the panel padding,
   the table runs edge to edge with its first and last columns lined up with
   the head, and the last row leaves the dividing line to the foot.  Notes
   and empty states between head and table keep the side padding. */
.zd-panel-flush { padding: 0; gap: 0; overflow: hidden; }
.zd-panel-flush > .zd-panel-head, .zd-panel-flush > .zd-panel-foot { padding: 1.1rem 1.25rem; }
.zd-panel-flush > .zd-callout { margin: 0 1.25rem 1rem; }
.zd-panel-flush > .zd-empty { padding: .25rem 1.25rem 1.25rem; }
.zd-panel-flush .zd-table > :not(caption) > * > :first-child { padding-left: 1.25rem; }
.zd-panel-flush .zd-table > :not(caption) > * > :last-child { padding-right: 1.25rem; }
.zd-panel-flush .zd-table > tbody > tr:last-child > * { border-bottom-width: 0; }

/* A long table scrolls inside its panel instead of stretching the page
   (A.7).  It goes on the .table-responsive wrapper, never as a max-height on
   the <table>.  The column heads stay in view while the rows scroll; their
   line is a shadow because a collapsed border does not move with them. */
.zd-scroll { max-height: 32rem; overflow-y: auto; }
.zd-scroll > .table > thead > tr > th { position: sticky; top: 0; z-index: 1; background-color: var(--zd-surface);
                                         border-bottom-width: 0; box-shadow: inset 0 -1px 0 var(--bs-table-border-color); }