/* ============================================================================
   NETZERO BASE
   ----------------------------------------------------------------------------
   Global type, Bootstrap 4 / AdminLTE 3 restyled onto the design tokens in
   public/css/tokens.css, the app chrome (sidebar, top bar, page head) and the
   shared design components (KPI tiles, chips, attention list, segmented
   control …). Every colour, radius and font here is a var(--nz-*) — never a
   raw value — so the theme editor at /admin/settings reaches all of it.

   Font sizes used anywhere in this file: 11 / 12 / 13 / 13.5 / 14 / 15 / 16 /
   18 / 20 / 26 / 28 px. Radii: --nz-r-xs … --nz-r-2xl and --nz-r-pill.
   ============================================================================ */

/* ── Type and page ─────────────────────────────────────────────────────── */

body,
.nz-app {
    font-family: var(--nz-font);
    font-size: var(--nz-fs);
    line-height: 1.5;
    color: var(--nz-ink);
    background-color: var(--nz-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a {
    color: var(--nz-primary);
}

a:hover,
a:focus {
    color: var(--nz-link-hover);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--nz-ink);
    font-weight: 700;
    letter-spacing: -.005em;
}

h1, .h1 { font-size: 26px; font-weight: 800; letter-spacing: -.015em; }
h2, .h2 { font-size: 20px; }
h3, .h3 { font-size: 18px; }
h4, .h4 { font-size: 16px; }
h5, .h5 { font-size: 15px; }
h6, .h6 { font-size: 14px; }

small,
.small {
    font-size: 12px;
}

b,
strong {
    font-weight: 700;
}

hr {
    border-top-color: var(--nz-divider);
}

code {
    font-family: var(--nz-mono);
    font-size: 12.5px;
    color: var(--nz-ink);
    background: var(--nz-bg-soft);
    border: 1px solid var(--nz-divider);
    border-radius: var(--nz-r-xs);
    padding: 1px 6px;
}

pre code {
    background: none;
    border: 0;
    padding: 0;
    color: inherit;
}

.mono,
.text-monospace,
.font-monospace {
    font-family: var(--nz-mono) !important;
}

.mono {
    font-size: 12.5px;
}

.muted,
.text-muted {
    color: var(--nz-muted) !important;
}

/* Text colours collapse onto the token pairs */
.text-success,
.text-primary { color: var(--nz-primary) !important; }
.text-danger  { color: var(--nz-danger-fg) !important; }
.text-warning { color: var(--nz-warn-fg) !important; }
.text-info    { color: var(--nz-info-fg) !important; }
.text-secondary { color: var(--nz-muted) !important; }
.text-dark    { color: var(--nz-ink) !important; }
.text-white,
.text-light   { color: var(--nz-white) !important; }

/* Background utilities read as tinted tiles, not solid slabs */
.bg-white     { background-color: var(--nz-bg) !important; }
.bg-light     { background-color: var(--nz-bg-soft) !important; }
.bg-success,
.bg-primary   { background-color: var(--nz-ok-bg) !important; color: var(--nz-ok-fg) !important; }
.bg-info      { background-color: var(--nz-info-bg) !important; color: var(--nz-info-fg) !important; }
.bg-warning   { background-color: var(--nz-warn-bg) !important; color: var(--nz-warn-fg) !important; }
.bg-danger    { background-color: var(--nz-danger-bg) !important; color: var(--nz-danger-fg) !important; }
.bg-secondary,
.bg-gray      { background-color: var(--nz-neutral-bg) !important; color: var(--nz-neutral-fg) !important; }
.bg-dark      { background-color: var(--nz-ink) !important; color: var(--nz-white) !important; }

.border       { border-color: var(--nz-border) !important; }
.border-top,
.border-bottom,
.border-left,
.border-right { border-color: var(--nz-border) !important; }

.rounded      { border-radius: var(--nz-r-sm) !important; }
.shadow,
.shadow-sm,
.elevation-1,
.elevation-2,
.elevation-3 { box-shadow: none !important; }

:focus-visible {
    outline: 2px solid var(--nz-focus);
    outline-offset: 1px;
}

/* ── Layout ────────────────────────────────────────────────────────────── */

.content-wrapper {
    background-color: var(--nz-bg);
}

.content-wrapper > .content {
    padding: 0 32px 48px;
}

.content-wrapper > .content > .container-fluid,
.content-wrapper > .content-header > .container-fluid {
    padding-left: 0;
    padding-right: 0;
}

/* Grid gutters follow the design's 16px gap */
.content-wrapper .row {
    margin-left: -8px;
    margin-right: -8px;
}

.content-wrapper .row > [class*="col"] {
    padding-left: 8px;
    padding-right: 8px;
}

.content-wrapper .form-row {
    margin-left: -8px;
    margin-right: -8px;
}

.content-wrapper .form-row > [class*="col"] {
    padding-left: 8px;
    padding-right: 8px;
}

.main-footer {
    background: var(--nz-bg);
    border-top: 1px solid var(--nz-border);
    color: var(--nz-faint);
    font-size: 13px;
    padding: 14px 32px;
}

@media (max-width: 767.98px) {
    .content-wrapper > .content { padding: 0 16px 32px; }
    .main-footer { padding: 14px 16px; }
}

/* A row that carries data-href opens its detail page on click
   (see public/js/row-link.js). */
tr[data-href] { cursor: pointer; }

/* Detail pages — action button spacing */
.detail-actions .btn {
    margin-top: 8px;
}

/* ── Sidebar (templates/side_menu.php) ─────────────────────────────────── */

.nz-app .main-sidebar,
.nz-app .main-sidebar::before {
    width: var(--nz-sidebar-w);
}

@media (min-width: 992px) {
    .nz-app:not(.sidebar-collapse) .content-wrapper,
    .nz-app:not(.sidebar-collapse) .main-header,
    .nz-app:not(.sidebar-collapse) .main-footer {
        margin-left: var(--nz-sidebar-w);
    }

    .nz-app.sidebar-mini.sidebar-collapse .main-sidebar,
    .nz-app.sidebar-mini.sidebar-collapse .main-sidebar::before {
        width: 4.6rem;
    }

    .nz-app.sidebar-mini.sidebar-collapse .main-sidebar:hover,
    .nz-app.sidebar-mini.sidebar-collapse .main-sidebar:hover::before {
        width: var(--nz-sidebar-w);
    }
}

@media (max-width: 991.98px) {
    .nz-app:not(.sidebar-open) .main-sidebar,
    .nz-app:not(.sidebar-open) .main-sidebar::before {
        margin-left: calc(-1 * var(--nz-sidebar-w));
    }
}

.main-sidebar.nz-side {
    display: flex;
    flex-direction: column;
    background: var(--nz-bg);
    border-right: 1px solid var(--nz-border);
    box-shadow: none !important;
    font-size: 14px;
}

.nz-side-brand {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 20px 20px 16px;
    flex: none;
}

.nz-side-logo {
    display: inline-flex;
    min-width: 0;
}

.nz-side-logo img {
    height: 34px;
    width: auto;
    max-width: 168px;
    object-fit: contain;
    object-position: left center;
}

.nz-admin-tag {
    flex: none;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: var(--nz-r-xs);
    background: var(--nz-ink);
    color: var(--nz-white);
    line-height: 1.4;
}

.nz-app .nz-side .sidebar,
.nz-app.layout-fixed .wrapper .nz-side .sidebar {
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
    overflow-y: auto;
    padding: 0 12px 20px;
}

.nz-brand-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    margin: 0 0 8px;
    border: 1px solid var(--nz-border);
    border-radius: var(--nz-r-md);
    background: var(--nz-bg);
}

.nz-brand-card-mark {
    flex: none;
    width: 32px;
    height: 32px;
    border-radius: var(--nz-r-sm);
    background: var(--nz-ink);
    color: var(--nz-white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 13px;
}

.nz-brand-card-text {
    flex: 1;
    min-width: 0;
}

.nz-brand-card-name {
    display: block;
    font-weight: 700;
    color: var(--nz-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nz-brand-card-meta {
    display: block;
    font-size: 12px;
    color: var(--nz-muted);
}

.nz-side .nav-sidebar {
    gap: 2px;
}

.nz-side .nav-sidebar .nav-item {
    margin-bottom: 0;
}

.nz-side .nav-header,
.nz-side .nav-sidebar > .nav-header {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--nz-faint);
    padding: 16px 10px 6px;
    background: none;
}

.nz-app .nz-side .nav-sidebar .nav-link,
.nz-app.sidebar-mini .nz-side .nav-sidebar .nav-link {
    display: flex;
    align-items: center;
    gap: 10px;
    width: auto;
    padding: 8px 10px;
    margin: 0;
    border-radius: var(--nz-r-sm);
    color: var(--nz-text);
    font-weight: 500;
    background: transparent;
    box-shadow: none;
    transition: background-color .12s ease, color .12s ease;
}

.nz-side .nav-sidebar .nav-link > p {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    margin: 0;
    white-space: nowrap;
}

.nz-side .nav-sidebar .nav-link > p > .right {
    position: static;
    margin-left: auto;
}

.nz-side .nav-sidebar .nav-link .nav-icon {
    flex: none;
    width: 18px;
    margin: 0;
    font-size: 16px;
    text-align: center;
    color: currentColor;
}

.nz-side .nav-sidebar .nav-link:hover {
    background: var(--nz-hover);
    color: var(--nz-ink);
}

.nz-app .nz-side .nav-sidebar .nav-link.active,
.nz-app .nz-side .nav-pills .nav-link.active {
    background: var(--nz-primary-tint);
    color: var(--nz-primary);
    font-weight: 700;
    box-shadow: none;
}

/* An open group's parent is a heading, not the page you are on */
.nz-app .nz-side .nav-item.has-treeview > .nav-link.active {
    background: transparent;
    color: var(--nz-ink);
}

.nz-side .nav-treeview {
    padding-left: 12px;
}

.nz-side .nav-item.has-treeview > .nav-link > p > .right {
    font-size: 12px;
    color: var(--nz-faint);
    transition: transform .15s ease;
}

.nz-nav-count {
    margin-left: auto;
    font-style: normal;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.5;
    padding: 1px 7px;
    border-radius: var(--nz-r-pill);
    background: var(--nz-danger-bg);
    color: var(--nz-danger-fg);
}

/* Collapsed (icon-only) sidebar on desktop */
@media (min-width: 992px) {
    .nz-app.sidebar-collapse .nz-side:not(:hover) .nav-header,
    .nz-app.sidebar-collapse .nz-side:not(:hover) .nz-brand-card,
    .nz-app.sidebar-collapse .nz-side:not(:hover) .nz-admin-tag,
    .nz-app.sidebar-collapse .nz-side:not(:hover) .nav-link > p {
        display: none;
    }

    .nz-app.sidebar-collapse .nz-side:not(:hover) .nz-side-brand {
        padding: 20px 0 16px;
        justify-content: center;
    }

    /* Only the leaf mark, which sits at the left of the logo */
    .nz-app.sidebar-collapse .nz-side:not(:hover) .nz-side-logo img {
        width: 34px;
        object-fit: cover;
    }

    .nz-app.sidebar-collapse .nz-side:not(:hover) .nav-link {
        justify-content: center;
    }
}

/* Dark sidebar — the theme editor's only alternative to the design's light one */
.nz-sidebar-dark .main-sidebar.nz-side {
    background: var(--nz-ink);
    border-right-color: transparent;
}

.nz-sidebar-dark .nz-side-logo {
    background: var(--nz-white);
    border-radius: var(--nz-r-sm);
    padding: 4px 8px;
}

.nz-sidebar-dark .nz-side-logo img { height: 28px; }

.nz-sidebar-dark .nz-admin-tag {
    background: var(--nz-white);
    color: var(--nz-ink);
}

.nz-sidebar-dark .nz-side .nav-header { color: rgba(255, 255, 255, .5); }

.nz-app.nz-sidebar-dark .nz-side .nav-sidebar .nav-link { color: rgba(255, 255, 255, .74); }

.nz-app.nz-sidebar-dark .nz-side .nav-sidebar .nav-link:hover {
    background: rgba(255, 255, 255, .08);
    color: var(--nz-white);
}

.nz-app.nz-sidebar-dark .nz-side .nav-sidebar .nav-link.active {
    background: rgba(255, 255, 255, .12);
    color: var(--nz-white);
}

.nz-app.nz-sidebar-dark .nz-side .nav-item.has-treeview > .nav-link.active {
    background: transparent;
}

.nz-sidebar-dark .nz-brand-card {
    background: transparent;
    border-color: rgba(255, 255, 255, .14);
}

.nz-sidebar-dark .nz-brand-card-mark {
    background: var(--nz-white);
    color: var(--nz-ink);
}

.nz-sidebar-dark .nz-brand-card-name { color: var(--nz-white); }
.nz-sidebar-dark .nz-brand-card-meta { color: rgba(255, 255, 255, .6); }

/* ── Top bar (templates/top_menu.php) ──────────────────────────────────── */

:root { --app-navbar-h: 65px; }

.main-header.nz-top {
    position: relative;
    height: var(--app-navbar-h);
    flex-wrap: nowrap;
    padding: 12px 32px;
    background-color: var(--nz-bg);
    border-bottom: 1px solid var(--nz-border);
    box-shadow: none;
}

.nz-top .navbar-nav {
    align-items: center;
    height: 100%;
}

.nz-top .nav-item {
    display: flex;
    align-items: center;
}

.nz-top-right {
    gap: 10px;
}

.nz-ibtn,
.main-header.nz-top .nav-link.nz-ibtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid var(--nz-border);
    border-radius: var(--nz-r-sm);
    background: var(--nz-bg);
    color: var(--nz-text);
    font-size: 16px;
    text-decoration: none;
}

.nz-ibtn:hover,
.nz-ibtn:focus,
.main-header.nz-top .nav-link.nz-ibtn:hover {
    background: var(--nz-hover);
    color: var(--nz-ink);
    text-decoration: none;
}

.nz-user {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 2px 4px;
    border-radius: var(--nz-r-sm);
    color: var(--nz-ink);
    text-decoration: none;
}

.nz-user:hover,
.nz-user:focus {
    color: var(--nz-ink);
    text-decoration: none;
}

.nz-avatar {
    flex: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--nz-primary-tint);
    color: var(--nz-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 13px;
}

.nz-avatar--ink {
    background: var(--nz-ink);
    color: var(--nz-white);
}

.nz-user-text {
    min-width: 0;
    line-height: 1.3;
}

.nz-user-name {
    display: block;
    font-weight: 700;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nz-user-role {
    display: block;
    font-size: 12px;
    color: var(--nz-muted);
}

/* While an admin is inside a brand the bar carries one button naming the
   mode; it opens a short menu to swap mode, exit the brand, or cancel. */
.imp-nav { margin-right: 6px; }

.imp-nav-manage { --imp-fg: var(--nz-danger-fg); --imp-bg: var(--nz-danger-bg); }
.imp-nav-view   { --imp-fg: var(--nz-warn-fg);   --imp-bg: var(--nz-warn-bg); }

.imp-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 14px;
    border: 1px solid transparent;
    border-radius: var(--nz-r-sm);
    background-color: var(--imp-bg);
    color: var(--imp-fg);
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}

.imp-btn:hover,
.imp-nav.show .imp-btn {
    border-color: var(--imp-fg);
    color: var(--imp-fg);
}

.imp-btn-caret { font-size: 11px; opacity: .8; }

.imp-pop {
    z-index: 1050;
    min-width: 248px;
    margin-top: 8px;
}

.imp-pop-brand {
    padding: 4px 10px 8px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--nz-divider);
    overflow: hidden;
    color: var(--nz-faint);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.imp-pop-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    border: 0;
    border-radius: var(--nz-r-xs);
    background: none;
    color: var(--nz-ink);
    font-size: 13px;
    font-weight: 600;
    text-align: left;
    text-decoration: none;
}

.imp-pop-item i {
    flex: 0 0 auto;
    width: 16px;
    margin-top: 2px;
    color: var(--nz-muted);
    text-align: center;
    font-size: 13px;
}

.imp-pop-item > span { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }

.imp-pop-item small {
    margin-top: 1px;
    color: var(--nz-muted);
    font-size: 12px;
    font-weight: 400;
    white-space: normal;
}

.imp-pop-item:hover,
.imp-pop-item:focus {
    background-color: var(--nz-hover);
    color: var(--nz-ink);
    text-decoration: none;
}

.imp-pop-exit,
.imp-pop-exit i { color: var(--imp-fg); }
.imp-pop-exit:hover { background-color: var(--imp-bg); color: var(--imp-fg); }

.imp-pop-cancel { color: var(--nz-muted); }

@media (max-width: 767.98px) {
    .main-header.nz-top { padding: 12px 16px; }
    .nz-user-text,
    .imp-btn span { display: none; }
    .imp-btn { padding: 0 12px; }
}

@media print {
    .imp-nav { display: none; }
}

/* ── Page head (templates/page_header.php) ─────────────────────────────── */

.content-wrapper > .content-header.page-header {
    padding: 28px 32px 20px;
}

.page-header-bar {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 16px;
}

.page-header-titles {
    flex: 1 1 260px;
    min-width: 0;
}

.page-title {
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -.015em;
    line-height: 1.25;
    margin: 0;
    color: var(--nz-ink);
    overflow-wrap: anywhere;
}

.page-subtitle {
    margin: 4px 0 0;
    font-size: 14px;
    color: var(--nz-muted);
}

.breadcrumb.page-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    background: none;
    padding: 0;
    margin: 0 0 4px;
    font-size: 12px;
    color: var(--nz-muted);
}

.page-breadcrumb .breadcrumb-item,
.page-breadcrumb .breadcrumb-item.active {
    color: var(--nz-muted);
}

.page-breadcrumb .breadcrumb-item a {
    color: var(--nz-muted);
    text-decoration: none;
}

.page-breadcrumb .breadcrumb-item a:hover {
    color: var(--nz-primary);
}

.page-breadcrumb .breadcrumb-item + .breadcrumb-item {
    padding-left: 6px;
}

.page-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    content: "\203A";
    padding-right: 6px;
    color: var(--nz-faint-2);
}

/* Back button — an arrow only, the same 40px square as the top-bar buttons */
.page-back {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--nz-border-input);
    border-radius: var(--nz-r-sm);
    background: var(--nz-bg);
    color: var(--nz-ink);
    font-size: 15px;
    text-decoration: none;
}

.page-back:hover,
.page-back:focus {
    background: var(--nz-hover-2);
    color: var(--nz-ink);
    text-decoration: none;
}

.page-actions {
    flex: 0 0 auto;
    margin-left: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.page-actions .btn {
    margin: 0;
}

@media (max-width: 767.98px) {
    .content-wrapper > .content-header.page-header { padding: 20px 16px 16px; }
    .page-title { font-size: 20px; }
}

@media (max-width: 575.98px) {
    .page-actions {
        width: 100%;
        margin-left: 0;
    }
}

/* ── Buttons ───────────────────────────────────────────────────────────── */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 16px;
    border: 1px solid transparent;
    border-radius: var(--nz-r-sm);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    box-shadow: none !important;
    transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}

.btn > i,
.btn > .fas,
.btn > .far,
.btn > .fab {
    font-size: 15px;
}

/* The flex gap spaces icon and label; drop the old margin utilities */
.btn > i.mr-1, .btn > i.mr-2, .btn > i.ml-1, .btn > i.ml-2 { margin: 0 !important; }

.btn:focus-visible {
    outline: 2px solid var(--nz-focus);
    outline-offset: 1px;
}

.btn.disabled,
.btn:disabled {
    opacity: .5;
}

.btn-block {
    display: flex;
    width: 100%;
}

.btn-sm,
.btn-group-sm > .btn {
    min-height: 32px;
    padding: 0 12px;
    gap: 6px;
    font-size: 13px;
    border-radius: var(--nz-r-sm);
}

.btn-sm > i,
.btn-group-sm > .btn > i { font-size: 13px; }

.btn-xs {
    min-height: 26px;
    padding: 0 8px;
    gap: 4px;
    font-size: 12px;
    border-radius: var(--nz-r-xs);
}

.btn-lg,
.btn-group-lg > .btn {
    min-height: 48px;
    padding: 0 20px;
    font-size: 15px;
    border-radius: var(--nz-r-md);
}

/* Primary */
.btn-success,
.btn-primary,
.btn-nz {
    background-color: var(--nz-primary);
    border-color: var(--nz-primary);
    color: var(--nz-on-primary);
}

.btn-success:hover, .btn-success:focus, .btn-success:active, .btn-success.active,
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active,
.btn-nz:hover, .btn-nz:focus,
.btn-success:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled):active {
    background-color: var(--nz-primary-hover);
    border-color: var(--nz-primary-hover);
    color: var(--nz-on-primary);
}

.btn-success.disabled, .btn-success:disabled,
.btn-primary.disabled, .btn-primary:disabled {
    background-color: var(--nz-primary);
    border-color: var(--nz-primary);
    color: var(--nz-on-primary);
}

/* Secondary — every outline, grey, light and info variant */
.btn-secondary,
.btn-default,
.btn-light,
.btn-info,
.btn-dark,
.btn-outline-secondary,
.btn-outline-primary,
.btn-outline-success,
.btn-outline-info,
.btn-outline-dark,
.btn-outline-light,
.btn-nz-secondary {
    background-color: var(--nz-bg);
    border-color: var(--nz-border-input);
    color: var(--nz-ink);
}

.btn-secondary:hover, .btn-secondary:focus,
.btn-default:hover, .btn-default:focus,
.btn-light:hover, .btn-light:focus,
.btn-info:hover, .btn-info:focus,
.btn-dark:hover, .btn-dark:focus,
.btn-outline-secondary:hover, .btn-outline-secondary:focus,
.btn-outline-primary:hover, .btn-outline-primary:focus,
.btn-outline-success:hover, .btn-outline-success:focus,
.btn-outline-info:hover, .btn-outline-info:focus,
.btn-outline-dark:hover, .btn-outline-dark:focus,
.btn-outline-light:hover, .btn-outline-light:focus,
.btn-nz-secondary:hover, .btn-nz-secondary:focus,
.btn-secondary:not(:disabled):not(.disabled):active,
.btn-outline-secondary:not(:disabled):not(.disabled):active,
.btn-outline-success:not(:disabled):not(.disabled):active,
.btn-outline-primary:not(:disabled):not(.disabled):active,
.btn-outline-info:not(:disabled):not(.disabled):active,
.btn-outline-secondary:not(:disabled):not(.disabled).active,
.btn-outline-success:not(:disabled):not(.disabled).active,
.btn-outline-primary:not(:disabled):not(.disabled).active {
    background-color: var(--nz-hover-2);
    border-color: var(--nz-border-input);
    color: var(--nz-ink);
}

/* A selected toggle in a secondary group reads as primary tint */
.btn-group > .btn.active,
.btn-group-toggle > .btn.active {
    background-color: var(--nz-primary-tint) !important;
    border-color: var(--nz-primary) !important;
    color: var(--nz-primary) !important;
}

/* Danger */
.btn-danger,
.btn-outline-danger {
    background-color: var(--nz-danger-fg);
    border-color: var(--nz-danger-fg);
    color: var(--nz-white);
}

.btn-danger:hover, .btn-danger:focus,
.btn-outline-danger:hover, .btn-outline-danger:focus,
.btn-danger:not(:disabled):not(.disabled):active,
.btn-outline-danger:not(:disabled):not(.disabled):active {
    background-color: var(--nz-danger-fg);
    border-color: var(--nz-danger-fg);
    color: var(--nz-white);
    filter: brightness(.9);
}

/* Warning — secondary shape, warning ink */
.btn-warning,
.btn-outline-warning {
    background-color: var(--nz-bg);
    border-color: var(--nz-border-input);
    color: var(--nz-warn-fg);
}

.btn-warning:hover, .btn-warning:focus,
.btn-outline-warning:hover, .btn-outline-warning:focus,
.btn-warning:not(:disabled):not(.disabled):active {
    background-color: var(--nz-warn-bg);
    border-color: var(--nz-border-input);
    color: var(--nz-warn-fg);
}

.btn-link {
    color: var(--nz-primary);
    font-weight: 700;
    min-height: 0;
    padding-left: 0;
    padding-right: 0;
}

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

.btn-tool {
    color: var(--nz-muted);
    min-height: 0;
    padding: 4px 8px;
}

.btn-tool:hover { color: var(--nz-ink); }

/* Public and auth screens use the larger shape */
.btn-nz-lg {
    min-height: 48px;
    padding: 0 22px;
    font-size: 15px;
    border-radius: var(--nz-r-md);
}

/* ── Cards ─────────────────────────────────────────────────────────────── */

.card {
    border: 1px solid var(--nz-border);
    border-radius: var(--nz-r-lg);
    background: var(--nz-bg);
    box-shadow: none;
    margin-bottom: 20px;
}

/* No coloured tops, no coloured headers: every card variant is the design card */
.card.card-outline,
.card[class*="card-"] {
    border-top: 1px solid var(--nz-border);
}

.card[class*="card-"]:not(.card-outline) > .card-header,
.card.card-outline > .card-header {
    background-color: transparent;
    color: var(--nz-ink);
}

.card[class*="card-"]:not(.card-outline) > .card-header a,
.card[class*="card-"]:not(.card-outline) > .card-header .btn-tool {
    color: var(--nz-muted);
}

.card-header {
    padding: 14px 20px;
    border-bottom: 1px solid var(--nz-border);
    background-color: transparent;
}

.card-header:first-child {
    border-radius: var(--nz-r-lg) var(--nz-r-lg) 0 0;
}

.card-title,
.card-header > h2,
.card-header > h3 {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.6;
    color: var(--nz-ink);
    margin: 0;
}

.card-title > i,
.card-title > .fas,
.card-title > .far {
    color: var(--nz-muted);
    font-size: 14px;
}

/* A section heading that also says what the section holds */
.card-title-sub {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    font-weight: 400;
    color: var(--nz-muted);
}

.card-body {
    padding: 20px;
}

.card-footer {
    padding: 14px 20px;
    background-color: var(--nz-bg-head);
    border-top: 1px solid var(--nz-border);
}

.card-footer:last-child {
    border-radius: 0 0 var(--nz-r-lg) var(--nz-r-lg);
}

.card > .table-responsive:last-child,
.card > .card-body.p-0:last-child {
    border-radius: 0 0 var(--nz-r-lg) var(--nz-r-lg);
}

.card > .table-responsive > .table:last-child tbody tr:last-child td,
.card > .table:last-child tbody tr:last-child td,
.card-body.p-0 > .table:last-child tbody tr:last-child td,
.card-body.p-0 > .table-responsive > .table:last-child tbody tr:last-child td {
    border-bottom: 0;
}

/* "View all →" style link in a card head */
.nz-card-link,
.card-header .card-link {
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
}

/* Info box and small box (AdminLTE) as design tiles */
.info-box {
    border: 1px solid var(--nz-border);
    border-radius: var(--nz-r-lg);
    box-shadow: none;
    background: var(--nz-bg);
    padding: 16px 20px;
    min-height: 0;
    gap: 14px;
    align-items: center;
    margin-bottom: 20px;
}

.info-box .info-box-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--nz-r-md);
    font-size: 16px;
    background: var(--nz-primary-tint);
    color: var(--nz-primary);
}

.info-box .info-box-content {
    padding: 0;
}

.info-box .info-box-text {
    font-size: 13px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    color: var(--nz-muted);
}

.info-box .info-box-number {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--nz-ink);
    margin-top: 2px;
}

.small-box {
    border: 1px solid var(--nz-border);
    border-radius: var(--nz-r-lg);
    box-shadow: none;
    background: var(--nz-bg) !important;
    color: var(--nz-ink) !important;
}

.small-box > .inner { padding: 18px 20px; }
.small-box h3 { font-size: 28px; font-weight: 800; letter-spacing: -.02em; color: var(--nz-ink); }
.small-box p { font-size: 13px; font-weight: 600; color: var(--nz-muted); }
.small-box .icon { color: var(--nz-primary-tint); }
.small-box .icon > i { font-size: 48px; top: 18px; }

.small-box > .small-box-footer {
    background: var(--nz-bg-head);
    color: var(--nz-primary) !important;
    border-top: 1px solid var(--nz-border);
    font-size: 13px;
    font-weight: 700;
    border-radius: 0 0 var(--nz-r-lg) var(--nz-r-lg);
}

/* Callouts — one quiet shape for an aside */
.callout {
    border: 0;
    border-left: 3px solid var(--nz-border-input);
    border-radius: var(--nz-r-md);
    background: var(--nz-bg-soft);
    box-shadow: none;
    padding: 14px 16px;
}

.callout.callout-success { border-left-color: var(--nz-primary); }
.callout.callout-info    { border-left-color: var(--nz-info-fg); }
.callout.callout-warning { border-left-color: var(--nz-warn-dot); }
.callout.callout-danger  { border-left-color: var(--nz-danger-fg); }

.callout h5,
.callout h4 { font-size: 15px; font-weight: 700; }

/* ── Tables ────────────────────────────────────────────────────────────── */

.table {
    font-size: 13.5px;
    color: var(--nz-ink);
}

.table thead th,
.table > thead > tr > th {
    font-size: 12px;
    font-weight: 600;
    color: var(--nz-muted);
    text-transform: none;
    letter-spacing: 0;
    padding: 10px 20px;
    background: var(--nz-bg-head);
    border-top: 0;
    border-bottom: 1px solid var(--nz-border);
    white-space: nowrap;
    vertical-align: middle;
}

.table td,
.table tbody th {
    padding: 12px 20px;
    border-top: 0;
    border-bottom: 1px solid var(--nz-divider);
    vertical-align: middle;
}

.table tbody tr:last-child td,
.table tbody tr:last-child th {
    border-bottom: 0;
}

.table-sm thead th,
.table-sm td,
.table-sm tbody th {
    padding: 8px 12px;
}

.table-hover tbody tr:hover {
    background-color: var(--nz-row-hover);
    color: inherit;
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: var(--nz-bg-soft);
}

.table-bordered,
.table-bordered td,
.table-bordered th {
    border-color: var(--nz-divider);
}

.thead-light th,
.table .thead-light th {
    background: var(--nz-bg-head);
    color: var(--nz-muted);
    border-color: var(--nz-border);
}

.table-success, .table-success > td, .table-success > th { background-color: var(--nz-ok-bg); }
.table-warning, .table-warning > td, .table-warning > th { background-color: var(--nz-warn-bg); }
.table-danger,  .table-danger > td,  .table-danger > th  { background-color: var(--nz-danger-bg); }
.table-info,    .table-info > td,    .table-info > th    { background-color: var(--nz-info-bg); }
.table-active,  .table-active > td,  .table-active > th  { background-color: var(--nz-hover); }

.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ── Chips (and Bootstrap badges, which render as chips) ───────────────── */

.badge,
.nz-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 9px;
    border-radius: var(--nz-r-pill);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
    vertical-align: middle;
}

.nz-chip > i:empty,
.nz-chip-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex: none;
}

.badge-success,
.nz-chip--ok      { background-color: var(--nz-ok-bg);      color: var(--nz-ok-fg); }
.badge-warning,
.nz-chip--run     { background-color: var(--nz-warn-bg);    color: var(--nz-warn-fg); }
.badge-info,
.badge-primary,
.nz-chip--q       { background-color: var(--nz-info-bg);    color: var(--nz-info-fg); }
.badge-danger,
.nz-chip--bad     { background-color: var(--nz-danger-bg);  color: var(--nz-danger-fg); }
.badge-secondary,
.badge-light,
.badge-dark,
.badge-default,
.nz-chip--n       { background-color: var(--nz-neutral-bg); color: var(--nz-neutral-fg); }

a.badge:hover,
a.badge:focus { filter: brightness(.96); text-decoration: none; }

.badge-pill { border-radius: var(--nz-r-pill); }

/* ── Forms ─────────────────────────────────────────────────────────────── */

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

.form-group > label,
.form-group label:not(.custom-control-label):not(.form-check-label):not(.btn),
.form-label,
.col-form-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--nz-ink);
    margin-bottom: 6px;
}

.form-control,
.custom-select {
    height: 40px;
    padding: 0 14px;
    border: 1px solid var(--nz-border-input);
    border-radius: var(--nz-r-sm);
    background-color: var(--nz-bg);
    color: var(--nz-ink);
    font-size: 14px;
    box-shadow: none;
}

.custom-select {
    padding-right: 32px;
}

textarea.form-control,
select.form-control[multiple],
select.form-control[size] {
    height: auto;
    padding: 10px 14px;
}

.form-control-sm,
.custom-select-sm {
    height: 32px;
    padding: 0 10px;
    font-size: 13px;
    border-radius: var(--nz-r-sm);
}

.form-control-lg,
.custom-select-lg {
    height: 46px;
    font-size: 15px;
    border-radius: var(--nz-r-md);
}

.form-control::placeholder {
    color: var(--nz-faint-2);
}

.form-control:focus,
.custom-select:focus,
.custom-file-input:focus ~ .custom-file-label {
    outline: 2px solid var(--nz-focus);
    outline-offset: 1px;
    border-color: var(--nz-primary);
    box-shadow: none;
}

.form-control:disabled,
.form-control[readonly] {
    background-color: var(--nz-bg-soft);
    color: var(--nz-text);
}

.form-text,
.form-group small.text-muted,
.form-group .form-text.text-muted {
    font-size: 12px;
    color: var(--nz-faint) !important;
}

.input-group-text {
    background: var(--nz-bg-soft);
    border-color: var(--nz-border-input);
    color: var(--nz-muted);
    font-size: 14px;
    border-radius: var(--nz-r-sm);
}

.input-group > .form-control:focus {
    z-index: 3;
}

.custom-file-label {
    height: 40px;
    padding: 0 14px;
    line-height: 38px;
    border-color: var(--nz-border-input);
    border-radius: var(--nz-r-sm);
    color: var(--nz-muted);
}

.custom-file-label::after {
    height: 38px;
    line-height: 38px;
    padding: 0 14px;
    background: var(--nz-bg-soft);
    color: var(--nz-ink);
    font-weight: 600;
}

input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--nz-primary);
}

.form-check-input {
    width: 18px;
    height: 18px;
    margin-top: 2px;
}

.form-check-label {
    font-size: 14px;
    color: var(--nz-text);
    padding-left: 6px;
}

.custom-control-label::before {
    border-color: var(--nz-border-input);
}

.custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--nz-primary);
    border-color: var(--nz-primary);
}

.custom-control-input:focus ~ .custom-control-label::before {
    box-shadow: none;
    outline: 2px solid var(--nz-focus);
    outline-offset: 1px;
}

.custom-control-input:focus:not(:checked) ~ .custom-control-label::before {
    border-color: var(--nz-primary);
}

.custom-switch .custom-control-input:checked ~ .custom-control-label::after {
    background-color: var(--nz-white);
}

.form-control.is-invalid,
.was-validated .form-control:invalid,
.custom-select.is-invalid {
    border-color: var(--nz-danger-fg);
}

.invalid-feedback {
    color: var(--nz-danger-fg);
    font-size: 12px;
}

.form-control.is-valid,
.was-validated .form-control:valid {
    border-color: var(--nz-primary);
}

.valid-feedback {
    color: var(--nz-primary);
    font-size: 12px;
}

/* Select2 */
.select2-container--bootstrap4 .select2-selection,
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    min-height: 40px;
    border: 1px solid var(--nz-border-input);
    border-radius: var(--nz-r-sm);
    background-color: var(--nz-bg);
    font-size: 14px;
}

.select2-container--bootstrap4 .select2-selection--single,
.select2-container--default .select2-selection--single {
    height: 40px !important;
}

.select2-container--bootstrap4 .select2-selection--single .select2-selection__rendered,
.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 38px;
    padding-left: 14px;
    color: var(--nz-ink);
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 38px;
}

.select2-container--bootstrap4.select2-container--focus .select2-selection,
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection {
    border-color: var(--nz-primary);
    box-shadow: none;
    outline: 2px solid var(--nz-focus);
    outline-offset: 1px;
}

.select2-dropdown {
    border-color: var(--nz-border);
    border-radius: var(--nz-r-md);
    box-shadow: var(--nz-shadow-float);
    font-size: 14px;
    overflow: hidden;
}

.select2-container .select2-results__option--highlighted,
.select2-container--bootstrap4 .select2-results__option--highlighted,
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--nz-primary-tint);
    color: var(--nz-primary);
}

.select2-container--bootstrap4 .select2-results__option[aria-selected="true"],
.select2-container--default .select2-results__option[aria-selected="true"] {
    background-color: var(--nz-hover);
    color: var(--nz-ink);
}

.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice,
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background: var(--nz-primary-tint);
    border: 0;
    border-radius: var(--nz-r-pill);
    color: var(--nz-primary);
    font-size: 12px;
    font-weight: 600;
}

.select2-search__field {
    border-color: var(--nz-border-input) !important;
    border-radius: var(--nz-r-sm);
}

/* ── Pagination and DataTables ─────────────────────────────────────────── */

.pagination {
    gap: 4px;
    flex-wrap: wrap;
}

.page-link {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 10px;
    margin: 0;
    border: 1px solid var(--nz-border);
    border-radius: var(--nz-r-sm) !important;
    background: var(--nz-bg);
    color: var(--nz-ink);
    font-size: 13px;
    font-weight: 600;
}

.page-link:hover,
.page-link:focus {
    background: var(--nz-hover-2);
    border-color: var(--nz-border-input);
    color: var(--nz-ink);
    box-shadow: none;
}

.page-item.active .page-link {
    background-color: var(--nz-primary);
    border-color: var(--nz-primary);
    color: var(--nz-on-primary);
}

.page-item.disabled .page-link {
    background: var(--nz-bg);
    border-color: var(--nz-border);
    color: var(--nz-faint-2);
}

.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter {
    font-size: 13px;
    color: var(--nz-muted);
}

.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    height: 32px;
    border: 1px solid var(--nz-border-input);
    border-radius: var(--nz-r-sm);
    font-size: 13px;
}

table.dataTable thead .sorting::before,
table.dataTable thead .sorting::after,
table.dataTable thead .sorting_asc::before,
table.dataTable thead .sorting_asc::after,
table.dataTable thead .sorting_desc::before,
table.dataTable thead .sorting_desc::after {
    color: var(--nz-faint);
}

table.dataTable {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* ── Modals, SweetAlert2, Toastr ───────────────────────────────────────── */

.modal-content {
    border: 1px solid var(--nz-border);
    border-radius: var(--nz-r-xl);
    box-shadow: var(--nz-shadow-float);
}

.modal-backdrop {
    background-color: var(--nz-ink);
}

.modal-backdrop.show {
    opacity: .45;
}

.modal-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--nz-border);
}

.modal-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--nz-ink);
}

.modal-body {
    padding: 20px;
}

.modal-footer {
    padding: 14px 20px;
    border-top: 1px solid var(--nz-border);
    background: var(--nz-bg-head);
    border-radius: 0 0 var(--nz-r-xl) var(--nz-r-xl);
    gap: 10px;
}

.modal-footer > * {
    margin: 0;
}

.close {
    color: var(--nz-muted);
    text-shadow: none;
    opacity: .8;
    font-weight: 400;
}

.close:hover {
    color: var(--nz-ink);
}

/* Form modals — the shared shell for add/edit dialogs (.modal-form) */
.modal-form .modal-content {
    overflow: hidden;
}

.modal-form .modal-header {
    align-items: flex-start;
    padding: 16px 20px;
}

.modal-form .modal-icon {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    margin-right: 12px;
    border-radius: var(--nz-r-md);
    background: var(--nz-primary-tint);
    color: var(--nz-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
}

.modal-form .modal-heading {
    flex: 1 1 auto;
    min-width: 0;
}

.modal-form .modal-title {
    margin-bottom: 2px;
}

.modal-form .modal-subtitle {
    margin: 0;
    font-size: 12px;
    line-height: 1.4;
    color: var(--nz-muted);
}

.modal-form .modal-header .close {
    padding: 2px 6px;
    margin: -2px -6px 0 0;
    font-size: 20px;
}

.modal-form .modal-body {
    padding: 20px;
}

.modal-form .input-group-text {
    min-width: 40px;
    justify-content: center;
}

.modal-form .input-group:focus-within .input-group-text,
.modal-form .input-group:focus-within .form-control {
    border-color: var(--nz-primary);
}

.modal-form .btn-reveal {
    background: var(--nz-bg-soft);
    border: 1px solid var(--nz-border-input);
    color: var(--nz-muted);
    min-width: 40px;
}

.modal-form .btn-reveal:hover {
    color: var(--nz-ink);
}

.modal-form .form-text {
    font-size: 12px;
}

.modal-form .field-reveal .form-text {
    margin-bottom: 0;
}

.modal-form .modal-footer .btn {
    min-width: 96px;
}

@media (max-width: 575.98px) {
    .modal-form .modal-body { padding: 16px; }
}

.swal2-popup {
    font-family: var(--nz-font);
    border-radius: var(--nz-r-xl);
    padding: 24px;
    color: var(--nz-ink);
}

.swal2-title {
    font-size: 20px;
    font-weight: 800;
    color: var(--nz-ink);
}

.swal2-html-container,
.swal2-content {
    font-size: 14px;
    color: var(--nz-text);
}

.swal2-styled {
    border-radius: var(--nz-r-sm) !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    min-height: 40px;
    padding: 0 18px !important;
}

.swal2-styled.swal2-confirm {
    background-color: var(--nz-primary);
}

.swal2-styled.swal2-cancel {
    background-color: var(--nz-bg) !important;
    color: var(--nz-ink) !important;
    border: 1px solid var(--nz-border-input) !important;
}

.swal2-styled:focus {
    box-shadow: none !important;
    outline: 2px solid var(--nz-focus);
    outline-offset: 1px;
}

.swal2-icon.swal2-warning  { border-color: var(--nz-warn-dot); color: var(--nz-warn-dot); }
.swal2-icon.swal2-info,
.swal2-icon.swal2-question { border-color: var(--nz-info-fg); color: var(--nz-info-fg); }
.swal2-icon.swal2-error    { border-color: var(--nz-danger-fg); }
.swal2-icon.swal2-error [class^="swal2-x-mark-line"] { background-color: var(--nz-danger-fg); }
.swal2-icon.swal2-success  { border-color: var(--nz-primary); }
.swal2-icon.swal2-success [class^="swal2-success-line"] { background-color: var(--nz-primary); }
.swal2-icon.swal2-success .swal2-success-ring { border-color: var(--nz-primary-tint); }

.swal2-input,
.swal2-textarea,
.swal2-select {
    border: 1px solid var(--nz-border-input) !important;
    border-radius: var(--nz-r-sm) !important;
    box-shadow: none !important;
    font-size: 14px !important;
}

#toast-container > div {
    opacity: 1;
    border-radius: var(--nz-r-md);
    box-shadow: var(--nz-shadow-float);
    font-family: var(--nz-font);
    font-size: 14px;
    padding: 14px 16px 14px 48px;
}

#toast-container > div:hover {
    box-shadow: var(--nz-shadow-float);
}

#toast-container > .toast-success { background-color: var(--nz-primary); }
#toast-container > .toast-error   { background-color: var(--nz-danger-fg); }
#toast-container > .toast-warning { background-color: var(--nz-warn-fg); }
#toast-container > .toast-info    { background-color: var(--nz-info-fg); }

.toast-title { font-weight: 700; }

/* ── Dropdowns ─────────────────────────────────────────────────────────── */

.dropdown-menu {
    padding: 6px;
    border: 1px solid var(--nz-border);
    border-radius: var(--nz-r-md);
    box-shadow: var(--nz-shadow-float);
    font-size: 14px;
    color: var(--nz-ink);
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: var(--nz-r-xs);
    color: var(--nz-text);
    font-weight: 500;
}

.dropdown-item > i {
    width: 16px;
    text-align: center;
    color: var(--nz-muted);
}

.dropdown-item:hover,
.dropdown-item:focus {
    background: var(--nz-hover);
    color: var(--nz-ink);
}

.dropdown-item.active,
.dropdown-item:active {
    background: var(--nz-primary-tint);
    color: var(--nz-primary);
}

.dropdown-item.text-danger:hover,
.dropdown-item.text-danger > i { color: var(--nz-danger-fg) !important; }

.dropdown-divider {
    margin: 6px 0;
    border-top-color: var(--nz-divider);
}

.dropdown-header {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--nz-faint);
    padding: 8px 10px 4px;
}

/* ── Tabs and pills ────────────────────────────────────────────────────── */

.nav-tabs,
.nz-tabs {
    border-bottom: 1px solid var(--nz-border);
    gap: 0;
}

.nav-tabs .nav-link,
.nz-tab {
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    background: none;
    margin: 0 20px -1px 0;
    padding: 10px 2px;
    color: var(--nz-muted);
    font-weight: 600;
    text-decoration: none;
}

.nav-tabs .nav-link:hover,
.nav-tabs .nav-link:focus,
.nz-tab:hover {
    border-color: transparent;
    color: var(--nz-ink);
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link,
.nz-tab.active,
.nz-tab[aria-selected="true"] {
    background: none;
    border-color: transparent;
    border-bottom-color: var(--nz-primary);
    color: var(--nz-ink);
}

.nz-tab-count {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 7px;
    border-radius: var(--nz-r-pill);
    background: var(--nz-neutral-bg);
    color: var(--nz-neutral-fg);
    font-size: 11px;
}

.card-header .nav-tabs {
    margin-bottom: -15px;
    border-bottom: 0;
}

.nav-pills:not(.nav-sidebar) .nav-link {
    border-radius: var(--nz-r-sm);
    color: var(--nz-text);
    font-weight: 600;
}

.nav-pills:not(.nav-sidebar) .nav-link:hover {
    color: var(--nz-ink);
}

.nav-pills:not(.nav-sidebar) .nav-link.active,
.nav-pills:not(.nav-sidebar) .show > .nav-link {
    background: var(--nz-primary-tint);
    color: var(--nz-primary);
}

/* Segmented control — track with a raised white selection */
.nz-seg {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 4px;
    background: var(--nz-segment);
    border-radius: var(--nz-r-md);
}

.nz-seg > a,
.nz-seg > button,
.nz-seg > label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 32px;
    padding: 0 12px;
    border: 0;
    border-radius: var(--nz-r-sm);
    background: transparent;
    color: var(--nz-muted);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    margin: 0;
}

.nz-seg > a:hover,
.nz-seg > button:hover,
.nz-seg > label:hover {
    color: var(--nz-ink);
    text-decoration: none;
}

.nz-seg > .active,
.nz-seg > [aria-pressed="true"],
.nz-seg > [aria-selected="true"],
.nz-seg > label.active {
    background: var(--nz-bg);
    color: var(--nz-ink);
    font-weight: 700;
    box-shadow: var(--nz-shadow-seg);
}

.nz-seg input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

/* ── Alerts ────────────────────────────────────────────────────────────── */

.alert {
    border: 0;
    border-radius: var(--nz-r-md);
    padding: 12px 16px;
    font-size: 14px;
}

.alert-success { background-color: var(--nz-ok-bg);      color: var(--nz-ok-fg); }
.alert-danger  { background-color: var(--nz-danger-bg);  color: var(--nz-danger-fg); }
.alert-warning { background-color: var(--nz-warn-bg);    color: var(--nz-warn-fg); }
.alert-info,
.alert-primary { background-color: var(--nz-info-bg);    color: var(--nz-info-fg); }
.alert-secondary,
.alert-light,
.alert-dark    { background-color: var(--nz-neutral-bg); color: var(--nz-neutral-fg); }

.alert a,
.alert .alert-link {
    color: inherit;
    font-weight: 700;
    text-decoration: underline;
}

.alert .close,
.alert-dismissible .close {
    color: inherit;
    opacity: .6;
    text-shadow: none;
    padding: 10px 16px;
}

.alert h5,
.alert h4,
.alert .alert-heading {
    color: inherit;
    font-size: 15px;
    font-weight: 700;
}

/* A soft warning card, e.g. "Credits running low" on the brand dashboard */
.nz-notice {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    border: 1px solid var(--nz-border);
    border-radius: var(--nz-r-lg);
    background: var(--nz-bg-soft);
    margin-bottom: 20px;
}

.nz-notice--warn {
    background: var(--nz-warn-soft-bg);
    border-color: var(--nz-warn-soft-line);
}

.nz-notice--warn > i:first-child { color: var(--nz-warn-fg); font-size: 18px; }

.nz-notice-body {
    flex: 1 1 300px;
    min-width: 0;
}

/* ── Progress ──────────────────────────────────────────────────────────── */

.progress {
    height: 8px;
    border-radius: var(--nz-r-pill);
    background-color: var(--nz-divider);
    box-shadow: none;
}

.progress-sm { height: 6px; }
.progress-xs,
.progress-xxs { height: 4px; }

.progress-bar,
.progress-bar.bg-success,
.progress-bar.bg-primary {
    background-color: var(--nz-primary) !important;
    color: var(--nz-on-primary) !important;
    border-radius: var(--nz-r-pill);
}

.progress-bar.bg-warning { background-color: var(--nz-warn-dot) !important; }
.progress-bar.bg-danger  { background-color: var(--nz-danger-fg) !important; }
.progress-bar.bg-info    { background-color: var(--nz-info-fg) !important; }

/* A thin labelled meter (design: 8px track, primary fill) */
.nz-meter {
    height: 8px;
    border-radius: var(--nz-r-pill);
    background: var(--nz-divider);
    overflow: hidden;
}

.nz-meter > span {
    display: block;
    height: 100%;
    border-radius: var(--nz-r-pill);
    background: var(--nz-chart-1);
}

.nz-meter > span.is-2 { background: var(--nz-chart-2); }
.nz-meter > span.is-3 { background: var(--nz-chart-3); }
.nz-meter > span.is-4 { background: var(--nz-chart-4); }
.nz-meter > span.is-warn { background: var(--nz-warn-dot); }
.nz-meter > span.is-bad  { background: var(--nz-danger-fg); }

/* ── List group, breadcrumbs elsewhere ─────────────────────────────────── */

.list-group-item {
    border-color: var(--nz-divider);
    color: var(--nz-ink);
    padding: 12px 20px;
}

.list-group-item.active {
    background: var(--nz-primary-tint);
    border-color: var(--nz-divider);
    color: var(--nz-primary);
}

.list-group-item-action:hover {
    background: var(--nz-row-hover);
}

/* ── Empty states ──────────────────────────────────────────────────────── */

.empty-state,
.nz-empty {
    text-align: center;
    padding: 40px 16px;
    color: var(--nz-muted);
}

.empty-state i,
.nz-empty > i {
    display: block;
    margin-bottom: 12px;
    font-size: 28px;
    color: var(--nz-border-input);
}

.empty-state p,
.nz-empty p {
    margin-bottom: 12px;
}

/* ============================================================================
   DESIGN COMPONENTS
   Shared building blocks from the boards. Views compose pages from these
   instead of inline styles. See CLAUDE.md → "Design system".
   ============================================================================ */

/* Vertical stack with the page body's 20px rhythm */
.nz-stack {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.nz-stack > .card,
.nz-stack > .nz-notice { margin-bottom: 0; }

/* Two-up row: a wide main column and a narrower side column that wrap */
.nz-split {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 20px;
}

.nz-split > * { margin-bottom: 0; min-width: 0; }
.nz-split > .nz-main { flex: 2 1 560px; }
.nz-split > .nz-side-col { flex: 1 1 300px; }

/* KPI tiles */
.nz-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}

.nz-kpis > .card,
.nz-kpis > .nz-kpi { margin-bottom: 0; }

.nz-kpi {
    padding: 18px 20px;
    border: 1px solid var(--nz-border);
    border-radius: var(--nz-r-lg);
    background: var(--nz-bg);
    min-width: 0;
}

a.nz-kpi,
a.nz-kpi:hover {
    color: var(--nz-ink);
    text-decoration: none;
}

a.nz-kpi:hover { border-color: var(--nz-border-input); }
a.nz-kpi.is-selected { border-color: var(--nz-primary); box-shadow: 0 0 0 1px var(--nz-primary); }

.nz-kpi-label {
    color: var(--nz-muted);
    font-size: 13px;
    font-weight: 600;
}

.nz-kpi-value {
    margin-top: 6px;
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.2;
    color: var(--nz-ink);
    font-variant-numeric: tabular-nums;
}

.nz-kpi-value small {
    font-size: 15px;
    font-weight: 700;
    color: var(--nz-muted);
    letter-spacing: 0;
}

.nz-kpi-delta {
    margin-top: 4px;
    font-size: 12px;
    font-weight: 600;
    color: var(--nz-primary);
}

.nz-kpi-delta.is-down,
.nz-kpi-delta.is-bad   { color: var(--nz-danger-fg); }
.nz-kpi-delta.is-warn  { color: var(--nz-warn-fg); }
.nz-kpi-delta.is-muted { color: var(--nz-muted); }

/* Card head with an h2 and an optional link or control on the right */
.nz-card-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--nz-border);
}

.nz-card-head > h2,
.nz-card-head > h3,
.nz-card-head .nz-card-title {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--nz-ink);
}

.nz-card-body { padding: 20px; }

/* Attention list — things someone owes action on */
.nz-att {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--nz-divider);
    color: var(--nz-ink);
    text-decoration: none;
}

.nz-att:last-child { border-bottom: 0; }

.nz-att:hover,
.nz-att:focus {
    background: var(--nz-row-hover);
    color: var(--nz-ink);
    text-decoration: none;
}

.nz-att-ic {
    flex: none;
    width: 36px;
    height: 36px;
    border-radius: var(--nz-r-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    background: var(--nz-neutral-bg);
    color: var(--nz-neutral-fg);
}

.nz-att-ic.is-ok   { background: var(--nz-ok-bg);     color: var(--nz-ok-fg); }
.nz-att-ic.is-warn { background: var(--nz-warn-bg);   color: var(--nz-warn-fg); }
.nz-att-ic.is-info { background: var(--nz-info-bg);   color: var(--nz-info-fg); }
.nz-att-ic.is-bad  { background: var(--nz-danger-bg); color: var(--nz-danger-fg); }

.nz-att-text { min-width: 0; }
.nz-att-text b { display: block; font-weight: 700; }
.nz-att-text span { display: block; font-size: 12px; color: var(--nz-muted); }

.nz-att-n {
    margin-left: auto;
    font-size: 18px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

/* Activity list — a dot, a line, a time */
.nz-activity {
    list-style: none;
    margin: 0;
    padding: 6px 20px;
}

.nz-activity > li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--nz-divider);
}

.nz-activity > li:last-child { border-bottom: 0; }

.nz-activity-dot {
    flex: none;
    width: 8px;
    height: 8px;
    margin-top: 7px;
    border-radius: 50%;
    background: var(--nz-primary);
}

.nz-activity-dot.is-warn { background: var(--nz-warn-dot); }
.nz-activity-dot.is-info { background: var(--nz-info-fg); }
.nz-activity-dot.is-bad  { background: var(--nz-danger-fg); }
.nz-activity-dot.is-n    { background: var(--nz-faint-2); }

.nz-activity-time {
    display: block;
    font-size: 12px;
    color: var(--nz-muted);
}

/* Quick actions — a tall nav-style row with a title and a subline */
.nz-quick {
    padding: 8px;
}

.nz-quick > a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: var(--nz-r-sm);
    color: var(--nz-text);
    text-decoration: none;
}

.nz-quick > a:hover {
    background: var(--nz-hover);
    text-decoration: none;
}

.nz-quick > a > i {
    flex: none;
    width: 18px;
    font-size: 16px;
    text-align: center;
    color: var(--nz-primary);
}

.nz-quick b {
    display: block;
    color: var(--nz-ink);
}

.nz-quick span span,
.nz-quick small {
    display: block;
    font-size: 12px;
    color: var(--nz-muted);
}

/* Key / value rows */
.nz-kv {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--nz-divider);
}

.nz-kv:last-child { border-bottom: 0; }
.nz-kv > span:first-child { color: var(--nz-muted); }
.nz-kv > :last-child { text-align: right; font-weight: 600; }

/* Form sections — a card split into numbered or titled blocks */
.nz-sec {
    padding: 22px 24px;
    border-bottom: 1px solid var(--nz-border);
}

.nz-sec:last-child { border-bottom: 0; }

.nz-sec > h2,
.nz-sec-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 4px;
    font-size: 15px;
    font-weight: 700;
    color: var(--nz-ink);
}

.nz-step {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--nz-ink);
    color: var(--nz-white);
    font-size: 12px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

.nz-hint,
.nz-sec .hint {
    margin: 0 0 16px;
    color: var(--nz-muted);
    font-size: 13px;
}

.nz-fgrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
}

.nz-fgrid > .form-group { margin-bottom: 0; }

/* Option card (credit packs, sites, choices) */
.nz-pack {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 20px;
    border: 1px solid var(--nz-border-input);
    border-radius: var(--nz-r-lg);
    background: var(--nz-bg);
    color: var(--nz-ink);
    text-align: left;
    cursor: pointer;
}

.nz-pack:hover { border-color: var(--nz-primary); }

.nz-pack.is-selected,
.nz-pack:has(input:checked) {
    border-color: var(--nz-primary);
    box-shadow: 0 0 0 1px var(--nz-primary);
}

.nz-pack-t { font-size: 13px; font-weight: 600; color: var(--nz-muted); }
.nz-pack-n { font-size: 26px; font-weight: 800; letter-spacing: -.02em; }
.nz-pack-p { font-size: 15px; font-weight: 700; }
.nz-pack-u { font-size: 12px; color: var(--nz-muted); }

/* Row action — a 32px icon button inside a table row */
.nz-rowact {
    width: 32px;
    height: 32px;
    border-radius: var(--nz-r-xs);
    border: 0;
    background: transparent;
    color: var(--nz-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    cursor: pointer;
    text-decoration: none;
}

.nz-rowact:hover,
.nz-rowact:focus {
    background: var(--nz-neutral-bg);
    color: var(--nz-ink);
    text-decoration: none;
}

/* Brand logo tile / initials in a list */
.nz-logo-tile {
    flex: none;
    width: 32px;
    height: 32px;
    border-radius: var(--nz-r-sm);
    background: var(--nz-neutral-bg);
    color: var(--nz-text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 12px;
    overflow: hidden;
}

.nz-logo-tile img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: var(--nz-bg);
}

/* Filter row above a table */
.nz-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--nz-border);
}

.nz-filters .form-control,
.nz-filters .custom-select {
    width: auto;
    height: 38px;
}

.nz-filters .nz-search {
    flex: 1 1 240px;
    max-width: 380px;
}

/* Legend dot and series swatches */
.nz-dot {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--nz-chart-1);
    vertical-align: middle;
}

.nz-dot.is-2, .nz-fill-2 { background: var(--nz-chart-2); }
.nz-dot.is-3, .nz-fill-3 { background: var(--nz-chart-3); }
.nz-dot.is-4, .nz-fill-4 { background: var(--nz-chart-4); }
.nz-dot.is-5, .nz-fill-5 { background: var(--nz-chart-5); }
.nz-dot.is-6, .nz-fill-6 { background: var(--nz-chart-6); }
.nz-fill-1 { background: var(--nz-chart-1); }

/* Public pages: small uppercase label above a heading */
.nz-eyebrow {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--nz-primary);
}

@media (max-width: 767.98px) {
    .nz-kpi-value { font-size: 26px; }
    .nz-sec { padding: 18px 16px; }
}
/* ============================================
   AUTH PAGES (login, register, forgot-password)
   ============================================ */

.login-page,
.register-page {
    background: linear-gradient(135deg, var(--nz-primary) 0%, var(--nz-primary) 100%);
    min-height: 100vh;
}

.login-box,
.register-box {
    width: 400px;
}

.login-card-body,
.register-card-body {
    border-radius: var(--nz-r-sm);
}

.login-logo a,
.register-logo a {
    color: var(--nz-white);
    font-weight: 700;
}

.login-page .btn-primary,
.login-page .btn-success,
.register-page .btn-primary,
.register-page .btn-success {
    background-color: var(--nz-primary);
    border-color: var(--nz-primary);
}

.login-page .btn-primary:hover,
.login-page .btn-success:hover,
.register-page .btn-primary:hover,
.register-page .btn-success:hover {
    background-color: var(--nz-primary-hover);
    border-color: var(--nz-primary-hover);
}

.login-page .input-group-text,
.register-page .input-group-text {
    background-color: var(--nz-primary);
    border-color: var(--nz-primary);
    color: var(--nz-white);
}

.login-page .form-control:focus,
.register-page .form-control:focus {
    border-color: var(--nz-primary);
    box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--nz-primary) 25%, transparent);
}

.login-page .alert,
.register-page .alert {
    border-radius: var(--nz-r-xs);
}

/* ============================================
   GREETING POPUP (brand/request.php)
   ============================================ */

#greeting-popup {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    justify-content: center;
    align-items: center;
    z-index: 1050;
}

.popup-content {
    background: var(--nz-bg);
    padding: 20px;
    border-radius: var(--nz-r-xs);
    width: 400px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.popup-content h3 {
    margin-top: 0;
    margin-bottom: 15px;
}

.popup-content .form-group {
    margin-bottom: 15px;
}

.popup-content .form-group label {
    display: block;
    margin-bottom: 5px;
}

.popup-content .form-group input,
.popup-content .form-group textarea {
    width: 100%;
    padding: 8px;
    box-sizing: border-box;
}

.popup-content .form-group textarea {
    resize: vertical;
}

.popup-content button {
    margin-right: 10px;
}

/* ============================================
   BRAND DASHBOARD
   Stat cards, chart surfaces, channel list and
   impact tiles. Accent colour per element comes
   from an inline --accent; it falls back to the
   themed brand colour so the theme editor still
   drives the page.
   ============================================ */

:root,
.dash {
    --dash-radius: var(--nz-r-lg);
    --dash-border: var(--nz-border);
    --dash-ink: var(--nz-ink);
    --dash-ink-muted: var(--nz-muted);
    --dash-track: var(--nz-divider);
    /* Validated categorical slots — blue / orange / aqua / violet */
    --viz-blue: var(--nz-chart-1);
    --viz-orange: var(--nz-chart-2);
    --viz-aqua: var(--nz-chart-3);
    --viz-violet: var(--nz-chart-5);
}
/* --- Stat cards: the design's KPI tile --- */
.stat-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
    height: 100%;
    padding: 18px 20px;
    background: var(--nz-bg);
    border: 1px solid var(--nz-border);
    border-radius: var(--nz-r-lg);
    box-shadow: none;
    overflow: hidden;
}

/* A stat card that is itself a filter link (views/brand/tickets.php) */
a.stat-link,
a.stat-link:hover,
a.stat-link:focus {
    color: inherit;
    text-decoration: none;
}

a.stat-link:hover { border-color: var(--nz-border-input); }

a.stat-link.is-selected {
    border-color: var(--nz-primary);
    box-shadow: 0 0 0 1px var(--nz-primary);
}

.stat-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

.stat-label {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--nz-muted);
    margin: 0;
}

.stat-icon {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: var(--nz-r-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    color: var(--nz-primary);
    background-color: var(--nz-primary-tint);
}

.stat-value {
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.2;
    color: var(--nz-ink);
    font-variant-numeric: tabular-nums;
}

.stat-value small {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0;
    color: var(--nz-muted);
    margin-left: 2px;
}

.stat-meta {
    margin-top: auto;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--nz-muted);
}


.stat-chip {
    display: inline-flex;
    align-items: center;
    gap: .2rem;
    font-size: 11px;
    font-weight: 600;
    padding: .1rem .42rem;
    border-radius: var(--nz-r-pill);
}

.stat-chip.up    { color: var(--nz-ok-fg); background: var(--nz-ok-bg); }
.stat-chip.down  { color: var(--nz-danger-fg); background: var(--nz-danger-bg); }
.stat-chip.flat  { color: var(--nz-neutral-fg); background: var(--nz-neutral-bg); }

.stat-meter {
    height: 5px;
    border-radius: var(--nz-r-pill);
    background: var(--dash-track);
    overflow: hidden;
    margin: .1rem 0 .1rem;
}

.stat-meter > span {
    display: block;
    height: 100%;
    border-radius: var(--nz-r-pill);
    background: var(--accent, var(--nz-primary));
}

/* --- Chart surfaces --- */
.dash .card-header .card-title i {
    color: var(--nz-primary);
}

.chart-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
}

.chart-header .card-title {
    margin-right: auto;
}

.range-toggle {
    display: inline-flex;
    gap: 2px;
    padding: 2px;
    background: var(--nz-neutral-bg);
    border-radius: var(--nz-r-pill);
}

/* Links as well as buttons: a range that reloads the page is an <a>. */
.range-toggle button,
.range-toggle a {
    border: 0;
    background: transparent;
    font-size: 12px;
    font-weight: 600;
    color: var(--nz-faint);
    padding: .18rem .62rem;
    border-radius: var(--nz-r-pill);
    line-height: 1.45;
}

.range-toggle a:hover,
.range-toggle a:focus {
    color: var(--nz-primary);
    text-decoration: none;
}

.range-toggle button.active,
.range-toggle a.active {
    background: var(--nz-bg);
    color: var(--nz-primary);
    box-shadow: 0 1px 2px rgba(16, 24, 40, .14);
}

.chart-canvas {
    position: relative;
    height: 290px;
}

/* A chart that must fill whatever height its card is given, so a chart card
   standing beside a long list does not end in dead space */
.chart-card-body {
    display: flex;
    flex-direction: column;
}

.chart-card-body .chart-canvas {
    flex: 1 1 auto;
    min-height: 240px;
}

.series-key {
    display: flex;
    flex-wrap: wrap;
    gap: 1.1rem;
    font-size: 12px;
    color: var(--dash-ink-muted);
    margin-bottom: .75rem;
}

.series-key .dot,
.series-key .dash {
    display: inline-block;
    margin-right: .4rem;
    vertical-align: middle;
}

.series-key .dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
}

/* Matches the dashed stroke the Certificates line is drawn with */
.series-key .dash {
    width: 14px;
    height: 2px;
    background-image: none;
    -webkit-mask-image: repeating-linear-gradient(to right, var(--nz-black) 0 4px, transparent 4px 7px);
    mask-image: repeating-linear-gradient(to right, var(--nz-black) 0 4px, transparent 4px 7px);
}

.series-key b {
    color: var(--dash-ink);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* --- Channel doughnut + legend --- */
.donut-wrap {
    position: relative;
    height: 175px;
}

.donut-center {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.donut-center .n {
    font-size: 20px;
    font-weight: 600;
    line-height: 1;
    color: var(--dash-ink);
}

.donut-center .l {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--dash-ink-muted);
    margin-top: .2rem;
}

.channel-list {
    margin-top: 1rem;
    display: grid;
    gap: .45rem;
}

.channel-row {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: 12px;
}

.channel-row .dot {
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    border-radius: 2px;
}

.channel-row .name  { color: var(--nz-neutral-fg); font-weight: 500; }
.channel-row .val   { margin-left: auto; color: var(--dash-ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.channel-row .pct   { width: 40px; text-align: right; color: var(--dash-ink-muted); font-variant-numeric: tabular-nums; }

/* --- Impact tiles --- */
.impact-tile {
    display: flex;
    align-items: center;
    gap: .85rem;
    height: 100%;
    padding: .85rem 1rem;
    background: var(--nz-bg);
    border: 1px solid var(--dash-border);
    border-radius: var(--dash-radius);
}

.impact-tile .ic {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border-radius: var(--nz-r-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: var(--accent, var(--nz-primary));
    background-color: var(--nz-neutral-bg);
    background-color: color-mix(in srgb, var(--accent, var(--nz-primary)) 13%, var(--nz-bg));
}

.impact-tile .n {
    font-size: 20px;
    font-weight: 600;
    line-height: 1.15;
    color: var(--dash-ink);
}

.impact-tile .n small {
    font-size: 12px;
    font-weight: 500;
    color: var(--dash-ink-muted);
}

.impact-tile .l {
    font-size: 12px;
    color: var(--dash-ink-muted);
}

/* --- Attention bar (views/admin/dashboard.php) ---
   One quiet strip for everything the admin team still owes someone, so
   the KPI cards stay figures rather than alerts. */
.attention-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: 1rem;
    padding: .6rem .9rem;
    border: 1px solid var(--nz-warn-soft-line);
    border-left: 3px solid var(--nz-warn-dot);
    border-radius: var(--dash-radius);
    background: var(--nz-warn-soft-bg);
}

.attention-bar > i { color: var(--nz-warn-dot); font-size: 13.5px; }

.attention-text {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--nz-warn-fg);
}

.attention-item {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .18rem .6rem;
    border: 1px solid var(--nz-warn-soft-line);
    border-radius: var(--nz-r-pill);
    background: var(--nz-bg);
    color: var(--nz-warn-fg);
    font-size: 12px;
    font-weight: 500;
}

.attention-item:hover,
.attention-item:focus {
    border-color: var(--nz-warn-dot);
    color: var(--nz-warn-fg);
    text-decoration: none;
}

.attention-item i { font-size: 12px; opacity: .85; }

/* --- Brand leaderboard (views/admin/dashboard.php) ---
   A ranked list rather than a table: the bar carries the comparison, so
   the numbers do not have to be read against each other. */
.lead-row {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .7rem 1.25rem;
    color: inherit;
}

.lead-row + .lead-row { border-top: 1px solid var(--nz-divider); }

.lead-row:hover,
.lead-row:focus {
    background: var(--nz-bg-head);
    color: inherit;
    text-decoration: none;
}

.lead-rank {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--nz-neutral-bg);
    color: var(--nz-faint);
    font-size: 11px;
    font-weight: 600;
}

.lead-row:first-child .lead-rank {
    background: rgba(237, 161, 0, .15);
    color: var(--nz-warn-fg);
}

.lead-body { flex: 1; min-width: 0; }

.lead-name {
    display: block;
    font-weight: 500;
    color: var(--dash-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lead-body .row-meter { margin-top: .35rem; }

.lead-meta {
    display: block;
    margin-top: .25rem;
    color: var(--dash-ink-muted);
    font-size: 12px;
}

.lead-value {
    flex: 0 0 auto;
    text-align: right;
    font-size: 16px;
    font-weight: 600;
    color: var(--dash-ink);
    font-variant-numeric: tabular-nums;
}

.lead-value small {
    display: block;
    font-size: 11px;
    font-weight: 500;
    color: var(--dash-ink-muted);
}

/* --- Recent table --- */
.dash .table td,
.dash .table th {
    padding: .55rem .75rem;
}

.dash .cert-order {
    font-family: SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
    color: var(--nz-neutral-fg);
}

.dash .cert-event {
    display: inline-block;
    max-width: 340px;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
}

@media (max-width: 575.98px) {
    .stat-value { font-size: 26px; }
    .dash .cert-event { max-width: 200px; }
    .chart-canvas { height: 230px; }
}

/* ── Auth pages: split screen ───────────────────────────────────────────
   Login, Register and Forgot Password render outside the app chrome, so
   they cannot use templates/page_header.php. They share one layout instead:
   templates/auth_header.php paints a branded panel on the left and opens
   the form column on the right, templates/auth_footer.php closes it. Below
   the lg breakpoint the panel is dropped and the form takes the full width,
   with the logo moving into the form column so the page still reads as ours. */
.auth-body {
    margin: 0;
    background-color: var(--nz-bg);
    color: var(--nz-ink);
    font-family: var(--nz-font);
}

.auth-split {
    display: flex;
    align-items: stretch;
    min-height: 100vh;
}

/* Left: brand panel ---------------------------------------------------- */


/* Light bloom top right, shade bottom left — keeps the gradient from
   reading as a flat block of colour. */


/* When the theme editor supplies a photo (cnb_settings.login_bg_url) it sits
   under this scrim, so the copy stays legible whatever the image. */





/* Sits directly above the headline, sharing its left edge, so the logo and
   the copy read as one centred block. The white chip is there because the
   mark is dark on transparent and needs a light ground on this panel. */


















/* Right: form column --------------------------------------------------- */


.auth-form {
    width: 100%;
    max-width: 25rem;
}

/* Only shown once the brand panel drops away. */


.auth-heading {
    margin: 0 0 .4rem;
    font-size: 26px;
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--nz-ink);
}

.auth-subtitle {
    margin: 0 0 1.75rem;
    font-size: 15px;
    line-height: 1.55;
    color: var(--nz-faint);
}

/* Back pill — same shape as .page-back, this page's stand-in for the
   back button templates/page_header.php would otherwise draw. */
.auth-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    margin-bottom: 1.25rem;
    border: 1px solid var(--nz-border-input);
    border-radius: 50%;
    color: var(--nz-neutral-fg);
    font-size: 14px;
    line-height: 1;
    text-decoration: none;
}

.auth-back:hover,
.auth-back:focus {
    background-color: var(--nz-primary);
    border-color: var(--nz-primary);
    color: var(--nz-white);
    text-decoration: none;
}

.auth-field + .auth-field { margin-top: 1rem; }

.auth-field label {
    display: block;
    margin-bottom: .4rem;
    font-size: 13px;
    font-weight: 500;
    color: var(--nz-neutral-fg);
}

.auth-input { position: relative; }



.auth-input .form-control {
    height: 46px;
    padding-left: 2.5rem;
    border: 1px solid var(--nz-border);
    border-radius: var(--nz-r-md);
    background-color: var(--nz-row-hover);
    font-size: 15px;
    color: var(--nz-ink);
    box-shadow: none;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.auth-input .form-control::placeholder { color: var(--nz-border-input); }

.auth-input .form-control:focus {
    border-color: var(--nz-primary);
    background-color: var(--nz-bg);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--nz-primary) 14%, transparent);
}

.auth-input:focus-within > i { color: var(--nz-primary); }

/* Reveal button is injected by templates/auth_footer.php, so without JS the
   field stays a plain password input with no dead control beside it. */
.auth-input--password .form-control { padding-right: 2.75rem; }

.auth-reveal {
    position: absolute;
    top: 50%;
    right: .35rem;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 0;
    border-radius: var(--nz-r-xs);
    background: transparent;
    color: var(--nz-faint-2);
    font-size: 13.5px;
    cursor: pointer;
}

.auth-reveal:hover,
.auth-reveal:focus {
    background-color: var(--nz-segment);
    color: var(--nz-primary);
    outline: none;
}

.auth-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: 1rem 0 0;
    font-size: 13.5px;
}

/* Plain styled checkbox rather than AdminLTE's .icheck-primary, whose
   icheck-bootstrap stylesheet these standalone pages do not load. */
.auth-check {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin: 0;
    font-weight: 400;
    color: var(--nz-neutral-fg);
    cursor: pointer;
}

.auth-check input {
    width: 1rem;
    height: 1rem;
    margin: 0;
    accent-color: var(--nz-primary);
    cursor: pointer;
}

.auth-row a { color: var(--nz-primary); font-weight: 500; }
.auth-row a:hover { color: var(--nz-primary-hover); }

.auth-submit {
    height: 46px;
    margin-top: 1.5rem;
    border: 0;
    border-radius: var(--nz-r-md);
    background-color: var(--nz-primary);
    font-size: 15px;
    font-weight: 500;
    box-shadow: 0 6px 16px color-mix(in srgb, var(--nz-primary) 24%, transparent);
}

.auth-submit:hover,
.auth-submit:focus {
    background-color: var(--nz-primary-hover);
    box-shadow: 0 8px 20px color-mix(in srgb, var(--nz-primary) 30%, transparent);
}

.auth-form .alert {
    padding: .7rem .9rem;
    margin-bottom: 1.25rem;
    border: 0;
    border-radius: var(--nz-r-md);
    font-size: 14px;
}

.auth-form .alert-danger { background-color: var(--nz-danger-bg); color: var(--nz-danger-fg); }
.auth-form .alert-success { background-color: var(--nz-ok-bg); color: var(--nz-primary); }

.auth-footnote {
    margin: 1.5rem 0 0;
    font-size: 14px;
    text-align: center;
    color: var(--nz-faint);
}

.auth-footnote a { color: var(--nz-primary); font-weight: 500; }
.auth-footnote a:hover { color: var(--nz-primary-hover); }

/* "Install Now" card on the login and register screens. It sits hidden in the
   markup and public/js/pwa-install.js reveals it only on a phone that can
   really install the app, so it never advertises a button that does nothing.
   The desktop rule below is a second guard: even a browser that fires
   beforeinstallprompt on a wide screen keeps the card out of the way.

   Icon and copy share the top row, the button takes the one below. Stacking
   rather than sitting the button alongside leaves the copy full width, which
   is what keeps the card two lines tall on a 360px phone instead of five. */
.auth-install {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: .25rem .8rem;
    margin-top: 1.75rem;
    padding: .9rem;
    border: 1px solid var(--nz-border);
    border-radius: var(--nz-r-lg);
    background-color: var(--nz-bg-head);
}

.auth-install[hidden] { display: none; }

.auth-install-icon {
    width: 42px;
    height: 42px;
    border-radius: var(--nz-r-md);
}

.auth-install-copy {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.3;
}

.auth-install-copy strong {
    font-size: 15px;
    font-weight: 600;
    color: var(--nz-ink);
}

.auth-install-copy span {
    font-size: 13px;
    color: var(--nz-faint);
}

/* Outlined, not solid: it sits a thumb's width under the green Sign In button,
   and two filled green blocks would leave the primary action ambiguous. */
.auth-install-btn {
    grid-column: 1 / -1;
    margin-top: .6rem;
    padding: .5rem 1rem;
    border: 1px solid var(--nz-primary);
    border-radius: var(--nz-r-sm);
    color: var(--nz-primary);
    background-color: var(--nz-bg);
    font-size: 14px;
    font-weight: 600;
}

.auth-install-btn:hover,
.auth-install-btn:focus {
    color: var(--nz-white);
    background-color: var(--nz-primary);
}

/* iOS has no install event, so the button unfolds the Share-sheet steps here. */
.auth-install-help {
    grid-column: 1 / -1;
    margin: .65rem 0 0;
    padding-top: .65rem;
    border-top: 1px solid var(--nz-border);
    font-size: 13px;
    line-height: 1.5;
    color: var(--nz-neutral-fg);
}

.auth-install-help[hidden] { display: none; }
.auth-install-help i { color: var(--nz-primary); }

@media (min-width: 992px) {
    .auth-install { display: none !important; }
}





@media (max-width: 575.98px) {
    .auth-form { max-width: 100%; }
    .auth-heading { font-size: 20px; }
    .auth-row { flex-wrap: wrap; }
}

/* ── Certificates list (views/brand/request.php) ─────────────────────────
   The table carries one download button per row and hides every other
   action behind a single menu, so a long list reads as rows of data
   rather than rows of coloured buttons. */
.filter-chips {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .4rem;
    padding: .1rem 0 .6rem;
}

.filter-chips-label {
    color: var(--nz-faint-2);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    max-width: 18rem;
    padding: .2rem .55rem;
    border: 1px solid var(--nz-border);
    border-radius: var(--nz-r-pill);
    background-color: var(--nz-bg-head);
    color: var(--nz-neutral-fg);
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.filter-chip i { color: var(--nz-faint-2); font-size: 11px; }

.filter-clear {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    color: var(--nz-danger-fg);
    font-size: 12px;
    font-weight: 500;
}

.filter-clear:hover { color: var(--nz-danger-fg); text-decoration: none; }

/* Table */
.cert-table td { padding-top: .55rem; padding-bottom: .55rem; }

.cert-sr {
    width: 2.5rem;
    color: var(--nz-border-input);
    font-size: 12px;
}

/* A ranked list numbers positions, not rows — the top three are marked so
   the leaders are findable without reading the column (views/admin/reports.php). */
.rank-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: var(--nz-neutral-bg);
    color: var(--nz-faint);
    font-size: 12px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.rank-badge.is-top {
    background: rgba(237, 161, 0, .15);
    color: var(--nz-warn-fg);
}

.cert-order-id {
    font-weight: 600;
    color: var(--nz-primary);
}

.cert-name { display: block; font-weight: 500; }

/* A user-supplied name (an uploaded file, say) that must not stretch its
   column — the full value stays in the element's title attribute. */
.cert-name.is-truncated {
    max-width: 16rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Brand identity cell (views/admin/brands.php) — logo or initials beside the
   name, so a long roster is scannable by mark as well as by text. */
.brand-cell {
    display: flex;
    align-items: center;
    gap: .6rem;
    min-width: 0;
}

/* The initials sit underneath; a logo that loads covers them, and one whose
   file is missing removes itself and uncovers them again. */
.brand-avatar-wrap {
    position: relative;
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
}

.brand-avatar-img {
    position: absolute;
    top: 0;
    left: 0;
}

.brand-avatar {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border-radius: var(--nz-r-xs);
    object-fit: contain;
    background: var(--nz-bg);
    border: 1px solid var(--dash-border, var(--nz-border));
}

.brand-avatar.is-fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-color: transparent;
    background: var(--nz-neutral-bg);
    color: var(--nz-faint);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .02em;
}

.brand-cell-body { min-width: 0; }

.brand-cell-body .cert-name { color: var(--dash-ink, var(--nz-ink)); }

/* Brand column on the admin certificates list — a long company name must
   not push the row's own data off the table. */
.cert-brand {
    display: inline-block;
    max-width: 12rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
    color: var(--nz-muted);
}

/* Secondary line under a cell's main value */
.cert-sub {
    display: block;
    max-width: 15rem;
    overflow: hidden;
    color: var(--nz-faint-2);
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cert-greeting span {
    display: inline-block;
    max-width: 11rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}

.cert-add-greeting {
    padding: 0;
    border: 0;
    background: none;
    color: var(--nz-faint-2);
    font-size: 12px;
    font-weight: 500;
}

.cert-add-greeting:hover,
.cert-add-greeting:focus {
    color: var(--nz-primary);
    outline: none;
    text-decoration: underline;
}

.cert-dl,
.cert-more {
    width: 2rem;
    padding-left: 0;
    padding-right: 0;
}

.cert-more::after { display: none; }

/* Row menu: grouped, labelled, one icon column */
.cert-menu {
    min-width: 14rem;
    padding: .35rem 0;
    border: 1px solid var(--nz-border);
    border-radius: var(--nz-r-sm);
    box-shadow: 0 8px 24px rgba(16, 24, 40, .12);
}

.cert-menu .dropdown-header {
    padding: .35rem 1rem .2rem;
    color: var(--nz-faint-2);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.cert-menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .4rem 1rem;
    font-size: 13px;
}

.cert-menu .dropdown-item i { width: 1rem; color: var(--nz-faint-2); text-align: center; }
.cert-menu .dropdown-item:hover i { color: var(--nz-muted); }
.cert-menu .dropdown-divider { margin: .35rem 0; }
.cert-menu form { margin: 0; }

/* Bootstrap dropdowns are clipped by .table-responsive's overflow; once
   the table fits, the wrapper does not need to scroll. */
@media (min-width: 992px) {
    .table-responsive.table-menus { overflow: visible; }
}

/* Source pills — tinted rather than solid, so a column of them does not
   compete with the row's own content. */
.src-pill {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .2rem .5rem;
    border-radius: var(--nz-r-pill);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.src-pill i { font-size: 11px; opacity: .85; }

.src-manual { background: var(--nz-neutral-bg); color: var(--nz-muted); }
.src-api    { background: var(--nz-info-bg); color: var(--nz-info-fg); }
.src-bulk   { background: var(--nz-info-bg); color: var(--nz-info-fg); }
.src-qr     { background: var(--nz-ok-bg); color: var(--nz-primary); }

/* ── Live filters (public/js/auto-filter.js) ────────────────────────────
   Forms marked data-auto-filter submit themselves as you type or choose,
   so the only feedback left to give is that a reload is on its way. */
form[data-auto-filter] {
    position: relative;
}

form[data-auto-filter].auto-filter-loading::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, transparent, var(--nz-primary), transparent);
    background-size: 40% 100%;
    background-repeat: no-repeat;
    animation: auto-filter-sweep 900ms linear infinite;
}

@keyframes auto-filter-sweep {
    from { background-position: -40% 0; }
    to   { background-position: 140% 0; }
}

@media (prefers-reduced-motion: reduce) {
    form[data-auto-filter].auto-filter-loading::after { animation: none; }
}

/* ── Form sections ──────────────────────────────────────────────────────
   Groups a long form into labelled blocks so a single card can carry
   several themes without the fields running together. */
.form-section + .form-section {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--nz-divider);
}

.form-section-title {
    display: flex;
    align-items: center;
    gap: .45rem;
    margin-bottom: .9rem;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--nz-faint);
}

.form-section-title i {
    color: var(--nz-primary);
    font-size: 13px;
}

.form-group .required {
    color: var(--nz-danger-fg);
    font-weight: 700;
}

.form-group .optional {
    margin-left: .3rem;
    font-size: 11px;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    color: var(--nz-faint-2);
}

.form-card .input-group-text {
    background: var(--nz-bg-head);
    border-color: var(--nz-border-input);
    color: var(--nz-faint-2);
    min-width: 2.5rem;
    justify-content: center;
}

.form-card .card-footer {
    display: flex;
    align-items: center;
    gap: .5rem;
    background: var(--nz-row-hover);
    border-top: 1px solid var(--nz-divider);
}

/* A field that appears only for certain answers, called out as a follow-up */
.field-reveal {
    padding: .75rem;
    border: 1px dashed var(--nz-chart-3);
    border-radius: var(--nz-r-xs);
    background: var(--nz-bg-soft);
}

.field-reveal .form-text:last-child {
    margin-bottom: 0;
}

/* File field with a live thumbnail beside it */
.logo-picker {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
}

.logo-preview {
    flex: 0 0 auto;
    width: 4rem;
    height: 4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed var(--nz-border-input);
    border-radius: var(--nz-r-xs);
    background: var(--nz-bg-head);
    color: var(--nz-border-input);
    overflow: hidden;
}

.logo-preview img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Summary rail beside a form — balance, cost, running total */
.form-summary .sum-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: .5rem 0;
    font-size: 14px;
    color: var(--nz-muted);
}

.form-summary .sum-row + .sum-row {
    border-top: 1px dashed var(--nz-border);
}

.form-summary .sum-row b {
    font-size: 16px;
    color: var(--dash-ink, var(--nz-ink));
    font-variant-numeric: tabular-nums;
}

.form-summary .sum-row.total b {
    font-size: 20px;
    color: var(--nz-primary);
}

.form-summary .sum-row.short b {
    color: var(--nz-danger-fg);
}

.form-tips {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 13px;
    color: var(--nz-faint);
}

.form-tips li {
    display: flex;
    gap: .5rem;
    padding: .35rem 0;
    line-height: 1.45;
}

.form-tips li i {
    margin-top: .2rem;
    color: var(--nz-primary);
    font-size: 12px;
}

/* ── File drop zone ─────────────────────────────────────────────────────
   A labelled dashed target that wraps a hidden file input, so an upload
   field reads as a place to drop something rather than a bare button. */
.file-drop {
    position: relative;
    display: block;
    margin: 0;
    padding: 1.75rem 1rem;
    text-align: center;
    border: 2px dashed var(--nz-border-input);
    border-radius: var(--nz-r-sm);
    background: var(--nz-row-hover);
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}

.file-drop:hover,
.file-drop.is-over {
    border-color: var(--nz-primary);
    background: color-mix(in srgb, var(--nz-primary) 4%, transparent);
}

.file-drop.is-filled {
    border-style: solid;
    border-color: var(--nz-primary);
    background: color-mix(in srgb, var(--nz-primary) 5%, transparent);
}

/* The input covers the whole zone: it stays clickable, focusable and a
   native drop target, and browser validation can anchor its bubble to it. */
.file-drop input[type="file"] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.file-drop:focus-within {
    border-color: var(--nz-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--nz-primary) 15%, transparent);
}

.file-drop-icon {
    font-size: 28px;
    color: var(--nz-border-input);
    margin-bottom: .5rem;
}

.file-drop.is-filled .file-drop-icon {
    color: var(--nz-primary);
}

.file-drop-name {
    display: block;
    font-weight: 600;
    color: var(--nz-ink);
    word-break: break-all;
}

.file-drop-hint {
    display: block;
    margin-top: .15rem;
    font-size: 13px;
    color: var(--nz-faint-2);
}

/* ── Choice cards ───────────────────────────────────────────────────────
   Radio options given room to explain themselves — used where the choice
   changes what the rest of the form does. */
.choice-card {
    display: block;
    position: relative;
    margin: 0 0 .625rem;
    padding: .75rem .875rem .75rem 2.5rem;
    border: 1px solid var(--nz-border);
    border-radius: var(--nz-r-sm);
    background: var(--nz-bg);
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}

.choice-card:last-child {
    margin-bottom: 0;
}

.choice-card:hover {
    border-color: var(--nz-border-input);
}

.choice-card input[type="radio"] {
    position: absolute;
    top: 1rem;
    left: .875rem;
    margin: 0;
}

.choice-card-title {
    display: block;
    font-weight: 600;
    font-size: 15px;
    color: var(--nz-ink);
}

.choice-card-desc {
    display: block;
    margin-top: .1rem;
    font-size: 13px;
    line-height: 1.45;
    color: var(--nz-faint);
}

.choice-card.is-selected {
    border-color: var(--nz-primary);
    background: color-mix(in srgb, var(--nz-primary) 5%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--nz-primary) 25%, transparent);
}

/* Panel revealed by the selected choice, butted against its underside */
.choice-card.has-detail {
    margin-bottom: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.choice-detail {
    margin: 0 0 .625rem;
    padding: .75rem .875rem;
    border: 1px solid var(--nz-primary);
    border-top: 1px dashed color-mix(in srgb, var(--nz-primary) 35%, transparent);
    border-radius: 0 0 var(--nz-r-sm) var(--nz-r-sm);
    background: color-mix(in srgb, var(--nz-primary) 4%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--nz-primary) 25%, transparent);
    font-size: 13px;
    line-height: 1.5;
    color: var(--nz-muted);
}

.choice-detail .form-group:last-child {
    margin-bottom: 0;
}

/* ── Column reference list ──────────────────────────────────────────────
   Describes the columns a CSV import expects, in file order. */
.col-spec {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: colspec;
    font-size: 13px;
}

.col-spec li {
    display: flex;
    align-items: baseline;
    gap: .5rem;
    padding: .35rem 0;
    counter-increment: colspec;
    color: var(--nz-muted);
}

.col-spec li + li {
    border-top: 1px dashed var(--nz-divider);
}

.col-spec li::before {
    content: counter(colspec);
    flex: 0 0 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    background: var(--nz-neutral-bg);
    color: var(--nz-faint-2);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.25rem;
    text-align: center;
}

.col-spec b {
    color: var(--nz-ink);
    font-weight: 600;
}

.col-spec .tag {
    margin-left: auto;
    padding-left: .5rem;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--nz-faint-2);
    white-space: nowrap;
}

.col-spec .tag.req {
    color: var(--nz-danger-fg);
}

/* ── Compact job list ───────────────────────────────────────────────────
   A few recent records in a side rail, where a table would be too wide. */
.mini-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.mini-list li {
    display: flex;
    align-items: center;
    gap: .625rem;
    padding: .55rem 0;
    font-size: 13px;
}

.mini-list li + li {
    border-top: 1px solid var(--nz-divider);
}

.mini-list .mini-body {
    min-width: 0;
    flex: 1;
}

.mini-list .mini-title {
    display: block;
    font-weight: 600;
    color: var(--nz-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mini-list .mini-meta {
    display: block;
    color: var(--nz-faint-2);
    font-size: 12px;
}

/* ── Status pills ───────────────────────────────────────────────────────
   Tinted rather than solid, matching .src-pill, so a status column reads
   as metadata instead of competing with the row's own content. */
.status-pill {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .2rem .55rem;
    border-radius: var(--nz-r-pill);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.status-pill i { font-size: 11px; opacity: .9; }

.status-pill.is-pending    { background: var(--nz-warn-bg); color: var(--nz-warn-fg); }
.status-pill.is-processing { background: var(--nz-info-bg); color: var(--nz-info-fg); }
.status-pill.is-completed  { background: var(--nz-ok-bg); color: var(--nz-primary); }
.status-pill.is-failed     { background: var(--nz-danger-bg); color: var(--nz-danger-fg); }
.status-pill.is-cancelled  { background: var(--nz-neutral-bg); color: var(--nz-faint); }
.status-pill.is-refunded   { background: var(--nz-info-bg); color: var(--nz-info-fg); }

/* Credit ledger entry types, paired with .status-pill */
.txn-purchase   { background: var(--nz-info-bg); color: var(--nz-info-fg); }
.txn-deduction  { background: var(--nz-danger-bg); color: var(--nz-danger-fg); }
.txn-refund     { background: var(--nz-ok-bg); color: var(--nz-primary); }
.txn-adjustment { background: var(--nz-warn-bg); color: var(--nz-warn-fg); }

/* Roles, paired with .status-pill — internal team first, then brand side */
.role-superadmin { background: var(--nz-danger-bg); color: var(--nz-danger-fg); }
.role-admin      { background: var(--nz-warn-bg); color: var(--nz-warn-fg); }
.role-success    { background: var(--nz-info-bg); color: var(--nz-info-fg); }
.role-manager    { background: var(--nz-info-bg); color: var(--nz-info-fg); }
.role-executive  { background: var(--nz-neutral-bg); color: var(--nz-muted); }
.status-pill.is-active     { background: var(--nz-ok-bg); color: var(--nz-primary); }

/* QR campaign kind (views/admin/qr_campaigns.php) — a tree campaign is
   counted in trees, a forest one in CO2, so the row says which it is. */
.status-pill.is-tree       { background: var(--nz-ok-bg); color: var(--nz-primary); }
.status-pill.is-forest     { background: var(--nz-info-bg); color: var(--nz-info-fg); }

/* Bulk delivery mode (views/admin/bulk_schedules.php) — a batch goes out at
   once, a drip is metered over time, which changes what "pending" means. */
.status-pill.is-batch      { background: var(--nz-neutral-bg); color: var(--nz-muted); }
.status-pill.is-drip       { background: var(--nz-info-bg); color: var(--nz-info-fg); }

/* Error log inside a SweetAlert dialog (views/admin/bulk_schedules.php) */
.swal-error-log {
    max-height: 18rem;
    margin: 0;
    padding: .75rem;
    overflow: auto;
    border-radius: var(--nz-r-sm);
    background: var(--nz-bg-head);
    color: var(--nz-muted);
    font-size: 12px;
    line-height: 1.5;
    text-align: left;
    white-space: pre-wrap;
    word-break: break-word;
}
.status-pill.is-paused     { background: var(--nz-warn-bg); color: var(--nz-warn-fg); }
.status-pill.is-expired    { background: var(--nz-neutral-bg); color: var(--nz-faint); }

/* Campaign kind, same pill language as status */
.status-pill.is-tree       { background: var(--nz-ok-bg); color: var(--nz-primary); }
.status-pill.is-forest     { background: var(--nz-info-bg); color: var(--nz-info-fg); }

.status-pill.is-disabled   { background: var(--nz-danger-bg); color: var(--nz-danger-fg); }
.status-pill.is-neutral    { background: var(--nz-neutral-bg); color: var(--nz-muted); }

/* Billing arrangement, paired with .status-pill */
.bill-prepaid  { background: var(--nz-ok-bg); color: var(--nz-primary); }
.bill-postpaid { background: var(--nz-info-bg); color: var(--nz-info-fg); }

/* Support ticket lifecycle, same pill language as status */
.status-pill.is-open        { background: var(--nz-warn-bg); color: var(--nz-warn-fg); }
.status-pill.is-in-progress { background: var(--nz-info-bg); color: var(--nz-info-fg); }
.status-pill.is-resolved    { background: var(--nz-ok-bg); color: var(--nz-primary); }
.status-pill.is-closed      { background: var(--nz-neutral-bg); color: var(--nz-faint); }

/* ── Row progress ───────────────────────────────────────────────────────
   A count with a thin meter beneath it, for a table row reporting how far
   something has got against a total. */
.row-progress {
    min-width: 8rem;
}

.row-progress .row-count {
    display: block;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    color: var(--nz-muted);
}

.row-progress .row-count b { color: var(--nz-ink); }

.row-progress .row-failed { color: var(--nz-danger-fg); font-weight: 600; }

.row-meter {
    display: block;
    height: 5px;
    margin-top: .25rem;
    border-radius: var(--nz-r-pill);
    background: var(--nz-neutral-bg);
    overflow: hidden;
}

.row-meter > span {
    display: block;
    height: 100%;
    border-radius: var(--nz-r-pill);
    background: var(--nz-primary);
}

.row-meter > span.is-failed { background: var(--nz-danger-fg); }

/* ── Analytics period bar ───────────────────────────────────────────────
   Labels beside the range control, quiet enough not to read as headings. */
.range-label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--nz-faint-2);
}

/* ── Channel pills ──────────────────────────────────────────────────────
   Tinted from the same categorical hues the channel doughnut uses, so a
   channel keeps one colour wherever it appears. Pair with .src-pill. */
.chan-shopify { background: var(--nz-info-bg); color: var(--nz-info-fg); }
.chan-api     { background: var(--nz-danger-bg); color: var(--nz-danger-fg); }
.chan-qr      { background: var(--nz-ok-bg); color: var(--nz-primary); }
.chan-manual  { background: var(--nz-info-bg); color: var(--nz-info-fg); }

/* ── Impact report ──────────────────────────────────────────────────────
   A shareable one-pager: a hero band, equivalency cards and a milestone
   timeline. Shared by the admin and brand reports. */
.ir-hero {
    position: relative;
    overflow: hidden;
    margin-bottom: 1rem;
    padding: 2rem 1.75rem;
    border-radius: var(--dash-radius, .75rem);
    background: linear-gradient(135deg, var(--nz-primary-hover) 0%, var(--nz-primary) 55%, var(--nz-primary) 100%);
    color: var(--nz-white);
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}

/* A soft light source in the top-right, not a hard white disc */
.ir-hero::before {
    content: '';
    position: absolute;
    top: -55%;
    right: -12%;
    width: 26rem;
    height: 26rem;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 68%);
    pointer-events: none;
}

.ir-hero > * { position: relative; }

.ir-hero-logo {
    height: 42px;
    max-width: 180px;
    margin-bottom: .9rem;
    object-fit: contain;
}

.ir-hero-eyebrow {
    margin-bottom: .3rem;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .72);
}

.ir-hero-title {
    margin: 0 0 .35rem;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.2;
}

.ir-hero-meta {
    margin: 0;
    font-size: 14px;
    color: rgba(255, 255, 255, .8);
}

.ir-hero-figure {
    display: inline-flex;
    align-items: baseline;
    gap: .5rem;
    font-size: 3rem;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.ir-hero-figure i {
    font-size: 26px;
    color: var(--nz-chart-2);
}

.ir-hero-figure-label {
    display: block;
    margin-top: .4rem;
    font-size: 13px;
    color: rgba(255, 255, 255, .8);
}

/* Section heading between blocks of cards */
.ir-section-title {
    display: flex;
    align-items: baseline;
    gap: .5rem;
    margin: .25rem 0 .85rem;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--nz-faint);
}

.ir-section-title i { color: var(--nz-primary); font-size: 13.5px; }
.ir-section-title small { font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--nz-faint-2); }

/* "That's like…" cards */
.ir-equiv {
    height: 100%;
    padding: 1.25rem 1rem;
    text-align: center;
    background: var(--nz-bg);
    border: 1px solid var(--dash-border, var(--nz-border));
    border-radius: var(--dash-radius, .75rem);
}

.ir-equiv .ic {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    margin-bottom: .7rem;
    border-radius: 50%;
    font-size: 18px;
    color: var(--accent, var(--nz-primary));
    background-color: color-mix(in srgb, var(--accent, var(--nz-primary)) 14%, var(--nz-bg));
}

.ir-equiv .n {
    font-size: 26px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--dash-ink, var(--nz-ink));
    font-variant-numeric: tabular-nums;
}

.ir-equiv .l {
    margin-top: .3rem;
    font-size: 12px;
    line-height: 1.4;
    color: var(--dash-ink-muted, var(--nz-faint-2));
}

/* Milestone timeline */
/* Label and its control travel together, so a narrow screen never leaves a
   stranded "From" at the end of a line */
.ir-filter-field {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}

/* Event names are customer-facing copy and can run to a whole sentence, so
   the column truncates rather than growing the row four lines tall */
.ir-event-name {
    display: inline-block;
    max-width: 320px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}

.ir-timeline {
    margin: 0;
    padding: 0 0 0 1.6rem;
    list-style: none;
    position: relative;
}

.ir-timeline::before {
    content: '';
    position: absolute;
    top: .4rem;
    bottom: .4rem;
    left: 5px;
    width: 2px;
    background: var(--nz-neutral-bg);
}

.ir-timeline li {
    position: relative;
    padding-bottom: 1.1rem;
}

.ir-timeline li:last-child { padding-bottom: 0; }

.ir-timeline li::before {
    content: '';
    position: absolute;
    top: .3rem;
    left: -1.6rem;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--nz-primary);
    box-shadow: 0 0 0 3px var(--nz-white), 0 0 0 4px color-mix(in srgb, var(--nz-primary) 35%, transparent);
}

.ir-timeline li.is-future::before {
    background: var(--nz-border);
    box-shadow: 0 0 0 3px var(--nz-white), 0 0 0 4px var(--nz-border);
}

.ir-timeline .date {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--nz-faint-2);
}

.ir-timeline .title {
    display: flex;
    align-items: baseline;
    gap: .45rem;
    font-size: 15px;
    font-weight: 600;
    color: var(--nz-ink);
}

.ir-timeline li.is-future .title { color: var(--nz-faint-2); font-weight: 500; }
.ir-timeline .title i { font-size: 13px; }

/* Figures that must line up column-wise */
.num { font-variant-numeric: tabular-nums; }

/* ── Settings layout ────────────────────────────────────────────────────
   A long settings page reads better as a rail of sections beside the
   cards than as one undifferentiated scroll. */
.settings-nav {
    position: sticky;
    top: 1rem;
    padding: .4rem;
    background: var(--nz-bg);
    border: 1px solid var(--dash-border, var(--nz-border));
    border-radius: var(--dash-radius, .75rem);
}

.settings-nav a {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .5rem .7rem;
    border-radius: var(--nz-r-sm);
    font-size: 13px;
    font-weight: 500;
    color: var(--nz-muted);
    line-height: 1.3;
}

.settings-nav a i {
    width: 1rem;
    text-align: center;
    color: var(--nz-faint-2);
    font-size: 13px;
}

.settings-nav a:hover {
    background: var(--nz-bg-head);
    color: var(--nz-ink);
    text-decoration: none;
}

.settings-nav a.active {
    background: color-mix(in srgb, var(--nz-primary) 10%, transparent);
    color: var(--nz-primary);
    font-weight: 600;
}

.settings-nav a.active i { color: var(--nz-primary); }

/* Anchored cards must clear the sticky rail when jumped to */
.settings-section { scroll-margin-top: 1rem; }

/* ── Brand detail hero (views/admin/brand_details.php) ──────────────────
   Logo, name and standing on one line, with the two facts an admin looks
   for first sitting to the right of it. */
.brand-hero {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.1rem;
}

.brand-hero-mark {
    position: relative;
    flex: 0 0 auto;
    width: 68px;
    height: 68px;
}

/* Initials show through when there is no logo, or when its file is missing */
.brand-hero-initials,
.brand-hero-logo {
    position: absolute;
    top: 0;
    left: 0;
    width: 68px;
    height: 68px;
    border-radius: var(--nz-r-md);
}

.brand-hero-initials {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--nz-neutral-bg);
    color: var(--nz-faint);
    font-size: 26px;
    font-weight: 600;
}

.brand-hero-logo {
    object-fit: contain;
    background: var(--nz-bg);
    border: 1px solid var(--dash-border, var(--nz-border));
}

.brand-hero-body {
    flex: 1 1 16rem;
    min-width: 0;
}

.brand-hero-name {
    margin: 0 0 .4rem;
    font-size: 20px;
    font-weight: 600;
    color: var(--dash-ink, var(--nz-ink));
}

.brand-hero-pills {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
}

.brand-hero-domain {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    margin-top: .5rem;
    font-size: 13px;
    color: var(--nz-faint);
}

.brand-hero-domain i { font-size: 11px; }

.brand-hero-meta {
    display: flex;
    flex: 0 0 auto;
    gap: 2rem;
    padding-left: 1.5rem;
    border-left: 1px solid var(--dash-border, var(--nz-border));
}

@media (max-width: 767.98px) {
    .brand-hero-meta {
        padding-left: 0;
        border-left: 0;
        gap: 1.5rem;
    }
}

/* A row of on/off pills, where each one is a setting rather than a status */
.pill-row {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}

/* ── Key / value grid ───────────────────────────────────────────────────
   Read-only facts about a record, in labelled pairs. */
.kv-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem 1.5rem;
}

.kv .k {
    display: block;
    margin-bottom: .15rem;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--nz-faint-2);
}

.kv .v {
    font-size: 15px;
    font-weight: 600;
    color: var(--nz-ink);
    word-break: break-word;
}

.kv .v.is-empty { font-weight: 400; color: var(--nz-faint-2); }

/* ── Record identity head ───────────────────────────────────────────────
   Logo, name and status pills across the top of a card about one record. */
.record-head {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--nz-divider);
}

.record-logo {
    flex: 0 0 auto;
    width: 64px;
    height: 64px;
    padding: .25rem;
    border: 1px solid var(--nz-border);
    border-radius: var(--nz-r-sm);
    background: var(--nz-bg);
    object-fit: contain;
}

.record-logo.is-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    border-color: transparent;
    background: var(--nz-neutral-bg);
    color: var(--nz-faint);
    font-size: 20px;
    font-weight: 600;
    letter-spacing: .02em;
}

.record-head-body {
    min-width: 0;
}

.record-name {
    margin: 0 0 .4rem;
    font-size: 20px;
    font-weight: 600;
    color: var(--nz-ink);
    word-break: break-word;
}

.record-badges {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
}

/* ── Copyable value ─────────────────────────────────────────────────────
   A secret or snippet shown for copying rather than editing. */
.copy-field {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--nz-border);
    border-radius: var(--nz-r-sm);
    background: var(--nz-bg-head);
    overflow: hidden;
}

.copy-field code {
    flex: 1;
    min-width: 0;
    padding: .45rem .6rem;
    overflow-x: auto;
    white-space: nowrap;
    color: var(--nz-ink);
    background: none;
    font-size: 13px;
}

.copy-field button {
    flex: 0 0 auto;
    border: 0;
    border-left: 1px solid var(--nz-border);
    padding: 0 .75rem;
    background: var(--nz-bg);
    color: var(--nz-faint);
    font-size: 12px;
    font-weight: 600;
}

.copy-field button:hover { color: var(--nz-primary); }

/* ── Placeholder tokens ─────────────────────────────────────────────────
   The substitutions available inside a template. */
.token-list {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
}

.token-list code {
    padding: .15rem .45rem;
    border: 1px solid var(--nz-border);
    border-radius: var(--nz-r-pill);
    background: var(--nz-bg);
    color: var(--nz-info-fg);
    font-size: 12px;
}

/* ── Switch rows ────────────────────────────────────────────────────────
   One toggle per bordered row, so a stack of them stays scannable. */
.switch-row {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: .8rem .9rem;
    border: 1px solid var(--nz-border);
    border-radius: var(--nz-r-sm);
}

.switch-row + .switch-row { margin-top: .625rem; }

.switch-row .switch-body { min-width: 0; }

.switch-row .switch-title {
    display: block;
    font-weight: 600;
    font-size: 15px;
    color: var(--nz-ink);
}

.switch-row .switch-desc {
    display: block;
    margin-top: .1rem;
    font-size: 13px;
    line-height: 1.45;
    color: var(--nz-faint);
}

/* ── Rich-text editor skin ──────────────────────────────────────────────
   Summernote ships its own chrome; this brings it in line with the app's
   inputs so an editor does not read as a foreign control. */
.note-editor.note-frame {
    margin-bottom: 0;
    border: 1px solid var(--nz-border-input);
    border-radius: var(--nz-r-sm);
    overflow: hidden;
}

.note-editor.note-frame .note-toolbar {
    padding: .3rem .45rem;
    background: var(--nz-bg-head);
    border-bottom: 1px solid var(--nz-border);
}

.note-editor.note-frame .note-btn {
    border-color: var(--nz-border);
    background: var(--nz-bg);
    color: var(--nz-muted);
}

.note-editor.note-frame .note-btn:hover { color: var(--nz-primary); }

.note-editor.note-frame .note-editable {
    padding: 1rem 1.1rem;
    background: var(--nz-bg);
}

.note-editor.note-frame .note-statusbar {
    background: var(--nz-bg-head);
    border-top: 1px solid var(--nz-border);
}

/* What the editor draws has to be what the inbox draws. The editable area is a
   plain div in this page, so the app's own reset reaches inside it and renders
   an email template with rules no mail client has. Bootstrap's
   `b,strong{font-weight:bolder}` is the one that shows: `bolder` resolves
   against the inherited weight, so a bold run inside a paragraph set lighter
   than 350 came out at 400 in the editor - visibly not bold - while the
   delivered mail, whose own default is an absolute `bold`, drew it at 700.
   Paragraph margins differ the same way: Bootstrap drops the top one, a mail
   client keeps it. Both are put back to the mail-client value here. */
.note-editable b,
.note-editable strong {
    font-weight: bold;
}

.note-editable p {
    margin: 1em 0;
}

/* ── Emoji picker ───────────────────────────────────────────────────────
   A toolbar dropdown wide enough to read as a grid rather than a list,
   with its own scroll so long categories cannot push the page around. */
.gbt-emoji-menu {
    width: 20rem;
    max-width: 90vw;
    padding: .5rem;
}

.gbt-emoji-search { margin-bottom: .5rem; }

.gbt-emoji-grid {
    max-height: 15rem;
    overflow-y: auto;
}

.gbt-emoji-group-title {
    margin: .35rem 0 .2rem;
    font-size: 11px;
    font-weight: 600;
    color: var(--nz-faint-2);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.gbt-emoji-group {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: .1rem;
}

.gbt-emoji-cell {
    padding: .15rem 0;
    border: 0;
    border-radius: var(--nz-r-xs);
    background: transparent;
    font-size: 18px;
    line-height: 1.4;
    cursor: pointer;
}

.gbt-emoji-cell:hover,
.gbt-emoji-cell:focus {
    background: color-mix(in srgb, var(--nz-primary) 12%, transparent);
    outline: none;
}

.gbt-emoji-empty {
    padding: 1rem .25rem;
    color: var(--nz-faint-2);
    font-size: 13px;
    text-align: center;
}

/* ── GIF button and dialog ──────────────────────────────────────────── */
.gbt-gif-icon {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .03em;
}

.gbt-gif-panes {
    padding: .85rem .25rem .25rem;
}

/* The bundled GIFs: a grid of live thumbnails, since a still frame says
   little about an animation. */
.gbt-gif-library {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
    gap: .5rem;
    max-height: 17rem;
    overflow-y: auto;
}

.gbt-gif-tile {
    padding: .25rem;
    border: 1px solid var(--nz-border);
    border-radius: var(--nz-r-xs);
    background: var(--nz-bg);
    cursor: pointer;
    text-align: center;
}

.gbt-gif-tile img {
    display: block;
    width: 100%;
    border-radius: .25rem;
}

.gbt-gif-tile span {
    display: block;
    margin-top: .2rem;
    font-size: 11px;
    color: var(--nz-faint);
}

.gbt-gif-tile:hover { border-color: var(--nz-primary); }

.gbt-gif-tile.is-picked {
    border-color: var(--nz-primary);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--nz-primary) 20%, transparent);
}

.gbt-gif-tile.is-picked span { color: var(--nz-primary); }

.gbt-gif-preview {
    margin-top: .5rem;
    text-align: center;
}

.gbt-gif-preview img {
    max-width: 100%;
    max-height: 12rem;
    border: 1px solid var(--nz-border);
    border-radius: var(--nz-r-xs);
}

.gbt-gif-status:not(:empty) { margin-top: .25rem; }

/* ── Email preview ──────────────────────────────────────────────────────
   Frames the rendered body with the header a recipient would actually
   see, so the preview reads as an email rather than a white box. */
.email-preview {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 20rem;
    border: 1px solid var(--nz-border);
    border-radius: var(--nz-r-sm);
    background: var(--nz-bg);
    overflow: hidden;
}

.email-preview-head {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .6rem .85rem;
    background: var(--nz-bg-head);
    border-bottom: 1px solid var(--nz-border);
}

.email-preview-meta {
    min-width: 0;   /* lets the subject ellipsis instead of pushing the toggle out */
}

.email-preview-modes {
    flex: 0 0 auto;
}

.email-preview-from {
    display: block;
    font-size: 11px;
    color: var(--nz-faint-2);
}

.email-preview-subject {
    display: block;
    overflow: hidden;
    font-size: 14px;
    font-weight: 600;
    color: var(--nz-ink);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.email-preview-subject:empty::before {
    content: "(no subject)";
    font-weight: 400;
    color: var(--nz-faint-2);
}

/* The frame is drawn at a real inbox width and scaled into the pane, so it
   needs a clipping stage: a transform leaves the layout box at full size. */
.email-preview-viewport {
    flex: 1 1 auto;
    min-height: 0;
    padding: .5rem;
    overflow: auto;
    background: var(--nz-neutral-bg);
}

.email-preview-stage {
    position: relative;
    margin: 0 auto;
    overflow: hidden;
    background: var(--nz-bg);
}

.email-preview-stage iframe {
    position: absolute;
    top: 0;
    left: 0;
    border: 0;
    background: var(--nz-bg);
    transform-origin: 0 0;
}

/* Tokens are click-to-insert, so they need to look pressable */
.token-list code {
    cursor: pointer;
    user-select: none;
    transition: border-color .12s ease, color .12s ease, background-color .12s ease;
}

.token-list code:hover {
    border-color: var(--nz-primary);
    background: color-mix(in srgb, var(--nz-primary) 6%, transparent);
    color: var(--nz-primary);
}

/* Editor and preview share a row: keep both columns the same height */
.editor-pane { display: flex; flex-direction: column; height: 100%; }
.editor-pane > .note-editor { flex: 1 1 auto; }

/* ── Code blocks ────────────────────────────────────────────────────────
   A dark slab with its own header bar, so the copy control has somewhere
   to live instead of floating over the first line of code. */
.code-block {
    margin-bottom: 1rem;
    border-radius: var(--nz-r-sm);
    background: var(--nz-ink);
    overflow: hidden;
}

.code-block-head {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .4rem .75rem;
    background: rgba(255, 255, 255, .04);
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.code-block-lang {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--nz-faint-2);
}

.code-block-copy {
    margin-left: auto;
    padding: .15rem .55rem;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: var(--nz-r-xs);
    background: transparent;
    color: var(--nz-border-input);
    font-size: 12px;
    font-weight: 600;
}

.code-block-copy:hover {
    border-color: rgba(255, 255, 255, .32);
    background: rgba(255, 255, 255, .06);
    color: var(--nz-white);
}

.code-block pre {
    margin: 0;
    padding: .9rem 1rem;
    max-height: 30rem;
    overflow: auto;
    color: var(--nz-border-input);
    background: none;
    border: 0;
    font-size: 13px;
    line-height: 1.55;
}

/* ── HTTP method pills ──────────────────────────────────────────────────
   The verb an endpoint answers to, at a glance. */
.method-pill {
    display: inline-flex;
    align-items: center;
    padding: .12rem .45rem;
    border-radius: var(--nz-r-xs);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .05em;
    font-family: SFMono-Regular, Menlo, Consolas, monospace;
}

.method-pill.is-get  { background: var(--nz-info-bg); color: var(--nz-info-fg); }
.method-pill.is-post { background: var(--nz-ok-bg); color: var(--nz-primary); }

/* The path beside the verb */
.endpoint-path {
    font-family: SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 14px;
    font-weight: 600;
    color: var(--nz-ink);
    word-break: break-all;
}

/* Requirement markers in a parameter table */
.req-yes { background: var(--nz-danger-bg); color: var(--nz-danger-fg); }
.req-rec { background: var(--nz-warn-bg); color: var(--nz-warn-fg); }
.req-no  { background: var(--nz-neutral-bg); color: var(--nz-faint); }

/* ── Notes ──────────────────────────────────────────────────────────────
   An aside inside body copy — a tip, a caveat, a thing worth knowing.
   One shape, three tones, instead of four different Bootstrap alerts. */
.note {
    display: flex;
    gap: .6rem;
    padding: .7rem .9rem;
    border: 1px solid var(--nz-border);
    border-left: 3px solid var(--nz-faint-2);
    border-radius: var(--nz-r-xs);
    background: var(--nz-row-hover);
    font-size: 13px;
    line-height: 1.55;
    color: var(--nz-muted);
}

.note + .note { margin-top: .5rem; }

.note > i {
    flex: 0 0 auto;
    margin-top: .15rem;
    color: var(--nz-faint-2);
    font-size: 13px;
}

.note.is-tip     { border-left-color: var(--nz-primary); background: color-mix(in srgb, var(--nz-primary) 5%, transparent); }
.note.is-tip > i { color: var(--nz-primary); }

.note.is-warn     { border-left-color: var(--nz-warn-dot); background: var(--nz-warn-soft-bg); }
.note.is-warn > i { color: var(--nz-warn-dot); }

/* ── Guide typography ───────────────────────────────────────────────────
   Long-form help text needs more room to breathe than a form does. */
.guide-body { font-size: 15px; line-height: 1.65; color: var(--nz-neutral-fg); }
.guide-body > p:last-child { margin-bottom: 0; }
.guide-body ul, .guide-body ol { padding-left: 1.1rem; }
.guide-body li { margin-bottom: .35rem; }
.guide-body li:last-child { margin-bottom: 0; }
.guide-body strong { color: var(--nz-ink); }

.guide-body h6 {
    margin: 1.25rem 0 .5rem;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--nz-faint-2);
}

.guide-body h6:first-child { margin-top: 0; }

/* Q&A rows */
.faq-item { padding: .9rem 1.25rem; }
.faq-item + .faq-item { border-top: 1px solid var(--nz-divider); }

.faq-item .q {
    margin: 0 0 .2rem;
    font-size: 15px;
    font-weight: 600;
    color: var(--nz-ink);
}

.faq-item .a { margin: 0; font-size: 14px; line-height: 1.6; color: var(--nz-faint); }

/* ── Theme editor (views/admin/theme_editor.php) ───────────────────────────
   Colour fields in a grid, status pairs one per row, and a live miniature of
   the app. The preview's CSS variables are set by the page's script as the
   form changes, so everything inside it is drawn with the same components
   the app uses. */
.nz-color-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 14px 16px;
    margin-top: 12px;
}

.nz-color-field label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--nz-text);
    margin-bottom: 6px;
}

.nz-color-input {
    display: flex;
    align-items: center;
    gap: 8px;
}

.nz-color-input input[type="color"] {
    flex: none;
    width: 36px;
    height: 32px;
    padding: 2px;
    border: 1px solid var(--nz-border-input);
    border-radius: var(--nz-r-sm);
    background: var(--nz-bg);
    cursor: pointer;
}

.nz-color-input .form-control {
    min-width: 0;
    text-transform: lowercase;
}

.nz-status-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.nz-status-row {
    display: grid;
    grid-template-columns: 110px 1fr 1fr;
    align-items: end;
    gap: 12px 16px;
}

.nz-status-row > .nz-chip {
    justify-self: start;
    margin-bottom: 6px;
}

@media (max-width: 575.98px) {
    .nz-status-row { grid-template-columns: 1fr 1fr; }
    .nz-status-row > .nz-chip { grid-column: 1 / -1; }
}

.nz-form-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.nz-form-foot .form-text { margin: 0; }

@media (min-width: 992px) {
    .nz-preview-card {
        position: sticky;
        top: 20px;
    }
}

.nz-preview {
    display: flex;
    min-height: 360px;
    border: 1px solid var(--nz-border);
    border-radius: var(--nz-r-lg);
    overflow: hidden;
    background: var(--nz-bg);
    color: var(--nz-ink);
    font-family: var(--nz-font);
    font-size: var(--nz-fs);
    box-shadow: var(--nz-shadow-preview);
}

.nz-preview-side {
    flex: 0 0 150px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 14px 8px;
    border-right: 1px solid var(--nz-border);
    font-size: 12px;
}

.nz-preview-logo {
    height: 22px;
    width: auto;
    max-width: 120px;
    object-fit: contain;
    object-position: left;
    margin: 0 6px 10px;
}

.nz-preview-grp {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--nz-faint);
    padding: 10px 6px 4px;
}

.nz-preview-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: var(--nz-r-sm);
    color: var(--nz-text);
    font-weight: 500;
    white-space: nowrap;
}

.nz-preview-item.is-on {
    background: var(--nz-primary-tint);
    color: var(--nz-primary);
    font-weight: 700;
}

.nz-preview.is-dark .nz-preview-side {
    background: var(--nz-ink);
    border-right-color: transparent;
}

.nz-preview.is-dark .nz-preview-logo {
    background: var(--nz-white);
    border-radius: var(--nz-r-xs);
    padding: 2px 6px;
}

.nz-preview.is-dark .nz-preview-grp { color: rgba(255, 255, 255, .5); }
.nz-preview.is-dark .nz-preview-item { color: rgba(255, 255, 255, .74); }
.nz-preview.is-dark .nz-preview-item.is-on { background: rgba(255, 255, 255, .12); color: var(--nz-white); }

.nz-preview-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
}

.nz-preview-title {
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -.015em;
}

.nz-preview .nz-kpi { padding: 12px 14px; }
.nz-preview .nz-kpi-value { font-size: 20px; }
.nz-preview .table th,
.nz-preview .table td { padding: 8px 12px; }

.nz-preview-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.nz-preview-bars {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    height: 48px;
    border-bottom: 1px solid var(--nz-border);
}

.nz-preview-bars > span {
    flex: 1;
    border-radius: 3px 3px 0 0;
}

.nz-preview-bars > span:nth-child(1) { height: 30%; }
.nz-preview-bars > span:nth-child(2) { height: 46%; }
.nz-preview-bars > span:nth-child(3) { height: 62%; }
.nz-preview-bars > span:nth-child(4) { height: 52%; }
.nz-preview-bars > span:nth-child(5) { height: 74%; }
.nz-preview-bars > span:nth-child(6) { height: 92%; }

@media (max-width: 575.98px) {
    .nz-preview-side { display: none; }
}

/* ── Activity log (views/admin/activity_log.php) ─────────────────────────
   An audit trail is read by scanning, so the table breaks into days, the
   action families carry their own tint, and anything worth a second look
   is marked down the row's left edge. */
.log-table td { vertical-align: middle; }

.log-time-col { width: 5rem; }

.log-event-col { min-width: 15rem; }

/* Day separator — a heading inside the table rather than above it, so the
   column alignment survives. */
.log-table tr.log-day td {
    padding: .45rem .75rem;
    background: var(--nz-bg-head);
    border-top: 1px solid var(--nz-border);
    border-bottom: 1px solid var(--nz-divider);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--nz-muted);
}

.log-table tr.log-day td i {
    margin-right: .4rem;
    color: var(--nz-faint-2);
}

.log-table tr.log-day td span {
    margin-left: .45rem;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: var(--nz-faint-2);
}

.log-table tr.log-day:hover td { background: var(--nz-bg-head); }

/* The left edge is the only place a row can be flagged without the flag
   competing with the action pill it is flagging. */
.log-row.is-sensitive td:first-child {
    box-shadow: inset 3px 0 0 var(--nz-danger-fg);
}

/* Actor initials — round, so a person never reads as a brand logo */
.log-actor {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .02em;
}

.log-actor.is-system {
    background: var(--nz-neutral-bg);
    color: var(--nz-faint-2);
    font-size: 12px;
}

.log-desc {
    margin-top: .25rem;
    white-space: normal;
    max-width: 32rem;
}

.log-ip {
    font-family: SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
    color: var(--nz-muted);
    border-bottom: 1px dashed var(--nz-border-input);
}

.log-ip:hover,
.log-ip:focus {
    color: var(--nz-primary);
    border-bottom-color: currentColor;
    text-decoration: none;
}

.log-device i {
    margin-right: .25rem;
    color: var(--nz-faint-2);
}

.log-detail-btn { white-space: nowrap; }

/* Action families, paired with .status-pill */
.act-auth     { background: var(--nz-info-bg); color: var(--nz-info-fg); }
.act-admin    { background: var(--nz-info-bg); color: var(--nz-info-fg); }
.act-cert     { background: var(--nz-ok-bg); color: var(--nz-primary); }
.act-brand    { background: var(--nz-divider); color: var(--nz-muted); }
.act-user     { background: var(--nz-info-bg); color: var(--nz-info-fg); }
.act-billing  { background: var(--nz-warn-bg); color: var(--nz-warn-fg); }
.act-settings { background: var(--nz-neutral-bg); color: var(--nz-muted); }
.act-qr       { background: var(--nz-danger-bg); color: var(--nz-danger-fg); }
.act-ticket   { background: var(--nz-warn-soft-bg); color: var(--nz-warn-fg); }
.act-system   { background: var(--nz-neutral-bg); color: var(--nz-muted); }
.act-alert    { background: var(--nz-danger-bg); color: var(--nz-danger-fg); }

/* Event detail dialog */
.log-detail-headline {
    font-size: 16px;
    font-weight: 600;
    color: var(--nz-ink);
}

.log-detail-desc {
    margin-bottom: 1.1rem;
    color: var(--nz-muted);
}

.log-detail-subhead {
    margin-bottom: .4rem;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--nz-faint);
}

.log-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem 1.25rem;
    margin-bottom: 1.25rem;
}

.log-detail-grid > div { min-width: 0; }

.log-detail-grid .log-detail-wide { grid-column: 1 / -1; }

.log-detail-grid dt {
    margin-bottom: .1rem;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--nz-faint-2);
}

.log-detail-grid dd {
    margin: 0;
    color: var(--nz-ink);
    overflow-wrap: anywhere;
}

.log-json {
    max-height: 18rem;
    margin: 0;
    padding: .8rem;
    overflow: auto;
    background: var(--nz-bg-head);
    border: 1px solid var(--nz-border);
    border-radius: var(--nz-r-xs);
    font-size: 12px;
    color: var(--nz-text);
}

@media (max-width: 575.98px) {
    .log-detail-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ── System health (views/admin/system_health.php) ───────────────────────
   The page exists to answer one question, so the verdict is stated once at
   full width before any figure, and every check below repeats the same
   three-state vocabulary. */
.health-verdict {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
    padding: 1rem 1.15rem;
    border: 1px solid var(--dash-border, var(--nz-border));
    border-left: 4px solid var(--health-accent, var(--nz-primary));
    border-radius: var(--dash-radius, .75rem);
    background: var(--health-wash, var(--nz-bg-soft));
}

.health-verdict.is-ok   { --health-accent: var(--nz-primary); --health-wash: var(--nz-bg-soft); }
.health-verdict.is-warn { --health-accent: var(--nz-warn-fg); --health-wash: var(--nz-warn-soft-bg); }
.health-verdict.is-fail { --health-accent: var(--nz-danger-fg); --health-wash: var(--nz-bg-head); }

.health-verdict-icon {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--nz-bg);
    color: var(--health-accent);
    font-size: 18px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .06);
}

.health-verdict-body { flex: 1; min-width: 0; }

.health-verdict-title {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--health-accent);
}

.health-verdict-sub {
    margin: 0;
    font-size: 12px;
    color: var(--nz-faint);
}

.health-verdict-tally {
    display: flex;
    flex: 0 0 auto;
    gap: 1.1rem;
}

.health-tally {
    display: flex;
    flex-direction: column;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--nz-faint-2);
}

.health-tally b {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--nz-muted);
}

.health-tally.is-fail b { color: var(--nz-danger-fg); }
.health-tally.is-warn b { color: var(--nz-warn-fg); }
.health-tally.is-ok   b { color: var(--nz-primary); }

/* One check per row — the mark on the left is the only thing that needs
   scanning, so it carries the colour and the text stays neutral. */
.check-row {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: .7rem 1.15rem;
}

.check-row + .check-row { border-top: 1px solid var(--nz-divider); }

.check-mark {
    flex: 0 0 auto;
    margin-top: .1rem;
    font-size: 15px;
}

.check-row.is-ok   .check-mark { color: var(--nz-chart-2); }
.check-row.is-warn .check-mark { color: var(--nz-warn-dot); }
.check-row.is-fail .check-mark { color: var(--nz-danger-fg); }

.check-row.is-fail { background: var(--nz-bg-head); }

.check-body { flex: 1; min-width: 0; }

.check-name {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-weight: 600;
    color: var(--nz-ink);
}

.check-topic { color: var(--nz-faint-2); font-size: 13px; width: 1rem; text-align: center; }

.check-detail {
    display: block;
    margin-top: .1rem;
    font-size: 13px;
    color: var(--nz-faint);
}

.check-side {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: flex-end;
    gap: .25rem;
}

.check-link {
    font-size: 12px;
    font-weight: 600;
    color: var(--nz-faint-2);
    white-space: nowrap;
}

.check-link:hover,
.check-link:focus { color: var(--nz-primary); text-decoration: none; }

.check-link i { font-size: 11px; }

/* The three states, paired with .status-pill */
.health-ok   { background: var(--nz-ok-bg); color: var(--nz-primary); }
.health-warn { background: var(--nz-warn-bg); color: var(--nz-warn-fg); }
.health-fail { background: var(--nz-danger-bg); color: var(--nz-danger-fg); }
.health-off  { background: var(--nz-neutral-bg); color: var(--nz-faint); }

/* Key/value facts about a runtime — a definition list rather than a table,
   because nothing here is sortable or comparable down a column. */
.spec-list { margin: 0; }

.spec-list > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: .38rem 0;
}

.spec-list > div + div { border-top: 1px solid var(--nz-divider); }

.spec-list dt {
    font-weight: 500;
    font-size: 13px;
    color: var(--nz-faint);
}

.spec-list dd {
    margin: 0;
    font-weight: 600;
    font-size: 13px;
    color: var(--nz-ink);
    text-align: right;
    overflow-wrap: anywhere;
}

.spec-list dd .text-muted { font-weight: 500; font-size: 12px; }

/* Two or three figures sharing a card, without the weight of stat cards */
.split-figures {
    display: flex;
    gap: 1.5rem;
}

.split-figures > div { min-width: 0; }

.split-value {
    display: block;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--nz-ink);
}

.split-label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--nz-faint-2);
}

.last-error {
    padding: .6rem .7rem;
    background: var(--nz-bg-head);
    border: 1px solid var(--nz-border);
    border-radius: var(--nz-r-xs);
    font-family: SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
    color: var(--nz-muted);
    overflow-wrap: anywhere;
}

/* Scheduled jobs */
.job-row.is-flagged td:first-child { box-shadow: inset 3px 0 0 var(--nz-danger-fg); }

.job-desc {
    display: block;
    max-width: 22rem;
    white-space: normal;
}

.job-cron {
    padding: .1rem .35rem;
    border-radius: .25rem;
    background: var(--nz-neutral-bg);
    color: var(--nz-muted);
    font-size: 12px;
}

.job-reliability { min-width: 11rem; }

.job-reliability .row-meter { max-width: 9rem; }

@media (max-width: 767.98px) {
    .health-verdict { flex-wrap: wrap; }
    .health-verdict-tally { width: 100%; justify-content: space-between; }
    .split-figures { gap: 1rem; }
    .check-side { align-items: flex-start; }
}

/* A meter whose value is good but not perfect — a handful of failures in a
   long run history should read as amber, not as a solid red failure. */
.row-meter > span.is-partial { background: var(--nz-warn-dot); }

/* ── Disk usage (views/admin/disk_usage.php) ─────────────────────────────
   One bar carries the whole composition, so the proportions are read once
   rather than reassembled from a column of percentages. */
.composition-bar {
    display: flex;
    height: 26px;
    border-radius: var(--nz-r-xs);
    overflow: hidden;
    background: var(--dash-track, var(--nz-neutral-bg));
}

.composition-bar > span {
    display: block;
    height: 100%;
    transition: filter .15s ease;
}

.composition-bar > span + span { border-left: 1px solid rgba(255, 255, 255, .55); }

.composition-bar > span:hover { filter: brightness(1.12); }

.composition-key {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem 1.35rem;
    margin-top: .85rem;
}

.composition-item {
    display: inline-flex;
    align-items: baseline;
    gap: .35rem;
    font-size: 12px;
    color: var(--nz-faint);
}

.composition-item .dot {
    align-self: center;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex: 0 0 auto;
}

.composition-name { color: var(--nz-ink); }

.composition-item b { color: var(--nz-ink); font-weight: 600; }

.composition-pct { font-size: 12px; color: var(--nz-faint-2); }

/* Storage areas */
.area-icon {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--nz-r-sm);
    background: var(--nz-neutral-bg);
    color: var(--nz-faint-2);
    font-size: 13.5px;
}

.area-blurb {
    display: block;
    max-width: 26rem;
    white-space: normal;
}

.area-share-col { min-width: 12rem; }

.area-share-col .row-meter { max-width: 10rem; }

/* An area holding nothing is still worth listing — it just should not
   compete with the ones that do. */
.area-empty .cert-name,
.area-empty .area-blurb { color: var(--nz-faint-2); }

.area-empty .job-cron { opacity: .7; }

/* Largest files */
.file-name {
    display: block;
    max-width: 24rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.file-folder {
    font-family: SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
}

.file-meter {
    max-width: 6rem;
    margin-left: auto;
}

/* File kinds, paired with .status-pill */
.kind-image   { background: var(--nz-info-bg); color: var(--nz-info-fg); }
.kind-archive { background: var(--nz-warn-bg); color: var(--nz-warn-fg); }
.kind-pdf     { background: var(--nz-danger-bg); color: var(--nz-danger-fg); }
.kind-csv     { background: var(--nz-ok-bg); color: var(--nz-primary); }
.kind-log     { background: var(--nz-info-bg); color: var(--nz-info-fg); }
.kind-other   { background: var(--nz-neutral-bg); color: var(--nz-muted); }

@media (max-width: 767.98px) {
    .composition-key { gap: .35rem 1rem; }
    .area-blurb { max-width: none; }
}

/* ── Cron manager (views/admin/cron_manager.php) ─────────────────────────
   Shares the job row, pill and meter language with System Health; what is
   new here is the controls column and the run output. */
.job-policy {
    display: block;
    margin-top: .15rem;
    font-size: 12px;
}

.job-toggle-form { margin: 0; }

/* AdminLTE's switch is built for a form row; centred in a table cell it needs
   its own line box or the label sits off-centre. */
.job-toggle-form .custom-switch {
    display: inline-block;
    padding-left: 2.25rem;
    min-height: 1.5rem;
}

/* Trigger source, paired with .status-pill */
.trigger-manual    { background: var(--nz-info-bg); color: var(--nz-info-fg); }
.trigger-scheduled { background: var(--nz-neutral-bg); color: var(--nz-muted); }

.job-output {
    max-height: 22rem;
    margin: 0;
    padding: .85rem;
    overflow: auto;
    background: var(--nz-ink);
    border-radius: var(--nz-r-xs);
    color: var(--nz-border-input);
    font-size: 12px;
    line-height: 1.55;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* The switch takes the platform's green rather than Bootstrap's blue, scoped
   so no other switch on the site changes. */
.job-toggle-form .custom-control-input:checked ~ .custom-control-label::before {
    border-color: var(--nz-primary);
    background-color: var(--nz-primary);
}

.job-toggle-form .custom-control-input:focus ~ .custom-control-label::before {
    box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--nz-primary) 25%, transparent);
}

/* ── Backups (views/admin/backups.php) ───────────────────────────────────
   Shares the verdict banner, check rows, pills and job rows with System
   Health and the Cron Manager; what is new here is the coverage strip and
   the restore block. */

/* A backup page is really a question about days, not files: one cell per day
   of the retention window, filled where something could be restored from. */
.backup-coverage {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
}

.backup-day {
    display: inline-flex;
    flex: 1 1 1.6rem;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 1.6rem;
    height: 2.4rem;
    border: 1px solid var(--nz-border);
    border-radius: var(--nz-r-xs);
    background: repeating-linear-gradient(
        -45deg, var(--nz-row-hover), var(--nz-row-hover) 3px, var(--nz-neutral-bg) 3px, var(--nz-neutral-bg) 6px);
    color: var(--nz-border-input);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    cursor: default;
}

.backup-day.is-covered {
    border-color: var(--nz-chart-3);
    background: var(--nz-ok-bg);
    color: var(--nz-primary);
}

.backup-day b { font-weight: 600; line-height: 1.1; }

/* The window crosses a month boundary, so the first cell of each month says so */
.backup-month {
    font-size: 11px;
    font-style: normal;
    font-weight: 600;
    line-height: 1;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--nz-border-input);
}

.backup-day.is-covered .backup-month { color: var(--nz-chart-2); }

/* The last cell is today, and it is the one being asked about */
.backup-day:last-child { box-shadow: 0 0 0 2px rgba(27, 175, 122, .18); }

.backup-coverage-note {
    margin: .8rem 0 0;
    font-size: 13px;
    color: var(--nz-faint);
}

.check-row.is-off .check-mark { color: var(--nz-border-input); }

.backup-icon { color: var(--nz-warn-fg); background: var(--nz-warn-bg); }

.backup-file {
    display: block;
    color: var(--nz-text);
    font-size: 12px;
    overflow-wrap: anywhere;
}

/* A dump's size against the one before it: informative when it drifts,
   an alarm when it collapses. */
.backup-delta { color: var(--nz-faint-2); }
.backup-delta.is-shrunk { color: var(--nz-danger-fg); font-weight: 600; }

/* Where a copy came from, paired with .status-pill */
.backup-auto     { background: var(--nz-neutral-bg); color: var(--nz-muted); }
.backup-manual   { background: var(--nz-info-bg); color: var(--nz-info-fg); }
.backup-external { background: var(--nz-info-bg); color: var(--nz-info-fg); }

.restore-lead {
    margin-bottom: .75rem;
    font-size: 13px;
    color: var(--nz-muted);
}

.restore-lead code,
.backup-coverage-note code {
    padding: .05rem .3rem;
    border-radius: .25rem;
    background: var(--nz-neutral-bg);
    color: var(--nz-text);
    font-size: 12px;
}

.restore-cmd { max-height: none; }

.restore-hint { color: var(--nz-faint-2); }

.restore-note {
    margin: .75rem 0 0;
    font-size: 13px;
    color: var(--nz-warn-fg);
}

@media (max-width: 575.98px) {
    .backup-day { height: 2.1rem; }
}

/* ── Log viewer (views/admin/logs.php) ───────────────────────────────────
   Three separate records live behind one page, so each source is a card
   that states its own volume and freshness before it is opened. */
.log-source-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    margin-bottom: 1rem;
}

.log-source-tab {
    display: flex;
    align-items: center;
    gap: .7rem;
    flex: 1 1 14rem;
    padding: .6rem .85rem;
    background: var(--nz-bg);
    border: 1px solid var(--dash-border, var(--nz-border));
    border-radius: var(--dash-radius, .75rem);
    color: var(--nz-muted);
    text-decoration: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.log-source-tab:hover,
.log-source-tab:focus {
    border-color: var(--nz-border-input);
    color: var(--dash-ink, var(--nz-ink));
    text-decoration: none;
}

.log-source-tab.is-active {
    border-color: var(--nz-primary);
    box-shadow: 0 0 0 1px var(--nz-primary);
    color: var(--dash-ink, var(--nz-ink));
}

.log-source-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    border-radius: var(--nz-r-sm);
    background: var(--nz-neutral-bg);
    color: var(--nz-faint);
}

.log-source-tab.is-active .log-source-icon {
    background: color-mix(in srgb, var(--nz-primary) 12%, transparent);
    color: var(--nz-primary-hover);
}

.log-source-body { min-width: 0; }

.log-source-name {
    display: block;
    font-weight: 600;
    font-size: 14px;
}

.log-source-meta {
    display: block;
    font-size: 12px;
    color: var(--nz-faint-2);
}

/* The card header carries the file being read and, where allowed, the
   control that empties it */
.log-header-tools {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex-wrap: wrap;
}

/* What is on screen is a window onto a larger file — say so plainly */
.log-scope-note {
    margin: 0;
    padding: .6rem 1.25rem;
    background: var(--nz-bg-head);
    border-bottom: 1px solid var(--dash-border, var(--nz-border));
    color: var(--nz-faint-2);
    font-size: 12px;
}

/* An error entry is a message, where it came from, and a trace kept folded
   until someone wants it — never a reversed wall of lines. */
.err-entry {
    padding: .85rem 1.25rem;
    border-bottom: 1px solid var(--nz-divider);
}

.err-entry:last-child { border-bottom: 0; }

.err-entry.is-fatal { box-shadow: inset 3px 0 0 var(--nz-danger-fg); }

.err-head {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex-wrap: wrap;
    margin-bottom: .35rem;
}

.err-when {
    color: var(--nz-faint-2);
    font-size: 12px;
}

.err-abs {
    color: var(--nz-faint-2);
    font-variant-numeric: tabular-nums;
}

.err-abs::before { content: "\00b7"; margin: 0 .3rem; }

.err-trace-toggle {
    margin-left: auto;
    padding: 0;
    color: var(--nz-faint);
    font-size: 12px;
}

.err-trace-toggle:hover,
.err-trace-toggle.is-open { color: var(--nz-primary-hover); text-decoration: none; }

.err-message {
    margin: 0 0 .25rem;
    color: var(--dash-ink, var(--nz-ink));
    font-size: 14px;
    overflow-wrap: anywhere;
}

.err-origin {
    margin: 0;
    color: var(--nz-faint-2);
    font-family: SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
    overflow-wrap: anywhere;
}

.err-caller { margin-left: .75rem; }

.err-trace { margin-top: .6rem; }

/* Scheduler output */
.cron-msg { white-space: normal; }
.cron-msg.is-bad  { color: var(--nz-danger-fg); }
.cron-msg.is-skip { color: var(--nz-warn-fg); }

.cron-hint {
    display: inline-block;
    max-width: 100%;
    margin: 0 auto .75rem;
    text-align: left;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

@media (max-width: 575.98px) {
    .err-trace-toggle { margin-left: 0; }
    .err-caller { display: block; margin-left: 0; }
}

/* ── Admin user guide (views/admin/user_guide.php) ───────────────────────
   A guide is read in one of two ways: straight through, or by hunting for
   one answer. The contents column keeps its place for the first, and the
   search filters whole sections for the second. */
.guide-hero {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
    background: var(--nz-bg);
    border: 1px solid var(--dash-border, var(--nz-border));
    border-left: 4px solid var(--nz-primary);
    border-radius: var(--dash-radius, .75rem);
}

.guide-hero-body { flex: 1 1 20rem; min-width: 0; }

.guide-hero-title {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--dash-ink, var(--nz-ink));
}

.guide-hero-sub {
    margin: .15rem 0 0;
    color: var(--nz-faint-2);
    font-size: 13px;
}

.guide-hero-search { flex: 0 1 20rem; min-width: 14rem; }

.guide-search-status {
    margin: .35rem 0 0;
    color: var(--nz-faint-2);
    font-size: 12px;
}

/* Contents */
.guide-toc {
    position: sticky;
    top: 4.5rem;
    padding: .5rem;
    margin-bottom: 1rem;
    background: var(--nz-bg);
    border: 1px solid var(--dash-border, var(--nz-border));
    border-radius: var(--dash-radius, .75rem);
}

.guide-toc-label {
    margin: .25rem .5rem .4rem;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--nz-faint-2);
}

.guide-toc-link {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    padding: .4rem .55rem;
    border-radius: var(--nz-r-sm);
    color: var(--nz-muted);
    text-decoration: none;
}

.guide-toc-link > i:first-child {
    width: 1rem;
    margin-top: .15rem;
    text-align: center;
    color: var(--nz-faint-2);
    font-size: 13px;
}

.guide-toc-link:hover,
.guide-toc-link:focus {
    background: var(--nz-bg-head);
    color: var(--dash-ink, var(--nz-ink));
    text-decoration: none;
}

.guide-toc-link.is-current {
    background: color-mix(in srgb, var(--nz-primary) 10%, transparent);
    color: var(--nz-primary-hover);
}

.guide-toc-link.is-current > i:first-child { color: var(--nz-primary-hover); }

.guide-toc-name {
    display: block;
    font-size: 13px;
    font-weight: 500;
}

.guide-toc-blurb {
    display: block;
    color: var(--nz-faint-2);
    font-size: 11px;
}

.guide-toc-link.is-locked { color: var(--nz-faint-2); }

.guide-toc-lock { margin-left: auto; font-size: 11px; color: var(--nz-border-input); }

/* Sections */
.guide-section { scroll-margin-top: 5rem; }

/* Search hides whole sections. Both of these are flex by an author rule, so
   the browser's own [hidden] rule would lose without this. */
.guide-section[hidden],
.guide-toc-link[hidden] { display: none !important; }

.guide-section .card-header { align-items: center; }

.guide-section-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    margin-right: .5rem;
    border-radius: var(--nz-r-sm);
    background: color-mix(in srgb, var(--nz-primary) 10%, transparent);
    color: var(--nz-primary-hover);
    font-size: 13px;
}

.guide-section.is-locked .guide-section-icon {
    background: var(--nz-neutral-bg);
    color: var(--nz-faint-2);
}

.guide-section-tools {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex-wrap: wrap;
}

.guide-access {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    color: var(--nz-faint-2);
    font-size: 12px;
}

.guide-access.is-locked { color: var(--nz-danger-fg); }

.guide-subhead {
    margin: 1.25rem 0 .5rem;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--dash-ink, var(--nz-ink));
}

.guide-section .card-body > p { color: var(--nz-neutral-fg); }

.guide-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.guide-list > li {
    position: relative;
    padding: .3rem 0 .3rem 1.1rem;
    color: var(--nz-neutral-fg);
    font-size: 14px;
}

.guide-list > li::before {
    content: "";
    position: absolute;
    top: .75rem;
    left: .15rem;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--nz-border);
}

.guide-list > li > i:first-child { margin-right: .3rem; }

.guide-legend > li::before { display: none; }
.guide-legend > li { padding-left: 0; }
.guide-legend .status-pill { margin-right: .4rem; }

/* Numbered steps, with the numeral as part of the design */
.guide-steps {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: guide-step;
}

.guide-steps > li {
    position: relative;
    padding: .3rem 0 .3rem 2rem;
    color: var(--nz-neutral-fg);
    font-size: 14px;
    counter-increment: guide-step;
}

.guide-steps > li::before {
    content: counter(guide-step);
    position: absolute;
    top: .3rem;
    left: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 50%;
    background: var(--nz-neutral-bg);
    color: var(--nz-muted);
    font-size: 11px;
    font-weight: 600;
}

/* One note style with four voices, in place of five AdminLTE alert colours */
.guide-note {
    display: flex;
    gap: .6rem;
    margin: .9rem 0 0;
    padding: .7rem .85rem;
    border-radius: var(--nz-r-sm);
    background: var(--nz-bg-head);
    border-left: 3px solid var(--nz-border-input);
    color: var(--nz-neutral-fg);
    font-size: 13px;
}

.guide-note > i { margin-top: .15rem; color: var(--nz-faint-2); }

.guide-note.is-tip  { background: var(--nz-hover); border-left-color: var(--nz-primary); }
.guide-note.is-tip > i  { color: var(--nz-primary); }
.guide-note.is-info { background: var(--nz-info-bg); border-left-color: var(--nz-info-fg); }
.guide-note.is-info > i { color: var(--nz-info-fg); }
.guide-note.is-warn { background: var(--nz-warn-soft-bg); border-left-color: var(--nz-warn-dot); }
.guide-note.is-warn > i { color: var(--nz-warn-fg); }

/* A page of the panel, linked from the section that describes it */
.guide-pages {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
    gap: .5rem;
    margin: .25rem 0 .5rem;
}

.guide-page {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .6rem .75rem;
    border: 1px solid var(--dash-border, var(--nz-border));
    border-radius: var(--nz-r-sm);
    background: var(--nz-bg);
    color: var(--nz-muted);
    text-decoration: none;
    transition: border-color .15s ease, transform .15s ease;
}

a.guide-page:hover,
a.guide-page:focus {
    border-color: var(--nz-primary);
    color: var(--dash-ink, var(--nz-ink));
    text-decoration: none;
    transform: translateY(-1px);
}

.guide-page-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: var(--nz-r-sm);
    background: var(--nz-neutral-bg);
    color: var(--nz-faint);
    font-size: 13px;
}

.guide-page-body { min-width: 0; flex: 1; }

.guide-page-name {
    display: block;
    font-size: 13px;
    font-weight: 600;
}

.guide-page-desc {
    display: block;
    color: var(--nz-faint-2);
    font-size: 12px;
}

.guide-page-go {
    flex: 0 0 auto;
    color: var(--nz-border-input);
    font-size: 12px;
    text-align: right;
}

.guide-page-go small { display: block; font-size: 11px; }

.guide-page.is-locked { background: var(--nz-row-hover); }
.guide-page.is-locked .guide-page-icon { color: var(--nz-border-input); }
.guide-page.is-locked .guide-page-name { color: var(--nz-faint-2); }

/* Getting started */
.guide-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: .6rem;
    margin: .9rem 0 .25rem;
}

.guide-tile {
    padding: .8rem .85rem;
    border: 1px solid var(--dash-border, var(--nz-border));
    border-radius: var(--nz-r-sm);
}

.guide-tile-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.9rem;
    height: 1.9rem;
    margin-bottom: .4rem;
    border-radius: var(--nz-r-sm);
    background: color-mix(in srgb, var(--nz-primary) 10%, transparent);
    color: var(--nz-primary-hover);
    font-size: 13px;
}

.guide-tile-name {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--dash-ink, var(--nz-ink));
}

.guide-tile-desc {
    margin: .15rem 0 0;
    color: var(--nz-faint-2);
    font-size: 12px;
}

/* The two impersonation modes, side by side because the difference matters */
.guide-modes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: .6rem;
    margin: .5rem 0 .25rem;
}

.guide-mode {
    padding: .8rem .9rem;
    border: 1px solid var(--dash-border, var(--nz-border));
    border-radius: var(--nz-r-sm);
}

.guide-mode.is-view   { border-left: 3px solid var(--nz-warn-dot); }
.guide-mode.is-manage { border-left: 3px solid var(--nz-danger-fg); }

.guide-mode-name {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin: 0 0 .3rem;
    font-size: 14px;
    font-weight: 600;
    color: var(--dash-ink, var(--nz-ink));
}

.guide-mode-desc {
    margin: 0;
    color: var(--nz-faint);
    font-size: 13px;
}

/* Capability matrix */
.guide-matrix th { font-size: 12px; }
.guide-matrix td.is-you,
.guide-matrix th.is-you { background: color-mix(in srgb, var(--nz-primary) 5%, transparent); }

.guide-you {
    display: block;
    color: var(--nz-primary-hover);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.guide-yes { color: var(--nz-chart-2); }
.guide-no  { color: var(--nz-border-input); }

/* Questions */
.guide-faq-item + .guide-faq-item { border-top: 1px solid var(--nz-divider); }

.guide-faq-q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    width: 100%;
    padding: .7rem 0;
    background: none;
    border: 0;
    color: var(--dash-ink, var(--nz-ink));
    font-size: 14px;
    font-weight: 600;
    text-align: left;
}

.guide-faq-q:hover { color: var(--nz-primary-hover); }

.guide-faq-q > i {
    flex: 0 0 auto;
    color: var(--nz-border-input);
    font-size: 12px;
    transition: transform .15s ease;
}

.guide-faq-q[aria-expanded="true"] > i { transform: rotate(180deg); }

.guide-faq-a {
    margin: 0;
    padding: 0 0 .8rem;
    color: var(--nz-neutral-fg);
    font-size: 13px;
}

/* Sign-off */
.guide-help {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 1rem 1.25rem;
    background: var(--nz-bg);
    border: 1px solid var(--dash-border, var(--nz-border));
    border-radius: var(--dash-radius, .75rem);
}

.guide-help > div { flex: 1 1 14rem; }

.guide-help-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--nz-r-md);
    background: color-mix(in srgb, var(--nz-primary) 10%, transparent);
    color: var(--nz-primary-hover);
}

.guide-help-title {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--dash-ink, var(--nz-ink));
}

.guide-help-sub {
    margin: .1rem 0 0;
    color: var(--nz-faint-2);
    font-size: 13px;
}

/* Below the sidebar breakpoint the contents list would be half a screen of
   scrolling before the guide starts, so it becomes a row of chips instead. */
@media (max-width: 991.98px) {
    .guide-toc {
        position: static;
        display: flex;
        gap: .4rem;
        padding: .5rem;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .guide-toc-label { display: none; }

    .guide-toc-link {
        flex: 0 0 auto;
        align-items: center;
        padding: .35rem .6rem;
        border: 1px solid var(--dash-border, var(--nz-border));
        border-radius: var(--nz-r-2xl);
        white-space: nowrap;
    }

    .guide-toc-blurb { display: none; }

    .guide-toc-link.is-current { border-color: var(--nz-primary); }
}

@media print {
    .guide-toc, .guide-hero-search, .guide-section-tools, .guide-page-go { display: none !important; }
    .guide-section .collapse { display: block !important; }
}

/* ── My profile (views/admin/profile.php, views/brand/profile.php) ───────
   The password rules are the ones validate_password() enforces, shown
   before they bite rather than as an error afterwards. */
.pw-rules {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
    gap: .2rem .75rem;
    margin: .25rem 0 0;
    padding: 0;
    list-style: none;
}

.pw-rules li {
    display: flex;
    align-items: center;
    gap: .4rem;
    color: var(--nz-faint-2);
    font-size: 12px;
}

.pw-rules li > i { font-size: 11px; }

.pw-rules li.is-met { color: var(--nz-primary); }
.pw-rules li.is-met > i { font-size: 12px; }

/* One bar, coloured by how far the password has got */
.pw-meter {
    height: 4px;
    margin-top: .4rem;
    border-radius: 2px;
    background: var(--dash-track, var(--nz-neutral-bg));
    overflow: hidden;
}

.pw-meter > span {
    display: block;
    width: 0;
    height: 100%;
    border-radius: 2px;
    background: var(--nz-danger-fg);
    transition: width .2s ease, background-color .2s ease;
}

.pw-meter > span.is-fair   { background: var(--nz-warn-dot); }
.pw-meter > span.is-strong { background: var(--nz-chart-2); }

/* What the signed-in role may do */
.cap-list {
    margin: 0 0 .75rem;
    padding: 0;
    list-style: none;
}

.cap-list li {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    padding: .25rem 0;
    font-size: 13px;
}

.cap-list li > i { margin-top: .15rem; font-size: 13px; }

.cap-list li.is-yes { color: var(--nz-neutral-fg); }
.cap-list li.is-yes > i { color: var(--nz-chart-2); }

.cap-list li.is-no { color: var(--nz-faint-2); }
.cap-list li.is-no > i { color: var(--nz-border-input); }

/* One entry of this account's own audit trail */
.act-row {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    padding: .6rem 1.25rem;
    border-bottom: 1px solid var(--nz-divider);
}

.act-row:last-child { border-bottom: 0; }

.act-row .status-pill { flex: 0 0 auto; margin-top: .1rem; }

.act-body { flex: 1; min-width: 0; }

.act-name {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--dash-ink, var(--nz-ink));
}

.act-desc {
    display: block;
    color: var(--nz-faint-2);
    font-size: 12px;
    overflow-wrap: anywhere;
}

.act-desc em { font-style: normal; color: var(--nz-warn-fg); }

.act-when {
    flex: 0 0 auto;
    color: var(--nz-faint-2);
    font-size: 12px;
    white-space: nowrap;
}

/* "Brand Logo" chip in the email token list: inserts the logo image itself */
.token-list code.token-logo {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-family: inherit;
}

.token-list code.token-logo img {
    height: 16px;
    width: auto;
    max-width: 48px;
    object-fit: contain;
}

/* Bulk action bar over the Pending Requests queue. Hidden until a row is
   ticked, so an untouched table is not carrying a row of dead buttons. */
.pending-bulk-bar {
    background: var(--nz-bg-soft);
    border: 1px solid var(--nz-border-input);
    border-radius: .25rem;
    padding: .5rem .75rem;
    gap: .25rem;
}

.pending-bulk-bar[hidden] {
    display: none !important;
}

@media (max-width: 575.98px) {
    .pending-bulk-bar .ml-auto {
        margin-left: 0 !important;
        flex-basis: 100%;
        padding-top: .35rem;
    }
}


/* ============================================================================
   PAGE SWEEP — C: admin settings (brand settings, email, WhatsApp, notifications, payment gateway, forest, roles, integrations, profile, guides)
   ============================================================================ */

/* ============================================================================
   PHASE 3 C — ADMIN SETTINGS
   brand_settings, email_settings, whatsapp_settings, notification_settings,
   payment_gateway, forest_settings, roles_permissions, integrations, profile,
   guide, user_guide. Tokens only; see docs/design/netzero/PLAN.md.
   ============================================================================ */

/* Legend dots and row meters coloured by class, not inline hex
   (views/admin/integrations.php, forest_settings.php, payment_gateway.php).
   is-1..6 follow the chart series; is-ok / is-warn / is-bad / is-n are status. */
.channel-row .dot.is-1, .series-key .dot.is-1, .row-meter > span.is-1 { background: var(--nz-chart-1); }
.channel-row .dot.is-2, .series-key .dot.is-2, .row-meter > span.is-2 { background: var(--nz-chart-2); }
.channel-row .dot.is-3, .series-key .dot.is-3, .row-meter > span.is-3 { background: var(--nz-chart-3); }
.channel-row .dot.is-4, .series-key .dot.is-4, .row-meter > span.is-4 { background: var(--nz-chart-4); }
.channel-row .dot.is-5, .series-key .dot.is-5, .row-meter > span.is-5 { background: var(--nz-chart-5); }
.channel-row .dot.is-6, .series-key .dot.is-6, .row-meter > span.is-6 { background: var(--nz-chart-6); }

.channel-row .dot.is-ok   { background: var(--nz-primary); }
.channel-row .dot.is-warn { background: var(--nz-warn-dot); }
.channel-row .dot.is-bad  { background: var(--nz-danger-fg); }

.channel-row .dot.is-n,
.series-key .dot.is-n,
.row-meter > span.is-n    { background: var(--nz-faint-2); }

/* views/admin/brand_settings.php — eForest layout tiles */
.ad-tile-row { gap: 12px; }

.impact-tile .n.ad-tile-title {
    font-size: 16px;
    font-weight: 700;
}

/* Dark code slab for a preview or an example payload
   (views/admin/brand_settings.php modal, views/admin/guide.php API reference) */
.ad-code-pre {
    max-height: 400px;
    margin: 0 0 16px;
    padding: 14px 16px;
    overflow: auto;
    border-radius: var(--nz-r-sm);
    background: var(--nz-ink);
    color: var(--nz-border-input);
    font-family: var(--nz-mono);
    font-size: 12px;
    line-height: 1.55;
}

.modal-body > .ad-code-pre { margin-bottom: 0; }

/* views/admin/notification_settings.php — one channel inside an event card */
.ad-channel-card {
    background: var(--nz-bg-soft);
}

.ad-channel-card > .card-header { padding: 12px 16px; }
.ad-channel-card > .card-body { padding: 16px; }

/* views/admin/guide.php — accordion section heads */
.ad-acc-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    cursor: pointer;
    user-select: none;
}

.ad-acc-head:hover { background: var(--nz-row-hover); }

.ad-acc-head > .card-title > i { color: var(--nz-muted); }

.ad-acc-chevron {
    flex: none;
    color: var(--nz-muted);
    font-size: 13px;
    transition: transform .15s ease;
}

.ad-acc-head[aria-expanded="true"] .ad-acc-chevron { transform: rotate(180deg); }

/* views/admin/guide.php — the platform at a glance */
.ad-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
}

.ad-fact {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid var(--nz-border);
    border-radius: var(--nz-r-lg);
    background: var(--nz-bg);
}

.ad-fact-ic {
    flex: none;
    width: 36px;
    height: 36px;
    border-radius: var(--nz-r-md);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--nz-primary-tint);
    color: var(--nz-primary);
    font-size: 15px;
}

.ad-fact b {
    display: block;
    color: var(--nz-ink);
    font-weight: 700;
}

.ad-fact b + span {
    display: block;
    font-size: 12px;
    color: var(--nz-muted);
}

/* views/admin/guide.php — numbered integration flow */
.ad-steps {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ad-steps > li {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding-bottom: 18px;
}

.ad-steps > li:last-child { padding-bottom: 0; }

/* The rail joining one bubble to the next */
.ad-steps > li:not(:last-child)::before {
    content: "";
    position: absolute;
    top: 28px;
    bottom: 4px;
    left: 11px;
    width: 2px;
    background: var(--nz-divider);
}

.ad-steps b {
    display: block;
    margin-top: 2px;
    color: var(--nz-ink);
    font-weight: 700;
}

.ad-steps p {
    margin: 2px 0 0;
    color: var(--nz-text);
}

.nz-step.ad-step-done {
    background: var(--nz-primary);
    font-size: 11px;
}

/* views/admin/guide.php — API reference tables sit in a bordered frame */
.ad-ref-table {
    margin-bottom: 16px;
    border: 1px solid var(--nz-border);
    border-radius: var(--nz-r-sm);
}

.ad-ref-table .table tbody tr:last-child td { border-bottom: 0; }


/* ============================================================================
   PAGE SWEEP — E: auth screens, QR pages, printable invoice and report
   ============================================================================ */

/* ============================================================================
   PHASE 3 · GROUP E — auth screens and printable pages
   ----------------------------------------------------------------------------
   Appended after custom.css's own rules, so same-specificity selectors here
   override the older auth styles. The QR landing pages keep their own
   standalone stylesheet (public/css/qr_landing.css).

   Superseded by this block and no longer referenced by any markup (safe to
   delete from custom.css when merging): .auth-visual, .auth-visual--photo,
   .auth-visual-inner, .auth-visual-logo, .auth-visual-copy,
   .auth-visual-points, .auth-visual-foot, .auth-pane, .auth-pane-logo, and
   the .auth-input > i icon rules.
   ============================================================================ */

/* ── Auth split screen (templates/auth_header.php, auth_footer.php;
      views/auth/login.php, register.php, forgot_password.php) ─────────────
   docs/design/netzero/boards/Login.dc.html: form column on the left, a
   framed photo with the "Real trees. Real impact." card on the right. The
   two columns wrap (480px basis) so a phone gets the form first, full
   height, and the photo below it. */
.auth-split {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    min-height: 100vh;
    background-color: var(--nz-bg);
}

.auth-main {
    flex: 1 1 480px;
    min-width: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    padding: 32px 24px;
}

.auth-logo {
    align-self: flex-start;
    display: inline-block;
    line-height: 0;
}

.auth-logo img {
    display: block;
    width: auto;
    height: 40px;
}

.auth-center {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 0;
}

.auth-form {
    width: 100%;
    max-width: 400px;
}

.auth-heading {
    margin: 0;
    font-size: 30px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -.02em;
    color: var(--nz-ink);
}

.auth-subtitle {
    margin: 8px 0 0;
    font-size: 16px;
    line-height: 1.5;
    color: var(--nz-muted);
}

.auth-back {
    width: 32px;
    height: 32px;
    margin-bottom: 20px;
    color: var(--nz-ink);
    background-color: var(--nz-bg);
}

.auth-form .alert {
    margin: 20px 0 0;
    padding: 12px 14px;
}

/* Fields — 14px/600 label above a 46px input, 18px between fields. */
.auth-fields {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-top: 28px;
}

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

.auth-field + .auth-field { margin-top: 0; }

.auth-field label {
    display: block;
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--nz-ink);
}

/* "Forgot password?" sits on the password label's line. */
.auth-label-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.auth-label-row a {
    font-size: 14px;
    font-weight: 600;
    color: var(--nz-primary);
    text-decoration: none;
}

.auth-label-row a:hover,
.auth-label-row a:focus { color: var(--nz-link-hover); }

.auth-input .form-control {
    height: 46px;
    padding: 0 14px;
    border: 1px solid var(--nz-border-input);
    border-radius: var(--nz-r-md);
    background-color: var(--nz-bg);
    font-family: inherit;
    font-size: 15px;
    font-weight: 400;
    color: var(--nz-ink);
    box-shadow: none;
    transition: none;
}

.auth-input .form-control::placeholder { color: var(--nz-faint-2); }

.auth-input .form-control:focus {
    outline: 2px solid var(--nz-focus);
    outline-offset: 1px;
    border-color: var(--nz-primary);
    background-color: var(--nz-bg);
    box-shadow: none;
}

.auth-input--password .form-control { padding-right: 46px; }

.auth-reveal { right: 7px; }

.auth-row {
    margin: 0;
    font-size: 14px;
}

/* Out-ranks AdminLTE's bold label:not(.form-check-label) rule. */
.auth-check,
.auth-fields label.auth-check:not(.form-check-label) {
    font-weight: 400;
}

.auth-check {
    gap: 10px;
    font-size: 14px;
    color: var(--nz-text);
}

.auth-check input {
    width: 18px;
    height: 18px;
    accent-color: var(--nz-primary);
}

.auth-submit,
.auth-submit.btn {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    margin-top: 0;
    padding: 0 16px;
    border: 0;
    border-radius: var(--nz-r-md);
    background-color: var(--nz-primary);
    color: var(--nz-on-primary);
    font-size: 15px;
    font-weight: 700;
    box-shadow: none;
}

.auth-submit:hover,
.auth-submit:focus,
.auth-submit.btn:hover,
.auth-submit.btn:focus {
    background-color: var(--nz-primary-hover);
    color: var(--nz-on-primary);
    box-shadow: none;
}

.auth-footnote {
    margin: 28px 0 0;
    font-size: 14px;
    text-align: center;
    color: var(--nz-muted);
}

.auth-footnote a {
    font-weight: 700;
    color: var(--nz-primary);
    text-decoration: none;
}

.auth-footnote a:hover,
.auth-footnote a:focus { color: var(--nz-link-hover); }

.auth-copy {
    margin: 0;
    font-size: 13px;
    color: var(--nz-faint-2);
}

/* "Install Now" card — behaviour unchanged (public/js/pwa-install.js shows
   it on phones only); restyled as a soft design card with a secondary
   button, so it never competes with the primary Sign in button above. */
.auth-install {
    gap: 4px 12px;
    margin-top: 24px;
    padding: 14px 16px;
    border: 1px solid var(--nz-border);
    border-radius: var(--nz-r-lg);
    background-color: var(--nz-bg-soft);
}

.auth-install-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--nz-r-md);
}

.auth-install-copy strong {
    font-size: 15px;
    font-weight: 700;
    color: var(--nz-ink);
}

.auth-install-copy span {
    font-size: 13px;
    color: var(--nz-muted);
}

.auth-install-btn {
    height: 40px;
    margin-top: 10px;
    padding: 0 16px;
    border: 1px solid var(--nz-border-input);
    border-radius: var(--nz-r-md);
    background-color: var(--nz-bg);
    color: var(--nz-ink);
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
}

.auth-install-btn:hover,
.auth-install-btn:focus {
    background-color: var(--nz-hover-2);
    color: var(--nz-ink);
}

.auth-install-help {
    margin: 10px 0 0;
    padding-top: 10px;
    border-top: 1px solid var(--nz-border);
    font-size: 13px;
    color: var(--nz-text);
}

/* Right column: 16px-padded panel, radius-20 photo, white card bottom-left. */
.auth-media {
    flex: 1 1 480px;
    min-width: 0;
    display: flex;
    padding: 16px;
}

.auth-media-frame {
    position: relative;
    flex: 1;
    min-height: 420px;
    overflow: hidden;
    border-radius: var(--nz-r-2xl);
    background-color: var(--nz-bg-soft);
}

.auth-media-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.auth-media-card {
    position: absolute;
    left: 24px;
    right: 24px;
    bottom: 24px;
    max-width: 420px;
    padding: 22px 24px;
    border-radius: var(--nz-r-xl);
    background-color: var(--nz-bg);
}

.auth-media-title {
    margin: 0;
    font-size: 20px;
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: -.01em;
    color: var(--nz-ink);
}

.auth-media-text {
    margin: 6px 0 0;
    font-size: 16px;
    line-height: 1.6;
    color: var(--nz-text-2);
}

@media (max-width: 575.98px) {
    .auth-main { padding: 24px 16px; }
    .auth-center { padding: 32px 0; }
    .auth-heading { font-size: 26px; }
    .auth-media { padding: 0 16px 16px; }
    .auth-media-frame { min-height: 360px; }
    .auth-media-card {
        left: 16px;
        right: 16px;
        bottom: 16px;
        padding: 18px 20px;
    }
    .auth-media-text { font-size: 15px; }
}

/* ── Printable invoice and report (views/admin/generate_invoice.php,
      views/admin/generate_detailed_report.php) ────────────────────────────
   Standalone pages outside the app chrome: a bordered document sheet on a
   soft page. Print drops the page tint, the sheet frame, the back bar and the
   print button, and keeps the table head tint. */
.print-body {
    margin: 0;
    padding: 24px 16px;
    background-color: var(--nz-bg-soft);
}

.print-doc {
    max-width: 800px;
    margin: 0 auto;
    padding: 32px;
    border: 1px solid var(--nz-border);
    border-radius: var(--nz-r-lg);
    background-color: var(--nz-bg);
}

.print-doc--wide { max-width: 1040px; }

.print-doc .standalone-back { margin: 0 0 20px; }

.print-doc .standalone-back a {
    width: 32px;
    height: 32px;
    border: 1px solid var(--nz-border-input);
    border-radius: var(--nz-r-pill);
    background-color: var(--nz-bg);
    color: var(--nz-ink);
    font-size: 16px;
}

.print-doc .standalone-back a:hover,
.print-doc .standalone-back a:focus {
    background-color: var(--nz-hover-2);
    border-color: var(--nz-border-input);
    color: var(--nz-ink);
}

.print-doc-head {
    margin-bottom: 28px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--nz-border);
    text-align: center;
}

.print-doc-logo {
    display: block;
    width: auto;
    max-width: 100%;
    height: 48px;
    margin: 0 auto 16px;
}

.print-doc-head h1 { margin: 0; }

.print-doc-meta {
    margin: 10px 0 0;
    font-size: 14px;
    line-height: 1.7;
    color: var(--nz-text);
}

.print-doc-label {
    display: block;
    margin-bottom: 4px;
    font-size: 12px;
    font-weight: 600;
    color: var(--nz-muted);
}

.print-doc address {
    font-size: 14px;
    line-height: 1.6;
    color: var(--nz-text);
}

.print-doc .table-responsive {
    border: 1px solid var(--nz-border);
    border-radius: var(--nz-r-lg);
}

.print-doc .table-bordered,
.print-doc .table-bordered td,
.print-doc .table-bordered th {
    border-left: 0;
    border-right: 0;
}

.print-doc .table { margin-bottom: 0; }

.print-doc-totals {
    margin-top: 20px;
    font-size: 14px;
    color: var(--nz-text);
}

.print-doc-totals p { margin: 0 0 6px; }

.print-doc-total {
    font-size: 16px;
    color: var(--nz-ink);
}

.print-doc-sign { margin-top: 28px; }

.print-btn-container {
    margin-top: 28px;
    text-align: center;
}

@media (max-width: 575.98px) {
    .print-body { padding: 16px 0; }
    .print-doc {
        padding: 20px 16px;
        border-left: 0;
        border-right: 0;
        border-radius: 0;
    }
}

@media print {
    .print-body {
        padding: 0;
        background-color: var(--nz-bg);
    }
    .print-doc {
        max-width: none;
        padding: 0;
        border: 0;
        border-radius: 0;
    }
    .print-doc .table thead th {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    .print-btn-container,
    .standalone-back { display: none !important; }
}


/* ============================================================================
   PAGE SWEEP — Public home and verify pages (phase 4)
   ============================================================================ */

/* ============================================================================
   PUBLIC PAGES (views/public/home.php, verify.php; templates/public_*.php)
   Follows docs/design/netzero/boards/Home.dc.html. These pages load
   tokens.css + custom.css without Bootstrap, so the few basics they need are
   set here. Display type (60/40/36px) is the public pages' own scale.
   ============================================================================ */

.nzp-body {
    margin: 0;
    background: var(--nz-bg);
    color: var(--nz-ink);
    font-family: var(--nz-font);
    font-size: 15px;
    line-height: 1.5;
}

.nzp-body *,
.nzp-body *::before,
.nzp-body *::after {
    box-sizing: border-box;
}

.nzp-body img { max-width: 100%; }

.nzp-body h1,
.nzp-body h2,
.nzp-body h3 { margin: 0; }

.nzp-body .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;
}

.nzp-skip {
    position: absolute;
    left: 16px;
    top: -60px;
    z-index: 100;
    padding: 10px 14px;
    border-radius: var(--nz-r-sm);
    background: var(--nz-ink);
    color: var(--nz-white);
    font-weight: 700;
}

.nzp-skip:focus { top: 12px; color: var(--nz-white); }

.nzp-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding-left: 24px;
    padding-right: 24px;
}

.nzp-icon {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex: none;
}

/* Buttons — the public 48px shape */
.nzp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 48px;
    padding: 0 22px;
    border: 1px solid transparent;
    border-radius: var(--nz-r-md);
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.nzp-btn:hover { text-decoration: none; }

.nzp-btn-p,
.nzp-btn-p:focus { background: var(--nz-primary); color: var(--nz-on-primary); }
.nzp-btn-p:hover { background: var(--nz-primary-hover); color: var(--nz-on-primary); }

.nzp-btn-s,
.nzp-btn-s:focus { background: var(--nz-bg); color: var(--nz-ink); border-color: var(--nz-border-input); }
.nzp-btn-s:hover { background: var(--nz-hover-2); color: var(--nz-ink); }

.nzp-btn-sm {
    height: 42px;
    font-size: 14px;
    padding: 0 18px;
}

.nzp-navlink {
    color: var(--nz-text);
    text-decoration: none;
    font-weight: 500;
}

.nzp-navlink:hover { color: var(--nz-primary); text-decoration: none; }

/* Header */
.nzp-header {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--nz-bg);
    border-bottom: 1px solid var(--nz-border);
}

.nzp-header-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-top: 14px;
    padding-bottom: 14px;
}

.nzp-logo { display: inline-flex; }
.nzp-logo img { height: 40px; width: auto; display: block; }

.nzp-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 28px;
    font-size: 15px;
}

.nzp-header-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* Hero */
.nzp-hero {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 56px;
    padding-top: 72px;
    padding-bottom: 64px;
}

.nzp-hero-copy,
.nzp-hero-media {
    flex: 1 1 460px;
    min-width: 0;
}

.nzp-display {
    margin-top: 18px !important;
    font-size: clamp(38px, 5vw, 60px);
    line-height: 1.06;
    letter-spacing: -.03em;
    font-weight: 800;
    color: var(--nz-ink);
}

.nzp-lead {
    margin: 20px 0 0;
    max-width: 500px;
    font-size: 18px;
    line-height: 1.6;
    color: var(--nz-text-2);
}

.nzp-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 32px;
}

.nzp-hero-media { position: relative; }

.nzp-hero-img {
    display: block;
    width: 100%;
    height: 460px;
    object-fit: cover;
    border-radius: var(--nz-r-2xl);
}

.nzp-cert-card {
    position: absolute;
    right: 20px;
    bottom: 20px;
    left: 20px;
    max-width: 340px;
    margin-left: auto;
    display: block;
    padding: 16px 18px;
    border-radius: var(--nz-r-xl);
    background: var(--nz-bg);
    color: var(--nz-ink);
    box-shadow: var(--nz-shadow-float);
    text-decoration: none;
}

.nzp-cert-card:hover { color: var(--nz-ink); text-decoration: none; }

.nzp-cert-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.nzp-cert-no {
    font-size: 12px;
    color: var(--nz-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nzp-cert-card .nz-chip { font-weight: 700; }

.nzp-cert-trees {
    display: block;
    margin-top: 8px;
    font-size: 16px;
    font-weight: 700;
}

.nzp-cert-date {
    display: block;
    margin-top: 2px;
    font-size: 13px;
    color: var(--nz-muted);
}

/* Live numbers band */
.nzp-band {
    border-top: 1px solid var(--nz-border);
    border-bottom: 1px solid var(--nz-border);
}

.nzp-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 28px;
    padding-top: 36px;
    padding-bottom: 36px;
}

.nzp-stat-n {
    font-size: 36px;
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}

.nzp-stat-l {
    margin-top: 2px;
    font-weight: 600;
}

.nzp-stat-s {
    margin-top: 2px;
    font-size: 13px;
    color: var(--nz-primary);
}

.nzp-stat-s.is-muted { color: var(--nz-muted); }

/* Sections */
.nzp-section { padding-top: 96px; }

.nzp-h2 {
    margin-top: 10px !important;
    max-width: 640px;
    font-size: clamp(28px, 3.4vw, 40px);
    letter-spacing: -.02em;
    font-weight: 800;
    line-height: 1.15;
}

.nzp-section-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
    gap: 16px;
    margin-bottom: 28px;
}

.nzp-more {
    font-weight: 700;
    text-decoration: none;
}

/* How it works */
.nzp-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
    margin-top: 36px;
}

.nzp-step {
    padding: 28px;
    border: 1px solid var(--nz-border);
    border-radius: var(--nz-r-xl);
}

.nzp-step-ic {
    width: 44px;
    height: 44px;
    border-radius: var(--nz-r-lg);
    background: var(--nz-primary-tint);
    color: var(--nz-primary);
    display: flex;
    align-items: center;
    justify-content: center;
}

.nzp-step h3 {
    margin: 18px 0 6px;
    font-size: 20px;
    font-weight: 700;
}

.nzp-step p {
    margin: 0;
    color: var(--nz-text-2);
    line-height: 1.6;
}

/* For brands */
.nzp-brands {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 48px;
}

.nzp-brands-copy {
    flex: 1 1 400px;
    min-width: 0;
}

.nzp-brands-copy .nzp-h2 { max-width: none; }

.nzp-body-l {
    margin: 16px 0 0;
    font-size: 16px;
    line-height: 1.6;
    color: var(--nz-text-2);
}

.nzp-ticks {
    list-style: none;
    padding: 0;
    margin: 24px 0 28px;
    display: grid;
    gap: 12px;
}

.nzp-ticks li {
    display: flex;
    align-items: center;
    gap: 10px;
}

.nzp-ticks .nzp-icon { color: var(--nz-primary); }

.nzp-preview {
    flex: 1 1 520px;
    min-width: 0;
    padding: 20px;
    border: 1px solid var(--nz-border);
    border-radius: var(--nz-r-xl);
    box-shadow: var(--nz-shadow-preview);
}

.nzp-preview-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nzp-preview-head span {
    font-size: 12px;
    color: var(--nz-muted);
}

.nzp-preview-kpis {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 16px;
}

.nzp-preview-kpis > div {
    padding: 12px;
    border: 1px solid var(--nz-border);
    border-radius: var(--nz-r-md);
    min-width: 0;
}

.nzp-preview-kpis span {
    display: block;
    font-size: 12px;
    color: var(--nz-muted);
}

.nzp-preview-kpis b {
    display: block;
    margin-top: 4px;
    font-size: 20px;
    font-weight: 800;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nzp-bars {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    height: 140px;
    margin-top: 18px;
    padding-top: 8px;
    border-top: 1px dashed var(--nz-border);
}

.nzp-bars > span {
    flex: 1;
    min-height: 2px;
    border-radius: 4px 4px 0 0;
    background: var(--nz-chart-4);
}

.nzp-bars > span.is-now { background: var(--nz-chart-1); }

.nzp-bars-axis {
    display: flex;
    gap: 8px;
    margin-top: 6px;
    font-size: 12px;
    color: var(--nz-faint);
}

.nzp-bars-axis > span {
    flex: 1;
    text-align: center;
}

.nzp-preview-foot {
    margin-top: 8px;
    font-size: 12px;
    color: var(--nz-muted);
}

/* Verify */
.nzp-verify {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    padding: 36px;
    border: 1px solid var(--nz-border);
    border-radius: var(--nz-r-xl);
    background: var(--nz-bg-soft);
}

.nzp-verify-copy { flex: 1 1 360px; }

.nzp-verify-copy h2 {
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -.015em;
}

.nzp-verify-copy p {
    margin: 8px 0 0;
    color: var(--nz-text-2);
    line-height: 1.6;
}

.nzp-verify-form {
    flex: 1 1 420px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.nzp-input {
    flex: 1 1 220px;
    min-width: 0;
    height: 48px;
    padding: 0 14px;
    border: 1px solid var(--nz-border-input);
    border-radius: var(--nz-r-md);
    background: var(--nz-bg);
    color: var(--nz-ink);
    font-size: 15px;
}

.nzp-input.mono { font-size: 15px; }

.nzp-input:focus {
    outline: 2px solid var(--nz-focus);
    outline-offset: 1px;
    border-color: var(--nz-primary);
}

/* Stories */
.nzp-stories {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
}

.nzp-story {
    color: var(--nz-ink);
    text-decoration: none;
}

.nzp-story:hover { color: var(--nz-ink); text-decoration: none; }
.nzp-story:hover h3 { color: var(--nz-primary); }

.nzp-story img {
    display: block;
    width: 100%;
    height: 210px;
    object-fit: cover;
    border-radius: var(--nz-r-xl);
}

.nzp-story .nz-eyebrow { margin-top: 16px; }

.nzp-story h3 {
    margin-top: 6px;
    font-size: 18px;
    line-height: 1.4;
    font-weight: 700;
}

/* Trusted by — full-colour logos, no filter or hover effect */
.nzp-trusted-title {
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    color: var(--nz-muted);
}

.nzp-logos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
    margin-top: 20px;
}

.nzp-logo-tile {
    height: 64px;
    padding: 10px 16px;
    border: 1px solid var(--nz-border);
    border-radius: var(--nz-r-md);
    background: var(--nz-bg);
    display: flex;
    align-items: center;
    justify-content: center;
}

.nzp-logo-tile img {
    max-height: 100%;
    max-width: 100%;
    width: auto;
    object-fit: contain;
}

.nzp-end { height: 96px; }

/* Footer */
.nzp-footer { border-top: 1px solid var(--nz-border); }

.nzp-footer-inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 24px;
    padding-top: 40px;
    padding-bottom: 40px;
    font-size: 14px;
    color: var(--nz-muted);
}

.nzp-footer-logo { height: 32px; width: auto; display: block; }
.nzp-footer-note { margin-top: 10px; }

.nzp-footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    align-items: flex-start;
}

/* Verify page */
.nzp-verify-page { padding-top: 56px; max-width: 760px; }
.nzp-verify-form--page { margin-top: 24px; }
.nzp-verify-msg { margin-top: 20px; }
.nzp-verify-card { margin-top: 24px; }
.nzp-verify-card .nz-card-head h2 { font-size: 15px; overflow-wrap: anywhere; }
.nzp-verify-card .card-footer { display: flex; }

/* Phones */
@media (max-width: 767.98px) {
    .nzp-wrap { padding-left: 16px; padding-right: 16px; }
    .nzp-nav { order: 3; width: 100%; gap: 8px 20px; font-size: 14px; }
    .nzp-header-cta { margin-left: auto; }
    .nzp-header-cta .nzp-btn-p { display: none; }
    .nzp-logo img { height: 34px; }
    .nzp-hero { padding-top: 40px; padding-bottom: 40px; gap: 32px; }
    .nzp-hero-copy,
    .nzp-hero-media,
    .nzp-brands-copy,
    .nzp-preview,
    .nzp-verify-copy,
    .nzp-verify-form { flex-basis: 100%; }
    .nzp-hero-img { height: 320px; }
    .nzp-cert-card { position: static; max-width: none; margin-top: -48px; margin-left: 12px; margin-right: 12px; }
    .nzp-section { padding-top: 64px; }
    .nzp-verify { padding: 24px 20px; }
    .nzp-verify-form .nzp-btn { flex: 1 1 100%; }
    .nzp-preview-kpis { grid-template-columns: 1fr; }
    .nzp-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
    .nzp-stat-n { font-size: 28px; }
    .nzp-steps,
    .nzp-stories { grid-template-columns: 1fr; }
    .nzp-end { height: 64px; }
}


/* ============================================================================
   PAGE SWEEP — D (part 2): brand billing, analytics, impact, settings, users, integrations, tickets, profile
   ============================================================================ */

/* ============================================================================
   PHASE 3 · GROUP D (part 2) — brand billing, reports, setup and support
   views/brand/buy_credits, invoices, credit_transactions, analytics,
   impact_report, brand_settings, brand_users, integration,
   shopify_integration, tickets, ticket_create, ticket_detail, profile,
   user_guide. Tokens only; reuses the shared DESIGN COMPONENTS first.
   ============================================================================ */

/* ── Buy credits (views/brand/buy_credits.php) ─────────────────────────── */

/* Credit packs: the board's auto-fit grid of .nz-pack option cards */
.bd-packs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 14px;
}

.bd-packs > .nz-pack {
    font: inherit;
    width: 100%;
}

.bd-packs > .nz-pack.is-selected {
    box-shadow: 0 0 0 3px var(--nz-primary-tint);
}

.bd-custom-qty { max-width: 280px; }

/* Small muted note on the right of a card head ("Prices include GST") */
.bd-head-note {
    font-size: 13px;
    color: var(--nz-muted);
}

/* Order summary rail — sticks beside the pack list on wide screens */
@media (min-width: 992px) {
    .bd-summary { position: sticky; top: 20px; }
}

.nz-kv.bd-total {
    font-size: 18px;
    border-top: 1px solid var(--nz-border);
}

.nz-kv.bd-total > b { font-weight: 800; }

.bd-pay-note {
    margin: 10px 0 12px;
    font-size: 12px;
    color: var(--nz-muted);
    text-align: center;
}

.bd-summary { margin-bottom: 0; }

/* ── Credit ledger (views/brand/credit_transactions.php) ───────────────── */

/* Reference column: a long reference truncates (full text in title) */
.cert-sub.bd-ref { max-width: 18rem; }

/* ── Analytics (views/brand/analytics.php) ─────────────────────────────── */

/* Period bar: label, segmented range control, custom date form */
.bd-period {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.bd-period-form { gap: 8px; }

/* Credits meter inside a KPI tile */
.nz-meter.bd-kpi-meter { margin-top: 10px; }

/* ── Impact report (views/brand/impact_report.php) ─────────────────────── */

/* Small label above each of the two growth charts */
.bd-chart-label {
    margin-bottom: 8px;
    font-size: 12px;
    font-weight: 600;
    color: var(--nz-muted);
}

/* Milestone icons read in the primary colour, not a rainbow */
.bd-impact .ir-timeline .title i { color: var(--nz-primary); }
.bd-impact .ir-timeline li.is-future .title i { color: var(--nz-faint-2); }

/* Equivalency icons sit on the primary tint */
.bd-impact .ir-equiv .ic {
    color: var(--nz-primary);
    background-color: var(--nz-primary-tint);
}

/* Key/value rows inside a card body need no extra top/bottom padding */
.bd-kv-body { padding-top: 6px; padding-bottom: 6px; }

/* A collapsible card head is clickable as a whole */
.bd-collapse-head { cursor: pointer; }

/* Print the report alone: no app chrome, no filter bar */
@media print {
    body:has(.bd-impact) .main-header,
    body:has(.bd-impact) .main-sidebar,
    body:has(.bd-impact) .main-footer,
    body:has(.bd-impact) .content-header,
    .bd-impact .no-print { display: none !important; }

    body:has(.bd-impact) .content-wrapper { margin-left: 0 !important; padding: 0 !important; }
    .bd-impact .ir-hero,
    .bd-impact .card { break-inside: avoid; }
}

/* ── Shared by several brand pages in this group ───────────────────────── */

/* Tabbed card head (integration, shopify_integration, profile): the
   underline tabs sit on the card head's own bottom border */
.card-header.bd-tabs-head {
    padding: 0 20px;
    border-bottom: 1px solid var(--nz-border);
}

.card-header.bd-tabs-head .nav-tabs {
    margin-bottom: -1px;
    border-bottom: 0;
    flex-wrap: wrap;
}

.card-header.bd-tabs-head .nav-tabs .nav-link {
    padding: 14px 2px 12px;
}

.card-header.bd-tabs-head .nav-tabs .nav-link > i { color: var(--nz-muted); margin-right: 4px; }
.card-header.bd-tabs-head .nav-tabs .nav-link.active > i { color: var(--nz-primary); }

/* Title inside an .impact-tile used as an option / summary tile
   (brand_settings eForest layouts, user_guide "Getting started") */
.impact-tile .n.bd-tile-title {
    font-size: 15px;
    font-weight: 700;
}

/* A KPI tile whose value is text (a domain, a date), not a figure */
.nz-kpi-value.bd-kpi-text {
    font-size: 18px;
    letter-spacing: 0;
    word-break: break-all;
}

/* ── Brand settings (views/brand/brand_settings.php) ───────────────────── */

/* eForest widget code preview in the modal */
.bd-code-pre {
    max-height: 400px;
    margin: 0;
    padding: 16px;
    overflow: auto;
    border-radius: var(--nz-r-md);
    background: var(--nz-ink);
    color: var(--nz-white);
    font-family: var(--nz-mono);
    font-size: 12px;
}

/* ── Shopify integration (views/brand/shopify_integration.php) ─────────── */

/* The first form section in a column needs no divider above it */
.form-section.bd-section-first {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

/* Webhook error detail: truncates, full text in the title */
.cert-sub.bd-err { max-width: 20rem; }

/* ── Ticket detail (views/brand/ticket_detail.php) ─────────────────────── */

/* Conversation thread: the brand's own messages on the right on the
   primary tint, support's on the left on the soft surface */
.bd-thread .direct-chat-msg { margin-bottom: 16px; }

.bd-thread .direct-chat-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--nz-ink);
}

.bd-thread .direct-chat-timestamp {
    font-size: 12px;
    color: var(--nz-muted);
}

.bd-thread .direct-chat-text {
    margin: 6px 15% 0 0;
    padding: 12px 14px;
    border: 1px solid var(--nz-border);
    border-radius: var(--nz-r-lg);
    background: var(--nz-bg-soft);
    color: var(--nz-ink);
}

.bd-thread .direct-chat-text::before,
.bd-thread .direct-chat-text::after { display: none; }

.bd-thread .right .direct-chat-text {
    margin: 6px 0 0 15%;
    border-color: var(--nz-primary-tint);
    background: var(--nz-primary-tint);
    color: var(--nz-ink);
}

.bd-thread .direct-chat-text hr { border-top-color: var(--nz-border); }

.bd-attachment { font-size: 13px; }

@media (max-width: 575.98px) {
    .bd-thread .direct-chat-text,
    .bd-thread .right .direct-chat-text { margin-left: 0; margin-right: 0; }
}

/* ── My profile (views/brand/profile.php) ──────────────────────────────── */

/* Initials avatar — the top bar's ink circle, larger */
.bd-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--nz-ink);
    color: var(--nz-white);
    font-size: 26px;
    font-weight: 700;
}

/* Long values (an email) wrap inside a key/value row */
.bd-break { min-width: 0; overflow-wrap: anywhere; }


/* ============================================================================
   PAGE SWEEP — A: admin dashboard, analytics, reports, impact, logs, activity, system health, disk, backups, cron
   ============================================================================ */

/* ============================================================================
   PHASE 3 · GROUP A — admin dashboard, analytics, reports and system pages
   Tokens only (public/css/tokens.css). Builds on the DESIGN COMPONENTS
   section of custom.css; page-specific classes are prefixed .ad-.
   ============================================================================ */

/* ── views/admin/dashboard.php ─────────────────────────────────────────── */

/* The older dashboard rule squeezed table cells; tables follow the design */
.dash .table td,
.dash .table th {
    padding: 12px 20px;
}

.dash .table thead th { padding: 10px 20px; }

.ad-kpi-meter {
    height: 6px;
    margin-top: 10px;
}

.ad-strong-link {
    color: var(--nz-ink);
    font-weight: 700;
}

.ad-strong-link:hover,
.ad-strong-link:focus { color: var(--nz-primary); }

/* A count with a thin meter under it, inside a table cell */
.ad-bar-cell {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 120px;
}

.ad-bar-cell .nz-meter { height: 6px; }

.ad-bar-n {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.ad-low {
    color: var(--nz-warn-fg);
    font-weight: 700;
}

.ad-act-body { min-width: 0; }

.ad-act-link,
.ad-act-link:hover,
.ad-act-link:focus {
    color: var(--nz-text);
    text-decoration: none;
}

.ad-act-link b { color: var(--nz-ink); }
.ad-act-link:hover b { color: var(--nz-primary); }

.dash .nz-activity-time .cert-event {
    max-width: 220px;
    white-space: nowrap;
}

.dash .channel-row { font-size: 13px; }
.dash .donut-center .n { font-weight: 800; }

.ad-impact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
}

.dash .impact-tile .ic {
    background-color: var(--nz-primary-tint);
    color: var(--nz-primary);
}

.dash .impact-tile .n { font-weight: 800; }

/* ── views/admin/dashboard.php, analytics.php, reports.php, impact_report.php
   Shared bits: a quiet note on the right of a card head, the leaderboard ── */

.ad-head-note {
    font-size: 12px;
    color: var(--nz-muted);
}

.dash .lead-row { padding: 12px 20px; }
.dash .lead-name { font-weight: 700; }

.dash .lead-row:first-child .lead-rank {
    background: var(--nz-primary-tint);
    color: var(--nz-primary);
}

.dash .lead-value { font-weight: 800; }

/* ── views/admin/impact_report.php ─────────────────────────────────────── */

.ad-ir-filters { border-bottom: 0; }
.ad-ir-brand { min-width: 200px; }

.ad-block { margin-bottom: 20px; }

.ad-impact .ir-hero {
    margin-bottom: 20px;
    padding: 28px;
    border-radius: var(--nz-r-xl);
}

.ad-ir-hero-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.ad-ir-hero-text { flex: 1 1 320px; min-width: 0; }
.ad-ir-hero-fig  { flex: 0 1 auto; text-align: right; }

.ad-impact .ir-hero-title {
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -.015em;
    color: var(--nz-white);
}

.ad-impact .ir-hero-figure { font-weight: 800; letter-spacing: -.02em; }

.ad-impact .ir-section-title { margin: 0 0 12px; }

.ad-impact .ir-equiv {
    padding: 20px 16px;
    border-radius: var(--nz-r-lg);
}

.ad-impact .ir-equiv .ic {
    background-color: var(--nz-primary-tint);
    color: var(--nz-primary);
}

.ad-impact .ir-equiv .n { font-weight: 800; }
.ad-impact .ir-equiv .l { color: var(--nz-muted); }

/* Two charts side by side, stacking on a narrow screen */
.ad-chart-pair {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}

.ad-chart-caption {
    margin-bottom: 8px;
    font-size: 12px;
    color: var(--nz-muted);
}

.chart-canvas.ad-chart-sm { height: 230px; }

/* Two equal cards in a .nz-split row */
.nz-split > .ad-half { flex: 1 1 420px; }

.ad-kv-body { padding-top: 6px; padding-bottom: 6px; }

.ad-collapse-head { cursor: pointer; }

.ad-method-note { margin: 0; padding: 16px 20px; }

@media print {
    body:has(.ad-impact) .main-header,
    body:has(.ad-impact) .main-sidebar,
    body:has(.ad-impact) .main-footer,
    body:has(.ad-impact) .no-print,
    body:has(.ad-impact) .content-header { display: none !important; }

    body:has(.ad-impact) .content-wrapper { margin-left: 0 !important; padding: 0 !important; }

    .ad-impact .ir-hero,
    .ad-impact .card { break-inside: avoid; }
}

@media (max-width: 575.98px) {
    .ad-ir-hero-fig { text-align: left; }
    .ad-ir-brand { min-width: 0; }
    .ad-impact .ir-hero { padding: 20px; }
}

/* ── views/admin/activity_log.php ──────────────────────────────────────── */

/* Legend swatch for "Worth a look", matching the danger bars in the chart */
.series-key .dot.ad-fill-bad { background: var(--nz-danger-fg); }

/* ── views/admin/logs.php ──────────────────────────────────────────────── */

.ad-foot-note {
    background: var(--nz-bg);
    color: var(--nz-muted);
    font-size: 12px;
}

/* ── views/admin/disk_usage.php ────────────────────────────────────────────
   Storage areas take the theme's chart series in size order; the tail
   shares one neutral tone. One class colours the composition band, the
   legend dot and the row meters alike. */
.ad-tone-1,
.row-meter > span.ad-tone-1 { background: var(--nz-chart-1); }
.ad-tone-2,
.row-meter > span.ad-tone-2 { background: var(--nz-chart-2); }
.ad-tone-3,
.row-meter > span.ad-tone-3 { background: var(--nz-chart-3); }
.ad-tone-4,
.row-meter > span.ad-tone-4 { background: var(--nz-chart-4); }
.ad-tone-5,
.row-meter > span.ad-tone-5 { background: var(--nz-chart-5); }
.ad-tone-6,
.row-meter > span.ad-tone-6 { background: var(--nz-chart-6); }
.ad-tone-n,
.row-meter > span.ad-tone-n { background: var(--nz-faint-2); }

.area-icon.is-used {
    background: var(--nz-primary-tint);
    color: var(--nz-primary);
}

/* ── views/admin/backups.php ───────────────────────────────────────────── */

.nz-rowact.ad-rowact-danger:hover,
.nz-rowact.ad-rowact-danger:focus {
    background: var(--nz-danger-bg);
    color: var(--nz-danger-fg);
}


/* ============================================================================
   PAGE SWEEP — D (part 1): brand dashboard, certificates, plant, import, pending, schedules, QR campaigns
   ============================================================================ */

/* ============================================================================
   PHASE 3 · GROUP D (part 1) — brand dashboard, certificates, plant flows,
   bulk jobs and QR campaigns (views/brand/*). Tokens only; shared design
   components come from the DESIGN COMPONENTS section of custom.css.
   ============================================================================ */

/* ── Shared across the brand views in this group ───────────────────────── */

.bd-ink { color: var(--nz-ink); }

/* A filter-chip row sitting directly inside a card, under .nz-filters */
.bd-filter-chips {
    margin: 0;
    padding: 10px 20px;
    border-bottom: 1px solid var(--nz-border);
}

.nz-filters .input-group-text { height: 38px; }

/* Form footer section: actions on the right, soft head background */
.bd-sec-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    background: var(--nz-bg-head);
    border-radius: 0 0 var(--nz-r-lg) var(--nz-r-lg);
}

/* A single-column form card that should not stretch across a wide screen */
.bd-form-narrow { max-width: 820px; }

/* Key/value rows inside a card body: values may wrap */
.bd-kv .nz-kv { align-items: baseline; }
.bd-kv .nz-kv > span:first-child { flex: none; }

.bd-kv-long {
    min-width: 0;
    max-width: 65%;
    font-weight: 400;
    overflow-wrap: anywhere;
}

/* ── views/brand/dashboard.php ─────────────────────────────────────────── */

.bd-key {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 12px;
    font-size: 13px;
    color: var(--nz-muted);
}

.bd-key > span { display: inline-flex; align-items: center; gap: 6px; }
.bd-key b { color: var(--nz-ink); font-variant-numeric: tabular-nums; }

.bd-meters {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.bd-meter-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 6px;
    font-size: 13px;
}

.bd-meter-row b { font-variant-numeric: tabular-nums; }

.bd-event {
    display: inline-block;
    max-width: 280px;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
}

.bd-impact .nz-kv small {
    display: block;
    font-size: 12px;
    color: var(--nz-faint);
}

.nz-kpi-delta a {
    color: inherit;
    text-decoration: underline;
}

/* ── views/brand/request.php ───────────────────────────────────────────── */

.bd-tabs { margin-bottom: 16px; }

.bd-count {
    margin-left: auto;
    font-size: 13px;
}

a.bd-cert-no {
    font-size: 13px;
    font-weight: 500;
    color: var(--nz-ink);
}

a.bd-cert-no:hover { color: var(--nz-primary); }

/* ── views/brand/add_request.php — 42px tree-count stepper ─────────────── */

.bd-stepper-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
}

.bd-stepper {
    display: inline-flex;
    border: 1px solid var(--nz-border-input);
    border-radius: var(--nz-r-sm);
    overflow: hidden;
    background: var(--nz-bg);
}

.bd-step {
    width: 42px;
    height: 42px;
    border: 0;
    background: var(--nz-bg);
    color: var(--nz-ink);
    font: inherit;
    font-size: 18px;
    cursor: pointer;
}

.bd-step:hover,
.bd-step:focus { background: var(--nz-hover-2); }

.bd-stepper .form-control {
    width: 64px;
    height: 42px;
    padding: 0;
    border: 0;
    border-left: 1px solid var(--nz-border-input);
    border-right: 1px solid var(--nz-border-input);
    border-radius: 0;
    text-align: center;
    font-size: 16px;
    font-weight: 800;
    -moz-appearance: textfield;
    appearance: textfield;
}

.bd-stepper .form-control::-webkit-outer-spin-button,
.bd-stepper .form-control::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* ── views/brand/request_details.php ───────────────────────────────────── */

.bd-preview-card { position: relative; }

.bd-head-acts {
    display: flex;
    align-items: center;
    gap: 6px;
}

.bd-preview {
    padding: 16px;
    text-align: center;
}

.bd-preview img {
    max-height: 350px;
    border: 1px solid var(--nz-border);
    border-radius: var(--nz-r-md);
}

.bd-send {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.bd-send form { margin: 0; }

/* ── views/brand/preview_csv_requests.php ──────────────────────────────── */

.bd-grid input[data-missing] {
    border-color: var(--nz-danger-fg);
    background: var(--nz-danger-bg);
}

.bd-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

/* ── views/brand/bulk_schedules.php — error log in the SweetAlert ──────── */

.bd-errlog {
    max-height: 300px;
    overflow: auto;
    text-align: left;
    white-space: pre-wrap;
    font-family: var(--nz-mono);
    font-size: 12px;
    color: var(--nz-text);
}

/* ── views/brand/bulk_progress.php ─────────────────────────────────────── */

.progress.bd-progress-lg { height: 12px; }

.nz-kpis.bd-kpis-tight {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
}

.bd-kpis-tight .nz-kpi { padding: 14px 16px; }

.bd-err {
    min-width: 200px;
    white-space: normal;
    font-size: 12px;
    color: var(--nz-danger-fg);
}

/* ── views/brand/qr_campaign_create.php — campaign type cards ──────────── */

.bd-type {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
}

.bd-type .nz-pack { margin: 0; padding: 16px; }

.bd-type .nz-pack input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.bd-type .nz-pack:focus-within {
    outline: 2px solid var(--nz-focus);
    outline-offset: 1px;
}

/* ── views/brand/qr_campaign_edit.php ──────────────────────────────────── */

.bd-color-field { max-width: 240px; }

.bd-color-swatch {
    flex: 0 0 48px;
    padding: 2px;
    cursor: pointer;
}

.bd-banner-preview {
    max-width: 100%;
    max-height: 150px;
    border: 1px solid var(--nz-border);
    border-radius: var(--nz-r-sm);
}

.bd-remove-banner {
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    color: var(--nz-danger-fg);
}

/* ── views/brand/qr_campaign_detail.php ────────────────────────────────── */

.bd-head-chip {
    margin-left: 8px;
    vertical-align: middle;
}

.bd-qr-img { max-width: 250px; }

.bd-btn-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

.bd-snippet { font-size: 12px; }

@media (max-width: 575.98px) {
    .bd-count { margin-left: 0; }
    .bd-kv-long { max-width: 60%; }
}


/* ============================================================================
   PAGE SWEEP — B: admin brands, users, certificates, plant trees, billing, QR, schedules, CO2, tickets
   ============================================================================ */

/* ============================================================================
   PHASE 3 · B — ADMIN OPERATIONS
   Brands, users, certificates, planting, credits, invoices, partners, QR,
   bulk schedules, CO2 activities and tickets. Built on the shared design
   components above; only what those cannot express lives here.
   ============================================================================ */

/* templates/pagination.php — one footer row like the boards: the count and
   page size on the left, the page links on the right. */
.nz-pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 13px;
    color: var(--nz-muted);
}

.nz-pager-info {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
}

.nz-pager-limit {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.nz-pager-limit label {
    font-weight: 600;
    color: var(--nz-muted);
}

.nz-pager-limit .form-control {
    width: auto;
    height: 32px;
    padding: 0 28px 0 10px;
}

/* templates/pending_queue_table.php — the bulk bar on the token radius */
.pending-bulk-bar {
    border-color: var(--nz-border);
    border-radius: var(--nz-r-md);
    padding: 8px 12px;
    gap: 8px;
}

/* Shared by the admin list pages — a search field with its icon inside,
   sitting in a .nz-filters bar (views/admin/brands.php, users.php, …). */
.ad-search {
    position: relative;
    display: flex;
    align-items: center;
    min-width: 0;
}

.ad-search > i {
    position: absolute;
    left: 12px;
    color: var(--nz-faint);
    font-size: 14px;
    pointer-events: none;
}

.ad-search > .form-control {
    width: 100%;
    height: 38px;
    padding-left: 36px;
}

.nz-filters .btn {
    height: 38px;
}

.ad-filters-count {
    margin-left: auto;
    font-size: 13px;
    color: var(--nz-muted);
}

.ad-filter-chips {
    padding: 10px 20px;
    border-bottom: 1px solid var(--nz-border);
}

@media (max-width: 575.98px) {
    .nz-filters > .custom-select,
    .nz-filters > .form-control,
    .nz-filters > .ad-search { flex: 1 1 100%; max-width: none; width: 100%; }
    .ad-filters-count { margin-left: 0; }
}

/* views/admin/brands.php — the board's brand cell: a 32px logo tile with the
   initials underneath; a logo that loads covers them, one that fails removes
   itself and uncovers them. */
.ad-logo-tile {
    position: relative;
}

.ad-logo-tile > img {
    position: absolute;
    inset: 0;
}

.ad-brand-name {
    font-weight: 700;
    color: var(--nz-ink);
}

.ad-brand-name:hover {
    color: var(--nz-primary);
}

/* views/admin/brand_details.php (and other detail pages) — key/value rows
   inside a card, the board's side-detail list. */
.ad-kv-list {
    padding: 8px 20px;
}

.nz-kv > b.is-empty {
    font-weight: 400;
    color: var(--nz-faint-2);
}

.nz-kv > b small { font-weight: 400; }

.ad-kpi-meter {
    margin-top: 10px;
}

.ad-kv-list--ruled {
    border-top: 1px solid var(--nz-border);
}

/* views/admin/edit_brand.php, edit_user.php — the record card beside the
   form: mark, name, chips, then key/value rows. */
.ad-profile {
    text-align: center;
}

.ad-profile-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin-bottom: 12px;
    border-radius: var(--nz-r-lg);
    background: var(--nz-ink);
    color: var(--nz-white);
    font-size: 20px;
    font-weight: 800;
}

.ad-profile-mark.is-round { border-radius: var(--nz-r-pill); }
.ad-profile-mark.is-muted { background: var(--nz-neutral-bg); color: var(--nz-neutral-fg); }

.ad-profile-logo {
    display: block;
    max-width: 120px;
    max-height: 80px;
    margin: 0 auto 12px;
    object-fit: contain;
}

.ad-profile-name {
    margin: 0 0 4px;
    font-size: 18px;
    font-weight: 800;
    color: var(--nz-ink);
}

.ad-profile-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
}

.ad-logo-thumb {
    max-width: 100px;
}

/* Underline tabs sitting in a card head (edit_brand, edit_user, plant_trees) */
.card-header.ad-tabs-head {
    padding: 0 20px;
}

.card-header.ad-tabs-head .nav-tabs {
    margin-bottom: -1px;
    border-bottom: 0;
    flex-wrap: wrap;
}

/* views/admin/users.php, requests.php — a searchable brand select (Select2)
   and labelled date fields inside the filter bar */
.ad-filter-wide {
    flex: 1 1 220px;
    max-width: 300px;
    min-width: 0;
}

.ad-filter-field {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.ad-filter-field > label {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--nz-muted);
}

.ad-filter-field > .form-control {
    width: auto;
    height: 38px;
}

@media (max-width: 575.98px) {
    .ad-filter-wide { flex-basis: 100%; max-width: none; }
    .ad-filter-field { flex: 1 1 100%; }
    .ad-filter-field > .form-control { flex: 1 1 auto; }
}

.ad-head-count {
    font-size: 13px;
}

/* views/admin/users.php — the inline "New brand" panel in the Add User modal */
.ad-subpanel {
    padding: 16px;
    border: 1px solid var(--nz-border);
    border-radius: var(--nz-r-md);
    background: var(--nz-bg-soft);
}

/* views/admin/request_details.php — card-head actions and image previews */
.ad-head-chip {
    font-size: 13px;
    padding: 6px 12px;
}

.ad-head-actions {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.ad-preview {
    padding: 12px;
}

.ad-preview-img {
    max-height: 350px;
    border: 1px solid var(--nz-border);
    border-radius: var(--nz-r-sm);
}

.ad-kv-long {
    max-width: 65%;
    font-weight: 400;
    white-space: pre-line;
}

/* views/admin/plant_trees.php — the AdminPlant board: a numbered brand
   section with the balance beside the picker, the form in numbered
   sections, and a summary rail. */
.ad-select-row {
    gap: 8px;
}

.ad-select-grow {
    flex: 1 1 auto;
    min-width: 0;
}

.ad-balance {
    display: flex;
    align-items: center;
    gap: 12px;
    align-self: end;
    min-height: 40px;
    padding: 10px 14px;
    border-radius: var(--nz-r-md);
    background: var(--nz-hover-2);
    font-size: 13px;
}

.ad-balance > b {
    margin-left: auto;
    font-size: 14px;
    color: var(--nz-ink);
}

.ad-page-tabs {
    margin-bottom: 20px;
}

.ad-tab-count-warn {
    background: var(--nz-warn-bg);
    color: var(--nz-warn-fg);
}

.nz-split > form.nz-main { margin-bottom: 0; }

.nz-sec .nz-fgrid > .form-group { margin-bottom: 0; }

.ad-summary {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.ad-summary-rows .nz-kv:first-child { padding-top: 0; }

.ad-sum-total > b {
    font-size: 18px;
    font-weight: 800;
    color: var(--nz-primary);
}

.ad-sum-total.short > b {
    color: var(--nz-danger-fg);
}

/* A quiet info line, the board's blue summary note */
.ad-note {
    display: flex;
    gap: 10px;
    padding: 12px;
    border-radius: var(--nz-r-md);
    background: var(--nz-info-bg);
    color: var(--nz-info-fg);
    font-size: 13px;
    line-height: 1.5;
}

.ad-note > i {
    flex: none;
    margin-top: 3px;
}

/* Pending tab: queue facts on the left, the release action on the right */
.ad-card-warn {
    border-color: var(--nz-warn-soft-line);
    background: var(--nz-warn-soft-bg);
}

.ad-queue-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px 32px;
}

.ad-queue-facts {
    flex: 1 1 320px;
    min-width: 0;
}

.ad-queue-act {
    flex: 0 1 auto;
    max-width: 360px;
}

.ad-queue-note {
    margin-top: 8px;
    font-size: 13px;
}

.ad-queue-body .pending-bulk-bar {
    margin: 12px 20px 0;
}

.ad-queue-more {
    margin: 0;
    padding: 12px 20px;
    font-size: 13px;
}

@media (min-width: 768px) {
    .ad-queue-act { text-align: right; }
}

/* credit_transactions, invoices, prepaid_partners, qr_campaigns,
   bulk_schedules, tickets — a filter bar standing in a card of its own */
.nz-filters.ad-filters-solo:last-child {
    border-bottom: 0;
}

.ad-filter-chips:last-child {
    border-bottom: 0;
}

/* Select2 takes the width of the wrapper it sits in */
.ad-filter-wide .select2-container {
    width: 100% !important;
}

/* A destructive row action (bulk_schedules errors, co2_activities delete) */
.nz-rowact.ad-rowact-bad {
    color: var(--nz-danger-fg);
}

.nz-rowact.ad-rowact-bad:hover,
.nz-rowact.ad-rowact-bad:focus {
    background: var(--nz-danger-bg);
    color: var(--nz-danger-fg);
}

/* prepaid_partners — the footnote under "Running out soonest" */
/* co2_activities — the activity name column */
.ad-cell-strong {
    font-weight: 700;
    color: var(--nz-ink);
}

/* generate_invoice_manual — the preview as key/value rows with a total */
.ad-invoice-preview {
    max-width: 520px;
}

/* Segmented control built from radios (generate_invoice_manual): the
   checked option is raised even before the script marks it .active */
.nz-seg > label:has(input:checked) {
    background: var(--nz-bg);
    color: var(--nz-ink);
    font-weight: 700;
    box-shadow: var(--nz-shadow-seg);
}

/* ticket_detail — facts in two columns, labelled selects, internal notes */
.ad-kv-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    column-gap: 32px;
}

@media (min-width: 576px) {
    .ad-kv-grid > .nz-kv:nth-last-child(2):nth-child(odd) { border-bottom: 0; }
}

.ad-field-label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--nz-text);
}

.bd-thread .direct-chat-text.ad-internal {
    border-color: var(--nz-warn-soft-line);
    background: var(--nz-warn-soft-bg);
}

@media (max-width: 575.98px) {
    .ad-select-row { flex-wrap: wrap; }
    .ad-select-row > .btn { flex: 1 1 100%; }
}