/* ============================================================
   QuoteLink QL Workbench Portal Theme Layer
   File: quotelink.workbench-portal.css
   Purpose: Private admin portal styling for operational review,
            auditability, sensitive data handling, and marketplace control.

   Usage:
   1. Copy this file to: wwwroot/css/quotelink.workbench-portal.css
   2. Load it after Bootstrap and quotelink.bootstrap.css.
   3. Remove the temporary inline .qlw-* style block from the Workbench layout
      once this file is referenced.
   ============================================================ */

/* ============================================================
   Workbench Design Tokens
   ============================================================ */

:root {
    /* ------------------------------------------------------------
       Base colour palette
       All colour values used by this file are declared here so that
       the Workbench portal can be re-skinned from one place.
       ------------------------------------------------------------ */
    --qlw-color-transparent: transparent;
    --qlw-color-ink: #0B1220;
    --qlw-color-navy-deep: #061426;
    --qlw-color-navy-dark: #07182E;
    --qlw-color-navy: #0B1F3A;
    --qlw-color-slate: #172033;
    --qlw-color-dark-text: #1F2937;
    --qlw-color-muted: #667085;
    --qlw-color-soft-muted: #98A2B3;
    --qlw-color-secondary-badge-bg: #475467;
    --qlw-color-white: #FFFFFF;
    --qlw-color-panel-subtle: #F8FAFC;
    --qlw-color-panel-gradient-end: #FBFCFE;
    --qlw-color-page-bg: #EEF2F7;
    --qlw-color-code-bg: #F1F5F9;
    --qlw-color-print-border: #D0D5DD;
    --qlw-color-green: #28A745;
    --qlw-color-green-dark: #1E7E34;
    --qlw-color-green-bright: #34D058;
    --qlw-color-gold: #D4AF37;
    --qlw-color-orange: #FF6B00;
    --qlw-color-red: #DC3545;
    --qlw-color-red-dark: #B02A37;
    --qlw-color-blue: #2563EB;
    --qlw-color-purple: #7C3AED;
    --qlw-color-amber: #FBBF24;
    --qlw-color-info-text: #0F3F56;
    --qlw-color-success-text: #155724;
    --qlw-color-warning-text: #6B4E00;
    /* ------------------------------------------------------------
       Alpha colour tokens
       These are intentionally declared as complete colour values so
       they can be reused anywhere without repeating rgba(...) values.
       ------------------------------------------------------------ */
    --qlw-alpha-black-028: rgba(0, 0, 0, 0.28);
    --qlw-alpha-navy-004: rgba(11, 31, 58, 0.04);
    --qlw-alpha-navy-006: rgba(11, 31, 58, 0.06);
    --qlw-alpha-navy-008: rgba(11, 31, 58, 0.08);
    --qlw-alpha-navy-012: rgba(11, 31, 58, 0.12);
    --qlw-alpha-navy-016: rgba(11, 31, 58, 0.16);
    --qlw-alpha-navy-020: rgba(11, 31, 58, 0.2);
    --qlw-alpha-gold-008: rgba(212, 175, 55, 0.08);
    --qlw-alpha-gold-013: rgba(212, 175, 55, 0.13);
    --qlw-alpha-gold-014: rgba(212, 175, 55, 0.14);
    --qlw-alpha-gold-017: rgba(212, 175, 55, 0.17);
    --qlw-alpha-gold-022: rgba(212, 175, 55, 0.22);
    --qlw-alpha-gold-026: rgba(212, 175, 55, 0.26);
    --qlw-alpha-red-006: rgba(220, 53, 69, 0.06);
    --qlw-alpha-red-008: rgba(220, 53, 69, 0.08);
    --qlw-alpha-red-012: rgba(220, 53, 69, 0.12);
    --qlw-alpha-red-018: rgba(220, 53, 69, 0.18);
    --qlw-alpha-red-020: rgba(220, 53, 69, 0.2);
    --qlw-alpha-red-022: rgba(220, 53, 69, 0.22);
    --qlw-alpha-red-025: rgba(220, 53, 69, 0.25);
    --qlw-alpha-red-035: rgba(220, 53, 69, 0.35);
    --qlw-alpha-orange-008: rgba(255, 107, 0, 0.08);
    --qlw-alpha-orange-012: rgba(255, 107, 0, 0.12);
    --qlw-alpha-orange-016: rgba(255, 107, 0, 0.16);
    --qlw-alpha-white-008: rgba(255, 255, 255, 0.08);
    --qlw-alpha-white-009: rgba(255, 255, 255, 0.09);
    --qlw-alpha-white-010: rgba(255, 255, 255, 0.1);
    --qlw-alpha-white-011: rgba(255, 255, 255, 0.11);
    --qlw-alpha-white-055: rgba(255, 255, 255, 0.55);
    --qlw-alpha-white-058: rgba(255, 255, 255, 0.58);
    --qlw-alpha-white-070: rgba(255, 255, 255, 0.7);
    --qlw-alpha-white-072: rgba(255, 255, 255, 0.72);
    --qlw-alpha-white-076: rgba(255, 255, 255, 0.76);
    --qlw-alpha-white-078: rgba(255, 255, 255, 0.78);
    --qlw-alpha-white-092: rgba(255, 255, 255, 0.92);
    --qlw-alpha-white-098: rgba(255, 255, 255, 0.98);
    --qlw-alpha-blue-008: rgba(37, 99, 235, 0.08);
    --qlw-alpha-blue-018: rgba(37, 99, 235, 0.18);
    --qlw-alpha-blue-035: rgba(37, 99, 235, 0.35);
    --qlw-alpha-green-0035: rgba(40, 167, 69, 0.035);
    --qlw-alpha-green-007: rgba(40, 167, 69, 0.07);
    --qlw-alpha-green-010: rgba(40, 167, 69, 0.1);
    --qlw-alpha-green-012: rgba(40, 167, 69, 0.12);
    --qlw-alpha-green-018: rgba(40, 167, 69, 0.18);
    --qlw-alpha-green-022: rgba(40, 167, 69, 0.22);
    --qlw-alpha-green-bright-007: rgba(52, 208, 88, 0.07);
    /* ------------------------------------------------------------
       Semantic colour assignments
       Change these first when altering the Workbench look and feel.
       ------------------------------------------------------------ */
    --qlw-ink: var(--qlw-color-ink);
    --qlw-navy: var(--qlw-color-navy-dark);
    --qlw-navy-2: var(--qlw-color-navy);
    --qlw-slate: var(--qlw-color-slate);
    --qlw-muted: var(--qlw-color-muted);
    --qlw-soft-muted: var(--qlw-color-soft-muted);
    --qlw-panel: var(--qlw-color-white);
    --qlw-panel-subtle: var(--qlw-color-panel-subtle);
    --qlw-page-bg: var(--qlw-color-page-bg);
    --qlw-border: var(--qlw-alpha-navy-012);
    --qlw-border-strong: var(--qlw-alpha-navy-020);
    --qlw-green: var(--qlw-color-green);
    --qlw-green-dark: var(--qlw-color-green-dark);
    --qlw-gold: var(--qlw-color-gold);
    --qlw-orange: var(--qlw-color-orange);
    --qlw-red: var(--qlw-color-red);
    --qlw-red-dark: var(--qlw-color-red-dark);
    --qlw-blue: var(--qlw-color-blue);
    --qlw-purple: var(--qlw-color-purple);
    /* ------------------------------------------------------------
       Menu colour assignments
       The main Workbench menu intentionally uses a solid dark colour.
       The menu item colour uses the same orange used in the QuoteLink K.
       ------------------------------------------------------------ */
    --qlw-menu-bg: var(--qlw-color-navy-dark);
    --qlw-menu-text: var(--qlw-alpha-white-078);
    --qlw-menu-muted-text: var(--qlw-alpha-white-058);
    --qlw-menu-divider: var(--qlw-alpha-white-010);
    --qlw-menu-card-bg: var(--qlw-alpha-white-008);
    --qlw-menu-card-border: var(--qlw-alpha-white-011);
    --qlw-menu-item-color: var(--qlw-alpha-white-078);
    --qlw-menu-item-hover-color: var(--qlw-color-white);
    --qlw-menu-item-hover-bg: var(--qlw-alpha-white-009);
    --qlw-menu-item-hover-border: var(--qlw-color-transparent);
    --qlw-menu-item-active-color: var(--qlw-color-white);
    --qlw-menu-item-active-bg: var(--qlw-alpha-white-009);
    --qlw-menu-item-active-border: var(--qlw-color-transparent);
    --qlw-menu-focus-ring: 0 0 0 0.25rem var(--qlw-alpha-gold-022);
    /* Backwards-compatible aliases for earlier patch names. */
    --ql-workbench-menu-bg: var(--qlw-menu-bg);
    --ql-workbench-menu-item-color: var(--qlw-menu-item-color);
    --ql-workbench-menu-item-hover-color: var(--qlw-menu-item-hover-color);
    --ql-workbench-menu-item-active-color: var(--qlw-menu-item-active-color);
    --ql-workbench-menu-item-active-bg: var(--qlw-menu-item-active-bg);
    /* ------------------------------------------------------------
       Spacing, sizing, radius, shadows, and reusable treatments
       ------------------------------------------------------------ */
    --qlw-radius-sm: 0.55rem;
    --qlw-radius-md: 0.9rem;
    --qlw-radius-lg: 1.2rem;
    --qlw-radius-xl: 1.55rem;
    --qlw-shadow-sm: 0 0.2rem 0.65rem var(--qlw-alpha-navy-008);
    --qlw-shadow-md: 0 0.75rem 1.75rem var(--qlw-alpha-navy-012);
    --qlw-shadow-dark: 0 1rem 2.5rem var(--qlw-alpha-black-028);
    --qlw-sidebar-width: 17.5rem;
    --qlw-topbar-height: 5.25rem;
    --qlw-focus-ring: 0 0 0 0.25rem var(--qlw-alpha-green-018);
    --qlw-gradient-dark: radial-gradient(circle at top right, var(--qlw-alpha-gold-017), var(--qlw-color-transparent) 30%), linear-gradient(135deg, var(--qlw-color-navy-deep) 0%, var(--qlw-color-navy-dark) 50%, var(--qlw-color-navy) 100%);
    --qlw-gradient-page: radial-gradient(circle at top right, var(--qlw-alpha-green-007), var(--qlw-color-transparent) 25rem), radial-gradient(circle at bottom left, var(--qlw-alpha-gold-008), var(--qlw-color-transparent) 22rem), var(--qlw-page-bg);
    --qlw-gradient-login: radial-gradient(circle at top right, var(--qlw-alpha-green-012), var(--qlw-color-transparent) 24rem), radial-gradient(circle at bottom left, var(--qlw-alpha-gold-013), var(--qlw-color-transparent) 22rem), var(--qlw-gradient-dark);
    --qlw-gradient-alert: linear-gradient(135deg, var(--qlw-alpha-red-012) 0%, var(--qlw-alpha-orange-008) 100%);
    --qlw-gradient-success: linear-gradient(135deg, var(--qlw-alpha-green-012) 0%, var(--qlw-alpha-green-bright-007) 100%);
    --qlw-gradient-filter-card: linear-gradient(180deg, var(--qlw-color-white) 0%, var(--qlw-color-panel-gradient-end) 100%);
    --qlw-gradient-metric-accent: linear-gradient(180deg, var(--qlw-green), var(--qlw-gold));
}


/* ============================================================
   Shell and Page Structure
   ============================================================ */

body.qlw-body,
.qlw-shell {
    min-height: 100vh;
    background: var(--qlw-gradient-page);
    color: var(--qlw-slate);
}

.qlw-shell {
    overflow-x: hidden;
}

    .qlw-shell .container-fluid {
        min-height: 100vh;
    }

.qlw-main,
.qlw-main-wrap {
    min-width: 0;
}

.qlw-content {
    padding: 1.25rem;
}

.qlw-content-inner,
.qlw-page-section {
    max-width: 100rem;
    margin: 0 auto;
}

/* ============================================================
   Sidebar
   ============================================================ */

.qlw-sidebar {
    min-height: 100vh;
    background: var(--qlw-menu-bg);
    background-image: none;
    color: var(--qlw-menu-text);
    box-shadow: inset -1px 0 0 var(--qlw-alpha-white-008);
}

.qlw-sidebar-inner {
    position: sticky;
    top: 0;
    min-height: 100vh;
}

.qlw-sidebar-brand {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    color: var(--qlw-color-white);
    font-weight: 900;
    letter-spacing: -0.03em;
}

    .qlw-sidebar-brand:hover {
        color: var(--qlw-color-white);
    }

.qlw-sidebar-brand-text {
    display: grid;
    line-height: 1.1;
}

.qlw-sidebar-brand-title {
    font-size: 1.06rem;
}

.qlw-sidebar-brand-subtitle,
.qlw-sidebar-help,
.qlw-sidebar .small,
.qlw-sidebar small {
    color: var(--qlw-menu-muted-text) !important;
}

.qlw-sidebar-label {
    margin: 1rem 0 0.55rem;
    color: var(--qlw-gold);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.qlw-sidebar .border-bottom,
.qlw-sidebar-divider {
    border-color: var(--qlw-menu-divider) !important;
}

.qlw-sidebar .nav {
    gap: 0.28rem;
}

.qlw-sidebar .nav-link,
.qlw-nav-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    color: var(--qlw-menu-item-color);
    border: 1px solid var(--qlw-color-transparent);
    border-radius: 0.85rem;
    font-weight: 750;
    line-height: 1.2;
    transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease, transform 160ms ease;
}

    .qlw-sidebar .nav-link:hover,
    .qlw-nav-link:hover {
        color: var(--qlw-menu-item-hover-color);
        background: var(--qlw-menu-item-hover-bg);
        border-color: var(--qlw-menu-item-hover-border);
        transform: none;
    }

    .qlw-sidebar .nav-link.active,
    .qlw-nav-link.active,
    .qlw-sidebar .nav-link[aria-current="page"],
    .qlw-nav-link[aria-current="page"] {
        color: var(--qlw-menu-item-active-color);
        background: var(--qlw-menu-item-active-bg);
        border-color: var(--qlw-menu-item-active-border);
        transform: none;
    }

    .qlw-sidebar .nav-link:focus-visible,
    .qlw-nav-link:focus-visible {
        outline: none;
        box-shadow: var(--qlw-menu-focus-ring);
    }

.qlw-sidebar-card {
    padding: 1rem;
    border-radius: var(--qlw-radius-md);
    background: var(--qlw-menu-card-bg);
    border: 1px solid var(--qlw-menu-card-border);
}

/* ============================================================
   Top Bar
   ============================================================ */

.qlw-topbar,
.qlw-shell header.bg-white {
    min-height: var(--qlw-topbar-height);
    background: var(--qlw-alpha-white-092) !important;
    border-bottom: 1px solid var(--qlw-border) !important;
    backdrop-filter: blur(14px);
    position: sticky;
    top: 0;
    z-index: 30;
}

.qlw-kicker,
.qlw-shell header .small:first-child {
    color: var(--qlw-gold) !important;
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.qlw-page-title,
.qlw-shell header h1 {
    margin: 0;
    color: var(--qlw-navy) !important;
    font-size: clamp(1.25rem, 2vw, 1.85rem);
    font-weight: 900 !important;
    letter-spacing: -0.04em;
    line-height: 1.1;
}

.qlw-topbar-meta {
    color: var(--qlw-muted);
    font-size: 0.82rem;
    font-weight: 650;
}

.qlw-private-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.65rem;
    border-radius: 999px;
    background: var(--qlw-alpha-navy-006);
    border: 1px solid var(--qlw-border);
    color: var(--qlw-navy);
    font-size: 0.78rem;
    font-weight: 800;
}

    .qlw-private-pill::before {
        content: "";
        width: 0.5rem;
        height: 0.5rem;
        border-radius: 999px;
        background: var(--qlw-green);
        box-shadow: 0 0 0 0.25rem var(--qlw-alpha-green-012);
    }

/* ============================================================
   Cards, Panels, and Metric Blocks
   ============================================================ */

.card.qlw-card,
.qlw-panel {
    background: var(--qlw-panel);
    border: 1px solid var(--qlw-border);
    border-radius: var(--qlw-radius-lg);
    box-shadow: var(--qlw-shadow-sm);
    overflow: hidden;
}

.card.ql-card,
.card.qlw-card {
    border-color: var(--qlw-border);
    border-radius: var(--qlw-radius-lg);
}

    .card.ql-card:hover,
    .card.qlw-card:hover {
        transform: none;
    }

.qlw-panel-soft {
    background: var(--qlw-panel-subtle);
    border: 1px solid var(--qlw-border);
    border-radius: var(--qlw-radius-lg);
}

.qlw-card-header,
.card.ql-card > .card-header,
.card.qlw-card > .card-header {
    background: var(--qlw-panel) !important;
    border-bottom: 1px solid var(--qlw-border);
    color: var(--qlw-navy);
    font-weight: 900;
}

.qlw-card-title {
    color: var(--qlw-navy);
    font-weight: 900;
    letter-spacing: -0.03em;
}

.qlw-card-copy {
    color: var(--qlw-muted);
    line-height: 1.6;
}

.qlw-card-metric {
    min-height: 10rem;
    position: relative;
    overflow: hidden;
}

    .qlw-card-metric::before {
        content: "";
        position: absolute;
        inset: 0 auto 0 0;
        width: 0.32rem;
        background: var(--qlw-gradient-metric-accent);
    }

    .qlw-card-metric .card-body {
        padding: 1.1rem 1.1rem 1.1rem 1.35rem;
    }

    .qlw-card-metric .display-6 {
        color: var(--qlw-navy);
        font-weight: 950 !important;
        letter-spacing: -0.05em;
        line-height: 1;
    }

    .qlw-metric-label,
    .qlw-card-metric .small.text-muted:first-child {
        color: var(--qlw-muted) !important;
        font-size: 0.78rem;
        font-weight: 850;
        letter-spacing: 0.055em;
        text-transform: uppercase;
    }

.qlw-section-heading {
    color: var(--qlw-navy);
    font-weight: 900;
    letter-spacing: -0.03em;
}

.qlw-empty-state {
    padding: 2rem;
    border: 1px dashed var(--qlw-border-strong);
    border-radius: var(--qlw-radius-lg);
    background: var(--qlw-alpha-white-070);
    text-align: center;
}

/* ============================================================
   Tables and Drill-down Rows
   ============================================================ */

.qlw-table {
    margin-bottom: 0;
}

    .qlw-table td,
    .qlw-table th {
        vertical-align: middle;
    }

    .qlw-table thead th,
    .table.qlw-table thead th {
        background: var(--qlw-color-panel-subtle);
        border-bottom: 1px solid var(--qlw-border);
        color: var(--qlw-muted);
        font-size: 0.75rem;
        font-weight: 900;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        white-space: nowrap;
    }

    .qlw-table tbody td {
        border-color: var(--qlw-alpha-navy-008);
        color: var(--qlw-slate);
    }

    .qlw-table tbody tr:hover {
        background: var(--qlw-alpha-green-0035);
    }

    .qlw-table .fw-bold,
    .qlw-row-title {
        color: var(--qlw-navy);
        font-weight: 850 !important;
    }

    .qlw-table .small.text-muted,
    .qlw-row-subtitle {
        color: var(--qlw-muted) !important;
    }

.qlw-table-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.45rem;
    white-space: nowrap;
}

.qlw-table .btn-sm {
    border-radius: 999px;
    font-weight: 800;
}

.qlw-money,
.qlw-count,
.qlw-date {
    font-variant-numeric: tabular-nums;
}

/* ============================================================
   Operational Status and Risk Treatments
   ============================================================ */

.qlw-sensitive {
    border: 1px solid var(--qlw-alpha-red-035) !important;
    background: var(--qlw-gradient-alert) !important;
}

    .qlw-sensitive .card-header {
        background: var(--qlw-alpha-red-008) !important;
        border-bottom-color: var(--qlw-alpha-red-020);
    }

    .qlw-sensitive h1,
    .qlw-sensitive h2,
    .qlw-sensitive h3,
    .qlw-sensitive h4,
    .qlw-sensitive h5,
    .qlw-sensitive h6 {
        color: var(--qlw-red-dark);
    }

.qlw-audit-required {
    border-left: 0.35rem solid var(--qlw-red);
}

.qlw-review-required {
    border-left: 0.35rem solid var(--qlw-orange);
}

.qlw-ok,
.qlw-status-ok {
    border-left: 0.35rem solid var(--qlw-green);
}

.qlw-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.6rem;
    border-radius: 999px;
    border: 1px solid var(--qlw-border);
    background: var(--qlw-color-white);
    color: var(--qlw-slate);
    font-size: 0.78rem;
    font-weight: 850;
    line-height: 1;
}

    .qlw-status-pill::before {
        content: "";
        width: 0.45rem;
        height: 0.45rem;
        border-radius: 999px;
        background: var(--qlw-soft-muted);
    }

    .qlw-status-pill.is-success::before,
    .qlw-status-pill.is-active::before {
        background: var(--qlw-green);
    }

    .qlw-status-pill.is-warning::before,
    .qlw-status-pill.is-pending::before {
        background: var(--qlw-orange);
    }

    .qlw-status-pill.is-danger::before,
    .qlw-status-pill.is-disabled::before {
        background: var(--qlw-red);
    }

    .qlw-status-pill.is-info::before {
        background: var(--qlw-blue);
    }

.qlw-priority-p1,
.badge.qlw-priority-p1 {
    color: var(--qlw-color-white);
    background: var(--qlw-red) !important;
}

.qlw-priority-p2,
.badge.qlw-priority-p2 {
    color: var(--qlw-color-dark-text);
    background: var(--qlw-color-amber) !important;
}

.qlw-priority-p3,
.badge.qlw-priority-p3 {
    color: var(--qlw-color-white);
    background: var(--qlw-blue) !important;
}

/* ============================================================
   Forms and Filters
   ============================================================ */

.qlw-filter-card .card-body,
form.card.ql-card .card-body {
    background: var(--qlw-gradient-filter-card);
}

.qlw-shell .form-label {
    color: var(--qlw-navy);
    font-weight: 850;
}

.qlw-shell .form-control,
.qlw-shell .form-select {
    border-color: var(--qlw-alpha-navy-016);
    border-radius: 0.8rem;
    color: var(--qlw-slate);
}

    .qlw-shell .form-control:focus,
    .qlw-shell .form-select:focus {
        border-color: var(--qlw-green);
        box-shadow: var(--qlw-focus-ring);
    }

    .qlw-shell .form-control[readonly],
    .qlw-shell .form-control:disabled,
    .qlw-shell .form-select:disabled {
        background: var(--qlw-color-panel-subtle);
        color: var(--qlw-muted);
    }

.qlw-shell textarea.form-control {
    min-height: 8rem;
}

.qlw-help-text,
.qlw-shell .form-text {
    color: var(--qlw-muted);
    font-size: 0.84rem;
}

.qlw-validation-summary,
.qlw-shell .validation-summary-errors {
    padding: 1rem;
    border: 1px solid var(--qlw-alpha-red-025);
    border-radius: var(--qlw-radius-md);
    background: var(--qlw-alpha-red-006);
    color: var(--qlw-red-dark);
}

/* ============================================================
   Buttons
   ============================================================ */

.qlw-shell .btn,
.qlw-login .btn {
    font-weight: 800;
}

.qlw-shell .btn-ql-dark,
.qlw-login .btn-ql-dark {
    box-shadow: 0 0.45rem 1rem var(--qlw-alpha-navy-016);
}

.qlw-shell .btn-outline-primary,
.qlw-login .btn-outline-primary {
    --bs-btn-color: var(--qlw-blue);
    --bs-btn-border-color: var(--qlw-alpha-blue-035);
    --bs-btn-hover-bg: var(--qlw-blue);
    --bs-btn-hover-border-color: var(--qlw-blue);
    border-radius: 999px;
    font-weight: 800;
}

.qlw-shell .btn-outline-secondary,
.qlw-login .btn-outline-secondary {
    border-radius: 999px;
    font-weight: 800;
}

.qlw-shell .btn-outline-danger,
.qlw-login .btn-outline-danger {
    border-radius: 999px;
    font-weight: 850;
}

.qlw-shell .btn-danger,
.qlw-login .btn-danger {
    --bs-btn-bg: var(--qlw-red);
    --bs-btn-border-color: var(--qlw-red);
    --bs-btn-hover-bg: var(--qlw-red-dark);
    --bs-btn-hover-border-color: var(--qlw-red-dark);
    border-radius: 999px;
    font-weight: 900;
    box-shadow: 0 0.5rem 1rem var(--qlw-alpha-red-018);
}

/* ============================================================
   Alerts and Messages
   ============================================================ */

.qlw-shell .alert,
.qlw-login .alert {
    border-radius: var(--qlw-radius-md);
    border-width: 1px;
    box-shadow: 0 0.2rem 0.7rem var(--qlw-alpha-navy-004);
}

.qlw-shell .alert-info,
.qlw-login .alert-info {
    color: var(--qlw-color-info-text);
    background: var(--qlw-alpha-blue-008);
    border-color: var(--qlw-alpha-blue-018);
}

.qlw-shell .alert-warning,
.qlw-login .alert-warning {
    color: var(--qlw-color-warning-text);
    background: var(--qlw-alpha-gold-014);
    border-color: var(--qlw-alpha-gold-026);
}

.qlw-shell .alert-danger,
.qlw-login .alert-danger {
    color: var(--qlw-red-dark);
    background: var(--qlw-alpha-red-008);
    border-color: var(--qlw-alpha-red-022);
}

.qlw-shell .alert-success,
.qlw-login .alert-success {
    color: var(--qlw-color-success-text);
    background: var(--qlw-alpha-green-010);
    border-color: var(--qlw-alpha-green-022);
}

/* ============================================================
   Definition Lists and Detail Views
   ============================================================ */

.qlw-shell dl dt {
    color: var(--qlw-muted);
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.045em;
    text-transform: uppercase;
}

.qlw-shell dl dd {
    color: var(--qlw-slate);
    font-weight: 700;
    margin-bottom: 0.7rem;
}

.qlw-id-value,
.qlw-shell .fw-bold:has(+ .small) {
    overflow-wrap: anywhere;
}

.qlw-long-text {
    color: var(--qlw-slate);
    line-height: 1.7;
    white-space: pre-wrap;
}

/* ============================================================
   Login Page
   ============================================================ */

.qlw-login,
body.qlw-login {
    min-height: 100vh;
    background: var(--qlw-gradient-login);
}

    .qlw-login main,
    .qlw-login .container {
        min-height: 100vh;
        display: grid;
        align-items: center;
    }

    .qlw-login .card.ql-card {
        border: 1px solid var(--qlw-alpha-white-055);
        border-radius: var(--qlw-radius-xl);
        box-shadow: var(--qlw-shadow-dark);
    }

    .qlw-login h1 {
        color: var(--qlw-navy);
        font-weight: 950;
        letter-spacing: -0.04em;
    }

    .qlw-login .form-control {
        border-radius: 0.85rem;
        padding: 0.82rem 1rem;
    }

        .qlw-login .form-control:focus {
            border-color: var(--qlw-green);
            box-shadow: var(--qlw-focus-ring);
        }

    .qlw-login-footer,
    .qlw-login p.text-center {
        color: var(--qlw-alpha-white-072) !important;
    }

/* This class also improves the current login page if body remains ql-bg-light. */
body.ql-bg-light .qlw-login-card {
    border-radius: var(--qlw-radius-xl);
}

/* ============================================================
   Compact Operational Components
   ============================================================ */

.qlw-fact-grid {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 0.8rem;
}

.qlw-fact-card {
    padding: 1rem;
    border: 1px solid var(--qlw-border);
    border-radius: var(--qlw-radius-md);
    background: var(--qlw-color-white);
}

.qlw-fact-label {
    color: var(--qlw-menu-item-color);
    font-size: 0.76rem;
    font-weight: 900;
    letter-spacing: 0.055em;
    text-transform: uppercase;
}

.qlw-fact-value {
    color: var(--qlw-navy);
    font-size: 1.25rem;
    font-weight: 950;
    letter-spacing: -0.035em;
}

.qlw-timeline {
    display: grid;
    gap: 0.8rem;
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
}

.qlw-timeline-item {
    position: relative;
    padding-left: 1.55rem;
}

    .qlw-timeline-item::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0.45rem;
        width: 0.62rem;
        height: 0.62rem;
        border-radius: 999px;
        background: var(--qlw-green);
        box-shadow: 0 0 0 0.25rem var(--qlw-alpha-green-012);
    }

    .qlw-timeline-item.is-warning::before {
        background: var(--qlw-orange);
        box-shadow: 0 0 0 0.25rem var(--qlw-alpha-orange-012);
    }

    .qlw-timeline-item.is-danger::before {
        background: var(--qlw-red);
        box-shadow: 0 0 0 0.25rem var(--qlw-alpha-red-012);
    }

.qlw-code,
.qlw-token,
.qlw-reference {
    display: inline-block;
    padding: 0.12rem 0.42rem;
    border-radius: 0.45rem;
    background: var(--qlw-color-code-bg);
    color: var(--qlw-navy);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    font-size: 0.84em;
    font-weight: 750;
    overflow-wrap: anywhere;
}

/* ============================================================
   Bootstrap Compatibility Tweaks
   ============================================================ */

.qlw-shell .text-muted,
.qlw-login .text-muted {
    color: var(--qlw-muted) !important;
}

.qlw-shell .badge,
.qlw-login .badge {
    border-radius: 999px;
    font-weight: 850;
    letter-spacing: 0.01em;
}

    .qlw-shell .badge.text-bg-secondary {
        background: var(--qlw-color-secondary-badge-bg) !important;
    }

    .qlw-shell .badge.text-bg-warning {
        color: var(--qlw-color-dark-text) !important;
        background: var(--qlw-color-amber) !important;
    }

    .qlw-shell .badge.text-bg-danger {
        background: var(--qlw-red) !important;
    }

    .qlw-shell .badge.text-bg-success {
        background: var(--qlw-green) !important;
    }

.qlw-shell .table-responsive {
    border-radius: inherit;
}

.qlw-shell a:not(.btn):not(.nav-link):not(.qlw-sidebar-brand) {
    color: var(--qlw-green-dark);
    font-weight: 750;
}

    .qlw-shell a:not(.btn):not(.nav-link):not(.qlw-sidebar-brand):hover {
        color: var(--qlw-navy);
    }

/* ============================================================
   Responsive Behaviour
   ============================================================ */

@media (min-width: 768px) {
    .qlw-content {
        padding: 1.5rem;
    }

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

@media (min-width: 1200px) {
    .qlw-content {
        padding: 1.75rem 2rem 5rem;
    }

    .qlw-fact-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (min-width: 992px) {
    .qlw-sidebar {
        position: sticky;
        top: 0;
        min-height: 100vh;
    }
}

@media (max-width: 991.98px) {
    .qlw-sidebar {
        min-height: auto;
    }

    .qlw-sidebar-inner {
        position: static;
        min-height: auto;
    }

    .qlw-sidebar .nav {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.4rem;
    }

    .qlw-sidebar .nav-link,
    .qlw-nav-link {
        justify-content: center;
        text-align: center;
        min-height: 2.75rem;
    }

    .qlw-topbar,
    .qlw-shell header.bg-white {
        position: static;
    }
}

@media (max-width: 767.98px) {
    .qlw-content,
    .qlw-shell section.p-4 {
        padding: 1rem !important;
    }

    .qlw-shell header.bg-white {
        align-items: flex-start !important;
        flex-direction: column;
        gap: 0.75rem;
        padding: 1rem !important;
    }

    .qlw-sidebar .nav {
        grid-template-columns: 1fr;
    }

    .qlw-card-metric {
        min-height: auto;
    }

    .qlw-table thead {
        display: none;
    }

    .qlw-table tbody tr {
        display: grid;
        gap: 0.2rem;
        padding: 0.9rem 1rem;
        border-bottom: 1px solid var(--qlw-border);
    }

    .qlw-table tbody td {
        display: block;
        border-bottom: 0;
        padding: 0.15rem 0;
    }

        .qlw-table tbody td.text-end {
            text-align: left !important;
            padding-top: 0.55rem;
        }

    .qlw-table .btn-sm {
        width: 100%;
    }
}

/* ============================================================
   Accessibility and Motion Preferences
   ============================================================ */

.qlw-shell :focus-visible,
.qlw-login :focus-visible {
    outline: none;
    box-shadow: var(--qlw-focus-ring);
}

@media (prefers-reduced-motion: reduce) {
    .qlw-sidebar .nav-link,
    .qlw-nav-link,
    .card.ql-card,
    .card.qlw-card,
    .btn {
        transition: none !important;
    }

        .qlw-sidebar .nav-link:hover,
        .qlw-nav-link:hover {
            transform: none;
        }
}

/* ============================================================
   Print
   ============================================================ */

@media print {
    .qlw-sidebar,
    .qlw-topbar,
    .qlw-shell header,
    .btn,
    form {
        display: none !important;
    }

    .qlw-shell,
    body.qlw-body {
        background: var(--qlw-color-white) !important;
    }

    .card.ql-card,
    .card.qlw-card,
    .qlw-panel {
        box-shadow: none !important;
        border-color: var(--qlw-color-print-border) !important;
    }
}

/* ============================================================
   Workbench Portal Patch: Shared Logo and Mobile Navigation
   ============================================================ */

.qlw-body {
    min-height: 100vh;
    background: var(--qlw-gradient-page);
}

.qlw-shell {
    min-height: 100vh;
    display: flex;
    overflow-x: hidden;
}

.qlw-sidebar {
    width: var(--qlw-sidebar-width);
    flex: 0 0 var(--qlw-sidebar-width);
    padding: 1.25rem;
    overflow-y: auto;
}

.qlw-sidebar-brand {
    display: inline-flex;
    align-items: center;
    width: 100%;
    margin-bottom: 1.25rem;
}

.qlw-sidebar-logo {
    display: block;
    width: 90%;
    max-width: 13rem;
    height: auto;
}

.qlw-mobile-logo {
    display: block;
    width: 10rem;
    max-width: 78vw;
    height: auto;
}

.qlw-nav {
    display: grid;
    gap: 0.25rem;
    align-content: start;
}

.qlw-nav-link {
    padding: 0.78rem 0.95rem;
}

.qlw-main-wrap {
    flex: 1 1 auto;
    min-width: 0;
}

.qlw-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
}

.qlw-content {
    padding: 1.25rem 1.25rem 6rem;
}

.qlw-alert {
    max-width: 100rem;
    margin: 0 auto 1rem;
}

.qlw-mobile-menu-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    flex: 0 0 auto;
    width: auto !important;
    min-width: 0;
    white-space: nowrap;
    padding-inline: 1.1rem;
}

.qlw-mobile-menu-offcanvas {
    width: min(100%, 23rem);
    border-right: 0;
    background: var(--qlw-menu-bg);
    background-image: none;
    color: var(--qlw-menu-text);
    box-shadow: var(--qlw-shadow-dark);
}

    .qlw-mobile-menu-offcanvas .offcanvas-header {
        align-items: flex-start;
        border-bottom: 1px solid var(--qlw-alpha-white-010);
    }

    .qlw-mobile-menu-offcanvas .btn-close {
        filter: invert(1);
        opacity: 0.88;
    }

    .qlw-mobile-menu-offcanvas .qlw-nav {
        gap: 0.35rem;
    }

    .qlw-mobile-menu-offcanvas .qlw-nav-link {
        min-height: 2.85rem;
    }

.qlw-mobile-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0.25rem;
    padding: 0.55rem;
    background: var(--qlw-panel);
    border-top: 1px solid var(--qlw-border);
    box-shadow: 0 -0.5rem 1.5rem var(--qlw-alpha-navy-008);
}

    .qlw-mobile-nav a {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 2.75rem;
        border-radius: 999px;
        color: var(--qlw-menu-item-color);
        font-size: 0.76rem;
        font-weight: 850;
        text-align: center;
    }

        .qlw-mobile-nav a.active {
            color: var(--qlw-color-white) !important;
            background: var(--qlw-menu-item-active-bg);
        }

.qlw-login-logo {
    display: inline-block;
    width: min(14rem, 78vw);
    height: auto;
}

.qlw-login-kicker {
    color: var(--qlw-gold);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.qlw-login-card .card-body {
    background: var(--qlw-alpha-white-098);
}

@media (max-width: 991.98px) {
    .qlw-shell {
        display: block;
    }

    .qlw-account {
        display: none !important;
    }

    .qlw-topbar {
        position: static;
        align-items: flex-start;
    }

    .qlw-content {
        padding: 1rem 1rem 6rem;
    }
}

@media (max-width: 420px) {
    .qlw-mobile-nav a {
        min-height: 2.55rem;
        padding-inline: 0.2rem;
        font-size: 0.65rem;
    }

    .qlw-mobile-menu-button {
        padding-inline: 0.9rem;
    }
}

/* ============================================================
   Workbench Sidebar Menu Colour Override
   Matches Professional Portal sidebar menu item styling only.
   ============================================================ */

.qlw-sidebar .nav-link,
.qlw-sidebar .qlw-nav-link {
    color: rgba(255, 255, 255, 0.78) !important;
}

    .qlw-sidebar .nav-link:hover,
    .qlw-sidebar .qlw-nav-link:hover,
    .qlw-sidebar .nav-link.active,
    .qlw-sidebar .qlw-nav-link.active,
    .qlw-sidebar .nav-link[aria-current="page"],
    .qlw-sidebar .qlw-nav-link[aria-current="page"] {
        color: var(--qlw-color-white) !important;
        background: var(--qlw-alpha-white-009) !important;
        border-color: var(--qlw-color-transparent) !important;
    }