/*
 * custom.css — CIM application overrides
 *
 * WHY !important IS USED HERE (1,079 declarations):
 *
 * Two root causes create competing specificity problems:
 *
 * 1. SweetAlert2 v9 sets layout/visibility properties via inline styles at runtime
 *    (width, min-height, display on .swal2-popup etc.). Inline styles cannot be
 *    overridden from a stylesheet without !important. The .swal2-popup.swal-edit-form
 *    and .swal-pill-toggle blocks (~lines 2595–2900) legitimately require !important.
 *
 * 2. The base admin template (app.css, 183 KB) uses high-specificity compound
 *    selectors everywhere. Custom layout tweaks in this file had to match or beat
 *    those selectors, and !important was used as a shortcut instead.
 *
 * ROADMAP TO REDUCE THE COUNT:
 * - Category A (SweetAlert overrides, ~200–250 declarations): cannot be removed
 *   without either forking SweetAlert or using JS to set styles. Leave as-is.
 * - Category B (base template overrides, ~600–700 declarations): replace !important
 *   with a body-level prefix: `body .selector { prop: value }` instead of
 *   `.selector { prop: value !important }`. Needs browser visual regression testing.
 * - Category C (CIM custom classes like .icon-action, .stage-weight-slot, etc.,
 *   ~100–150 declarations): these classes don't exist in app.css, so !important
 *   is unnecessary. Safe to strip without testing.
 *
 * Current count: 1,079. Target after B+C cleanup: ~250.
 */

tr th {
    text-transform: uppercase;
}

span.select2-selection__clear {
    opacity: 999;
    z-index: 999;
}

ul.metismenu.left-sidenav-menu.in.mm-show.flex {
    display: flex;
    flex-direction: column;
    height: 100%;
}

p.text-danger {
    text-transform: none;
}

.simplebar-content {
    height: 100%;
    padding: 0 !important;
}

.left-sidenav-menu li.second-last-child {
    margin-top: auto;
    /* margin-bottom: 16px; */
}

ul.metismenu.left-sidenav-menu.in.mm-show,
ul.metismenu.left-sidenav-menu {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.font-size-36 {
    font-size: 36px;
    font-weight: 200;
}

a.nav-link.dropdown-toggle.arrow-none.waves-light.waves-effect {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    padding: 0 !important;
    color: #6e6e6e !important;
}

.select2-container--default
    .select2-selection--multiple
    .select2-selection__choice {
    margin-top: 7px;
    background-color: #e0943f;
    border: 1px solid #e3ebf6;
    color: #ffffff;
}

a.back_link {
    font-size: 20px;
    margin-bottom: 20px !important;
    display: block;
}

svg.feather.feather-bell.align-self-center.topbar-icon {
    display: none;
}

li.select2-selection__choice, li.select2-selection__choice span {
    color: #000 !important;
}

span.grey-span {
    color: grey;
}

h4.page-title {
    align-items: center;
    display: flex;
}

.bg-orange {
    background-color: #ff9800 !important;
}

span.noti-icon-badge.bg-orange {
    position: absolute;
    margin-left: -10px;
    margin-top: -8px;
    border-radius: 50% !important;
    background-color: #f6901f !important;
    width: 17px !important;
    height: 17px !important;
    min-width: unset !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    font-size: 9px !important;
    line-height: 1 !important;
}

button.btn.btn-primary.text-white {
    padding: 10px;
}

.col.welcome-text-btn {
    display: flex;
    justify-content: space-between;
}


.card {
    border-color: transparent;
    background-color: #fbfbfb;
}

.col:has(.view_all_data) {
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
    align-content: center;
    align-items: center;
    margin-block: 0rem !important;
}

.table {
    border-collapse: separate !important;
    border-spacing: 0 0.5rem !important;
    color: #070400;
}
.table-striped > tbody > tr:nth-of-type(even) {
    color: #070400;
}

.table th {
    color: #bdbdbd !important;
    font-size: calc(12rem / 16) !important;
    background-color: transparent !important;
    border-color: transparent !important;
    font-family: Roboto;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 2%;
    text-transform: uppercase;
    white-space: nowrap !important;
}

.view_all_data {
    align-content: center;
    align-items: center;
    display: block;
    margin-block-start: auto;
    margin-block-end: 0;
}

tbody tr {
    background-color: transparent !important;
    box-shadow: 0px 0px 13px 0px #0000001a !important;
    margin-block: 2rem !important;
    /* display: block; */
    border-radius: 8px !important;
}

.table td {
    --border-radius: 8px;
    --padding-inline: 1rem;
    border-color: transparent !important;
    white-space: normal !important;
    word-wrap: break-word !important;
    background-color: white !important;
    font-family: Roboto;
    font-weight: 400;
    font-size: calc(14rem / 16);
    line-height: 1;
    letter-spacing: 0px;

    &:first-child {
        border-top-left-radius: var(--border-radius) !important;
        border-bottom-left-radius: var(--border-radius) !important;
        padding-inline-start: var(--padding-inline) !important;
    }
    &:last-child {
        border-top-right-radius: var(--border-radius) !important;
        border-bottom-right-radius: var(--border-radius) !important;
        padding-inline-end: var(--padding-inline) !important;
    }
}

.table.hasImg td:first-child {
    padding-inline-start: 0.5rem !important;
}

.table-light {
    border-color: transparent !important;
}

.table > :not(:last-child) > :last-child > * {
    border-bottom-color: transparent !important;
}

.table > :not(caption) > * > * {
    box-shadow: none !important;
}

/* Status pills — uniform small-pill size, only colour varies.
   .badge-soft-danger is the reference style; success/warning/primary match. */
.badge.badge-soft-danger,
.badge.badge-soft-warning,
.badge.badge-soft-success,
.badge.badge-soft-primary {
    padding: 5px 12px !important;
    color: #ffffff !important;
    font-weight: 400 !important;
    font-size: calc(10rem / 16) !important;
    border-radius: 20px !important;
    text-transform: none !important;
    line-height: 1.4 !important;
}

.badge.badge-soft-danger  { background-color: #dc3545 !important; }   /* Expired — red */
.badge.badge-soft-warning { background-color: #f6901f !important; }   /* Active (near-expiry) — brand orange */
.badge.badge-soft-success { background-color: #81bf46 !important; }   /* Active (healthy) — brand green */
.badge.badge-soft-primary { background-color: #81bf46 !important; }   /* Generic active — brand green */

/* Outlined pill — green border + text, no background (used for sidebar interview count) */
.badge-outline-success {
    background: #81bf46 !important;
    border: none !important;
    color: #fff !important;
    border-radius: 50% !important;
    font-weight: 600;
    width: 20px;
    height: 20px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-size: 11px;
    line-height: 1;
}

/* CIM Candidate Yes / No pills */
.cim-flag {
    display: inline-block;
    padding: 4px 14px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
}
.cim-flag-yes {
    background-color: #81bf46;
    color: #ffffff;
}
.cim-flag-no {
    background-color: #dc3545;
    color: #ffffff;
}

.badge {
    padding: 10px;
    box-shadow: none;
    font-size: calc(14rem / 16) !important;
}

div.dataTables_wrapper div.dataTables_filter {
    text-align: inline-start;
    max-width: fit-content;
}

.select2-container--default
    .select2-selection--single
    .select2-selection__rendered,
.card-title {
    color: #000000 !important;
}
.select2-container--default .select2-selection--single {
    /* background-color: white !important; */
    border-radius: 8px !important;
    border-color: #d9d9d9 !important;
}
.title-text,
.card-title {
    font-family: Roboto;
}

div:has(> h4.card-title) {
    margin-block: 1rem;
}
/* Inside any card-header, the h4 wrapper needs no extra margin — card-header padding owns the spacing */
.card-header div:has(> h4.card-title) {
    margin-block: 0 !important;
}

/* Tighten card-header bottom padding when tabs are present so the gap
   between the h4 and the search / table content below is proportional.
   Higher specificity (.card .card-header) beats the global rule. */
.card .card-header:has(.pages-lists),
.card .card-header:has(.nav-second-level) {
    padding-bottom: 0.65rem !important;
}
h4.card-title {
    font-size: calc(36rem / 16);
    line-height: 1;
    font-weight: 400 !important;
}

.dataTables_filter input {
    display: block;
    padding-left: 8px;
    padding-right: 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-height: 37px;
}

[type*="search"] {
    --bs-indigo: #6610f2;
    --bs-red: #f5325c;
    --bs-yellow: #ffb822;
    --bs-green: #22b783;
    --bs-teal: #03d87f;
    --bs-cyan: #12a4ed;
    --bs-white: #ffffff;
    --bs-primary: #f6901f;
    --bs-secondary: #9ba7ca;
    --bs-success: #03d87f;
    --bs-info: #12a4ed;
    --bs-warning: #ffb822;
    --bs-danger: #f5325c;
    --bs-light: #f1f5fa;
    --bs-dark: #1d2c48;
    --bs-pink: #fd3c97;
    --bs-purple: #6d81f5;
    --bs-beanred: #fe6b8b;
    --bs-orange: #ff8500;
    --bs-blue: #f6901f;
    --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif,
        "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
        "Noto Color Emoji";
    --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas,
        "Liberation Mono", "Courier New", monospace;
    --bs-gradient: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.15),
        rgba(255, 255, 255, 0)
    );
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    font-size: 0.8125rem;
    letter-spacing: 0.1px;
    word-wrap: break-word;
    --bs-gutter-x: 1rem;
    --bs-gutter-y: 0;
    cursor: pointer;
    -webkit-user-select: none;
    box-sizing: border-box;
    outline: none !important;
    display: block;
    padding-left: 8px;
    padding-right: 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 28px;
    color: #6e6e6e !important;
}

div.dataTables_wrapper div.dataTables_filter {
    align-content: center;
}
table img {
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 10px;
}

td.flex {
    display: flex;
}

.pages-lists,
.nav-second-level {
    --border-bottom-distance: 0.51rem;
    --border-bottom-margin: 0.4rem;
    list-style-type: none;
    display: flex;

    flex-wrap: wrap;
    gap: 1.5rem;
    position: relative;
    margin-block-end: calc(
        var(--border-bottom-distance) + var(--border-bottom-margin)
    );
    padding-inline: 0 !important;
    li {
        position: relative;
        a {
            color: #b6b6b6 !important;
            transition: color 300ms ease;
        }
        &:after {
            content: "";
            height: 1px;
            width: 100%;
            background-color: #b6b6b6 !important;
            position: absolute;
            bottom: calc(var(--border-bottom-distance) * -1);
            left: 0;
            z-index: 1;
            transition: background-color 300ms ease;
        }
        &:is(:hover, :has(.active)) {
            a {
                color: #f6901f !important;
            }
            &::after {
                background-color: #f6901f !important;
            }
        }
    }
    &::after {
        content: "";
        height: 1px;
        width: 100%;
        background-color: #b6b6b6 !important;
        position: absolute;
        bottom: calc(var(--border-bottom-distance) * -1);
    }
}
.nav-second-level .nav-link {
    padding: 0 !important;
}

/* Unified form-label styling — bold, dark, sits above the field. Applies
   to ALL .form-label elements regardless of the form-group context (text,
   select, textarea, radio group, checkbox group, etc.).                  */
form .form-label,
.form-label {
    display: block !important;
    position: static !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #070400 !important;
    background-color: transparent !important;
    margin: 0 0 0.5rem 0 !important;   /* override Bootstrap mb-3 / my-1 */
    left: auto !important;
    top: auto !important;
    line-height: 1.3 !important;
}

/* Plain labels (not Bootstrap grid columns) — strip padding so they sit
   flush with the field below. Labels that ARE grid columns keep their
   col padding so they line up with neighbouring grid columns.           */
.form-label:not([class*="col-"]) {
    padding: 0 !important;
}

/* Form group — plain label-above-field layout (no floating labels). */
form .form-group:not(:has([type="checkbox"], [type="radio"])) {
    --inline-padding: 0.85rem;
    --border-radius: 8px;
    position: relative;

    label {
        display: block;
        position: static;
        font-size: 13px;
        font-weight: 500;
        color: #070400;
        background-color: transparent;
        margin-bottom: 0.4rem;
        padding: 0;
        left: auto;
        top: auto;
    }

    input:not(.select2-search__field),
    textarea {
        border-radius: var(--border-radius) !important;

        &::placeholder {
            color: #a9a9a9;
        }
    }

    /* Legacy Select2 selectors kept for any pages still using it */
    .select2-container .select2-selection--multiple,
    .select2-container--default .select2-selection--single {
        border-radius: var(--border-radius) !important;
        border-color: #d9d9d9;
    }

    .select2-container .select2-selection--single .select2-selection__rendered {
        padding-inline: 0rem !important;
        line-height: 1.5 !important;
        color: #a9a9a9;
    }
}

/* (Legacy gray .form-label rule removed — see unified rule above) */

.form-control {
    background-color: transparent;
    border-color: #6e6e6e !important;
    color: #070400 !important;
    .dataTables_wrapper & {
        background-color: white;
    }
}

.form-select {
    border-color: #6e6e6e !important;
    color: #070400 !important;
}


.dropify-wrapper .dropify-message span.file-icon,
.dropify-wrapper .dropify-message p {
    color: #6e6e6e;
}

.btn-transparent,
.btn-primary,
.btn-primary:disabled,
.btn-primary[disabled],
.swal2-popup .swal2-styled.swal2-styled,
.wizard > .actions a,
.wizard > .actions .disabled a {
    background-color: #070400 !important;
    color: #ffffff !important;
    border: 1.5px solid #070400 !important;
    border-color: #070400 !important;
    text-transform: uppercase;
    font-weight: 500;
    font-size: calc(12rem / 16);
    line-height: 1;
    letter-spacing: 5%;
    text-align: center;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    box-shadow: none !important;
    padding: 12px 18px !important;
    transition:
        background-color 0.25s ease,
        border-color     0.25s ease,
        color            0.25s ease,
        box-shadow       0.25s ease !important;
    &:not(:disabled):not([disabled]):hover {
        background-color: transparent !important;
        border-color: #f6901f !important;
        color: #f6901f !important;
    }
}

.btn-primary:disabled,
.btn-primary[disabled] {
    opacity: 0.85;
    cursor: not-allowed;
}


.wizard > .actions .disabled a {
    opacity: 75%;
}

.dropify-wrapper {
    height: 200px !important;
    border-radius: 8px !important;
    .input {
        border-radius: 8px !important;
    }
}

h5.card-title {
    font-weight: 400;
    font-size: calc(22rem / 16);
    line-height: calc(26rem / 16);
    letter-spacing: 1%;
    color: #070400 !important;
}

.form-check-input {
    height: 1.25em;
    width: 1.25em;
    margin-block: auto;
}

.form-check-input:checked {
    background-color: #f6901f;
    border-color: #f6901f;
}

.form-check-input:focus {
    border-color: #f6901f;
    box-shadow: 0 0 0 0.2rem rgba(246, 144, 31, 0.2);
}

.width-full {
    width: 100%;
}

.form-control-sm {
    border-radius: 8px;
    padding-block: 2px;
}

.dataTables_filter:has(input[type="search"]) {
    max-width: min(400px, 100%) !important;
    label {
        width: 100% !important;
        color: #6e6e6e !important;
        input {
            width: calc(
                100% - 50px
            ); /* 50px is the width of the anonymous inline box having "Search:" text in data-table */
        }
    }
}

.bg-red {
    background-color: red !important;
}

td:has(a > i) {
    display: flex;
    margin-block: auto;
    height: 100%;
    align-content: center;
    flex-wrap: wrap;
    vertical-align: middle;
    display: table-cell;
}

/* ── DataTable sort arrows: right-aligned, FA chevrons ── */
table.dataTable > thead > tr > th:not(.sorting_disabled),
table.dataTable > thead > tr > td:not(.sorting_disabled) {
    padding-left: unset !important;
    padding-right: 24px !important;
    position: relative;
}

/* shared pseudo-element base */
table.dataTable > thead .sorting:before,
table.dataTable > thead .sorting_asc:before,
table.dataTable > thead .sorting_desc:before,
table.dataTable > thead .sorting_asc_disabled:before,
table.dataTable > thead .sorting_desc_disabled:before,
table.dataTable > thead .sorting:after,
table.dataTable > thead .sorting_asc:after,
table.dataTable > thead .sorting_desc:after,
table.dataTable > thead .sorting_asc_disabled:after,
table.dataTable > thead .sorting_desc_disabled:after {
    font-family: 'Font Awesome 6 Free' !important;
    font-weight: 900 !important;
    font-size: 8px !important;
    position: absolute !important;
    right: 6px !important;
    left: unset !important;
    line-height: 1 !important;
    opacity: 0.3;
}

/* up chevron (before = asc indicator) */
table.dataTable > thead .sorting:before,
table.dataTable > thead .sorting_asc:before,
table.dataTable > thead .sorting_desc:before,
table.dataTable > thead .sorting_asc_disabled:before,
table.dataTable > thead .sorting_desc_disabled:before {
    content: "\f077" !important; /* fa-chevron-up */
    bottom: calc(50% + 1px) !important;
}

/* down chevron (after = desc indicator) */
table.dataTable > thead .sorting:after,
table.dataTable > thead .sorting_asc:after,
table.dataTable > thead .sorting_desc:after,
table.dataTable > thead .sorting_asc_disabled:after,
table.dataTable > thead .sorting_desc_disabled:after {
    content: "\f078" !important; /* fa-chevron-down */
    top: calc(50% + 1px) !important;
    bottom: unset !important;
}

/* active state — full opacity on the active direction */
table.dataTable > thead .sorting_asc:before,
table.dataTable > thead .sorting_desc:after {
    opacity: 1;
    color: #070400;
}

body,
.page-title-box .page-title {
    color: #070400;
}

.page-title-box {
    margin-inline: 0.5rem;
}

/* Normalise outer row padding — some pages use "row p-3" which adds
   extra space the dashboard doesn't have. Strip it at the container level
   so all pages match without editing every blade file. */
.page-wrapper .page-content .container-fluid > .row {
    padding: 0 !important;
}

/* Also normalise columns that have m-0 forced on them */
.page-wrapper .page-content .container-fluid > .row > [class*="col"] {
    margin: 0 !important;
}

/* Allow greeting text to show in full — old welcome-text-btn clipped it */
.welcome-text-btn {
    overflow: visible !important;
    min-width: 0;
}

.page-greeting {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    padding-block: 0.75rem;
    overflow: visible;
}

.page-greeting-logo {
    height: 44px;
    width: 44px;
    border-radius: 10px;
    object-fit: cover;
    flex-shrink: 0;
}

.page-greeting-logo-fallback {
    font-size: 44px;
    color: #bdbdbd;
    flex-shrink: 0;
}

.page-greeting-content {
    display: flex;
    flex-direction: column;
    overflow: visible;
    white-space: normal;
}

.page-greeting-date {
    font-size: 12px;
    color: #9e9e9e;
    font-weight: 400;
    letter-spacing: 0.02em;
    margin-bottom: 2px;
}

.page-greeting-text {
    font-size: 14px;
    font-weight: 600;
    color: #4a4a4a;
    line-height: 1.2;
    white-space: normal;
    overflow: visible;
}

.left-sidenav-menu {
    background-color: #fbfbfb;
    padding: 0 !important;
    li {
        position: relative;
        padding-inline: 32px !important;
        &.active {
            background-color: #fefefe;
            ::after {
                content: "";
                position: absolute;
                width: 1px;
                border-radius: 200vmax;
                height: 100%;
                background-color: #f6901f;
                right: 0px;
                top: 0px;
            }
        }
    }
    span {
        max-width: 100%;
        overflow: clip;
        transition: width 300ms ease;
    }
}

.button-menu-mobile {
    position: relative;
    margin-left: auto;
    margin-right: 1rem;
    margin-top: 1rem;
    padding: 0 !important;
    height: 26px;
    width: 26px;
    .hamburger-open,
    .hamburger-close {
        height: 26px;
        width: 26px;
        left: 0;
        top: 0;
        position: absolute;
        transition: opacity 400ms ease;
    }
    .hamburger-open {
        opacity: 1;
        .enlarge-menu & {
            opacity: 0;
        }
    }
    .hamburger-close {
        opacity: 0;
        .enlarge-menu & {
            opacity: 1;
        }
    }
}

.enlarge-menu {
    --menuWidth: 60px;
    .left-sidenav {
        display: flex !important;
        min-width: var(--menuWidth);
        max-width: var(--menuWidth);
        li {
            padding-inline: 20px !important; /*MAGIC NUMBER ... the margines are a mess and we need it perfect right now*/
            margin-inline: auto !important;
        }
        .left-sidenav-menu span {
            max-width: 0%;
        }
        .brand {
            background-color: transparent !important;
        }
    }
    .page-wrapper {
        margin-left: var(--menuWidth);
    }
    .copyright_text {
        display: none;
    }
}

.left-sidenav {
    background-color: #fbfbfb;
    display: flex;
    flex-direction: column;
    .brand {
        text-align: start;
        height: 160px;
        padding-inline: 32px !important;
        .enlarge-menu & {
            padding-inline: 0px !important;
            text-align: center;
        }
    }
}

.card.detail {
    .form-label {
        font-family: Roboto;
        font-weight: 400;
        font-size: 12px;
        line-height: 100%;
        letter-spacing: 5%;
        /* text-transform: uppercase; */
        color: #6e6e6e;
    }
    :has(.form-label + div) .form-group > div {
        font-family: Roboto;
        font-weight: 500;
        font-size: 18px;
        line-height: 1.5;
        letter-spacing: 0px;
        color: #6e6e6e;
        /* text-transform: capitalize; */
    }
}

a {
    color: #070400 !important;
    &:hover {
        color: #f6901f !important;
    }
    .actions & {
        &:hover {
            color: #fff !important;
        }
    }
}

.title-text,
.card-title {
    letter-spacing: 0em !important;
}

.brand .logo {
    img {
        display: inline;
        margin-block: 40px !important;
        .enlarge-menu & {
            display: none;
        }
    }
    img.small_logo {
        display: none;
        height: auto;
        width: 100%;
        padding-inline: 8px;
        .enlarge-menu & {
            display: inline;
        }
    }
}

.data-table-icon-replacement {
    aspect-ratio: auto !important;
    width: 12px !important;
    height: auto !important;
    border-radius: 0 !important;
}

.data-table-icon-replacement {
    transition: filter 300ms ease;
    &:hover {
        filter: brightness(0) saturate(100%) invert(80%) sepia(31%)
            saturate(7498%) hue-rotate(346deg) brightness(99%) contrast(95%);
    }
}

.left-sidenav .menu-content {
    /*idk, logo container height...just overwriting it, didnt do it this way*/
    padding-bottom: 0px !important;
}

.desc_div {
    border: 1px solid var(--Grey, #6e6e6e);
    color: var(--Grey, #6e6e6e);
    font-weight: 400 !important;
    font-size: 14px !important;
    line-height: 100%;
    letter-spacing: 0px;
    border-radius: 8px;
    padding: 10px;
}

.simplebar-offset,
.simplebar-mask,
.simplebar-content-wrapper {
    display: flex;
    flex-direction: column;
    height: 100% !important;
    position: static !important;
    flex-grow: 1;
}
.simplebar-wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
}
.simplebar-placeholder {
    display: none;
}
label.form-check-label {
    color: #000000;
    font-size: 14px !important;
}
.swal2-popup.swal2-modal.swal2-show {
    width: 92% !important;
    max-width: 540px !important;
    height: auto !important;
    min-height: 0 !important;
    background-color: #ffffff !important;
    padding: 1.75rem 1.75rem 1.5rem !important;
    border-radius: 14px !important;
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.18) !important;
    gap: 0.75rem !important;
}

@font-face {
    font-family: "RobotoFlex";
    src: url("../fonts/RobotoFlex-Variable.ttf") format("truetype");
}

h1,
h2,
h3,
h4,
h5,
h6,
.title-text,
.card-title {
    font-family: "RobotoFlex", sans-serif;
}

/* .card-title {
    font-size: 36px;
    font-weight: 400;
} */

.swal2-popup .swal2-title {
    color: #070400 !important;
    font-family: "Roboto", sans-serif !important;
    font-weight: 600 !important;
    font-size: 1.2rem !important;
    line-height: 1.3 !important;
    letter-spacing: 0 !important;
    padding: 0.5rem 0 0 !important;
    margin: 0 !important;
    text-align: center;
}

.swal2-popup .swal2-html-container,
.swal2-popup .swal2-content {
    color: #6b6b6b !important;
    font-family: Roboto, sans-serif !important;
    font-weight: 400 !important;
    font-size: 14px !important;
    line-height: 1.45 !important;
    letter-spacing: 0 !important;
    text-align: center;
    margin: 0.5rem 0 0 !important;
    padding: 0 !important;
}

.swal2-actions {
    margin: 1.25rem 0 0 !important;
    gap: 0.5rem !important;
    justify-content: center !important;
}

.swal2-popup .swal2-styled.swal2-styled,
.swal2-popup .swal2-confirm,
.swal2-popup .swal2-cancel,
.swal2-popup .swal2-deny,
.swal2-popup .swal2-actions .btn {
    border-radius: 25px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    min-height: 42px !important;
    min-width: 220px !important;
    padding: 10px 22px !important;
    margin: 0 !important;
    text-transform: uppercase;
}

.swal2-popup .swal2-icon {
    margin: 0.5rem auto 0 !important;
    width: 64px !important;
    height: 64px !important;
}

.swal2-show,
.swal2-backdrop-show {
    animation: none;
}

.left-sidenav-menu {
    li {
        align-content: unset !important;
        &:second-last-child {
            margin-top: auto !important;
        }
        &:empty {
            display: none !important;
        }
        a {
            align-content: center !important;
            margin-top: 0 !important;
            margin-bottom: 0 !important;
            min-height: 0 !important;
            flex: 1 !important;
            color: #6e6e6e !important;
            font-family: "RobotoFlex";
            font-weight: 500;
            font-size: 16px;
            line-height: 100%;
            letter-spacing: 0px;
        }
        &:is(.active, :hover) a {
            color: #f78f1e !important;
        }
        img {
            filter: brightness(0) saturate(100%) invert(42%) sepia(0%)
                saturate(1319%) hue-rotate(249deg) brightness(99%) contrast(80%);
            width: 28px !important;
            height: 28px !important;
        }
        &:is(.active, :hover) :is(img, svg) {
            filter: brightness(0) saturate(100%) invert(59%) sepia(70%)
                saturate(1417%) hue-rotate(348deg) brightness(101%)
                contrast(94%);
        }
    }
}

/* .row > * {
    padding-right: 0;
    padding-left: 0;
    margin-top: 0;
}
.row {
    row-gap: var(--bs-gutter-y);
    column-gap: var(--bs-gutter-x);
} */

.copyright_text {
    color: #92929d;
    font-family: Roboto;
    font-weight: 400;
    font-size: 12px;
    line-height: 1;
    letter-spacing: 0%;
    margin-block: 2rem;
}

.select2-container--default
    .select2-results__option--highlighted[aria-selected] {
    background-color: #f0f0f0 !important;
    color: #212529 !important;
}
.select2-container--classic .select2-selection--single:focus,
.select2-container--classic.select2-container--open .select2-selection--single,
.select2-container--classic.select2-container--open
    .select2-selection--multiple,
.select2-container--classic.select2-container--open .select2-dropdown {
    border-color: #f78f1e !important;
}

img.me-2 {
    border-radius: 8px !important;
}

:root {
    --navbarWidth: 320px;
}

.margin-reset {
    margin: 0 !important;
}

.card-header {
    &:has(.form-check) {
        padding-block: 0 !important;
    }
    .form-check {
        display: flex;
        gap: 0.5rem;
        input {
            height: 1.25rem;
            width: 1.25rem;
        }
    }
}

.stage_error .form-check {
    margin-bottom: 20px;
}

.form-group:has(.stage_error .form-check) {
    margin-bottom: 0px !important;
}

#tag-suggestions,
[class*="-suggestions"] {
    display: grid;
    overflow-y: auto;
    max-height: 12rem;
    /* grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); */
    background: white;
    padding: 1rem;
    gap: 0.25rem;
    border: 1px solid #6e6e6e;
    border-top: transparent;
    border-radius: 8px;
    color: #6e6e6e;
    .suggestion-item:hover {
        background-color: #f78f1e;
        cursor: pointer;
    }
    option:nth-child(n + 10) {
        display: none;
    }
    &:empty {
        display: none;
    }
}

.select2-container .select2-selection--single .select2-selection__rendered {
    padding-right: 28px !important;
}

.flex {
    display: flex;
}

.wizard > .content > .body input:focus {
    border-color: #f78f1e !important;
}

.wizard > .steps .number {
    background-color: #6e6e6e49;
}

input.form-control.question-weight {
    min-width: 200px;
    min-height: 3rem;
}

.toggle-button {
    align-content: center;
}

.form-check:has(input.form-control.question-weight) {
    width: 100%;
    *:has(> input.form-control.question-weight) {
        margin-left: auto !important;
    }
}

.wizard > .actions a,
.wizard > .actions a:active,
.wizard > .actions a:hover {
}

[class*="_score_weight"] {
    padding-right: 0 !important;
    padding-block: 0 !important;
    .card-header,
    .card-body {
        padding-right: 0 !important;
        .mx-2 {
            padding-right: 0 !important;
        }
    }
}

.card-body[data-stage] {
    padding-right: 0 !important;
}

.padding-none {
    padding: 0 !important;
}

.card-header:has(+ .card-body.d-none) .form-check .card-title {
    opacity: 50%;
}

.text-gray {
    color: #6e6e6e;
}

.candidate-info .form-group {
    font-family: Roboto;
    font-weight: 500;
    font-style: Medium;
    font-size: 18px;
    line-height: 100%;
    letter-spacing: 0px;
    color: #6e6e6e;

    .form-label {
        font-family: Roboto;
        font-weight: 400;
        font-style: Regular;
        font-size: 12px;
        line-height: 100%;
        letter-spacing: 2%;
        text-transform: uppercase;
        color: #6e6e6e;
    }
}

/* div:has(> div > .skill_tab) {
    overflow: clip;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
} */
div:has(> .skill_tab) {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

label#yes-referee {
    color: #fff;
    background-color: #03d87f;
    border-color: #fff;
}

label#yes-referee:hover {
    color: #fff;
    background-color: #03d87f;
    border-color: #fff;
}

label#no-referee:hover {
    color: #f5325c;
    background: #fff;
}

.skill_tab {
    box-shadow: 0px 0px 13px 0px #0000001a;
    font-family: Roboto;
    font-weight: 400;
    font-size: 14px;
    line-height: 100%;
    letter-spacing: 0px;
    color: #070400;
    padding: 10px;
    background-color: #fff;
    display: block;
    width: fit-content;
    border-radius: 8px;
}

.skill_tab_holder:not([data-expanded]) .skill_tab:nth-child(n + 9) {
    display: none;
}
.skill_tab_holder:not([data-expanded]) .skill_tab.skill_tab_toggler {
    display: block;
}

.skill_tab_toggler {
    cursor: pointer;
}

.fa-trash-alt:hover {
    cursor: pointer;
    color: #f78f1e;
}

.bg-white {
    background-color: white !important;
}

/* .send-link-modal,
#create_interview_modal,
#exampleModalLogin { */
.modal {
    .modal-content > * {
        padding: 2rem !important;
    }
    .modal-body {
        overflow: auto;
    }
    .modal-content .modal-header {
        background-color: transparent !important;
    }

    .modal-content .modal-header .modal-title {
        font-family: "RobotoFlex";
        font-weight: 400;
        font-size: 36.65px;
        line-height: 1;
        letter-spacing: 0px;
        color: var(--Grey, #6e6e6e);
    }
    .btn-close {
        border: 1px solid #6e6e6e;
        border-radius: 8px;
        filter: brightness(0%) saturate(100%) invert(43%) sepia(0%) saturate(0%)
            hue-rotate(236deg) brightness(98%) contrast(90%);
    }
    .select2-container {
        width: calc(100% - 1rem) !important;
        margin-inline-end: 1em !important;
    }
    button.submit {
        float: right;
        margin-right: 1em !important;
    }
    .candidateHeader {
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-between;
        color: #6e6e6e;
        opacity: 0.5;
        margin-block: 1rem;
        * {
            max-width: max-content;
        }
        .candidateNo {
            font-family: "RobotoFlex";
            font-weight: 400;
            font-size: 36.65px;
            line-height: 22.5px;
            letter-spacing: 0px;
        }
    }
    .form-group:has(.candidateHeader) {
        padding-inline: 1rem !important;
        background-color: #fff;
        border-radius: 8px;
    }
}

.timeanddate {
    gap: 1rem;
    align-content: center;
}

.outline-primary {
    align-items: center !important;
    align-content: center !important;
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    &.date {
        font-family: "RobotoFlex";
        font-weight: 500;
        font-size: 16px;
        line-height: 100%;
        letter-spacing: 0px;
    }
    &.time {
        font-family: Roboto;
        font-weight: 400;
        font-size: 14px;
        line-height: 100%;
        letter-spacing: 0px;
        border: 1px solid #6e6e6e !important;
        border-radius: 8px !important;
        padding: 6px 10px;
    }
}

.form-check.datetimelist {
    display: flex;
    align-content: center !important;
    gap: 1rem;
    flex-wrap: wrap;
    margin-left: 0 !important;
    opacity: 0.5;
    border-radius: 8px !important;
    padding: 10px 20px !important;
    margin-block: 8px !important;

    .form-check-input {
        margin-left: 0 !important;
    }
    &:has(input[type="radio"]:checked) {
        background-color: #fff !important;
        opacity: 1;
    }
}

.card:has(.card-header.scheduleInterview) {
    background-color: #fff;
    .card-body {
        background-color: #fbfbfb;
        border-radius: 8px !important;
        padding: 30px !important;
    }
}

.card.thankYou {
    * {
        margin: 10px;
    }
    .center-wrapper {
        margin-block: 3rem;
    }
    h3 {
        font-family: "RobotoFlex";
        font-weight: 400;
        font-size: 22.65px;
        line-height: 1.5;
        letter-spacing: 1%;
    }
    time {
        font-family: "RobotoFlex";
        font-weight: 400;
        font-size: 36.65px;
        line-height: 1;
        letter-spacing: 0px;
        color: #6e6e6e;
    }
    p {
        font-family: Roboto;
        font-weight: 400;
        font-size: 12px;
        line-height: 1;
        letter-spacing: 0%;
        text-transform: capitalize;
    }
}

.align-self-top:has(.card.thankYou) {
    align-self: center !important;
}

.separator {
    color: #bdbdbd;
    margin-block: 2rem;
    margin-block-start: calc(2rem - 20px);
}

/* Allow row box-shadows to breathe inside scroll containers */
.table-responsive {
    padding-inline: 13px;
    margin-inline: -13px;
    overflow-x: auto;
}

.dataTables_wrapper {
    overflow: visible !important;
    .row {
        max-width: 100% !important;
    }
}

form#refer_form {
    margin-top: 20px !important;
    margin-left: 0px !important;
}

input.form-control.skill-input {
    font-weight: 800;
}

.question-suggestions,
.skill-suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 9999;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    max-height: 200px;
    overflow-y: auto;
    margin-top: 2px;
}

.question-suggestions:empty,
.skill-suggestions:empty {
    display: none;
}

.question-suggestions .suggestion-item,
.skill-suggestions .suggestion-item {
    display: block;
    padding: 8px 12px;
    cursor: pointer;
    font-size: 13px;
    color: #333;
    border-radius: 4px;
    background: transparent;
}

.question-suggestions .suggestion-item:hover,
.skill-suggestions .suggestion-item:hover {
    background-color: #f0f0f0 !important;
    color: #212529 !important;
}

/* Make the input wrapper the positioning context */
.skill-input ~ .skill-suggestions,
.question-input ~ .question-suggestions {
    width: 100%;
}

/* Password visibility toggle inside swal form fields (mirrors login page) */
.swal-field .swal-pw-wrap {
    position: relative;
}
.swal-field .swal-pw-wrap input {
    width: 100%;
    padding-right: 42px !important;
}
.swal-field .swal-pw-wrap .password-toggle {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    padding: 0;
    color: #6b6b6b;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.swal-field .swal-pw-wrap .password-toggle:hover {
    color: #111111;
}

/* Lift the card containing an open suggestion dropdown above sibling
   cards — otherwise the next card paints over the overflowing list */
#myForm fieldset .card:has(.question-suggestions:not(:empty)),
#myForm fieldset .card:has(.skill-suggestions:not(:empty)) {
    position: relative;
    z-index: 50;
}

/* jquery.steps.css sets overflow:hidden on .wizard and .wizard > .content,
   clipping suggestion dropdowns that open near the bottom of the last card.
   Safe to relax: the "slide" step transition uses jQuery slideUp/Down which
   applies its own inline overflow:hidden to the animating element. */
.wizard,
.wizard > .content {
    overflow: visible !important;
}

.flex-grow-1 {
    position: relative;
}

div#cloneButton {
    width: max-content;
}

/* .form-check-input:checked {
    background-color: #ffffff;
}

.form-check-input:checked[type="checkbox"] {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23000000' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e");
} */

.wizard > .content > .body input:focus {
    border-color: #000000 !important;
}

/* .form-check-input:checked {
    border-color: #b3b3b3 !important;
}

.form-check.datetimelist .form-check-input:checked {
    background-color: #f6901f;
} */

table.dataTable {
    margin: 0 !important;
}

button.btn.btn-sm.btn-soft-primary.yesVal {
    color: #000;
}

button.btn.btn-sm.btn-soft-primary.yesVal {
    padding: 6px 10px;
}

.btn.btn-sm.btn-soft-primary.noVal {
    padding: 6px 10px;
}

h4.skill_name {
    color: #6e6e6e;
}

input.form-control.skill-input{
    padding-block: calc(10rem / 16) !important;
}

@media (max-width: 1316.98px) {
    .page-wrapper .page-content {
        margin-top: 0px !important;
    }
}

@media (max-width: 1024px) {
    .left-sidenav {
        top: 0 !important;
    }
}

@media (max-width: 1316.98px) {
    .left-sidenav {
        margin-top: 0 !important;
    }
}

.pages-lists {
    flex-wrap: wrap;
}

[class*="btn-soft"] {
    font-size: calc(14rem / 16);
}

@media (min-width: 576px) {
    .modal-dialog {
        max-width: min(700px, calc(100% - 2rem)) !important;
    }
}

.modal-dialog {
    .btn-primary[data-repeater-create]:not(:hover) {
        background-color: transparent !important;
        border: 1px solid #cbcbcb !important;
        color: #6e6e6e !important;
    }
}

.dropdown-menu {
    img,
    svg {
        width: 20px !important;
        height: 20px !important;
    }
}

/* Notification dropdown — body font size throughout */
.dropdown-menu .dropdown-item-text,
.dropdown-menu h6.dropdown-item-text {
    font-size: 14px !important;
    font-weight: 500 !important;
}

.dropdown-menu .dropdown-item {
    font-size: 14px !important;
    color: #070400 !important;
}

.dropdown-menu .dropdown-item:hover {
    color: #f6901f !important;
    background-color: transparent !important;
}

.avatar-md.bg-soft-primary {
    background-color: #fbfbfb !important;
}

table.dataTable td {
    height: 30px;
}

.select2-container,
.select2-container * {
    background-color: transparent !important;
}

.select2-dropdown,
.select2-dropdown * {
    background-color: white !important;
}

td:has(.client-renew),
.tabulator-cell:has(.client-renew) {
    display: flex;
    overflow: clip;
    flex-wrap: wrap;
    gap: 2px;
    align-content: center;
    align-items: center;
}


/* Centre the RENEW/RESTORE button horizontally when no badge is in the same cell */
.tabulator-cell:has(.client-renew):not(:has(.badge)) {
    justify-content: center;
}

a.client-renew.btn,
button.client-renew.btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: max-content !important;
    min-height: 0 !important;   /* cancels .btn:not(.btn-close) min-height: 34px */
    height: 32px !important;
    padding: 0 16px !important;
    font-size: 10px !important;
    line-height: 1 !important;
    letter-spacing: 0.05em !important;
}

/* ══════════════════════════════════════════════════════════════════
   Tabulator 6 — card-row theme to match the existing Bootstrap look
   ══════════════════════════════════════════════════════════════════ */

/* Container */
.tabulator {
    border: none !important;
    background: transparent !important;
    font-family: Roboto, sans-serif;
}

/* Header row */
.tabulator-header {
    background: transparent !important;
    border-bottom: none !important;
}

.tabulator-col {
    background: transparent !important;
    border: none !important;
}

.tabulator-col-title {
    color: #bdbdbd !important;
    font-size: calc(12rem / 16) !important;
    font-weight: 400 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    white-space: nowrap !important;
    padding: 0.5rem 1rem !important;
}

/* Sort arrows — match our chevron style */
.tabulator-col.tabulator-sortable .tabulator-col-sorter {
    right: 6px;
}
.tabulator-col.tabulator-sortable .tabulator-col-sorter .tabulator-arrow {
    display: none; /* replaced by FA chevrons in ::after below */
}
.tabulator-col.tabulator-sortable .tabulator-col-title::after {
    font-family: 'Font Awesome 6 Free' !important;
    font-weight: 900 !important;
    font-size: 8px !important;
    margin-left: 5px !important;
    vertical-align: middle !important;
    opacity: 0.3;
    content: "\f077\a\f078";
    white-space: pre;
    display: inline-flex;
    flex-direction: column;
    line-height: 1.2;
}
.tabulator-col.tabulator-sortable[aria-sort="ascending"] .tabulator-col-title::after {
    opacity: 1;
    content: "\f077";
}
.tabulator-col.tabulator-sortable[aria-sort="descending"] .tabulator-col-title::after {
    opacity: 1;
    content: "\f078";
}

/* Body rows — card style matching tbody tr */
.tabulator-row {
    background-color: white !important;
    box-shadow: 0px 0px 13px 0px #0000001a !important;
    border-radius: 8px !important;
    margin-block: 0.5rem !important;
    border: none !important;
    color: #070400;
    font-size: calc(14rem / 16);
    font-weight: 400;
}

.tabulator-row.tabulator-row-even {
    background-color: white !important;
}

.tabulator-row:hover {
    background-color: #fafafa !important;
}

/* Cells */
.tabulator-cell {
    border: none !important;
    padding: 0.75rem 1rem !important;
    vertical-align: middle !important;
    white-space: normal !important;
    word-wrap: break-word !important;
}

/* First cell — left border radius */
.tabulator-row .tabulator-cell:first-child {
    border-top-left-radius: 8px !important;
    border-bottom-left-radius: 8px !important;
}

/* Last cell — right border radius */
.tabulator-row .tabulator-cell:last-child {
    border-top-right-radius: 8px !important;
    border-bottom-right-radius: 8px !important;
}

/* ── Vertical centring for cells containing .action-btns ────────────
   Tabulator cells are inline-block + position:relative. Changing them
   to display:flex breaks the column flow. The "ghost element" pattern
   centres content vertically WITHOUT changing the cell's display:
   a zero-width inline-block sibling with height:100% creates a baseline
   at the cell's vertical middle, and any sibling with
   vertical-align:middle aligns to that baseline.

   Critical: the cell must STRETCH to match row height for the ::before
   height:100% to span the row. align-self:stretch + min-height:100%
   forces this even when the cell's content is shorter than other cells. */
.tabulator-row .tabulator-cell:has(.action-btns) {
    white-space: nowrap;
    align-self: stretch !important;
    height: auto;
}

.tabulator-row .tabulator-cell:has(.action-btns)::before {
    content: '';
    display: inline-block;
    width: 0;
    height: 100%;
    vertical-align: middle;
}

.tabulator-row .tabulator-cell:has(.action-btns) > .action-btns {
    display: inline-flex !important;   /* inline-level so vertical-align works */
    vertical-align: middle !important;
}

/* Action column (last cell) — also centre horizontally */
.tabulator-row .tabulator-cell:last-child:has(.action-btns) {
    text-align: center;
}

/* Legacy .btn-based action icons (kept for any blade not yet migrated) */
.tabulator-row .tabulator-cell:last-child .btn:not(.btn-primary):not(.btn-transparent) {
    width: 22px !important;
    min-width: 22px !important;
    max-width: 22px !important;
    height: 22px !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Header filter inputs */
.tabulator-header-filter input,
.tabulator-header-filter select {
    font-size: calc(12rem / 16) !important;
    border-radius: 6px !important;
    border-color: #e0e0e0 !important;
    padding: 0.25rem 0.5rem !important;
}

/* Search wrapper (injected by table.init.js) */
.tabulator-search-wrapper {
    padding-inline: 13px;
}

/* Placeholder — match app typography (needs 3-class specificity to beat Tabulator base) */
.tabulator .tabulator-placeholder .tabulator-placeholder-contents {
    color: #9a9a9a !important;
    font-family: Roboto, sans-serif !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    letter-spacing: 0.02em;
}

/* Tableholder — explicit y:hidden prevents vertical scrollbar that appears
   when overflow-x is set (CSS spec upgrades y to auto when x is explicit) */
.tabulator-tableholder {
    overflow-x: auto;
    overflow-y: hidden !important;
}

/* ── Tom Select — match Select2 look ───────────────────────────── */
.ts-wrapper {
    font-family: Roboto, sans-serif;
}

.ts-control {
    border-radius: 8px !important;
    border-color: #d9d9d9 !important;
    min-height: 44px !important;
    height: 44px !important;
    font-size: 14px !important;
    padding-inline: 0.85rem !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
}

/* Multi-select: free height + chips wrap to new lines when row is full */
.ts-wrapper:not(.single) .ts-control {
    height: auto !important;
    min-height: 44px !important;
    padding-block: 4px !important;
    flex-wrap: wrap !important;
    align-content: flex-start !important;
}

/* Single-select: selected value always fills the row */
.ts-wrapper.single .ts-control .item {
    flex: 1 1 auto !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    color: #070400 !important;
    opacity: 1 !important;
}

/* Single-select: hide the search input — click to open, no typing needed for short lists */
.ts-wrapper.single .ts-control > input {
    position: absolute !important;
    width: 0 !important;
    height: 0 !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
    min-height: unset !important;
}

.ts-dropdown {
    border-color: #ced4da !important;
    border-radius: 6px !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important;
}

.ts-dropdown .option.active,
.ts-dropdown .option:hover {
    background-color: #f0f0f0 !important;
    color: #070400 !important;
}

/* ═══════════════════════════════════════════════════════════════════
   BOLSTER-INSPIRED REFRESH — Google Sans · Clean Minimal Layout
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1. Google Sans everywhere ────────────────────────────────────── */
body,
h1, h2, h3, h4, h5, h6,
p, span, a, li, td, th,
label, input, select, textarea, button,
.title-text, .card-title,
.btn, .badge, .form-label, .form-control, .form-select,
.left-sidenav-menu a,
.table th, .table td,
.tabulator-col-title, .tabulator-cell,
.ts-control, .ts-dropdown,
.select2-selection, .select2-results__option,
.copyright_text, .swal2-popup * {
    font-family: "Google Sans", "Roboto", sans-serif !important;
}

/* All form inputs use Google Sans to match the rest of the UI */
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]),
textarea,
select,
.form-control {
    font-family: "Google Sans", "Roboto", sans-serif !important;
}

h1, h2, h3, h4, h5, h6,
.title-text, .card-title {
    font-family: "Google Sans Display", "Google Sans", "Roboto", sans-serif !important;
}

/* SweetAlert2 popups use the same font as the body — match the edit popup */
.swal2-popup,
.swal2-popup *,
.swal2-popup .swal2-title,
.swal2-popup h2.swal2-title {
    font-family: "Google Sans", "Roboto", sans-serif !important;
}
.swal2-popup .swal2-textarea {
    font-family: "Google Sans", "Roboto", sans-serif !important;
    font-size: 14px !important;
    color: #070400 !important;
    border: 1px solid #6e6e6e !important;
    border-radius: 4px !important;
    padding: 0.375rem 0.75rem !important;
    background-color: transparent !important;
    box-shadow: none !important;
    width: 100% !important;
}

/* ── 2. Page background + unified base font size ─────────────────── */
body {
    background-color: #fafbfc !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
}

/* ── 3. Sidebar: 240 px, tighter padding, cleaner nav ────────────── */
:root {
    --navbarWidth: 240px;
}

.left-sidenav {
    min-width: 240px !important;
    max-width: 240px !important;
    width: 240px !important;
}

.left-sidenav .brand {
    height: 120px !important;
    padding-inline: 20px !important;
}

.brand .logo img:not(.small_logo) {
    height: 64px !important;
    margin-block: 32px !important;
    margin-top: 32px !important;
    margin-bottom: 32px !important;
}

.left-sidenav-menu li {
    padding-inline: 20px !important;
    min-height: 50px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}

.left-sidenav-menu a {
    display: flex !important;
    align-items: center !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    flex: 1 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding-block: 0 !important;
    gap: 6px !important;
    border-radius: 0 !important;
    width: 100% !important;
}

/* Active + hover: full-width stripe on the li, no radius */
.left-sidenav-menu li.active,
.left-sidenav-menu li:hover {
    background-color: #fff5ea !important;
    border-radius: 0 !important;
}

/* Never put the background on the a itself */
.left-sidenav-menu li.active > a,
.left-sidenav-menu li > a:hover {
    background-color: transparent !important;
}

.left-sidenav-menu li img {
    width: 20px !important;
    height: 20px !important;
}

.page-wrapper {
    margin-left: 240px !important;
}

.enlarge-menu {
    --menuWidth: 52px;
}

.enlarge-menu .left-sidenav {
    min-width: 52px !important;
    max-width: 52px !important;
    width: 52px !important;
}

.enlarge-menu .left-sidenav-menu li {
    padding-inline: 0 !important;
}

.enlarge-menu .left-sidenav-menu li > a {
    justify-content: center !important;
    padding-inline: 0 !important;
    gap: 0 !important;
}

.enlarge-menu .left-sidenav-menu li > a span,
.enlarge-menu .left-sidenav-menu li > a .menu-arrow {
    display: none !important;
}

.enlarge-menu .left-sidenav-menu li > a .menu-icon,
.enlarge-menu .left-sidenav-menu li > a svg.menu-icon {
    width: 20px !important;
    height: 20px !important;
    flex-shrink: 0 !important;
}

.enlarge-menu .page-wrapper {
    margin-left: 52px !important;
}

/* ── 4. Cards: white bg, subtle border, lighter shadow ───────────── */
.card {
    background-color: #ffffff !important;
    border: 1px solid #ebebeb !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05) !important;
    margin-block: 1rem !important;
    margin-inline: 0.5rem !important;
    padding: 0 !important;           /* let card-header / card-body own the padding */
    border-radius: 10px !important;
    overflow: visible;               /* must be visible so Tom Select / Select2 dropdowns are not clipped */
}

/* Uniform inner padding — same on every page */
.card .card-header {
    background-color: transparent !important;
    border-bottom: none !important;
    padding: 0.875rem 1.5rem 0.65rem !important;
}

.card .card-body {
    padding: 0rem 1.5rem 1.5rem 1.5rem !important;
}

/* Cards that use neither header nor body (bare content) */
.card:not(:has(.card-header)):not(:has(.card-body)) {
    padding: 1.25rem 1.5rem !important;
}

/* ── 5. Table rows: lighter shadow ──────────────────────────────── */
tbody tr {
    box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.07) !important;
    margin-block: 0.3rem !important;
}

/* ── 6. Tabulator rows: same treatment ──────────────────────────── */
.tabulator-row {
    box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.07) !important;
    margin-block: 0.3rem !important;
}

/* ── Vertical middle-align all table cell content ────────────────── */
.table td,
.table th {
    vertical-align: middle !important;
}

/* ── 7. Typography scale ─────────────────────────────────────────── */
h4.card-title {
    font-size: 22px !important;
    font-weight: 600 !important;
    padding-top: 12px !important;
}

h5.card-title {
    font-size: 17px !important;
    font-weight: 600 !important;
}

.table th,
.tabulator-col-title {
    font-size: 11px !important;
    letter-spacing: 0.06em !important;
}

.table td,
.tabulator-cell {
    font-size: 14px !important;
}

.btn:not(.btn-close) {
    font-size: 12px !important;
    font-weight: 500 !important;
    min-height: 42px !important;
    border-width: 1.5px !important;
    border-radius: 25px !important;
}

/* Small / icon action buttons — transparent, no height constraint */
.btn-sm {
    min-height: unset !important;
    padding: 4px 8px !important;
    border-width: 1px !important;
    background-color: transparent !important;
    color: #070400 !important;
    border-color: transparent !important;
    box-shadow: none !important;
    text-transform: none !important;
}

.btn-sm:not(:disabled):hover {
    background-color: transparent !important;
    border-color: transparent !important;
    color: #f6901f !important;
}

.badge {
    font-size: 12px !important;
}

.form-label {
    font-size: 14px !important;
}

.form-control, .form-select, .ts-control {
    font-size: 14px !important;
}

/* ── 8. Unified form-field appearance ──────────────────────────────
   Single source of truth for input/select/Tom Select sizing so every
   field on every form aligns at the same baseline.                    */
.form-control,
.form-select,
.ts-wrapper.single .ts-control {
    height: 44px !important;
    min-height: 44px !important;
    padding: 0.5rem 0.85rem !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
    border: 1.5px solid #d9d9d9 !important;
    border-radius: 8px !important;
    background-color: #ffffff !important;
    color: #070400 !important;
    box-sizing: border-box !important;
}

/* Tom Select copies the original <select>'s classes onto .ts-wrapper,
   so the wrapper picks up the .form-control border. The inner .ts-control
   already draws the field, so neutralise the wrapper to avoid a
   double-border / oversized field box. */
.ts-wrapper.form-control,
.ts-wrapper.form-select,
.ts-wrapper.select2,
.ts-wrapper.custom-select {
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* Tag-pill inputs (multi TomSelect on <input class="form-control">):
   restore the visible border on the outer wrapper — higher specificity wins.
   align-items: flex-start on the WRAPPER positions .ts-control at the top. */
.ts-wrapper.form-control.multi {
    border: 1.5px solid #d9d9d9 !important;
    border-radius: 8px !important;
    min-height: 96px !important;
    background: #fff !important;
    padding: 0 !important;
    align-items: flex-start !important;
}
.ts-wrapper.form-control.multi.focus {
    border-color: #f6901f !important;
    box-shadow: 0 0 0 3px rgba(246, 144, 31, 0.12) !important;
}
.ts-wrapper.form-control.multi .ts-control {
    border: none !important;
    box-shadow: none !important;
    height: auto !important;
    min-height: unset !important;
    width: 100% !important;
    background: transparent !important;
    padding: 0.5rem 0.85rem !important;
}

/* Textareas: keep multi-line behaviour — only enforce min-height */
textarea.form-control {
    height: auto !important;
    min-height: 100px !important;
    padding: 0.6rem 0.85rem !important;
    line-height: 1.45 !important;
}

/* Multi-select Tom Select: grows with chips, but never shorter than 44px */
.ts-wrapper:not(.single) .ts-control {
    height: auto !important;
    min-height: 44px !important;
    padding: 0.35rem 0.6rem !important;
}

/* Focus state: orange border + soft glow for ALL field types */
.form-control:focus,
.form-select:focus,
.ts-wrapper.focus .ts-control,
.ts-control.focus {
    border-color: #f6901f !important;
    box-shadow: 0 0 0 3px rgba(246, 144, 31, 0.12) !important;
}

/* Uniform spacing between fields */
.form-group {
    margin-bottom: 1rem;
}

/* Strip leftover Bootstrap `mb-3` from inline-styled selects so they
   don't add an extra 16px gap that some adjacent fields lack. */
.form-group select.mb-3,
.form-group .select2.mb-3 {
    margin-bottom: 0 !important;
}

/* ── 9. Copyright text ───────────────────────────────────────────── */
.copyright_text,
.login-footer {
    margin-block: 0 !important;
    padding: 12px 20px !important;
    font-size: 13px !important;
    color: #92929d;
    font-family: "Google Sans", "Roboto", sans-serif;
    font-weight: 400;
    text-align: center;
    line-height: 1.5 !important;
    flex-shrink: 0;
}

.copy-sym {
    font-size: 1.2em;
    vertical-align: -0.25em;
    padding-block: 0 !important;
}

/* ── 10. Tabulator header alignment ─────────────────────────────── */
.tabulator-header .tabulator-col {
    padding: 0 !important;
}
.tabulator-header .tabulator-col .tabulator-col-content {
    padding: 0 !important;
}
.tabulator-col-title {
    padding: 0.5rem 0 !important;
    padding-left: 1rem !important;
    padding-right: 24px !important;
}

/* ── 11. Filter row + search box — single row ────────────────────── */
.tabulator-search-wrapper {
    padding-inline: 0 !important;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px !important;
    width: 100% !important;
}

.tabulator-filter-row {
    display: contents;
}

.tabulator-filter-select {
    font-size: 13px !important;
    font-family: "Google Sans", "Roboto", sans-serif !important;
    flex: 1 1 160px !important;
    max-width: 220px !important;
    height: 38px !important;
    padding-block: 0 !important;
    border-color: #d9d9d9 !important;
    border-radius: 8px !important;
    color: #6e6e6e !important;
    background-color: #fff !important;
}

.tabulator-search-input {
    flex: 1 1 180px !important;
    max-width: 100% !important;
    font-size: 14px !important;
    font-family: "Google Sans", "Roboto", sans-serif !important;
    padding-right: 36px !important;
    height: 38px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%23bdbdbd' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 15px 15px;
}

/* ── 12. Remove Tabulator horizontal lines ───────────────────────── */
.tabulator {
    border: none !important;
}
.tabulator-header {
    border-bottom: none !important;
    border-top: none !important;
}
.tabulator-tableholder {
    border-top: none !important;
}

/* Package / description columns — allow cell to grow in height */
.tabulator-row .tabulator-cell.col-wrap {
    white-space: normal !important;
    height: auto !important;
    overflow: visible !important;
}
/* Inner wrapper handles the 2-line clamp — cell display stays intact */
.tabulator-cell.col-wrap .col-wrap-inner {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    white-space: normal;
    word-break: break-word;
    line-height: 1.4;
}
/* Allow rows to grow in height to fit 2-line cells */
.tabulator-row {
    min-height: 40px !important;
    height: auto !important;
}

/* ── 13. Sort arrows — single chevron by default ─────────────────── */
table.dataTable > thead .sorting:before,
table.dataTable > thead .sorting_asc_disabled:before,
table.dataTable > thead .sorting_desc_disabled:before {
    display: none !important;
}
table.dataTable > thead .sorting:after {
    opacity: 0.3;
    top: 50% !important;
    bottom: unset !important;
    transform: translateY(-50%);
}
table.dataTable > thead .sorting_asc:before {
    display: block !important;
    opacity: 1;
    bottom: calc(50% - 4px) !important;
}
table.dataTable > thead .sorting_asc:after {
    display: none !important;
}
table.dataTable > thead .sorting_desc:before {
    display: none !important;
}
table.dataTable > thead .sorting_desc:after {
    opacity: 1;
    top: calc(50% + 1px) !important;
}

.tabulator-col.tabulator-sortable .tabulator-col-title::after {
    content: "\f078" !important;
    opacity: 0.35;
    white-space: normal;
    display: inline;
    flex-direction: unset;
    line-height: 1;
    vertical-align: middle;
    margin-left: 5px;
}
.tabulator-col.tabulator-sortable[aria-sort="ascending"] .tabulator-col-title::after {
    content: "\f077" !important;
    opacity: 1;
}
.tabulator-col.tabulator-sortable[aria-sort="descending"] .tabulator-col-title::after {
    content: "\f078" !important;
    opacity: 1;
}

/* ── Sidebar: icon-text gap, logo alignment, text clip fix ────────── */

/* Logo: align with nav text labels (icon width + gap offset) */
.left-sidenav .brand {
    display: flex !important;
    align-items: center !important;
    padding-left: 48px !important;
    padding-right: 20px !important;
}

/* Nav link: tighter gap, proper flex centering */
.left-sidenav-menu li a {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

/* Fix descender clipping (g, y, p in "Management", "Logout") */
.left-sidenav-menu span {
    line-height: 1.5 !important;
    padding-block: 2px !important;
}

/* ── Smooth button hover transitions ─────────────────────────────── */

/* Base transition — actual interactive buttons only */
.btn,
a.btn {
    transition: background-color 0.22s ease, border-color 0.22s ease, color 0.22s ease, transform 0.18s ease !important;
    cursor: pointer;
}

/* Generic .btn hover — colour handled in btn-primary / btn-sm rules; no lift */

/* Sidebar nav links */
.left-sidenav-menu li a {
    transition: color 0.15s ease, background-color 0.15s ease !important;
}

/* Table row links */
.tabulator-row a {
    transition: color 0.15s ease !important;
}
.tabulator-row a:hover {
    color: #f6901f !important;
}

/* ── Page transition: smooth fade-in on every tab/page switch ─────── */
.page-wrapper {
    animation: pageFadeIn 0.22s ease both;
}
@keyframes pageFadeIn {
    from { opacity: 0; transform: translateY(5px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Skeleton shimmer for DataTables placeholder rows ─────────────── */
@keyframes shimmer {
    from { background-position: 200% center; }
    to   { background-position: -200% center; }
}
.dt-skeleton td {
    padding-block: 12px !important;
    border-color: transparent !important;
    background-color: white !important;
    box-shadow: none !important;
}
.dt-skeleton td .sk {
    height: 13px;
    border-radius: 6px;
    background: linear-gradient(90deg, #f0f0f0 25%, #e6e6e6 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: shimmer 1.4s infinite linear;
}

/* DataTable wrapper fades in after skeleton is removed */
.dataTables_wrapper {
    transition: opacity 0.25s ease;
}
.dataTables_wrapper.dt-pending {
    opacity: 0;
}

/* ── SweetAlert2 edit-form popup — match app design system ────── */
.swal2-popup.swal-edit-form,
.swal2-popup.swal-edit-form.swal2-modal.swal2-show {
    display: block !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    width: 92% !important;
    max-width: 540px !important;
    height: auto !important;
    min-height: 0 !important;
    background-color: #ffffff !important;
    padding: 1.75rem 1.75rem 1.5rem !important;
    border-radius: 14px !important;
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.18) !important;
    font-family: Roboto, sans-serif !important;
    color: #070400 !important;
    gap: 0 !important;
    grid-template-columns: none !important;
    grid-template-rows: none !important;
    grid-template-areas: none !important;
}

.swal2-popup.swal-edit-form .swal2-title {
    display: block !important;
    font-size: 1.2rem !important;
    font-weight: 600 !important;
    color: #070400 !important;
    text-align: left !important;
    padding: 0 !important;
    margin: 0 0 1.25rem !important;
    line-height: 1.3 !important;
}

.swal2-popup.swal-edit-form .swal2-content,
.swal2-popup.swal-edit-form .swal2-html-container {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
    font-size: 14px !important;
    color: #070400 !important;
    overflow: visible !important;
}

.swal2-popup.swal-edit-form .swal-form {
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem !important;
    overflow: visible !important;
}

.swal2-popup.swal-edit-form .swal-field {
    display: flex !important;
    flex-direction: column !important;
    text-align: left !important;
    overflow: visible !important;
    position: relative !important;
}

.swal2-popup.swal-edit-form .swal-field label {
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #070400 !important;
    margin: 0 0 0.4rem !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

.swal2-popup.swal-edit-form .swal-field input:not(.form-check-input),
.swal2-popup.swal-edit-form .swal-field textarea {
    width: 100% !important;
    padding: 0.5rem 0.85rem !important;
    font-size: 14px !important;
    font-family: "Google Sans", "Roboto", sans-serif !important;
    color: #070400 !important;
    background-color: #ffffff !important;
    border: 1.5px solid #d9d9d9 !important;
    border-radius: 8px !important;
    outline: none !important;
    transition: border-color 0.18s ease, box-shadow 0.18s ease !important;
    box-sizing: border-box !important;
    box-shadow: none !important;
}

.swal2-popup.swal-edit-form .swal-field input:not(.form-check-input) {
    height: 42px !important;
}

.swal2-popup.swal-edit-form .swal-field input::placeholder,
.swal2-popup.swal-edit-form .swal-field textarea::placeholder {
    font-family: "Google Sans", "Roboto", sans-serif !important;
    color: #b0b0b0 !important;
}

.swal2-popup.swal-edit-form .swal-field textarea {
    min-height: 72px !important;
    line-height: 1.45 !important;
    resize: vertical !important;
}

.swal2-popup.swal-edit-form .swal-field input:not(.form-check-input):focus,
.swal2-popup.swal-edit-form .swal-field textarea:focus {
    border-color: #f6901f !important;
    box-shadow: 0 0 0 3px rgba(246, 144, 31, 0.12) !important;
}

.swal2-popup.swal-edit-form .swal-field input:not(.form-check-input).is-invalid,
.swal2-popup.swal-edit-form .swal-field textarea.is-invalid {
    border-color: #dc3545 !important;
}

.swal2-popup.swal-edit-form .swal-field #swal-iw-stages.is-invalid {
    outline: 1px solid #dc3545;
    border-radius: 6px;
    padding: 4px;
}


/* ── Pill toggle (External Recruiter selector) ───────────────────────────── */
.swal-pill-toggle {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.55rem !important;
    padding: 0.4rem 1rem 0.4rem 0.4rem !important;
    border: none !important;
    border-radius: 999px !important;
    background: #fff !important;
    cursor: pointer !important;
    font-size: 14px !important;
    font-family: Roboto, sans-serif !important;
    font-weight: 500 !important;
    color: #444 !important;
    box-shadow: none !important;
    outline: none !important;
    line-height: 1 !important;
    width: fit-content !important;
    transition: border-color 0.18s, color 0.18s !important;
}
.swal-pill-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 22px !important;
    height: 22px !important;
    border-radius: 50% !important;
    background: transparent !important;
    border: 1.5px solid #aaa !important;
    color: transparent !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    flex-shrink: 0 !important;
    transition: background 0.18s, border-color 0.18s, color 0.18s !important;
    line-height: 1 !important;
}
.swal-pill-toggle.active {
    color: #222 !important;
}
.swal-pill-toggle.active .swal-pill-icon {
    background: #f6901f !important;
    border-color: #f6901f !important;
    color: #fff !important;
}

/* Bootstrap toggle inside swal forms — fully isolated from generic input rules */
.swal2-popup.swal-edit-form .swal-field .form-check-input {
    width: 3.5em !important;
    height: 1.75em !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 2em !important;
    box-shadow: none !important;
    background-color: #dee2e6 !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23f6901f'/%3e%3c/svg%3e") !important;
    background-position: left center !important;
    background-repeat: no-repeat !important;
    margin-top: 0 !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    transition: background-position 0.15s ease-in-out, background-color 0.15s ease-in-out !important;
}
.swal2-popup.swal-edit-form .swal-field .form-check-input:checked {
    background-color: #f6901f !important;
    border-color: transparent !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e") !important;
    background-position: right center !important;
}
.swal2-popup.swal-edit-form .swal-field .form-check-input:focus {
    border-color: transparent !important;
    box-shadow: none !important;
}
.swal2-popup.swal-edit-form .swal-field .form-check {
    display: flex !important;
    align-items: center !important;
    gap: 0 !important;
    padding-left: 0 !important;
}
.swal2-popup.swal-edit-form .swal-field .form-check .form-check-input {
    margin-left: 1.5rem !important;
}
.swal2-popup.swal-edit-form .swal-field .form-check-label {
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #070400 !important;
    cursor: pointer !important;
}

/* Error span — hidden until populated by JS, no reserved space */
.swal2-popup.swal-edit-form .swal-error {
    font-size: 12px !important;
    color: #dc3545 !important;
    line-height: 1.3 !important;
}

.swal2-popup.swal-edit-form .swal-error:empty {
    display: none !important;
    margin: 0 !important;
}

.swal2-popup.swal-edit-form .swal-error:not(:empty) {
    display: block !important;
    margin-top: 0.35rem !important;
}

.swal2-popup.swal-edit-form .swal-hint {
    display: block !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    color: #888 !important;
    margin-top: 0.35rem !important;
}

.swal2-popup.swal-edit-form .swal2-actions {
    display: flex !important;
    margin: 1.5rem 0 0 !important;
    padding: 0 !important;
    gap: 0.5rem !important;
    justify-content: center !important;
    width: 100% !important;
}

.swal2-popup.swal-edit-form .swal2-actions .btn {
    min-width: 220px !important;
    font-size: 12px !important;
    min-height: 40px !important;
}

/* Centered confirmation variant */
.swal2-popup.swal-edit-form.swal-confirm .swal2-title,
.swal2-popup.swal-edit-form.swal-confirm .swal2-html-container {
    text-align: center !important;
}
.swal2-popup.swal-edit-form.swal-confirm .swal2-actions {
    justify-content: center !important;
}

/* ── App toast notification — top-right slide-in, auto-dismiss ─── */
/* ── App toast (custom, framework-free) ──────────────────────────── */
.app-toast-stack {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    pointer-events: none;
}

.app-toast {
    --app-toast-color: #81bf46;
    --app-toast-duration: 4500ms;
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    width: max-content;
    max-width: 420px;
    padding: 12px 16px;
    background: #ffffff;
    border: 1px solid #ececec;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    font-family: "Google Sans", "Roboto", sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #070400;
    pointer-events: auto;
    cursor: default;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 0.22s ease, transform 0.22s ease;
}

.app-toast.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.app-toast.is-leaving {
    opacity: 0;
    transform: translateY(-6px);
}

.app-toast-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    color: var(--app-toast-color);
}

.app-toast-icon svg {
    width: 22px;
    height: 22px;
    display: block;
}

.app-toast-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.35;
}

.app-toast-bar {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
    width: 100%;
    background: var(--app-toast-color);
    transform-origin: left center;
    transform: scaleX(1);
}

.app-toast.is-counting .app-toast-bar {
    transform: scaleX(0);
    transition: transform var(--app-toast-duration) linear;
}

.app-toast.is-paused .app-toast-bar {
    transition: none;
}

.app-toast-success { --app-toast-color: #81bf46; }
.app-toast-error   { --app-toast-color: #dc3545; }
.app-toast-warning { --app-toast-color: #e89234; }
.app-toast-info    { --app-toast-color: #2b8acd; }


/* ── Tag pills (used in table cells for many-to-many lists) ─────── */
.spec-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.spec-pill {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    background: #f4f5f7;
    color: #4a4a4a;
    border: 1px solid #e3e5e8;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
}

/* Reserves space for a missing action icon so other icons align across rows */
.action-btn-placeholder,
.icon-action-placeholder {
    visibility: hidden;
    pointer-events: none;
}

/* ── .icon-action: clean clickable table-cell icon
   No button chrome, no fixed height, naturally inline. Plays well with
   the .action-btns flex container and the cell vertical-centring CSS. */
.icon-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: none;
    background: transparent;
    color: #070400;
    cursor: pointer;
    text-decoration: none;
    line-height: 1;
    transition: color 0.15s ease, filter 0.15s ease;
}

.icon-action:hover {
    color: #f6901f;
    text-decoration: none;
}

.icon-action > * {
    width: 15px;
    height: 15px;
    line-height: 1;
    transition: filter 0.15s ease;
}

.icon-action > i {
    font-size: 14px;
    width: auto;
    height: auto;
}

.icon-action > img {
    object-fit: contain;
    display: block;
}

/* <img>-based icons (e.g. Edit.svg) don't respond to color, so swap to the
   brand orange via CSS filter on hover. The filter recipe is generated for
   #f6901f starting from black: brightness(0) saturate(100%) sets the
   image fully black, then the invert/sepia/saturate/hue-rotate chain re-
   colours it. Generated via https://codepen.io/sosuke/pen/Pjoqqp.       */
.icon-action:hover > img {
    filter: brightness(0) saturate(100%) invert(58%) sepia(78%)
            saturate(1888%) hue-rotate(360deg) brightness(98%) contrast(101%);
}

/* .action-btns wrapping icon-action items — simple inline flex row */
.action-btns:has(.icon-action) {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

/* ── Generic usage gauge: progress bar + numeric counter ────────
   Reusable wherever a "used / total" pattern needs a visual cue.
   Apply .usage-gauge for the base, then .usage-gauge-low/mid/high
   for the colour band (driven by CSS variable --usage-color).      */
.usage-gauge {
    --usage-color: #81bf46;          /* green by default (low) */
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 90px;
    max-width: 140px;
}

.usage-gauge-mid  { --usage-color: #e89234; }   /* orange at 60-89% */
.usage-gauge-high { --usage-color: #dc3545; }   /* red at 90%+ */

.usage-gauge-bar {
    position: relative;
    height: 6px;
    background-color: #eef0f3;
    border-radius: 999px;
    overflow: hidden;
}

.usage-gauge-fill {
    position: absolute;
    inset: 0 auto 0 0;
    background-color: var(--usage-color);
    border-radius: 999px;
    transition: width 0.3s ease;
}

.usage-gauge-count {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.usage-gauge-count strong {
    font-weight: 600;
    color: var(--usage-color);
    font-size: 13px;
}

.usage-gauge-sep {
    color: #c5c8cd;
    font-weight: 400;
}

.usage-gauge-total {
    color: #6e6e6e;
    font-weight: 500;
}

/* ── FORCE smooth transition on .btn-primary / .btn-transparent ───
   Bootstrap sets .btn { transition: none } under prefers-reduced-motion
   and some compiled CSS also resets it. Use high-specificity selectors
   here so this declaration wins regardless of cascade order.            */
a.btn-primary,
a.btn-transparent,
button.btn-primary,
button.btn-transparent,
.btn.btn-primary,
.btn.btn-transparent {
    transition-property: background-color, border-color, color, box-shadow !important;
    transition-duration: 0.3s !important;
    transition-timing-function: ease !important;
}

/* Ensure RENEW (and any anchor styled .btn-primary in tables) animates */
a.client-renew.btn,
.tabulator-cell a.btn-primary,
.tabulator-cell a.btn-transparent {
    transition-property: background-color, border-color, color, box-shadow !important;
    transition-duration: 0.3s !important;
    transition-timing-function: ease !important;
}

/* ── Tabulator pagination — match app theme, centred ────────────── */
.tabulator-footer {
    background-color: transparent !important;
    border-top: 1px solid #ececec !important;
    padding: 12px 16px !important;
    margin-top: 8px !important;
    font-family: "Google Sans", "Roboto", sans-serif !important;
    font-size: 13px !important;
    color: #6b6b6b !important;
    text-align: center !important;
}

.tabulator-footer-contents {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    width: 100% !important;
}

.tabulator-paginator {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    width: auto !important;
    flex: 0 1 auto !important;
}

.tabulator-page-counter {
    color: #6b6b6b !important;
    font-size: 13px !important;
}

.tabulator-pages {
    display: inline-flex !important;
    gap: 4px !important;
    margin: 0 !important;
}

.tabulator-page {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 32px !important;
    height: 32px !important;
    padding: 0 10px !important;
    background-color: transparent !important;
    color: #070400 !important;
    border: 1.5px solid #e0e0e0 !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease !important;
    margin: 0 !important;
}

.tabulator-page:not(:disabled):not(.disabled):hover {
    border-color: #f6901f !important;
    color: #f6901f !important;
}

.tabulator-page.active,
.tabulator-page[aria-current="true"] {
    background-color: #070400 !important;
    border-color: #070400 !important;
    color: #ffffff !important;
}

.tabulator-page.disabled,
.tabulator-page:disabled {
    opacity: 0.4 !important;
    cursor: not-allowed !important;
    color: #b0b0b0 !important;
}

.tabulator-page.disabled:hover {
    border-color: #e0e0e0 !important;
    color: #b0b0b0 !important;
}

/* ── Pill-style checkbox / radio choices ──────────────────────────
   Wrap a group of <div class="form-check">..</div> children in
   <div class="pill-choices">..</div> to render each option as a
   clickable pill that highlights when its input is :checked. Works
   with both checkboxes (multi-select) and radios (single-select). */
.pill-choices {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    padding: 0;
    margin: 0;
}

.pill-choices .form-check,
.pill-choices .form-check.form-check-inline {
    display: inline-block;
    margin: 0 !important;
    padding: 0 !important;
    min-height: 0;
}

/* Hide the native input but keep it focusable for keyboard users */
.pill-choices .form-check-input {
    position: absolute !important;
    opacity: 0 !important;
    width: 1px !important;
    height: 1px !important;
    margin: 0 !important;
    pointer-events: none !important;
}

.pill-choices .form-check-label {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 18px;
    border: 1.5px solid #d9d9d9;
    border-radius: 12px;
    background-color: #ffffff;
    color: #070400;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.3;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.22s ease, border-color 0.22s ease, color 0.22s ease;
}

.pill-choices .form-check-label:hover {
    border-color: #f6901f;
    color: #f6901f;
}

/* Selected: orange border + orange text + tiny orange check badge top-right */
.pill-choices .form-check-input:checked + .form-check-label {
    background-color: #fff8f1;
    border-color: #f6901f;
    color: #f6901f;
    padding-right: 30px;            /* leave room for badge */
}

.pill-choices .form-check-input:checked + .form-check-label::after {
    content: '';
    position: absolute;
    top: -8px;
    right: -8px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #f6901f;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 12px 12px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.pill-choices .form-check-input:checked + .form-check-label:hover {
    background-color: #fff1e0;
    border-color: #e07f0e;
    color: #e07f0e;
}

.pill-choices .form-check-input:focus-visible + .form-check-label {
    box-shadow: 0 0 0 3px rgba(246, 144, 31, 0.18);
}

.pill-choices .form-check-input:disabled + .form-check-label {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Other Options block — vertical breathing room above the title */
.other-options {
    margin-top: 1.5rem;
}

.other-options .card-title {
    margin-bottom: 0.75rem;
}

/* ── Tom Select multi-select chips — keep each on a single line ─────
   By default each chip's text wraps because the chip has no nowrap.
   Pin each chip to its content width and let the container wrap whole
   chips to new lines instead of breaking chip text.                   */
.ts-wrapper:not(.single) .ts-control > div,
.ts-wrapper.multi .ts-control > div {
    display: inline-flex !important;
    align-items: center !important;
    flex: 0 0 auto !important;
    max-width: 100% !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    padding: 4px 10px !important;
    margin: 3px 6px 3px 0 !important;
    background-color: #f4f5f7 !important;
    color: #4a4a4a !important;
    border: 1px solid #e3e5e8 !important;
    border-radius: 999px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
}

/* Remove button (small × beside each chip) — subtle, orange on hover */
.ts-wrapper:not(.single) .ts-control > div .remove,
.ts-wrapper.multi .ts-control > div .remove {
    margin-left: 6px !important;
    padding: 0 2px !important;
    border: none !important;
    color: #8a8a8a !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}

.ts-wrapper:not(.single) .ts-control > div .remove:hover,
.ts-wrapper.multi .ts-control > div .remove:hover {
    color: #f6901f !important;
    background: transparent !important;
}

/* Multi-select control — generous padding for the chip rows */
.ts-wrapper:not(.single) .ts-control,
.ts-wrapper.multi .ts-control {
    padding: 6px 10px !important;
    min-height: 44px !important;
    height: auto !important;
    align-content: center !important;
    align-items: center !important;
}

/* ── Client Detail popup ─────────────────────────────────────────── */
/* Specificity boost — must out-rank the generic .swal2-popup.swal2-modal.swal2-show
   rule (3 classes, max-width 540px) defined earlier in this file. */
.swal2-popup.swal2-modal.swal-client-detail,
.swal2-popup.swal2-modal.swal-client-detail.swal2-show,
.swal2-popup.swal-client-detail {
    width: 95% !important;
    max-width: 1400px !important;
    padding: 0 !important;
    border-radius: 16px !important;
    text-align: left !important;
    font-family: "Google Sans", "Roboto", sans-serif !important;
    font-size: 14px !important;        /* matches body { font-size: 14px } */
    height: auto !important;
    min-height: 0 !important;
}

.swal-client-detail .swal2-html-container {
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
    overflow: hidden !important;
    font-size: inherit !important;
}

.swal-client-detail .cd-wrap {
    max-height: 80vh;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Full-width field spanning all grid columns */
.cd-field-full {
    grid-column: 1 / -1;
    min-width: 0;
}

/* Divider between experience entries */
.cd-divider {
    border: none;
    border-top: 1px solid #efefef;
    margin: 1rem 0;
}

.swal-client-detail .swal2-close {
    color: #6b6b6b !important;
    font-size: 32px !important;
    top: 16px !important;
    right: 20px !important;
}

.cd-wrap {
    padding: 1.5rem 2.25rem 1.75rem;
    color: #070400;
    font-family: "Google Sans", "Roboto", sans-serif;
    font-size: 14px;            /* standard body */
    line-height: 1.5;
}

.cd-loading, .cd-error {
    padding: 3rem 2rem;
    text-align: center;
    color: #6b6b6b;
    font-size: 15px;
}
.cd-error { color: #b32424; }

.cd-header {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #ececec;
    margin-bottom: 1rem;
}

.cd-logo {
    width: 64px;
    height: 64px;
    border-radius: 14px;
    object-fit: contain;
    background: #ffffff;
    border: 1px solid #ececec;
    flex-shrink: 0;
}

.cd-logo-placeholder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #f6901f;
    color: #ffffff;
    font-size: 28px;
    font-weight: 600;
    text-transform: uppercase;
    border: none;
}

.cd-name {
    font-size: 24px;
    font-weight: 600;
    color: #070400;
    line-height: 1.25;
}

.cd-meta {
    margin-top: 4px;
    font-size: 14px;
    color: #6b6b6b;
}

.cd-section {
    margin-top: 1.1rem;
}

.cd-section-title {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #888;
    margin-bottom: 0.55rem;
}

/* Wider popup → use 4-column grids for short fields, 3 for contacts */
.cd-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.85rem 2rem;
}

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

@media (max-width: 700px) {
    .cd-grid, .cd-grid.cd-grid-3 { grid-template-columns: 1fr; }
}

.cd-field {
    min-width: 0;
}

.cd-label {
    font-size: 13px;
    color: #888;
    margin-bottom: 0.3rem;
}

.cd-value {
    font-size: 14px;            /* standard body */
    font-weight: 500;
    color: #070400;
    line-height: 1.5;
    word-wrap: break-word;
}

/* Stacked rows (each item full width, label left + value right) */
.cd-stack {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.cd-field-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    padding: 0.5rem 0;
    border-bottom: 1px solid #f0f0f0;
}

.cd-field-row:last-child {
    border-bottom: none;
}

.cd-row-label {
    color: #4a4a4a;
    font-size: 14px;
    font-weight: 500;
    flex: 1 1 auto;
    min-width: 0;
}

.cd-row-value {
    flex: 0 0 auto;
}

.cd-empty {
    color: #b0b0b0;
    font-weight: 400;
}

.cd-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.cd-pill {
    display: inline-flex;
    align-items: center;
    padding: 5px 14px;
    background: #f4f5f7;
    color: #4a4a4a;
    border: 1px solid #e3e5e8;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    word-break: break-word;
    min-width: 0;
    max-width: 100%;
}

/* Global alias used by candidate/applicant detail popups */
.cand-pill {
    background: #efefef;
    color: #444;
    font-weight: 500;
    font-size: 12px;
    padding: 0.28em 0.7em;
    border-radius: 999px;
    display: inline-block;
    white-space: nowrap;
}

.cd-yesno {
    display: inline-flex;
    align-items: center;
    padding: 3px 12px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
}

.cd-yesno-yes {
    background: #fff8f1;
    color: #f6901f;
    border: 1px solid #f6901f;
}

.cd-yesno-no {
    background: #f5f5f5;
    color: #6b6b6b;
    border: 1px solid #e0e0e0;
}

/* Detail popup — compact width variant.
   Must out-rank both the generic .swal2-popup.swal2-modal.swal2-show rule
   (3 classes, 540px) AND the .swal2-popup.swal2-modal.swal-client-detail.swal2-show
   rule (4 classes, 1400px) defined earlier. */
.swal2-popup.swal2-modal.swal-client-detail.swal-detail-compact,
.swal2-popup.swal2-modal.swal-client-detail.swal-detail-compact.swal2-show,
.swal2-popup.swal2-modal.swal-detail-compact,
.swal2-popup.swal-detail-compact {
    max-width: 592px !important;
    width: 95% !important;
}

/* Compact variant — 15% wider (680px) — used for interviewer detail popup */
.swal2-popup.swal2-modal.swal-client-detail.swal-detail-compact-md,
.swal2-popup.swal2-modal.swal-client-detail.swal-detail-compact-md.swal2-show,
.swal2-popup.swal2-modal.swal-detail-compact-md,
.swal2-popup.swal-detail-compact-md {
    max-width: 680px !important;
    width: 95% !important;
}

/* Keep inner content full-width — DON'T collapse the grids; the data
   block should be the only thing that constrains itself, not the layout. */
.swal-detail-compact .cd-wrap {
    padding: 1.25rem 1.5rem 1.5rem !important;
}

/* Block field — spans the full row width below a grid (e.g. Description) */
.cd-field-block {
    margin-top: 1rem;
    grid-column: 1 / -1;    /* if ever used inside a grid */
}

.cd-field-block .cd-value {
    line-height: 1.55;
}

/* Wide variant for forms with many fields (Add/Edit Subscription Package) */
.swal2-popup.swal2-modal.swal-edit-form.swal-edit-form-wide,
.swal2-popup.swal-edit-form.swal-edit-form-wide {
    max-width: 920px !important;
}

/* Two-column grid layout inside swal forms (use .swal-field-full to span).
   Must out-rank the .swal-form { display: flex; flex-direction: column }
   rule that targets ALL .swal-form elements in edit popups.              */
.swal2-popup.swal-edit-form .swal-form.swal-form-grid,
.swal-form.swal-form-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    flex-direction: unset !important;
    gap: 1rem 1.5rem !important;
    width: 100% !important;
}

.swal-form.swal-form-grid .swal-field-full {
    grid-column: 1 / -1 !important;
}

/* Radio rows — small native radios styled to brand colour */
.swal-radios {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 1.25rem !important;
    padding-top: 0.4rem !important;
    align-items: center !important;
}

.swal-radios label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #070400 !important;
    cursor: pointer !important;
    line-height: 1.2 !important;
    background: transparent !important;
    border: none !important;
}

.swal-radios input[type="radio"] {
    appearance: none !important;
    -webkit-appearance: none !important;
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    min-height: 16px !important;
    max-width: 16px !important;
    max-height: 16px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1.5px solid #b0b0b0 !important;
    border-radius: 50% !important;
    background: #ffffff !important;
    cursor: pointer !important;
    position: relative !important;
    flex-shrink: 0 !important;
    transition: border-color 0.18s ease !important;
    box-shadow: none !important;
}

.swal-radios input[type="radio"]:hover,
.swal-radios input[type="radio"]:checked {
    border-color: #f6901f !important;
}

.swal-radios input[type="radio"]:checked::after {
    content: '';
    position: absolute;
    inset: 2.5px;
    border-radius: 50%;
    background: #f6901f;
}

.swal-radios input[type="radio"]:focus-visible {
    outline: 2px solid rgba(246, 144, 31, 0.4) !important;
    outline-offset: 2px !important;
}

.swal-radios span {
    line-height: 1.2 !important;
    white-space: nowrap !important;
}

/* Textarea inside swal form */
.swal2-popup.swal-edit-form .swal-field textarea {
    width: 100% !important;
    padding: 0.5rem 0.85rem !important;
    font-size: 14px !important;
    font-family: Roboto, sans-serif !important;
    color: #070400 !important;
    background-color: #ffffff !important;
    border: 1.5px solid #d9d9d9 !important;
    border-radius: 8px !important;
    outline: none !important;
    transition: border-color 0.18s ease, box-shadow 0.18s ease !important;
    box-sizing: border-box !important;
    box-shadow: none !important;
    min-height: 60px !important;
    line-height: 1.45 !important;
    resize: vertical !important;
}

.swal2-popup.swal-edit-form .swal-field textarea:focus {
    border-color: #f6901f !important;
    box-shadow: 0 0 0 3px rgba(246, 144, 31, 0.12) !important;
}

/* Native <select> styling inside swal form — match Tom Select look */
.swal2-popup.swal-edit-form .swal-field select {
    width: 100% !important;
    height: 44px !important;
    padding: 0.5rem 0.85rem !important;
    font-size: 14px !important;
    font-family: Roboto, sans-serif !important;
    color: #070400 !important;
    background-color: #ffffff !important;
    border: 1.5px solid #d9d9d9 !important;
    border-radius: 8px !important;
    outline: none !important;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23070400' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 14px;
    padding-right: 2.25rem !important;
}

.swal2-popup.swal-edit-form .swal-field select:focus {
    border-color: #f6901f !important;
    box-shadow: 0 0 0 3px rgba(246, 144, 31, 0.12) !important;
}

/* ── Subscription form popup tweaks ────────────────────────────── */

/* X close button — applies to all edit-form popups (wide + standard) */
.swal-edit-form .swal2-close,
.swal-edit-form-wide .swal2-close {
    color: #6b6b6b !important;
    font-size: 32px !important;
    width: 32px !important;
    height: 32px !important;
    line-height: 1 !important;
    top: 12px !important;
    right: 16px !important;
    position: absolute !important;
    box-shadow: none !important;
    outline: none !important;
}

.swal-edit-form .swal2-close:hover,
.swal-edit-form-wide .swal2-close:hover {
    color: #f6901f !important;
    background: transparent !important;
}

/* Actions left-aligned for this popup (override the centered default) */
.swal2-popup.swal-edit-form.swal-actions-left .swal2-actions {
    justify-content: flex-start !important;
    margin-top: 1.5rem !important;
    padding-left: 0 !important;
}

/* Force perfectly round radios — bump specificity to beat any other rules */
.swal2-popup.swal-edit-form .swal-radios input[type="radio"],
.swal2-popup .swal-radios input[type="radio"] {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    min-height: 18px !important;
    max-width: 18px !important;
    max-height: 18px !important;
    flex: 0 0 18px !important;
    aspect-ratio: 1 / 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1.5px solid #b0b0b0 !important;
    border-radius: 50% !important;
    background: #ffffff !important;
    background-image: none !important;
    cursor: pointer !important;
    position: relative !important;
    flex-shrink: 0 !important;
    transition: border-color 0.18s ease !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    line-height: 1 !important;
    vertical-align: middle !important;
    display: inline-block !important;
}

.swal2-popup.swal-edit-form .swal-radios input[type="radio"]:hover,
.swal2-popup.swal-edit-form .swal-radios input[type="radio"]:checked,
.swal2-popup .swal-radios input[type="radio"]:hover,
.swal2-popup .swal-radios input[type="radio"]:checked {
    border-color: #f6901f !important;
    background-color: #ffffff !important;
}

.swal2-popup.swal-edit-form .swal-radios input[type="radio"]:checked::after,
.swal2-popup .swal-radios input[type="radio"]:checked::after {
    content: '' !important;
    position: absolute !important;
    inset: 3px !important;
    border-radius: 50% !important;
    background: #f6901f !important;
    display: block !important;
}

/* ── Role Detail page (jobs/detail.blade.php) ─────────────────────
   Single unified card with clear sections + clean typography.       */
.role-detail {
    padding: 0.5rem 0.25rem;
}

.role-detail-section {
    margin-bottom: 2rem;
}

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

.role-detail-title {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #888;
    margin: 0 0 1rem 0;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid #ececec;
}

/* Top section: Role information grid */
.role-detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.25rem 1.75rem;
}

.role-detail-field {
    min-width: 0;
}

.role-detail-label {
    font-size: 12px;
    color: #888;
    font-weight: 500;
    margin-bottom: 0.3rem;
    text-transform: none;
    letter-spacing: 0;
}

.role-detail-value {
    font-size: 14px;
    font-weight: 500;
    color: #070400;
    line-height: 1.45;
    word-wrap: break-word;
}

/* Question blocks: each competency category is its own card */
.role-detail-block {
    margin-bottom: 1rem;
    padding: 1rem 1.25rem;
    background-color: #fafbfc;
    border: 1px solid #ececec;
    border-radius: 10px;
}

.role-detail-block:last-child {
    margin-bottom: 0;
}

.role-detail-block-title {
    font-size: 13px;
    font-weight: 600;
    color: #070400;
    margin-bottom: 0.5rem;
}

.role-detail-block-body {
    color: #4a4a4a;
    font-size: 14px;
    line-height: 1.55;
}

/* Question lists — clean bullets with breathing room */
.role-detail-list {
    margin: 0;
    padding-left: 1.1rem;
    list-style: disc;
}

.role-detail-list li {
    margin-bottom: 0.35rem;
    color: #4a4a4a;
}

.role-detail-list li:last-child {
    margin-bottom: 0;
}

.role-detail-list-inner {
    padding-left: 1.25rem;
    margin-top: 0.35rem;
}

/* Skill groupings (Hard / Soft Skills with skill name + questions) */
.role-detail-skill {
    margin-bottom: 0.85rem;
}

.role-detail-skill:last-child {
    margin-bottom: 0;
}

.role-detail-skill-name {
    font-size: 13px;
    font-weight: 600;
    color: #070400;
    margin-bottom: 0.2rem;
}

.role-detail-empty {
    color: #b0b0b0;
    font-style: italic;
    font-size: 13px;
}

@media (max-width: 640px) {
    .role-detail-grid {
        grid-template-columns: 1fr;
        gap: 0.85rem;
    }
}

/* ── Role Detail popup ──────────────────────────────────────────────
   Reuses the .swal-client-detail base styling; adds an accordion for
   the Role Questions section (one collapsible per competency).        */
.swal2-popup.swal2-modal.swal-client-detail.swal-role-detail,
.swal2-popup.swal-role-detail {
    max-width: 980px !important;
}

.rd-header {
    align-items: flex-start !important;
}

.rd-header-actions {
    margin-left: auto;
    padding-top: 4px;
}

.rd-pdf-btn {
    min-height: 36px;
    padding: 8px 16px !important;
    font-size: 12px !important;
}

/* ── Accordion ────────────────────────────────────────────────────── */
.rd-accordion {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.rd-accordion-item {
    border: 1px solid #ececec;
    border-radius: 10px;
    background-color: #ffffff;
    overflow: hidden;
    transition: border-color 0.18s ease, background-color 0.18s ease;
}

.rd-accordion-item[open] {
    border-color: #d9d9d9;
    background-color: #fafbfc;
}

.rd-accordion-summary {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1.1rem;
    cursor: pointer;
    user-select: none;
    list-style: none;
    font-family: "Google Sans", "Roboto", sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #070400;
    transition: color 0.15s ease;
}

/* Strip browser default chevron */
.rd-accordion-summary::-webkit-details-marker { display: none; }
.rd-accordion-summary::marker { display: none; content: ''; }

.rd-accordion-summary:hover {
    color: #f6901f;
}

.rd-accordion-title {
    flex: 1 1 auto;
    min-width: 0;
}

.rd-accordion-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 8px;
    background-color: #f4f5f7;
    color: #4a4a4a;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    flex-shrink: 0;
}

.rd-accordion-item[open] .rd-accordion-count {
    background-color: #fff8f1;
    color: #f6901f;
}

.rd-accordion-chevron {
    flex-shrink: 0;
    transition: transform 0.22s ease;
    color: #888;
}

.rd-accordion-item[open] .rd-accordion-chevron {
    transform: rotate(180deg);
    color: #f6901f;
}

.rd-accordion-body {
    padding: 0 1.1rem 1rem 1.1rem;
    color: #4a4a4a;
    font-size: 14px;
    line-height: 1.55;
    border-top: 1px solid #ececec;
}

.rd-accordion-item:not([open]) .rd-accordion-body {
    display: none;
}

.rd-q-list {
    margin: 0.75rem 0 0 0;
    padding-left: 1.2rem;
    list-style: disc;
}

.rd-q-list li {
    margin-bottom: 0.35rem;
}

.rd-q-list li:last-child {
    margin-bottom: 0;
}

.rd-empty {
    margin-top: 0.75rem;
    color: #b0b0b0;
    font-style: italic;
    font-size: 13px;
}

/* Skill groupings inside the accordion (Hard / Soft Skills) */
.rd-skill {
    margin: 0.85rem 0;
}

.rd-skill:first-child {
    margin-top: 0.75rem;
}

.rd-skill:last-child {
    margin-bottom: 0;
}

.rd-skill-name {
    font-size: 13px;
    font-weight: 600;
    color: #070400;
    margin-bottom: 0.25rem;
}

.rd-skill .rd-q-list {
    margin-top: 0.25rem;
    padding-left: 1.4rem;
}

/* ── Tom Select inside the Question popup ───────────────────────────────────── */
.swal2-popup.swal-edit-form .swal-field .ts-wrapper {
    width: 100% !important;
}
.swal2-popup.swal-edit-form .swal-field .ts-control {
    border: 1.5px solid #d9d9d9 !important;
    border-radius: 8px !important;
    min-height: 44px !important;
    padding: 5px 10px !important;
    font-size: 14px !important;
    font-family: Roboto, sans-serif !important;
    box-shadow: none !important;
    transition: border-color 0.18s ease, box-shadow 0.18s ease !important;
}
.swal2-popup.swal-edit-form .swal-field .ts-wrapper.focus .ts-control {
    border-color: #f6901f !important;
    box-shadow: 0 0 0 3px rgba(246,144,31,0.12) !important;
}
/* Tom Select dropdown inside the Question popup — sits above buttons, not clipped */
.swal2-popup.swal-edit-form .ts-dropdown {
    z-index: 9999 !important;
    position: absolute !important;
}

/* ── Custom Question modal (#qmodal) — looks like .swal-edit-form ─────────── */
.qmodal {
    position: fixed;
    inset: 0;
    z-index: 1060;
    align-items: flex-start;
    justify-content: center;
    padding-top: 6vh;
}
.qmodal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: -1;
}
.qmodal-popup {
    position: relative;
    background: #fff;
    border-radius: 14px;
    width: 92%;
    max-width: 540px;
    padding: 1.75rem 1.75rem 1.5rem;
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.18);
    font-family: Roboto, sans-serif;
    color: #070400;
}
.qmodal-close {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    font-size: 26px;
    line-height: 1;
    color: #888;
    cursor: pointer;
    border-radius: 6px;
    transition: color 0.15s ease, background 0.15s ease;
}
.qmodal-close:hover { color: #f6901f; background: #f7f7f7; }
.qmodal-title {
    font-size: 1.2rem;
    font-weight: 600;
    color: #070400;
    text-align: center;
    margin: 0 0 1.25rem;
    line-height: 1.3;
}
.qmodal-popup .swal-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.qmodal-popup .swal-field {
    display: flex;
    flex-direction: column;
    text-align: left;
}
.qmodal-popup .swal-field label {
    font-size: 13px;
    font-weight: 500;
    color: #070400;
    margin: 0 0 0.4rem;
}
.qmodal-popup .swal-field input {
    width: 100%;
    height: 42px;
    padding: 0.5rem 0.85rem;
    font-size: 14px;
    color: #070400;
    background: #fff;
    border: 1.5px solid #d9d9d9;
    border-radius: 8px;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.qmodal-popup .swal-field input:focus {
    border-color: #f6901f;
    box-shadow: 0 0 0 3px rgba(246, 144, 31, 0.12);
}
.qmodal-popup .swal-field input.is-invalid { border-color: #dc3545; }
.qmodal-popup .swal-error {
    font-size: 12px;
    color: #dc3545;
    margin-top: 0.25rem;
}
.qmodal-popup .swal-error:empty { display: none; }
.qmodal-actions {
    display: flex;
    justify-content: flex-start;
    margin-top: 1.5rem;
}

/* ── Table-cell action button (e.g. Restore on Deleted Recruiters) ───
   Overrides the global btn-primary 12px/18px padding so the button
   fits neatly inside a Tabulator row without inflating row height.   */
.tabulator-row .tabulator-cell .btn.btn-primary {
    padding: 5px 16px !important;
    font-size: 11px !important;
    letter-spacing: 0.04em !important;
}

/* ── Prevent horizontal page overflow ──
   .page-wrapper is a flex item with min-width:auto — it expands with content.
   min-width:0 lets it shrink. overflow:hidden is on page-content only so that
   position:fixed Bootstrap modals and backdrops are not clipped. */
.page-wrapper { min-width: 0; }
/* overflow-x: clip (not hidden) — clips horizontal overflow without creating a scroll
   container, so position:fixed modals/backdrops are still relative to the viewport. */
.page-wrapper .page-content { max-width: 100%; overflow-x: clip; }

/* ── Interview scheduling modal ── */
.interview-modal .modal-header { padding: 1.25rem 1.5rem 0.75rem !important; }
.interview-modal .modal-body   { padding: 0 1.5rem 1.5rem !important; }
.interview-modal-title {
    font-size: 18px !important;
    font-weight: 600 !important;
    color: #070400 !important;
    font-family: "Google Sans", "Roboto", sans-serif !important;
    line-height: 1.3 !important;
}
.interview-modal-close {
    background: none; border: none; outline: none; cursor: pointer;
    font-size: 26px; line-height: 1; color: #6b6b6b;
    padding: 0 2px; transition: color 0.2s;
    position: absolute; top: 16px; right: 20px;
}
.interview-modal-close:hover { color: #f6901f; }
/* 2-col grid: date | time-with-trash */
.interview-slot-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 10px; }
.interview-slot-time-wrap { display: flex; flex-direction: column; }
/* Time input + trash on the same line, input fills remaining width */
.interview-slot-time-inner { display: flex; align-items: center; gap: 10px; }
.interview-slot-time-inner .form-control { flex: 1; min-width: 0; }
/* First row: reserve trash space, keep invisible so time input width stays consistent */
[data-repeater-list] [data-repeater-item]:first-child .interview-delete-btn { visibility: hidden; }
.interview-delete-btn { cursor: pointer; color: #bbb; font-size: 15px; flex-shrink: 0; transition: color 0.2s; }
.interview-delete-btn:hover { color: #f6901f; }

/* ── Past Summaries compact layout ── */
.summary-entry { padding: 0.75rem 0; }
.summary-entry + .summary-entry { border-top: 1px solid #f0f0f0; }
.summary-row { display: flex; gap: 0.75rem; padding: 2px 0; font-size: 14px; line-height: 1.5; }
.summary-label { min-width: 90px; color: #888; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; padding-top: 2px; flex-shrink: 0; }
.summary-value { color: #222; }

/* ── Clickable Tabulator rows ── */
.tabulator-row[data-detail] { cursor: pointer; }
.tabulator-row[data-detail]:hover .tabulator-cell { background-color: #fdf6ee; }

/* ── Outlined pill buttons (dashboard invite popup + candidate detail) ── */
.swal-cand-remove, .swal-add-cand-btn {
    display: inline-flex; align-items: center; gap: 0.4rem;
    background: transparent; border: 1.5px solid #222; border-radius: 999px;
    color: #222; font-size: 11px; font-weight: 500; font-family: Roboto, sans-serif;
    text-transform: uppercase; letter-spacing: 0.05em;
    padding: 6px 16px; cursor: pointer;
    transition: border-color 0.2s, color 0.2s;
    text-decoration: none !important;
    word-break: break-word; max-width: 100%;
}
.swal-cand-remove:hover, .swal-add-cand-btn:hover { border-color: #f6901f; color: #f6901f; }
.swal-add-cand-btn:disabled { opacity: 0.35; cursor: not-allowed; }

/* ── Notification avatar ── */
.bg-soft-orange {
    background-color: rgba(246, 144, 31, 0.12) !important;
    color: #f6901f !important;
}

/* ── Competency card checkboxes (Create Role form) ── */
.form-check.margin-reset .form-check-input {
    float: none !important;
    margin-left: 0 !important;
    margin-top: 0 !important;
    position: static !important;
}

.form-check.margin-reset {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 0px 24px 0px 0px !important;
    margin: 0 !important;
    min-height: 0 !important;
}
.form-check.margin-reset .form-check-label {
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    cursor: pointer !important;
}
.form-check.margin-reset .form-check-label h4 {
    margin: 0 !important;
    padding-top: 0 !important;
    line-height: 1.2 !important;
}
.form-check.margin-reset .competency_check,
.form-check.margin-reset .competency_check2,
.form-check.margin-reset .stage_check2,
.form-check.margin-reset .stage_competency_weight,
.form-check.margin-reset .cim-check {
    appearance: none !important;
    -webkit-appearance: none !important;
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    border-radius: 50% !important;
    border: 1.5px solid #aaa !important;
    background-color: transparent !important;
    background-image: none !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    margin-top: 0 !important;
    vertical-align: middle !important;
    position: static !important;
    transition: background-color 0.18s, border-color 0.18s !important;
}
.form-check.margin-reset .competency_check:checked,
.form-check.margin-reset .competency_check2:checked,
.form-check.margin-reset .stage_check2:checked,
.form-check.margin-reset .stage_competency_weight:checked,
.form-check.margin-reset .cim-check:checked {
    background-color: #f6901f !important;
    border-color: #f6901f !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e") !important;
}

/* Stage Scoring sub-card titles — match competency card title style */
#myForm .card .card-header h4.text-gray {
    font-size: 14px !important;
    font-weight: 500 !important;
    letter-spacing: 0.01em !important;
    color: inherit !important;
    margin: 0 !important;
    line-height: 1.2 !important;
}

/* ── Create Role wizard: stacked competency cards ── */
/* Remove card-body padding from .stage_id wrapper divs */
.stage_id {
    padding: 0 !important;
}

/* Inner cards in wizard fieldsets: no side margin, 8px gap between rows */
#myForm fieldset .card {
    margin-inline: 0 !important;
    margin-top: 0 !important;
}

#myForm fieldset .card:last-child {
    margin-bottom: 0 !important;
}

/* Restore vertical padding so checkbox + text centre properly within each row */
#myForm fieldset .card .card-header {
    padding-block: 0.875rem !important;
}

/* ── Wizard layout: strip jQuery Steps margins/padding so content aligns with step nav ── */
.wizard > .content {
    margin: 0 !important;
    background: transparent !important;
    min-height: auto !important;
    border-radius: 0 !important;
}

.wizard > .content > .body {
    padding: 0 !important;
    width: 100% !important;
    left: 0 !important;
}

/* Remove Bootstrap col gutter — col-* inside wizard fieldsets has no .row parent
   so the gutter only adds unwanted left/right indent. Use both logical and physical
   properties to cover all browsers. */
.wizard fieldset > [class*="col-"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-inline: 0 !important;
}

/* ── Native select placeholder colour: grey when blank, dark when value chosen ── */
select.form-control.native-select,
select.form-control:not(.select3) {
    color: #aaa;
}
select.form-control.native-select option:not([value=""]),
select.form-control:not(.select3) option:not([value=""]) {
    color: #212529;
}

/* ── Upload PDF column: dropify wrapper stretches to match left column height ── */
#pdf-upload-row .col-md-6:last-child {
    display: flex;
    flex-direction: column;
}
#pdf-upload-row .form-group.h-100 {
    flex: 1;
    display: flex;
    flex-direction: column;
}
#pdf-upload-row .dropify-wrapper {
    flex: 1 !important;
    height: auto !important;
}

/* Remove vertical gap between step nav and content area */
.wizard > .steps {
    margin-bottom: 15px !important;
}

.wizard > .steps a {
    margin-left: 0 !important;
    padding-left: 0 !important;
}

/* ── Question row add / remove animations ── */
.q-row-exit {
    pointer-events: none;
}

/* ── Competency card titles (Relevant Experience etc.) ── */
#myForm fieldset .card .card-header .form-check-label h4 {
    font-size: 15px !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em !important;
}

.pt-3 {
    padding-top: 2rem !important;
    padding-left: 25px;
}

/* ── Stage Scoring: sub-competency rows — flat list, no card border ── */
.stage_id .card.margin-reset {
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    margin-bottom: 0 !important;
}
/* Divider line below stage headers (Screening, Competency Fit, etc.) */
.card.bg-white > .card-header:has(.stage_check2) {
    border-bottom: 1px solid #e9ecef !important;
}

/* Divider only between two consecutive VISIBLE sub-rows (sibling combinator avoids d-none issues) */
.stage_id .card.margin-reset:not(.d-none) ~ .card.margin-reset:not(.d-none) {
    border-top: 1px solid #e9ecef !important;
}
.stage_id .card.margin-reset .card-header {
    padding-block: 0.5rem !important;
    background: transparent !important;
    border-bottom: none !important;
}

/* Sub-card check row: flex 1 so Score Weight pushed to right */
.stage-sub-check {
    flex: 1 !important;
    min-width: 0 !important;
}

/* Spacer in sub-cards matches the toggle-button width so Score Weight columns align */
.stage-spacer,
.toggle-button {
    width: 36px;
    min-width: 36px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

/* Score Weight slot in sub-card rows — auto-sized to match content */
.stage-weight-slot {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Grey placeholder on weight inputs */
input.question-weight::placeholder {
    color: #bbb;
}

/* Grey out label and weight field when sub-competency unchecked; checkbox stays clickable */
.stage_id .card.margin-reset:has(.stage_competency_weight:not(:checked)) h4,
.stage_id .card.margin-reset:has(.stage_competency_weight:not(:checked)) .stage-weight-slot {
    opacity: 0.4;
}
.stage_id .card.margin-reset:has(.stage_competency_weight:not(:checked)) input.question-weight {
    background: #f5f5f5 !important;
    color: #bbb !important;
    pointer-events: none;
}

/* Score Weight input — fixed width so all inputs align consistently */
input.question-weight {
    width: 65px !important;
    min-width: 65px !important;
    max-width: 65px !important;
}

/* Stage card header layout — push Score Weight + chevron to the right */
#myForm fieldset .card .card-header.d-flex {
    align-items: center;
    gap: 8px;
}
#myForm fieldset .card .card-header.d-flex .form-check-inline {
    flex: 1;
    min-width: 0;
}


/* ── ion-rangeslider — clean single-line style ───────────────────────── */

/* Container heights */
.irs--round       { height: 40px; }
.irs--round.irs-with-grid { height: 68px; }

/* Track — tall enough to be easy to click */
.irs--round .irs-line {
    top: 14px;
    height: 10px;
    background-color: #e8e8e8;
    border-radius: 10px;
}

/* Filled bar */
.irs--round .irs-bar,
.irs--round .irs-bar--single {
    top: 14px;
    height: 10px;
    background-color: #f6901f;
    border-radius: 10px 0 0 10px;
}

/* Handle */
.irs--round .irs-handle {
    top: 8px;
    width: 24px;
    height: 24px;
    border: 3px solid #f6901f;
    background-color: #fff;
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    cursor: pointer;
}
.irs--round .irs-handle.state_hover,
.irs--round .irs-handle:hover {
    background-color: #fff8f1;
    box-shadow: 0 3px 10px rgba(246, 144, 31, 0.35);
}

/* Hide min/max labels */
.irs--round .irs-min,
.irs--round .irs-max {
    display: none !important;
}

/* Hide value bubble */
.irs--round .irs-from,
.irs--round .irs-to,
.irs--round .irs-single {
    display: none !important;
}

/* Grid */
.irs--round .irs-grid {
    height: 28px;
}

/* No dots — hide all tick marks */
.irs--round .irs-grid-pol,
.irs--round .irs-grid-pol.small {
    display: none;
}

/* Step labels — normal weight, muted by default */
.irs--round .irs-grid-text {
    color: #aaa;
    font-size: 12px;
    font-weight: 400;
    bottom: 0;
    white-space: nowrap;
}

/* Active (selected) label — orange and bold */
.irs--round .irs-grid-text.irs-score-active {
    color: #f6901f;
    font-weight: 700;
}


/* =========================================================
   Scoring section cards — progressive collapse/unlock
   ========================================================= */

/* Lock icon — hidden by default, visible when card is still pending */
.scoring-section-card .scoring-lock-indicator { display: none; }
.scoring-section-card.scoring-pending .scoring-lock-indicator { display: inline; color: #ccc; }

/* Pending card header — greyed out, not interactive */
.scoring-section-card.scoring-pending .card-header {
    background-color: #f9f9f9;
    opacity: 0.6;
    cursor: default !important;
}

/* Non-pending card headers are clickable (collapse toggle) */
.scoring-section-card:not(.scoring-pending) .card-header {
    cursor: pointer;
}

.scoring-section-card:not(.scoring-pending) .card-header:hover {
    background-color: #fafafa;
}

/* Done badge */
.scoring-done-badge {
    color: #5cb85c;
    font-size: 12px;
    font-weight: 600;
}

/* Chevron collapse indicator */
.scoring-card-chevron {
    color: #bbb;
    font-size: 11px;
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.scoring-section-card.scoring-pending .scoring-card-chevron {
    opacity: 0.3;
}

.scoring-card-chevron.rotated {
    transform: rotate(-90deg);
}

/* Informational date/time pill — no hover, no pointer, read-only */
.info-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #fff8f0;
    border: 1.5px solid #f0a500;
    border-radius: 50px;
    padding: 5px 14px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #b37200;
    cursor: default;
    user-select: none;
}
.info-pill i {
    font-size: 1rem;
    color: #f0a500;
}