/* input: run-time error CSS1036: Expected expression, found ''
input: run-time error CSS1036: Expected expression, found ''
input: run-time error CSS1036: Expected expression, found '' */
:root {
    --app-font-size: 0.90rem;
    --app-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    /* Brand palette — emerald -> teal (the DEFAULT; a per-user theme may override
       these four vars via an injected <style> in the layout head).
       Token names kept (--wp-teal/--wp-amber) so existing var() references resolve.
       *-rgb hold the same colors as "r, g, b" channels for rgba() tints. */
    --wp-teal: #047857;
    --wp-amber: #14b8a6;
    --wp-teal-rgb: 4, 120, 87;
    --wp-amber-rgb: 20, 184, 166;
    --wp-sidebar-deep: #0f2e2b;
    --wp-sidebar-deep-rgb: 15, 46, 43;
    --wp-accent-gradient: linear-gradient(90deg, var(--wp-teal) 0%, var(--wp-amber) 100%);
    /* Grid tints */
    --wp-grid-header: #ecf7f3;
    --wp-grid-stripe: rgba(var(--wp-teal-rgb), .06);
    --wp-grid-hover: linear-gradient(90deg, rgba(var(--wp-teal-rgb), .16) 0%, rgba(var(--wp-amber-rgb), .13) 100%);
    --wp-grid-header-height: 28px; /* matches the card/Filter header bar height */
    /* Single source of truth for form-control heights (inputs, selects, select2, pickers) */
    --app-control-height: calc(1.5rem + .75rem + 2px);
    --app-control-height-sm: calc(1.3125rem + .5rem + 2px);
    --app-control-height-lg: calc(1.875rem + 1rem + 2px);
}

html {
    font-size: var(--app-font-size);
}

body {
    font-family: var(--app-font);
}

.bg-login {
    background: url(../../images/login-bg.png) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

@media (max-width: 768px) {
    .dt-length {
        display: none;
    }
}

/* Sidebar inherits the brand vars from :root (so a per-user theme override on
   :root retints the sidebar too — no redeclaration here). */

/* Full-width background image for the sidebar.
   The colour wash sits ON TOP of the image; its alpha controls how faint
   the image is (0.85 => ~15% visible). Swap --wp-sidebar-image or the alpha to taste. */
.sidebar.sidebar-dark {
    --wp-sidebar-bg: var(--wp-sidebar-deep);
    --wp-sidebar-image: url(../../images/sidenav-bg.jpg);
    background-color: var(--wp-sidebar-bg);
    background-image: linear-gradient(rgba(var(--wp-sidebar-deep-rgb), .80), rgba(var(--wp-sidebar-deep-rgb), .80)), var(--wp-sidebar-image);
    background-repeat: no-repeat;
    background-position: center, center;
    background-size: cover, cover;
}

.sidebar-nav .nav-link {
    border-radius: 6px;
    transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}

    .sidebar-nav .nav-link:hover {
        color: #fff;
        background-color: rgba(255, 255, 255, .06);
    }

    /* Active leaf / child item: bright gradient PILL with white text — always
       readable on the dark sidebar (gradient-text vanishes when a stop is dark). */
    .sidebar-nav .nav-link.active,
    .sidebar-nav .nav-link.active:hover {
        font-weight: 700;
        color: #fff !important;
        -webkit-text-fill-color: #fff;
        background: var(--wp-accent-gradient);
        box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
    }

        .sidebar-nav .nav-link.active .nav-icon-bullet {
            background-color: #fff;
        }

/* Active parent group header (collapsed or expanded): logo-gradient left bar + very mild gradient wash */
.nav-group.active-parent > .nav-group-toggle {
    position: relative;
    color: #fff !important;
    background: linear-gradient(90deg, rgba(var(--wp-teal-rgb), .12) 0%, rgba(var(--wp-amber-rgb), .10) 100%) !important;
}

    .nav-group.active-parent > .nav-group-toggle::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 3px;
        border-radius: 0;
        background: linear-gradient(180deg, var(--wp-teal) 0%, var(--wp-amber) 100%);
    }

    .nav-group.active-parent > .nav-group-toggle .nav-icon {
        color: #fff;
    }

/* Manually expanded (non-active) group stays subtle */
.nav-group.show:not(.active-parent) > .nav-group-toggle {
    background-color: rgba(255, 255, 255, .04) !important;
}

/* ---- Multi-level hierarchy cues ---------------------------------------------
   Nested groups get a faint vertical guide line, each child a small tick that
   connects it to that line, and progressively smaller icons/text with depth,
   so users can read how deep an item sits. */
.sidebar-nav .nav-group-items {
    position: relative;
    margin-left: 1.15rem;
    padding-left: .35rem;
    border-left: 1px solid rgba(255, 255, 255, .12);
}

.sidebar-nav .nav-group-items > .nav-item > .nav-link,
.sidebar-nav .nav-group-items > .nav-group > .nav-group-toggle {
    position: relative;
    font-size: .92em;      /* compounds per nesting level */
}

/* tick connecting each child to the guide line */
.sidebar-nav .nav-group-items > .nav-item > .nav-link::before,
.sidebar-nav .nav-group-items > .nav-group > .nav-group-toggle::before {
    content: "";
    position: absolute;
    left: -.35rem;
    top: 50%;
    width: .3rem;
    height: 1px;
    background: rgba(255, 255, 255, .18);
}

/* icons shrink slightly with depth */
.sidebar-nav .nav-group-items .nav-icon {
    font-size: .95em;
}

/* active child: brighten its guide tick to the accent so the trail is visible */
.sidebar-nav .nav-group-items > .nav-item > .nav-link.active::before {
    background: var(--wp-amber);
    width: .45rem;
    height: 2px;
}

.simplebar-content {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

.sidebar-dark {
    --cui-body-bg: var(--wp-sidebar-deep);
    line-height: 1;
    font-size: 0.95rem;
}

.dataTable a {
    text-decoration: none;
}

    .dataTable a:hover {
        color: #0c09f7 !important;
    }

/* ---- Grid theme (ALL DataTables grids) -------------------------------------
   `table.dataTable` only matches DataTables-initialised tables, so this themes
   every grid — the shared DataTable.cshtml AND custom pages like Backlog —
   without touching ordinary tables. ---------------------------------------- */

/* Retint DataTables' built-in tokens to the brand palette. --dt-row-selected
   drives the processing-loader dots (and row-selection accent), which ship as
   Bootstrap blue (13,110,253). Bind to the brand primary channels so it follows
   the active theme. */
:root {
    --dt-row-selected: var(--wp-teal-rgb);
}

/* Belt-and-braces: colour the loader dots directly in case the token is
   overridden downstream. */
div.dataTables_processing > div:last-child > div {
    background: var(--wp-teal);
}

/* ---- Themed buttons ---------------------------------------------------------
   Retint the primary buttons to the brand palette (follows the active theme)
   and add a subtle global hover lift. CoreUI buttons theme via --cui-btn-*. */
.btn-primary {
    --cui-btn-bg: var(--wp-teal);
    --cui-btn-border-color: var(--wp-teal);
    --cui-btn-hover-bg: var(--wp-amber);
    --cui-btn-hover-border-color: var(--wp-amber);
    --cui-btn-active-bg: var(--wp-amber);
    --cui-btn-active-border-color: var(--wp-amber);
    --cui-btn-disabled-bg: var(--wp-teal);
    --cui-btn-disabled-border-color: var(--wp-teal);
    /* Gradient fill (primary→accent). background-image sits over --cui-btn-bg. */
    background-image: var(--wp-accent-gradient);
    border-color: transparent;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active {
    background-image: var(--wp-accent-gradient);
    border-color: transparent;
    filter: brightness(1.06);
}

.btn-primary:disabled,
.btn-primary.disabled {
    background-image: var(--wp-accent-gradient);
    border-color: transparent;
    opacity: .65;
}

.btn-outline-primary {
    --cui-btn-color: var(--wp-teal);
    --cui-btn-border-color: var(--wp-teal);
    --cui-btn-hover-bg: var(--wp-teal);
    --cui-btn-hover-border-color: var(--wp-teal);
    --cui-btn-active-bg: var(--wp-teal);
    --cui-btn-active-border-color: var(--wp-teal);
}

.btn-link {
    --cui-btn-color: var(--wp-teal);
    --cui-btn-hover-color: var(--wp-amber);
}

/* Neutral secondary/cancel buttons: a clean light-grey chip (quieter than the
   gradient primary), not raw Bootstrap. */
.btn-secondary,
.btn-light {
    --cui-btn-color: #44505f;
    --cui-btn-bg: #f1f3f7;
    --cui-btn-border-color: #dce0e7;
    --cui-btn-hover-color: #2a3b52;
    --cui-btn-hover-bg: #e6e9ef;
    --cui-btn-hover-border-color: #cfd4dd;
    --cui-btn-active-bg: #e0e4ea;
    --cui-btn-active-border-color: #cfd4dd;
    --cui-btn-active-color: #2a3b52;
}

.btn-outline-secondary {
    --cui-btn-color: #6b7280;
    --cui-btn-border-color: #cfd4dd;
    --cui-btn-hover-color: #2a3b52;
    --cui-btn-hover-bg: #f1f3f7;
    --cui-btn-hover-border-color: #b9c0cc;
}

/* Subtle hover lift for all buttons (skip disabled + toggler/close chrome). */
.btn:not(:disabled):not(.disabled):not(.btn-close):hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(var(--wp-teal-rgb), .22);
}

.btn {
    transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease, border-color .12s ease;
}

.btn:active {
    transform: translateY(0);
}

/* Header: tint + ONE full-width gradient underline painted on the thead
   background (cells transparent), so it's a single continuous gradient. */
table.dataTable thead {
    background-image: linear-gradient(var(--wp-grid-header), var(--wp-grid-header)), var(--wp-accent-gradient);
    background-repeat: no-repeat;
    background-position: top, bottom;
    background-size: 100% calc(100% - 2px), 100% 2px;
}

    table.dataTable thead tr,
    table.dataTable thead th {
        background-color: transparent;
    }

    table.dataTable thead th {
        font-weight: 600;
        color: #2a3b52;
        vertical-align: middle;
        border: 0;
        height: var(--wp-grid-header-height);
        padding-top: .25rem;
        padding-bottom: .25rem;
    }

/* Neutralise Bootstrap's own striped/hover/active cell fills (background + box-shadow,
   across BS5 versions) so the row-level zebra/hover below render as one smooth band.
   Per-cell borders set in JS (e.g. Backlog status colours) are unaffected. */
table.dataTable > tbody > tr > td,
table.dataTable > tbody > tr > th {
    --bs-table-bg-type: transparent;
    --bs-table-accent-bg: transparent;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
}

table.dataTable > tbody > tr {
    transition: background .12s ease;
}

    table.dataTable > tbody > tr:nth-of-type(even) {
        background-color: var(--wp-grid-stripe);
    }

    table.dataTable > tbody > tr:hover {
        background: var(--wp-grid-hover);
    }

/* ---- Grid row actions: icon-only hover buttons ----------------------------
   Row actions (HyperLinkType 6) render as `<a class="dt-action"><i/><span
   class="dt-action__label">text</span></a>`. Show only the icon in a compact
   rounded button; the label is hidden but kept in the DOM (a11y) + title tooltip.
   Soft tinted hover; destructive (trash) hovers red. */
.dt-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 7px;
    color: #6b7280;
    text-decoration: none;
    vertical-align: middle;
    transition: background-color .12s ease, color .12s ease;
}

.dt-action + .dt-action {
    margin-left: 1px;   /* tight, even gap between adjacent action buttons */
}

/* Keep all row-action buttons on ONE line (never wrap), even when the
   Responsive extension narrows the Actions column. Left-align to match the
   left-aligned "Actions" column header. */
table.dataTable td:has(> .dt-action) {
    white-space: nowrap;
    text-align: left;
    min-width: 96px;    /* room for ~3 icon buttons */
}

.dt-action > i {
    font-size: .9rem;
    line-height: 1;
}

.dt-action__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;   /* visually hidden, still read by screen readers */
}

.dt-action:hover {
    background: rgba(var(--wp-teal-rgb), .14);
    color: var(--wp-teal);
}

.dt-action:has(> i.fa-trash-alt):hover,
.dt-action:has(> i.fa-trash):hover,
.dt-action:has(> i.cil-trash):hover {
    background: rgba(229, 83, 83, .14);
    color: #e55353;
}

/* ---- DataTables Responsive: expander + child detail panel -----------------
   On narrow screens overflow columns collapse; the first cell shows a +/- toggle
   and a child row lists the hidden "label: value" pairs. Theme to match. */
/* Rotating chevron expander (CSS-drawn caret; no font dependency). Points right
   when collapsed, rotates down when expanded. Only shown when the table is in the
   `collapsed` state (i.e. columns are actually hidden) — the Responsive extension
   toggles `.collapsed` on the <table>; without it the chevron is pointless. */
table.dataTable.collapsed > tbody > tr > td.dtr-control {
    cursor: pointer;
    position: relative;
    padding-left: 1.6rem !important;
}

table.dataTable.collapsed > tbody > tr > td.dtr-control:before {
    content: "" !important;
    position: absolute;
    left: .55rem;
    top: 50%;
    width: 7px;
    height: 7px;
    border: 0 !important;
    border-right: 2px solid var(--wp-teal) !important;
    border-bottom: 2px solid var(--wp-teal) !important;
    border-radius: 1px;
    background: transparent !important;
    box-shadow: none !important;
    /* rotate -45deg → points right (a ›); translate keeps it visually centered */
    transform: translateY(-60%) rotate(-45deg);
    transition: transform .18s ease, border-color .12s ease;
}

table.dataTable.collapsed > tbody > tr.dt-hasChild > td.dtr-control:before {
    /* rotate 45deg → points down (a ⌄) when expanded, in the accent color */
    transform: translateY(-75%) rotate(45deg);
    border-right-color: var(--wp-amber) !important;
    border-bottom-color: var(--wp-amber) !important;
}

table.dataTable.collapsed > tbody > tr > td.dtr-control:hover:before {
    border-right-color: var(--wp-amber) !important;
    border-bottom-color: var(--wp-amber) !important;
}

table.dataTable > tbody > tr.child ul.dtr-details {
    width: 100%;
}

table.dataTable > tbody > tr.child ul.dtr-details > li {
    border-bottom-color: rgba(var(--wp-teal-rgb), .12);
    padding: .35rem 0;
}

table.dataTable > tbody > tr.child .dtr-title {
    font-weight: 600;
    color: #44505f;
    min-width: 40%;
}

/* Compact pager sized to match the dense grids, with a brand-teal active page. */
.dataTables_paginate {
    margin-top: .5rem;
}

    .dataTables_paginate .pagination {
        margin-bottom: 0;
    }

    .dataTables_paginate .page-link {
        padding: .15rem .5rem;
        font-size: .82rem;
        line-height: 1.5;
    }

    .dataTables_paginate .page-item.active .page-link {
        background-color: var(--wp-teal);
        border-color: var(--wp-teal);
        color: #fff;
    }

    .dataTables_paginate .page-link:focus {
        box-shadow: none;
    }

.mandatory-symbol {
    color: red;
    font-size: .83rem;
}

/* ---- Leave apply page: rule chips + balance tiles ---- */
.text-teal {
    color: var(--wp-teal);
}

/* ---- Duration segmented toggle (Full Day / Morning / Afternoon) ---- */
.duration-toggle {
    flex-wrap: nowrap;
    max-width: 100%;
}
.duration-toggle .btn {
    white-space: nowrap;
    --cui-btn-color: #6b7280;
    --cui-btn-border-color: #d1d5db;
    --cui-btn-hover-bg: #f1f5f9;
    --cui-btn-hover-border-color: var(--wp-teal);
    --cui-btn-hover-color: var(--wp-teal);
    --cui-btn-active-bg: var(--wp-teal);
    --cui-btn-active-border-color: var(--wp-teal);
    --cui-btn-active-color: #fff;
    --cui-btn-checked-bg: var(--wp-teal);
    --cui-btn-checked-border-color: var(--wp-teal);
    --cui-btn-checked-color: #fff;
    font-weight: 500;
}
.duration-toggle .btn-check:disabled + .btn,
.duration-toggle .btn-check[disabled] + .btn {
    opacity: .5;
}

.badge-session {
    display: inline-block;
    margin-left: .35rem;
    padding: .05rem .35rem;
    font-size: .68rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--wp-teal);
    background: rgba(var(--wp-teal-rgb), 0.12);
    border: 1px solid rgba(var(--wp-teal-rgb), 0.35);
    border-radius: 5px;
}

.lt-rules {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}

.lt-chip {
    font-weight: 500;
    padding: .42em .6em;
    border: 1px solid transparent;
}

.lt-chip-ok {
    background: rgba(var(--wp-teal-rgb), .12);
    color: #0f7c7e;
    border-color: rgba(var(--wp-teal-rgb), .3);
}

.lt-chip-no {
    background: rgba(220, 53, 69, .10);
    color: #b02a37;
    border-color: rgba(220, 53, 69, .25);
}

.lt-chip-info {
    background: rgba(var(--wp-teal-rgb), .08);
    color: #2a3b52;
    border-color: rgba(var(--wp-teal-rgb), .2);
}

.lt-chip-muted {
    background: #eef1f5;
    color: #5b6b82;
    border-color: #e0e5ec;
}

.lt-tiles {
    display: flex;
    gap: .6rem;
}

.lt-tile {
    flex: 1;
    text-align: center;
    padding: .6rem .4rem;
    border-radius: 8px;
    background: #f6f8fa;
    border: 1px solid #eceff3;
}

.lt-tile-value {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.1;
    color: #2a3b52;
}

.lt-tile-label {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: #7b8aa0;
}

.lt-tile-ok .lt-tile-value {
    color: #0f7c7e;
}

.lt-tile-warn .lt-tile-value {
    color: #b8860b;
}

.lt-tile-danger .lt-tile-value {
    color: #b02a37;
}

.lt-tile-muted .lt-tile-value {
    color: #7b8aa0;
}

.lt-progress {
    height: 6px;
    background: #eceff3;
    border-radius: 4px;
    margin-top: .5rem;
    overflow: hidden;
}

.lt-progress-bar {
    height: 100%;
    background: var(--wp-accent-gradient);
}

.lt-daycount {
    font-size: .95rem;
}

    .lt-daycount .text-muted {
        font-size: .8rem;
        margin-left: .4rem;
    }

.subheader-title {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: var(--cui-header-toggler-padding-y) var(--cui-header-toggler-padding-x);
    background-color: var(--cui-header-toggler-bg);
    border: 0;
    border-radius: var(--cui-header-toggler-border-radius);
}

/* Flat line icon + bold title (modern, no filled chip) */
.subheader-title .page-icon {
    color: var(--wp-teal);
    font-size: 1.05rem;
    flex: 0 0 auto;
}

.subheader-title #pageTitle {
    font-weight: 600;
    font-size: 1.05rem;
    color: #2a3b52;
}

/* ---- Apply Leave calendar ---- */
#leave-calendar {
    font-size: .82rem;
}

    #leave-calendar .fc .fc-toolbar-title {
        font-size: 1rem;
        font-weight: 600;
        color: #2a3b52;
    }

    #leave-calendar .fc .fc-button-primary {
        background-color: var(--wp-teal);
        border-color: var(--wp-teal);
        text-transform: capitalize;
    }

        #leave-calendar .fc .fc-button-primary:not(:disabled):hover,
        #leave-calendar .fc .fc-button-primary:not(:disabled).fc-button-active {
            background-color: #17a9ab;
            border-color: #17a9ab;
        }

    #leave-calendar .fc .fc-daygrid-day.fc-day-today {
        background-color: rgba(var(--wp-teal-rgb), .08);
    }

/* my leaves (teal) / teammate leaves (grey) */
.fc-event.fc-mine {
    background-color: var(--wp-teal);
    border-color: var(--wp-teal);
}

.fc-event.fc-team {
    background-color: #7a8699;
    border-color: #7a8699;
}

/* pending requests rendered lighter / striped */
.fc-event.fc-pending {
    opacity: .85;
    background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, .35) 0 5px, transparent 5px 10px);
}

/* picked range highlight */
.fc-bg-event.fc-selection {
    background-color: var(--wp-amber);
    opacity: .35;
}

/* legend */
.lc-legend {
    display: inline-flex;
    flex-wrap: wrap;
    gap: .75rem;
    font-size: .78rem;
    font-weight: 400;
    color: #6c757d;
}

.lc-legend-item {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}

.lc-dot {
    width: .8rem;
    height: .8rem;
    border-radius: 3px;
    display: inline-block;
}

.lc-dot-mine {
    background-color: var(--wp-teal);
}

.lc-dot-team {
    background-color: #7a8699;
}

.lc-dot-sel {
    background-color: var(--wp-amber);
    opacity: .55;
}

/* ---- Approval / request timeline ---- */
.approval-timeline {
    padding: .25rem .25rem .25rem .5rem;
}

.atl {
    position: relative;
    margin: 0;
    padding: 0;
}

    /* the vertical spine */
    .atl::before {
        content: "";
        position: absolute;
        top: .4rem;
        bottom: .4rem;
        left: 11px;
        width: 2px;
        background: linear-gradient(180deg, var(--wp-teal) 0%, var(--wp-amber) 100%);
        opacity: .35;
    }

.atl-item {
    position: relative;
    padding: 0 0 1.1rem 2.25rem;
}

    .atl-item:last-child {
        padding-bottom: 0;
    }

.atl-dot {
    position: absolute;
    left: 0;
    top: 0;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: .7rem;
    box-shadow: 0 0 0 3px #fff;
    background: #7a8699;
    z-index: 1;
}

.atl-card {
    background: #fff;
    border: 1px solid #e6e9ef;
    border-left-width: 3px;
    border-radius: .4rem;
    padding: .5rem .65rem;
    box-shadow: 0 1px 2px rgba(20, 30, 50, .04);
}

.atl-head {
    display: flex;
    align-items: center;
    gap: .4rem;
    flex-wrap: wrap;
}

.atl-action {
    font-weight: 600;
    color: #2a3b52;
}

.atl-level {
    font-size: .7rem;
    font-weight: 500;
    color: #5b6b82;
    background: #eef1f6;
    border-radius: 10px;
    padding: .05rem .5rem;
}

.atl-meta {
    font-size: .76rem;
    color: #6c757d;
    margin-top: .15rem;
    display: flex;
    flex-wrap: wrap;
    gap: .15rem .9rem;
}

.atl-comment {
    margin-top: .4rem;
    font-size: .8rem;
    color: #41506a;
    background: #f7f9fc;
    border-radius: .3rem;
    padding: .35rem .5rem;
}

/* per-action accents */
.atl-submitted .atl-dot { background: #3b82f6; }
.atl-submitted .atl-card { border-left-color: #3b82f6; }

.atl-approved .atl-dot { background: #2eb85c; }
.atl-approved .atl-card { border-left-color: #2eb85c; }

.atl-rejected .atl-dot { background: #e55353; }
.atl-rejected .atl-card { border-left-color: #e55353; }

.atl-cancelled .atl-dot { background: #8a94a6; }
.atl-cancelled .atl-card { border-left-color: #8a94a6; }

/* ---- horizontal form: align wc-label used as a column label ---- */
.label-wrapper.col-form-label {
    font-weight: 500;
}

    .label-wrapper.col-form-label .form-label {
        margin-bottom: 0;
    }

/* ---- Approvals coverage timeline (members x days) ---- */
.coverage {
    font-size: .8rem;
}

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

.coverage-title {
    font-weight: 600;
    color: #2a3b52;
}

.coverage-range {
    color: #6c757d;
}

.coverage-scroll {
    overflow-x: auto;
    border: 1px solid #e6e9ef;
    border-radius: .4rem;
}

.coverage-table {
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
}

    .coverage-table th,
    .coverage-table td {
        text-align: center;
        border-bottom: 1px solid #eef1f6;
        border-right: 1px solid #eef1f6;
    }

.cov-name-col {
    text-align: left !important;
    white-space: nowrap;
    padding: .3rem .5rem;
    position: sticky;
    left: 0;
    background: #fff;
    z-index: 1;
    min-width: 135px;
}

.cov-day {
    padding: .2rem .35rem;
    min-width: 30px;
    line-height: 1.1;
}

.cov-dow {
    display: block;
    font-size: .62rem;
    text-transform: uppercase;
    color: #9aa6b6;
}

.cov-dom {
    display: block;
    font-weight: 600;
    color: #41506a;
}

.cov-cell {
    height: 26px;
    min-width: 30px;
}

.cov-weekend {
    background: #f6f8fb;
}

.cov-cell.cov-req,
.cov-count.cov-req {
    background: rgba(var(--wp-amber-rgb), .12);
}

th.cov-req {
    background: rgba(var(--wp-amber-rgb), .22);
}

.cov-on-approved {
    background-color: var(--wp-teal) !important;
}

.cov-on-pending {
    background-image: repeating-linear-gradient(45deg, var(--wp-teal) 0 4px, #d6f4f5 4px 8px);
}

.cov-requester-row .cov-name-col {
    font-weight: 600;
}

.cov-badge {
    background: var(--wp-amber);
    color: #5a4500;
    font-weight: 500;
}

.cov-count-row td {
    background: #fbfcfe;
    font-weight: 600;
    color: #97a2b2;
    border-top: 2px solid #e6e9ef;
}

.cov-count-has {
    color: #0f766e;
}

.coverage-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: .55rem;
    font-size: .72rem;
    color: #6c757d;
}

.cov-key {
    display: inline-block;
    width: .8rem;
    height: .8rem;
    border-radius: 3px;
    margin-right: .3rem;
    vertical-align: -1px;
}

    .cov-key.cov-key-req {
        background: rgba(var(--wp-amber-rgb), .5);
    }

/* ---- inline "teammates off on selected dates" badge ---- */
.team-out {
    padding: .4rem .6rem;
    border-radius: .35rem;
    background: #f7f9fc;
    border: 1px solid #eef1f6;
    color: #41506a;
}

    .team-out .to-count {
        font-weight: 700;
        color: #0f766e;
    }

    .team-out .to-names {
        color: #6c757d;
    }

    .team-out.to-clear {
        color: #1f8f53;
        background: #f1faf4;
        border-color: #d6efe0;
    }

/* ---- Configuration settings switches ---- */
.cfg-switches {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    padding-top: .25rem;
}

    .cfg-switches .form-switch {
        margin-bottom: 0;
    }

/* ---- smart date suggestions ---- */
.lt-suggest {
    border: 1px solid #e6e9ef;
    border-radius: .45rem;
    padding: .5rem .65rem;
    background: linear-gradient(180deg, rgba(var(--wp-teal-rgb), .06), rgba(var(--wp-amber-rgb), .05));
}

.lt-suggest-head {
    font-weight: 600;
    font-size: .82rem;
    color: #2a3b52;
    margin-bottom: .4rem;
}

.lt-suggest-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .35rem 0;
    border-top: 1px solid #eef1f6;
}

    .lt-suggest-item:first-of-type {
        border-top: 0;
    }

.lt-suggest-meta {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.lt-suggest-dates {
    font-weight: 600;
    color: #2a3b52;
    font-size: .82rem;
}

.lt-suggest-info {
    font-size: .74rem;
    color: #6c757d;
}

.lt-suggest-ok {
    color: #1f8f53;
}

.lt-suggest-warn {
    color: #0f766e;
}

.lt-suggest-pick {
    flex: 0 0 auto;
}

.offcanvas-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1rem;
}

    .offcanvas-header .btn-close {
        padding: .5rem .5rem;
        margin-top: -.5rem;
        margin-right: -.5rem;
        margin-bottom: -.5rem;
    }

/* ===== CRUD drawer polish (pdOffCanvas / wisehrOffcanvas) =====================
   A floating themed drawer: accent-underline header, rounded inner corner,
   deeper shadow, smoother slide, themed loader, comfortable body rhythm. */
#pdOffCanvas.offcanvas-end,
#wisehrOffcanvas.offcanvas-end {
    width: 460px;
    max-width: 92vw;
    border-left: 0;
    border-top-left-radius: 14px;
    border-bottom-left-radius: 14px;
    box-shadow: -18px 0 48px rgba(16, 24, 40, .18);
    overflow: hidden;
    transition: transform .28s cubic-bezier(.22, .8, .2, 1);
}

/* Header: bigger bold title + primary→accent gradient underline (no hard border) */
#pdOffCanvas .offcanvas-header,
#wisehrOffcanvas .offcanvas-header {
    position: relative;
    border-bottom: 0 !important;
    padding: 1rem 1.25rem;
    background: #fff;
}

#pdOffCanvas .offcanvas-header::after,
#wisehrOffcanvas .offcanvas-header::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: var(--wp-accent-gradient);
}

#pdOffCanvas .offcanvas-title,
#wisehrOffcanvas .offcanvas-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: #2a3b52;
}

/* Body rhythm */
#pdOffCanvas .offcanvas-body,
#wisehrOffcanvas .offcanvas-body {
    padding: 1.25rem;
}

/* Themed loader (replaces the off-theme red spinner) */
.offcanvas-loader {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 160px;
}

.offcanvas-spinner {
    color: var(--wp-teal);
}

/* Subtle themed backdrop */
.offcanvas-backdrop.show {
    background-color: rgba(16, 24, 40, .5);
}

.btn-close {
    box-sizing: content-box;
    width: 1em;
    height: 1em;
    padding: .25em .25em;
    color: #000;
    border: 0;
    border-radius: .25rem;
    opacity: .5;
}

.validation-summary-errors {
    background-color: #f5e9c4;
    color: #f72828;
    padding: 0.3rem;
    border-radius: 6px;
    text-align: center;
    margin-bottom: 0.5rem;
    font-size: .9rem;
}

    .validation-summary-errors ul {
        padding: 0;
        margin-bottom: 0;
    }

        .validation-summary-errors ul li {
            list-style: none !important;
        }

.validation-errors ul {
    margin-bottom: 0;
    padding-left: 1.25rem;
}

    .validation-errors ul li {
        list-style: disc !important;
    }

/* every single-line control shares one height, whatever widget renders it */
input.form-control:not([type=file]):not([type=color]):not(.form-control-sm):not(.form-control-lg),
.form-select:not([multiple]):not([size]):not(.form-select-sm):not(.form-select-lg) {
    height: var(--app-control-height);
}

input.form-control-sm:not([type=file]):not([type=color]),
.form-select-sm:not([multiple]):not([size]) {
    height: var(--app-control-height-sm);
}

input.form-control-lg:not([type=file]):not([type=color]),
.form-select-lg:not([multiple]):not([size]) {
    height: var(--app-control-height-lg);
}

.select2-container .select2-selection--single {
    height: var(--app-control-height);
    padding: 0 .75rem;
    border: 1px solid #ced4da;
    border-radius: var(--cui-border-radius);
    font-size: 1rem !important;
    font-weight: 400;
    line-height: 1.5;
    display: flex;
    align-items: center;
}

    /* vertically centre the rendered value (select2 default top-aligns it) */
    .select2-container--default .select2-selection--single .select2-selection__rendered {
        flex: 1 1 auto;
        line-height: 1.5;
        padding-left: 0;
        padding-right: 1.5rem;
    }

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100%;
    right: 0.75rem;
}

.select2-container {
    width: 100% !important;
}

.select2-container--open {
    z-index: 100000000;
}

.jconfirm .jconfirm-box,
.jconfirm .jconfirm-box div.jconfirm-content-pane,
.jconfirm .jconfirm-box div.jconfirm-content-pane .jconfirm-content {
    overflow: visible !important;
}

.select2-container--default .select2-selection--multiple {
    min-height: var(--app-control-height);
    border: 1px solid #ced4da;
    border-radius: var(--cui-border-radius);
}

    .select2-container--default .select2-selection--multiple .select2-selection__choice {
        margin-top: 0.28rem !important;
        background-color: #afc3f7 !important;
        color: #495057;
        border: 1px solid #ced4da;
        border-radius: 0.2rem;
    }

.datepicker {
    z-index: 1050 !important;
}

.datepicker.datepicker-dropdown {
    z-index: 100000001 !important;
}

#canvas-3 {
    width: 100%;
    height: 300px;
}

.dropzone {
    padding: 0;
}

    .dropzone .dz-preview .dz-image,
    .dropzone .dz-preview .dz-image .data-dz-thumbnail {
        height: 100px;
        width: 100px;
    }

        .dropzone .dz-preview .dz-image img {
            max-height: 100px;
            max-width: 100px;
        }

    .dropzone .dz-preview {
        margin: 8px;
        padding-bottom: 0 !important;
        margin-bottom: 0px;
    }

    .dropzone .dz-message {
    }

#dropzone-container {
    border: 1px dashed #007bff;
    color: #6c757d;
}

.timeline-container {
    position: relative;
    margin-bottom: 32px
}

    .timeline-container:last-child {
        margin-bottom: 0;
    }
    /*.timeline-container:before {
        content: "";
        display: block;
        position: absolute;
        left: 28px;
        top: 0;
        bottom: 0;
        border: 1px dotted #E2E3E7;
        border-width: 0 1px
    }*/

    .timeline-container:first-child:before {
        border-top-width: 1px
    }

    .timeline-container:last-child:before {
        border-bottom-width: 1px
    }

.timeline-item {
    position: relative;
}

    .timeline-item .widget-box {
        background-color: #F2F6F9;
        color: #595C66;
    }

    .timeline-item .transparent.widget-box {
        border-left: 3px solid #DAE1E5;
        /*margin-bottom: 8px;*/
    }

    .timeline-item .transparent .widget-header {
        background-color: #ECF1F4;
        border-bottom-width: 0
    }

        .timeline-item .transparent .widget-header > .widget-title {
            margin-left: 8px
        }

    .timeline-item:nth-child(even) .widget-box {
        background-color: #F3F3F3;
        color: #616161
    }

        .timeline-item:nth-child(even) .widget-box.transparent {
            border-left-color: #DBDBDB !important
        }

            .timeline-item:nth-child(even) .widget-box.transparent .widget-header {
                background-color: #EEE !important
            }

    .timeline-item .widget-box {
        /*margin: 0 0 0 60px;*/
        position: relative;
        max-width: none
    }

    .timeline-item .widget-main {
        margin: 0;
        position: relative;
        max-width: none;
        border-bottom-width: 0
    }

    .timeline-item .widget-body {
        background-color: transparent
    }

    .timeline-item .widget-toolbox {
        padding: 4px 8px 0 !important;
        background-color: transparent !important;
        border-width: 0 !important;
        margin: 0 !important
    }

.timeline-info {
    float: left;
    width: 60px;
    text-align: center;
    position: relative
}

    .timeline-info img {
        border-radius: 100%;
        max-width: 42px
    }

    .timeline-info .badge,
    .timeline-info .label {
        font-size: .83rem
    }

.timeline-container:not(.timeline-style2) .timeline-indicator {
    opacity: 1;
    border-radius: 100%;
    display: inline-block;
    font-size: 1.11rem;
    height: 36px;
    line-height: 30px;
    width: 36px;
    text-align: center;
    text-shadow: none !important;
    padding: 0;
    cursor: default;
    border: 3px solid #FFF !important
}

.timeline-label {
    display: block;
    clear: both;
    margin: 0 0 18px 34px
}

.timeline-item img {
    border: 1px solid #AAA;
    padding: 2px;
    background-color: #FFF
}

.timeline-style2:before {
    display: none
}

.timeline-style2 .timeline-item {
    padding-bottom: 22px;
    margin-bottom: 0
}

    .timeline-style2 .timeline-item:last-child {
        padding-bottom: 0
    }

    .timeline-style2 .timeline-item:before {
        content: "";
        display: block;
        position: absolute;
        left: 90px;
        top: 5px;
        bottom: -5px;
        border-width: 0;
        background-color: #DDD;
        width: 2px;
        max-width: 2px
    }

    .timeline-style2 .timeline-item:last-child:before {
        display: none
    }

    .timeline-style2 .timeline-item:first-child:before {
        display: block
    }

    .timeline-style2 .timeline-item .transparent .widget-header {
        background-color: transparent !important
    }

    .timeline-style2 .timeline-item .transparent.widget-box {
        background-color: transparent !important;
        border-left: none !important
    }

.timeline-style2 .timeline-info {
    width: 100px
}

.timeline-style2 .timeline-indicator {
    font-size: 0;
    height: 12px;
    line-height: 12px;
    width: 12px;
    border-width: 1px !important;
    background-color: #FFF !important;
    position: absolute;
    left: 85px;
    top: 3px;
    opacity: 1;
    border-radius: 100%;
    display: inline-block;
    padding: 0
}

.timeline-style2 .timeline-date {
    display: inline-block;
    width: 72px;
    text-align: right;
    margin-right: 25px;
    color: #777
}

.timeline-style2 .timeline-item .widget-box {
    margin-left: 112px
}

.timeline-style2 .timeline-label {
    width: 75px;
    margin-left: 0;
    margin-bottom: 10px;
    text-align: right;
    color: #666;
    font-size: .97rem
}

.timeline-time {
    text-align: center;
    position: static
}


.widget-box {
    padding: 0;
    box-shadow: none;
    margin: 3px 0;
    border: 1px solid #CCC
}

@media only screen and (max-width:767px) {
    .widget-box {
        margin-top: 7px;
        margin-bottom: 7px
    }
}

.widget-header {
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    position: relative;
    min-height: 38px;
    background: repeat-x #f7f7f7;
    background-image: -webkit-linear-gradient(top, #FFF 0, #EEE 100%);
    background-image: -o-linear-gradient(top, #FFF 0, #EEE 100%);
    background-image: linear-gradient(to bottom, #FFF 0, #EEE 100%);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffeeeeee', GradientType=0);
    color: #669FC7;
    border-bottom: 1px solid #DDD;
    padding-left: 12px
}

.widget-box.transparent > .widget-header,
.widget-header-flat {
    filter: progid: DXImageTransform.Microsoft.gradient(enabled=false)
}

.widget-header:after,
.widget-header:before {
    content: "";
    display: table;
    line-height: 0
}

.widget-header:after {
    clear: right
}

.widget-box.collapsed > .widget-header {
    border-bottom-width: 0
}

.collapsed.fullscreen > .widget-header {
    border-bottom-width: 1px
}

.collapsed > .widget-body {
    display: none
}

.widget-header-flat {
    background: #F7F7F7
}

.widget-header-large {
    min-height: 49px;
    padding-left: 18px
}

.widget-header-small {
    min-height: 31px;
    padding-left: 10px
}

.widget-header > .widget-title {
    line-height: 36px;
    padding: 0;
    margin: 0;
    display: inline
}

    .widget-header > .widget-title > .ace-icon {
        margin-right: 5px;
        font-weight: 400;
        display: inline-block
    }

.infobox .infobox-content:first-child,
.infobox > .badge,
.infobox > .stat,
.percentage {
    font-weight: 700
}

.widget-header-large > .widget-title {
    line-height: 48px
}

.widget-header-small > .widget-title {
    line-height: 30px
}

.widget-toolbar {
    display: inline-block;
    padding: 0 10px;
    line-height: 37px;
    float: right;
    position: relative;
    font-size: .83rem;
    font-weight: bold;
    color: #6e98b9;
}

.widget-header-large > .widget-toolbar {
    line-height: 48px
}

.widget-header-small > .widget-toolbar {
    line-height: 29px
}

.widget-toolbar.no-padding {
    padding: 0
}

.widget-toolbar.padding-5 {
    padding: 0 5px
}

.widget-toolbar:before {
    display: inline-block;
    content: "";
    position: absolute;
    top: 3px;
    bottom: 3px;
    left: -1px;
    border: 1px solid #D9D9D9;
    border-width: 0 1px 0 0
}

.popover-notitle + .popover .popover-title,
.popover.popover-notitle .popover-title,
.widget-toolbar.no-border:before {
    display: none
}

.widget-header-large > .widget-toolbar:before {
    top: 6px;
    bottom: 6px
}

[class*=widget-color-] > .widget-header > .widget-toolbar:before {
    border-color: #EEE
}

.widget-color-orange > .widget-header > .widget-toolbar:before {
    border-color: #FEA
}

.widget-color-dark > .widget-header > .widget-toolbar:before {
    border-color: #222;
    box-shadow: -1px 0 0 rgba(255, 255, 255, .2), inset 1px 0 0 rgba(255, 255, 255, .1)
}

.widget-toolbar label {
    display: inline-block;
    vertical-align: middle;
    margin-bottom: 0
}

.widget-toolbar > .widget-menu > a,
.widget-toolbar > a {
    font-size: .97rem;
    margin: 0 1px;
    display: inline-block;
    padding: 0;
    line-height: 24px
}

    .widget-toolbar > .widget-menu > a:hover,
    .widget-toolbar > a:hover {
        text-decoration: none
    }

.widget-header-large > .widget-toolbar > .widget-menu > a,
.widget-header-large > .widget-toolbar > a {
    font-size: 1.04rem;
    margin: 0 1px
}

.widget-toolbar > .btn {
    line-height: 27px;
    margin-top: -2px
}

    .widget-toolbar > .btn.smaller {
        line-height: 26px
    }

    .widget-toolbar > .btn.bigger {
        line-height: 28px
    }

.widget-toolbar > .btn-sm {
    line-height: 24px
}

    .widget-toolbar > .btn-sm.smaller {
        line-height: 23px
    }

    .widget-toolbar > .btn-sm.bigger {
        line-height: 25px
    }

.widget-toolbar > .btn-xs {
    line-height: 22px
}

    .widget-toolbar > .btn-xs.smaller {
        line-height: 21px
    }

    .widget-toolbar > .btn-xs.bigger {
        line-height: 23px
    }

.widget-toolbar > .btn-minier {
    line-height: 18px
}

    .widget-toolbar > .btn-minier.smaller {
        line-height: 17px
    }

    .widget-toolbar > .btn-minier.bigger {
        line-height: 19px
    }

.widget-toolbar > .btn-lg {
    line-height: 36px
}

    .widget-toolbar > .btn-lg.smaller {
        line-height: 34px
    }

    .widget-toolbar > .btn-lg.bigger {
        line-height: 38px
    }

.widget-toolbar-dark {
    background: #444
}

.widget-toolbar-light {
    background: rgba(255, 255, 255, .85)
}

.widget-toolbar > .widget-menu {
    display: inline-block;
    position: relative
}

    .widget-toolbar > .widget-menu > a[data-action],
    .widget-toolbar > a[data-action] {
        -webkit-transition: transform .1s;
        -o-transition: transform .1s;
        transition: transform .1s
    }

        .widget-toolbar > .widget-menu > a[data-action] > .ace-icon,
        .widget-toolbar > a[data-action] > .ace-icon {
            margin-right: 0
        }

        .widget-toolbar > .widget-menu > a[data-action]:focus,
        .widget-toolbar > a[data-action]:focus {
            text-decoration: none;
            outline: 0
        }

        .widget-toolbar > .widget-menu > a[data-action]:hover,
        .widget-toolbar > a[data-action]:hover {
            -moz-transform: scale(1.2);
            -webkit-transform: scale(1.2);
            -o-transform: scale(1.2);
            -ms-transform: scale(1.2);
            transform: scale(1.2)
        }

.widget-body {
    background-color: #FFF
}

.widget-main {
    padding: 5px
}

    .widget-main.padding-32 {
        padding: 32px
    }

    .widget-main.padding-30 {
        padding: 30px
    }

    .widget-main.padding-28 {
        padding: 28px
    }

    .widget-main.padding-26 {
        padding: 26px
    }

    .widget-main.padding-24 {
        padding: 24px
    }

    .widget-main.padding-22 {
        padding: 22px
    }

    .widget-main.padding-20 {
        padding: 20px
    }

    .widget-main.padding-18 {
        padding: 18px
    }

    .widget-main.padding-16 {
        padding: 16px
    }

    .widget-main.padding-14 {
        padding: 14px
    }

    .widget-main.padding-12 {
        padding: 12px
    }

    .widget-main.padding-10 {
        padding: 10px
    }

    .widget-main.padding-8 {
        padding: 8px
    }

    .widget-main.padding-6 {
        padding: 6px
    }

    .widget-main.padding-4 {
        padding: 4px
    }

    .widget-main.padding-2 {
        padding: 2px
    }

    .widget-main.no-padding,
    .widget-main.padding-0 {
        padding: 0
    }

.widget-toolbar .progress {
    vertical-align: middle;
    display: inline-block;
    margin: 0
}

.widget-toolbar > .dropdown,
.widget-toolbar > .dropup {
    display: inline-block
}

.widget-toolbox.toolbox-vertical,
.widget-toolbox.toolbox-vertical + .widget-main {
    display: table-cell;
    vertical-align: top
}

.widget-box > .widget-header > .widget-toolbar > .widget-menu > [data-action=settings],
.widget-box > .widget-header > .widget-toolbar > [data-action=settings],
.widget-color-dark > .widget-header > .widget-toolbar > .widget-menu > [data-action=settings],
.widget-color-dark > .widget-header > .widget-toolbar > [data-action=settings] {
    color: #99CADB
}

.widget-box > .widget-header > .widget-toolbar > .widget-menu > [data-action=reload],
.widget-box > .widget-header > .widget-toolbar > [data-action=reload],
.widget-color-dark > .widget-header > .widget-toolbar > .widget-menu > [data-action=reload],
.widget-color-dark > .widget-header > .widget-toolbar > [data-action=reload] {
    color: #ACD392
}

.widget-box > .widget-header > .widget-toolbar > .widget-menu > [data-action=collapse],
.widget-box > .widget-header > .widget-toolbar > [data-action=collapse],
.widget-color-dark > .widget-header > .widget-toolbar > .widget-menu > [data-action=collapse],
.widget-color-dark > .widget-header > .widget-toolbar > [data-action=collapse] {
    color: #AAA
}

.widget-box > .widget-header > .widget-toolbar > .widget-menu > [data-action=close],
.widget-box > .widget-header > .widget-toolbar > [data-action=close],
.widget-color-dark > .widget-header > .widget-toolbar > .widget-menu > [data-action=close],
.widget-color-dark > .widget-header > .widget-toolbar > [data-action=close] {
    color: #E09E96
}

.widget-box[class*=widget-color-] > .widget-header {
    color: #FFF;
    filter: progid: DXImageTransform.Microsoft.gradient(enabled=false)
}

.widget-color-blue {
    border-color: #307ECC
}

    .widget-color-blue > .widget-header {
        background: #307ECC;
        border-color: #307ECC
    }

.widget-color-blue2 {
    border-color: #5090C1
}

    .widget-color-blue2 > .widget-header {
        background: #5090C1;
        border-color: #5090C1
    }

.widget-color-blue3 {
    border-color: #6379AA
}

    .widget-color-blue3 > .widget-header {
        background: #6379AA;
        border-color: #6379AA
    }

.widget-color-green {
    border-color: #82AF6F
}

    .widget-color-green > .widget-header {
        background: #82AF6F;
        border-color: #82AF6F
    }

.widget-color-green2 {
    border-color: #2E8965
}

    .widget-color-green2 > .widget-header {
        background: #2E8965;
        border-color: #2E8965
    }

.widget-color-green3 {
    border-color: #4EBC30
}

    .widget-color-green3 > .widget-header {
        background: #4EBC30;
        border-color: #4EBC30
    }

.widget-color-red {
    border-color: #E2755F
}

    .widget-color-red > .widget-header {
        background: #E2755F;
        border-color: #E2755F
    }

.widget-color-red2 {
    border-color: #E04141
}

    .widget-color-red2 > .widget-header {
        background: #E04141;
        border-color: #E04141
    }

.widget-color-red3 {
    border-color: #D15B47
}

    .widget-color-red3 > .widget-header {
        background: #D15B47;
        border-color: #D15B47
    }

.widget-color-purple {
    border-color: #7E6EB0
}

    .widget-color-purple > .widget-header {
        background: #7E6EB0;
        border-color: #7E6EB0
    }

.widget-color-pink {
    border-color: #CE6F9E
}

    .widget-color-pink > .widget-header {
        background: #CE6F9E;
        border-color: #CE6F9E
    }

.widget-color-orange {
    border-color: #E8B10D
}

    .widget-color-orange > .widget-header {
        color: #855D10 !important;
        border-color: #E8B10D;
        background: #FFC657
    }

.widget-color-dark {
    border-color: #5a5a5a
}

    .widget-color-dark > .widget-header {
        border-color: #666;
        background: #404040
    }

.widget-color-grey {
    border-color: #9e9e9e
}

    .widget-color-grey > .widget-header {
        border-color: #aaa;
        background: #848484
    }

.widget-box.transparent {
    border-width: 0
}

    .widget-box.transparent > .widget-header {
        background: 0 0;
        border-width: 0;
        border-bottom: 1px solid #DCE8F1;
        color: #4383B4;
        padding-left: 3px
    }

    .widget-box.transparent > .widget-header-large {
        padding-left: 5px
    }

    .widget-box.transparent > .widget-header-small {
        padding-left: 1px
    }

    .widget-box.transparent > .widget-body {
        border-width: 0;
        background-color: transparent
    }

[class*=widget-color-] > .widget-header > .widget-toolbar > .widget-menu > [data-action],
[class*=widget-color-] > .widget-header > .widget-toolbar > [data-action] {
    text-shadow: 0 1px 1px rgba(0, 0, 0, .2)
}

[class*=widget-color-] > .widget-header > .widget-toolbar > .widget-menu > [data-action=settings],
[class*=widget-color-] > .widget-header > .widget-toolbar > [data-action=settings] {
    color: #D3E4ED
}

[class*=widget-color-] > .widget-header > .widget-toolbar > .widget-menu > [data-action=reload],
[class*=widget-color-] > .widget-header > .widget-toolbar > [data-action=reload] {
    color: #DEEAD3
}

[class*=widget-color-] > .widget-header > .widget-toolbar > .widget-menu > [data-action=collapse],
[class*=widget-color-] > .widget-header > .widget-toolbar > [data-action=collapse] {
    color: #E2E2E2
}

[class*=widget-color-] > .widget-header > .widget-toolbar > .widget-menu > [data-action=close],
[class*=widget-color-] > .widget-header > .widget-toolbar > [data-action=close] {
    color: #FFD9D5
}

.widget-color-orange > .widget-header > .widget-toolbar > .widget-menu > [data-action],
.widget-color-orange > .widget-header > .widget-toolbar > [data-action] {
    text-shadow: none
}

.widget-color-orange > .widget-header > .widget-toolbar > .widget-menu > [data-action=settings],
.widget-color-orange > .widget-header > .widget-toolbar > [data-action=settings] {
    color: #559AAB
}

.widget-color-orange > .widget-header > .widget-toolbar > .widget-menu > [data-action=reload],
.widget-color-orange > .widget-header > .widget-toolbar > [data-action=reload] {
    color: #7CA362
}

.widget-color-orange > .widget-header > .widget-toolbar > .widget-menu > [data-action=collapse],
.widget-color-orange > .widget-header > .widget-toolbar > [data-action=collapse] {
    color: #777
}

.widget-color-orange > .widget-header > .widget-toolbar > .widget-menu > [data-action=close],
.widget-color-orange > .widget-header > .widget-toolbar > [data-action=close] {
    color: #A05656
}

.widget-box.light-border[class*=widget-color-]:not(.fullscreen) {
    border-width: 0
}

    .widget-box.light-border[class*=widget-color-]:not(.fullscreen) > .widget-header {
        border: 1px solid;
        border-color: inherit
    }

    .widget-box.light-border[class*=widget-color-]:not(.fullscreen) > .widget-body {
        border: 1px solid #D6D6D6;
        border-width: 0 1px 1px
    }

.widget-box.no-border {
    border-width: 0
}

.widget-box.fullscreen {
    position: fixed;
    margin: 0;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #FFF;
    border-width: 3px;
    z-index: 1040 !important
}

    .widget-box.fullscreen:not([class*=widget-color-]) {
        border-color: #AAA
    }

.widget-body .table {
    border-top: 1px solid #E5E5E5
}

    .widget-body .table thead:first-child tr {
        background: #FFF
    }

.comment-box-container {
    position: sticky;
    bottom: 0;
    background-color: #ffffff;
    padding: 0.6rem;
    border-top: 1px solid #dee2e6;
}

.thumbnail-container {
    display: flex;
    overflow-x: auto;
    white-space: nowrap;
    padding: 0.5rem;
    margin-bottom: 1rem;
    gap: 1rem;
    border: 1px dashed #dee2e6;
}

    .thumbnail-container::-webkit-scrollbar {
        height: 8px;
    }

    .thumbnail-container::-webkit-scrollbar-thumb {
        background: #888;
        border-radius: 4px;
    }

        .thumbnail-container::-webkit-scrollbar-thumb:hover {
            background: #555;
        }

.file-icon-delete {
    text-align: center;
    color: #8b8e90;
    cursor: pointer;
    font-size: 0.75rem;
}

    .file-icon-delete:hover {
        color: #f72828;
    }

.file-icon {
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.78rem;
    color: #fff;
    border-radius: 8px;
    text-align: center;
    flex-shrink: 0;
}

    .file-icon a {
        color: #fff;
        text-decoration: none !important;
    }

    .file-icon.pdf {
        background-color: #e74c3c;
    }

    .file-icon.doc {
        background-color: #3498db;
    }

    .file-icon.xls {
        background-color: #2ecc71;
    }

    .file-icon.img {
        background-color: #f39c12;
    }

    .file-icon.txt {
        background-color: #95a5a6;
    }

    .file-icon.other {
        background-color: #8e44ad;
    }

.alert-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
}

.avatar-card {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-right: 10px;
}

.greeting-container {
    display: flex;
    align-items: center;
}

.greeting-text {
    margin: 0;
    font-weight: bold;
}

#sidebar .sidebar-brand {
    margin-left: auto;
    margin-right: auto;
}

.sidebar-brand-full {
    margin-left: 0;
}

.text-line-container {
    display: flex;
    align-items: center;
    text-align: center;
    width: 100%;
}

    .text-line-container::before,
    .text-line-container::after {
        content: '';
        flex: 1;
        border-bottom: 1px dashed #6c757d;
        /* Adjust color and thickness */
        margin: 0 10px;
    }

.text-line {
    white-space: nowrap;
}

.card-count a {
    text-decoration: none;
    color: #fff;
    cursor: pointer;
}

.chart-container {
    width: 100%;
    height: 300px;
}

@keyframes blink {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.blinking {
    animation: blink 0.35s linear infinite;
}

.badge-counter .badge {
    padding-top: 0.15em;
    padding-right: 0.45em;
    padding-bottom: 0.15em;
    padding-left: 0.45em;
}

.form-control-color {
    width: 100% !important;
}

.pvtFilterBox {
    z-index: 100000 !important;
}

.pivot {
    max-height: 60vh;
    overflow: auto;
}

.jconfirm-title-c {
    margin-bottom: 8px;
    border-bottom: solid 1px #ddd;
}

.title-author {
    font-size: .83rem;
}

.alert-status-log {
    padding: 5px;
    background: #e5e5e5;
    border-radius: 5px;
    margin-bottom: 5px;
    border: 1px solid #fae594;
    text-align: center;
}

.custom-tooltip .tooltip-inner {
    background-color: #f1f5c8;
    border: 1px solid #dae193;
}

.custom-tooltip.bs-tooltip-top .tooltip-arrow::before {
    border-top-color: #dae193;
}

.datepicker-z {
    z-index: 1000 !important;
}

.tox-promotion {
    display: none !important;
}

.diagram-wrapper {
    height: 90vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #f4f6f8;
    overflow: hidden;
}

.diagram-container {
    width: 100%;
    height: 100%;
    background: white;
    border: 1px solid #ddd;
    position: relative;
}

.mermaid {
    height: calc(100% - 45px);
    display: flex;
    justify-content: center;
    align-items: center;
}

    .mermaid .badge {
        font-size: .83rem;
    }

.validation-errors li {
    display: block !important;
}

/* ===== BEGIN: App-wide sleek scrollbar (theme-oriented) =====================
   To REVERT: delete everything between this BEGIN marker and the END marker
   below. No other files reference it; removing it restores default browser
   scrollbars everywhere.
   ========================================================================== */

/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: #c2ccd6 transparent;
}

/* WebKit / Chromium / Edge */
*::-webkit-scrollbar {
    width: 9px;
    height: 9px;
}

*::-webkit-scrollbar-track {
    background: transparent;
}

*::-webkit-scrollbar-thumb {
    background-color: #c2ccd6;
    border-radius: 8px;
    border: 2px solid transparent;
    background-clip: content-box;
}

*::-webkit-scrollbar-thumb:hover {
    background-color: #18b5c4;
}

*::-webkit-scrollbar-corner {
    background: transparent;
}

/* ===== END: App-wide sleek scrollbar ====================================== */

/* ===== Report column layout builder (Configuration > Report Columns) ===== */
.report-columns {
    max-width: 680px;
    max-height: calc(100vh - 320px);
    min-height: 180px;
    overflow-y: auto;
    padding-right: 6px;
}

.report-col-row {
    background: #f8fafc;
    border: 1px solid #e3eaf2;
    border-radius: 6px;
    padding: 6px 10px;
}

.report-col-handle {
    cursor: grab;
}

.report-col-handle:active {
    cursor: grabbing;
}

.report-col-key {
    min-width: 120px;
    flex: 0 0 auto;
}

.report-col-title {
    max-width: 280px;
}

.report-col-placeholder {
    border: 1px dashed #9bb4cc;
    background: #eaf1f8;
    border-radius: 6px;
    margin-bottom: 8px;
}

/* ============================================================================
   Header tools — global navbar search / quick-create / alerts.
   ============================================================================ */
.header-tools {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex: 1 1 auto;
    min-width: 0;
    padding: 0 .5rem;
}

.header-search {
    position: relative;
    flex: 1 1 auto;
    max-width: 520px;
}

.header-search__icon {
    position: absolute;
    left: .7rem;
    top: 50%;
    transform: translateY(-50%);
    color: #9aa6b8;
    font-size: .8rem;
    pointer-events: none;
}

.header-search .form-control {
    padding-left: 2rem;
    height: 36px;
    border-radius: 20px;
    background: #f4f7fb;
    border: 1px solid #e6e9ef;
}

.header-search .form-control:focus {
    background: #fff;
    border-color: var(--wp-teal);
    box-shadow: 0 0 0 .15rem rgba(var(--wp-teal-rgb), .15);
}

.header-search__kbd {
    position: absolute;
    right: .6rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: .62rem;
    line-height: 1;
    padding: .2rem .35rem;
    color: #9aa6b8;
    background: #eef1f6;
    border: 1px solid #e0e5ec;
    border-radius: 5px;
    pointer-events: none;
}

.header-search .form-control:focus ~ .header-search__kbd { display: none; }

.header-search .form-control { padding-right: 3rem; }

.wp-menu .dropdown-item:has(.wp-menu__kbd) { display: flex; align-items: center; }

.wp-menu__kbd {
    margin-left: auto;
    font-size: .62rem;
    line-height: 1;
    padding: .18rem .35rem;
    color: #9aa6b8;
    background: #eef1f6;
    border: 1px solid #e0e5ec;
    border-radius: 5px;
}

.header-search__results {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    display: none;
    z-index: 1050;
    max-height: 380px;
    overflow-y: auto;
    padding: .25rem;
    background: #fff;
    border: 1px solid #e6e9ef;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(16, 24, 40, .12);
}

.header-search__results.show { display: block; }

.header-search__group {
    padding: .4rem .6rem .2rem;
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: #9aa6b8;
}

.header-search__item {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .45rem .6rem;
    border-radius: 8px;
    text-decoration: none;
    color: #2a3b52;
}

.header-search__item:hover,
.header-search__item.active { background: rgba(var(--wp-teal-rgb), .12); }
.header-search__item i { width: 18px; text-align: center; color: var(--wp-teal); }
.header-search__item .hs-label { flex: 1 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.header-search__item .hs-sub { color: #9aa6b8; font-size: .78rem; white-space: nowrap; }
.header-search__empty { padding: .6rem; color: #9aa6b8; text-align: center; }

.header-tools__right {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin-left: auto;
}

/* Even spacing for the header action row (create / bell / divider / avatar),
   matching workplace's .header-tools__right { gap:.4rem }. */
.header-nav {
    align-items: center;
    gap: .4rem;
}

.header-create {
    border-radius: 8px;
    border: none;
    color: #fff;
    background-image: var(--wp-accent-gradient);
    box-shadow: 0 1px 3px rgba(var(--wp-teal-rgb), .35);
}

.header-create:hover,
.header-create:focus,
.header-create:active,
.header-create.show {
    color: #fff;
    background-image: var(--wp-accent-gradient);
    filter: brightness(1.06);
}

.header-bell {
    position: relative;
    background: #f4f7fb;
    border: 1px solid #e6e9ef;
    border-radius: 8px;
    color: #2a3b52;
}

.header-bell:hover,
.header-bell.show {
    color: var(--wp-teal);
    background: rgba(var(--wp-teal-rgb), .12);
    border-color: rgba(var(--wp-teal-rgb), .35);
}

.header-bell__badge {
    position: absolute;
    top: -7px;
    right: -6px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    font-size: .62rem;
    line-height: 16px;
    text-align: center;
    background: #e55353;
    color: #fff;
    border-radius: 9px;
}

.header-alerts { min-width: 240px; }

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

/* ============================================================================
   Modern header dropdown menus (quick-create / alerts / user).
   ============================================================================ */
.wp-menu.dropdown-menu {
    border: 1px solid #e6e9ef;
    border-radius: 14px;
    box-shadow: 0 12px 32px rgba(16, 24, 40, .14);
    padding: .35rem;
    min-width: 220px;
    margin-top: .45rem;
}

.wp-menu.dropdown-menu.wp-menu--compact { min-width: 184px; }

.wp-menu.dropdown-menu.show { animation: wpMenuIn .18s cubic-bezier(.2, .8, .2, 1); }

@keyframes wpMenuIn {
    from { opacity: 0; translate: 0 -7px; }
    to { opacity: 1; translate: 0 0; }
}

.wp-menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .5rem .6rem;
    border-radius: 9px;
    font-size: .88rem;
    color: #2a3b52;
}

.wp-menu .dropdown-item:hover,
.wp-menu .dropdown-item:focus {
    background: rgba(var(--wp-teal-rgb), .12);
    color: #2a3b52;
}

.wp-menu__label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .35rem .6rem .3rem;
    font-size: .66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #9aa6b8;
}

.wp-menu__chip {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-size: .8rem;
    background: rgba(var(--wp-teal-rgb), .12);
    color: var(--wp-teal);
}

.wp-menu__chip--teal { background: rgba(var(--wp-teal-rgb), .12); color: var(--wp-teal); }
.wp-menu__chip--blue { background: rgba(51, 153, 255, .14); color: #3399ff; }
.wp-menu__chip--green { background: rgba(46, 184, 92, .14); color: #2eb85c; }
.wp-menu__chip--amber { background: rgba(var(--wp-amber-rgb), .18); color: #0f766e; }
.wp-menu__chip--red { background: rgba(229, 83, 83, .14); color: #e55353; }

.wp-menu__text { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.wp-menu__title { font-weight: 600; }
.wp-menu__chevron { margin-left: auto; color: #c2cad6; font-size: .72rem; }

.wp-menu__divider { height: 1px; margin: .3rem .2rem; border: 0; background: #eef1f6; }

.wp-menu__identity {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .6rem;
    margin-bottom: .2rem;
    border-radius: 10px;
    background: linear-gradient(90deg, rgba(var(--wp-teal-rgb), .10), rgba(var(--wp-amber-rgb), .08));
}

.wp-menu__identity img { width: 40px; height: 40px; border-radius: 50%; }

/* Card headers: a short primary→accent gradient bar before the title, title
   slightly bolder. Applies app-wide; the ::before is the first inline/flex
   child so it works for plain headers and flex (toolbar) headers alike. */
.card > .card-header {
    position: relative;
    padding-left: 1rem;
    font-weight: 600;
    color: #2a3b52;
}

/* Full-height gradient accent stripe flush against the card's left edge. */
.card > .card-header::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--wp-accent-gradient);
}

/* Profile → Appearance theme swatches */
.theme-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
}

.theme-swatch {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .4rem;
    width: 88px;
    padding: .6rem .4rem;
    border: 1px solid #e2e7ee;
    border-radius: 12px;
    background: #fff;
    cursor: pointer;
    position: relative;
    transition: border-color .15s ease, box-shadow .15s ease, transform .1s ease;
}

.theme-swatch:hover {
    border-color: var(--wp-teal);
    box-shadow: 0 2px 10px rgba(var(--wp-teal-rgb), .18);
    transform: translateY(-1px);
}

.theme-swatch.is-active {
    border-color: var(--wp-teal);
    box-shadow: 0 0 0 2px rgba(var(--wp-teal-rgb), .35);
}

.theme-swatch__chip {
    display: block;
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06);
}

.theme-swatch__label {
    font-size: .78rem;
    font-weight: 600;
    color: #44505f;
}

.theme-swatch__check {
    position: absolute;
    top: 6px;
    right: 8px;
    font-size: .72rem;
    color: var(--wp-teal);
}

/* Initials avatar (shown when no profile image) — themed emerald gradient. */
.avatar.avatar-initials {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--wp-accent-gradient);
    color: #fff;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: .02em;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18);
}

.avatar-md.avatar-initials { font-size: .82rem; }
.wp-menu__identity .avatar-initials { width: 40px; height: 40px; font-size: .9rem; }
.wp-menu__identity .wp-id-name { font-weight: 700; color: #2a3b52; line-height: 1.15; }
.wp-menu__identity .wp-id-mail { font-size: .74rem; color: #7b8aa0; max-width: 180px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.wp-menu .dropdown-item.wp-menu__danger { color: #e55353; }
.wp-menu .dropdown-item.wp-menu__danger:hover { background: rgba(229, 83, 83, .12); color: #e55353; }

.wp-menu__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .35rem;
    padding: 1.1rem .6rem;
    color: #9aa6b8;
    text-align: center;
}

.wp-menu__empty i { font-size: 1.4rem; color: #2eb85c; }

.tp-wrap {
    position: relative;
}

.tp-wrap .form-control {
    padding-right: 2rem;
}

.tp-wrap .tp-icon {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: #768192;
    cursor: pointer;
    pointer-events: auto;
}

.tp-menu {
    position: absolute;
    z-index: 1080;
    top: 100%;
    left: 0;
    right: 0;
    max-height: 200px;
    overflow-y: auto;
    margin-top: 2px;
    background: #fff;
    border: 1px solid #d8dbe0;
    border-radius: 0.375rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

.tp-option {
    padding: 0.35rem 0.75rem;
    font-size: 0.875rem;
    cursor: pointer;
}

.tp-option:hover {
    background: #ebedef;
}

/* ===== Sticky, right-aligned CRUD form footer (offcanvas + modal) ===== */
.wp-form-actions {
    position: sticky;
    bottom: 0;
    z-index: 5;
    display: flex;
    justify-content: flex-end;
    gap: .5rem;
    margin: 1rem -1rem -1rem;
    padding: .75rem 1rem;
    background: var(--cui-body-bg, #fff);
    border-top: 1px dashed var(--cui-border-color, #d8dbe0);
}
/* In the jquery-confirm modal the content pane doesn't scroll (overflow:visible),
   so a sticky footer has nothing to stick to and floats over the last rows.
   Make it a normal static footer at the end of the content instead. */
.jconfirm .wp-form-actions {
    position: static;
    margin: 1rem -15px -15px;
    padding: .75rem 15px;
}

/* ---- Role permissions: collapsible sections + select-all ------------------ */
.perm-toolbar h6 { letter-spacing: .01em; }

/* Role form fits the viewport (no page scroll): the card is a flex column bounded
   to the available height; only the permission list scrolls internally, so the
   role fields (top) and the Save/Cancel footer (bottom) are always visible. */
.role-form-card {
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 165px);   /* viewport minus header/subheader + margins */
    overflow: hidden;
}

.role-form-card > form {
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1 1 auto;
}

.role-form-card .card-body {
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1 1 auto;
    overflow: hidden;
}

/* _Form content: fields fixed, the permission accordion takes the rest + scrolls. */
.role-form-card .card-body > :not(.perm-accordion) { flex: 0 0 auto; }

.perm-accordion {
    border: 1px solid #e6e9ef;
    border-radius: 10px;
    overflow-y: auto;
}

.role-form-card .perm-accordion {
    flex: 1 1 auto;
    min-height: 120px;
}

/* Keep section headers visible while scrolling within the list. */
.perm-group__head {
    position: sticky;
    top: 0;
    z-index: 2;
}

.perm-group + .perm-group { border-top: 1px solid #eef1f6; }

.perm-group__head {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .55rem .75rem;
    background: #f2f8f6;   /* opaque light tint (sticky over scrolling rows) */
}

.perm-group__all { flex: 0 0 auto; }

.perm-group__toggle {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: .6rem;
    border: 0;
    background: transparent;
    padding: 0;
    cursor: pointer;
    text-align: left;
}

.perm-group__title {
    font-weight: 700;
    font-size: .82rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #2a3b52;
}

.perm-group__count {
    font-size: .72rem;
    font-weight: 600;
    color: var(--wp-teal);
    background: rgba(var(--wp-teal-rgb), .12);
    border-radius: 20px;
    padding: .05rem .5rem;
}

.perm-group__chev {
    margin-left: auto;
    font-size: .7rem;
    color: #9aa6b8;
    transition: transform .18s ease;
}

.perm-group__toggle[aria-expanded="true"] .perm-group__chev { transform: rotate(180deg); }

.perm-group__body { padding: 0 .75rem .5rem; }
/* Match the drawer's 1.25rem body padding so the sticky footer spans edge-to-edge. */
#pdOffCanvas .wp-form-actions,
#wisehrOffcanvas .wp-form-actions { margin: 1rem -1.25rem -1.25rem; padding: .85rem 1.25rem; }

/* ===== Announcement banners (sticky + acknowledgement) ===================== */
.announcement-stack {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    margin-bottom: 1rem;
}

.announcement {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: .7rem .9rem;
    border-radius: 10px;
    border: 1px solid transparent;
    box-shadow: 0 2px 8px rgba(16, 24, 40, .06);
}

.announcement__icon {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: .9rem;
    color: #fff;
}

.announcement__content { flex: 1 1 auto; min-width: 0; }

.announcement__title { font-weight: 700; margin-bottom: .1rem; }

.announcement__body { font-size: .9rem; }

.announcement__body p:last-child { margin-bottom: 0; }

.announcement__link {
    display: inline-block;
    margin-top: .35rem;
    font-weight: 600;
    font-size: .85rem;
    text-decoration: none;
}

.announcement__actions { flex: 0 0 auto; display: flex; align-items: center; }

.announcement__min {
    border: 0;
    background: rgba(16, 24, 40, .06);
    color: #475467;
    width: 26px;
    height: 26px;
    border-radius: 6px;
    line-height: 1;
    cursor: pointer;
    transition: background-color .12s ease;
}

.announcement__min:hover { background: rgba(16, 24, 40, .12); }

.announcement__ack {
    border: 0;
    color: #fff;
    font-weight: 600;
    background: var(--wp-teal);
}

.announcement__ack:hover { filter: brightness(1.06); color: #fff; }

/* Priority themes */
.announcement--info {
    background: rgba(var(--wp-teal-rgb), .08);
    border-color: rgba(var(--wp-teal-rgb), .25);
}
.announcement--info .announcement__icon { background: var(--wp-teal); }
.announcement--info .announcement__link { color: var(--wp-teal); }

.announcement--important {
    background: rgba(255, 171, 0, .1);
    border-color: rgba(255, 171, 0, .4);
}
.announcement--important .announcement__icon { background: #f5a623; }
.announcement--important .announcement__link { color: #b76e00; }
.announcement--important .announcement__ack { background: #f5a623; }

.announcement--critical {
    background: rgba(229, 83, 83, .1);
    border-color: rgba(229, 83, 83, .4);
}
.announcement--critical .announcement__icon { background: #e55353; }
.announcement--critical .announcement__link { color: #c0392b; }
.announcement--critical .announcement__ack { background: #e55353; }

/* Minimized sticky banner → compact clickable strip (title only) */
.announcement--min {
    cursor: pointer;
    padding: .35rem .75rem;
    box-shadow: none;
}
.announcement--min .announcement__body,
.announcement--min .announcement__link,
.announcement--min .announcement__min { display: none; }
.announcement--min .announcement__icon { width: 22px; height: 22px; font-size: .75rem; }
.announcement--min .announcement__title { margin-bottom: 0; font-size: .85rem; }
.announcement--min::after {
    content: "\f065";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: .7rem;
    color: #98a2b3;
    margin-left: auto;
    align-self: center;
}

/* ===== Grid filter panel (collapsible, uniform across all grids) =========== */
.grid-filter {
    border-bottom: 1px solid var(--cui-border-color, #e6e9ef);
}

.grid-filter__bar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .5rem;
    padding: .5rem .75rem;
}

.grid-filter__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    margin-left: .1rem;
    border-radius: 20px;
    background: var(--wp-teal);
    color: #fff;
    font-size: .68rem;
    font-weight: 700;
    line-height: 1;
}

.grid-filter__chev {
    font-size: .7rem;
    transition: transform .3s cubic-bezier(.4, 0, .2, 1);
}

/* The .collapse element itself must have NO padding/border — Bootstrap animates its
   height, and padding on it makes the panel "jump" open. Padding lives on the inner. */
.grid-filter__panel {
    background: rgba(var(--wp-teal-rgb), .03);
}

/* Smooth height animation (matches the chevron). Bootstrap adds `.collapsing` while
   in-flight; give it an eased transition rather than the default abrupt one. */
.grid-filter__panel.collapsing {
    transition: height .3s cubic-bezier(.4, 0, .2, 1);
}

.grid-filter__panel-inner {
    padding: .5rem .75rem .75rem;
}

.grid-filter__field .form-label { color: #667085; font-weight: 600; }

.grid-filter__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .5rem;
    margin-top: .75rem;
    padding-top: .6rem;
    border-top: 1px dashed var(--cui-border-color, #e6e9ef);
}

.grid-filter__remember {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    color: #667085;
    cursor: pointer;
}

.grid-filter__remember .form-check-input { margin: 0; }

/* keep select2 filter widgets in step with the sm form controls */
.grid-filter .select2-container .select2-selection--single { height: var(--app-control-height-sm); padding: 0 .5rem; font-size: .875rem !important; }
.grid-filter .select2-container .select2-selection--multiple { min-height: var(--app-control-height-sm); }

/* ===== AND/OR criteria builder (shared: announcements audience + report filters) ===== */
.criteria-group {
    border: 1px solid #e6e9ef;
    border-left: 3px solid var(--wp-teal);
    border-radius: 8px;
    padding: .6rem .7rem;
    margin-bottom: .6rem;
    background: rgba(var(--wp-teal-rgb), .02);
}

.criteria-group .criteria-group { margin-top: .6rem; background: rgba(var(--wp-teal-rgb), .04); }

.criteria-group__head { display: flex; align-items: center; margin-bottom: .5rem; }

.criteria-combinator { font-weight: 700; min-width: 52px; }

.criteria-group__body { display: flex; flex-direction: column; gap: .4rem; }

.criteria-rule { display: flex; align-items: center; gap: .4rem; }

.criteria-rule__field { flex: 0 0 30%; }
.criteria-rule__op { flex: 0 0 16%; }
.criteria-rule__value { flex: 1 1 auto; display: flex; gap: .4rem; }
.criteria-rule__value input, .criteria-rule__value select { width: 100%; }