/* input: run-time error CSS1036: Expected expression, found ''
input: run-time error CSS1036: Expected expression, found ''
input: run-time error CSS1036: Expected expression, found '' */
/*Icon Sets*/
@import url("../icon-fonts/fontawesome-free/css/all.min.css?v=-Yc63ta9nYEECS18iZMcE92JC20");
@import url("../icon-fonts/coreui/css/free.min.css?v=6dNHso4aDq-wshKysIE78g0DAoI");

:root {
    --app-font-size: 0.90rem;
    --app-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    /* Logo palette (available app-wide, not just the sidebar) */
    --wp-teal: #1cc7c9;
    --wp-amber: #ffc21a;
    --wp-accent-gradient: linear-gradient(90deg, var(--wp-teal) 0%, var(--wp-amber) 100%);
    /* Grid tints */
    --wp-grid-header: #eef6f6;
    --wp-grid-stripe: rgba(28, 199, 201, .06);
    --wp-grid-hover: linear-gradient(90deg, rgba(28, 199, 201, .16) 0%, rgba(255, 194, 26, .13) 100%);
    --wp-grid-header-height: 28px; /* matches the card/Filter header bar height */
}

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;
    }
}

/* Brand-accented sidebar (logo palette: teal -> amber) */
.sidebar-dark {
    --wp-teal: #1cc7c9;
    --wp-amber: #ffc21a;
    --wp-accent-gradient: linear-gradient(90deg, var(--wp-teal) 0%, var(--wp-amber) 100%);
}

/* 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: #1b2e4a;
    --wp-sidebar-image: url(../../images/sidenav-bg.jpg);
    background-color: var(--wp-sidebar-bg);
    background-image: linear-gradient(rgba(27, 46, 74, .80), rgba(27, 46, 74, .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: gradient TEXT that echoes the logo (no background) */
    .sidebar-nav .nav-link.active,
    .sidebar-nav .nav-link.active:hover {
        font-weight: 700;
        background: linear-gradient(90deg, #5fe6e8 0%, #ffd24d 100%);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent;
        box-shadow: none;
    }

        .sidebar-nav .nav-link.active .nav-icon-bullet {
            background-color: var(--wp-teal);
        }

/* 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(28, 199, 201, .12) 0%, rgba(255, 194, 26, .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: var(--wp-teal);
    }

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

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

.sidebar-dark {
    --cui-body-bg: #1b2e4a;
    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. ---------------------------------------- */

/* 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);
    }

/* 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(28, 199, 201, 0.12);
    border: 1px solid rgba(28, 199, 201, 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(28, 199, 201, .12);
    color: #0f7c7e;
    border-color: rgba(28, 199, 201, .3);
}

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

.lt-chip-info {
    background: rgba(28, 199, 201, .08);
    color: #2a3b52;
    border-color: rgba(28, 199, 201, .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(28, 199, 201, .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; }

.atl-escalated .atl-dot { background: #f9b115; }
.atl-escalated .atl-card { border-left-color: #f9b115; }

.atl-edited .atl-dot { background: #6f42c1; }
.atl-edited .atl-card { border-left-color: #6f42c1; }

/* ---- 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(255, 194, 26, .12);
}

th.cov-req {
    background: rgba(255, 194, 26, .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: #c47f00;
}

.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(255, 194, 26, .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: #c47f00;
    }

    .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(28, 199, 201, .06), rgba(255, 194, 26, .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: #c47f00;
}

.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;
    }

.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;
    }

.select2-container .select2-selection--single {
    height: calc(2.3rem + 2px);
    padding: 0.30rem 0.25rem;
    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.25rem;
        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: 38px;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
}

    .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;
    color: #1f2937;
    text-align: left;
}
.custom-tooltip .tooltip-inner b { color: #0f172a; }
.custom-tooltip .tooltip-inner div { color: #475569; }

.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(28, 199, 201, .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(28, 199, 201, .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;
}

.header-create {
    border-radius: 8px;
    border: none;
    color: #fff;
    background-image: var(--wp-accent-gradient);
    box-shadow: 0 1px 3px rgba(28, 199, 201, .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(28, 199, 201, .12);
    border-color: rgba(28, 199, 201, .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(28, 199, 201, .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(28, 199, 201, .12);
    color: var(--wp-teal);
}

.wp-menu__chip--teal { background: rgba(28, 199, 201, .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(255, 194, 26, .18); color: #c47f00; }
.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(28, 199, 201, .10), rgba(255, 194, 26, .08));
}

.wp-menu__identity img { width: 40px; height: 40px; border-radius: 50%; }
.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;
}

/* Release plan filter card: uniform control height across select2 + datepicker inputs */
#releaseFilterCard .form-control,
#releaseFilterCard .select2-container--default .select2-selection--single,
#releaseFilterCard .select2-container--default .select2-selection--multiple {
    min-height: 38px;
    height: auto;
}
#releaseFilterCard .form-label { font-weight: 500; }