/* ============================================================================
   Corporate Light — BIHG enterprise-intranet design system
   ----------------------------------------------------------------------------
   Single source of truth for the light corporate look. Tokens + an app shell
   (top nav + sidebar) + Bootstrap overrides so any card / HTML / widget the
   user adds automatically inherits the corporate style. Prefix: .cl-  vars: --cl-*
   ========================================================================== */

/* ---------------------------------------------------------------------------
   1. TOKENS
   ------------------------------------------------------------------------- */
:root {
    /* BIHG green */
    --cl-green-50: #e9f6ef;
    --cl-green-100: #cdebd9;
    --cl-green-200: #a3dabb;
    --cl-green-400: #3da46b;
    --cl-green: #1a7a4a; /* primary */
    --cl-green-600: #15663e;
    --cl-green-700: #114f31;
    --cl-green-900: #0d3b25;
    /* Neutrals */
    --cl-ink: #1f2937;
    --cl-body: #4b5563;
    --cl-muted: #8a93a2;
    --cl-line: #e7eaef;
    --cl-surface: #ffffff;
    --cl-bg: #f3f5f8;
    --cl-bg-soft: #f8fafc;
    /* Type */
    --cl-font: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
    /* Radii / shadow / motion */
    --cl-radius-sm: 6px;
    --cl-radius: 6px;
    --cl-radius-lg: 2px;
    --cl-radius-pill: 6px;
    --cl-shadow-xs: 0 1px 2px rgba(16, 24, 40, .05);
    --cl-shadow-sm: 0 1px 3px rgba(16, 24, 40, .07), 0 1px 2px rgba(16, 24, 40, .04);
    --cl-shadow: 0 8px 24px -12px rgba(16, 24, 40, .18);
    --cl-shadow-green: 0 12px 26px -12px rgba(26, 122, 74, .5);
    --cl-transition: 180ms cubic-bezier(.4, 0, .2, 1);
    /* Layout */
    --cl-sidebar-w: 244px;
    --cl-topnav-h: 64px;
    /* Bootstrap variable bridge (so .btn-primary, links, etc. read as corporate) */
    --bs-primary: var(--cl-green);
    --bs-primary-rgb: 26, 122, 74;
    --bs-link-color: var(--cl-green);
    --bs-link-hover-color: var(--cl-green-700);
    --bs-body-font-family: var(--cl-font);
    --bs-body-color: var(--cl-body);
}

/* ---------------------------------------------------------------------------
   2. BASE
   ------------------------------------------------------------------------- */
*, *::before, *::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: var(--cl-font);
    color: var(--cl-body);
    background: var(--cl-bg);
    -webkit-font-smoothing: antialiased;
}

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

a {
    color: var(--cl-green);
    text-decoration: none;
    transition: color var(--cl-transition);
}

    a:hover {
        color: var(--cl-green-700);
    }

/* ---------------------------------------------------------------------------
   3. SHELL
   ------------------------------------------------------------------------- */
#wrapper {
    display: flex;
    min-height: 100vh;
}

/* ── Sidebar ──────────────────────────────────────────────────────────── */
.cl-sidebar {
    width: var(--cl-sidebar-w);
    flex-shrink: 0;
    min-height: 100vh;
    background: var(--cl-surface);
    border-right: 1px solid var(--cl-line);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    transition: width .25s ease;
    position: sticky;
    top: 0;
    height: 100vh;
    z-index: 100;
}

.cl-sidebar-brand {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: 0 1.1rem;
    height: var(--cl-topnav-h);
    flex-shrink: 0;
    font-weight: 800;
    color: var(--cl-ink);
    font-size: 1.05rem;
    border-bottom: 1px solid var(--cl-line);
    white-space: nowrap;
    text-decoration: none;
}

    .cl-sidebar-brand img {
        height: 65px;
        width: auto;
    }

    .cl-sidebar-brand .cl-logo {
        width: 34px;
        height: 34px;
        border-radius: 9px;
        display: grid;
        place-items: center;
        color: #fff;
        font-size: 1rem;
        background: linear-gradient(135deg, var(--cl-green-400), var(--cl-green-700));
    }

.cl-sidebar-nav {
    flex: 1;
    padding: .75rem .6rem;
}

    .cl-sidebar-nav ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .cl-sidebar-nav li a {
        display: flex;
        align-items: center;
        gap: .65rem;
        padding: .6rem .75rem;
        margin-bottom: 2px;
        border-radius: 10px;
        color: var(--cl-body);
        font-size: .92rem;
        font-weight: 500;
        white-space: nowrap;
        overflow: hidden;
        text-decoration: none;
        transition: background var(--cl-transition), color var(--cl-transition);
    }

        .cl-sidebar-nav li a:hover {
            background: var(--cl-bg);
            color: var(--cl-ink);
        }

    .cl-sidebar-nav li.active > a {
        background: var(--cl-green-50);
        color: var(--cl-green-700);
        font-weight: 600;
    }

        .cl-sidebar-nav li.active > a .sidebar-item-icon,
        .cl-sidebar-nav li.active > a .bi {
            color: var(--cl-green);
        }

    /* Nav icons */
    .cl-sidebar-nav li a .bi:not(.collapse-chevron) {
        font-size: 0.05rem;
        width: 1.25rem;
        text-align: center;
        flex-shrink: 0;
        opacity: .9;
    }

.sidebar-item-icon {
    font-size: .42rem;
    opacity: .55;
    flex-shrink: 0;
    margin-inline: .25rem .35rem;
}

.sidebar-parent-icon {
    font-size: .6rem;
    opacity: .8;
}

.collapse-chevron {
    margin-inline-start: auto;
    font-size: .72rem;
    opacity: .6;
    flex-shrink: 0;
    transition: transform .2s ease;
}

.cl-sidebar-nav li a[aria-expanded="true"] .collapse-chevron {
    transform: rotate(180deg);
}

/* Sub-menus */
.cl-submenu {
    list-style: none;
    margin: 0;
    padding: 0;
}

    .cl-submenu li a {
        padding-inline-start: 2.4rem !important;
        font-size: .87rem;
    }

    .cl-submenu .cl-submenu li a {
        padding-inline-start: 3.2rem !important;
    }

    .cl-submenu.collapsing {
        transition: height .2s ease;
    }

/* Collapsed (desktop) */
#wrapper.sidebar-collapsed .cl-sidebar {
    width: 0;
    overflow: hidden;
}

/* ── Content + top nav ────────────────────────────────────────────────── */
.cl-content-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.cl-topnav {
    position: sticky;
    top: 0;
    z-index: 99;
    height: var(--cl-topnav-h);
    display: flex;
    align-items: center;
    gap: .9rem;
    padding: 0 1.1rem;
    background: var(--cl-surface);
    border-bottom: 1px solid var(--cl-line);
}

.cl-toggle-btn {
    border: 0;
    background: transparent;
    color: var(--cl-body);
    width: 40px;
    height: 40px;
    border-radius: 10px;
    cursor: pointer;
    font-size: 1.25rem;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    transition: background var(--cl-transition);
}

    .cl-toggle-btn:hover {
        background: var(--cl-bg);
        color: var(--cl-ink);
    }

/* Global search */
.cl-search {
    flex: 1;
    max-width: 560px;
    position: relative;
}

    .cl-search input {
        width: 100%;
        height: 42px;
        border: 1px solid var(--cl-line);
        background: var(--cl-bg);
        border-radius: var(--cl-radius-pill);
        padding: 0 1rem 0 2.6rem;
        font: inherit;
        color: var(--cl-ink);
        transition: border-color var(--cl-transition), box-shadow var(--cl-transition), background var(--cl-transition);
    }

        .cl-search input:focus {
            outline: none;
            border-color: var(--cl-green);
            background: #fff;
            box-shadow: 0 0 0 3px var(--cl-green-50);
        }

    .cl-search .cl-search-icon {
        direction: initial;
        position: absolute;
        inset-inline-start: .95rem;
        top: 50%;
        transform: translateY(-50%);
        color: var(--cl-muted);
        pointer-events: none;
    }

/* Right cluster */
.cl-topnav__actions {
    display: flex;
    align-items: center;
    gap: .35rem;
    margin-inline-start: auto;
}

.cl-iconbtn {
    position: relative;
    width: 42px;
    height: 42px;
    border: 0;
    background: transparent;
    cursor: pointer;
    border-radius: 12px;
    color: var(--cl-body);
    font-size: 1.15rem;
    display: grid;
    place-items: center;
    transition: background var(--cl-transition), color var(--cl-transition);
}

    .cl-iconbtn:hover {
        background: var(--cl-bg);
        color: var(--cl-ink);
    }

    .cl-iconbtn .cl-badge {
        position: absolute;
        top: 6px;
        inset-inline-end: 6px;
        min-width: 16px;
        height: 16px;
        padding: 0 4px;
        background: var(--cl-green);
        color: #fff;
        border-radius: 999px;
        font-size: .65rem;
        font-weight: 700;
        display: grid;
        place-items: center;
        line-height: 1;
    }

.cl-topnav__divider {
    width: 1px;
    height: 30px;
    background: var(--cl-line);
    margin-inline: .35rem;
}

/* Top-nav brand (mobile / when sidebar collapsed) */
.cl-topnav .navbar-brand {
    font-weight: 800;
    color: var(--cl-ink);
    font-size: 1.05rem;
}

/* Main */
.cl-main {
    flex: 1;
    background: var(--cl-bg);
}

.cl-footer {
    background: var(--cl-surface);
    border-top: 1px solid var(--cl-line);
    color: var(--cl-muted);
    font-size: .85rem;
}

/* ---------------------------------------------------------------------------
   4. CARD DESIGN SYSTEM — Bootstrap overrides so user content inherits the look
   ------------------------------------------------------------------------- */
.cl-main .card,
.cl-card {
    background: var(--cl-surface);
    border: 1px solid var(--cl-line);
    border-radius: var(--cl-radius);
    box-shadow: var(--cl-shadow-sm);
}

.cl-main .card {
    transition: box-shadow var(--cl-transition), transform var(--cl-transition);
}

    .cl-main .card:hover {
        box-shadow: var(--cl-shadow);
    }

.cl-main .card-header {
    background: var(--cl-line);
    border-bottom: 1px solid var(--cl-line);
    font-weight: 700;
    color: var(--cl-ink);
    padding: .9rem 1.1rem;
}

.cl-main .card-body {
    padding: 1.1rem;
}

/* Section header used above card groups */
.cl-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 .6rem;
}

    .cl-section-head h2, .cl-section-head h3 {
        font-size: 1.05rem;
        margin: 0;
    }

    .cl-section-head .cl-viewall {
        font-size: .85rem;
        font-weight: 600;
        color: var(--cl-green);
    }

/* Buttons (Bootstrap-aligned) — every button is a rounded pill in this theme */
.btn, .cl-btn, .btn-sm, .btn-lg {
    border-radius: var(--cl-radius-pill);
}

.btn-group > .btn, .input-group > .btn {
    border-radius: 0;
}

    .btn-group > .btn:first-child, .input-group > .btn:first-child {
        border-start-start-radius: var(--cl-radius-pill);
        border-end-start-radius: var(--cl-radius-pill);
    }

    .btn-group > .btn:last-child, .input-group > .btn:last-child {
        border-start-end-radius: var(--cl-radius-pill);
        border-end-end-radius: var(--cl-radius-pill);
    }

.btn-primary, .cl-btn {
    --bs-btn-bg: var(--cl-green);
    --bs-btn-border-color: var(--cl-green);
    --bs-btn-hover-bg: var(--cl-green-600);
    --bs-btn-hover-border-color: var(--cl-green-600);
    --bs-btn-active-bg: var(--cl-green-700);
    --bs-btn-active-border-color: var(--cl-green-700);
    border-radius: var(--cl-radius-pill);
    font-weight: 600;
}

.btn-outline-primary {
    --bs-btn-color: var(--cl-green);
    --bs-btn-border-color: var(--cl-green);
    --bs-btn-hover-bg: var(--cl-green);
    --bs-btn-hover-border-color: var(--cl-green);
    border-radius: var(--cl-radius-pill);
    font-weight: 600;
}

.cl-btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .6rem 1.2rem;
    background: var(--cl-green);
    color: #fff;
    border: 0;
    cursor: pointer;
    box-shadow: var(--cl-shadow-green);
    transition: background var(--cl-transition), transform var(--cl-transition);
}

    .cl-btn:hover {
        background: var(--cl-green-700);
        color: #fff;
        transform: translateY(-1px);
    }

/* Badges / pills */
.cl-main .badge.bg-primary, .badge.bg-primary {
    background: var(--cl-green) !important;
}

.cl-pill {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .2rem .6rem;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 600;
    background: var(--cl-green-50);
    color: var(--cl-green-700);
}

/* Links inside content (but never recolour buttons / nav chrome) */
.cl-main a:not(.btn):not(.cl-btn):not(.dropdown-item):not(.nav-link):not(.page-link) {
    color: var(--cl-green);
}

    .cl-main a:not(.btn):not(.cl-btn):not(.dropdown-item):not(.nav-link):not(.page-link):hover {
        color: var(--cl-green-700);
    }

/* Solid primary buttons always keep white text regardless of context */
.cl-main a.btn-primary, .cl-main .btn-primary, a.cl-btn, .cl-btn {
    color: #fff;
}

    .cl-main a.btn-primary:hover, .cl-main .btn-primary:hover {
        color: #fff;
    }

/* Pagination — inherit the active theme colour (Bootstrap hard-codes blue otherwise) */
.pagination {
    --bs-pagination-color: var(--cl-green-700);
    --bs-pagination-hover-color: var(--cl-green-900);
    --bs-pagination-hover-bg: var(--cl-green-50);
    --bs-pagination-hover-border-color: var(--cl-green-200);
    --bs-pagination-focus-color: var(--cl-green-900);
    --bs-pagination-focus-box-shadow: 0 0 0 .2rem var(--cl-green-50);
    --bs-pagination-active-bg: var(--cl-green);
    --bs-pagination-active-border-color: var(--cl-green);
    --bs-pagination-border-radius: var(--cl-radius-sm);
}
    /* Legacy OrchardCore pager markup (anchors not driven by the CSS vars above) */
    .pager .page-link, .pagination .page-link {
        color: var(--cl-green-700);
    }

    .pager .page-item.active .page-link, .pagination .page-item.active .page-link {
        background: var(--cl-green);
        border-color: var(--cl-green);
        color: #fff;
    }

    .pager .page-link:hover, .pagination .page-link:hover {
        background: var(--cl-green-50);
        color: var(--cl-green-900);
    }

/* ---------------------------------------------------------------------------
   Tables — corporate header (replaces the heavy pure-black table-dark)
   ------------------------------------------------------------------------- */
.cl-main .table {
    --bs-table-bg: transparent;
    border-color: var(--cl-line);
    margin-bottom: 0;
}

    .cl-main .table > :not(caption) > * > * {
        padding: .8rem 1rem;
    }

    /* Header: brand-green gradient bar, white uppercase labels, rounded top */
    .cl-main .table thead th,
    .cl-main .table > thead.table-dark th {
        background: #1a7a4a /*linear-gradient(180deg, var(--cl-green-700) 0%, var(--cl-green-900) 100%)*/;
        color: #fff;
        border-color: transparent;
        font-weight: 600;
        font-size: .78rem;
        letter-spacing: .03em;
        text-transform: uppercase;
        vertical-align: middle;
        white-space: nowrap;
    }

        .cl-main .table thead th .form-check-input {
            border-color: rgba(255,255,255,.7);
        }

    .cl-main .table > thead th:first-child {
        border-start-start-radius: var(--cl-radius);
    }

    .cl-main .table > thead th:last-child {
        border-start-end-radius: var(--cl-radius);
    }

    .cl-main .table.table-dark > thead th:first-child,
    .cl-main .table > thead.table-dark th:first-child {
        border-start-start-radius: var(--cl-radius);
    }

    /* Body rows: soft striping/hover that reads against the white card surface */
    .cl-main .table tbody td {
        vertical-align: middle;
        border-color: var(--cl-line);
    }

.cl-main .table-striped > tbody > tr:nth-of-type(odd) > * {
    --bs-table-accent-bg: var(--cl-green-50);
    background-color: var(--cl-green-50);
}

.cl-main .table-hover > tbody > tr:hover > * {
    --bs-table-accent-bg: var(--cl-green-100, #d9f0e2);
    background-color: var(--cl-green-100, #d9f0e2);
}

/* Wrap tables in a rounded, clipped, soft-shadow shell so the header radius shows.
   overflow-x stays auto (Bootstrap's default) so wide grids still scroll — a plain
   overflow:hidden here silently cut off the right-hand columns; overflow-y:hidden
   keeps the rounded corners clipping the header. */
.cl-main .table-responsive {
    border: 1px solid var(--cl-line);
    border-radius: var(--cl-radius);
    overflow-x: auto;
    overflow-y: hidden;
    box-shadow: var(--cl-shadow-sm);
    background: var(--cl-surface);
}

/* Always-visible slim scrollbar: browsers with overlay scrollbars (Safari/macOS,
   iOS, Chrome with overlay enabled) otherwise give no hint the table scrolls. */
.cl-main .table-responsive {
    scrollbar-width: thin;
    scrollbar-color: var(--cl-line) transparent;
}

    .cl-main .table-responsive::-webkit-scrollbar {
        height: 8px;
        -webkit-appearance: none;
    }

    .cl-main .table-responsive::-webkit-scrollbar-track {
        background: transparent;
    }

    .cl-main .table-responsive::-webkit-scrollbar-thumb {
        background: var(--cl-line);
        border-radius: 4px;
    }

        .cl-main .table-responsive::-webkit-scrollbar-thumb:hover {
            background: var(--cl-muted);
        }

/* ---------------------------------------------------------------------------
   5. HERO + DASHBOARD UTILITIES (for the user's widgets/HTML)
   ------------------------------------------------------------------------- */
.cl-hero {
    position: relative;
    overflow: hidden;
    border-radius: var(--cl-radius-lg);
    color: #fff;
    background: linear-gradient(120deg, var(--cl-green-900) 0%, var(--cl-green) 65%, var(--cl-green-600) 100%);
    box-shadow: var(--cl-shadow);
}

    .cl-hero h1, .cl-hero h2, .cl-hero h3 {
        color: #fff;
    }

.cl-hero__eyebrow {
    display: inline-block;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    background: rgba(255,255,255,.16);
    padding: .3rem .7rem;
    border-radius: 999px;
}

.cl-hero .cl-btn {
    background: #fff;
    color: var(--cl-green-700);
    box-shadow: none;
}

    .cl-hero .cl-btn:hover {
        background: rgba(255,255,255,.9);
        color: var(--cl-green-900);
    }

/* Dashboard grid + shortcut tiles */
.cl-grid {
    display: grid;
    gap: 1rem;
}

.cl-grid--2 {
    grid-template-columns: repeat(2, 1fr);
}

.cl-grid--3 {
    grid-template-columns: repeat(3, 1fr);
}

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

.cl-grid--12 {
    grid-template-columns: repeat(12, minmax(0, 1fr));
}

.cl-shortcut {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .55rem;
    text-align: center;
    padding: 1rem .5rem;
    border: 1px solid var(--cl-line);
    border-radius: var(--cl-radius);
    background: var(--cl-surface);
    color: var(--cl-body);
    text-decoration: none;
    transition: all var(--cl-transition);
}

    .cl-shortcut:hover {
        border-color: var(--cl-green-200);
        box-shadow: var(--cl-shadow-sm);
        transform: translateY(-2px);
        color: var(--cl-ink);
    }

.cl-shortcut__icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    font-size: 1.3rem;
    color: var(--cl-green);
    background: var(--cl-green-50);
}

.cl-shortcut span {
    font-size: 2rem;
    font-weight: 600;
}

/* ---------------------------------------------------------------------------
   6. MOBILE SIDEBAR (off-canvas)
   ------------------------------------------------------------------------- */
.cl-sidebar-overlay {
    display: none;
}

@media (max-width: 991.98px) {
    .cl-sidebar {
        position: fixed;
        top: 0;
        inset-inline-start: 0;
        height: 100vh;
        z-index: 1050;
        width: var(--cl-sidebar-w);
        transform: translateX(-100%);
        transition: transform .25s ease;
    }

    #wrapper.sidebar-open .cl-sidebar {
        transform: translateX(0);
    }

    .cl-sidebar-overlay {
        position: fixed;
        inset: 0;
        background: rgba(16,24,40,.45);
        z-index: 1040;
    }

    #wrapper.sidebar-open .cl-sidebar-overlay {
        display: block;
    }

    #wrapper.sidebar-collapsed .cl-sidebar {
        width: var(--cl-sidebar-w);
    }

    .cl-search {
        max-width: none;
    }

    .cl-grid--3 {
        grid-template-columns: repeat(2, 1fr);
    }

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

@media (max-width: 575.98px) {
    .cl-search {
        display: none;
    }

    .cl-grid--2,
    .cl-grid--3,
    .cl-grid--4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cl-topnav__user-text {
        display: none;
    }
}

/* ---------------------------------------------------------------------------
   7. RTL
   ------------------------------------------------------------------------- */
[dir="rtl"] .cl-sidebar {
    border-right: 0;
    border-left: 1px solid var(--cl-line);
}

@media (max-width: 991.98px) {
    [dir="rtl"] .cl-sidebar {
        transform: translateX(100%);
    }

    [dir="rtl"] #wrapper.sidebar-open .cl-sidebar {
        transform: translateX(0);
    }
}

/* ---------------------------------------------------------------------------
   8. User profile (top-nav LoginMenu)
   ------------------------------------------------------------------------- */
.cl-user {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .25rem .4rem;
    border-radius: 12px;
    cursor: pointer;
    text-decoration: none;
    color: var(--cl-ink);
}

    .cl-user:hover {
        background: var(--cl-bg);
        color: var(--cl-ink);
    }

.cl-user__avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--cl-green-50);
    display: grid;
    place-items: center;
    color: var(--cl-green);
    font-weight: 700;
}

.cl-user__text {
    line-height: 1.15;
}

.cl-user__name {
    font-size: .88rem;
    font-weight: 700;
}

.cl-user__sub {
    font-size: .74rem;
    color: var(--cl-muted);
}

/* Language selector */
.cl-lang {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}

    .cl-lang a, .cl-lang .nav-link {
        font-size: .85rem;
        font-weight: 600;
        color: var(--cl-body);
        padding: .25rem .4rem;
        border-radius: 8px;
    }

        .cl-lang a:hover {
            color: var(--cl-green);
            background: var(--cl-bg);
        }

/* ---------------------------------------------------------------------------
   9. LANDING DASHBOARD WIDGETS
   Helpers consumed by the widgets placed in the Layout__Landing zones
   (AlertZone, HeroZone, ServicesZone, EmailZone, CalendarZone, EventsZone, …).
   Mirrors the building blocks in landing-mockup.html so authored widget markup
   renders identically. Reuses .cl-hero / .cl-grid / .cl-shortcut / .cl-section-head
   / .cl-viewall / .cl-pill / .cl-btn defined above.
   ------------------------------------------------------------------------- */

/* Alert banner */
.cl-alert {
    display: flex;
    align-items: center;
    gap: .75rem;
    background: var(--cl-green-50);
    border: 1px solid var(--cl-green-200);
    color: var(--cl-green-900);
    border-radius: var(--cl-radius);
    padding: .7rem 1rem;
}

    .cl-alert .bi {
        color: var(--cl-green);
        font-size: 1.15rem;
    }

/* CEO hero media + carousel dots */
.cl-hero__media {
    min-height: 320px;
    border-radius: var(--cl-radius-lg);
    background: #16321f center/cover;
}

.cl-hero__dots {
    display: flex;
    gap: .4rem;
}

    .cl-hero__dots span {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: rgba(255,255,255,.45);
    }

        .cl-hero__dots span.is-active {
            background: #fff;
            width: 22px;
            border-radius: 5px;
        }

/* App-repository tiles */
.cl-app {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    text-decoration: none;
}

.cl-app__icon {
    width: 54px;
    height: 54px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    color: #fff;
    font-weight: 800;
    font-size: 1rem;
    box-shadow: var(--cl-shadow-sm);
}

.cl-app span {
    font-size: .78rem;
    font-weight: 600;
    color: var(--cl-body);
}

/* Email list */
.cl-maillist .it {
    display: flex;
    gap: .6rem;
    padding: .6rem 0;
    border-top: 1px solid var(--cl-line);
}

    .cl-maillist .it:first-child {
        border-top: 0;
    }

.cl-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--cl-green);
    margin-top: .35rem;
    flex: 0 0 auto;
}

.cl-mini {
    font-size: .78rem;
    color: var(--cl-muted);
}

/* Calendar */
.cl-cal {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    text-align: center;
}

    .cl-cal .h {
        font-size: .7rem;
        font-weight: 700;
        color: var(--cl-muted);
        padding: .3rem 0;
    }

    .cl-cal .d {
        padding: .4rem 0;
        font-size: .82rem;
        border-radius: 8px;
        color: var(--cl-body);
    }

        .cl-cal .d.mut {
            color: #c3c9d2;
        }

        .cl-cal .d.today {
            background: var(--cl-green);
            color: #fff;
            font-weight: 700;
        }

/* Agenda + event date badges */
.cl-date {
    width: 46px;
    flex: 0 0 auto;
    text-align: center;
    line-height: 1;
}

    .cl-date b {
        display: block;
        font-size: 1.15rem;
        color: var(--cl-ink);
    }

    .cl-date small {
        font-size: .68rem;
        text-transform: uppercase;
        color: var(--cl-muted);
        font-weight: 700;
    }

.cl-row {
    display: flex;
    gap: .75rem;
    padding: .65rem 0;
    border-top: 1px solid var(--cl-line);
}

    .cl-row:first-child {
        border-top: 0;
    }

/* People avatars + thumbnails */
.cl-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--cl-green-400), var(--cl-green-700));
    color: #fff;
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: .85rem;
    flex: 0 0 auto;
}

.cl-thumb {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: var(--cl-green-50);
    color: var(--cl-green);
    display: grid;
    place-items: center;
    font-size: 1.1rem;
    flex: 0 0 auto;
}

/* =========================================================
   LANDING PAGE — TARGET LAYOUT
   CSS ONLY — NO HTML OR CLASS NAME CHANGES
   ========================================================= */

/* منع التمدد الأفقي */
.cl-content-wrapper,
.cl-main,
.cl-main .container-fluid {
    min-width: 0;
    overflow-x: hidden;
}

    /* =========================================================
   MAIN PAGE: LEFT + RIGHT
   ========================================================= */

    .cl-main > .container-fluid > .row.g-3 {
        align-items: start;
    }

    /* العمود الرئيسي */
    .cl-main .col-lg-8 {
        min-width: 0;
    }

    /* العمود الجانبي */
    .cl-main .col-lg-4 {
        display: block !important;
        min-width: 0;
    }

        /* Email + Calendar + Events تحت بعض */
        .cl-main .col-lg-4 > div {
            display: block !important;
            width: 100%;
            max-width: 100%;
            min-width: 0;
        }

            .cl-main .col-lg-4 > div + div {
                margin-top: 1rem;
            }

    /* =========================================================
   MAIN WIDGET GRID
   تحويل صف Bootstrap الحالي إلى Grid بدون تعديل الـLayout
   ========================================================= */

    .cl-main .col-lg-8 > .row.g-3 {
        display: grid !important;
        grid-template-columns: repeat(12, minmax(0, 1fr));
        gap: 16px;
        margin: 0 !important;
    }

        /* إلغاء أحجام Bootstrap القديمة داخل هذا الصف فقط */
        .cl-main .col-lg-8 > .row.g-3 > [class*="col-"] {
            display: block !important;
            grid-column: span 12;
            width: auto !important;
            max-width: none !important;
            min-width: 0;
            padding: 0 !important;
        }

            /* Orchard wrappers */
            .cl-main .col-lg-8 > .row.g-3 > [class*="col-"] > * {
                width: 100%;
                max-width: 100%;
                min-width: 0;
            }

            /* =========================================================
   FIRST ROW
   Hero 7 columns + Shortcuts 5 columns
   ========================================================= */

            .cl-main .col-lg-8 > .row.g-3 > [class*="col-"]:has(.cl-hero) {
                grid-column: span 7;
            }

            .cl-main .col-lg-8 > .row.g-3 > [class*="col-"]:has(.cl-grid--4) {
                grid-column: span 5;
            }

            /* =========================================================
   SECOND ROW
   Applications 6 + Announcements 6
   ========================================================= */

            .cl-main .col-lg-8 > .row.g-3 > [class*="col-"]:has(.cl-app) {
                grid-column: span 6;
            }

            /* Announcements */
            .cl-main .col-lg-8 > .row.g-3 > [class*="col-"]:has(.badge.text-bg-danger) {
                grid-column: span 6;
            }

                /* إصلاح col-md-6 الموجودة داخل Widget الإعلانات */
                .cl-main
                .col-lg-8 > .row.g-3 > [class*="col-"]:has(.badge.text-bg-danger)
                .col-md-6 {
                    display: block !important;
                    width: 100% !important;
                    max-width: 100% !important;
                    flex: 0 0 100% !important;
                    padding: 0 !important;
                }

            /* =========================================================
   THIRD ROW
   News 6 + Birthdays 3 + Recognition 3
   ========================================================= */

            /* News */
            .cl-main
            .col-lg-8 > .row.g-3 > [class*="col-"]:has(.bi-graph-up-arrow) {
                grid-column: span 6;
            }

            /* Birthdays */
            .cl-main
            .col-lg-8 > .row.g-3 > [class*="col-"]:has(.cl-avatar):has(a[href="#"]) {
                min-width: 0;
            }

            /*
   Birthdays يحتوي 3 أشخاص وصفوف cl-row
   Recognition يحتوي أيقونة award
*/

            /* Recognition */
            .cl-main
            .col-lg-8 > .row.g-3 > [class*="col-"]:has(.bi-award-fill) {
                grid-column: span 3;
            }

            /* Birthdays: Avatar rows بدون award */
            .cl-main
            .col-lg-8 > .row.g-3 > [class*="col-"]:has(.cl-row .cl-avatar):not(:has(.bi-award-fill)) {
                grid-column: span 3;
            }

            /* =========================================================
   FOURTH ROW
   New Joiners full width
   ========================================================= */

            .cl-main
            .col-lg-8 > .row.g-3 > [class*="col-"]:has(.btn-outline-primary):has(.cl-avatar) {
                grid-column: span 12;
            }

            /* =========================================================
  
    /* =========================================================
   CARDS
   ========================================================= */

    .cl-main .card {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        background: var(--cl-surface);
        border: 1px solid var(--cl-line);
        border-radius: 12px;
        box-shadow: 0 1px 3px rgba(20, 30, 40, .07);
        overflow: hidden;
    }

    .cl-main .card-body {
        min-width: 0;
        padding: 1rem;
    }

    /* البطاقات داخل Grid تأخذ كامل المساحة */
    .cl-main .col-lg-8 > .row.g-3 .card,
    .cl-main .col-lg-8 > .row.g-3 .cl-hero {
        width: 100% !important;
        max-width: 100% !important;
        height: 100%;
    }

/* =========================================================
   ALERT
   ========================================================= */

.cl-alert {
    display: flex;
    align-items: center;
    gap: .75rem;
    width: 100%;
    padding: .75rem 1rem;
    color: var(--cl-green-900);
    background: var(--cl-green-50);
    border: 1px solid var(--cl-green-200);
    border-radius: 8px;
}

    .cl-alert > .flex-grow-1 {
        min-width: 0;
    }

    .cl-alert .bi-shield-check {
        color: var(--cl-green);
    }

    .cl-alert a {
        margin-inline-start: auto;
        color: var(--cl-green-900);
        white-space: nowrap;
    }

/* =========================================================
   HERO
   ========================================================= */

.cl-hero {
    width: 100%;
    min-width: 0;
    overflow: hidden;
    color: #fff;
    border-radius: 12px;
    background: linear-gradient( 165deg, var(--cl-green-700), var(--cl-green) 70% );
}

    .cl-hero h1,
    .cl-hero h2,
    .cl-hero h3 {
        color: #fff;
    }

.cl-hero__media {
    width: 100%;
    min-height: 190px;
    border-radius: 10px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

/* =========================================================
   HEADINGS
   ========================================================= */

.cl-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .6rem;
}

    .cl-section-head h2,
    .cl-section-head h3 {
        margin: 0;
        color: var(--cl-ink);
        font-size: .95rem;
        font-weight: 700;
    }

.cl-viewall {
    color: var(--cl-green);
    font-size: .75rem;
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
}

.cl-mini {
    color: var(--cl-muted);
    font-size: .72rem;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

/* =========================================================
   SHORTCUTS
   ========================================================= */
.cl-shortcut_custom {
    display: flex;
    min-width: fit-content;
    min-height: fit-content;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    padding: .6rem .25rem;
    text-align: center;
    border: 1px solid var(--cl-line);
    border-radius: 9px;
    background:#fff;
}

.cl-grid--4 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .6rem;
}

.cl-shortcut {
    display: flex;
    min-width: 0;
    min-height: 100px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    padding: .6rem .25rem;
    text-align: center;
    border: 1px solid var(--cl-line);
    border-radius: 9px;
}

.cl-shortcut__icon {
    display: grid;
    /*width: 34px;
    height: 34px;*/
    place-items: center;
    color: var(--cl-green);
    background: #fff; /*var(--cl-green-50);*/
    border-radius: 8px;
}
.cl-shortcut__icon i{
    width: 50px;
    height: 50px;
}
    
.cl-shortcut span:last-child {
        font-size: .68rem;
        font-weight: 600;
        line-height: 1.2;
    }

/* Workplace Services admin shortcut — staff only.
   The tile is authored inside a Raw Html widget, whose HtmlField does not run Liquid, so the
   markup cannot test the visitor's roles. Layout.cshtml / Layout__Landing.cshtml stamp
   [data-wps-staff] on <body> for Administrator, wps_approver, wps_reviewer and wps_viewers;
   this hides the tile for everyone else. The BsDashboard selector covers widgets still holding
   the pre-rename URL. Presentation only — WpsDashboardController still authorizes the page. */
body:not([data-wps-staff="true"]) .cl-shortcut[href*="WpsDashboard"] {
    display: none;
}

    /* =========================================================
   APPLICATIONS
   ========================================================= */

    .cl-app {
        display: flex;
        min-width: 58px;
        flex: 1 1 58px;
        flex-direction: column;
        align-items: center;
        gap: .4rem;
        text-align: center;
    }

    .cl-app__icon {
        display: grid;
        width: 48px;
        height: 48px;
        place-items: center;
        color: #fff;
        border-radius: 10px;
        font-size: .8rem;
        font-weight: 700;
    }

    .cl-app > span:last-child {
        color: var(--cl-body);
        font-size: .68rem;
        font-weight: 600;
    }
    /* =========================================================
   ROWS
   ========================================================= */

    .cl-row {
        display: flex;
        align-items: flex-start;
        gap: .65rem;
        min-width: 0;
        padding: .6rem 0;
        border-top: 1px solid var(--cl-line);
    }

        .cl-row:first-child {
            border-top: 0;
        }

        .cl-row > div,
        .cl-row .flex-grow-1 {
            min-width: 0;
        }
    /* =========================================================
   ICONS AND AVATARS
   ========================================================= */

    .cl-thumb {
        display: grid;
        width: 36px;
        height: 36px;
        flex: 0 0 36px;
        place-items: center;
        color: var(--cl-green);
        background: var(--cl-green-50);
        border-radius: 8px;
    }

    .cl-avatar {
        display: grid;
        width: 34px;
        height: 34px;
        flex: 0 0 34px;
        place-items: center;
        color: #fff;
        background: linear-gradient( 135deg, var(--cl-green-400), var(--cl-green-700) );
        border-radius: 50%;
        font-size: .72rem;
        font-weight: 700;
    }
    /* =========================================================
   EMAIL
   ========================================================= */

    .cl-maillist .it {
        display: flex;
        gap: .6rem;
        min-width: 0;
        padding: .6rem 0;
        border-top: 1px solid var(--cl-line);
    }

        .cl-maillist .it:first-child {
            border-top: 0;
        }

        .cl-maillist .it > div {
            min-width: 0;
        }
    /* =========================================================
   CALENDAR
   ========================================================= */

    .cl-cal {
        display: grid;
        grid-template-columns: repeat(7, minmax(0, 1fr));
        gap: 2px;
        text-align: center;
    }

        .cl-cal .h {
            padding: .25rem 0;
            color: var(--cl-muted);
            font-size: .65rem;
            font-weight: 700;
        }

        .cl-cal .d {
            padding: .35rem 0;
            color: var(--cl-body);
            border-radius: 7px;
            font-size: .75rem;
        }

            .cl-cal .d.today {
                color: #fff;
                background: var(--cl-green);
                font-weight: 700;
            }
    /* =========================================================
   RESPONSIVE
   ========================================================= */

    @media (max-width: 1199.98px) {
        .cl-main .col-lg-8 > .row.g-3 > [class*="col-"] {
            grid-column: span 12 !important;
        }

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



    @media (max-width: 767.98px) {
        .cl-main .col-lg-8 > .row.g-3 {
            grid-template-columns: 1fr;
        }

            .cl-main .col-lg-8 > .row.g-3 > [class*="col-"] {
                grid-column: auto !important;
            }

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

        .cl-alert {
            flex-wrap: wrap;
        }

            .cl-alert a {
                margin-inline-start: 0;
            }
    }

    @media (max-width: 479.98px) {
        .cl-grid--4 {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }
    }
    /* Electronic Services Repository tiles (ServicesZone .row.g-2 > .col-3):
   Bootstrap col-3 has no breakpoint, so it stays 4-across and squeezes the
   labels on phones. Reflow to 2-up on tablet/mobile, 1-up on very small. */
    @media (max-width: 767.98px) {
        .card-body > .row.g-2 > .col-3 {
            flex: 0 0 50%;
            max-width: 50%;
        }
    }

    @media (max-width: 400px) {
        .card-body > .row.g-2 > .col-3 {
            flex: 0 0 100%;
            max-width: 100%;
        }
    }
    /* =========================================================
   REMOVE LANDING GRID EMPTY GAPS
   Stretch widgets to fill each CSS Grid row
   ========================================================= */
    /* أعمدة Widgets داخل العمود الرئيسي فقط */
    .cl-main .col-lg-8 > .row.g-3 > [class*="col-"] {
        display: flex !important;
        min-width: 0;
        align-self: stretch;
    }
        /* أي Wrapper يضيفه Orchard داخل الـZone */
        .cl-main .col-lg-8 > .row.g-3 > [class*="col-"] > * {
            display: flex;
            flex: 1 1 auto;
            flex-direction: column;
            width: 100%;
            min-width: 0;
        }
        /* تمديد البطاقة أو الـHero إلى كامل ارتفاع الصف */
        .cl-main .col-lg-8 > .row.g-3 > [class*="col-"] .card,
        .cl-main .col-lg-8 > .row.g-3 > [class*="col-"] .cl-hero {
            flex: 1 1 auto;
            width: 100% !important;
            height: 100% !important;
            min-width: 0;
        }
        /* لو البطاقة مباشرة داخل العمود بدون Orchard Wrapper */
        .cl-main .col-lg-8 > .row.g-3 > [class*="col-"] > .card,
        .cl-main .col-lg-8 > .row.g-3 > [class*="col-"] > .cl-hero {
            flex: 1 1 auto;
        }
    /* الجوال: ترجع البطاقات لارتفاع المحتوى الطبيعي */
    @media (max-width: 767.98px) {
        .cl-main .col-lg-8 > .row.g-3 > [class*="col-"] {
            display: block !important;
        }

            .cl-main .col-lg-8 > .row.g-3 > [class*="col-"] > * {
                display: block;
            }

            .cl-main .col-lg-8 > .row.g-3 > [class*="col-"] .card,
            .cl-main .col-lg-8 > .row.g-3 > [class*="col-"] .cl-hero {
                height: auto !important;
            }
    }
    /* إبقاء العمود الجانبي عموديًا وعدم تأثره */
    .cl-main .col-lg-4 {
        display: block !important;
    }

        .cl-main .col-lg-4 > div {
            display: block !important;
            width: 100%;
        }



    .field-type-htmlfield {
        height: stretch;
    }

    .blurcards {
        filter: blur(0.2px);
        opacity: 0.25;
        pointer-events: none;
    }

    .comingsoon {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 9999;
        width: max-content;
        margin: 0;
        text-align: center;
        font-size: 30px;
        color: #44505c;
        filter: none !important;
        opacity: 1 !important;
    }
    /* Trigger CSS update for deployment - no style changes */
    /* ---------------------------------------------------------------------------
   11. BANNER CAROUSEL (.cl-banner)
   The rotating hero used by the landing WPSBannerZone widget. Every rule lives
   here rather than in the widget body because the widget HTML editor strips
   <style> blocks out — a banner styled inline loses its padding, its buttons
   and its layout the moment it is saved. The widget therefore ships markup and
   class names only.

   Built on Bootstrap's carousel (bootstrap.bundle.min.js is already loaded at
   the foot of the layout), so rotation, swipe, pause-on-hover and the dots are
   the framework's, not ours.
   ------------------------------------------------------------------------- */
    .cl-banner {
        position: relative;
        height: 100%;
        /* min-height keeps it substantial when the Orchard widget wrapper breaks the
       height chain and height:100% resolves to auto; max-height stops it being
       dragged to the full height of a much taller neighbour (the shortcuts card),
       which is what left the old banner two thirds empty. */
        min-height: clamp(300px, 34vh, 400px);
       /* max-height: 520px;*/
        border-radius: 12px;
        overflow: hidden;
        color: #fff;
        box-shadow: var(--cl-shadow);
    }

        .cl-banner .carousel,
        .cl-banner .carousel-inner,
        .cl-banner .carousel-item {
            height: 650px;
        }

    .cl-banner__slide {
        position: relative;
        height: 100%;
        /*display: grid;
            grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
*/ gap: 2rem;
        align-items: center;
        padding: 2.25rem 2.5rem 3rem;
    }
        /* Two washes: a highlight from the top outer corner and a shadow into the
       bottom inner one, so the flat gradient reads as lit rather than printed.

       The flat veil in front of them is the scrim that keeps the white headline
       legible over the slide artwork. It is deliberately direction-neutral — a
       one-sided scrim would fall on the wrong side of the copy in Arabic, where
       the whole banner mirrors — and it is what makes a swapped-in photograph
       safe: a bright image no longer takes the text with it. */
        .cl-banner__slide::after {
            content: "";
            position: absolute;
            inset: 0;
            pointer-events: none;
            background: linear-gradient(rgba(0,0,0,.34), rgba(0,0,0,.34)), radial-gradient(115% 85% at 100% 0%, rgba(255,255,255,.16), transparent 60%), radial-gradient(85% 70% at 0% 100%, rgba(0,0,0,.28), transparent 65%);
        }

    /* ---- Slide artwork -------------------------------------------------------
       The image sits ON TOP of the brand gradient rather than replacing it, so the
       slide still carries its colour if the file is slow, missing or blocked — the
       banner degrades to exactly what it looked like before instead of to black.

       Each slide names its file in one place. To use a photograph, upload it in
       Admin → Media and change the url() below to /media/your-file.jpg; nothing in
       the widget markup changes, which matters because the widget HTML editor
       strips styling out (see the section note above). */
    .cl-banner__slide--bs {
        background:
            url("../img/banner-workplace-services.svg") center / cover no-repeat,
            linear-gradient(135deg, var(--cl-green-900) 0%, var(--cl-green-600) 55%, var(--cl-green) 100%);
    }
    /* Deliberately a different value, not a different hue: the second slide stays in
   the BIHG palette but is never mistaken for the first at a glance. */
    .cl-banner__slide--pay {
        background:
            url("../img/banner-payments-assets.svg") center / cover no-repeat,
            linear-gradient(135deg, #141c26 0%, #1c3a2c 55%, var(--cl-green-700) 100%);
    }

    .cl-banner__copy {
        position: relative;
        z-index: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: .7rem;
        min-width: 0;
    }

    .cl-banner__eyebrow {
        display: inline-flex;
        align-items: center;
        gap: .45rem;
        align-self: flex-start;
        font-size: .7rem;
        font-weight: 700;
        letter-spacing: .12em;
        text-transform: uppercase;
        padding: .35rem .8rem;
        border-radius: 999px;
        background: rgba(255,255,255,.14);
        border: 1px solid rgba(255,255,255,.2);
        backdrop-filter: blur(6px);
    }

    .cl-banner__title {
        margin: 0;
        color: #fff;
        font-weight: 800;
        line-height: 1.15;
        letter-spacing: -.01em;
        font-size: clamp(1.45rem, 3.3vw, 25.05rem);
        padding-top:150px;
    }

    .cl-banner__text {
        margin: 0;
        max-width: 60ch;
        font-size: 1.5rem;
        line-height: 1.55;
        color: rgba(255,255,255,.78);
        padding-top:20px;
    }

    .cl-banner__actions {
        display: flex;
        flex-wrap: wrap;
        gap: .6rem;
        margin-top: .3rem;
    }

    .cl-banner__btn {
        display: inline-flex;
        align-items: center;
        gap: .5rem;
        padding: .62rem 1.15rem;
        border-radius: var(--cl-radius-pill);
        font-weight: 600;
        font-size: .92rem;
        text-decoration: none;
        transition: background var(--cl-transition), color var(--cl-transition), transform var(--cl-transition);
    }

    .cl-banner__btn--solid {
        background: #fff;
        color: var(--cl-green-700);
        box-shadow: 0 10px 22px -12px rgba(0,0,0,.75);
    }

        .cl-banner__btn--solid:hover {
            background: #fff;
            color: var(--cl-green-900);
            transform: translateY(-1px);
        }

    .cl-banner__btn--ghost {
        color: #fff;
        background: rgba(255,255,255,.07);
        border: 1px solid rgba(255,255,255,.42);
    }

        .cl-banner__btn--ghost:hover {
            color: #fff;
            background: rgba(255,255,255,.18);
            transform: translateY(-1px);
        }
    /* The icon tiles are what stop a tall banner reading as empty green: the grid
   stretches with the slide instead of leaving dead space under the copy. */
    .cl-banner__art {
        position: relative;
        z-index: 1;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .7rem;
        align-content: center;
        min-width: 0;
    }

    .cl-banner__tile {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: .45rem;
        padding: .9rem 1rem;
        min-height: 90px;
        border-radius: var(--cl-radius);
        background: rgba(255,255,255,.1);
        border: 1px solid rgba(255,255,255,.16);
        backdrop-filter: blur(8px);
        color: #fff;
        text-decoration: none;
        transition: background var(--cl-transition), transform var(--cl-transition);
    }

        .cl-banner__tile:hover {
            background: rgba(255,255,255,.19);
            color: #fff;
            transform: translateY(-2px);
        }

        .cl-banner__tile i {
            font-size: 1.3rem;
            opacity: .95;
        }

        .cl-banner__tile span {
            font-size: .82rem;
            font-weight: 600;
            line-height: 1.25;
            color: rgba(255,255,255,.9);
        }
    /* Dots centred along the bottom. z-index clears the slide's own layer (the copy
       and the tile grid both sit at z-index 1), so the clicks land on the button. */
    .cl-banner .carousel-indicators {
        z-index: 5;
        justify-content: center;
        padding-inline-start: 0;
        margin-bottom: 1.05rem;
    }

        .cl-banner .carousel-indicators [data-bs-target] {
            position: relative;
            width: 9px;
            height: 9px;
            margin: 0 .3rem;
            border: 0;
            border-radius: 50%;
            opacity: 1;
            background: rgba(255,255,255,.45);
            transition: width var(--cl-transition), background var(--cl-transition);
        }

            /* A 9px dot is a 9px target — too small to hit reliably, which reads as
               "the dots don't work". This grows the hit area to ~30px without
               changing what is drawn. */
            .cl-banner .carousel-indicators [data-bs-target]::after {
                content: "";
                position: absolute;
                inset: -11px -6px;
            }

        .cl-banner .carousel-indicators .active {
            width: 26px;
            border-radius: 5px;
            background: #fff;
        }

    /* Arrows as a pair of round buttons in the bottom corner, beside the dots.
       They used to be full-height edge strips at opacity 0 until the banner was
       hovered: invisible to aim at, absent entirely on touch, and overlapping the
       copy and the tiles. Here they are always visible and never cover content. */
    .cl-banner .carousel-control-prev,
    .cl-banner .carousel-control-next {
        top: auto;
        bottom: .65rem;
        left: auto;
        right: auto;
        z-index: 5;
        width: 34px;
        height: 34px;
        opacity: 1;
        border-radius: 50%;
        background: rgba(0,0,0,.28);
        border: 1px solid rgba(255,255,255,.28);
        transition: background var(--cl-transition);
    }

    .cl-banner .carousel-control-prev {
        inset-inline-end: 3.55rem;
    }

    .cl-banner .carousel-control-next {
        inset-inline-end: .9rem;
    }

        .cl-banner .carousel-control-prev:hover,
        .cl-banner .carousel-control-next:hover {
            background: rgba(0,0,0,.55);
        }

        .cl-banner .carousel-control-prev-icon,
        .cl-banner .carousel-control-next-icon {
            width: 15px;
            height: 15px;
        }
    /* Grid and flex follow the writing direction on their own; the CTA arrow does not. */
    [dir="rtl"] .cl-banner__arrow {
        transform: scaleX(-1);
    }

    @media (max-width: 991.98px) {
        .cl-banner {
            min-height: 250px;
            max-height: none;
        }

        .cl-banner__slide {
            grid-template-columns: minmax(0, 1fr);
            padding: 1.75rem 1.5rem 2.75rem;
        }

        .cl-banner__art {
            display: none;
        }
    }

/* ---------------------------------------------------------------------------
   12. SHORTCUT BAR — RESPONSIVE (.cl-grid--12)
   The 12-track grid was the only .cl-grid variant with no breakpoint of its own,
   so a phone kept twelve ~30px columns and the Workplace Services shortcut bar on
   My Service Requests collapsed into overlapping labels. It steps down instead.
   ------------------------------------------------------------------------- */
@media (max-width: 1399.98px) {
    .cl-grid--12 {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    /* The section head is a label, not a tile. Once the tiles wrap it takes the
       whole row, rather than sitting in a cell as one more (empty-looking) tile. */
    .cl-grid--12 > .cl-section-head {
        grid-column: 1 / -1;
    }
}

@media (max-width: 991.98px) {
    .cl-grid--12 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 575.98px) {
    .cl-grid--12 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: .5rem;
    }

        /* Three tiles across a 400px screen leaves ~110px each: the icon keeps its
           size, the label gets the room to wrap onto a second line instead of
           being clipped. */
        .cl-grid--12 .cl-shortcut {
            min-height: 88px;
            padding: .5rem .2rem;
        }
}