/* ==========================================================================
   SALAMA HOSTING — Admin Portal Stylesheet
   Loaded by the internal layout (common/header.php) and by the sign-in pages
   (common/authHead.php), which add salama-auth.css on top for their layout.

   Sits on top of Bootstrap 4.6 + AdminLTE 3.2: it restyles their classes and
   adds the shared stg-* / dash-* components. It does not rename or replace
   any class that markup or JS depends on.

   1.  Design tokens
   2.  Base & typography
   3.  Bootstrap brand mapping (replaces Bootstrap's default blue)
   4.  Buttons
   5.  Forms
   6.  Badges
   7.  Alerts
   8.  Tables & DataTables
   9.  Cards, modals, dropdowns, pagination
   10. App shell: sidebar
   11. App shell: top bar, content area, footer
   12. Page header & shared stg-* components
   13. Dashboard
   14. Responsive
   15. Motion preferences
   ========================================================================== */


/* ==========================================================================
   1. DESIGN TOKENS
   ========================================================================== */

:root {
    /* Brand — taken from the logo (#0099FF); the darker shade is used for text on white */
    --primary: #0099ff;
    --primary-hover: #0084e0;
    --primary-dark: #006bb3;
    --primary-light: #dff0ff;
    --primary-subtle: #f2f9ff;
    --primary-ring: rgba(0, 153, 255, 0.26);
    --accent: #7cc7ff;

    /* Logo shades used for official marks, rules and section labels */
    --brand: #0099ff;
    --brand-dark: #006bb3;
    --brand-light: #a8dcff;
    --brand-soft: #eaf6ff;

    /* Link text uses a darker shade of the brand so it stays readable on white */
    --link: #006bb3;
    --link-hover: #004a7c;

    /* Status */
    --success: #1f6b45;
    --success-bg: #e8f2ec;
    --success-fg: #154a30;
    --success-border: #c6ddd1;
    --warning: #8a5a12;
    --warning-bg: #fbf3e3;
    --warning-fg: #5f3d0a;
    --warning-border: #e8d3a8;
    --danger: #8f2a2f;
    --danger-bg: #f7e9ea;
    --danger-fg: #5f1a1e;
    --danger-border: #e2c3c5;
    --info: #1f5b73;
    --info-bg: #e9f1f4;
    --info-fg: #143d4d;
    --info-border: #c3d8e0;
    --neutral-bg: #eceeea;
    --purple: #4a3a6b;
    --purple-bg: #eeeaf4;

    /* Text */
    --text-primary: #14202e;
    --text-secondary: #2f3d4d;
    --text-muted: #5c6875;
    --text-light: #8a94a0;
    --text-inverse: #ffffff;

    /* Surfaces */
    --body-bg: #f4f6f9;
    --card-bg: #ffffff;
    --topbar-bg: #ffffff;
    --sidebar-bg: #0b3550;
    --sidebar-border: rgba(255, 255, 255, 0.10);
    --sidebar-text: #c9d9e6;
    --sidebar-muted: #93a9bc;
    --sidebar-label: #7fa3bf;
    --sidebar-hover: rgba(255, 255, 255, 0.07);
    --sidebar-active-bg: rgba(0, 153, 255, 0.28);
    --sidebar-accent: #7cc7ff;
    --table-header-bg: #eef4f9;
    --table-row-hover: #f6fafd;
    --table-border: #e4ebf1;
    --surface-overlay: rgba(11, 53, 80, 0.55);

    /* Borders */
    --border-color: #d9e0e6;
    --border-strong: #b9c4cd;
    --border-light: #e9eef3;

    /* Radii — official documents and registers use square corners */
    --radius-xs: 0;
    --radius-sm: 2px;
    --radius-md: 2px;
    --radius-lg: 2px;
    --radius-xl: 3px;
    --radius-pill: 999px;
    --btn-radius: var(--radius-sm);
    --input-radius: var(--radius-sm);
    --badge-radius: var(--radius-sm);
    --icon-radius: var(--radius-sm);
    --card-radius: var(--radius-lg);

    /* Spacing */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;

    /* Elevation — flat, printed-document feel rather than soft app cards */
    --shadow-sm: 0 1px 0 rgba(20, 32, 46, 0.05);
    --shadow-md: 0 1px 2px rgba(20, 32, 46, 0.08);
    --shadow-lg: 0 6px 18px rgba(20, 32, 46, 0.12);
    --shadow-focus: 0 0 0 3px var(--primary-ring);

    /* Motion */
    --ease: cubic-bezier(0.4, 0, 0.2, 1);
    --transition: background-color 0.15s var(--ease), border-color 0.15s var(--ease),
        color 0.15s var(--ease), box-shadow 0.15s var(--ease);

    /* Type — serif for headings, as on official notices and forms */
    --font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-display: 'Source Serif 4', Georgia, 'Times New Roman', serif;
    --fs-xs: 11.5px;   /* overlines, table headers */
    --fs-sm: 12.5px;   /* helper text, meta */
    --fs-md: 14px;     /* body, tables, inputs, nav */
    --fs-lg: 15px;     /* panel titles */
    --fs-xl: 18px;     /* section titles */
    --fs-2xl: 22px;    /* page titles */

    /* Layout */
    --sidebar-width: 250px;
    --topbar-height: 56px;
    --content-pad: 24px;
}


/* ==========================================================================
   2. BASE & TYPOGRAPHY
   ========================================================================== */

body {
    font-family: var(--font-family);
    font-size: var(--fs-md);
    line-height: 1.5;
    color: var(--text-secondary);
    background: var(--body-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'cv11', 'ss01';
}

a {
    color: var(--link);
    transition: var(--transition);
}

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

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

::selection {
    background: var(--primary-light);
    color: var(--primary-dark);
}

img {
    max-width: 100%;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.3;
    letter-spacing: -0.01em;
}

h1, .h1 { font-size: var(--fs-2xl); }
h2, .h2 { font-size: 20px; }
h3, .h3 { font-size: var(--fs-xl); }
h4, .h4 { font-size: 16px; }
h5, .h5 { font-size: var(--fs-lg); }
h6, .h6 { font-size: var(--fs-md); }

small, .small {
    font-size: var(--fs-sm);
}

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

/* Money and counts line up in columns */
.tabular-nums,
.dash-metric-value,
.stg-stat-tile-value {
    font-variant-numeric: tabular-nums;
}


/* ==========================================================================
   3. BOOTSTRAP BRAND MAPPING
   Bootstrap/AdminLTE hard-code #007bff in their compiled CSS; these rules
   point the commonly used "primary" utilities at the brand colour.
   ========================================================================== */

.text-primary { color: var(--primary) !important; }
a.text-primary:hover, a.text-primary:focus { color: var(--primary-hover) !important; }
.bg-primary { background-color: var(--primary) !important; }
.border-primary { border-color: var(--primary) !important; }

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

.custom-control-input:focus ~ .custom-control-label::before {
    box-shadow: var(--shadow-focus);
}

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

.nav-tabs .nav-link.active {
    color: var(--primary);
    border-bottom-color: var(--card-bg);
}

.nav-tabs .nav-link {
    color: var(--text-muted);
    font-weight: 500;
}

.progress-bar {
    background-color: var(--primary);
}

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


/* ==========================================================================
   4. BUTTONS
   ========================================================================== */

.btn {
    font-family: var(--font-family);
    font-size: var(--fs-md);
    font-weight: 500;
    line-height: 1.25;
    padding: 8px 14px;
    border-radius: var(--btn-radius);
    transition: var(--transition);
}

.btn:focus,
.btn.focus {
    box-shadow: var(--shadow-focus) !important;
}

.btn-sm {
    font-size: var(--fs-sm);
    padding: 5px 10px;
}

.btn-lg {
    font-size: var(--fs-lg);
    padding: 10px 18px;
}

.btn i.fas,
.btn i.far,
.btn i.fab {
    font-size: 0.92em;
}

.btn-primary {
    background-color: var(--primary);
    border-color: var(--primary);
    color: var(--text-inverse);
}

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

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

.btn-outline-primary {
    color: var(--primary);
    border-color: var(--primary);
}

.btn-outline-primary:hover,
.btn-outline-primary:not(:disabled):not(.disabled):active {
    color: var(--text-inverse);
    background-color: var(--primary);
    border-color: var(--primary);
}

/* Secondary = quiet bordered button (most common button in the app) */
.btn-outline-secondary,
.btn-default,
.btn-light {
    color: var(--text-secondary);
    background-color: var(--card-bg);
    border-color: var(--border-strong);
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus,
.btn-outline-secondary:not(:disabled):not(.disabled):active,
.btn-outline-secondary.dropdown-toggle[aria-expanded="true"],
.btn-default:hover,
.btn-light:hover {
    color: var(--text-primary);
    background-color: var(--table-header-bg);
    border-color: var(--text-light);
}

.btn-success {
    background-color: var(--success);
    border-color: var(--success);
}

.btn-success:hover {
    background-color: #166534;
    border-color: #166534;
}

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

.btn-danger:hover {
    background-color: #a32121;
    border-color: #a32121;
}

.btn-outline-danger {
    color: var(--danger);
    border-color: #f0b4b4;
}

.btn-outline-danger:hover {
    color: var(--text-inverse);
    background-color: var(--danger);
    border-color: var(--danger);
}

.btn-link {
    color: var(--primary);
}


/* ==========================================================================
   5. FORMS
   ========================================================================== */

label {
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
}

/* Views that mark labels "small text-muted" get the same treatment */
label.small.text-muted {
    font-size: 13px;
    color: var(--text-secondary) !important;
}

.form-group {
    margin-bottom: var(--space-4);
}

.form-control,
.custom-select {
    height: auto;
    min-height: 38px;
    padding: 8px 12px;
    font-family: var(--font-family);
    font-size: var(--fs-md);
    line-height: 1.4;
    color: var(--text-primary);
    background-color: var(--card-bg);
    border: 1px solid var(--border-strong);
    border-radius: var(--input-radius);
    box-shadow: none;
    transition: var(--transition);
}

.form-control-sm {
    min-height: 32px;
    padding: 5px 10px;
    font-size: var(--fs-sm);
}

textarea.form-control {
    min-height: 90px;
}

.form-control:focus,
.custom-select:focus {
    border-color: var(--primary);
    box-shadow: var(--shadow-focus);
}

.form-control::placeholder {
    color: var(--text-light);
}

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

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

.invalid-feedback {
    font-size: var(--fs-sm);
    color: var(--danger);
}

.form-text {
    font-size: var(--fs-sm);
    color: var(--text-muted);
}

.input-group-text {
    font-size: var(--fs-md);
    background-color: var(--table-header-bg);
    border-color: var(--border-strong);
    color: var(--text-muted);
}

/* Select2 (bootstrap4 theme) to match inputs */
.select2-container--bootstrap4 .select2-selection {
    min-height: 38px;
    border-color: var(--border-strong);
    border-radius: var(--input-radius);
    font-size: var(--fs-md);
}

.select2-container--bootstrap4.select2-container--focus .select2-selection {
    border-color: var(--primary);
    box-shadow: var(--shadow-focus);
}

.select2-container--bootstrap4 .select2-results__option--highlighted,
.select2-container--bootstrap4 .select2-results__option--highlighted.select2-results__option[aria-selected="true"] {
    background-color: var(--primary);
}


/* ==========================================================================
   6. BADGES
   Bootstrap's .badge-* and the app's .stg-badge-* share one look:
   a pill with a soft tint and a matching hairline border.
   ========================================================================== */

.badge {
    padding: 2px 9px;
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1.5;
    vertical-align: middle;
}

.badge-primary   { background: var(--primary-subtle); border-color: var(--primary-light); color: var(--primary); }
.badge-success   { background: var(--success-bg);     border-color: var(--success-border); color: var(--success); }
.badge-warning   { background: var(--warning-bg);     border-color: var(--warning-border); color: var(--warning); }
.badge-danger    { background: var(--danger-bg);      border-color: var(--danger-border);  color: var(--danger); }
.badge-info      { background: var(--info-bg);        border-color: var(--info-border);    color: var(--info); }
.badge-secondary,
.badge-light,
.badge-dark      { background: var(--neutral-bg);     border-color: var(--border-color);   color: var(--text-secondary); }

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

a.badge-primary:hover, a.badge-primary:focus { background: var(--primary-light); color: var(--primary-dark); }
a.badge-success:hover { color: var(--success); }
a.badge-warning:hover { color: var(--warning); }
a.badge-danger:hover  { color: var(--danger); }
a.badge-info:hover    { color: var(--info); }

.stg-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 9px;
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.5;
    white-space: nowrap;
}

.stg-badge i {
    font-size: 10px;
}

.stg-badge-primary { background: var(--primary-subtle); border-color: var(--primary-light);  color: var(--primary); }
.stg-badge-success { background: var(--success-bg);     border-color: var(--success-border); color: var(--success); }
.stg-badge-warning { background: var(--warning-bg);     border-color: var(--warning-border); color: var(--warning); }
.stg-badge-danger  { background: var(--danger-bg);      border-color: var(--danger-border);  color: var(--danger); }
.stg-badge-info    { background: var(--info-bg);        border-color: var(--info-border);    color: var(--info); }
.stg-badge-neutral { background: var(--neutral-bg);     border-color: var(--border-color);   color: var(--text-secondary); }


/* ==========================================================================
   7. ALERTS
   ========================================================================== */

.alert {
    padding: 12px 14px;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    font-size: var(--fs-md);
    line-height: 1.5;
}

.alert-success { background: var(--success-bg); border-color: #bfe5cb; color: var(--success-fg); }
.alert-danger  { background: var(--danger-bg);  border-color: #f5c2c2; color: var(--danger-fg); }
.alert-warning { background: var(--warning-bg); border-color: #f7d9a6; color: var(--warning-fg); }
.alert-info    { background: var(--info-bg);    border-color: #b7dde8; color: var(--info-fg); }

.alert .fa,
.alert .fas,
.alert .far {
    margin-right: 4px;
}

.alert .close {
    font-size: 18px;
    line-height: 1;
}


/* ==========================================================================
   8. TABLES & DATATABLES
   One design for every list: white card, sentence-case column labels with
   sort arrows, roomy rows, pill statuses, a checkbox column, and a pager
   with "Showing x–y of z results". common/data_tables.php (loaded by
   footer.php) adds the checkbox column, the "N Total" pill, the Export
   button and the sort arrows to every .stg-table.
   ========================================================================== */

.content-wrapper .table {
    margin-bottom: 0;
    color: var(--text-secondary);
}

.content-wrapper .table thead th {
    padding: 12px 16px;
    background: var(--card-bg);
    border-top: 0;
    border-bottom: 1px solid var(--border-color);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--text-primary);
    white-space: nowrap;
    vertical-align: middle;
}

.content-wrapper .table td,
.content-wrapper .table tbody th {
    padding: 14px 16px;
    font-size: var(--fs-md);
    border-top: 1px solid var(--table-border);
    vertical-align: middle;
}

.content-wrapper .table tbody tr:first-child > td,
.content-wrapper .table tbody tr:first-child > th {
    border-top: 0;
}

/* List tables run edge to edge inside their card, with a wider gutter on the outer cells */
.stg-table > thead > tr > th:first-child,
.stg-table > tbody > tr > td:first-child,
.stg-table > tfoot > tr > td:first-child {
    padding-left: var(--space-6);
}

.stg-table > thead > tr > th:last-child,
.stg-table > tbody > tr > td:last-child,
.stg-table > tfoot > tr > td:last-child {
    padding-right: var(--space-6) !important;
}

.content-wrapper .table-hover tbody tr:hover,
.stg-table tbody tr:hover {
    background: var(--table-row-hover);
}

.stg-table tbody tr.is-selected,
.stg-table tbody tr.is-selected:hover {
    background: var(--primary-subtle);
}

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

.content-wrapper .table-striped tbody tr:nth-of-type(odd) {
    background: #fbfbfc;
}

.content-wrapper .table small,
.content-wrapper .table .small {
    font-size: var(--fs-sm);
}

/* Responsive table container (the app's standard wrapper) */
.stg-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* With DataTables the scrolling moves to the table itself, so the toolbar and pager stay put */
.stg-table-wrap.has-datatable {
    overflow: visible;
}

.stg-dt-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.stg-table .stg-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: flex-end;
}

/* Buttons in a row never break between icon and label */
.stg-table .btn {
    white-space: nowrap;
}

.stg-table .btn-group {
    flex-wrap: nowrap;
}

/* --- Cell building blocks ------------------------------------------------ */

/* Identity cell: round icon + bold label + muted second line */
.stg-cell-main {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
}

.stg-cell-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    font-size: 14px;
    color: var(--primary);
    background: var(--primary-subtle);
    border-radius: 50%;
}

.stg-cell-icon.green { color: var(--success); background: var(--success-bg); }
.stg-cell-icon.amber { color: var(--warning); background: var(--warning-bg); }
.stg-cell-icon.red   { color: var(--danger);  background: var(--danger-bg); }
.stg-cell-icon.gray  { color: var(--text-muted); background: var(--neutral-bg); }

.stg-cell-title {
    display: block;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
}

a.stg-cell-title:hover {
    color: var(--primary);
    text-decoration: none;
}

.stg-cell-sub {
    display: block;
    font-size: var(--fs-sm);
    color: var(--text-muted);
}

/* First line of a two-line cell that isn't an identity cell (a name, a date) */
.stg-cell-strong {
    display: block;
    font-weight: 500;
    color: var(--text-primary);
}

/* Quiet square icon button for row actions */
.stg-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    font-size: 14px;
    color: var(--text-secondary);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: var(--transition);
}

.stg-icon-btn:hover,
.stg-icon-btn:focus,
.stg-icon-btn[aria-expanded="true"] {
    color: var(--text-primary);
    background: var(--neutral-bg);
    border-color: var(--border-color);
    text-decoration: none;
}

.stg-icon-btn.dropdown-toggle::after {
    display: none;
}

/* Masked secret, e.g. an API key */
.stg-secret {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: var(--fs-sm);
    letter-spacing: 0.02em;
    color: var(--text-secondary);
}

/* --- Dates edited in place (Domains table) ------------------------------- */
/* The date is the button: click it (or Enter / Space) to swap it for a date input; see
   template_all_domains.php. A pencil shows in the cell's right padding on hover, so the
   column is no wider than the date. */
.stg-date-cell {
    position: relative;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.15s var(--ease);
}

.stg-date-cell:hover {
    background-color: var(--primary-subtle);
}

.stg-date-cell::after {
    content: "\f303"; /* fa-pencil-alt */
    position: absolute;
    top: 50%;
    right: 4px;
    font-family: "Font Awesome 5 Free";
    font-size: 10px;
    font-weight: 900;
    color: var(--primary);
    opacity: 0;
    transform: translateY(-50%);
    transition: opacity 0.15s var(--ease);
    pointer-events: none;
}

.stg-date-cell:hover::after,
.stg-date-cell:focus-within::after {
    opacity: 1;
}

.stg-date-view {
    border-radius: var(--radius-sm);
}

.stg-date-view .is-empty {
    font-weight: 400;
    color: var(--text-light);
}

.stg-date-note.is-warning { color: var(--warning); }
.stg-date-note.is-danger  { color: var(--danger); }

.stg-date-cell.is-editing {
    cursor: default;
}

.stg-date-cell.is-editing:hover {
    background-color: transparent;
}

.stg-date-cell.is-editing::after,
.stg-date-cell.is-editing .stg-date-view {
    display: none;
}

.stg-date-editor {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 136px;
}

.stg-date-editor .form-control {
    height: 32px;
    font-size: var(--fs-sm);
}

.stg-date-actions {
    display: flex;
    gap: 6px;
}

.stg-date-actions .btn {
    padding: 2px 10px;
    font-size: var(--fs-sm);
}

.stg-date-error {
    max-width: 200px;
    font-size: var(--fs-sm);
    line-height: 1.35;
    color: var(--danger);
    white-space: normal;
}

.stg-date-error:empty {
    display: none;
}

.stg-date-cell.is-saving .stg-date-editor {
    opacity: 0.6;
}

.stg-date-cell.is-saved {
    animation: stg-date-saved 1.6s var(--ease);
}

@keyframes stg-date-saved {
    from { background-color: var(--success-bg); }
    to   { background-color: transparent; }
}

/* --- Pinned columns ------------------------------------------------------ */
/* For wide tables: .stg-pin-start / .stg-pin-end cells stay in view while the rest scrolls
   sideways. The scroll container gets is-scrolled-start / -end (set by the page's script)
   while content is hidden under a pinned column, which shows its edge shadow. Narrower
   screens have no room for two pinned columns, so there the whole table scrolls. */
@media (min-width: 992px) {
    .stg-table .stg-pin-start,
    .stg-table .stg-pin-end {
        position: sticky;
        z-index: 2;
        background-color: var(--card-bg);
        transition: box-shadow 0.15s var(--ease);
    }

    .stg-table .stg-pin-start { left: 0; }
    .stg-table .stg-pin-end   { right: 0; }

    .stg-table thead .stg-pin-start,
    .stg-table thead .stg-pin-end {
        z-index: 3;
    }

    .stg-table tbody tr:hover > .stg-pin-start,
    .stg-table tbody tr:hover > .stg-pin-end {
        background-color: var(--table-row-hover);
    }

    .stg-table tbody tr.is-selected > .stg-pin-start,
    .stg-table tbody tr.is-selected > .stg-pin-end {
        background-color: var(--primary-subtle);
    }

    /* An open row menu sits above the pinned cells of the rows below it */
    .stg-table .stg-pin-end:has(.show) {
        z-index: 4;
    }

    .is-scrolled-start .stg-table .stg-pin-start {
        box-shadow: 8px 0 10px -8px rgba(17, 24, 39, 0.22);
    }

    .is-scrolled-end .stg-table .stg-pin-end {
        box-shadow: -8px 0 10px -8px rgba(17, 24, 39, 0.22);
    }
}

/* --- Selection checkboxes ------------------------------------------------ */
.stg-select-col {
    width: 1%;
    padding-right: 0 !important;
}

.stg-check {
    -webkit-appearance: none;
    appearance: none;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin: 0;
    vertical-align: middle;
    background: var(--card-bg) center / 12px 12px no-repeat;
    border: 1.5px solid var(--border-strong);
    border-radius: 5px;
    cursor: pointer;
    transition: var(--transition);
}

.stg-check:hover {
    border-color: var(--primary);
}

.stg-check:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus);
}

.stg-check:checked,
.stg-check:indeterminate {
    background-color: var(--primary);
    border-color: var(--primary);
}

.stg-check:checked {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.3 2.3 4.7-4.9' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.stg-check:indeterminate {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 6h6' stroke='%23fff' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* --- Panel header for lists: title + count pill, actions on the right ---- */
.stg-panel--table > .stg-panel-header {
    padding: var(--space-5) var(--space-6);
    border-bottom: 1px solid var(--border-color);
}

.stg-panel--table > .stg-panel-header .stg-panel-icon {
    display: none;
}

.stg-panel--table > .stg-panel-header .stg-panel-title {
    font-size: var(--fs-xl);
    letter-spacing: -0.01em;
}

.stg-panel-title .stg-count-pill {
    margin-left: var(--space-2);
    vertical-align: 2px;
}

.stg-count-pill {
    display: inline-flex;
    align-items: center;
    padding: 1px 8px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: 0;
    color: var(--primary);
    background: var(--primary-subtle);
    border: 1px solid var(--primary-light);
    border-radius: var(--radius-pill);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.stg-panel-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-2);
    margin-left: auto;
}

.stg-selection-note {
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--primary);
}

/* --- Tabs above a list (e.g. Domains: All / Active / Expired ...) -------- */
.stg-tabs {
    display: flex;
    gap: var(--space-1);
    padding: 0 var(--space-6);
    overflow-x: auto;
    border-bottom: 1px solid var(--border-color);
    scrollbar-width: none;
}

.stg-tab {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: -1px;
    padding: 12px 10px;
    font-size: var(--fs-md);
    font-weight: 500;
    color: var(--text-muted);
    white-space: nowrap;
    background: none;
    border: 0;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: var(--transition);
}

.stg-tab:hover {
    color: var(--text-primary);
    text-decoration: none;
}

.stg-tab.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
}

.stg-tab-count {
    padding: 0 7px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.6;
    color: var(--text-muted);
    background: var(--neutral-bg);
    border-radius: var(--radius-pill);
    font-variant-numeric: tabular-nums;
}

.stg-tab.active .stg-tab-count {
    color: var(--primary);
    background: var(--primary-subtle);
}

/* --- DataTables chrome --------------------------------------------------- */
.dataTables_wrapper {
    font-size: var(--fs-md);
    color: var(--text-secondary);
}

/* Toolbar above the table: column filters on the left, search + page size on the right */
.stg-dt-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-3);
    padding: var(--space-3) var(--space-6);
    border-bottom: 1px solid var(--border-color);
}

.stg-dt-toolbar:empty {
    display: none;
}

.dataTables_wrapper .stg-dt-toolbar .stg-table-filters {
    order: 1;
    flex: 1 1 auto;
    margin: 0;
}

.dataTables_wrapper .stg-dt-toolbar .dataTables_filter {
    order: 2;
    margin-left: auto;
}

.dataTables_wrapper .stg-dt-toolbar .dataTables_length {
    order: 3;
}

.dataTables_wrapper .stg-dt-toolbar .stg-selection-note,
.dataTables_wrapper .stg-dt-toolbar .stg-export-btn {
    order: 4;
}

.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter {
    float: none;
    margin: 0;
    text-align: left;
}

.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-size: var(--fs-sm);
    font-weight: 400;
    color: var(--text-muted);
}

.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
    height: 36px;
    padding: 4px 10px;
    font-size: var(--fs-md);
    color: var(--text-primary);
    background-color: var(--card-bg);
    border: 1px solid var(--border-strong);
    border-radius: var(--input-radius);
    outline: none;
}

.dataTables_wrapper .dataTables_filter input {
    width: 240px;
    margin-left: 0 !important;
    padding-left: 34px;
    background: var(--card-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='7' cy='7' r='4.75' fill='none' stroke='%239ca3af' stroke-width='1.5'/%3E%3Cpath d='M10.5 10.5L14 14' stroke='%239ca3af' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat 11px center / 15px 15px;
}

.dataTables_wrapper .dataTables_filter input:focus,
.dataTables_wrapper .dataTables_length select:focus {
    border-color: var(--primary);
    box-shadow: var(--shadow-focus);
}

/* Footer below the table: pager on the left, "Showing x–y of z results" on the right */
.stg-dt-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-6);
    border-top: 1px solid var(--border-color);
}

.dataTables_wrapper .dataTables_info {
    float: none;
    padding: 0 !important;
    font-size: var(--fs-md);
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}

.dataTables_wrapper .dataTables_paginate {
    display: flex;
    align-items: center;
    float: none;
    padding: 0 !important;
    text-align: left;
}

.dataTables_wrapper .dataTables_paginate > span {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 36px;
    height: 36px;
    margin: 0 !important;
    padding: 0 10px !important;
    font-size: var(--fs-md);
    font-weight: 500;
    color: var(--text-secondary) !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: none !important;
    font-variant-numeric: tabular-nums;
}

.dataTables_wrapper .dataTables_paginate .paginate_button i {
    font-size: 11px;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.previous {
    margin-right: var(--space-3) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.next {
    margin-left: var(--space-3) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    color: var(--text-primary) !important;
    background: var(--neutral-bg) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    font-weight: 600;
    color: var(--primary) !important;
    background: var(--primary-subtle) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
    color: var(--text-light) !important;
    background: transparent !important;
    cursor: default;
}

.dataTables_wrapper .dataTables_paginate .ellipsis {
    padding: 0 6px;
    color: var(--text-muted);
}

table.dataTable thead th,
table.dataTable thead td {
    border-bottom: 1px solid var(--border-color) !important;
}

table.dataTable.no-footer {
    border-bottom: 0 !important;
}

table.dataTable tbody td.dataTables_empty {
    padding: var(--space-10) var(--space-4);
    text-align: center;
    color: var(--text-muted);
}

/* Sort arrows sit right after the column label (stg-sort, added by data_tables.php),
   replacing DataTables' arrows pinned to the cell's right edge. */
table.dataTable thead > tr > th.sorting,
table.dataTable thead > tr > th.sorting_asc,
table.dataTable thead > tr > th.sorting_desc {
    padding-right: 16px !important;
}

table.dataTable thead > tr > th.sorting::before,
table.dataTable thead > tr > th.sorting::after,
table.dataTable thead > tr > th.sorting_asc::before,
table.dataTable thead > tr > th.sorting_asc::after,
table.dataTable thead > tr > th.sorting_desc::before,
table.dataTable thead > tr > th.sorting_desc::after,
table.dataTable thead > tr > th.sorting_asc_disabled::before,
table.dataTable thead > tr > th.sorting_asc_disabled::after,
table.dataTable thead > tr > th.sorting_desc_disabled::before,
table.dataTable thead > tr > th.sorting_desc_disabled::after {
    display: none !important;
}

.stg-sort {
    display: inline-flex;
    flex-direction: column;
    gap: 2px;
    margin-left: 6px;
    vertical-align: middle;
}

.stg-sort::before,
.stg-sort::after {
    content: '';
    color: var(--text-light);
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
}

.stg-sort::before { border-bottom: 4px solid currentColor; }
.stg-sort::after  { border-top: 4px solid currentColor; }

th:hover > .stg-sort::before,
th:hover > .stg-sort::after {
    color: var(--text-muted);
}

th.sorting_asc > .stg-sort::before,
th.sorting_desc > .stg-sort::after {
    color: var(--primary);
}


/* ==========================================================================
   9. CARDS, MODALS, DROPDOWNS, PAGINATION
   ========================================================================== */

.card {
    margin-bottom: var(--space-5);
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--card-radius);
    box-shadow: var(--shadow-sm);
}

.card-header {
    padding: 14px var(--space-5);
    background: var(--card-bg);
    border-bottom: 1px solid var(--border-light);
}

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

.card-title {
    margin: 0;
    font-size: var(--fs-lg);
    font-weight: 600;
    color: var(--text-primary);
}

.card-body {
    padding: var(--space-5);
}

.card-footer {
    padding: 14px var(--space-5);
    background: var(--table-header-bg);
    border-top: 1px solid var(--border-light);
}

/* AdminLTE coloured card outlines -> brand */
.card-primary.card-outline {
    border-top: 3px solid var(--primary);
}

.card-primary:not(.card-outline) > .card-header {
    background-color: var(--primary);
}

/* Modals: style the dialog box, never the full-screen .modal container */
.modal-content {
    border: 0;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
}

.modal-header {
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--border-light);
}

.modal-title {
    font-size: var(--fs-lg);
    font-weight: 600;
    color: var(--text-primary);
}

.modal-body {
    padding: var(--space-5);
}

.modal-footer {
    padding: var(--space-3) var(--space-5);
    border-top: 1px solid var(--border-light);
}

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

.dropdown-menu {
    padding: 6px;
    font-size: var(--fs-md);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 7px 10px;
    font-size: var(--fs-md);
    color: var(--text-secondary);
    border-radius: var(--radius-md);
}

.dropdown-item i {
    width: 16px;
    margin-right: 0 !important;
    text-align: center;
    color: var(--text-muted);
}

.dropdown-item:hover,
.dropdown-item:focus {
    background: var(--table-header-bg);
    color: var(--text-primary);
}

.dropdown-item.text-danger i,
.dropdown-item.text-success i {
    color: inherit;
}

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

.dropdown-header {
    padding: 6px 10px;
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.page-link {
    color: var(--text-secondary);
    border-color: var(--border-color);
}

.page-link:hover {
    color: var(--primary);
    background: var(--primary-subtle);
}

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

.list-group-item {
    border-color: var(--border-light);
}

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


/* ==========================================================================
   10. APP SHELL: SIDEBAR
   Dark navy rail. One active style: blue-tinted row with a left indicator.
   ========================================================================== */

.main-sidebar {
    overflow-x: hidden;
    background: var(--sidebar-bg) !important;
    border-right: 0;
    box-shadow: none !important;
}

.main-sidebar .brand-link {
    display: flex;
    align-items: center;
    height: var(--topbar-height);
    padding: 0 var(--space-5);
    border-bottom: 1px solid var(--sidebar-border) !important;
}

/* The logo is blue on transparent; render it white on the dark rail (same as the login page). */
.main-sidebar .brand-link img {
    width: auto;
    max-width: 150px;
    max-height: 30px;
    filter: brightness(0) invert(1);
}

.main-sidebar .sidebar {
    overflow-x: hidden;
    padding: var(--space-2) 0 var(--space-6);
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}

.main-sidebar .sidebar::-webkit-scrollbar { width: 6px; }
.main-sidebar .sidebar::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.18);
    border-radius: var(--radius-pill);
}

/* Section labels */
.nav-sidebar > .nav-header {
    padding: var(--space-4) var(--space-5) 6px !important;
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--sidebar-label);
    background: transparent !important;
}

.nav-sidebar .nav-divider {
    margin: var(--space-2) var(--space-5);
    border-top: 1px solid var(--sidebar-border);
}

/* Top-level links */
.nav-sidebar .nav-item > .nav-link {
    position: relative;
    display: flex;
    align-items: center;
    width: auto;
    margin: 1px var(--space-3);
    padding: 7px 10px;
    color: var(--sidebar-text);
    border-radius: var(--radius-md);
    transition: var(--transition);
}

.nav-sidebar .nav-link > .nav-icon {
    width: 20px;
    margin-right: 10px !important;
    font-size: 15px !important;
    text-align: center;
    color: var(--sidebar-muted);
}

.nav-sidebar .nav-link p {
    display: flex;
    flex: 1;
    align-items: center;
    margin: 0;
    font-size: var(--fs-md);
    font-weight: 500;
    white-space: nowrap;
}

.nav-sidebar .nav-link p .right {
    position: static !important;
    margin-left: auto;
    font-size: 11px;
    color: var(--sidebar-label);
    transition: transform 0.2s var(--ease);
}

.nav-sidebar .nav-item > .nav-link:hover {
    background: var(--sidebar-hover);
    color: #ffffff;
}

.nav-sidebar .nav-item > .nav-link:hover > .nav-icon {
    color: #ffffff;
}

/* Active page (leaf link) */
.nav-sidebar .nav-item > .nav-link.active,
.nav-sidebar .nav-item > .nav-link.active:hover {
    background: var(--sidebar-active-bg) !important;
    color: #ffffff !important;
    box-shadow: none !important;
}

.nav-sidebar .nav-item > .nav-link.active > .nav-icon {
    color: var(--sidebar-accent);
}

.nav-sidebar .nav-link.active::before {
    content: '';
    position: absolute;
    left: -12px;
    top: 6px;
    bottom: 6px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--sidebar-accent);
}

/* Open group parent: emphasised text, no fill (the child carries the fill) */
.nav-sidebar > .nav-item.menu-open > .nav-link,
.nav-sidebar > .nav-item.menu-is-opening > .nav-link {
    background: transparent;
    color: #ffffff;
}

.nav-sidebar > .nav-item.menu-open > .nav-link > .nav-icon,
.nav-sidebar > .nav-item.stg-section-active > .nav-link > .nav-icon {
    color: var(--sidebar-accent);
}

.nav-sidebar > .nav-item.stg-section-active > .nav-link {
    color: #ffffff;
}

/* Child links: indented text, no filler icons */
.nav-sidebar .nav-treeview {
    padding: 2px 0 6px;
    background: transparent !important;
}

.nav-sidebar .nav-treeview > .nav-item > .nav-link {
    padding: 6px 10px 6px 42px;
    color: var(--sidebar-muted);
}

.nav-sidebar .nav-treeview > .nav-item > .nav-link p {
    font-size: 13.5px;
    font-weight: 400;
}

.nav-sidebar .nav-treeview > .nav-item > .nav-link.active p {
    font-weight: 600;
}

.nav-sidebar .nav-treeview > .nav-header {
    padding: 8px 10px 2px 54px !important;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--sidebar-label);
    background: transparent !important;
}

.nav-sidebar .nav-treeview > .nav-header:first-child {
    padding-top: 2px !important;
}

/* Collapsed (mini) sidebar on desktop: icons only, centred */
.sidebar-mini.sidebar-collapse .main-sidebar:not(:hover) .nav-sidebar .nav-link {
    justify-content: center;
}

.sidebar-mini.sidebar-collapse .main-sidebar:not(:hover) .nav-sidebar .nav-link > .nav-icon {
    margin-right: 0 !important;
}

.sidebar-mini.sidebar-collapse .main-sidebar:not(:hover) .nav-sidebar > .nav-header {
    font-size: 0 !important;
    padding: var(--space-2) 0 !important;
}

.sidebar-mini.sidebar-collapse .main-sidebar:not(:hover) .brand-link {
    padding: 0;
    justify-content: center;
    overflow: hidden;
}


/* ==========================================================================
   11. APP SHELL: TOP BAR, CONTENT AREA, FOOTER
   ========================================================================== */

.main-header.navbar {
    min-height: var(--topbar-height);
    padding: 0 var(--space-4);
    background: var(--topbar-bg);
    border-bottom: 1px solid var(--border-color) !important;
    box-shadow: none;
}

.main-header .navbar-nav .nav-link {
    display: flex;
    align-items: center;
    height: 40px;
    padding: 0 10px;
    color: var(--text-muted);
    border-radius: var(--radius-md);
}

.main-header .navbar-nav .nav-link:hover,
.main-header .navbar-nav .show > .nav-link {
    color: var(--text-primary);
    background: var(--table-header-bg);
}

.main-header .navbar-nav .nav-link i {
    font-size: 16px;
}

.stg-topbar-link {
    gap: 6px;
    font-size: var(--fs-md);
}

.stg-topbar-link i {
    font-size: 12px !important;
}

.stg-notification-badge {
    position: absolute;
    top: 6px;
    right: 4px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    font-size: 10px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    color: var(--text-inverse);
    background: var(--danger);
    border-radius: var(--radius-pill);
}

.stg-notification-badge:empty,
.stg-notification-badge[data-count="0"] {
    display: none;
}

.stg-user-toggle {
    gap: 10px;
    height: 44px !important;
    padding: 0 8px 0 4px !important;
}

.stg-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--primary);
    background: var(--primary-light);
    border-radius: 50%;
}

.stg-user-meta {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    text-align: left;
}

.stg-user-name {
    max-width: 160px;
    overflow: hidden;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    text-overflow: ellipsis;
}

.stg-user-role {
    font-size: 11.5px;
    color: var(--text-muted);
}

.stg-user-menu {
    min-width: 230px;
}

.stg-user-menu-head {
    padding: 8px 10px 10px;
    border-bottom: 1px solid var(--border-light);
    margin-bottom: 6px;
}

.stg-user-menu-head strong {
    display: block;
    font-size: var(--fs-md);
    color: var(--text-primary);
}

.stg-user-menu-head span {
    display: block;
    overflow: hidden;
    font-size: var(--fs-sm);
    color: var(--text-muted);
    white-space: nowrap;
    text-overflow: ellipsis;
}

.stg-notification-menu {
    width: 320px;
    max-width: calc(100vw - 24px);
}

/* Content area */
.content-wrapper {
    background: var(--body-bg);
}

.content-wrapper > .content {
    padding: var(--content-pad) var(--content-pad) var(--space-8) !important;
}

/* Pages use the full width of the content area; the .content padding provides the gutter. */
.content-wrapper > .content > .container-fluid,
.content-wrapper > .content > section > .container-fluid {
    padding-left: 0;
    padding-right: 0;
}

.main-footer {
    padding: 14px var(--content-pad);
    font-size: var(--fs-sm);
    color: var(--text-muted);
    background: var(--body-bg);
    border-top: 1px solid var(--border-color);
}

.main-footer a {
    color: var(--text-muted);
}

.main-footer a:hover {
    color: var(--primary);
}


/* ==========================================================================
   12. PAGE HEADER & SHARED stg-* COMPONENTS
   ========================================================================== */

/* --- Page header ------------------------------------------------------- */
.stg-page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}

.stg-page-header-text {
    min-width: 0;
}

.stg-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 6px;
    font-size: var(--fs-sm);
    color: var(--text-muted);
}

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

.stg-breadcrumb a:hover {
    color: var(--primary);
}

.stg-breadcrumb .sep {
    margin: 0 6px;
    color: var(--text-light);
}

.stg-title {
    margin: 0;
    font-size: var(--fs-2xl);
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--text-primary);
}

.stg-subtitle {
    margin: 4px 0 0;
    font-size: var(--fs-md);
    color: var(--text-muted);
}

.stg-page-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    flex-shrink: 0;
}

/* --- Group section (settings hub) --------------------------------------- */
.stg-group {
    margin-bottom: var(--space-8);
}

.stg-group:last-child {
    margin-bottom: 0;
}

.stg-group-header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}

.stg-group-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    min-width: 32px;
    font-size: 14px;
    border-radius: var(--icon-radius);
    background: var(--primary-subtle);
    color: var(--primary);
}

/* Colour variants kept for compatibility; all render in the quiet brand tint */
.stg-group-icon.blue,
.stg-group-icon.green,
.stg-group-icon.amber,
.stg-group-icon.purple,
.stg-group-icon.cyan,
.stg-group-icon.slate {
    background: var(--primary-subtle);
    color: var(--primary);
}

.stg-group-title {
    margin: 0;
    font-size: var(--fs-lg);
    font-weight: 600;
    color: var(--text-primary);
}

.stg-group-desc {
    margin: 1px 0 0;
    font-size: var(--fs-sm);
    color: var(--text-muted);
}

/* --- Link cards --------------------------------------------------------- */
.stg-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--space-3);
}

.stg-link-card {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: 14px var(--space-4);
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--card-radius);
    text-decoration: none;
    transition: var(--transition);
}

.stg-link-card:hover {
    border-color: var(--primary);
    box-shadow: var(--shadow-sm);
    text-decoration: none;
}

.stg-link-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    min-width: 34px;
    font-size: 14px;
    border-radius: var(--icon-radius);
    background: var(--table-header-bg);
    color: var(--text-muted);
    transition: var(--transition);
}

.stg-link-card:hover .stg-link-card-icon {
    background: var(--primary-subtle);
    color: var(--primary);
}

.stg-link-card-body {
    min-width: 0;
    flex: 1;
}

.stg-link-card-label {
    overflow: hidden;
    font-size: var(--fs-md);
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    text-overflow: ellipsis;
}

.stg-link-card-count {
    font-size: var(--fs-sm);
    color: var(--text-muted);
}

.stg-link-card-arrow {
    font-size: 12px;
    color: var(--text-light);
}

.stg-link-card:hover .stg-link-card-arrow {
    color: var(--primary);
}

/* --- Panel (the app's standard content container) ----------------------- */
.stg-panel {
    margin-bottom: var(--space-5);
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--card-radius);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.stg-panel-header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-height: 56px;
    padding: 12px var(--space-5);
    border-bottom: 1px solid var(--border-light);
}

.stg-panel-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    min-width: 30px;
    font-size: 13px;
    border-radius: var(--icon-radius);
    background: var(--primary-subtle);
    color: var(--primary);
}

.stg-panel-icon.green { background: var(--success-bg); color: var(--success); }
.stg-panel-icon.amber { background: var(--warning-bg); color: var(--warning); }
.stg-panel-header.danger .stg-panel-icon,
.stg-panel-icon.red   { background: var(--danger-bg);  color: var(--danger); }
.stg-panel-header.warning .stg-panel-icon { background: var(--warning-bg); color: var(--warning); }

.stg-panel-title {
    margin: 0;
    font-size: var(--fs-lg);
    font-weight: 600;
    color: var(--text-primary);
}

.stg-panel-desc {
    margin: 1px 0 0;
    font-size: var(--fs-sm);
    color: var(--text-muted);
}

.stg-panel-body {
    padding: 6px 0;
}

.stg-panel-body > .alert,
.stg-panel > .px-3 > .alert {
    margin: var(--space-4) 0 0;
}

.stg-panel-body .list-group-item {
    display: flex;
    align-items: center;
    padding: 11px var(--space-5);
    border-left: 0;
    border-right: 0;
    font-size: var(--fs-md);
    color: var(--text-secondary);
}

.stg-panel-body .list-group-item:hover {
    background: var(--table-row-hover);
    color: var(--primary);
}

.stg-panel-body .list-group-item i {
    width: 18px;
}

.stg-panel-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-2);
    padding: 14px var(--space-5);
    background: var(--table-header-bg);
    border-top: 1px solid var(--border-light);
}

.stg-panel-link {
    flex-shrink: 0;
    align-self: center;
    margin-left: auto;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--primary);
    text-decoration: none;
}

.stg-panel-link:hover {
    color: var(--primary-hover);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* --- Filter panel (server-side filter forms above a list) -------------- */
.stg-filter-panel {
    padding: var(--space-4) var(--space-5);
    overflow: visible;
}

.stg-filter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: var(--space-3) var(--space-4);
    align-items: end;
}

.stg-filter-actions {
    display: flex;
    gap: var(--space-2);
}

/* --- Column filters added to DataTables by footer.php ------------------ */
.stg-table-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}

.stg-table-filters .stg-table-filters-label {
    font-size: var(--fs-sm);
    color: var(--text-muted);
    margin-right: 2px;
}

.stg-table-filters select {
    width: auto;
    max-width: 220px;
    height: 34px;
    min-height: 34px;
    padding: 4px 28px 4px 10px;
    font-size: var(--fs-sm);
}

.stg-table-filters select.is-active {
    border-color: var(--primary);
    background-color: var(--primary-subtle);
    color: var(--primary-dark);
}

.stg-table-filters .stg-table-filters-reset {
    font-size: var(--fs-sm);
    font-weight: 600;
}

/* --- Customer avatar (photo, falling back to initials) ------------------ */
.stg-customer-avatar {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    overflow: hidden;
    font-size: 14px;
    font-weight: 600;
    color: var(--primary);
    background: var(--primary-light);
    border-radius: 50%;
}

/* The photo sits on top of the initials; if it fails to load it is removed and the initials show. */
.stg-customer-avatar img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* --- Inline domain type control (domain_type_form.php) ------------------ */
.stg-domain-type-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.stg-domain-type-form .custom-select {
    width: auto;
    min-width: 170px;
    min-height: 32px;
}

/* --- Activity log list (domain_activity.php, domain trail log page) ----- */
.stg-log-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.stg-log-item {
    padding: 12px var(--space-5);
    border-top: 1px solid var(--border-light);
}

.stg-log-item:first-child {
    border-top: 0;
}

.stg-log-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}

.stg-log-meta {
    font-size: var(--fs-sm);
    color: var(--text-muted);
}

.stg-log-desc {
    margin-top: 4px;
    font-size: var(--fs-md);
    color: var(--text-secondary);
}

.stg-log-changes {
    margin: 6px 0 0;
    font-size: var(--fs-sm);
}

.stg-log-changes > div {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 2px 0;
}

.stg-log-changes dt {
    min-width: 140px;
    font-weight: 500;
    color: var(--text-muted);
}

.stg-log-changes dd {
    margin: 0;
    color: var(--text-primary);
    word-break: break-word;
}

.stg-log-changes .fa-arrow-right {
    margin: 0 4px;
    font-size: 10px;
    color: var(--text-light);
}

.stg-log-old {
    color: var(--text-muted);
    text-decoration: line-through;
}

/* --- Form sections ------------------------------------------------------ */
.stg-form-section {
    padding: var(--space-5) var(--space-5) var(--space-1);
}

.stg-form-section-title {
    margin: 0 0 4px;
    font-size: var(--fs-md);
    font-weight: 600;
    color: var(--text-primary);
}

.stg-form-section-desc {
    margin: 0 0 var(--space-4);
    font-size: var(--fs-sm);
    color: var(--text-muted);
}

.stg-form-section-title + .form-row,
.stg-form-section-title + .form-group,
.stg-form-section-title + .row {
    margin-top: var(--space-3);
}

.stg-form-divider {
    margin: var(--space-2) var(--space-5) 0;
    border: none;
    border-top: 1px solid var(--border-light);
}

.stg-help-text {
    margin-top: var(--space-1);
    font-size: var(--fs-sm);
    color: var(--text-muted);
}

/* --- Stat tiles ---------------------------------------------------------- */
.stg-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}

.stg-stat-tile {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--card-radius);
    box-shadow: var(--shadow-sm);
    text-decoration: none;
    transition: var(--transition);
}

a.stg-stat-tile:hover {
    border-color: var(--primary);
    text-decoration: none;
}

.stg-stat-tile-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    min-width: 36px;
    font-size: 15px;
    border-radius: var(--icon-radius);
    background: var(--primary-subtle);
    color: var(--primary);
}

.stg-stat-tile-icon.green { background: var(--success-bg); color: var(--success); }
.stg-stat-tile-icon.amber { background: var(--warning-bg); color: var(--warning); }
.stg-stat-tile-icon.red   { background: var(--danger-bg);  color: var(--danger); }
.stg-stat-tile-icon.cyan  { background: var(--info-bg);    color: var(--info); }

.stg-stat-tile-body {
    min-width: 0;
}

.stg-stat-tile-label {
    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--text-muted);
}

.stg-stat-tile-value {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--text-primary);
}

/* --- Empty state --------------------------------------------------------- */
.stg-empty-state,
.empty-state {
    padding: var(--space-10) var(--space-6);
    text-align: center;
    color: var(--text-muted);
}

.stg-empty-state-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin: 0 auto var(--space-3);
    font-size: 18px;
    border-radius: 50%;
    background: var(--table-header-bg);
    color: var(--text-light);
}

.stg-empty-state-title {
    margin: 0 0 4px;
    font-size: var(--fs-lg);
    font-weight: 600;
    color: var(--text-primary);
}

.stg-empty-state-desc {
    max-width: 380px;
    margin: 0 auto var(--space-4);
    font-size: var(--fs-sm);
    color: var(--text-muted);
}

.stg-empty-state-desc:last-child {
    margin-bottom: 0;
}

/* --- Misc helpers still used by views ------------------------------------ */
.chart-container {
    position: relative;
    flex: 1;
    min-height: 0;
}

.chart-container canvas {
    width: 100% !important;
    height: 100% !important;
}


/* ==========================================================================
   13. DASHBOARD
   ========================================================================== */

.dash-section {
    margin-bottom: var(--space-6);
}

.dash-section:last-child {
    margin-bottom: 0;
}

.dash-section-title {
    margin: 0 0 var(--space-3);
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* --- Key metrics --------------------------------------------------------- */
.dash-metric-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-4);
}

.dash-metric {
    display: block;
    padding: var(--space-5);
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--card-radius);
    box-shadow: var(--shadow-sm);
    color: inherit;
    text-decoration: none;
    transition: var(--transition);
}

a.dash-metric:hover {
    border-color: var(--primary);
    color: inherit;
    text-decoration: none;
}

.dash-metric.is-selected {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.18);
}

.dash-metric-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}

.dash-metric-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-muted);
}

.dash-metric-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    font-size: 13px;
    border-radius: var(--icon-radius);
    background: var(--primary-subtle);
    color: var(--primary);
}

.dash-metric-value {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--text-primary);
}

.dash-metric-value .dash-currency {
    margin-right: 4px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0;
    color: var(--text-muted);
}

.dash-metric-hint {
    margin-top: 4px;
    font-size: var(--fs-sm);
    color: var(--text-muted);
}

/* --- Two-column layout (main + aside) ------------------------------------ */
.dash-split {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: var(--space-4);
    align-items: start;
}

.dash-split > .stg-panel {
    margin-bottom: 0;
}

/* --- Needs-attention list ------------------------------------------------ */
.dash-attention {
    list-style: none;
    margin: 0;
    padding: 6px 0;
}

.dash-attention-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: 11px var(--space-5);
    color: var(--text-secondary);
    text-decoration: none;
    transition: var(--transition);
}

.dash-attention-item:hover {
    background: var(--table-row-hover);
    color: var(--text-primary);
    text-decoration: none;
}

.dash-attention-dot {
    width: 8px;
    height: 8px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--warning);
}

.dash-attention-dot.danger { background: var(--danger); }
.dash-attention-dot.info   { background: var(--info); }

.dash-attention-label {
    flex: 1;
    min-width: 0;
    font-size: var(--fs-md);
}

.dash-attention-count {
    font-size: var(--fs-md);
    font-weight: 700;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

.dash-attention-item .fa-chevron-right {
    font-size: 11px;
    color: var(--text-light);
}

.dash-all-clear {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-5);
    font-size: var(--fs-md);
    color: var(--success-fg);
}

.dash-all-clear i {
    font-size: 18px;
    color: var(--success);
}

/* --- Charts -------------------------------------------------------------- */
.dash-chart-body {
    padding: var(--space-4) var(--space-5) var(--space-5) !important;
}

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

.dash-chart-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    font-size: var(--fs-sm);
    color: var(--text-muted);
}

/* --- Recent activity ----------------------------------------------------- */
.dash-activity-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-4);
    align-items: start;
}

.dash-activity-grid > .stg-panel {
    margin-bottom: 0;
}

.dash-list {
    list-style: none;
    margin: 0;
    padding: 4px 0;
}

.dash-list-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: 10px var(--space-5);
    border-top: 1px solid var(--border-light);
}

.dash-list-item:first-child {
    border-top: 0;
}

.dash-list-main {
    flex: 1;
    min-width: 0;
}

.dash-list-title {
    display: block;
    overflow: hidden;
    font-size: var(--fs-md);
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    text-overflow: ellipsis;
}

a.dash-list-title:hover {
    color: var(--primary);
}

.dash-list-meta {
    display: block;
    overflow: hidden;
    font-size: var(--fs-sm);
    color: var(--text-muted);
    white-space: nowrap;
    text-overflow: ellipsis;
}

.dash-list-side {
    flex-shrink: 0;
    font-size: var(--fs-sm);
    color: var(--text-muted);
    text-align: right;
    white-space: nowrap;
}

/* Kept for any view still using the old cell helpers */
.dash-cell-primary {
    display: block;
    max-width: 220px;
    overflow: hidden;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    text-overflow: ellipsis;
}

.dash-cell-link { color: var(--primary); }
.dash-cell-muted { font-size: var(--fs-sm); color: var(--text-muted); }


/* ==========================================================================
   14. RESPONSIVE
   ========================================================================== */

@media (max-width: 1199.98px) {
    .dash-metric-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dash-activity-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .stg-user-meta {
        display: none;
    }
}

@media (max-width: 991.98px) {
    .dash-split {
        grid-template-columns: 1fr;
    }

    /* AdminLTE slides the sidebar over content below lg; give it a shadow */
    .sidebar-open .main-sidebar {
        box-shadow: var(--shadow-lg) !important;
    }
}

@media (max-width: 767.98px) {
    :root {
        --content-pad: 16px;
    }

    .stg-page-header {
        flex-direction: column;
        align-items: stretch;
        margin-bottom: var(--space-5);
    }

    .stg-page-actions > .btn {
        flex: 1 1 auto;
    }

    .stg-title {
        font-size: 20px;
    }

    .dash-activity-grid {
        grid-template-columns: 1fr;
    }

    .stg-card-grid {
        grid-template-columns: 1fr;
    }

    .stg-panel-header {
        padding: 12px var(--space-4);
    }

    .stg-panel--table > .stg-panel-header {
        flex-wrap: wrap;
        padding: var(--space-4);
    }

    .stg-panel-actions {
        width: 100%;
        margin-left: 0;
        justify-content: flex-start;
    }

    .stg-tabs {
        padding: 0 var(--space-4);
    }

    .stg-dt-toolbar,
    .stg-dt-footer {
        padding-left: var(--space-4);
        padding-right: var(--space-4);
    }

    .stg-table > thead > tr > th:first-child,
    .stg-table > tbody > tr > td:first-child,
    .stg-table > tfoot > tr > td:first-child {
        padding-left: var(--space-4);
    }

    .stg-table > thead > tr > th:last-child,
    .stg-table > tbody > tr > td:last-child,
    .stg-table > tfoot > tr > td:last-child {
        padding-right: var(--space-4) !important;
    }

    .dataTables_wrapper .stg-dt-toolbar .dataTables_filter {
        order: 0;
        flex: 1 1 100%;
        margin-left: 0;
    }

    .dataTables_wrapper .dataTables_filter label,
    .dataTables_wrapper .dataTables_filter input {
        width: 100%;
    }

    .stg-dt-footer {
        justify-content: center;
    }

    .dataTables_wrapper .dataTables_info {
        order: -1;
        width: 100%;
        text-align: center;
    }

    .dataTables_wrapper .dataTables_paginate .paginate_button.previous,
    .dataTables_wrapper .dataTables_paginate .paginate_button.next {
        margin: 0 !important;
    }

    .modal-dialog {
        margin: var(--space-3);
    }
}

@media (max-width: 575.98px) {
    .dash-metric-grid,
    .stg-stat-grid {
        grid-template-columns: 1fr;
    }

    .dash-metric-value {
        font-size: 22px;
    }
}


/* ==========================================================================
   15. MOTION PREFERENCES
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* Wallet transactions: long references / invoice hashes wrap instead of widening the table */
.wallet-tx-details {
    min-width: 200px;
    max-width: 420px;
    overflow-wrap: anywhere;
    word-break: break-word;
}


/* ==========================================================================
   MESSAGES - mailbox (views/messages/mailbox.php)
   Three panes like a webmail client: folder rail | message list | reading pane.
   ========================================================================== */
.mailbox {
    display: grid;
    grid-template-columns: 220px minmax(280px, 380px) minmax(0, 1fr);
    min-height: calc(100vh - var(--topbar-height) - 120px);
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--card-radius);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.mailbox-rail {
    padding: var(--space-4) var(--space-3);
    background: var(--table-header-bg);
    border-right: 1px solid var(--border-color);
}

.mailbox-compose-btn {
    width: 100%;
    justify-content: flex-start;
    padding: 12px 18px;
    margin-bottom: var(--space-4);
    border-radius: var(--radius-xl);
    font-weight: 600;
    box-shadow: var(--shadow-md);
}

.mailbox-folders a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    margin-bottom: 2px;
    font-size: var(--fs-md);
    color: var(--text-secondary);
    border-radius: var(--radius-pill);
    text-decoration: none;
}

.mailbox-folders a i { width: 16px; text-align: center; color: var(--text-muted); }
.mailbox-folders a span { flex: 1; }
.mailbox-folders a em { font-style: normal; font-size: var(--fs-sm); font-weight: 600; color: var(--text-muted); }
.mailbox-folders a em.is-alert { color: var(--danger); }
.mailbox-folders a:hover { background: var(--border-light); color: var(--text-primary); }
.mailbox-folders a.active { background: var(--primary-light); color: var(--primary-dark); font-weight: 600; }
.mailbox-folders a.active i { color: var(--primary); }

.mailbox-folders-label {
    padding: var(--space-4) 12px 6px;
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-light);
}

.mailbox-list {
    display: flex;
    flex-direction: column;
    min-width: 0;
    border-right: 1px solid var(--border-color);
}

.mailbox-search {
    position: relative;
    padding: var(--space-3);
    border-bottom: 1px solid var(--border-light);
}

.mailbox-search i {
    position: absolute;
    left: 26px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 13px;
    color: var(--text-light);
}

.mailbox-search input {
    width: 100%;
    height: 38px;
    padding: 0 12px 0 36px;
    font-size: var(--fs-md);
    background: var(--table-header-bg);
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    outline: none;
}

.mailbox-search input:focus { background: var(--card-bg); border-color: var(--primary); box-shadow: var(--shadow-focus); }

.mailbox-list-head {
    display: flex;
    justify-content: space-between;
    padding: 10px var(--space-4);
    font-size: var(--fs-sm);
    color: var(--text-muted);
    border-bottom: 1px solid var(--border-light);
}

.mailbox-list-head strong { color: var(--text-primary); }

.mailbox-items {
    flex: 1;
    margin: 0;
    padding: 0;
    list-style: none;
    overflow-y: auto;
    max-height: calc(100vh - 260px);
}

.mailbox-item {
    display: flex;
    gap: var(--space-3);
    padding: 12px var(--space-4);
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid var(--border-light);
    border-left: 3px solid transparent;
}

.mailbox-item:hover { background: var(--table-row-hover); color: inherit; text-decoration: none; }
.mailbox-item.active { background: var(--primary-subtle); border-left-color: var(--primary); }

.mailbox-item-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    font-size: 13px;
    border-radius: 50%;
    background: var(--primary-light);
    color: var(--primary);
}

.mailbox-item-icon.sms { background: var(--success-bg); color: var(--success); }
.mailbox-item-main { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.mailbox-item-top { display: flex; justify-content: space-between; gap: var(--space-2); }

.mailbox-item-who {
    overflow: hidden;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    text-overflow: ellipsis;
}

.mailbox-item-time { flex-shrink: 0; font-size: var(--fs-sm); color: var(--text-muted); }
.mailbox-item-subject, .mailbox-item-snippet { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.mailbox-item-subject { font-size: var(--fs-md); color: var(--text-secondary); }
.mailbox-item-snippet { font-size: var(--fs-sm); color: var(--text-muted); }

.mailbox-reader { display: flex; flex-direction: column; min-width: 0; }

.mailbox-reader-head {
    padding: var(--space-5) var(--space-6) var(--space-4);
    border-bottom: 1px solid var(--border-light);
}

.mailbox-reader-subject { margin: 0 0 var(--space-4); font-size: 20px; font-weight: 600; word-break: break-word; }
.mailbox-reader-meta { display: flex; align-items: center; gap: var(--space-3); }
.mailbox-reader-meta-text { min-width: 0; word-break: break-word; }

.mailbox-attachment {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: var(--space-3);
    padding: 6px 12px;
    font-size: var(--fs-sm);
    background: var(--table-header-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
}

.mailbox-reader-body { flex: 1; padding: var(--space-4) var(--space-6); }
.mailbox-email-frame { width: 100%; min-height: 420px; border: 0; }

.mailbox-sms {
    display: inline-block;
    max-width: 520px;
    padding: 12px 16px;
    font-size: var(--fs-md);
    line-height: 1.55;
    background: var(--success-bg);
    border-radius: 16px 16px 16px 4px;
    word-break: break-word;
}

.mailbox-reader-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-6) var(--space-6);
}

.mailbox-reader-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    gap: var(--space-3);
    color: var(--text-light);
}

.mailbox-reader-empty i { font-size: 48px; }
.mailbox-back { display: none; margin-bottom: var(--space-3); }

.compose-channel {
    display: inline-flex;
    margin-bottom: var(--space-4);
    padding: 3px;
    background: var(--table-header-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-pill);
}

.compose-channel label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 6px 16px;
    font-weight: 500;
    color: var(--text-muted);
    border-radius: var(--radius-pill);
    cursor: pointer;
}

.compose-channel input { position: absolute; opacity: 0; pointer-events: none; }
.compose-channel label.active { background: var(--card-bg); color: var(--primary); box-shadow: var(--shadow-sm); }

.compose-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: var(--space-2);
}

@media (max-width: 1199.98px) {
    .mailbox { grid-template-columns: 200px minmax(240px, 320px) minmax(0, 1fr); }
}

@media (max-width: 991.98px) {
    .mailbox { grid-template-columns: 1fr; }
    .mailbox-rail { border-right: 0; border-bottom: 1px solid var(--border-color); }
    .mailbox-folders { display: flex; flex-wrap: wrap; gap: 4px; }
    .mailbox-folders a { margin: 0; }
    .mailbox-folders-label { display: none; }
    .mailbox-items { max-height: none; }
    .mailbox-reader { display: none; }
    .mailbox.has-open .mailbox-list { display: none; }
    .mailbox.has-open .mailbox-reader { display: flex; }
    .mailbox-back { display: inline-flex; }
}

/* Invoice / receipt document preview (PDF layout shown in a sandboxed frame) */
.doc-preview {
    display: block;
    width: 100%;
    height: 1000px;
    border: 0;
    background: #fff;
}
@media (max-width: 767.98px) {
    .doc-preview { height: 1200px; }
}


/* ==========================================================================
   16. OFFICIAL IDENTITY
   The portal presents itself as an official administrative record system: a
   brass rule, a seal, serif headings, square panels and register-style tables.
   These rules only restyle existing classes, so no markup or JS changes.
   ========================================================================== */

/* --- Sidebar brand: the logo on a white letterhead plate ----------------- */
.main-sidebar .brand-link {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px var(--space-4);
    background: #ffffff;
    border-bottom: 3px solid var(--brand) !important;
}

/* The company logo keeps its own colours on the white plate */
.main-sidebar .brand-link img {
    display: block;
    width: auto;
    max-width: 172px;
    max-height: 34px;
    filter: none;
}

/* --- Top bar: brand rule and classification chip ------------------------- */
.main-header.navbar {
    border-bottom: 1px solid var(--border-color);
}

.main-header.navbar::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--brand) 0%, var(--brand) 70%, var(--primary-dark) 70%, var(--primary-dark) 100%);
}

.gov-classification {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 9px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: #ffffff;
    background: var(--brand);
    border: 1px solid var(--brand);
    border-radius: 0;
    white-space: nowrap;
}

.gov-classification i { font-size: 9px; }

/* --- Sidebar section labels read as register headings -------------------- */
.nav-sidebar > .nav-header {
    letter-spacing: 0.13em;
    font-weight: 700;
    color: var(--brand-light);
}

/* --- Page header: ruled and titled like an official notice --------------- */
.stg-page-header {
    position: relative;
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--border-color);
}

.stg-page-header::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -3px;
    border-bottom: 2px solid var(--brand);
}

.stg-breadcrumb {
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--text-light);
}

.stg-breadcrumb .sep { margin: 0 7px; color: var(--brand); }

.stg-title {
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.2;
}

.stg-subtitle {
    font-size: var(--fs-md);
    color: var(--text-muted);
}

/* --- Panels: square, bordered records rather than floating cards --------- */
.stg-panel-title { font-family: var(--font-display); }

.stg-panel-header {
    border-bottom: 1px solid var(--border-color);
    background: linear-gradient(180deg, var(--primary-subtle), var(--card-bg));
}

.stg-panel-icon {
    border: 1px solid var(--border-color);
    background: var(--card-bg);
    color: var(--primary);
}

/* --- Tables: register style with an uppercase header and a brand rule --- */
.content-wrapper .table thead th {
    padding: 11px 16px;
    background: var(--brand-soft);
    border-bottom: 2px solid var(--brand);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--primary-dark);
}

.content-wrapper .table tbody td {
    font-size: 13.5px;
}

.content-wrapper .table-striped tbody tr:nth-of-type(odd) {
    background: #fafcfe;
}

/* --- Footer: legal line with a brand rule -------------------------------- */
.main-footer {
    background: var(--card-bg);
    border-top: 2px solid var(--brand);
    font-size: var(--fs-xs);
    color: var(--text-muted);
}

.gov-footer-brand {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--text-secondary);
}

.gov-footer-meta {
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-light);
}

/* --- Receipt create/edit forms -------------------------------------------
   Field gutters match the 24px panel header gutter, so input edges line up
   with the panel title instead of sitting inside it. */
.stg-form {
    padding: 0 var(--space-5) var(--space-5);
}

.stg-form > .stg-form-divider {
    margin-left: 0;
    margin-right: 0;
}

.stg-form > .btn {
    margin-top: var(--space-5);
}

.stg-form-alert {
    padding: var(--space-4) var(--space-5) 0;
}

.stg-form-alert .alert {
    margin-bottom: 0;
}

/* Document preview sits in a light gutter inside its panel */
.doc-preview-frame {
    padding: var(--space-4);
    background: var(--body-bg);
}

/* ==========================================================================
   LINE ITEMS (receipt / invoice forms)
   ========================================================================== */

.li-editor {
    border: 1px solid var(--border-color);
    background: var(--card-bg);
}

.li-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
}

.li-table thead th {
    padding: var(--space-3, 12px) var(--space-3, 12px);
    background: var(--table-header-bg);
    border-bottom: 1px solid var(--table-border);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--brand-dark);
    text-align: left;
    white-space: nowrap;
}

.li-table tbody td {
    padding: var(--space-3, 12px);
    border-bottom: 1px solid var(--border-light);
    vertical-align: middle;
}

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

.li-table .li-col-qty    { width: 96px; }
.li-table .li-col-price  { width: 150px; }
.li-table .li-col-amount { width: 150px; }
.li-table .li-col-remove { width: 48px; }

.li-table .form-control {
    margin: 0;
}

.li-col-amount {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
}

.li-col-remove {
    text-align: center;
}

.li-remove {
    border: 1px solid var(--border-color);
    background: var(--card-bg);
    color: var(--text-muted);
    width: 30px;
    height: 30px;
    line-height: 1;
    cursor: pointer;
}

.li-remove:hover {
    border-color: var(--danger-border);
    background: var(--danger-bg);
    color: var(--danger-fg);
}

.li-toolbar {
    padding: var(--space-3, 12px);
    border-top: 1px solid var(--border-light);
    background: var(--primary-subtle);
}

.li-summary {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
    gap: var(--space-4, 16px);
    padding: var(--space-4, 16px);
    border-top: 1px solid var(--border-color);
    background: var(--card-bg);
}

.li-summary-vat {
    min-width: 220px;
}

.li-summary-vat label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 6px;
}

.li-totals {
    margin-left: auto;
    min-width: 320px;
    border: 1px solid var(--border-color);
}

.li-totals td {
    padding: 10px 16px;
    border-bottom: 1px solid var(--border-light);
}

.li-totals tr:last-child td {
    border-bottom: 0;
}

.li-total-label {
    font-size: 11px;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.li-total-value {
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
}

.li-totals tr.li-total-row td {
    background: var(--brand-soft);
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--text-primary);
}

@media (max-width: 767.98px) {
    .li-table thead { display: none; }
    .li-table tbody td { display: block; width: 100%; padding: 6px 12px; }
    .li-table .li-col-amount { text-align: left; }
    .li-totals { min-width: 0; width: 100%; }
}