/**
* Template Name: NiceAdmin
* Updated: Sep 18 2023 with Bootstrap v5.3.2
* Template URL: https://bootstrapmade.com/nice-admin-bootstrap-admin-html-template/
* Author: BootstrapMade.com
* License: https://bootstrapmade.com/license/
*/

/* GL Import V2 mapping states (scoped to the bookkeeping mapper). */
.gl-import-page .gl-mapping-column {
    transition: border-color .16s ease, background-color .16s ease, opacity .16s ease
}

/* Finance claim-limit foundation */
.cl-filter-bar { display: grid; grid-template-columns: minmax(240px, 1fr) 200px auto; gap: 12px; align-items: end; }
.cl-table { font-size: 14px; }
.cl-drawer form { min-height: 0; flex: 1; display: flex; flex-direction: column; }
.cl-drawer-footer { justify-content: flex-start !important; gap: 8px; background: #fff; }
.cl-warning-panel { max-width: 720px; margin: 0 auto; padding: 24px; border: 1px solid #fecaca; border-radius: 18px; background: #fff; box-shadow: var(--im-shadow-sm); }
.cl-warning-panel h2 { margin: 0 0 6px; font-size: 1.35rem; }
.cl-warning-icon { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 14px; border-radius: 12px; color: #b91c1c; background: #fee2e2; font-size: 1.2rem; }
.cl-warning-values { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 20px 0; }
.cl-warning-values div { padding: 12px; border-radius: 12px; background: #f8fafc; }
.cl-warning-values dt { color: #64748b; font-size: .78rem; }
.cl-warning-values dd { margin: 3px 0 0; font-weight: 750; }
.cl-warning-values .is-exceeded { color: #991b1b; background: #fef2f2; }
@media (max-width: 767.98px) { .cl-filter-bar, .cl-warning-values { grid-template-columns: 1fr; } }

.gl-import-page .gl-mapping-column.is-mapped {
    border-color: color-mix(in srgb, var(--im-color-success, #16a34a) 38%, var(--im-color-line));
    background: color-mix(in srgb, var(--im-color-success-soft, #ecfdf3) 42%, #fff)
}

.gl-import-page .gl-mapping-column.is-ignored {
    opacity: .72;
    background: var(--im-color-surface-muted, #f8fafc)
}

.gl-import-page .gl-mapping-status {
    display: grid;
    flex: 1;
    gap: 2px;
    text-align: right;
    color: var(--im-color-text-soft);
    font-size: 12px
}

.gl-import-page .gl-mapping-status .text-danger:empty {
    display: none
}

@media(max-width:767.98px) {

    .gl-import-page .gl-mapping-footer>a,
    .gl-import-page .gl-mapping-footer>button {
        width: 100%;
        justify-content: center
    }

    .gl-import-page .gl-mapping-status {
        text-align: left
    }
}

/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/
:root {
    scroll-behavior: smooth;
    /* Institutional Modernity Global Tokens */
    --bos-primary: #3F41B5;
    --bos-primary-dark: #2F32A6;
    --bos-primary-soft: #E4E7FF;
    --bos-secondary: #10B981;
    --bos-secondary-dark: #04785F;
    --bos-secondary-soft: #D1FAE5;
    --bos-tertiary: #873A00;
    --bos-tertiary-dark: #542100;
    --bos-tertiary-soft: #FFE8D6;
    --bos-neutral: #64748B;
    --bos-neutral-dark: #0F172A;
    --bos-neutral-soft: #E2E8F0;
    --bos-surface: #F4F7FB;
    --bos-surface-card: #EAF2FF;
    --bos-border: #D6DDEA;
    --bos-font-family: "Public Sans", sans-serif;

    --primary-color: var(--bos-primary);
    --bs-primary-rgb: 63, 65, 181;
    --bs-btn-bg: var(--bos-primary);
    --bs-btn-hover-bg: var(--bos-primary-dark);
    --bs-btn-hover-border-color: var(--bos-primary-dark);
    --bs-btn-active-bg: var(--bos-primary-dark);
    --bs-btn-active-border-color: var(--bos-primary-dark);
    --bs-btn-disabled-bg: var(--bos-primary);
    --bs-btn-disabled-border-color: var(--bos-primary);
    --bs-btn-border-color: var(--bos-primary);
    --bs-link-color: var(--bos-primary);
    --bs-link-color-rgb: 63, 65, 181;
    --bs-link-hover-color: var(--bos-primary-dark);
    --bs-body-font-size: 14px;
    --bs-title-font-size: 28px;
    --bs-subtitle-font-size: 20px;
}

/*--------------------------------------------------------------
# BOS Profile OCR Reader
# Purpose: IC/passport AI reader card on the profile edit form.
--------------------------------------------------------------*/
.profile-ocr-card {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px;
    margin: 0 0 24px;
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    border: 1px solid #dbe4ff;
    border-radius: 18px;
    box-shadow: 0 18px 36px rgba(15, 23, 42, 0.06);
}

/*--------------------------------------------------------------
# BOS Leave Application Form
# Purpose: Modern leave application form, tabs, fields, and action buttons.
--------------------------------------------------------------*/
.bos-leave-page {
    font-family: var(--bos-font-family);
}

.bos-leave-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin: 32px 0 28px;
}

.bos-leave-nav-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-width: 190px;
    padding: 14px 22px;
    color: var(--bos-primary);
    background: #ffffff;
    border: 2px solid var(--bos-primary);
    border-radius: 14px;
    box-shadow: 0 14px 28px rgba(63, 65, 181, 0.08);
    font-size: 15px;
    font-weight: 800;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.bos-leave-nav-item:hover,
.bos-leave-nav-item.active {
    color: #ffffff;
    background: linear-gradient(135deg, var(--bos-primary) 0%, #6d28d9 100%);
    border-color: transparent;
    box-shadow: 0 18px 34px rgba(63, 65, 181, 0.22);
    transform: translateY(-1px);
}

.bos-leave-form-card {
    padding: 30px;
    background: #ffffff;
    border: 1px solid #dbe4ff;
    border-radius: 22px;
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.08);
}

.bos-leave-form-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding-bottom: 22px;
    margin-bottom: 24px;
    border-bottom: 1px solid #e8eefc;
}

.bos-leave-form-kicker {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    margin-bottom: 12px;
    color: var(--bos-secondary-dark);
    background: rgba(16, 185, 129, 0.12);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.bos-leave-form-card h2 {
    margin: 0 0 8px;
    color: var(--bos-primary);
    font-size: 24px;
    font-weight: 900;
    letter-spacing: -0.03em;
}

.bos-leave-form-card p {
    max-width: 920px;
    margin: 0;
    color: var(--bos-neutral);
    font-size: 15px;
    line-height: 1.55;
}

.bos-leave-form-icon {
    display: grid;
    flex: 0 0 auto;
    width: 58px;
    height: 58px;
    place-items: center;
    color: #ffffff;
    background: linear-gradient(135deg, var(--bos-primary) 0%, #3158A6 62%, var(--bos-secondary) 100%);
    border-radius: 18px;
    box-shadow: 0 16px 30px rgba(63, 65, 181, 0.22);
    font-size: 25px;
}

.bos-leave-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px 24px;
}

.bos-form-field {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.bos-form-field-full {
    grid-column: 1 / -1;
}

.bos-form-field label {
    margin: 0;
    color: #1e293b;
    font-size: 14px;
    font-weight: 800;
}

.bos-form-field .form-control,
.bos-form-field select,
.bos-form-field textarea {
    width: 100%;
    min-height: 52px;
    padding: 13px 15px;
    color: #0f172a;
    background: #f8fafc;
    border: 1px solid #d7deec;
    border-radius: 13px;
    font-family: var(--bos-font-family);
    font-size: 14px;
    font-weight: 650;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.bos-form-field textarea.form-control {
    min-height: 128px;
    resize: vertical;
}

.bos-form-field .form-control:focus,
.bos-form-field select:focus,
.bos-form-field textarea:focus {
    background: #ffffff;
    border-color: var(--bos-primary);
    box-shadow: 0 0 0 4px rgba(63, 65, 181, 0.12);
    outline: none;
}

.bos-form-field .form-control[readonly] {
    color: var(--bos-primary);
    background: #eef2ff;
    border-color: #c7d2fe;
    font-weight: 900;
}

.bos-input-with-unit {
    display: flex;
    align-items: stretch;
    overflow: hidden;
    background: #f8fafc;
    border: 1px solid #d7deec;
    border-radius: 13px;
}

.bos-input-with-unit .form-control {
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.bos-input-with-unit span {
    display: inline-flex;
    align-items: center;
    padding: 0 16px;
    color: var(--bos-neutral);
    background: #eef2ff;
    border-left: 1px solid #d7deec;
    font-size: 13px;
    font-weight: 800;
}

.bos-leave-helper {
    color: var(--bos-neutral);
    font-size: 12px;
    font-weight: 650;
}

.bos-leave-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding-top: 26px;
    margin-top: 26px;
    border-top: 1px solid #e8eefc;
}

.bos-btn-primary,
.bos-btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 132px;
    min-height: 46px;
    padding: 11px 22px;
    border-radius: 999px;
    font-family: var(--bos-font-family);
    font-size: 14px;
    font-weight: 850;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.bos-btn-primary {
    color: #ffffff;
    background: var(--bos-primary);
    border: 1px solid var(--bos-primary);
    box-shadow: 0 16px 30px rgba(63, 65, 181, 0.2);
}

.bos-btn-primary:hover {
    color: #ffffff;
    background: var(--bos-primary-dark);
    transform: translateY(-1px);
}

.bos-btn-outline {
    color: var(--bos-primary);
    background: #ffffff;
    border: 1px solid #c7d2fe;
}

.bos-btn-outline:hover {
    color: #ffffff;
    background: var(--bos-primary);
    border-color: var(--bos-primary);
}

@media (max-width: 768px) {
    .bos-leave-nav {
        gap: 10px;
        margin: 22px 0;
    }

    .bos-leave-nav-item {
        width: 100%;
        min-width: 0;
    }

    .bos-leave-form-card {
        padding: 20px;
        border-radius: 18px;
    }

    .bos-leave-form-header {
        align-items: flex-start;
    }

    .bos-leave-form-icon {
        display: none;
    }

    .bos-leave-form-grid {
        grid-template-columns: 1fr;
    }

    .bos-leave-form-actions {
        flex-direction: column-reverse;
    }

    .bos-btn-primary,
    .bos-btn-outline {
        width: 100%;
    }
}

.profile-ocr-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    color: var(--bos-primary);
    font-family: var(--bos-font-family);
    font-size: 15px;
    font-weight: 800;
}

.profile-ocr-desc {
    max-width: 560px;
    margin: 0;
    color: var(--bos-neutral);
    font-family: var(--bos-font-family);
    font-size: 13px;
    line-height: 1.5;
}

.profile-ocr-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.profile-ocr-upload {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 16px;
    margin: 0;
    color: #ffffff;
    background: var(--bos-primary);
    border: 1px solid var(--bos-primary);
    border-radius: 999px;
    box-shadow: 0 12px 24px rgba(63, 65, 181, 0.2);
    font-family: var(--bos-font-family);
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.profile-ocr-upload-secondary {
    color: var(--bos-primary);
    background: #ffffff;
    border-color: #c7d2fe;
    box-shadow: 0 12px 24px rgba(100, 116, 139, 0.12);
}

.profile-ocr-upload:hover {
    color: #ffffff;
    background: var(--bos-primary-dark);
    box-shadow: 0 14px 28px rgba(63, 65, 181, 0.26);
    transform: translateY(-1px);
}

.profile-ocr-upload-secondary:hover {
    color: #ffffff;
    background: var(--bos-primary);
    border-color: var(--bos-primary);
}

.profile-ocr-status {
    margin-top: 8px;
    color: var(--bos-neutral);
    font-family: var(--bos-font-family);
    font-size: 12px;
    font-weight: 700;
}

.profile-ocr-status.is-loading {
    color: var(--bos-primary);
}

.profile-ocr-status.is-success {
    color: #047857;
}

.profile-ocr-status.is-error {
    color: #b91c1c;
}

@media (max-width: 768px) {
    .profile-ocr-card {
        align-items: stretch;
        padding: 16px;
        border-radius: 16px;
    }

    .profile-ocr-upload {
        width: 100%;
    }

    .profile-ocr-actions {
        flex-direction: column;
        align-items: stretch;
    }
}

/*--------------------------------------------------------------
# BOS Reusable Components
--------------------------------------------------------------*/
.bos-bg-primary {
    background-color: var(--bos-primary) !important;
}

.bos-bg-secondary {
    background-color: var(--bos-secondary) !important;
}

.bos-bg-tertiary {
    background-color: var(--bos-tertiary) !important;
}

.bos-bg-neutral {
    background-color: var(--bos-neutral) !important;
}

.bos-text-primary {
    color: var(--bos-primary) !important;
}

.bos-text-secondary {
    color: var(--bos-secondary) !important;
}

.bos-text-tertiary {
    color: var(--bos-tertiary) !important;
}

.bos-text-neutral {
    color: var(--bos-neutral) !important;
}

.bos-surface {
    background-color: var(--bos-surface);
    color: var(--bos-neutral-dark);
}

.bos-surface-card {
    background-color: var(--bos-surface-card);
    border: 1px solid var(--bos-border);
    border-radius: 8px;
}

.bos-table {
    width: 100%;
    margin-bottom: 1rem;
    color: #344054;
    vertical-align: middle;
    border-collapse: separate;
    border-spacing: 0;
    background-color: #fff;
    border: 1px solid #e4e7ec;
    border-radius: 8px;
    overflow: hidden;
}

.bos-table th,
.bos-table td {
    padding: 12px 16px;
    border-bottom: 1px solid #e4e7ec;
}

.bos-table th {
    font-weight: 600;
    color: #1d2939;
    background-color: #f9fafb;
}

.bos-table tr:last-child td {
    border-bottom: 0;
}

.bos-table tbody tr:hover {
    background-color: #f6f9ff;
}

.bos-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    padding: 8px;
    margin: 0;
    list-style: none;
    background-color: #fff;
    border: 1px solid #e4e7ec;
    border-radius: 8px;
}

.bos-nav a,
.bos-nav .nav-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    color: #344054;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.bos-nav a:hover,
.bos-nav .nav-link:hover,
.bos-nav .active {
    color: var(--primary-color);
    background-color: rgba(var(--bs-primary-rgb), 0.08);
}

.bos-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 36px;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    color: #fff !important;
    text-align: center;
    white-space: nowrap;
    background-color: var(--primary-color);
    border: 1px solid var(--primary-color);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bos-btn:hover,
.bos-btn:focus {
    color: #fff !important;
    background-color: var(--bos-primary-dark);
    border-color: var(--bos-primary-dark);
    box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), 0.16);
}

.bos-btn:disabled,
.bos-btn.disabled {
    opacity: 0.65;
    pointer-events: none;
}

.bos-btn-outline {
    color: var(--primary-color) !important;
    background-color: #fff;
}

.bos-btn-outline:hover,
.bos-btn-outline:focus {
    color: #fff !important;
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.bos-btn-danger {
    background-color: #dc3545;
    border-color: #dc3545;
}

.bos-btn-danger:hover,
.bos-btn-danger:focus {
    background-color: #bb2d3b;
    border-color: #bb2d3b;
}

.bos-btn-sm {
    min-height: 30px;
    padding: 6px 12px;
    font-size: 13px;
}

.bos-btn-lg {
    min-height: 44px;
    padding: 10px 20px;
    font-size: 15px;
}

@media (max-width: 767.98px) {
    .bos-table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }

    .bos-nav {
        align-items: stretch;
    }

    .bos-nav a,
    .bos-nav .nav-link,
    .bos-btn {
        width: 100%;
    }
}

/* Logistics — Verify Location drawer fragment.
   The shell owns the header/footer and only the fragment body scrolls. */
.bos-verify-drawer.log-location-drawer-shell {
    width: min(920px, 92vw);
    max-width: 920px;
    height: 100dvh;
    background: #fff;
}

.log-location-drawer-shell .log-drawer-shell__header {
    flex: 0 0 auto;
    position: relative;
    z-index: 2;
    min-height: 82px;
    padding: 18px 24px;
    border-bottom: 1px solid var(--im-color-line, #e4e7ec);
    background: #fff;
}

.log-location-drawer-shell .im-drawer-icon {
    width: 44px;
    height: 44px;
    border-radius: 13px;
    background: #eeefff;
    color: var(--im-color-primary, #3f41b5);
}

.log-location-drawer-shell .im-drawer-title {
    color: var(--im-color-text, #17243b);
}

.log-location-drawer-shell .im-drawer-subtitle {
    color: var(--im-color-text-soft, #64748b);
}

.log-location-drawer-shell .bos-verify-drawer-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    padding: 0;
    background: #f7f9fd;
}

.log-location-drawer-shell #log-drawer-frame[hidden],
.log-location-drawer-shell #log-drawer-fragment[hidden] {
    display: none !important;
}

.log-drawer-shell__fragment,
.log-location-drawer,
.log-location-drawer>form {
    width: 100%;
    height: 100%;
    min-height: 0;
}

.log-location-drawer,
.log-location-drawer>form {
    display: flex;
    flex-direction: column;
}

.log-location-drawer__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    padding: 22px 24px 30px;
}

.log-location-drawer__section {
    padding: 20px;
    margin-bottom: 16px;
    border: 1px solid var(--im-color-line, #e4e7ec);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 4px 14px rgba(31, 42, 79, .04);
}

.log-location-drawer__section:last-child {
    margin-bottom: 0;
}

.log-location-drawer__section-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

.log-location-drawer__section-heading h3 {
    margin: 3px 0 0;
    color: var(--im-color-text, #17243b);
    font-size: 17px;
    font-weight: 750;
}

.log-location-drawer__eyebrow {
    color: var(--im-color-primary, #3f41b5);
    font-size: 11px;
    font-weight: 750;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.log-location-drawer__source {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    padding: 6px 9px;
    border-radius: 9px;
    background: #f0f2ff;
    color: #4642bd;
    font-size: 12px;
    font-weight: 700;
}

.log-location-drawer__original {
    display: grid;
    gap: 4px;
    padding: 12px 14px;
    margin-bottom: 16px;
    border-radius: 12px;
    background: #f7f8fc;
    color: var(--im-color-text, #17243b);
}

.log-location-drawer__original span {
    color: var(--im-color-text-soft, #64748b);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}

.log-location-drawer__original strong {
    font-size: 13.5px;
    font-weight: 650;
    line-height: 1.55;
    overflow-wrap: anywhere;
}

.log-location-drawer__search-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: end;
}

.log-location-drawer__search-row textarea {
    min-height: 88px;
    resize: vertical;
}

.log-location-drawer__search-row .im-btn {
    min-width: 156px;
    min-height: 44px;
}

.log-location-drawer__status-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
}

.log-location-drawer__confidence {
    color: var(--im-color-text-soft, #64748b);
    font-size: 12px;
}

.log-location-drawer__map {
    width: 100%;
    height: clamp(360px, 42vh, 440px);
    border: 1px solid var(--im-color-line, #e4e7ec);
    border-radius: 14px;
    background: #eef1f7;
    overflow: hidden;
    color: var(--im-color-text-soft, #64748b);
}

.log-location-drawer__map.is-unavailable {
    display: grid;
    place-items: center;
    padding: 20px;
}

.log-location-drawer__hint {
    display: flex;
    gap: 7px;
    margin: 10px 0 0;
    color: var(--im-color-text-soft, #64748b);
    font-size: 12px;
}

.log-location-drawer__text-action {
    min-height: 36px;
    padding: 6px 9px;
    border: 0;
    background: transparent;
    color: var(--im-color-primary, #3f41b5);
    font-size: 12.5px;
    font-weight: 700;
}

.log-location-drawer__text-action:disabled {
    color: #98a2b3;
    cursor: not-allowed;
}

.log-location-drawer__coordinate-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.log-location-drawer__metadata {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 16px 0 0;
}

.log-location-drawer__metadata div {
    min-width: 0;
    padding: 11px 12px;
    border-radius: 11px;
    background: #f7f8fc;
}

.log-location-drawer__metadata dt {
    color: var(--im-color-text-soft, #64748b);
    font-size: 11px;
    font-weight: 700;
}

.log-location-drawer__metadata dd {
    margin: 4px 0 0;
    color: var(--im-color-text, #17243b);
    font-size: 12.5px;
    overflow-wrap: anywhere;
}

.log-location-drawer__confirmation-note,
.log-location-drawer__notice {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 12px 14px;
    margin: 14px 0 0;
    border: 1px solid #d8dcff;
    border-radius: 12px;
    background: #f4f5ff;
    color: #41469a;
    font-size: 12.5px;
    line-height: 1.5;
}

.log-location-drawer__notice--warning {
    border-color: #f4d7a3;
    background: #fff8eb;
    color: #8a570d;
}

.log-location-drawer__errors {
    padding: 11px 13px;
    margin-bottom: 14px;
    border: 1px solid #f0b8b8;
    border-radius: 11px;
    background: #fff3f3;
    color: #a12626;
    font-size: 13px;
}

.log-location-drawer__field-error {
    min-height: 16px;
    color: #b42318;
    font-size: 11.5px;
}

.log-location-drawer__footer {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 24px max(14px, env(safe-area-inset-bottom));
    border-top: 1px solid var(--im-color-line, #e4e7ec);
    background: #fff;
    box-shadow: 0 -8px 20px rgba(31, 42, 79, .04);
}

.log-location-drawer__footer-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.log-location-drawer__footer .im-btn {
    min-height: 44px;
    border-radius: 11px;
    padding: 9px 16px;
    white-space: nowrap;
}

.log-location-drawer__loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 240px;
    padding: 24px;
    color: var(--im-color-text-soft, #64748b);
}

.log-location-drawer__loading--error {
    color: #a12626;
}

.log-location-toast {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 1300;
    display: flex;
    align-items: center;
    gap: 9px;
    max-width: min(380px, calc(100vw - 32px));
    padding: 12px 16px;
    border-radius: 12px;
    background: #157347;
    color: #fff;
    box-shadow: 0 14px 36px rgba(15, 23, 42, .24);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .18s ease, transform .18s ease;
}

.log-location-toast.is-visible {
    opacity: 1;
    transform: none;
}

@media (max-width: 1024px) {
    .bos-verify-drawer.log-location-drawer-shell {
        width: 94vw;
        max-width: 94vw;
    }

    .log-location-drawer__coordinate-grid,
    .log-location-drawer__metadata {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767.98px) {
    .bos-verify-drawer.log-location-drawer-shell {
        width: 100vw;
        max-width: 100vw;
    }

    .log-location-drawer-shell .log-drawer-shell__header {
        min-height: 74px;
        padding: 13px 16px;
    }

    .log-location-drawer__body {
        padding: 14px 14px 22px;
    }

    .log-location-drawer__section {
        padding: 16px;
        border-radius: 14px;
    }

    .log-location-drawer__section-heading,
    .log-location-drawer__search-row {
        grid-template-columns: 1fr;
        flex-direction: column;
    }

    .log-location-drawer__search-row {
        display: grid;
    }

    .log-location-drawer__search-row .im-btn {
        width: 100%;
    }

    .log-location-drawer__map {
        height: 300px;
    }

    .log-location-drawer__footer {
        padding: 12px 14px max(12px, env(safe-area-inset-bottom));
    }

    .log-location-drawer__footer,
    .log-location-drawer__footer-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        width: 100%;
    }

    .log-location-drawer__footer>[data-log-location-close] {
        grid-column: 1;
    }

    .log-location-drawer__footer-actions {
        display: contents;
    }

    .log-location-drawer__footer [data-log-location-geocode] {
        display: none;
    }

    .log-location-drawer__footer .im-btn {
        width: 100%;
        min-width: 0;
    }
}

/*--------------------------------------------------------------
# BOS Login Page
# Purpose: Split-screen shell for the authentication screen.
--------------------------------------------------------------*/
.bos-login-page {
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(420px, 0.95fr) minmax(420px, 1fr);
    background: var(--bos-surface);
    color: var(--bos-neutral-dark);
    font-family: var(--bos-font-family);
}

/*--------------------------------------------------------------
# BOS Login Brand Panel
# Purpose: Left-side institutional gradient, logo, and trust messaging.
--------------------------------------------------------------*/
.bos-login-brand {
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 72px;
    color: #fff;
    background:
        radial-gradient(circle at 18% 24%, rgba(255, 255, 255, 0.08), transparent 26%),
        linear-gradient(155deg, var(--bos-primary-dark) 0%, var(--bos-primary) 42%, #3158A6 72%, var(--bos-secondary-dark) 100%);
    overflow: hidden;
}

.bos-login-brand::before,
.bos-login-brand::after {
    content: "";
    position: absolute;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.08);
    transform: rotate(-12deg);
}

.bos-login-brand::before {
    width: 220px;
    height: 220px;
    left: -96px;
    top: -72px;
}

.bos-login-brand::after {
    width: 320px;
    height: 320px;
    right: -180px;
    bottom: -120px;
}

.bos-login-brand-content {
    position: relative;
    z-index: 1;
    max-width: 520px;
    margin: auto 0;
}

.bos-login-logo {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 80px;
    color: #fff !important;
}

.bos-login-logo-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border-radius: 20px;
    padding: 14px 18px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.bos-login-logo-mark i {
    font-size: 34px;
}

.bos-login-logo-mark .kunos-brand-logo--vertical {
    max-width: 120px;
    max-height: 120px;
}

.bos-login-logo strong {
    display: block;
    color: #fff;
    font-size: 22px;
    font-weight: 800;
    line-height: 1.1;
}

.bos-login-logo small {
    display: block;
    color: rgba(255, 255, 255, 0.74);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 4px;
    line-height: 1.4;
    text-transform: uppercase;
}

.bos-login-eyebrow {
    margin-bottom: 12px;
    color: rgba(255, 255, 255, 0.68);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.bos-login-copy h1 {
    max-width: 520px;
    margin-bottom: 18px;
    color: #fff;
    font-size: 44px;
    font-weight: 800;
    line-height: 1.08;
}

.bos-login-copy p:not(.bos-login-eyebrow) {
    max-width: 460px;
    margin-bottom: 0;
    color: rgba(255, 255, 255, 0.76);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.7;
}

.bos-login-features {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-top: 64px;
}

.bos-login-feature {
    min-height: 86px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 18px;
    color: rgba(255, 255, 255, 0.82);
    font-size: 13px;
    font-weight: 800;
    text-align: center;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 8px;
}

.bos-login-feature i {
    color: #dbeafe;
    font-size: 20px;
}

.bos-login-brand-footer {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: rgba(255, 255, 255, 0.55);
    font-size: 12px;
    font-weight: 800;
}

.bos-login-corner {
    width: 14px;
    height: 14px;
    display: inline-block;
    background: rgba(255, 255, 255, 0.68);
    border-radius: 3px;
    clip-path: polygon(0 0, 100% 100%, 0 100%);
}

/*--------------------------------------------------------------
# BOS Login Form Panel
# Purpose: Right-side login form, inputs, SSO action, and server status.
--------------------------------------------------------------*/
.bos-login-panel {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 28px;
    background: linear-gradient(180deg, #f8fafc 0%, #f3f6fb 100%);
}

.bos-login-card {
    width: min(100%, 460px);
}

/*--------------------------------------------------------------
# BOS Login Language Switcher
# Purpose: BM and BI language toggle on the login page.
--------------------------------------------------------------*/
.bos-login-language {
    position: fixed;
    bottom: 15px;
    right: 70px;
    z-index: 123231232131;
    display: inline-flex;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--bos-primary);
    border-radius: 4px;
    box-shadow: none;
}

.bos-login-language-desktop {
    display: inline-flex;
}

.bos-login-language-mobile {
    display: none;
}

.bos-login-language a {
    min-width: 34px;
    padding: 5px 8px;
    color: var(--bos-primary);
    font-size: 14px;
    font-weight: 800;
    line-height: 1;
    text-align: center;
    transition: color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

.bos-login-language a:hover,
.bos-login-language a:focus,
.bos-login-language a.active {
    color: #fff;
    background: var(--bos-primary);
    box-shadow: none;
}

.bos-login-header {
    margin-bottom: 34px;
}

.bos-login-header .bos-login-eyebrow {
    margin-bottom: 6px;
    color: var(--bos-neutral-dark);
    font-size: 24px;
    letter-spacing: 0;
    text-transform: none;
}

.bos-login-header h2 {
    margin-bottom: 6px;
    color: var(--bos-neutral-dark);
    font-size: 18px;
    font-weight: 800;
}

.bos-login-header p {
    margin: 0;
    color: #64748b;
    font-weight: 700;
}

.bos-login-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.bos-login-field label {
    display: block;
    margin-bottom: 8px;
    color: #475467;
    font-weight: 800;
}

.bos-login-input {
    position: relative;
    display: flex;
    align-items: center;
}

.bos-login-input input {
    width: 100%;
    min-height: 56px;
    padding: 0 52px 0 16px;
    color: #111827;
    background: #f8fafc;
    border: 2px solid #d6d9e6;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 700;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.bos-login-input input:focus {
    background: #fff;
    border-color: var(--bos-primary);
    box-shadow: 0 0 0 4px rgba(63, 65, 181, 0.12);
}

.bos-login-input>i,
.bos-login-input button {
    position: absolute;
    right: 16px;
    color: #64748b;
}

.bos-login-input button {
    padding: 0;
    font-size: 20px;
    line-height: 1;
    background: transparent;
    border: 0;
    cursor: pointer;
}

.bos-login-options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 2px;
    font-size: 13px;
}

.bos-login-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: #64748b;
    font-weight: 800;
}

.bos-login-check input {
    width: 18px;
    height: 18px;
    accent-color: var(--bos-primary);
}

.bos-login-options a {
    color: #64748b;
    font-weight: 800;
}

.bos-login-submit {
    width: 100%;
    min-height: 56px;
    margin-top: 10px;
    background: #2f2eb5;
    border-color: #2f2eb5;
    border-radius: 999px;
    box-shadow: 0 18px 32px rgba(47, 46, 181, 0.24);
}

.bos-login-submit:hover,
.bos-login-submit:focus {
    background: #25249c;
    border-color: #25249c;
}

.bos-login-divider {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 34px 0;
    color: #c0c4d1;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.14em;
}

.bos-login-divider::before,
.bos-login-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #dde2ee;
}

.bos-login-note {
    max-width: 360px;
    margin: 42px auto 0;
    color: #a0a6b5;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.5;
    text-align: center;
}

.bos-login-status {
    position: absolute;
    right: 28px;
    bottom: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    color: #64748b;
    font-size: 12px;
    font-weight: 800;
    background: #dcecff;
    border-radius: 999px;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
}

.bos-login-status span {
    width: 8px;
    height: 8px;
    background: var(--bos-secondary);
    border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.12);
}

.bos-login-mobile-hero,
.bos-login-mobile-help,
.bos-login-mobile-footer {
    display: none;
}

/*--------------------------------------------------------------
# BOS Login Responsive
# Purpose: Mobile and tablet stacking for the login screen.
--------------------------------------------------------------*/
@media (max-width: 991.98px) {
    .bos-login-page {
        grid-template-columns: 1fr;
    }

    .bos-login-brand {
        min-height: auto;
        padding: 40px 24px;
    }

    .bos-login-brand-content {
        margin: 0;
    }

    .bos-login-logo {
        margin-bottom: 36px;
    }

    .bos-login-copy h1 {
        font-size: 36px;
    }

    .bos-login-features {
        margin-top: 32px;
    }

    .bos-login-panel {
        min-height: auto;
        padding: 40px 20px 76px;
    }

    .bos-login-language {
        right: 70px;
        bottom: 15px;
    }
}

@media (max-width: 575.98px) {

    /* Mobile phone tier (~390-430px target). Rebuilt to match the same
       compact, premium rhythm the Forgot Password auth card uses —
       .bos-auth-card in this same file — rather than a shrunk-down copy of
       the desktop split-screen: same card padding/radius/shadow, same
       input/button height and radius, same soft (not hard-drop) button
       shadow, same tight-but-breathable spacing scale. Labels and the
       input icons, previously hidden on mobile, are restored so both auth
       pages present identically here. */
    .bos-login-page {
        display: block;
        min-height: 100dvh;
        background:
            radial-gradient(circle at 50% 18%, rgba(63, 65, 181, 0.06), transparent 28%),
            var(--bos-surface);
    }

    .bos-login-brand,
    .bos-login-header,
    .bos-login-note {
        display: none;
    }

    .bos-login-panel {
        min-height: 100dvh;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        padding: 28px 16px 40px;
        background: transparent;
    }

    .bos-login-mobile-hero {
        display: block;
        margin-bottom: 24px;
        text-align: center;
    }

    .bos-login-mobile-logo {
        display: block;
        width: 160px;
        height: auto;
        margin: 0 auto 20px;
    }

    .bos-login-mobile-hero h2 {
        margin: 0 0 6px;
        color: var(--bos-neutral-dark);
        font-size: 28px;
        font-weight: 800;
        line-height: 1.2;
        text-wrap: balance;
    }

    .bos-login-mobile-hero p {
        margin: 0;
        color: #6b7280;
        font-size: 15px;
        font-weight: 600;
        line-height: 1.5;
    }

    .bos-login-card {
        width: 100%;
        padding: 24px;
        background: #ffffff;
        border: 1px solid #eef0f7;
        border-radius: 26px;
        box-shadow: 0 12px 28px rgba(63, 65, 181, 0.09);
    }

    .bos-login-form {
        gap: 16px;
    }

    .bos-login-field label {
        display: block;
        margin-bottom: 6px;
        font-size: 13px;
    }

    .bos-login-input input {
        min-height: 55px;
        padding: 0 44px 0 16px;
        color: #111827;
        background: #f8fafc;
        border: 1.5px solid #d6d9e6;
        border-radius: 15px;
        font-size: 16px;
        font-weight: 500;
    }

    .bos-login-input input::placeholder {
        color: #94a3b8;
        opacity: 1;
    }

    .bos-login-input>i {
        right: 15px;
        font-size: 17px;
    }

    .bos-login-input button {
        right: 14px;
        color: #94a3b8;
        font-size: 19px;
    }

    .bos-login-options {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin-top: 2px;
    }

    .bos-login-check {
        gap: 8px;
        color: #64748b;
        font-size: 13px;
        font-weight: 600;
        letter-spacing: normal;
    }

    .bos-login-check input {
        width: 20px;
        height: 20px;
        border: 1.5px solid #c9c8db;
    }

    .bos-login-options a {
        color: var(--bos-primary);
        font-size: 13px;
        font-weight: 800;
        letter-spacing: normal;
    }

    .bos-login-submit {
        min-height: 55px;
        margin-top: 4px;
        font-size: 15px;
        font-weight: 800;
        background: var(--bos-primary);
        border-color: var(--bos-primary);
        border-radius: 999px;
        box-shadow: 0 10px 22px rgba(47, 46, 181, 0.16);
    }

    .bos-login-submit i {
        font-size: 18px;
    }

    .bos-login-divider {
        margin: 22px 0 18px;
        color: #c0c4d1;
        font-size: 12px;
        font-weight: 800;
        letter-spacing: 0.14em;
    }

    .bos-login-mobile-help {
        display: block;
        margin: 24px 0 0;
        color: #64748b;
        font-size: 13px;
        font-weight: 600;
        letter-spacing: normal;
        text-align: center;
    }

    .bos-login-mobile-help a {
        color: var(--bos-primary);
        font-weight: 800;
    }

    .bos-login-mobile-footer {
        display: block;
        margin-top: auto;
        padding-top: 28px;
        color: #9aa0b0;
        font-size: 12px;
        font-weight: 600;
        letter-spacing: normal;
        text-align: center;
    }

    .bos-login-language {
        right: 16px;
        top: 16px;
        bottom: auto;
        background: var(--bos-primary);
        border-color: var(--bos-primary);
    }

    .bos-login-language-desktop {
        display: none;
    }

    .bos-login-language-mobile {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: #ffffff !important;
    }

    .bos-login-status {
        right: auto;
        left: 20px;
    }
}

@media (min-width: 576px) and (max-width: 767.98px) {
    .bos-login-language {
        right: 20px;
        top: 16px;
        bottom: auto;
        background: var(--bos-primary);
        border-color: var(--bos-primary);
    }

    .bos-login-language-desktop {
        display: none;
    }

    .bos-login-language-mobile {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: #ffffff !important;
    }
}

/*--------------------------------------------------------------
# BOS Auth Card (Forgot Password)
# Purpose: Simple centered auth screens (no split-screen brand panel)
# that still belong to the same auth family as the login page above —
# same background, same Kunos purple, same .bos-login-form/-field/-input/
# -divider/-note structure and colors. The interactive pieces
# (.bos-login-input input, .bos-login-submit) get scoped, lighter-touch
# proportions specifically under .bos-auth-card (smaller radius steps,
# softer shadow, tighter rhythm) rather than reusing login's own
# desktop-first split-screen sizing wholesale — this card was always
# going to sit alone on the page, never beside a brand panel, so it
# earns its own compact scale. Mobile-first throughout: the un-nested
# rules below are the ~390-430px phone baseline; min-width breakpoints
# layer on more generous spacing for tablet/desktop, never the reverse.
--------------------------------------------------------------*/
.bos-auth-page {
    flex-direction: column;
    padding: 28px 16px;
    /* dvh accounts for mobile Safari's collapsing address bar/bottom
       toolbar; on browsers that don't parse it this whole declaration is
       dropped and .bos-login-panel's own min-height:100vh above still
       applies — a genuine progressive-enhancement fallback, not a guess. */
    min-height: 100dvh;
}

.bos-auth-content {
    width: min(100%, 380px);
}

.bos-auth-logo {
    display: flex;
    justify-content: center;
    margin-bottom: 18px;
}

.bos-auth-logo img {
    width: 148px;
    height: auto;
}

.bos-auth-card {
    width: 100%;
    padding: 24px;
    background: #ffffff;
    border: 1px solid #eef0f7;
    border-radius: 26px;
    box-shadow: 0 12px 28px rgba(63, 65, 181, 0.09);
}

.bos-auth-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin: 0 auto 14px;
    color: var(--bos-primary);
    background: #EEEDFC;
    border-radius: 14px;
    font-size: 22px;
    flex-shrink: 0;
}

.bos-auth-title {
    margin: 0 0 6px;
    color: var(--bos-neutral-dark);
    font-size: 26px;
    font-weight: 800;
    line-height: 1.2;
    text-align: center;
    text-wrap: balance;
}

.bos-auth-description {
    max-width: 280px;
    margin: 0 auto 22px;
    color: #6b7280;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.5;
    text-align: center;
    /* No manual <br> in the Blade — this is what lets it wrap naturally
       into ~2-3 lines at narrow widths instead of a forced break. */
}

/* Scoped, lighter-touch versions of the shared login field/input/button —
   see the section comment above for why these don't just inherit login's
   own desktop-first values. Specificity (2 classes + element) beats the
   shared 1-class rules regardless of which of THEIR media queries (if
   any) currently match, so these stay consistent at every breakpoint
   instead of quietly falling back to a shared default partway through. */
.bos-auth-card .bos-login-form {
    gap: 16px;
}

.bos-auth-card .bos-login-field label {
    margin-bottom: 6px;
    font-size: 13px;
}

.bos-auth-card .bos-login-input input {
    min-height: 54px;
    padding: 0 44px 0 16px;
    font-size: 16px;
    border-width: 1.5px;
    border-radius: 15px;
}

.bos-auth-card .bos-login-input>i {
    right: 14px;
    font-size: 17px;
}

.bos-auth-card .bos-login-submit {
    min-height: 54px;
    margin-top: 2px;
    font-size: 15px;
    box-shadow: 0 10px 22px rgba(47, 46, 181, 0.16);
}

.bos-auth-card .bos-login-submit:hover,
.bos-auth-card .bos-login-submit:focus {
    box-shadow: 0 12px 26px rgba(47, 46, 181, 0.2);
}

.bos-auth-card .bos-login-divider {
    margin: 22px 0 18px;
}

.bos-auth-content .bos-login-note {
    margin-top: 24px;
}

.bos-auth-alert-success {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    margin-bottom: 18px;
    color: #047857;
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.5;
}

.bos-auth-alert-success i {
    font-size: 18px;
    line-height: 1.4;
}

.bos-auth-back-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    /* The whole link (icon + text), not just the arrow, is the click/tap
       target — padding gives it a real touch-friendly hit area rather
       than relying on the text's own line-height. */
    padding: 8px 16px;
    margin: -8px auto 0;
    color: var(--bos-primary);
    font-weight: 800;
    font-size: 14px;
    text-decoration: none;
    border-radius: 999px;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.bos-auth-back-link:hover,
.bos-auth-back-link:focus {
    color: var(--bos-primary-dark);
    background: rgba(63, 65, 181, 0.06);
}

/* Tablet and up: same language, more generous scale — never the other
   way around. */
@media (min-width: 576px) {
    .bos-auth-page {
        padding: 40px 24px;
    }

    .bos-auth-content {
        width: min(100%, 440px);
    }

    .bos-auth-logo {
        margin-bottom: 24px;
    }

    .bos-auth-logo img {
        width: 170px;
    }

    .bos-auth-card {
        padding: 32px;
    }

    .bos-auth-description {
        max-width: 320px;
    }
}

@media (min-width: 992px) {
    .bos-auth-page {
        padding: 56px 28px;
    }

    .bos-auth-content {
        width: min(100%, 680px);
    }

    .bos-auth-logo {
        margin-bottom: 32px;
    }

    .bos-auth-logo img {
        width: 200px;
    }

    .bos-auth-card {
        padding: 44px 48px;
        border-radius: 24px;
    }

    .bos-auth-icon {
        width: 60px;
        height: 60px;
        margin-bottom: 18px;
        border-radius: 16px;
        font-size: 26px;
    }

    .bos-auth-title {
        margin-bottom: 10px;
        font-size: 32px;
    }

    .bos-auth-description {
        max-width: 360px;
        margin-bottom: 30px;
        font-size: 15px;
    }

    .bos-auth-card .bos-login-form {
        gap: 20px;
    }

    .bos-auth-card .bos-login-input input {
        min-height: 56px;
    }

    .bos-auth-card .bos-login-submit {
        min-height: 56px;
        font-size: 16px;
    }

    .bos-auth-card .bos-login-divider {
        margin: 30px 0 24px;
    }
}

/*--------------------------------------------------------------
# BOS Sidebar Logout Button
# Purpose: Minimal red Log Keluar action in the sidebar footer.
--------------------------------------------------------------*/
body .sidebar .sidebar-logout-btn {
    width: auto !important;
    min-height: 48px !important;
    justify-content: flex-start !important;
    gap: 14px !important;
    padding: 12px 14px !important;
    color: #dc2626 !important;
    font-size: 14px !important; /* Education typography pass — was 16px */
    font-weight: 800 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 4px !important;
    box-shadow: none !important;
}

body .sidebar .sidebar-logout-btn:hover,
body .sidebar .sidebar-logout-btn:focus {
    color: #b91c1c !important;
    background: rgba(220, 38, 38, 0.08) !important;
    transform: none !important;
}

body .sidebar .sidebar-logout-btn i {
    color: currentColor !important;
    font-size: 24px !important;
    font-weight: 400 !important;
}

/*--------------------------------------------------------------
# BOS Mobile Navigation
# Purpose: Bottom mobile nav and off-canvas sidebar drawer.
--------------------------------------------------------------*/
.global-mobile-bottom-nav {
    display: none;
}

.global-mobile-menu-btn {
    display: none;
}

@media (max-width: 1199px) {

    #main,
    .main {
        margin-left: 0 !important;
        padding: 16px !important;
        padding-bottom: 98px !important;
    }

    .sidebar {
        top: auto !important;
        right: 16px !important;
        bottom: 104px !important;
        left: 16px !important;
        width: auto !important;
        max-height: min(68vh, 620px) !important;
        z-index: 2147483646 !important;
        padding: 22px 16px !important;
        border: 1px solid rgba(214, 221, 234, 0.88);
        border-radius: 28px !important;
        box-shadow: 0 24px 60px rgba(15, 23, 42, 0.22) !important;
        transform: translateY(calc(100% + 130px)) scale(0.96);
        opacity: 0;
        pointer-events: none;
        transition: transform 0.26s ease, opacity 0.2s ease !important;
    }

    body.toggle-sidebar .sidebar {
        transform: translateY(0) scale(1);
        opacity: 1;
        pointer-events: auto;
        filter: none;
        backdrop-filter: none;
    }

    .sidebar::before {
        content: "";
        display: block;
        width: 42px;
        height: 4px;
        margin: -8px auto 14px;
        background: var(--bos-border);
        border-radius: 999px;
    }

    body.toggle-sidebar::after {
        display: none !important;
    }

    .sidebar .sidebar-logo {
        padding-bottom: 14px !important;
        margin-bottom: 14px !important;
    }

    .sidebar .sidebar-brand-title {
        font-size: 22px !important;
    }

    .sidebar .sidebar-brand-subtitle {
        font-size: 12px !important;
    }

    .sidebar .sidebar-nav {
        max-height: calc(min(68vh, 620px) - 190px);
        overflow-y: auto;
        padding-right: 4px !important;
    }

    .sidebar .sidebar-nav .nav-link {
        padding: 11px 16px !important;
        font-size: 15px !important;
        border-radius: 18px !important;
    }

    .sidebar .sidebar-nav .nav-item.active .nav-link,
    .sidebar .sidebar-nav .nav-link:not(.collapsed) {
        background: var(--bos-primary) !important;
        box-shadow: 0 10px 22px rgba(63, 65, 181, 0.20) !important;
    }

    .sidebar .sidebar-footer {
        padding-top: 14px !important;
        margin-top: 14px !important;
        gap: 10px !important;
    }

    .sidebar .sidebar-profile-avatar {
        width: 40px !important;
        height: 40px !important;
    }

    .sidebar .sidebar-logout-btn {
        min-height: 42px !important;
        padding: 8px 12px !important;
        font-size: 14px !important; /* Education typography pass — was 15px */
    }

    .sidebar-show-menu {
        display: none !important;
    }

    .global-mobile-bottom-nav {
        position: fixed !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        z-index: 2147483647 !important;
        height: 84px !important;
        display: grid !important;
        grid-template-columns: 1fr 96px 1fr;
        align-items: center !important;
        gap: 10px;
        padding: 12px 28px calc(12px + env(safe-area-inset-bottom, 0px)) !important;
        margin: 0 !important;
        background: #dbeafe !important;
        border-radius: 18px 18px 0 0;
        box-shadow: 0 -12px 32px rgba(63, 65, 181, 0.10) !important;
    }

    .global-mobile-nav-item {
        width: 100% !important;
        min-width: 0;
        min-height: 56px;
        display: inline-flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 4px !important;
        padding: 7px 4px !important;
        color: #303241 !important;
        font-size: 12px !important;
        font-weight: 500 !important;
        line-height: 1.1;
        text-align: center;
        text-decoration: none !important;
        background: transparent !important;
        border-radius: 18px;
        transition: all 0.2s ease !important;
    }

    .global-mobile-nav-item i {
        color: currentColor !important;
        font-size: 22px !important;
        line-height: 1;
    }

    .global-mobile-nav-item.active {
        color: var(--bos-primary) !important;
        background: transparent !important;
        box-shadow: none;
    }

    .global-mobile-nav-item.active i {
        transform: translateY(-1px);
    }

    .global-mobile-menu-btn {
        width: 72px;
        height: 72px;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        justify-self: center;
        align-self: center;
        margin-top: -36px;
        color: #ffffff;
        font-size: 38px;
        line-height: 1;
        background: var(--bos-primary);
        border: 4px solid #dbeafe;
        border-radius: 50%;
        box-shadow: 0 12px 28px rgba(63, 65, 181, 0.28);
        appearance: none;
    }

    .global-mobile-menu-btn i {
        color: currentColor;
        line-height: 1;
    }

    body.toggle-sidebar .global-mobile-menu-btn {
        background: var(--bos-primary-dark);
    }

    body.toggle-sidebar .global-mobile-menu-btn .bi-list::before {
        content: "\f62a";
    }
}

@media (min-width: 1200px) {
    .global-mobile-bottom-nav {
        display: none !important;
    }
}

/* --------------------------------------------------------------
# Mobile Sidebar Redesign (Compact Drawer + Accordion Menu UI)
-------------------------------------------------------------- */
.mobile-sidebar-overlay {
    position: fixed;
    inset: 0;
    z-index: 2147483640 !important;
    /* Extremely high z-index, but below bottom nav (2147483647) and mobile sidebar (2147483645) */
    background-color: rgba(15, 23, 42, 0.45) !important;
    /* Overlay opacity per specification */
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

body.toggle-sidebar .mobile-sidebar-overlay {
    opacity: 1;
    pointer-events: auto;
}

.mobile-sidebar {
    display: none;
}

body.toggle-sidebar {
    height: 100vh !important;
    overflow: hidden !important;
}

@media (max-width: 1199px) {

    /* Hide the desktop sidebar completely on mobile/tablet viewports */
    .sidebar {
        display: none !important;
    }

    .mobile-sidebar {
        display: flex !important;
        position: fixed;
        top: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100dvh !important;
        /* Full height occupying the entire mobile viewport */
        max-height: 100dvh !important;
        z-index: 2147483645 !important;
        /* Higher than dim overlay (2147483640); was tied with bottom nav (2147483647), which — per DOM order — could win that tie and intercept clicks over any sidebar content sharing its screen region */
        background-color: #ffffff !important;
        /* Premium White Background */
        border-radius: 0 !important;
        /* Full screen, no rounded top */
        box-shadow: 8px 0 32px rgba(15, 23, 42, 0.12);
        flex-direction: column;
        justify-content: flex-start;
        transform: translateX(-100%);
        /* Start off-screen to the left */
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        overflow: hidden;
        align-items: stretch !important;
        padding-top: env(safe-area-inset-top, 0px) !important;
        padding-bottom: env(safe-area-inset-bottom, 0px) !important;
    }

    body.toggle-sidebar .mobile-sidebar {
        transform: translateX(0);
        /* Slide in from left */
    }

    /* Small drag handle at the top */
    .mobile-sidebar-drag-handle {
        width: 40px;
        height: 4px;
        background-color: #cbd5e1;
        border-radius: 9999px;
        margin: 12px auto 4px auto;
        flex-shrink: 0;
    }

    /* Drawer Header */
    .mobile-sidebar-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 8px 24px 12px 24px;
        background-color: #ffffff;
        flex-shrink: 0;
    }

    .mobile-sidebar-brand {
        font-size: 22px;
        font-weight: 800;
        color: #1e3a8a;
        /* Deep navy/indigo blue */
        font-family: 'Poppins', sans-serif;
        letter-spacing: -0.5px;
    }

    .mobile-sidebar-close {
        background: transparent;
        border: none;
        font-size: 20px;
        color: #4b5563;
        cursor: pointer;
        padding: 4px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: color 0.2s;
    }

    .mobile-sidebar-close:hover {
        color: #111827;
    }

    /* Compact Profile Card */
    .mobile-sidebar-profile-card {
        padding: 12px 16px;
        margin: 8px 24px 16px 24px;
        background-color: #f8fafc;
        border: 1px solid rgba(59, 66, 196, 0.08);
        border-radius: 16px;
        flex-shrink: 0;
    }

    .mobile-sidebar-profile-link {
        display: flex;
        align-items: center;
        gap: 12px;
        text-decoration: none !important;
    }

    .mobile-sidebar-avatar-wrapper {
        position: relative;
        width: 44px;
        height: 44px;
        flex-shrink: 0;
    }

    .mobile-sidebar-avatar {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        border: 2px solid #3b42c4;
        object-fit: cover;
    }

    .mobile-sidebar-status-dot {
        position: absolute;
        bottom: 0;
        right: 0;
        width: 12px;
        height: 12px;
        background-color: #10b981;
        border: 2px solid #ffffff;
        border-radius: 50%;
    }

    .mobile-sidebar-profile-details {
        display: flex;
        flex-direction: column;
        overflow: hidden;
        justify-content: center;
    }

    .mobile-sidebar-profile-name {
        font-size: 14px;
        font-weight: 700;
        color: #1f2937;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        line-height: 1.2;
    }

    .mobile-sidebar-profile-role {
        font-size: 11px;
        font-weight: 500;
        color: #6b7280;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        margin-top: 2px;
        line-height: 1.1;
    }

    .mobile-sidebar-profile-dept {
        font-size: 10px;
        font-weight: 400;
        color: #9ca3af;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        margin-top: 1px;
        line-height: 1.1;
    }

    .mobile-sidebar-active-badge {
        background-color: #047857;
        color: #ffffff;
        font-size: 9px;
        font-weight: 700;
        padding: 2px 8px;
        border-radius: 9999px;
        align-self: flex-start;
        margin-top: 4px;
        letter-spacing: 0.5px;
        line-height: 1;
    }

    /* Scrollable Navigation Area */
    .mobile-sidebar-nav-container {
        flex-grow: 1;
        width: 100% !important;
        box-sizing: border-box !important;
        overflow-y: auto;
        padding: 0 24px;
        margin-bottom: 8px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        /* Hide scrollbar in Firefox */
        -ms-overflow-style: none;
        /* Hide scrollbar in IE 10+ */
    }

    .mobile-sidebar-nav-container::-webkit-scrollbar {
        display: none !important;
        /* Hide scrollbar in Chrome/Safari */
    }

    .mobile-sidebar-nav {
        width: 100% !important;
        box-sizing: border-box !important;
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex !important;
        flex-direction: column !important;
        gap: 8px;
        align-items: stretch !important;
        /* Force children to stretch horizontally */
    }

    .mobile-nav-item {
        width: 100% !important;
        box-sizing: border-box !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        /* Force children to stretch horizontally */
    }

    /* Link and Toggle styling - flex row with high contrast */
    .mobile-nav-link,
    .mobile-nav-toggle {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 12px !important;
        /* Gap set to 12px per specification */
        padding: 6px 8px;
        /* Compact padding for 56px row height */
        border-radius: 12px;
        color: #1f2937 !important;
        /* Normal IM dark text colour for high contrast */
        text-decoration: none !important;
        font-size: 14px;
        font-weight: 600;
        transition: all 0.2s ease;
        background: transparent;
        border: none;
        width: 100% !important;
        box-sizing: border-box !important;
        text-align: left;
        cursor: pointer;
        min-width: 0;
        /* Enable flex container shrinking for children */
        flex-shrink: 0;
    }

    .mobile-nav-link:hover,
    .mobile-nav-toggle:hover {
        background-color: rgba(59, 66, 196, 0.05);
        color: #3b42c4 !important;
    }

    .mobile-nav-toggle:focus {
        outline: none;
    }

    /* Icon Box - size optimized to 44px */
    .mobile-nav-icon-box {
        width: 44px;
        height: 44px;
        background-color: #f1f5f9;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        transition: all 0.2s ease;
    }

    .mobile-nav-icon-box i {
        font-size: 16px;
        color: #4b5563;
        transition: all 0.2s ease;
    }

    /* Prevent Menu Text Wrapping & support responsive ellipsis */
    .mobile-nav-text {
        flex: 1;
        min-width: 0;
        /* Crucial: allows text wrapper to shrink and trigger ellipsis instead of overflowing/breaking flex */
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        color: inherit;
    }

    /* Active Link State */
    .mobile-nav-item.active .mobile-nav-link {
        color: #3b42c4 !important;
    }

    .mobile-nav-item.active .mobile-nav-link .mobile-nav-icon-box {
        background-color: #e0e7ff;
    }

    .mobile-nav-item.active .mobile-nav-link .mobile-nav-icon-box i {
        color: #3b42c4;
    }

    /* Active Expanded Parent Accordion State */
    .mobile-nav-toggle.open {
        background-color: #3b42c4 !important;
        color: #ffffff !important;
        box-shadow: 0 4px 12px rgba(59, 66, 196, 0.2);
    }

    .mobile-nav-toggle.open .mobile-nav-icon-box {
        background-color: rgba(255, 255, 255, 0.2) !important;
    }

    .mobile-nav-toggle.open .mobile-nav-icon-box i {
        color: #ffffff !important;
    }

    .mobile-nav-toggle.open .mobile-nav-chevron {
        color: #ffffff !important;
    }

    .mobile-nav-chevron {
        transition: transform 0.25s ease;
        margin-left: auto;
        font-size: 14px;
        color: #6b7280;
        width: 24px;
        flex-shrink: 0;
        text-align: right;
    }

    .mobile-nav-toggle.open .mobile-nav-chevron,
    .mobile-submenu-toggle.open .mobile-nav-chevron {
        transform: rotate(180deg);
    }

    /* Submenu Drawer */
    .mobile-submenu {
        list-style: none;
        padding: 0;
        margin: 0;
        max-height: 0;
        opacity: 0;
        overflow: hidden;
        display: flex !important;
        flex-direction: column;
        gap: 6px;
        margin-top: 0;
        margin-bottom: 0;
        border-left: 2px solid #e2e8f0;
        margin-left: 26px;
        padding-left: 16px;
        transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease, margin 0.3s ease, padding 0.3s ease;
    }

    .mobile-submenu.open {
        max-height: 500px;
        opacity: 1;
        margin-top: 8px;
        margin-bottom: 8px;
    }

    .mobile-submenu-item {
        display: flex;
    }

    .mobile-submenu-item a {
        display: block;
        width: 100%;
        padding: 6px 12px;
        font-size: 13px;
        font-weight: 600;
        color: #374151 !important;
        /* Premium dark contrast text */
        text-decoration: none !important;
        border-radius: 8px;
        transition: all 0.2s ease;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .mobile-submenu-item a:hover {
        background-color: rgba(59, 66, 196, 0.05);
        color: #3b42c4;
    }

    /* Active Submenu Item Layout */
    .mobile-submenu-item.active a {
        background-color: #e0e7ff !important;
        /* Light purple card background */
        color: #3b42c4 !important;
        font-weight: 700;
    }

    /* Nested Submenu (Third level e.g. Exam, Settings) */
    .mobile-submenu-item-nested {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .mobile-submenu-toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding: 6px 12px;
        font-size: 13px;
        font-weight: 600;
        color: #374151 !important;
        /* Premium dark contrast text */
        background: transparent;
        border: none;
        cursor: pointer;
        border-radius: 8px;
        text-align: left;
        transition: all 0.2s ease;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .mobile-submenu-toggle:hover {
        background-color: rgba(59, 66, 196, 0.05);
        color: #3b42c4;
    }

    .mobile-submenu-toggle.open {
        color: #3b42c4;
        font-weight: 700;
    }

    .mobile-submenu-nested {
        list-style: none;
        padding: 0;
        margin: 0;
        max-height: 0;
        opacity: 0;
        overflow: hidden;
        display: flex !important;
        flex-direction: column;
        gap: 4px;
        margin-top: 0;
        margin-bottom: 0;
        border-left: 1.5px dashed #cbd5e1;
        margin-left: 20px;
        padding-left: 12px;
        transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease, margin 0.3s ease, padding 0.3s ease;
    }

    .mobile-submenu-nested.open {
        max-height: 500px;
        opacity: 1;
        margin-top: 4px;
        margin-bottom: 4px;
    }

    .mobile-subchild-item a {
        display: block;
        width: 100%;
        padding: 6px 10px;
        font-size: 12px;
        font-weight: 500;
        color: #374151 !important;
        /* Premium dark contrast text */
        text-decoration: none !important;
        border-radius: 6px;
        transition: all 0.2s ease;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .mobile-subchild-item a:hover {
        background-color: rgba(59, 66, 196, 0.05);
        color: #3b42c4;
    }

    .mobile-subchild-item.active a {
        background-color: #e0e7ff !important;
        color: #3b42c4 !important;
        font-weight: 700;
    }

    /* Fixed Footer Card */
    .mobile-sidebar-footer {
        background-color: #ffffff !important;
        /* Premium White Background, matches sheet */
        padding: 10px 24px calc(10px + env(safe-area-inset-bottom, 0px)) 24px;
        border-top: 1px solid rgba(0, 0, 0, 0.06);
        display: flex;
        flex-direction: column;
        gap: 8px;
        /* Reduced gap */
        flex-shrink: 0;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Footer language switch */
    .mobile-lang-switch {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
    }

    .mobile-lang-option {
        font-size: 12px;
        font-weight: 700;
        color: #4b5563 !important;
        text-decoration: none !important;
        transition: color 0.2s ease;
    }

    .mobile-lang-option.active {
        color: #3b42c4 !important;
    }

    .mobile-lang-track {
        position: relative;
        width: 40px;
        height: 20px;
        background: #cbd5e1;
        border-radius: 9999px;
        cursor: pointer;
        display: inline-block;
    }

    .mobile-lang-handle {
        position: absolute;
        top: 2px;
        width: 16px;
        height: 16px;
        background: #3b42c4;
        border-radius: 50%;
        transition: left 0.2s ease;
    }

    .mobile-lang-handle.left {
        left: 2px;
    }

    .mobile-lang-handle.right {
        left: calc(100% - 18px);
    }

    /* Red Rounded Logout Button */
    .mobile-logout-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        background-color: #dc2626 !important;
        /* Solid premium red */
        color: #ffffff !important;
        padding: 10px 16px;
        border-radius: 9999px;
        font-weight: 700;
        font-size: 13px;
        /* Smaller font */
        border: none;
        width: 100%;
        cursor: pointer;
        box-shadow: 0 4px 12px rgba(220, 38, 38, 0.15);
        transition: background-color 0.2s ease;
    }

    .mobile-logout-btn:hover {
        background-color: #b91c1c !important;
    }

    .mobile-logout-btn i {
        font-size: 16px;
    }

    .mobile-version-text {
        font-size: 10px;
        /* Smaller version text */
        font-weight: 500;
        color: #9ca3af;
        text-align: center;
        margin-top: 2px;
    }

    /* Hide vehicle-nav-container in mobile view */
    .vehicle-nav-container {
        display: none !important;
    }

    /* Add top spacing to the page header in mobile view */
    .bos-page-header {
        padding-top: 30px !important;
    }
}


/*--------------------------------------------------------------
# BOS Dashboard Styles
# Purpose: Shared dashboard layout, cards, stats, banners, and mobile dashboard UI.
--------------------------------------------------------------*/
.bos-dashboard {
    font-family: var(--bos-font-family) !important;
    background-color: var(--bos-surface);
    padding: 30px 24px;
    min-height: 100vh;
}

.bos-dashboard-card {
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 24px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
}

.bos-dashboard-banner {
    color: #ffffff;
    border-radius: 24px;
    box-shadow: 0 10px 25px rgba(63, 65, 181, 0.15);
}

.bos-dashboard-stat {
    border-radius: 24px;
    box-shadow: 0 10px 25px rgba(15, 23, 42, 0.08);
}

.bos-dashboard-title {
    color: var(--bos-neutral-dark);
    font-weight: 800;
}

.bos-dashboard-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 0;
    cursor: pointer;
    transition: all 0.2s ease;
}

/* Premium Redesigned Dashboard Styles */

.section-dashboard.private {
    font-family: var(--bos-font-family) !important;
    background-color: #f8fafc;
    padding: 0 0 24px;
    min-height: 100vh;
}

body:has(.section-dashboard.private) .bos-page-header+.section-dashboard.private {
    margin-top: -4px;
}

.section-dashboard.private .dashboard-header {
    margin-top: 0;
    padding-top: 0;
}

.section-dashboard.private .row.g-4:first-of-type {
    margin-top: 0;
}

.bos-attendance-table-wrap {
    width: 100%;
}

.bos-attendance-table {
    width: 100%;
    margin-bottom: 0;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0;
}

.bos-attendance-table th,
.bos-attendance-table td {
    padding: 16px 18px;
    vertical-align: top;
}

.bos-attendance-table th:first-child,
.bos-attendance-table td:first-child {
    width: 34%;
}

.bos-attendance-request-name {
    color: #1e293b;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.5;
}

.bos-attendance-request-actions {
    width: 66%;
}

.bos-attendance-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: stretch;
}

.bos-attendance-actions>.btn {
    flex: 1 1 160px;
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.25;
    white-space: normal;
    text-align: center;
}

.bos-attendance-btn-info {
    background-color: #4a9bd3 !important;
    border-color: #4a9bd3 !important;
}

.bos-attendance-btn-info:hover,
.bos-attendance-btn-info:focus {
    background-color: #3c89be !important;
    border-color: #3c89be !important;
}

@media (max-width: 1399px) {

    .bos-attendance-table th:first-child,
    .bos-attendance-table td:first-child {
        width: 30%;
    }

    .bos-attendance-actions>.btn {
        flex-basis: calc(50% - 5px);
    }
}

@media (max-width: 1199px) {
    .section-dashboard.private {
        padding-bottom: 18px;
    }

    .bos-attendance-table th,
    .bos-attendance-table td {
        padding: 14px 14px;
    }

    .bos-attendance-table th:first-child,
    .bos-attendance-table td:first-child,
    .bos-attendance-request-actions {
        width: auto;
    }

    .bos-attendance-actions>.btn {
        flex: 1 1 calc(50% - 5px);
    }
}

@media (max-width: 767px) {
    .bos-attendance-table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .bos-attendance-table {
        min-width: 720px;
    }
}

/* Welcome Header */
.welcome-title {
    font-size: 32px;
    font-weight: 800;
    color: #1e3a8a;
    /* Slate Deep Navy */
    margin: 0;
    letter-spacing: -0.5px;
}

.welcome-subtitle {
    font-size: 15px;
    font-weight: 500;
    color: #64748b;
    margin: 6px 0 0 0;
}

.holiday-alert-pill {
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    padding: 10px 18px;
    border-radius: 9999px;
    font-size: 14px;
    font-weight: 600;
    color: var(--bos-primary);
    display: flex;
    align-items: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.02);
}

/* Attendance Status Card (Green Gradient) */
.attendance-card {
    background: linear-gradient(135deg, #34d399, #059669);
    /* Rich Emerald Green */
    border-radius: 24px;
    padding: 28px;
    color: #ffffff;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 10px 25px rgba(5, 150, 105, 0.15);
    min-height: 280px;
    position: relative;
    overflow: hidden;
}

.attendance-icon-wrapper {
    background-color: rgba(255, 255, 255, 0.2);
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}

.live-status-badge {
    background-color: #047857;
    color: #ffffff;
    font-size: 11px;
    font-weight: 800;
    padding: 6px 14px;
    border-radius: 9999px;
    letter-spacing: 0.5px;
}

.attendance-label {
    font-size: 14px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
    margin: 20px 0 4px 0;
}

.attendance-time {
    font-size: 42px;
    font-weight: 800;
    color: #ffffff;
    margin: 0;
    letter-spacing: -1px;
}

.attendance-subtext {
    font-size: 14px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
    margin: 4px 0 20px 0;
}

.btn-keluar-masuk {
    background-color: #ffffff;
    color: #059669;
    /* Green text */
    border: none;
    border-radius: 9999px;
    padding: 12px 24px;
    font-weight: 700;
    font-size: 14px;
    flex-grow: 1;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);
    transition: all 0.2s ease;
}

.btn-keluar-masuk:hover {
    background-color: #f8fafc;
    transform: translateY(-1px);
}

.btn-reset-clock {
    background-color: rgba(255, 255, 255, 0.2);
    color: #ffffff;
    border: none;
    border-radius: 50%;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-reset-clock:hover {
    background-color: rgba(255, 255, 255, 0.3);
    transform: rotate(45deg);
}

/* BOS Primary Gradient Hero Banner */
.promo-banner-card {
    background: linear-gradient(135deg, var(--bos-primary) 0%, #3158A6 62%, var(--bos-secondary) 100%);
    /* BOS primary-to-secondary gradient */
    border-radius: 24px;
    padding: 36px;
    color: #ffffff;
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-shadow: 0 10px 25px rgba(99, 102, 241, 0.15);
    min-height: 280px;
    overflow: hidden;
}

.promo-badge {
    background-color: rgba(255, 255, 255, 0.2);
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    padding: 6px 16px;
    border-radius: 9999px;
    align-self: flex-start;
    margin-bottom: 20px;
}

.promo-title {
    font-size: 28px;
    font-weight: 800;
    color: #ffffff;
    max-width: 65%;
    line-height: 1.3;
    margin: 0 0 12px 0;
    letter-spacing: -0.5px;
}

.promo-desc {
    font-size: 15px;
    font-weight: 500;
    max-width: 65%;
    color: rgba(255, 255, 255, 0.9);
    margin: 0;
    line-height: 1.5;
}

.promo-mockup-graphic {
    position: absolute;
    right: -20px;
    bottom: -20px;
    width: 320px;
    height: 220px;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 16px 0 0 0;
    border: 4px solid rgba(255, 255, 255, 0.15);
    box-shadow: -10px -10px 30px rgba(0, 0, 0, 0.08);
    transform: rotate(-5deg);
}

/* Clean white interactive cards */
.custom-card {
    background-color: #ffffff;
    border-radius: 24px;
    padding: 28px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
    border: 1px solid #e2e8f0;
    height: 100%;
}

.card-section-title {
    font-size: 18px;
    font-weight: 800;
    color: #1e293b;
    margin: 0;
    display: flex;
    align-items: center;
}

.calendar-toggle-pills {
    background-color: #f1f5f9;
    padding: 4px;
    border-radius: 9999px;
    display: flex;
    gap: 2px;
}

.toggle-pill {
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 700;
    border-radius: 9999px;
    cursor: pointer;
    color: #64748b;
    transition: all 0.2s;
}

.toggle-pill.active {
    background-color: #ffffff;
    color: #1e293b;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

/* Event List style */
.calendar-events-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.event-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px;
    border-radius: 16px;
    background-color: #f8fafc;
    border: 1px solid #f1f5f9;
    transition: all 0.2s;
}

.event-item:hover {
    transform: translateX(3px);
    border-color: #cbd5e1;
}

.event-date-badge {
    background-color: #e4e7ff;
    /* Soft light blue/indigo */
    border-radius: 12px;
    width: 54px;
    height: 54px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.event-month {
    font-size: 10px;
    font-weight: 800;
    color: var(--bos-primary);
    text-transform: uppercase;
}

.event-day {
    font-size: 18px;
    font-weight: 800;
    color: var(--bos-primary);
    line-height: 1.1;
}

.event-details {
    overflow: hidden;
}

.event-title {
    font-size: 15px;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.event-info {
    font-size: 12px;
    font-weight: 500;
    color: #64748b;
    margin: 2px 0 0 0;
}

.add-event-dashed-btn {
    border: 2px dashed #cbd5e1;
    border-radius: 16px;
    padding: 14px;
    text-align: center;
    color: #64748b;
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    display: block;
    transition: all 0.2s;
    margin-top: 6px;
}

.add-event-dashed-btn:hover {
    border-color: #94a3b8;
    color: #334155;
    background-color: #f8fafc;
}

/* Announcements Card */
.view-all-link {
    font-size: 13px;
    font-weight: 700;
    color: var(--bos-primary);
    text-decoration: none;
    transition: all 0.2s;
}

.view-all-link:hover {
    color: #1d4ed8;
    text-decoration: underline;
}

.featured-ann-card {
    background-color: #ffffff;
    border: 1px solid #f1f5f9;
    border-radius: 16px;
    padding: 12px;
    transition: all 0.2s;
}

.featured-ann-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
}

.featured-ann-image-wrapper {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 12px;
}

.featured-ann-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background-color: #ffedd5;
    color: #c2410c;
    font-size: 11px;
    font-weight: 800;
    padding: 4px 10px;
    border-radius: 6px;
    z-index: 2;
}

.ann-placeholder-graphic {
    background: linear-gradient(135deg, #eef2ff, #e4e7ff);
    height: 140px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    position: relative;
}

.graphic-logo {
    font-size: 18px;
    font-weight: 800;
    color: var(--bos-primary);
}

.graphic-login-card {
    background: #ffffff;
    border-radius: 6px;
    width: 60px;
    padding: 6px;
    margin-top: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.graphic-login-line {
    height: 3px;
    background-color: #e2e8f0;
    border-radius: 2px;
}

.graphic-login-line-short {
    height: 3px;
    background-color: #e2e8f0;
    border-radius: 2px;
    width: 70%;
}

.graphic-login-btn {
    height: 6px;
    background-color: var(--bos-primary);
    border-radius: 2px;
}

.featured-ann-title {
    font-size: 15px;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
    line-height: 1.4;
}

.featured-ann-meta {
    font-size: 11px;
    font-weight: 500;
    color: #94a3b8;
    margin: 6px 0 0 0;
}

.ann-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ann-item {
    border: 1px solid #f1f5f9;
    border-radius: 16px;
    padding: 16px;
    background-color: #f8fafc;
    transition: all 0.2s;
}

.ann-item:hover {
    border-color: #e2e8f0;
    background-color: #ffffff;
    transform: translateX(3px);
}

.ann-item-title {
    font-size: 14px;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
    line-height: 1.4;
}

.ann-item-meta {
    font-size: 11px;
    font-weight: 500;
    color: #94a3b8;
    margin: 4px 0 0 0;
}

/* Bottom Row metrics */
.metric-card {
    border-radius: 24px;
    padding: 24px;
    height: 100%;
    display: flex;
    flex-direction: column;
    min-height: 150px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
}

.bg-indigo-purple {
    background-color: var(--bos-primary);
    /* BOS primary */
    color: #ffffff;
}

.bg-light-blue {
    background-color: #e0f2fe;
    /* Light blue */
    color: #0369a1;
}

.bg-light-peach {
    background-color: #ffedd5;
    /* Soft peach */
    color: #c2410c;
}

.metric-label {
    font-size: 11px;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.7);
    letter-spacing: 1px;
    margin: 0 0 8px 0;
}

.metric-label-dark {
    font-size: 14px;
    font-weight: 700;
    color: #1e3a8a;
    margin: 0;
}

.metric-value {
    font-size: 36px;
    font-weight: 800;
    color: #ffffff;
    margin: 0;
}

.metric-value-dark {
    font-size: 32px;
    font-weight: 800;
    color: #1e3a8a;
    margin: 2px 0 0 0;
}

.metric-unit {
    font-size: 18px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.8);
}

.metric-progress-wrapper {
    background-color: rgba(255, 255, 255, 0.2);
    height: 8px;
    border-radius: 4px;
    margin: 16px 0 8px 0;
    overflow: hidden;
}

.metric-progress-bar {
    background-color: #ffffff;
    height: 100%;
    border-radius: 4px;
}

.metric-subtext {
    font-size: 12px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.8);
    margin: 0;
}

.metric-subtext-dark {
    font-size: 12px;
    font-weight: 600;
    color: #3b82f6;
    margin: 2px 0 0 0;
}

.bg-light-peach .metric-subtext-dark {
    color: #d97706;
}

.metric-icon-circle {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
}

.bg-blue-100 {
    background-color: #dbeafe;
}

.text-blue-600 {
    color: #2563eb;
}

.metric-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.bg-peach-100 {
    background-color: #ffedd5;
}

.text-peach-800 {
    color: #ea580c;
}

.btn-download-payslip {
    background-color: #451a03;
    /* Deep brown */
    color: #ffffff !important;
    text-align: center;
    padding: 10px 16px;
    border-radius: 9999px;
    font-weight: 700;
    font-size: 13px;
    text-decoration: none;
    margin-top: auto;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-download-payslip:hover {
    background-color: #3b1401;
    transform: translateY(-1px);
}

/* Advanced accordion styles at bottom */
.advanced-toggle-btn {
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 16px 24px;
    width: 100%;
    text-align: left;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 700;
    color: #475569;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.01);
}

.advanced-toggle-btn:hover {
    background-color: #f8fafc;
    color: #1e293b;
}

.advanced-content {
    display: none;
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-top: none;
    border-radius: 0 0 16px 16px;
    padding: 28px;
    margin-top: -8px;
    margin-bottom: 30px;
}

.fc .fc-list-event:hover td {
    background-color: #fff !important;
    color: #000 !important;
}

/* Mobile Mockup Responsive Layout Styles (d-md-none) */
@media (max-width: 767px) {
    body:has(.section-dashboard.private) #header {
        display: none !important;
    }

    body:has(.section-dashboard.private) .language-switcher {
        display: none !important;
    }

    body:has(.section-dashboard.private) #main.main {
        padding-top: 0 !important;
    }

    .section-dashboard.private {
        padding: 18px 18px 0 !important;
        background:
            radial-gradient(circle at 90% 4%, rgba(63, 65, 181, 0.08), transparent 24%),
            var(--bos-surface);
    }

    .mobile-header-bar {
        position: sticky;
        top: 0;
        z-index: 30;
        background: rgba(246, 249, 255, 0.92);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        padding: 18px 18px 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid rgba(226, 232, 240, 0.72);
        margin-bottom: 22px;
    }

    .mobile-logo-title {
        display: block;
        color: var(--bos-primary);
        font-size: clamp(22px, 7vw, 30px);
        font-weight: 800;
        line-height: 1;
        letter-spacing: -0.04em;
        font-family: var(--bos-font-family);
    }

    .mobile-logo-subtitle {
        display: block;
        margin-top: 5px;
        color: var(--bos-neutral);
        font-size: 10px;
        font-weight: 800;
        letter-spacing: 0.18em;
        text-transform: uppercase;
    }

    .mobile-header-actions {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        flex-shrink: 0;
    }

    .mobile-language-pill {
        min-width: 38px;
        min-height: 34px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: #ffffff !important;
        background: var(--bos-primary);
        border-radius: 10px;
        box-shadow: 0 8px 18px rgba(63, 65, 181, 0.18);
        font-size: 12px;
        font-weight: 900;
        line-height: 1;
        text-decoration: none !important;
    }

    .mobile-header-actions .bi-bell {
        color: #0f1b33;
        font-size: 22px;
        line-height: 1;
    }

    .mobile-header-avatar {
        width: 38px;
        height: 38px;
        object-fit: cover;
        border: 2px solid #ffffff;
        border-radius: 14px;
        box-shadow: 0 8px 18px rgba(15, 23, 42, 0.12);
    }

    .mobile-welcome-greet {
        font-size: 13px;
        color: #6b7280;
        margin-bottom: 2px;
    }

    .mobile-welcome-name {
        font-size: 22px;
        font-weight: 800;
        color: #1e293b;
        margin-bottom: 24px;
        font-family: var(--bos-font-family);
    }

    .mobile-card-gradient {
        background: linear-gradient(135deg, var(--bos-primary) 0%, #3158A6 62%, var(--bos-secondary) 100%);
        border-radius: 24px;
        padding: 24px;
        color: #ffffff;
        margin-bottom: 28px;
        box-shadow: 0 12px 28px rgba(59, 66, 196, 0.22);
        position: relative;
    }

    .mobile-card-title {
        font-size: 12px;
        font-weight: 600;
        opacity: 0.8;
        letter-spacing: 0.5px;
        margin-bottom: 4px;
    }

    .mobile-card-date {
        font-size: 20px;
        font-weight: 800;
        margin-bottom: 20px;
    }

    .mobile-card-fingerprint {
        position: absolute;
        top: 24px;
        right: 24px;
        width: 48px;
        height: 48px;
        border-radius: 14px;
        background: rgba(255, 255, 255, 0.15);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 22px;
    }

    .mobile-card-capsules {
        display: flex;
        gap: 12px;
        margin-bottom: 20px;
    }

    .mobile-card-capsule {
        flex: 1;
        background: rgba(255, 255, 255, 0.08);
        border-radius: 12px;
        padding: 10px 12px;
        border: 1px solid rgba(255, 255, 255, 0.08);
    }

    .mobile-card-capsule-lbl {
        font-size: 10px;
        opacity: 0.65;
        margin-bottom: 2px;
    }

    .mobile-card-capsule-val {
        font-size: 13px;
        font-weight: 700;
    }

    .btn-mint-green {
        background-color: #4ade80 !important;
        /* Mint green */
        color: #064e3b !important;
        /* Forest dark green */
        border: none !important;
        border-radius: 9999px !important;
        /* Circular pill shape */
        padding: 14px 20px !important;
        font-weight: 800 !important;
        font-size: 15px !important;
        width: 100% !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        transition: all 0.2s ease !important;
        box-shadow: 0 6px 16px rgba(74, 222, 128, 0.3) !important;
    }

    .btn-mint-green:active {
        transform: scale(0.98);
    }

    .mobile-section-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 16px;
    }

    .mobile-section-title {
        font-size: 16px;
        font-weight: 800;
        color: #1e293b;
        margin: 0;
        font-family: var(--bos-font-family);
    }

    .mobile-section-link {
        font-size: 12px;
        font-weight: 700;
        color: var(--bos-primary);
        text-decoration: none;
    }

    .mobile-cal-row {
        display: flex;
        justify-content: space-between;
        gap: 8px;
        margin-bottom: 28px;
    }

    .mobile-cal-day {
        flex: 1;
        background-color: #eff6ff;
        /* Soft blue */
        border-radius: 16px;
        padding: 12px 6px;
        text-align: center;
        transition: all 0.2s;
        color: #2b31a8;
        border: 1px solid rgba(59, 130, 246, 0.05);
    }

    .mobile-cal-day.active {
        background-color: #2b31a8;
        /* Deep indigo */
        color: #ffffff;
        box-shadow: 0 4px 10px rgba(43, 49, 168, 0.2);
    }

    .mobile-cal-lbl {
        font-size: 9px;
        font-weight: 700;
        text-transform: uppercase;
        margin-bottom: 2px;
        opacity: 0.8;
    }

    .mobile-cal-num {
        font-size: 15px;
        font-weight: 800;
    }

    .mobile-ann-row {
        margin-bottom: 28px;
    }

    .mobile-ann-card {
        background: #ffffff;
        border-radius: 18px;
        padding: 14px 16px;
        display: flex;
        align-items: center;
        gap: 14px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.015);
        border: 1px solid #f1f5f9;
        margin-bottom: 12px;
    }

    .mobile-ann-img {
        width: 44px;
        height: 44px;
        border-radius: 12px;
        object-fit: cover;
        flex-shrink: 0;
        border: 1px solid rgba(0, 0, 0, 0.03);
    }

    .mobile-ann-content {
        flex-grow: 1;
        overflow: hidden;
    }

    .mobile-ann-title {
        font-size: 13px;
        font-weight: 700;
        color: #1e293b;
        margin-bottom: 2px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
    }

    .mobile-ann-desc {
        font-size: 11px;
        color: #6b7280;
        margin-bottom: 4px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
    }

    .mobile-ann-meta {
        font-size: 9px;
        font-weight: 700;
        color: #94a3b8;
        text-transform: uppercase;
    }

    .mobile-metrics-grid {
        display: flex;
        gap: 16px;
        margin-bottom: 28px;
    }

    .mobile-metric-card {
        flex: 1;
        background: #ffffff;
        border-radius: 20px;
        padding: 16px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.015);
        border: 1px solid #f1f5f9;
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .mobile-metric-icon {
        width: 36px;
        height: 36px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 16px;
    }

    .mobile-metric-icon.green {
        background-color: #dcfce7;
        color: #15803d;
    }

    .mobile-metric-icon.orange {
        background-color: #ffedd5;
        color: #c2410c;
    }

    .mobile-metric-title {
        font-size: 14px;
        font-weight: 800;
        color: #1e293b;
        margin: 0;
    }

    .mobile-metric-subtitle {
        font-size: 11px;
        color: #6b7280;
        margin: 0;
    }

    /* BOS Dashboard Mobile HR Module */
    .mobile-hr-stack {
        display: flex;
        flex-direction: column;
        gap: 14px;
        padding-bottom: 24px;
    }

    .mobile-hr-profile-card,
    .mobile-hr-action-card,
    .mobile-hr-info-card {
        background: #ffffff;
        border: 1px solid #e2e8f0;
        border-radius: 20px;
        box-shadow: 0 8px 22px rgba(15, 23, 42, 0.04);
    }

    .mobile-hr-profile-card {
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 16px;
    }

    .mobile-hr-avatar {
        width: 58px;
        height: 58px;
        border-radius: 18px;
        object-fit: cover;
        border: 2px solid #dbeafe;
        flex-shrink: 0;
    }

    .mobile-hr-profile-card h4 {
        color: #1e293b;
        font-size: 14px;
        font-weight: 800;
        margin: 0 0 3px;
        line-height: 1.25;
    }

    .mobile-hr-profile-card p,
    .mobile-hr-profile-card span {
        display: block;
        color: #64748b;
        font-size: 11px;
        margin: 0;
        line-height: 1.45;
    }

    .mobile-hr-action-card,
    .mobile-hr-info-card {
        padding: 16px;
    }

    .mobile-hr-action-head,
    .mobile-hr-info-head {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 12px;
        margin-bottom: 12px;
    }

    .mobile-hr-action-head span,
    .mobile-hr-info-head h4 {
        color: #1e293b;
        font-size: 13px;
        font-weight: 800;
        margin: 0;
        line-height: 1.3;
    }

    .mobile-hr-action-head span i {
        color: var(--bos-primary);
        margin-right: 6px;
    }

    .mobile-hr-action-head small,
    .mobile-hr-info-head span {
        color: var(--bos-primary);
        background: #eef2ff;
        border-radius: 999px;
        font-size: 9px;
        font-weight: 800;
        padding: 4px 8px;
        white-space: nowrap;
    }

    .mobile-hr-action-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
    }

    .mobile-hr-action-grid:has(.mobile-hr-btn:nth-child(4)) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .mobile-hr-action-grid.two {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .mobile-hr-btn {
        border: 0;
        border-radius: 12px;
        min-height: 42px;
        padding: 9px 8px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 5px;
        color: #ffffff !important;
        font-size: 11px;
        font-weight: 800;
        line-height: 1.2;
        text-align: center;
        text-decoration: none !important;
    }

    .mobile-hr-btn.primary {
        background: var(--bos-primary);
    }

    .mobile-hr-btn.secondary {
        background: #3158a6;
    }

    .mobile-hr-btn.success {
        background: var(--bos-secondary);
    }

    .mobile-hr-btn.muted {
        background: #64748b;
    }

    .mobile-hr-info-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .mobile-hr-list-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 10px;
        padding: 10px 0;
        border-top: 1px solid #f1f5f9;
    }

    .mobile-hr-list-row small {
        color: #64748b;
        font-size: 10px;
        font-weight: 700;
        white-space: nowrap;
    }

    .mobile-hr-birthday-row {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 0;
        border-top: 1px solid #f1f5f9;
    }

    .mobile-hr-birthday-row img {
        width: 34px;
        height: 34px;
        border-radius: 50%;
        object-fit: cover;
        flex-shrink: 0;
    }

    .mobile-hr-birthday-row strong,
    .mobile-hr-birthday-row small {
        display: block;
        line-height: 1.3;
    }

    .mobile-hr-birthday-row strong {
        color: #1e293b;
        font-size: 11px;
        font-weight: 800;
    }

    .mobile-hr-birthday-row small {
        color: #64748b;
        font-size: 10px;
    }

    .mobile-hr-empty {
        color: #64748b;
        background: #f8fafc;
        border-radius: 14px;
        padding: 18px 12px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6px;
        font-size: 11px;
        font-weight: 700;
        text-align: center;
    }

    .mobile-hr-empty i {
        color: #94a3b8;
        font-size: 20px;
    }

    .mobile-bottom-nav {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 68px;
        background: rgba(255, 255, 255, 0.85);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border-top: 1px solid rgba(0, 0, 0, 0.05);
        display: flex;
        justify-content: space-around;
        align-items: center;
        z-index: 99999;
        padding-bottom: env(safe-area-inset-bottom);
        box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.04);
    }

    .mobile-nav-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        color: #94a3b8;
        font-size: 10px;
        font-weight: 700;
        transition: all 0.25s ease;
        gap: 3px;
        width: 25%;
        height: 100%;
    }

    .mobile-nav-item i {
        font-size: 20px;
        transition: transform 0.25s ease;
    }

    .mobile-nav-item.active {
        color: var(--bos-primary);
    }

    .mobile-nav-item.active i {
        transform: translateY(-2px);
    }
}

body {
    font-family: var(--bos-font-family);
    background: #f6f9ff;
    color: #444444;
}

a {
    color: var(--primary-color);
    text-decoration: none !important;
}

a:hover {
    color: #717ff5;
    text-decoration: none;
}

.btn-primary {
    background-color: var(--primary-color) !important;
    color: white !important;
    padding: 5px 30px;
    margin-left: 15px;
    border-color: var(--primary-color) !important;
}

.btn-info {
    color: white !important;
    padding: 5px 30px;
    margin-left: 15px;
}

.btn-secondary {
    color: white !important;
    padding: 5px 30px;
    margin-left: 15px;
}

.btn-success {
    color: white !important;
    padding: 5px 30px;
    margin-left: 15px;
    margin: 0 5px 5px 0;
}

.btn-danger {
    color: white !important;
    padding: 5px 30px;
    margin-left: 15px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--bos-font-family);
    color: rgba(28, 36, 52, 1);
}

.fs-12 {
    font-size: 0.75rem;
}

.fs-13 {
    font-size: 0.813rem;
}

.fs-14 {
    font-size: 0.875rem;
}

.fs-15 {
    font-size: 0.938rem;
}

.fs-18 {
    font-size: 1.125rem;
}

.fs-21 {
    font-size: 1.313rem;
}

h3,
.h3,
h2,
.h2 {
    font-size: var(--bs-subtitle-font-size);
}

.purple-text {
    color: var(--primary-color);
}

.red-text {
    color: #ff0000;
    font-size: small;
}

.mw-250 {
    max-width: 250px;
    min-width: 140px;
}

.me-n1 {
    margin-right: -.25rem !important;
}

.btn.btn-active {
    background-color: #000 !important;
    border: solid 1px #000 !important;
    color: #fff !important;
}

.custom-link:hover {
    color: white !important;
    text-decoration: none;
}

.sidebar-show-menu {
    position: absolute;
    top: 40px;
    font-size: 30px;
    left: 20px;
    z-index: 123212321;
}

body.toggle-sidebar .sidebar-show-menu {
    left: 240px;
}

body.toggle-sidebar .sidebar-show-menu .bi-list::before {
    content: "\f12f";
}

.btn-custom {
    background-color: var(--primary-color);
    color: white;
    border: none;
    border-radius: 8px;
    padding: 5px 20px;
    text-align: center;
    text-decoration: none;
    font-size: 16px;
    display: inline-block;
    cursor: pointer;
    transition: all 0.3s ease;
    margin: 0 5px 5px 0;
}

.btn-danger {
    border: none;
    border-radius: 8px;
    padding: 5px 20px;
    text-align: center;
    text-decoration: none;
    font-size: 16px;
    display: inline-block;
    cursor: pointer;
    transition: all 0.3s ease;
    margin: 0 5px 5px 0;
}

.btn-custom:hover {
    background-color: var(--bs-btn-hover-bg);
}

.btn-link {
    background: transparent;
    padding: 0;
}

.btn-custom {
    background-color: var(--primary-color);
    /* BOS primary background */
    color: white;
    /* White text */
    border: none;
    /* No border */
    border-radius: 8px;
    /* Rounded corners */
    padding: 5px 20px;
    /* Button padding */
    text-align: center;
    /* Center the text */
    text-decoration: none;
    /* Remove underline for links */
    font-size: 16px;
    /* Adjust font size */
    display: inline-block;
    /* Allow proper spacing for multiple buttons */
    cursor: pointer;
    /* Pointer cursor on hover */
    transition: all 0.3s ease;
    /* Smooth transition for hover effects */
    margin: 0 5px 5px 0;

}

/* Hover effect */
.btn-custom:hover {
    background-color: var(--bos-primary-dark);
    /* BOS primary hover */
    color: #FFF !important;
}

/* Focus styles (to remove blue border) */
.btn-custom:focus {
    outline: none;
    /* Remove focus outline */
    box-shadow: none;
    /* Remove any browser-specific glow */
}

/*--------------------------------------------------------------
# Main
--------------------------------------------------------------*/
#main {
    /*margin-top: 90px;*/
    padding: 20px 30px;
    transition: all 0.3s;
}

.select2-container {
    border: 2px solid var(--bos-primary-dark);
    border-radius: 5px;
    padding: 5px;
    margin-right: 15px;
}

.staff-management .select2-container {
    background-color: #F3F3F3;
    border-radius: 8px;
    border: 1px;
    box-sizing: border-box;
    color: #444;
    font-size: 14px;
    padding: 10px;
    width: 100%;
    border: 0 !important;
    max-width: 400px;
}

.staff-management .select2-container--default .select2-selection--single .select2-selection__arrow {
    top: 15px;
}

.staff-management .select2-container--default .select2-selection--single {
    background-color: transparent;
    border: 0;
}

.select2-container--default .select2-selection--single {
    border: 0;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    top: 6px;
}

@media (max-width: 1199px) {
    #main {
        padding: 20px;
    }
}

/*--------------------------------------------------------------
# Dashboard
--------------------------------------------------------------*/
.private .cutlet {
    height: 22rem;
    /* Uniform height for all widgets */
    display: flex;
    flex-direction: column;
    /* Consistent layout for content inside */
    width: 100%;
    /* Default full width */
    max-width: 49%;
    /* Set maximum width for multi-column layouts */
    box-sizing: border-box;
    /* Include padding and border in size calculations */
    margin-bottom: 1rem;
    /* Spacing between widgets */

}


.private .card {
    height: 100%;
    /* Ensure the card takes up the full height of the widget */
    display: flex;
    flex-direction: column;
    /* Align content vertically */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    /* Optional: Add a subtle shadow */
    border: 1px solid #dee2e6;
    /* Optional: Add a border */
}


.minimize {
    cursor: pointer;
    /* Show pointer cursor for interactivity */
    font-size: 1rem;
    /* Adjust icon size */
}

/* Responsive Layout for Smaller Screens */
@media (max-width: 768px) {
    .cutlet {
        max-width: 100%;
        /* Stack widgets vertically for mobile screens */
    }
}

.private .cutlet.kalendar-saya {
    height: 100%;
    /* Full height */
    display: flex;
}

/*--------------------------------------------------------------
# announcement view more
--------------------------------------------------------------*/
.announcement-viewmore {
    border-radius: 10px;
    background: #FFF;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    padding: 20px;
    margin-top: 40px;

    table {
        width: 100%;
        margin-bottom: 30px;
        table-layout: fixed;
    }

    h2 {
        color: var(--primary-color);
        font-family: var(--bos-font-family);
        font-size: 18px;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
        letter-spacing: 0.36px;
    }

    tr th {
        color: var(--primary-color);
        font-family: var(--bos-font-family);
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        letter-spacing: 0.28px;
        padding-bottom: 10px;
        border-bottom: 1px solid black;
    }

    tr td {
        color: #1C2434;
        font-family: var(--bos-font-family);
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        letter-spacing: 0.28px;
        padding: 10px 0px;
        border-bottom: 1px solid black;
    }

    .custom-search-bar {
        border: 2px solid var(--primary-color) !important;
        border-left: none;
        border-radius: 8px;
        padding: 10px 20px;
        width: 100%;
        font-size: 14px;
        padding-left: 50px;
        margin-right: 20px;
    }

    .custom-search-bar:focus {
        outline: none;
        border-color: var(--primary-color);
        box-shadow: 0 0 8px rgba(111, 30, 211, 0.2);
    }

    .search-icon {
        left: 20px;
        top: 50%;
        transform: translateY(-50%);
        color: var(--primary-color);
        font-size: 18px;
    }
}

/*--------------------------------------------------------------
# alert message
--------------------------------------------------------------*/
.alert {
    text-align: left !important;
    /* Align text to the left */
    display: block !important;
    /* Block display to take up full width */
    width: 100% !important;
    /* Ensure the alert takes full width */
    max-width: 100% !important;
    /* Remove max-width restrictions */
    margin-left: 0 !important;
    /* Align to the left side */
    margin-right: 0 !important;
    /* Prevent any right margins */
    padding: 10px 20px;
    /* Add some padding */
    box-sizing: border-box;
    /* Include padding in the width */
    align-items: flex-start;
}

/* More specific rule for Bootstrap alerts */
div.alert {
    margin-left: 0 !important;
    /* Remove left margin */
    margin-right: 0 !important;
    /* Remove right margin */
    text-align: left !important;
    /* Ensure text is left-aligned */
    padding: 10px 15px !important;
    /* Adjust padding */
    width: 100% !important;
    /* Force full width */
    box-sizing: border-box;
    /* Include padding in width */
}

body {
    width: 100%;
    margin: 0;
    padding: 0;
}

body .alert {
    position: relative;
    left: 0 !important;
    /* Align all alerts to the left-most side */
    margin-left: 0 !important;
}


/*--------------------------------------------------------------
# leave view more
--------------------------------------------------------------*/
.leave-viewmore {
    border-radius: 10px;
    background: #FFF;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    padding: 20px;
    margin-top: 40px;

    table {
        width: 100%;
        margin-bottom: 30px;
        table-layout: fixed;
    }

    h2 {
        color: var(--primary-color);
        font-family: var(--bos-font-family);
        font-size: 18px;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
        letter-spacing: 0.36px;
    }

    tr th {
        color: var(--primary-color);
        font-family: var(--bos-font-family);
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        letter-spacing: 0.28px;
        padding-bottom: 10px;
        border-bottom: 1px solid black;
    }

    tr td {
        color: #1C2434;
        font-family: var(--bos-font-family);
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        letter-spacing: 0.28px;
        padding: 10px 0px;
        border-bottom: 1px solid black;
    }

    .custom-search-bar {
        border: 2px solid var(--primary-color) !important;
        border-left: none;
        border-radius: 8px;
        padding: 10px 20px;
        width: 100%;
        font-size: 14px;
        padding-left: 50px;
        margin-right: 20px;
    }

    .custom-search-bar:focus {
        outline: none;
        border-color: var(--primary-color);
        box-shadow: 0 0 8px rgba(111, 30, 211, 0.2);
    }

    .search-icon {
        left: 20px;
        top: 50%;
        transform: translateY(-50%);
        color: var(--primary-color);
        font-size: 18px;
    }
}

/*--------------------------------------------------------------
# work from home view more
--------------------------------------------------------------*/
.wfh-viewmore {
    border-radius: 10px;
    background: #FFF;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    padding: 20px;
    margin-top: 40px;

    table {
        width: 100%;
        margin-bottom: 30px;
        table-layout: fixed;
    }

    h2 {
        color: var(--primary-color);
        font-family: var(--bos-font-family);
        font-size: 18px;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
        letter-spacing: 0.36px;
    }

    tr th {
        color: var(--primary-color);
        font-family: var(--bos-font-family);
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        letter-spacing: 0.28px;
        padding-bottom: 10px;
        border-bottom: 1px solid black;
    }

    tr td {
        color: #1C2434;
        font-family: var(--bos-font-family);
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        letter-spacing: 0.28px;
        padding: 10px 0px;
        border-bottom: 1px solid black;
    }

    .custom-search-bar {
        border: 2px solid var(--primary-color) !important;
        border-left: none;
        border-radius: 8px;
        padding: 10px 20px;
        width: 100%;
        font-size: 14px;
        padding-left: 50px;
        margin-right: 20px;
    }

    .custom-search-bar:focus {
        outline: none;
        border-color: var(--primary-color);
        box-shadow: 0 0 8px rgba(111, 30, 211, 0.2);
    }

    .search-icon {
        left: 20px;
        top: 50%;
        transform: translateY(-50%);
        color: var(--primary-color);
        font-size: 18px;
    }
}

/*--------------------------------------------------------------
# birthday view more
--------------------------------------------------------------*/
.birthday-viewmore {
    border-radius: 10px;
    background: #FFF;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    padding: 20px;
    margin-top: 40px;

    table {
        width: 100%;
        margin-bottom: 30px;
        table-layout: fixed;
    }

    h2 {
        color: var(--primary-color);
        font-family: var(--bos-font-family);
        font-size: 18px;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
        letter-spacing: 0.36px;
    }

    tr th {
        color: var(--primary-color);
        font-family: var(--bos-font-family);
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        letter-spacing: 0.28px;
        padding-bottom: 10px;
        border-bottom: 1px solid black;
    }

    tr td {
        color: #1C2434;
        font-family: var(--bos-font-family);
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        letter-spacing: 0.28px;
        padding: 10px 0px;
        border-bottom: 1px solid black;
    }

    .custom-search-bar {
        border: 2px solid var(--primary-color) !important;
        border-left: none;
        border-radius: 8px;
        padding: 10px 20px;
        width: 100%;
        font-size: 14px;
        padding-left: 50px;
        margin-right: 20px;
    }

    .custom-search-bar:focus {
        outline: none;
        border-color: var(--primary-color);
        box-shadow: 0 0 8px rgba(111, 30, 211, 0.2);
    }

    .search-icon {
        left: 20px;
        top: 50%;
        transform: translateY(-50%);
        color: var(--primary-color);
        font-size: 18px;
    }
}

/*--------------------------------------------------------------
# Page Title
--------------------------------------------------------------*/
.pagetitle {
    margin-bottom: 10px;
    padding-top: 20px;
}

.pagetitle h1 {
    font-size: var(--bs-title-font-size);
    margin-bottom: 0;
    font-weight: 600;
    color: #012970;
    letter-spacing: 1px;
}

.pagetitle h4 {
    color: rgba(100, 100, 100, 1);
    font-size: var(--bs-body-font-size);
    font-weight: 400;
    font-family: var(--bos-font-family);
}

/*--------------------------------------------------------------
# Back to top button
--------------------------------------------------------------*/
.back-to-top {
    position: fixed;
    visibility: hidden;
    opacity: 0;
    right: 15px;
    bottom: 15px;
    z-index: 99999;
    background: var(--primary-color);
    width: 40px;
    height: 40px;
    border-radius: 4px;
    transition: all 0.4s;
}

.back-to-top i {
    font-size: 24px;
    color: #fff;
    line-height: 0;
}

.back-to-top:hover {
    background: #6776f4;
    color: #fff;
}

.back-to-top.active {
    visibility: visible;
    opacity: 1;
}

/*--------------------------------------------------------------
# Notification Bell CSS stylings
--------------------------------------------------------------*/
.nav-icon.has-notifications i {
    color: var(--primary-color);
    /* Change bell icon color */
}

.nav-icon .badge {
    background-color: var(--primary-color);
    /* Change badge background color */
    color: #fff;
    /* Ensure the badge text is readable */
}

.nav-icon {
    display: inline-flex;
    align-items: center;
    position: relative;
}

.nav-icon .badge {
    font-size: 0.75rem;
    /* Text size */
    width: 1.2rem;
    /* Badge width */
    height: 1.2rem;
    /* Badge height */
    border-radius: 50%;
    /* Make badge circle shape */
    line-height: 1;
    /* Center the text */
    position: absolute;
    /* Position the badge relative to the bell */
    top: -5px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--primary-color);
    color: white;
}

/*--------------------------------------------------------------
# Override some default Bootstrap stylings
--------------------------------------------------------------*/
/* Dropdown menus */
.dropdown-menu {
    border-radius: 4px;
    padding: 10px 0;
    animation-name: dropdown-animate;
    animation-duration: 0.2s;
    animation-fill-mode: both;
    border: 0;
    box-shadow: 0 5px 30px 0 rgba(82, 63, 105, 0.2);
}

.dropdown-menu .dropdown-header,
.dropdown-menu .dropdown-footer {
    text-align: center;
    font-size: 15px;
    padding: 10px 25px;
}

.dropdown-menu .dropdown-footer a {
    color: #444444;
    text-decoration: underline;
}

.dropdown-menu .dropdown-footer a:hover {
    text-decoration: none;
}

.dropdown-menu .dropdown-divider {
    color: #a5c5fe;
    margin: 0;
}

.dropdown-menu .dropdown-item {
    font-size: 14px;
    padding: 10px 15px;
    transition: 0.3s;
}

.dropdown-menu .dropdown-item i {
    margin-right: 10px;
    font-size: 18px;
    line-height: 0;
}

.dropdown-menu .dropdown-item:hover {
    background-color: #f6f9ff;
}

@media (min-width: 768px) {
    .dropdown-menu-arrow::before {
        content: "";
        width: 13px;
        height: 13px;
        background: #fff;
        position: absolute;
        top: -7px;
        right: 20px;
        transform: rotate(45deg);
        border-top: 1px solid #eaedf1;
        border-left: 1px solid #eaedf1;
    }
}

@keyframes dropdown-animate {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }

    0% {
        opacity: 0;
    }
}

/* Light Backgrounds */
.bg-primary-light {
    background-color: #cfe2ff;
    border-color: #cfe2ff;
}

.bg-secondary-light {
    background-color: #e2e3e5;
    border-color: #e2e3e5;
}

.bg-success-light {
    background-color: #d1e7dd;
    border-color: #d1e7dd;
}

.bg-danger-light {
    background-color: #f8d7da;
    border-color: #f8d7da;
}

.bg-warning-light {
    background-color: #fff3cd;
    border-color: #fff3cd;
}

.bg-info-light {
    background-color: #cff4fc;
    border-color: #cff4fc;
}

.bg-dark-light {
    background-color: #d3d3d4;
    border-color: #d3d3d4;
}

/* Card */
.card {
    margin-bottom: 30px;
    border: none;
    border-radius: 5px;
    box-shadow: 0px 0 30px rgba(1, 41, 112, 0.1);
    padding: 20px;
    display: inline-block;
    width: 100%;
}

.card a.btn {
    margin: 0 auto 15px;
}

.card table form button,
.card table a.btn,
.card table button {
    margin: 0 5px 5px 0;
}

.card table.table td,
.card table.table th {
    text-align: left;
}

.card-header,
.card-footer {
    border-color: #ebeef4;
    background-color: #fff;
    color: #798eb3;
    padding: 15px;
}

.card-title {
    padding: 20px 0 15px 0;
    font-size: 18px;
    font-weight: 500;
    color: #012970;
    font-family: var(--bos-font-family);
}

.card-title span {
    color: #899bbd;
    font-size: 14px;
    font-weight: 400;
}

.card-body {
    padding: 0 20px 20px 20px;
}

.card-img-overlay {
    background-color: rgba(255, 255, 255, 0.6);
}

/* Alerts */
.alert-heading {
    font-weight: 500;
    font-family: var(--bos-font-family);
    font-size: 20px;
}

/* Close Button */
.btn-close {
    background-size: 25%;
}

.btn-close:focus {
    outline: 0;
    box-shadow: none;
}

/* Accordion */
.accordion-item {
    border: 1px solid #ebeef4;
}

.accordion-button:focus {
    outline: 0;
    box-shadow: none;
}

.accordion-button:not(.collapsed) {
    color: #012970;
    background-color: #f6f9ff;
}

.accordion-flush .accordion-button {
    padding: 15px 0;
    background: none;
    border: 0;
}

.accordion-flush .accordion-button:not(.collapsed) {
    box-shadow: none;
    color: var(--primary-color);
}

.accordion-flush .accordion-body {
    padding: 0 0 15px 0;
    color: #3e4f6f;
    font-size: 15px;
}

/* Breadcrumbs */
.breadcrumb {
    font-size: 14px;
    font-family: var(--bos-font-family);
    color: #899bbd;
    font-weight: 600;
}

.breadcrumb a {
    color: #899bbd;
    transition: 0.3s;
}

.breadcrumb a:hover {
    color: #51678f;
}

.breadcrumb .breadcrumb-item::before {
    color: #899bbd;
}

.breadcrumb .active {
    color: #51678f;
    font-weight: 600;
}

/* Bordered Tabs */
.nav-tabs-bordered {
    border-bottom: 2px solid #ebeef4;
}

.nav-tabs-bordered .nav-link {
    margin-bottom: -2px;
    border: none;
    color: #2c384e;
}

.nav-tabs-bordered .nav-link:hover,
.nav-tabs-bordered .nav-link:focus {
    color: var(--primary-color);
}

.nav-tabs-bordered .nav-link.active {
    background-color: #fff;
    color: var(--primary-color);
    border-bottom: 2px solid var(--primary-color);
}

/*--------------------------------------------------------------
# DataTable - Override some of the css
--------------------------------------------------------------*/
div.dataTables_processing {
    margin-left: -50px !important;
    margin-top: -125px !important;
    transform: translate(50%, 50%);
}


/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
.logo {
    line-height: 1;
}

@media (min-width: 1200px) {
    .logo {
        width: 280px;
    }
}

.logo img {
    /*max-height: 26px;*/
    max-height: 6rem;
    margin-right: 6px;
}

.logo img.medium {
    max-height: 3.5rem;
}

.logo span {
    font-size: 26px;
    font-weight: 700;
    color: #012970;
    font-family: var(--bos-font-family);
}

.header {
    transition: all 0.5s;
    z-index: 997;
    height: 90px;
    padding-left: 330px;
    padding-top: 30px;
    /* Toggle Sidebar Button */
    /* Search Bar */
}

.header .toggle-sidebar-btn {
    font-size: 32px;
    padding-left: 10px;
    cursor: pointer;
    color: #012970;
}

.header .search-bar {
    min-width: 360px;
    padding: 0 20px;
}

@media (max-width: 1199px) {
    .header .search-bar {
        position: fixed;
        top: 50px;
        left: 0;
        right: 0;
        padding: 20px;
        box-shadow: 0px 0px 15px 0px rgba(1, 41, 112, 0.1);
        background: white;
        z-index: 9999;
        transition: 0.3s;
        visibility: hidden;
        opacity: 0;
    }

    .header .search-bar-show {
        top: 60px;
        visibility: visible;
        opacity: 1;
    }
}

.header .search-form {
    width: 100%;
}

.header .search-form input {
    border: 0;
    font-size: 14px;
    color: #012970;
    border: 1px solid rgba(1, 41, 112, 0.2);
    padding: 7px 38px 7px 8px;
    border-radius: 3px;
    transition: 0.3s;
    width: 100%;
}

.header .search-form input:focus,
.header .search-form input:hover {
    outline: none;
    box-shadow: 0 0 10px 0 rgba(1, 41, 112, 0.15);
    border: 1px solid rgba(1, 41, 112, 0.3);
}

.header .search-form button {
    border: 0;
    padding: 0;
    margin-left: -30px;
    background: none;
}

.header .search-form button i {
    color: #012970;
}

/*--------------------------------------------------------------
# Header Nav
--------------------------------------------------------------*/
.header-nav ul {
    list-style: none;
}

.header-nav>ul {
    margin: 0;
    padding: 0;
}

.header-nav .nav-icon {
    font-size: 22px;
    color: #012970;
    margin-right: 25px;
    position: relative;
}

.header-nav .nav-profile {
    color: #012970;
}

.header-nav .nav-profile img {
    max-height: 36px;
    border-radius: 10px;
}

.header-nav .nav-profile span {
    font-size: 14px;
    font-weight: 600;
}

.header-nav .badge-number {
    position: absolute;
    inset: -2px -5px auto auto;
    font-weight: normal;
    font-size: 12px;
    padding: 3px 6px;
}

.header-nav .notifications {
    inset: 8px -15px auto auto !important;
}

.header-nav .notifications .notification-item {
    display: flex;
    align-items: center;
    padding: 15px 10px;
    transition: 0.3s;
}

.header-nav .notifications .notification-item i {
    margin: 0 20px 0 10px;
    font-size: 24px;
}

.header-nav .notifications .notification-item h4 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 5px;
}

.header-nav .notifications .notification-item p {
    font-size: 13px;
    margin-bottom: 3px;
    color: #919191;
}

.header-nav .notifications .notification-item:hover {
    background-color: #f6f9ff;
}

.header-nav .messages {
    inset: 8px -15px auto auto !important;
}

.header-nav .messages .message-item {
    padding: 15px 10px;
    transition: 0.3s;
}

.header-nav .messages .message-item a {
    display: flex;
}

.header-nav .messages .message-item img {
    margin: 0 20px 0 10px;
    max-height: 40px;
}

.header-nav .messages .message-item h4 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 5px;
    color: #444444;
}

.header-nav .messages .message-item p {
    font-size: 13px;
    margin-bottom: 3px;
    color: #919191;
}

.header-nav .messages .message-item:hover {
    background-color: #f6f9ff;
}

.header-nav .profile {
    min-width: 240px;
    padding-bottom: 0;
    top: 8px !important;
}

.header-nav .profile .dropdown-header h6 {
    font-size: 18px;
    margin-bottom: 0;
    font-weight: 600;
    color: #444444;
}

.header-nav .profile .dropdown-header span {
    font-size: 14px;
}

.header-nav .profile .dropdown-item {
    font-size: 14px;
    padding: 10px 15px;
    transition: 0.3s;
}

.header-nav .profile .dropdown-item i {
    margin-right: 10px;
    font-size: 18px;
    line-height: 0;
}

.header-nav .profile .dropdown-item:hover {
    background-color: #f6f9ff;
}

/*--------------------------------------------------------------
# Sidebar
--------------------------------------------------------------*/
.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 300px;
    z-index: 9960;
    transition: all 0.3s;
    padding: 20px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #aab7cf transparent;
    box-shadow: 0px 0px 20px rgba(1, 41, 112, 0.1);
    background-color: #fff;
}

@media (max-width: 1199px) {
    .sidebar {
        left: -300px;
    }
}

.sidebar::-webkit-scrollbar {
    width: 5px;
    height: 8px;
    background-color: #fff;
}

.sidebar::-webkit-scrollbar-thumb {
    background-color: #aab7cf;
}

@media (min-width: 1200px) {

    #main,
    #footer {
        margin-left: 300px;
    }
}

@media (max-width: 1199px) {
    .toggle-sidebar .sidebar {
        left: 0;
    }
}

@media (min-width: 1200px) {

    .toggle-sidebar #main,
    .toggle-sidebar #footer {
        margin-left: 0;
    }

    .toggle-sidebar .sidebar {
        left: -300px;
    }
}

.sidebar-logo {
    margin-bottom: 50px;
}

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

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

.sidebar-nav li a.active {
    background-color: rgba(var(--bs-primary-rgb), 0.27);
    /* Active background color */
    color: #000;
    /* Active text color */
}

.sidebar-nav li a:hover {
    background-color: #f0f0f0;
    /* Hover effect */
}

.sidebar-nav .nav-item {
    margin-bottom: 5px;
}

.sidebar-nav .nav-heading {
    font-size: 11px;
    text-transform: uppercase;
    color: #899bbd;
    font-weight: 600;
    margin: 10px 0 5px 15px;
}

.sidebar-nav .collapsing {
    height: 0;
    overflow: hidden;
    transition: height 0.3s ease;
}

.sidebar-nav .collapse.show {
    transition: height 0.3s ease;
}

.sidebar-nav .nav-link {
    display: flex;
    align-items: center;
    font-size: 15px;
    font-weight: 600;
    color: #FFF;
    transition: 0.3s;
    background: var(--primary-color);
    padding: 10px 15px;
    border-radius: 4px;
}

.sidebar-nav .nav-link i {
    font-size: 16px;
    margin-right: 10px;
    color: #FFF;
}

.sidebar-nav .nav-link.collapsed {
    color: var(--primary-color);
    background: transparent;
}

.sidebar-nav .nav-link.collapsed i {
    color: var(--primary-color);
}

.sidebar-nav li.nav-item.active ul.collapse {
    display: none;
}

.sidebar-nav li.nav-item.active ul.collapse.show {
    display: block;
}

.sidebar-nav li.nav-item.submenu-user-collapsed ul.nav-content,
.sidebar-nav .nav-content.collapse:not(.show) {
    display: none !important;
}

.sidebar-nav li.nav-item a {
    border-radius: 5px;
}

.sidebar-nav li.nav-item.active>a {
    background: var(--primary-color);
    color: #FFF;
}

.sidebar-nav li.nav-item.active li.active a {
    background-color: #bfaee8;
    color: #FFF;
}

.sidebar-nav li.nav-item.active>a>i {
    color: #FFF;
}

.sidebar-nav .nav-link.active {
    background-color: transparent;
    /* Make it transparent */
    color: var(--primary-color);
}

.sidebar-nav li.nav-item li.nav-item a[aria-expanded="true"],
.sidebar-nav li.nav-item li.nav-item:hover>a {
    color: #FFF;
}

.sidebar-nav .nav-link:not(.collapsed).active {
    background-color: rgba(var(--bs-primary-rgb), 0.27);
    /* Retain purple background only for expanded menus */
    color: #FFF;
}

.sidebar-nav .nav-link:hover {
    color: #FFF;
    background: var(--primary-color);
}

.sidebar-nav .nav-link:hover i {
    color: #FFF;
}


.sidebar-nav .nav-link:hover i {
    color: #FFF;
    /* Ensures icons also stay visible */
}

.sidebar-nav .nav-link .bi-chevron-down {
    margin-right: 0;
    transition: transform 0.2s ease-in-out;
}

.sidebar-nav .nav-link:not(.collapsed) .bi-chevron-down {
    transform: rotate(180deg);
}

.sidebar-nav .nav-content {
    padding: 5px 0 0 0;
    margin: 0;
    list-style: none;
}

.sidebar-nav .nav-content a {
    display: flex;
    align-items: center;
    font-size: 14px;
    font-weight: 600;
    color: var(--primary-color);
    transition: 0.3s;
    padding: 10px 0 10px 40px;
    transition: 0.3s;
}

.sidebar-nav .nav-content a i {
    /*font-size: 6px;*/
    margin-right: 15px !important;
    line-height: 0;
    border-radius: 50%;
}

.sidebar-nav .nav-content a:hover,
.sidebar-nav .nav-content a.active {
    color: var(--primary-color);
}

.sidebar-nav .nav-content a.active i {
    background-color: var(--primary-color);
}

/*--------------------------------------------------------------
# Calendar
--------------------------------------------------------------*/
#calendar .fc-toolbar-chunk,
#calendar .fc-toolbar-title,
#calendar .fc-col-header-cell,
#calendar .fc-timegrid-axis,
#calendar .fc-timegrid-slot,
#calendar .fc-daygrid-day,
#calendar .fc-list-table {
    font-size: .813rem !important;
}

#calendar .fc-event-time,
#calendar .fc-event-title {
    font-size: .688rem;
}

#calendar .fc-button-primary {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

#calendar .fc-button-primary:hover,
#calendar .fc-button-primary.fc-button-active {
    box-shadow: inset 0 0 0 2000px rgb(0 0 0 / 30%);
}

#calendar .fc-list-event,
#calendar .fc-timegrid-event,
#calendar .fc-daygrid-event {
    cursor: pointer;
}

/*--------------------------------------------------------------
# Notification
--------------------------------------------------------------*/
/* General Notification Dropdown Styles */
.dropdown-menu.notifications {
    width: 420px;
    /* Fixed width for consistency */
    padding: 0;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

    .notification-item .red-dot {
        width: 8px;
        height: 8px;
        background-color: red;
        border-radius: 50%;
        margin-right: 8px;
        flex-shrink: 0;
    }

    .notification-item img {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        object-fit: cover;
    }

    .notification-item-content {
        display: flex;
        flex-direction: column;
    }

    /* Header Styling */
    .dropdown-header {
        padding: 12px 16px;
        font-weight: bold;
        font-size: 14px;
        color: var(--primary-color);
        background-color: #f8f9fa;
        border-bottom: 1px solid #e9ecef;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    /* Mark All as Read Button */
    .mark-all-read {
        align-items: start;
        font-size: 12px;
        color: var(--primary-color);
        border: none;
        background: none;
        cursor: pointer;
    }

    .mark-all-read:hover {
        color: #0056b3;
        text-decoration: none;
    }

    /* Notification Item Styling */
    .notification-item {
        display: flex;
        align-items: flex-start;
        padding: 8px;
        cursor: pointer;
        transition: background-color 0.2s ease-in-out;
    }

    .notification-item:hover {
        background-color: #f8f9fa;
    }

    .notification-item.unread {
        border-left: 3px solid #6610f2;
        background-color: #efefef;
    }

    .notification-item.read {
        border-left: 3px solid transparent;
        background-color: #ffffff;
    }

    /* Notification Content */
    .notification-item h4 {
        font-size: 14px;
        margin: 0;
        color: var(--primary-color);
        font-weight: normal !important;
    }

    .notification-item.unread h4 {
        font-weight: bold !important;
    }


    .notification-item p {
        font-size: 12px;
        margin: 4px 0;
        color: gray;
    }

    /* Time Display */
    .notification-item p:last-child {
        font-size: 11px;
        color: #adb5bd;
    }

    /* Divider Styling */
    .dropdown-divider {
        margin: 0;
        border-color: #e9ecef;
    }

    /* Footer Styling */
    /* Dropdown footer styling */
    .dropdown-footer {
        text-align: center;
        padding: 12px 16px;
        background-color: mediumpurple;
        font-size: 13px;
    }

    /* Style the link inside the dropdown footer */
    .dropdown-footer a {
        color: white !important;
        /* Ensure the text color is white */
        text-decoration: none !important;
        /* Remove underline */
    }

    /* Add hover effect for the link */
    .dropdown-footer a:hover {
        text-decoration: none;
        /* Keep underline removed on hover */
        color: #e0e0e0;
        /* Slightly lighter shade for hover effect */
    }
}

/*--------------------------------------------------------------
# Notification view more
--------------------------------------------------------------*/

.notifikasi-container {
    .notification-header {
        max-width: auto;
        margin: auto;
        padding: 8px;
        border: 1px solid #ddd;
        border-radius: 8px;
        background-color: white;
        box-shadow: 0 0 30px rgba(1, 41, 112, 0.2);
    }

    .notification-header h3 {
        margin: 0;
        color: #6e33cc;
        margin-left: 10px;
    }

    #notification-filter {
        padding: 5px;
        border: 1px solid #ccc;
        border-radius: 5px;
    }

    #notification-list {
        list-style: none;
        padding: 0;
    }

    .notification-item.read {
        border: 1px solid #ddd;
        border-radius: 8px;
        margin-bottom: 10px;
        padding: 10px;
        display: flex;
        align-items: center;
        background-color: white;
        box-shadow: 0 0 5px rgba(65, 84, 241, 0.2);
    }

    .notification-item.unread {
        border: 1px solid #ededed;
        border-radius: 8px;
        margin-bottom: 10px;
        padding: 10px;
        display: flex;
        align-items: center;
        background-color: rgba(243, 241, 241, 0.96);
        box-shadow: 0 0 5px rgba(65, 84, 241, 0.2);
    }

    .notification-item img {
        width: 50px;
        height: 50px;
        border-radius: 50%;
    }

    .notification-item h4 {
        margin: 0;
        color: #6e33cc;
        font-size: 14px;

    }

    .notification-item p {
        margin: 0;
        color: #555;
        font-size: 14px;

    }

    .notification-item p:last-of-type {
        font-size: 12px;
        color: #999;
        font-size: 14px;

    }

    .font-weight-bold {
        font-weight: bold;
    }

    /* Time Display */
    .notification-item p:last-child {
        font-size: 11px;
        color: #adb5bd;
    }

    .notification-item.unread h4 {
        font-size: 14px;
        font-weight: bold;
        color: #6e33cc;
        /* Primary color for unread titles */
        position: relative;
        /* Make h4 a positioned element */
        padding-left: 20px;
    }

    .notification-item.unread h4::before {
        content: "";
        position: absolute;
        left: 0;
        /* Position it at the start of the h4 */
        top: 50%;
        transform: translateY(-50%);
        /* Center the dot vertically */
        width: 8px;
        height: 8px;
        background-color: red;
        /* Red color for the dot */
        border-radius: 50%;
    }


    .notification-item.read h4 {
        font-weight: normal;
        color: #555;
        /* Default color for read titles */
        font-size: 14px;

    }

    .notification-item p {
        margin: 0;
        color: #555;
        /* Default text color */
        font-size: 14px;

    }

    .notification-item p {
        color: #999;
        /* Slightly lighter color for read descriptions */
        font-size: 12px;

    }

    .notification-item img {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        margin-right: 10px;
    }

    .custom-notification-select {
        position: relative;
        display: inline-block;
        width: 100%;
        /* Set width to 100% to make it responsive */
        max-width: 250px;
        /* Limit maximum width */
        height: 40px;
        /* Adjust height as needed */
        border: 1px solid #673AB7;
        border-radius: 5px;
        background-color: #fff;
        color: #673AB7;
        cursor: pointer;
        font-family: var(--bos-font-family);
        font-size: 14px;
        padding: 5px;
        box-sizing: border-box;
        /* Ensure padding doesn't affect width */
        margin-top: 5px;
    }

    .custom-notification-select select {
        width: 100%;
        height: 100%;
        border: none;
        background-color: transparent;
        appearance: none;
        -webkit-appearance: none;
        /* Remove default styling for Webkit browsers */
        -moz-appearance: none;
        /* Remove default styling for Firefox */
        padding: 5px;
        color: #673AB7;
        /* Set text color */
        font-size: inherit;
        /* Ensure consistent font size */
    }

    .custom-notification-select select option {
        color: #673AB7;
        /* Set option text color */
    }

    .custom-notification-select::after {
        content: "";
        position: absolute;
        top: 50%;
        right: 10px;
        transform: translateY(-50%);
        width: 0;
        height: 0;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-top: 10px solid #673AB7;
        pointer-events: none;
    }

}

/*--------------------------------------------------------------
# Dashboard
--------------------------------------------------------------*/
/* Filter dropdown */
.dashboard .filter {
    position: absolute;
    right: 0px;
    top: 15px;
}

.dashboard .filter .icon {
    color: #aab7cf;
    padding-right: 20px;
    padding-bottom: 5px;
    transition: 0.3s;
    font-size: 16px;
}

.dashboard .filter .icon:hover,
.dashboard .filter .icon:focus {
    color: var(--primary-color);
}

.dashboard .filter .dropdown-header {
    padding: 8px 15px;
}

.dashboard .filter .dropdown-header h6 {
    text-transform: uppercase;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 1px;
    color: #aab7cf;
    margin-bottom: 0;
    padding: 0;
}

.dashboard .filter .dropdown-item {
    padding: 8px 15px;
}

/* Info Cards */
.dashboard .info-card {
    padding-bottom: 10px;
}

.dashboard .info-card h6 {
    font-size: 28px;
    color: #012970;
    font-weight: 700;
    margin: 0;
    padding: 0;
}

.dashboard .card-icon {
    font-size: 32px;
    line-height: 0;
    width: 64px;
    height: 64px;
    flex-shrink: 0;
    flex-grow: 0;
}

.dashboard .sales-card .card-icon {
    color: var(--primary-color);
    background: #f6f6fe;
}

.dashboard .revenue-card .card-icon {
    color: #2eca6a;
    background: #e0f8e9;
}

.dashboard .customers-card .card-icon {
    color: #ff771d;
    background: #ffecdf;
}

/* Activity */
.dashboard .activity {
    font-size: 14px;
}

.dashboard .activity .activity-item .activite-label {
    color: #888;
    position: relative;
    flex-shrink: 0;
    flex-grow: 0;
    min-width: 64px;
}

.dashboard .activity .activity-item .activite-label::before {
    content: "";
    position: absolute;
    right: -11px;
    width: 4px;
    top: 0;
    bottom: 0;
    background-color: #eceefe;
}

.dashboard .activity .activity-item .activity-badge {
    margin-top: 3px;
    z-index: 1;
    font-size: 11px;
    line-height: 0;
    border-radius: 50%;
    flex-shrink: 0;
    border: 3px solid #fff;
    flex-grow: 0;
}

.dashboard .activity .activity-item .activity-content {
    padding-left: 10px;
    padding-bottom: 20px;
}

.dashboard .activity .activity-item:first-child .activite-label::before {
    top: 5px;
}

.dashboard .activity .activity-item:last-child .activity-content {
    padding-bottom: 0;
}

/* News & Updates */
.dashboard .news .post-item+.post-item {
    margin-top: 15px;
}

.dashboard .news img {
    width: 80px;
    float: left;
    border-radius: 5px;
}

.dashboard .news h4 {
    font-size: 15px;
    margin-left: 95px;
    font-weight: bold;
    margin-bottom: 5px;
}

.dashboard .news h4 a {
    color: #012970;
    transition: 0.3s;
}

.dashboard .news h4 a:hover {
    color: var(--primary-color);
}

.dashboard .news p {
    font-size: 14px;
    color: #777777;
    margin-left: 95px;
}

/* Recent Sales */
.dashboard .recent-sales {
    font-size: 14px;
}

.dashboard .recent-sales .table thead {
    background: #f6f6fe;
}

.dashboard .recent-sales .table thead th {
    border: 0;
}

.dashboard .recent-sales .dataTable-top {
    padding: 0 0 10px 0;
}

.dashboard .recent-sales .dataTable-bottom {
    padding: 10px 0 0 0;
}

/* Top Selling */
.dashboard .top-selling {
    font-size: 14px;
}

.dashboard .top-selling .table thead {
    background: #f6f6fe;
}

.dashboard .top-selling .table thead th {
    border: 0;
}

.dashboard .top-selling .table tbody td {
    vertical-align: middle;
}

.dashboard .top-selling img {
    border-radius: 5px;
    max-width: 60px;
}

.section-dashboard .card-img {
    width: 90px;
    height: 90px;
    margin: 1.75rem;
}

.section-dashboard .plate {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    justify-content: space-between;
    align-items: flex-start;
}

.section-dashboard .plate-placeholder {
    border: 1px dotted #000;
    margin: 0 auto;
    height: 25rem;
    width: 45%;
}

/*--------------------------------------------------------------
# Dashboard Calendar list Widget
--------------------------------------------------------------*/
.cal-list-info .cal-list-date {
    height: 45px;
    width: 37px;
    border: 1px solid var(--primary-color) !important;
}

.cal-list-info .cal-list-date span {
    display: block;
    text-align: center;
    line-height: 17px;
}

.cal-list-info .cal-list-date span:nth-child(1) {
    border-bottom: 1px solid var(--primary-color) !important;
}

.cal-list-info .cal-list-text {}

/*--------------------------------------------------------------
# Icons list page
--------------------------------------------------------------*/
.iconslist {
    display: grid;
    max-width: 100%;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1.25rem;
    padding-top: 15px;
}

.iconslist .icon {
    background-color: #fff;
    border-radius: 0.25rem;
    text-align: center;
    color: #012970;
    padding: 15px 0;
}

.iconslist i {
    margin: 0.25rem;
    font-size: 2.5rem;
}

.iconslist .label {
    font-family: var(--bs-font-monospace);
    display: inline-block;
    width: 100%;
    overflow: hidden;
    padding: 0.25rem;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #666;
}

/*--------------------------------------------------------------
# Profile Page
--------------------------------------------------------------*/
.section.profile {
    .card-body {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        /* Prevent extra space at the bottom */
    }

    .profile-h3 {
        text-align: center;
        color: var(--primary-color);
        font-weight: bold;
        margin-bottom: 20px;
    }

    .profile-h3:not(first-child) {
        margin-top: 50px;
    }

    .text-empty {
        font-style: italic;
        color: gray;
    }

    /* Modal Container */

    .lewat-modal {
        display: none;
        /* Hidden by default */
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.4);
        /* Semi-transparent background */
        z-index: 1000;
        /* On top of other content */


        .modal-content {
            background-color: white;
            padding: 20px;
            border-radius: 5px;
            max-width: 600px;
            /* Max width */
            margin: 80px auto;
            /* Center the modal horizontally and add space from top */
            box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
            position: relative;
        }

        .close {
            font-size: 28px;
            font-weight: bold;
            color: #aaa;
            position: absolute;
            top: 10px;
            right: 20px;
            cursor: pointer;
        }

        .close:hover,
        .close:focus {
            color: black;
            text-decoration: none;
        }

        /* Styling for form elements */

        input[type="date"],
        input[type="time"],
        textarea,
        input[type="file"] {
            width: 100%;
            max-width: 400px;
            /* Limit max-width */
            margin-bottom: 15px;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 4px;
        }

        .btn-submit {
            background-color: var(--primary-color);
            color: white;
            border: none;
            padding: 10px 15px;
            font-size: 16px;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s;
        }

        .btn-submit:hover {
            background-color: var(--bos-primary-dark);
        }
    }

    .clockinout .modal-content {
        max-width: 500px;
        padding: 30px;
        display: inline-block;
    }

    .clockinout .modal-content button {
        width: auto;
    }

    .clockinout .modal-content span.close {
        float: right;
    }

    .clockinout {
        .modal {
            display: flex;
            justify-content: center;
            align-items: center;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
        }

        h3 {
            color: var(--primary-color);
            margin-bottom: 20px;
        }

        .modal-content {
            background: white;
            padding: 70px;
            border-radius: 5px;
            text-align: center;
            width: 500px;
            display: flex;
            /* Use flex layout */
            justify-content: center;
            /* Center content horizontally */
            align-items: center;
            /* Align buttons vertically */
            gap: 10px;
            /* Add space between the buttons */
        }

        .close {
            position: absolute;
            top: 15px;
            right: 25px;
            cursor: pointer;
            font-size: 30px;
            /* Increase font size */
            font-weight: bold;
            /* Make it bolder */
            color: #333;
            /* Adjust color as needed */
            padding: 20px;
            /* Add padding to make it easier to click */
            background-color: transparent;
            /* Ensure background is transparent */
            border: none;
            /* Remove any borders */
        }

        .clockinout-btn,
        .btn-cancel {
            background-color: var(--primary-color);
            /* BOS primary background for clockinout-btn */
            color: white;
            /* White text for clockinout-btn */
            border: none;
            /* No border for clockinout-btn */
            border-radius: 8px;
            /* Rounded corners */
            padding: 12px 35px;
            /* Button padding */
            text-align: center;
            /* Center the text */
            font-size: 14px;
            /* Adjust font size */
            display: flex;
            /* Ensures buttons behave as flex items */
            justify-content: center;
            cursor: pointer;
            /* Pointer cursor on hover */
            transition: all 0.3s ease;
            /* Smooth transition for hover effects */
            width: 65%;
            /* Buttons will now take up equal width */
        }

        .btn-cancel {
            background: transparent;
            border: 1px solid #ccc;
            /* Border for visibility */
            color: #000;
            /* Text color */
            font-size: 14px;
            padding: 12px 35px;
            /* Padding for button size */
        }

        .btn-cancel:hover {
            background: #f5f5f5;
            /* Hover effect */
            color: #333;
            /* Hover text color */
        }


        .btn-customIn {
            background-color: var(--primary-color);
            /* BOS primary background */
            color: white;
            /* White text */
            border: none;
            /* No border */
            border-radius: 8px;
            /* Rounded corners */
            padding: 5px 20px;
            /* Button padding */
            text-align: center;
            /* Center the text */
            text-decoration: none;
            /* Remove underline for links */
            font-size: 16px;
            /* Adjust font size */
            display: inline-block;
            /* Allow proper spacing for multiple buttons */
            cursor: pointer;
            /* Pointer cursor on hover */
            transition: all 0.3s ease;
            /* Smooth transition for hover effects */
            margin: 0 5px 5px 0;

        }

        .btn-customOOO {
            background-color: var(--primary-color);
            /* BOS primary background */
            color: white;
            /* White text */
            border: none;
            /* No border */
            border-radius: 8px;
            /* Rounded corners */
            padding: 5px 20px;
            /* Button padding */
            text-align: center;
            /* Center the text */
            text-decoration: none;
            /* Remove underline for links */
            font-size: 16px;
            /* Adjust font size */
            display: inline-block;
            /* Allow proper spacing for multiple buttons */
            cursor: pointer;
            /* Pointer cursor on hover */
            transition: all 0.3s ease;
            /* Smooth transition for hover effects */
            margin: 0 5px 5px 0;

        }


        .btn-customOut {
            background-color: var(--primary-color);
            /* BOS primary background */
            color: white;
            /* White text */
            border: none;
            /* No border */
            border-radius: 8px;
            /* Rounded corners */
            padding: 5px 20px;
            /* Button padding */
            text-align: center;
            /* Center the text */
            text-decoration: none;
            /* Remove underline for links */
            font-size: 16px;
            /* Adjust font size */
            display: inline-block;
            /* Allow proper spacing for multiple buttons */
            cursor: pointer;
            /* Pointer cursor on hover */
            transition: all 0.3s ease;
            /* Smooth transition for hover effects */
            margin: 0 5px 5px 0;

        }

        .info-container {
            display: flex;
            justify-content: space-between;
            /* Align items to left and right */
            align-items: center;
            padding: 15px;
            gap: 15px;
        }

        .info-time {
            color: var(--primary-color);
            font-weight: bold;
            font-size: 16px;
            margin: 0;
            white-space: nowrap;
        }

        .btn-customInOut {
            background-color: var(--primary-color);
            color: white;
            border: none;
            border-radius: 8px;
            padding: 5px 20px;
            font-size: 16px;
            cursor: pointer;
            transition: background-color 0.3s ease;
            margin: 0 5px 5px 0;
        }

        .btn-customInOut:hover {
            background-color: var(--bos-primary-dark);
        }

        .btn-right {
            margin-left: 35px;
            /* Push the button to the right */
        }

        .info-container p {
            text-align: center;
        }


    }


    /* Style for Modal */

    .ooo-modal {
        display: none;
        /* Hidden by default */
        position: fixed;
        /* Fixed to the screen */
        top: 0;
        left: 0;
        width: 100%;
        /* Full width */
        height: 100%;
        /* Full height */
        background-color: rgba(0, 0, 0, 0.4);
        /* Semi-transparent background */
        z-index: 1000;
        /* On top of other content */

        .input-icon {
            position: relative;
        }

        .input-icon i {
            position: absolute;
            right: 10px;
            /* Adjust for alignment */
            top: 50%;
            transform: translateY(-50%);
            color: #aaa;
            /* Icon color */
            pointer-events: none;
            /* Prevent interfering with input */
        }

        .input-icon input {
            padding-right: 30px;
            /* Ensure space for the icon */
        }


        /* Style for Modal Content */

        .modal-content {
            background-color: white;
            padding: 20px;
            border-radius: 5px;
            max-width: 600px;
            /* Max width */
            margin: 150px auto;
            /* Center the modal horizontally and add space from top */
            box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);

        }



        /* Close button */

        .close {
            font-size: 28px;
            font-weight: bold;
            color: #aaa;
            position: absolute;
            top: 10px;
            right: 20px;
            cursor: pointer;
        }

        .close:hover,
        .close:focus {
            color: black;
            text-decoration: none;
        }

        /* Center the form inside the modal */

        form {
            display: flex;
            flex-direction: column;

        }

        /* Align input fields */

        input[type="text"],
        input[type="number"],
        input[type="datetime-local"],
        input[type="date"],
        input[type="time"],
        select {
            width: 100%;
            /* Make inputs and dropdown take up full width of the form */
            max-width: 400px;
            /* Limit max-width */
            margin-bottom: 15px;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 4px;

        }

        /* Container to hold Masa Keluar and Masa Masuk side by side */

        .masa-group {
            display: flex;
            justify-content: space-between;
            /* Space them evenly */
            gap: 15px;
            /* Optional: Adjust space between the inputs */
        }

        /* Adjust input fields to fit next to each other */

        .masa-group input[type="datetime-local"] {
            width: 48%;
            /* Adjust width to fit side by side */
        }

    }


    /* Profile Card */
    .profile-card {
        gap: 10px;
    }

    .profile-card img {
        max-width: 120px;
    }

    .profile-avatar {
        width: 120px;
        height: 120px;
        /* Enforce consistent dimensions */
        border-radius: 50%;
        /* Ensure circular shape */
        object-fit: cover;
        /* Crop the image to fit within the dimensions */
    }


    .profile-card h2 {
        font-size: 24px;
        font-weight: 700;
        color: #2c384e;
        margin: 10px 0 0 0;
    }

    .profile-card h3 {
        font-size: 18px;
        text-align: center;
    }

    .profile-card .social-links a {
        font-size: 20px;
        display: inline-block;
        color: rgba(1, 41, 112, 0.5);
        line-height: 0;
        margin-right: 10px;
        transition: 0.3s;
    }

    .profile-card .social-links a:hover {
        color: #012970;
    }

    /* Profile Overview */
    .profile-overview .row {
        margin-bottom: 20px;
        font-size: 15px;
    }

    .profile-overview .card-title {
        color: #012970;
    }

    .profile-overview .label {
        font-weight: 600;
        color: rgba(1, 41, 112, 0.6);
    }

    /* Profile Edit */
    .profile-edit label {
        font-weight: 600;
        color: rgba(1, 41, 112, 0.6);
    }

    .profile-edit img {
        max-width: 120px;
    }

    .input-spacing {
        margin-bottom: 15px;
        /* Adjust as needed */
    }

    .custom-select {
        position: relative;
        display: inline-block;
        width: 100%;
        /* Set width to 100% to make it responsive */
        height: 40px;
        /* Adjust height as needed */
        border: 1px solid #673AB7;
        border-radius: 5px;
        background-color: #fff;
        color: #673AB7;
        cursor: pointer;
        font-family: var(--bos-font-family);
        font-size: 14px;
        padding: 5px;
        box-sizing: border-box;
        /* Ensure padding doesn't affect width */
    }

    .custom-select select {
        width: 100%;
        height: 100%;
        border: none;
        background-color: transparent;
        appearance: none;
        -webkit-appearance: none;
        /* Remove default styling for Webkit browsers */
        -moz-appearance: none;
        /* Remove default styling for Firefox */
        padding: 5px;
        color: #673AB7;
        /* Set text color */
        font-size: inherit;
        /* Ensure consistent font size */
    }

    .custom-select select option {
        color: #673AB7;
        /* Set option text color */
    }

    .custom-select::after {
        content: "";
        position: absolute;
        top: 50%;
        right: 10px;
        transform: translateY(-50%);
        width: 0;
        height: 0;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-top: 10px solid #673AB7;
        pointer-events: none;
    }

    .center-buttons {
        display: flex;
        justify-content: center;
        /* Centers buttons horizontally */
        gap: 10px;
        /* Optional: Adds space between the buttons */
    }

    .center-buttons .btn {
        /* width: 100px; */
    }


    .org-chart {
        align-items: center;

        margin-top: 20px;


        .chart-item {
            display: block;
            text-align: center;
            padding: 10px 0px;
            background-color: white;
            /* BOS primary background */
            color: var(--primary-color);
            border-radius: 10px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            position: relative;
            width: 250px;
            font-weight: bold;
            margin: 10px auto;
        }

        .chart-item .name {
            font-weight: bold;
            padding: 10px;
            width: 250px;
            background-color: var(--primary-color);
            /* White background for text */
            color: white;
            /* Purple text */
            border-radius: 5px;
            display: inline-block;
        }

        .chart-item .position {
            font-size: 0.9em;
            margin-top: 5px;
        }

        .line {
            display: block;
            width: 2px;
            height: 25px;
            background-color: #6a0dad;
            margin: 0 auto;
        }
    }

    /* Styles for the container */
    .kewangan {
        padding: 20px;
        margin: 0 auto;

        /* Row styling */
        .row {
            margin: 0;
            display: flex;
            flex-wrap: wrap;
        }

        /* Column styling */
        .kewangan-item {
            padding: 10px;
            box-sizing: border-box;
        }

        /* Section headings */

        h5 {
            font-size: 1rem;
            font-weight: bold;
            margin-bottom: 15px;
            color: var(--primary-color);
        }

        /* Form group styling */

        .form-group {
            margin-bottom: 20px;
        }

        /* Label styling */

        .form-group label {
            font-size: 1rem;
            font-weight: lighter;
            display: block;
            margin-bottom: 5px;
        }

        /* Input group styling */

        .input-group {
            display: flex;
            align-items: center;
            background-color: #f8f9fa;
            border: 1px solid #ced4da;
            border-radius: 8px;
            overflow: hidden;
        }

        .input-group-prepend .input-group-text {
            background-color: #f8f9fa;
            border: none;
            font-size: 0.9rem;
            color: #6c757d;
            padding: 0 10px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .input-group .form-control {
            border: none;
            background: none;
            font-size: 0.9rem;
            color: #6c757d;
            padding: 10px 0;
            width: 100px;
        }

        .input-group .form-control::placeholder {
            color: #a9a9a9;
            font-weight: 500;
        }

        .input-group-text {
            border: none;
            background-color: #f8f9fa;
            font-size: 0.9rem;
            color: #6c757d;
            padding: 0 10px;
        }

        .input-group-text:nth-of-type(2) {
            margin: 0 5px;
        }

        /* Button styling */

        .btn {
            font-size: 1rem;
            font-weight: 500;
            width: 100px;
            cursor: pointer;
        }

        .btn-primary {
            border: none;
            color: #fff;
        }

    }

}


/*--------------------------------------------------------------
# ooo applications blade
--------------------------------------------------------------*/

/* Table Container */
.ooo-container {
    padding: 20px;
    background-color: #ffffff;
    /* White background */
    border-radius: 10px;
    /* Rounded corners */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    /* Subtle shadow */


    /* Table Styles */

    .table {
        width: 100%;
        border-collapse: collapse;
        /* Remove border spacing */
        margin-bottom: 0;
    }

    /* Header Styling */

    .table thead th {
        text-align: left;
        font-size: 16px;
        font-weight: bold;
        color: #6a38bb;
        /* Purple color for text */
        padding: 12px 10px;
        border-bottom: 2px solid #ddd;
        /* Light bottom border */
    }

    /* Row and Cell Styling */

    .table tbody td {
        text-align: left;
        font-size: 14px;
        color: #333;
        /* Dark text for rows */
        padding: 10px 8px;
        border-bottom: 1px solid #eee;
        /* Light row separator */
    }

    /* Empty State Styling */

    .table tbody tr.empty-row td {
        text-align: center;
        color: #9e9e9e;
        /* Light gray text for "no results" */
        font-style: italic;
    }

    /* Footer or Bottom Text */

    .footer-text {
        text-align: center;
        font-size: 14px;
        color: #6a38bb;
        /* Purple color */
        padding: 10px;
        margin-top: 20px;
    }
}

/*--------------------------------------------------------------
# ooo approval blade
--------------------------------------------------------------*/

/* Table Container */
.ooo-approval-container {
    padding: 20px;
    background-color: #ffffff;
    /* White background */
    border-radius: 10px;
    /* Rounded corners */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    /* Subtle shadow */


    /* Table Styles */

    .table {
        width: 100%;
        border-collapse: collapse;
        /* Remove border spacing */
        margin-bottom: 0;
    }

    /* Header Styling */

    .table thead th {
        text-align: center;
        font-size: 16px;
        font-weight: bold;
        color: #6a38bb;
        /* Purple color for text */
        padding: 12px 10px;
        border-bottom: 2px solid #ddd;
        /* Light bottom border */
    }

    /* Row and Cell Styling */

    .table tbody td {
        text-align: center;
        font-size: 14px;
        color: #333;
        /* Dark text for rows */
        padding: 10px 8px;
        border-bottom: 1px solid #eee;
        /* Light row separator */
    }

    /* Empty State Styling */

    .table tbody tr.empty-row td {
        text-align: center;
        color: #9e9e9e;
        /* Light gray text for "no results" */
        font-style: italic;
    }

    /* Footer or Bottom Text */

    .footer-text {
        text-align: center;
        font-size: 14px;
        color: #6a38bb;
        /* Purple color */
        padding: 10px;
        margin-top: 20px;
    }
}

/*--------------------------------------------------------------
# lewat applications blade
--------------------------------------------------------------*/

/* Table Container */
.lewat-container {
    padding: 20px;
    background-color: #ffffff;
    /* White background */
    border-radius: 10px;
    /* Rounded corners */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    /* Subtle shadow */


    /* Table Styles */

    .table {
        width: 100%;
        border-collapse: collapse;
        /* Remove border spacing */
        margin-bottom: 0;
    }

    /* Header Styling */

    .table thead th {
        text-align: center;
        font-size: 16px;
        font-weight: bold;
        color: #6a38bb;
        /* Purple color for text */
        padding: 12px 10px;
        border-bottom: 2px solid #ddd;
        /* Light bottom border */
    }

    /* Row and Cell Styling */

    .table tbody td {
        text-align: center;
        font-size: 14px;
        color: #333;
        /* Dark text for rows */
        padding: 10px 8px;
        border-bottom: 1px solid #eee;
        /* Light row separator */
    }

    /* Empty State Styling */

    .table tbody tr.empty-row td {
        text-align: center;
        color: #9e9e9e;
        /* Light gray text for "no results" */
        font-style: italic;
    }

    /* Footer or Bottom Text */

    .footer-text {
        text-align: center;
        font-size: 14px;
        color: #6a38bb;
        /* Purple color */
        padding: 10px;
        margin-top: 20px;
    }
}

/*--------------------------------------------------------------
# lewat approval blade
--------------------------------------------------------------*/

/* Table Container */
.lewat-approval-container {
    padding: 20px;
    background-color: #ffffff;
    /* White background */
    border-radius: 10px;
    /* Rounded corners */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    /* Subtle shadow */


    /* Table Styles */

    .table {
        width: 100%;
        border-collapse: collapse;
        /* Remove border spacing */
        margin-bottom: 0;
    }

    /* Header Styling */

    .table thead th {
        text-align: center;
        font-size: 16px;
        font-weight: bold;
        color: #6a38bb;
        /* Purple color for text */
        padding: 12px 10px;
        border-bottom: 2px solid #ddd;
        /* Light bottom border */
    }

    /* Row and Cell Styling */

    .table tbody td {
        text-align: center;
        font-size: 14px;
        color: #333;
        /* Dark text for rows */
        padding: 10px 8px;
        border-bottom: 1px solid #eee;
        /* Light row separator */
    }

    /* Empty State Styling */

    .table tbody tr.empty-row td {
        text-align: center;
        color: #9e9e9e;
        /* Light gray text for "no results" */
        font-style: italic;
    }

    /* Footer or Bottom Text */

    .footer-text {
        text-align: center;
        font-size: 14px;
        color: #6a38bb;
        /* Purple color */
        padding: 10px;
        margin-top: 20px;
    }

    .modal-header {
        display: flex;
        justify-content: space-between;
        /* Ensure the close button aligns properly */
        align-items: center;
        /* Vertically aligns header content */
    }

    .btn-close {
        position: static;
        /* Ensure it's not absolute or relative unless necessary */
    }

    .modal-content {
        overflow: hidden;
        /* Prevent overflowing child elements */
    }

    .modal-header .btn-close {
        margin-left: auto;
        /* Push it to the far right */
        margin-right: 0;
        /* Prevent excess spacing */
    }


}

/*--------------------------------------------------------------
# profile payslip
--------------------------------------------------------------*/
.profile-payslip {

    /* Card Styling */
    .card {
        border-radius: 10px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
        background-color: #ffffff;
    }

    .card-header {
        background-color: #ffffff;
        border-bottom: 2px solid #f4f4f8;
        padding: 15px 20px;
    }

    .card-header h3 {
        margin: 0;
        font-size: 18px;
        font-weight: 600;
    }

    .card-body {
        padding: 20px;
    }

    /* Table Styling */
    .table {
        width: 100%;
        margin-top: 20px;
    }

    .table thead tr {
        border-bottom: 2px solid #f4f4f8;
        font-size: 14px;
        color: #7a7a7a;
    }

    .table tbody tr {
        border-bottom: 1px solid #f4f4f8;
    }

    .table tbody td {
        font-size: 14px;
        vertical-align: middle;
    }

    /* Remove Hover Effects for Icons */
    .table tbody td a {
        text-decoration: none;
        color: #7a7a7a;
        transition: none;
    }

    .table tbody td a:hover {
        color: #7a7a7a;
        /* No change on hover */
    }

    /* Buttons and Alignment */
    .text-end {
        text-align: end !important;
    }

    .btn-primary {
        background-color: #7a3af1;
        border: none;
        padding: 10px 20px;
        font-size: 14px;
        border-radius: 6px;
    }

    .btn-primary:hover {
        background-color: #6a2fe4;
    }

    i {
        font-size: 16px;
    }

    /* Sidebar Layout */
    .profile-payslip {
        padding: 20px;
    }

}

/*--------------------------------------------------------------
# profile borangea
--------------------------------------------------------------*/
.profile-borangea {

    /* Card Styling */
    .card {
        border-radius: 10px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
        background-color: #ffffff;
    }

    .card-header {
        background-color: #ffffff;
        border-bottom: 2px solid #f4f4f8;
        padding: 15px 20px;
    }

    .card-header h3 {
        margin: 0;
        font-size: 18px;
        font-weight: 600;
    }

    .card-body {
        padding: 20px;
    }

    /* Table Styling */
    .table {
        width: 100%;
        margin-top: 20px;
    }

    .table thead tr {
        border-bottom: 2px solid #f4f4f8;
        font-size: 14px;
        color: #7a7a7a;
    }

    .table tbody tr {
        border-bottom: 1px solid #f4f4f8;
    }

    .table tbody td {
        font-size: 14px;
        vertical-align: middle;
    }

    /* Remove Hover Effects for Icons */
    .table tbody td a {
        text-decoration: none;
        color: #7a7a7a;
        transition: none;
    }

    .table tbody td a:hover {
        color: #7a7a7a;
        /* No change on hover */
    }

    /* Buttons and Alignment */
    .text-end {
        text-align: end !important;
    }

    .btn-primary {
        background-color: #7a3af1;
        border: none;
        padding: 10px 20px;
        font-size: 14px;
        border-radius: 6px;
    }

    .btn-primary:hover {
        background-color: #6a2fe4;
    }

    i {
        font-size: 16px;
    }

    /* Sidebar Layout */
    .profile-borangea {
        padding: 20px;
    }

}

/*--------------------------------------------------------------
# F.A.Q Page
--------------------------------------------------------------*/
.faq .basic h6 {
    font-size: 18px;
    font-weight: 600;
    color: var(--primary-color);
}

.faq .basic p {
    color: #6980aa;
}

.faq-row .accordion {
    margin-bottom: 30px;
}

.faq-row h4 {
    font-size: var(--bs-subtitle-font-size);
    margin-bottom: 10px;
}

/*--------------------------------------------------------------
# Contact
--------------------------------------------------------------*/
.contact .info-box {
    padding: 28px 30px;
}

.contact .info-box i {
    font-size: 38px;
    line-height: 0;
    color: var(--primary-color);
}

.contact .info-box h3 {
    font-size: 20px;
    color: #012970;
    font-weight: 700;
    margin: 20px 0 10px 0;
}

.contact .info-box p {
    padding: 0;
    line-height: 24px;
    font-size: 14px;
    margin-bottom: 0;
}

.contact .php-email-form .error-message {
    display: none;
    color: #fff;
    background: #ed3c0d;
    text-align: left;
    padding: 15px;
    margin-bottom: 24px;
    font-weight: 600;
}

.contact .php-email-form .sent-message {
    display: none;
    color: #fff;
    background: #18d26e;
    text-align: center;
    padding: 15px;
    margin-bottom: 24px;
    font-weight: 600;
}

.contact .php-email-form .loading {
    display: none;
    background: #fff;
    text-align: center;
    padding: 15px;
    margin-bottom: 24px;
}

.contact .php-email-form .loading:before {
    content: "";
    display: inline-block;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    margin: 0 10px -6px 0;
    border: 3px solid #18d26e;
    border-top-color: #eee;
    animation: animate-loading 1s linear infinite;
}

.contact .php-email-form input,
.contact .php-email-form textarea {
    border-radius: 0;
    box-shadow: none;
    font-size: 14px;
    border-radius: 0;
}

.contact .php-email-form input:focus,
.contact .php-email-form textarea:focus {
    border-color: var(--primary-color);
}

.contact .php-email-form input {
    padding: 10px 15px;
}

.contact .php-email-form textarea {
    padding: 12px 15px;
}

.contact .php-email-form button[type="submit"] {
    background: var(--primary-color);
    border: 0;
    padding: 10px 30px;
    color: #fff;
    transition: 0.4s;
    border-radius: 4px;
}

.contact .php-email-form button[type="submit"]:hover {
    background: #5969f3;
}

@keyframes animate-loading {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/*--------------------------------------------------------------
# Error 404
--------------------------------------------------------------*/
.error-404 {
    padding: 30px;
}

.error-404 h1 {
    font-size: 180px;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 0;
    line-height: 150px;
}

.error-404 h2 {
    font-size: 24px;
    font-weight: 700;
    color: #012970;
    margin-bottom: 30px;
}

.error-404 .btn {
    background: #51678f;
    color: #fff;
    padding: 8px 30px;
}

.error-404 .btn:hover {
    background: #3e4f6f;
}

@media (min-width: 992px) {
    .error-404 img {
        max-width: 50%;
    }
}

/*--------------------------------------------------------------
# Kehadiran
--------------------------------------------------------------*/
#attendance-table {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    /* Ensure rounded corners are visible */
}

#attendance-table .tabulator-header {
    background-color: var(--primary-color) !important;
    /* Primary color (Bootstrap primary color) */
    color: white !important;
    /* White text for better contrast */
    font-weight: bold;
    font-size: 14px;
    border-bottom: 2px solid;
    /* Slightly darker border for emphasis */
}

#attendance-table .tabulator-header .tabulator-col {
    background-color: var(--primary-color) !important;
    /* Primary color (Bootstrap primary color) */
    border: none;
    /* Remove individual header borders */
}

#attendance-table .tabulator-row {
    border-bottom: 1px solid #ddd;
    /* Light row separators */
}

#attendance-table .tabulator-row:hover {
    background-color: #f8f9fa;
    /* Subtle hover effect */
}

#attendance-table .tabulator-tableHolder {
    border-radius: 8px;
}

/*--------------------------------------------------------------
# Kenderaan
--------------------------------------------------------------*/
.kenderaan .custom-input {
    background-color: #F3F3F3;
    border-radius: 8px;
    border: 1px;
    box-sizing: border-box;
    color: #444;
    font-size: 14px;
    padding: 10px;
    width: 100%;
}

.kenderaan .custom-input:focus {
    border-color: var(--primary-color);
    outline: none;
    box-shadow: 0 0 5px rgba(65, 84, 241, 0.2);
}

.kenderaan .custom-input-group {
    max-width: 100%;
    flex-wrap: nowrap;
}

.kenderaan .small-input {
    width: 100px !important;
    padding: 5px;
    font-size: 14px;
    text-align: center;
}

.kenderaan .custom-input.small-input {
    width: 100px !important;
}

.kenderaan .smaller-input {
    width: 200px;
    text-align: center;
}

.kenderaan .travel-legend {
    font-size: 18px;
    font-weight: bold;
    color: var(--primary-color);
    margin-bottom: 20px;
    text-align: left;
}

.kenderaan .custom-button {
    width: 100px;
    background-color: var(--primary-color);
    color: white;
}

.kenderaan .row.justify-content-center {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.kenderaan .row.justify-content-start {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

/* Label styling */
.kenderaan label {
    font-weight: bold;
    font-size: 16px;
    color: var(--primary-color);
    margin-bottom: 10px;
}

.kenderaan .input-with-text {
    display: flex;
    align-items: center;
}

.kenderaan .input-with-text input {
    margin-right: 10px;
    text-align: center;
}

.kenderaan .small-input {
    width: 80px;
}

.kenderaan select {
    background-color: transparent;
    padding: 10px;
    border-radius: 8px;
    width: 100%;
    border: 2px solid var(--primary-color);
    color: var(--primary-color);
    font-weight: bold;
    font-size: 14px;
    transition: border-color 0.3s, box-shadow 0.3s;
}

.kenderaan select:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 8px rgba(111, 30, 211, 0.2);
    outline: none;
}

.kenderaan select option {
    color: #444;
}

.kenderaan .custom-select-wrapper {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
}

.kenderaan .custom-select-wrapper select {
    width: 100%;
    padding-right: 40px;
    border: 1px solid var(--primary-color);
    border-radius: 8px;
    font-weight: normal;
    color: var(--primary-color);
    background-color: transparent;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

.kenderaan .custom-select-wrapper select:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 8px rgba(111, 30, 211, 0.2);
    outline: none;
}

.kenderaan .custom-select-wrapper .select-icon {
    position: absolute;
    right: 10px;
    pointer-events: none;
    color: var(--primary-color);
    font-size: 18px;
}

.kenderaan .custom-select-wrapper select option {
    font-weight: normal;
    padding: 10px;
    background-color: white;
    color: var(--primary-color);
    border: none;
    font-weight: lighter;
}

/* Flex container for label and select */
.kenderaan .dropdown-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

/* Label styles */
.kenderaan .dropdown-label {
    font-size: 16px;
    margin-right: 15px;
    color: var(--primary-color);
    white-space: nowrap;
}

.kenderaan .custom-select-wrapper {
    position: relative;
    width: 100%;
}

.kenderaan .select {
    width: 100%;
    padding: 10px;
    border-radius: 8px;
    border: 2px solid var(--primary-color);
    font-size: 14px;
    font-weight: lighter;
    color: var(--primary-color);
    appearance: none;
    background-color: transparent;
}

.kenderaan .select-icon {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: var(--primary-color);
}

.kenderaan .form-row {
    margin-bottom: 20px;
}

.kenderaan .form-group {
    min-height: 130px;
}

.kenderaan .custom-button {
    background-color: var(--primary-color);
    color: white;
    padding: 10px 80px !important;
    border-radius: 8px;
    border: none;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    white-space: nowrap;
}

.kenderaan .custom-button:hover {
    background-color: #5a0ecb;
    color: white;
    box-shadow: 0 4px 8px rgba(65, 84, 241, 0.2);
}

.kenderaan .button-group {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
}

.kenderaan .btn {
    font-weight: bold;
    font-size: 14px;
    padding: 10px;
    border-radius: 10px;
}

.kenderaan .button-group .btn {
    margin-left: 10px;
    font-weight: bold;
    font-size: 14px;
    padding: 10px;
    border-radius: 10px;
    width: 200px;
    transition: background-color 0.3s, color 0.3s;
}

.kenderaan .new-application {
    background-color: var(--primary-color);
    color: white;
    border: none;
}

.kenderaan .new-application i {
    margin-right: 5px;
}

.kenderaan .btn-outline-primary {
    border-color: var(--primary-color);
    color: var(--primary-color) !important;
    background-color: transparent;
    width: 200px;
}

.kenderaan .btn-outline-primary.active {
    background-color: var(--primary-color);
    color: white !important;
}

.kenderaan .btn-outline-primary i {
    margin-right: 8px;
}

.kenderaan .btn-outline-primary:hover {
    background-color: var(--primary-color);
    color: white;
}

.kenderaan .new-application:hover {
    background-color: var(--primary-color);
    color: white;
}

.kenderaan .btn i {
    font-size: 16px;
    vertical-align: middle;
}

.kenderaan .edit-link {
    color: var(--primary-color);
    font-weight: bold;
}

/* Ensure that input fields and labels align vertically */
.kenderaan .input-group {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.kenderaan .input-group-text {
    background-color: transparent;
    border: none;
    padding-left: 8px;
}

.kenderaan .custom-input {
    background-color: #F7F7F7;
    border-radius: 8px;
    padding: 10px;
    flex-grow: 1;
}

.kenderaan .unit-label {
    margin-left: 8px;
    color: #444;
    font-size: 14px;
}

/* Radio Buttons */
.kenderaan .d-flex {
    display: flex;
    justify-content: flex-start;
}

.kenderaan .form-check {
    display: flex;
    align-items: center;
    margin-right: 10px;
    margin-bottom: 30px;
}

.kenderaan .form-label {
    font-weight: bold;
    color: var(--primary-color);
}

.kenderaan .d-flex.align-items-center {
    align-items: baseline;
}

.kenderaan .form-check-label {
    margin-left: 5px;
    margin-right: 20px;
}

.kenderaan .form-check-input {
    margin-right: 8px;
    width: 25px;
    height: 25px;
    vertical-align: middle;
}

.kenderaan .inline {
    width: unset;
    margin: 0 0.9em 0 0;
    vertical-align: middle;
}

/* Card and form container */
.kenderaan .card {
    border-radius: 10px;
    box-shadow: 0 0 30px rgba(1, 41, 112, 0.2);
    padding: 20px;
    min-height: 270px;
}

.kenderaan .card-header {
    background-color: transparent;
    border-bottom: 1px solid #ebeef4;
}

.kenderaan .card-body {
    padding: 20px;
}

/* Form tab links */
.kenderaan .nav-tabs .nav-link {
    background-color: transparent;
    color: #444;
    border-radius: 8px;
    padding: 10px 20px;
    margin-right: 10px;
    font-weight: bold;
    border: 1px solid #ddd;
    transition: background-color 0.3s, color 0.3s;
}

.kenderaan .nav-tabs .nav-link.active {
    background-color: var(--primary-color);
    /* Background for active tab */
    color: white;
    /* Text color for active tab */
    border: 1px solid var(--primary-color);
    /* Border to match active background */
}

/* Hover effect for tabs */
.kenderaan .nav-pills .nav-link:hover {
    background-color: #d8d8d8;
    /* Lighter hover background */
    color: #000;
    /* Darker text on hover */
}

/* Remove underline from links */
.kenderaan .nav-pills .nav-link {
    text-decoration: none;
}

/* Custom grid adjustments for form layout */
.kenderaan .row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}

@media (max-width: 576px) {
    .kenderaan .row {
        justify-content: flex-start;
        align-items: flex-start;
    }
}

.kenderaan .col-md-4 {
    flex-basis: 20%;
}

.kenderaan .col-md-6 {
    flex-basis: 48%;
}

@media (max-width: 576px) {
    .kenderaan .col-md-6 {
        flex-basis: 100%;
        max-width: 100%;
    }

    .kenderaan .col-md-4 {
        flex-basis: 100%;
        max-width: 100%;
    }
}

@media (max-width: 576px) {
    .kenderaan .row.mb-4 {
        margin-bottom: 1rem;
    }
}

@media (max-width: 576px) {
    .kenderaan .custom-button {
        width: 100%;
        padding: 12px;
    }

    .kenderaan .custom-input {
        width: 100%;
    }
}

.kenderaan textarea.custom-input {
    resize: none;
    height: 100px;
}

.kenderaan .input-with-text small {
    margin-left: 10px;
}

/* Hide the input by default for Lain-lain */
.kenderaan .input-lain-lain,
.kenderaan .input-lain-lain-hantar {
    display: none;
    margin-left: 10px;
    /* Adds space between checkbox and input */
    width: auto;
    /* Adjust width to fit inline */
    flex-grow: 1;
}

/* Show input field when checkbox is checked */
.kenderaan input#lain-lain:checked~.input-lain-lain {
    display: inline-block;
}

.kenderaan input#lain-lainHantar:checked~.input-lain-lain-hantar {
    display: inline-block;
}

/* To keep the checkbox and input in the same row */
.kenderaan .lain-lain-container,
.kenderaan .lain-lain-hantar-container {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

/* Permohonan Saya */
/* Kenderaan Table Design */
.kenderaan .table-hover tbody tr:hover {
    background-color: #f8f8f8;
}

.kenderaan .table thead th {
    font-weight: normal;
    font-size: 14px;
    /*color: var(--primary-color);*/
}

.kenderaan .table td,
.kenderaan .table th {
    border-top: none;
    vertical-align: middle;
}

/* Status */
.kenderaan .status-waiting-review {
    color: #F8E113;
    font-weight: bold;
    background-color: transparent;
    border-radius: 0;
}

.kenderaan .status-approved {
    color: #18AF0B;
    font-weight: bold;
    background-color: transparent;
    border-radius: 0;
}

.kenderaan .status-rejected {
    color: red;
    font-weight: bold;
    background-color: transparent;
    border-radius: 0;
}

/* Button Styling */
.kenderaan .btn-outline-primary {
    border-color: var(--primary-color);
    color: var(--primary-color) !important;
    font-weight: bold;
    padding: 0.5em 1em;
    width: 200px;
}

.kenderaan .btn-outline-primary:hover {
    background-color: var(--primary-color);
    color: #fff !important;
}

.kenderaan .new-application {
    background-color: var(--primary-color);
    color: #fff !important;
    width: 200px;
}

.kenderaan .new-application:hover {
    background-color: #5a0ecb;
}

.kenderaan .view-application {
    background-color: transparent;
    border-color: var(--primary-color);
    color: #fff;
    width: 200px;
}

.kenderaan .view-application:hover {
    background-color: var(--primary-color);
    color: #fff;
}

.kenderaan .btn-permohonan-saya {
    background-color: var(--primary-color);
    color: #fff !important;
    width: 200px;
}

.kenderaan .btn-permohonan-saya a {
    color: white;
    text-decoration: none;
}

.kenderaan .btn-permohonan-saya:hover {
    background-color: #5A1AB0;
    color: white;
}

.kenderaan .btn-permohonan-saya a:hover {
    color: white;
}

.kenderaan .btn-primary {
    background-color: var(--primary-color) !important;
    color: white !important;
    padding: 5px 30px;
}

.kenderaan .btn-danger {
    background-color: #dc3545;
    color: white !important;
    padding: 5px 30px;
}

.text-white {
    color: white !important;
}

.kenderaan .h5-header {
    color: var(--primary-color);
    margin-bottom: 30px;
}

.kenderaan .kenderaan p {
    margin-bottom: 10px;
}

.kenderaan .kenderaan-details p {
    font-size: 16px;
    line-height: 1.5;
    margin-bottom: 8px;
}

.kenderaan .card-title {
    font-weight: bold;
    font-size: 1.2rem;
}

.kenderaan .card-body p {
    margin-bottom: 15px;
}

.kenderaan .content-wrapper {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
}

.kenderaan .row-data {
    display: flex;
    align-items: flex-start;
    margin-bottom: 20px;
}

.kenderaan .text-label {
    font-weight: bold;
    color: var(--primary-color);
    min-width: 200px;
    white-space: normal;
    line-height: 1.5;
}

.kenderaan .data-field {
    text-align: left;
    margin-left: 130px;
    margin-right: auto;
    word-wrap: break-word;
}

.kenderaan .custom-icon-link i {
    color: var(--primary-color);
    font-size: 24px;
    border: 2px solid var(--primary-color);
    padding: 5px;
}

.kenderaan .custom-icon-link i:hover {
    color: #4B0082;
    border-color: #4B0082;
}

/* Custom search bar style */
.kenderaan .custom-search-bar {
    border: 2px solid var(--primary-color) !important;
    border-left: none;
    border-radius: 8px;
    padding: 10px 20px;
    width: 100%;
    font-size: 14px;
    padding-left: 50px;
    margin-right: 20px;
}

.kenderaan .custom-search-bar:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 8px rgba(111, 30, 211, 0.2);
}

/* Custom Add Vehicle button */
.kenderaan .custom-add-btn {
    border-color: var(--primary-color);
    color: #FFFFFF !important;
    background-color: var(--primary-color);
    padding: 10px 20px;
    border-radius: 8px;
    transition: all 0.3s;
    margin-left: 20px;
    font-weight: bold;
}

.kenderaan .custom-add-btn:hover {
    background-color: var(--primary-color);
    color: #fff !important;
}

.kenderaan .search-icon {
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--primary-color);
    font-size: 18px;
}

.kenderaan .position-relative {
    position: relative;
    display: inline-block;
}

/* Notes section styling */
.kenderaan .custom-notes-input {
    border-radius: 10px;
    padding: 20px;
    height: 150px;
    width: 120%;
    resize: none;
    font-size: 16px;
    background-color: #F3F3F3;
}

.kenderaan .custom-notes-input:focus {
    border-color: var(--primary-color);
    outline: none;
    box-shadow: 0 0 8px rgba(111, 30, 211, 0.2);
}

/* Button styling */
.kenderaan .approve-btn {
    background-color: #18AF0B;
    border-color: #18AF0B;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 16px;
}

.kenderaan .reject-btn {
    background-color: #AF150B;
    border-color: #AF150B;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 16px;
}

.kenderaan .approve-btn:hover,
.reject-btn:hover {
    opacity: 0.85;
}

.kenderaan .button-group-vertical {
    display: flex;
    flex-direction: column;
}

.kenderaan .custom-dropdown-vehicle-edit {
    width: 100%;
    padding: 10px 40px 10px 10px;
    border: 1px solid var(--primary-color);
    border-radius: 8px;
    font-weight: normal;
    color: var(--primary-color);
    background-color: transparent;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

.kenderaan .custom-dropdown-vehicle-edit+.select-icon {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: var(--primary-color);
    font-size: 18px;
}

.kenderaan .name-column {
    /*padding-left: 25%;*/
    text-align: left;
    display: flex;
    align-items: center;
}

.kenderaan .name-column .staff-component-class {
    margin: 0;
}

/*--------------------------------------------------------------
# Announcement / Pengumuman Css
--------------------------------------------------------------*/

/* Custom Search Bar and Button */
.pengumuman .custom-search-bar {
    border: 2px solid var(--primary-color) !important;
    border-left: none;
    border-radius: 8px;
    padding: 10px 20px;
    width: 100%;
    font-size: 14px;
    padding-left: 50px;
    margin-right: 20px;
}

.pengumuman .custom-search-bar:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 8px rgba(111, 30, 211, 0.2);
}

/* Custom Add Vehicle button */
.pengumuman .custom-add-btn {
    border-color: var(--primary-color);
    color: #FFFFFF !important;
    background-color: var(--primary-color);
    padding: 10px 20px;
    border-radius: 8px;
    transition: all 0.3s;
    margin-left: 20px;
    font-weight: bold;
}

.pengumuman .custom-add-btn:hover {
    background-color: var(--primary-color);
    color: #fff !important;
}

.pengumuman .search-icon {
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--primary-color);
    font-size: 18px;
}

.pengumuman .position-relative {
    position: relative;
    display: inline-block;
}

.pengumuman .custom-input {
    background-color: #F3F3F3;
    border-radius: 8px;
    border: 1px;
    box-sizing: border-box;
    color: #444;
    font-size: 14px;
    padding: 10px;
    width: 100%;
}

.pengumuman .purple-text {
    color: var(--primary-color);
    font-weight: bold;
    margin-bottom: 5px;
}

.pengumuman .custom-input {
    background-color: #F3F3F3;
    border-radius: 8px;
    padding: 10px;
    width: 100%;
    margin-bottom: 10px;
}

.pengumuman .btn.custom-button {
    background-color: var(--primary-color);
    color: white;
    width: 150px;
    /* Adjust the width to match */
    height: 40px;
    /* Adjust the height to match */
    padding: 10px 80px !important;
    border-radius: 8px;
    border: none;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    white-space: nowrap;
    font-weight: bold;
}

.pengumuman .btn.custom-button:hover {
    background-color: #5a0ecb;
    color: white;
    box-shadow: 0 4px 8px rgba(65, 84, 241, 0.2);
}

.pengumuman .text-label {
    font-weight: bold;
    color: var(--primary-color);
    min-width: 200px;
    white-space: normal;
    line-height: 1.5;
}

.pengumuman .form-check-label {
    margin-left: 5px;
    margin-right: 20px;
    font-size: 16px;
}

.pengumuman .form-label {
    font-weight: bold;
    color: var(--primary-color);
}

.pengumuman .form-check-input {
    width: 20px;
    height: 20px;
    transform: scale(1.3);
    margin-right: 10px;
}

.pengumuman .table-hover tbody tr:hover {
    background-color: #f8f8f8;
}

.pengumuman .table thead th {
    font-weight: normal;
    font-size: 14px;
}

.pengumuman .table td,
.pengumuman .table th {
    border-top: none;
    vertical-align: middle;
}

.pengumuman .custom-icon-link i {
    color: var(--primary-color);
    font-size: 24px;
    border: 2px solid var(--primary-color);
    padding: 5px;
}

.pengumuman .custom-icon-link i:hover {
    color: #4B0082;
    border-color: #4B0082;
}

/*--------------------------------------------------------------
# Custom Pagination Component
--------------------------------------------------------------*/
.pagination {
    display: flex;
    justify-content: center;
    list-style: none;
    padding: 0;
}

.page-item {
    margin: 0 5px;
}

.page-item.active .page-link {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
    border-radius: 5px;
}

.page-link {
    color: var(--primary-color);
    padding: 8px 16px;
    border: 1px solid var(--primary-color);
    border-radius: 5px;
    text-decoration: none;
}

.page-link:hover {
    background-color: var(--primary-color);
    color: white;
}

.page-item.disabled .page-link {
    color: #6c757d;
    cursor: not-allowed;
    background-color: #e9ecef;
    border-color: #dee2e6;
}

.page-item:first-child .page-link,
.page-item:last-child .page-link {
    border: none;
    background-color: transparent;
    color: var(--primary-color);
}

.page-item:first-child .page-link:hover,
.page-item:last-child .page-link:hover {
    background-color: #f8f9fa;
    color: #6f42c1;
}

/*--------------------------------------------------------------
# Vendor / merchant Css
--------------------------------------------------------------*/

/* Custom Search Bar and Button */
.merchant .custom-search-bar {
    border: 2px solid var(--primary-color) !important;
    border-left: none;
    border-radius: 8px;
    padding: 10px 20px;
    width: 100%;
    font-size: 14px;
    padding-left: 50px;
    margin-right: 20px;
}

.merchant .custom-search-bar:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 8px rgba(111, 30, 211, 0.2);
}

/* Custom Add Vehicle button */
.merchant .custom-add-btn {
    border-color: var(--primary-color);
    color: #FFFFFF !important;
    background-color: var(--primary-color);
    padding: 10px 20px;
    border-radius: 8px;
    transition: all 0.3s;
    margin-left: 20px;
    font-weight: bold;
}

.merchant .custom-add-btn:hover {
    background-color: var(--primary-color);
    color: #fff !important;
}

.merchant .search-icon {
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--primary-color);
    font-size: 18px;
}

.merchant .position-relative {
    position: relative;
    display: inline-block;
}

.merchant .custom-input {
    background-color: #F3F3F3;
    border-radius: 8px;
    border: 1px;
    box-sizing: border-box;
    color: #444;
    font-size: 14px;
    padding: 10px;
    width: 100%;
}

.merchant .purple-text {
    color: var(--primary-color);
    font-weight: bold;
    margin-bottom: 5px;
}

.merchant .custom-input {
    background-color: #F3F3F3;
    border-radius: 8px;
    padding: 10px;
    width: 100%;
    margin-bottom: 10px;
}

.merchant .btn.custom-button {
    background-color: var(--primary-color);
    color: white;
    padding: 10px 80px !important;
    border-radius: 8px;
    border: none;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    white-space: nowrap;
    font-weight: bold;
}

.merchant .btn.custom-button:hover {
    background-color: #5a0ecb;
    color: #fff;
}

.merchant .text-label {
    font-weight: bold;
    color: var(--primary-color);
    min-width: 200px;
    white-space: normal;
    line-height: 1.5;
}

.merchant .form-check-label {
    margin-left: 5px;
    margin-right: 20px;
    font-size: 16px;
}

.merchant .form-label {
    font-weight: bold;
    color: var(--primary-color);
}

.merchant .form-check-input {
    width: 20px;
    height: 20px;
    transform: scale(1.3);
    margin-right: 10px;
}

.merchant .table-hover tbody tr:hover {
    background-color: #f8f8f8;
}

.merchant .table thead th {
    font-weight: normal;
    font-size: 14px;
    color: var(--primary-color);
}

.merchant .table.table-bordered thead th {
    color: #FFF;
}

.merchant .table td,
.merchant .table th {
    border-top: none;
    vertical-align: middle;
}

.merchant .custom-icon-link i {
    color: var(--primary-color);
    font-size: 24px;
    border: 2px solid var(--primary-color);
    padding: 5px;
}

.merchant .custom-icon-link i:hover {
    color: #4B0082;
    border-color: #4B0082;
}

span.merchant-total-amount,
span.merchant-total-transaction {
    color: var(--primary-color);
    font-weight: bold;
    font-size: 2.0rem;
}

.merchant .bi-info-circle {
    color: #6c757d;
    /* Gray icon color */
    font-size: 1.2rem;
    margin-left: 10px;
}

.merchant .bi-info-circle:hover {
    color: #5a6268;
    /* Slightly darker on hover */
}

.merchant p {
    font-size: 0.95rem;
    /* Slightly smaller font size */
    color: #555555;
    /* Softer text color */
    line-height: 1.6;
    /* Improved line spacing */
    margin-bottom: 15px;
    /* Consistent bottom spacing */
    text-align: justify;
    /* Align text neatly */
}

/*--------------------------------------------------------------
# Vendor / pengurusan Css
--------------------------------------------------------------*/

/* Custom Search Bar and Button */
.pengurusan .custom-search-bar {
    border: 2px solid var(--primary-color) !important;
    border-left: none;
    border-radius: 8px;
    padding: 10px 20px;
    width: 100%;
    font-size: 14px;
    padding-left: 50px;
    margin-right: 20px;
}

.pengurusan .custom-search-bar:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 8px rgba(111, 30, 211, 0.2);
}

/* Custom Add Vehicle button */
.pengurusan .custom-add-btn {
    border-color: var(--primary-color);
    color: #FFFFFF !important;
    background-color: var(--primary-color);
    padding: 10px 20px;
    border-radius: 8px;
    transition: all 0.3s;
    margin-left: 20px;
    font-weight: bold;
}

.pengurusan .custom-add-btn:hover {
    background-color: var(--primary-color);
    color: #fff !important;
}

.pengurusan .search-icon {
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--primary-color);
    font-size: 18px;
}

.pengurusan .position-relative {
    position: relative;
    display: inline-block;
}

.pengurusan .custom-input {
    background-color: #F3F3F3;
    border-radius: 8px;
    border: 1px;
    box-sizing: border-box;
    color: #444;
    font-size: 14px;
    padding: 10px;
    width: 100%;
}

.pengurusan .purple-text {
    color: var(--primary-color);
    font-weight: bold;
    margin-bottom: 5px;
}

.pengurusan .custom-input {
    background-color: #F3F3F3;
    border-radius: 8px;
    padding: 10px;
    width: 100%;
    margin-bottom: 10px;
}

.pengurusan .btn.custom-button {
    background-color: var(--primary-color);
    color: white;
    padding: 10px 80px !important;
    border-radius: 8px;
    border: none;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    white-space: nowrap;
    font-weight: bold;
}

.pengurusan .btn.custom-button:hover {
    background-color: #5a0ecb;
    color: #fff;
}

.pengurusan .text-label {
    font-weight: bold;
    color: var(--primary-color);
    min-width: 200px;
    white-space: normal;
    line-height: 1.5;
}

.pengurusan .form-check-label {
    margin-left: 5px;
    margin-right: 20px;
    font-size: 16px;
}

.pengurusan .form-label {
    font-weight: bold;
    color: var(--primary-color);
}

.pengurusan .form-check-input {
    width: 20px;
    height: 20px;
    transform: scale(1.3);
    margin-right: 10px;
}

.pengurusan .table-hover tbody tr:hover {
    background-color: #f8f8f8;
}

.pengurusan .table thead th,
.table.table-bordered th {
    font-weight: normal;
    font-size: 14px;
    color: white;
    background: var(--primary-color);
}

.pengurusan .table td,
.pengurusan .table th {
    border-top: none;
    vertical-align: middle;
}

.pengurusan .custom-icon-link i {
    color: var(--primary-color);
    font-size: 24px;
    border: 2px solid var(--primary-color);
    padding: 5px;
}

.pengurusan .custom-icon-link i:hover {
    color: #4B0082;
    border-color: #4B0082;
}

span.pengurusan-total-amount,
span.pengurusan-total-transaction {
    color: var(--primary-color);
    font-weight: bold;
    font-size: 2.0rem;
}


/*--------------------------------------------------------------
# Student Css
--------------------------------------------------------------*/

/* Custom Search Bar and Button */
.student .custom-search-bar {
    border: 2px solid var(--primary-color) !important;
    border-left: none;
    border-radius: 8px;
    padding: 10px 20px;
    width: 100%;
    font-size: 14px;
    padding-left: 50px;
    margin-right: 20px;
}

.student .custom-search-bar:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 8px rgba(111, 30, 211, 0.2);
}

/* Custom Add Vehicle button */
.student .custom-add-btn {
    border-color: var(--primary-color);
    color: #FFFFFF !important;
    background-color: var(--primary-color);
    padding: 10px 20px;
    border-radius: 8px;
    transition: all 0.3s;
    margin-left: 20px;
    font-weight: bold;
}

.student .custom-add-btn:hover {
    background-color: var(--primary-color);
    color: #fff !important;
}

.student .search-icon {
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--primary-color);
    font-size: 18px;
}

.student .position-relative {
    position: relative;
    display: inline-block;
}

.student .custom-input {
    background-color: #F3F3F3;
    border-radius: 8px;
    border: 1px;
    box-sizing: border-box;
    color: #444;
    font-size: 14px;
    padding: 10px;
    width: 100%;
}

.student .purple-text {
    color: var(--primary-color);
    font-weight: bold;
    margin-bottom: 5px;
}

.student .custom-input {
    background-color: #F3F3F3;
    border-radius: 8px;
    padding: 10px;
    width: 100%;
    margin-bottom: 10px;
}

.student .btn.custom-button {
    background-color: var(--primary-color);
    color: white;
    padding: 10px 80px !important;
    border-radius: 8px;
    border: none;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    white-space: nowrap;
    font-weight: bold;
}

.student .btn.custom-button:hover {
    background-color: #5a0ecb;
    color: #fff;
}

.student .text-label {
    font-weight: bold;
    color: var(--primary-color);
    min-width: 200px;
    white-space: normal;
    line-height: 1.5;
}

.student .form-check-label {
    margin-left: 5px;
    margin-right: 20px;
    font-size: 16px;
}

.student .form-label {
    font-weight: bold;
    color: var(--primary-color);
}

.student .form-check-input {
    width: 20px;
    height: 20px;
    transform: scale(1.3);
    margin-right: 10px;
}

/*.student .table-hover tbody tr:hover {*/
/*  background-color: #f8f8f8;*/
/*}*/

/*.student .table thead th {*/
/*  font-weight: normal;*/
/*  font-size: 14px;*/
/*}*/

/*.student .table td, .student .table th {*/
/*  border-top: none;*/
/*  vertical-align: middle;*/
/*}*/

.student .custom-icon-link i {
    color: var(--primary-color);
    font-size: 24px;
    border: 2px solid var(--primary-color);
    padding: 5px;
}

.student .custom-icon-link i:hover {
    color: #4B0082;
    border-color: #4B0082;
}

span.student-total-amount,
span.student-wallet-balance {
    color: var(--primary-color);
    font-weight: bold;
    font-size: 2.0rem;
}

/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
.footer {
    padding: 20px 0;
    font-size: 14px;
    transition: all 0.3s;
    border-top: 1px solid #cddfff;
}

.footer .copyright {
    text-align: center;
    color: #012970;
}

.footer .credits {
    padding-top: 5px;
    text-align: center;
    font-size: 13px;
    color: #012970;
}

@media (max-width: 1199px) {
    #main.main:has(.section-dashboard.private) {
        padding-bottom: 0 !important;
    }

    .section-dashboard.private {
        min-height: auto !important;
        padding-bottom: 0 !important;
    }

    .footer {
        padding: 16px 16px calc(104px + env(safe-area-inset-bottom, 0px));
        font-size: 12px;
    }
}

/*--------------------------------------------------------------
# Leave Management Css
--------------------------------------------------------------*/

input[type="text"],
select {
    width: 100%;
    /*padding: 10px;*/
    /*border: 1px solid #ccc;*/
    border-radius: 4px;

}

button {
    background-color: var(--primary-color);
    color: white;
    padding: 10px 20px;
    border: none;
    cursor: pointer;
}

.text-left {
    text-align: left;
}

.text-right {
    text-align: right;
}

.leave-form,
.leave-edit {
    border-radius: 10px;
    background: #FFF;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    padding: 20px;

    h2 {
        color: var(--primary-color);
        font-family: var(--bos-font-family);
        font-size: 16px;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
        letter-spacing: 0.32px;
    }

    p {
        color: #1C2434;
        font-family: var(--bos-font-family);
        font-size: 14px;
        font-style: normal;
        line-height: normal;
        letter-spacing: 0.28px;
    }

    label {
        color: var(--primary-color);
        font-family: var(--bos-font-family);
        font-size: 16px;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
        letter-spacing: 0.32px;
    }
}

.leave-quota {
    border-radius: 10px;
    background: #FFF;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    padding: 20px;

    table {
        width: 100%;
        margin-bottom: 30px;
        table-layout: fixed;
    }

    tr:first-child {
        height: 10vh;
    }

    tr:first-child th {
        color: var(--primary-color);
        font-family: var(--bos-font-family);
        font-size: 14px;
        font-style: normal;
        font-weight: normal;
        line-height: normal;
        letter-spacing: 0.28px;
    }

    tr:not(:first-child) td {
        color: #1C2434;
        font-family: var(--bos-font-family);
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        letter-spacing: 0.28px;
    }

    button {
        border-radius: 10px;
        background: var(--primary-color);
    }

    .button-middle {
        text-align: center;
    }


}

.leave-approval {
    border-radius: 10px;
    background: #FFF;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    padding: 20px;
    margin-top: 40px;

    table {
        width: 100%;
        margin-bottom: 30px;
        table-layout: fixed;
    }

    h2 {
        color: var(--primary-color);
        font-family: var(--bos-font-family);
        font-size: 18px;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
        letter-spacing: 0.36px;
    }

    tr:first-child th {
        color: var(--primary-color);
        font-family: var(--bos-font-family);
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        letter-spacing: 0.28px;
        padding-bottom: 10px;
        border-bottom: 1px solid black;
    }

    tr:not(:first-child) td {
        color: #1C2434;
        font-family: var(--bos-font-family);
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        letter-spacing: 0.28px;
        padding: 10px 0px;
        border-bottom: 1px solid black;
    }
}

/*--------------------------------------------------------------
# Staff Management Css
--------------------------------------------------------------*/
/* Custom search bar style */

.staff-management form#search-form {
    display: flex;
}

.staff-management .form-check-input:checked {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.staff-management .custom-search-bar,
.staff-management select#status-filter {
    border: 2px solid var(--primary-color) !important;
    border-left: none;
    border-radius: 8px;
    padding: 10px 20px;
    width: 100%;
    font-size: 14px;
    padding-left: 50px;
    margin-right: 20px;
}

.staff-management select#status-filter {
    padding-left: 20px;
    margin-right: 0;
}

.staff-management .custom-search-bar:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 8px rgba(111, 30, 211, 0.2);
}

/* Custom Add button */
.staff-management .custom-add-btn {
    border-color: var(--primary-color);
    color: #FFFFFF !important;
    background-color: var(--primary-color);
    padding: 10px 20px;
    border-radius: 8px;
    transition: all 0.3s;
    margin-left: 20px;
    font-weight: bold;
}

.staff-management .custom-add-btn:hover {
    background-color: var(--primary-color);
    color: #fff !important;
}

.staff-management .search-icon {
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--primary-color);
    font-size: 18px;
}

.staff-management .position-relative {
    position: relative;
    display: inline-block;
}

.staff-management .text-start {
    text-align: left;
    display: flex;
    align-items: center;
}

/* Label Styling */
.staff-management label {
    font-weight: bold;
    font-size: 16px;
    color: var(--primary-color);
    margin-bottom: 10px;
}

.staff-management .dropdown-label {
    font-size: 16px;
    margin-right: 15px;
    color: var(--primary-color);
    white-space: nowrap;
}

/* Status */
.staff-management .status-waiting-review {
    color: #F8E113;
    font-weight: bold;
    background-color: transparent;
    border-radius: 0;
}

.staff-management .status-approved {
    color: #18AF0B;
    font-weight: bold;
    background-color: transparent;
    border-radius: 0;
}

.staff-management .status-rejected {
    color: red;
    font-weight: bold;
    background-color: transparent;
    border-radius: 0;
}

/* Table Design */
.staff-management .table-hover tbody tr:hover {
    background-color: #f8f8f8;
}

.staff-management .table thead th {
    font-weight: normal;
    font-size: 14px;
    color: var(--primary-color);
}

.staff-management .table td,
.staff-management .table th {
    border-top: none;
    vertical-align: middle;
}

.staff-management .custom-input {
    background-color: #F3F3F3;
    border-radius: 8px;
    border: 1px;
    box-sizing: border-box;
    color: #444;
    font-size: 14px;
    padding: 10px;
    width: 100%;
}

.staff-management .custom-input:focus {
    border-color: var(--primary-color);
    outline: none;
    box-shadow: 0 0 5px rgba(65, 84, 241, 0.2);
}

.staff-management .custom-input-group {
    max-width: 100%;
    flex-wrap: nowrap;
}

.staff-management .small-input {
    width: 100px !important;
    padding: 5px;
    font-size: 14px;
    text-align: center;
}

.staff-management .custom-input.small-input {
    width: 100px !important;
}

.staff-management .custom-select-wrapper {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
}

.staff-management .custom-select-wrapper select {
    width: 100%;
    padding-right: 40px;
    border: 1px solid var(--primary-color);
    border-radius: 8px;
    font-weight: normal;
    color: var(--primary-color);
    background-color: transparent;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

.staff-management .custom-select-wrapper select:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 8px rgba(111, 30, 211, 0.2);
    outline: none;
}

.staff-management .custom-select-wrapper .select-icon {
    position: absolute;
    right: 10px;
    pointer-events: none;
    color: var(--primary-color);
    font-size: 18px;
}

.staff-management .custom-select-wrapper select option {
    font-weight: normal;
    padding: 10px;
    background-color: #f8f8f8;
    color: var(--primary-color);
    border: none;
    font-weight: lighter;
}

.staff-management .dropdown-label {
    font-size: 16px;
    margin-right: 15px;
    color: var(--primary-color);
    white-space: nowrap;
}

.staff-management .name-column {
    text-align: left;
    display: flex;
    align-items: center;
}

.staff-management .name-column .staff-component-class {
    margin: 0;
}

.staff-management .input-group .form-control {
    background-color: #F3F3F3;
    border: none;
    border-right: 0;
    border-radius: 0.25rem 0 0 0.25rem;
    color: #444;
    font-size: 14px;
    padding: 10px;
    box-sizing: border-box;
}

.staff-management .input-group .input-group-text {
    background-color: #F3F3F3;
    border: none;
    border-left: 0;
    border-radius: 0 0.25rem 0.25rem 0;
    color: #444;
    cursor: pointer;
    display: flex;
    align-items: center;
    padding: 0.375rem 0.75rem;
}

.staff-management .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: #dfdddd;
    border: 1px solid #aaa;
    border-radius: 4px;
    display: inline-block;
    margin-left: 4px;
    margin-top: 5px;
    padding-left: 25px;
}

.staff-management .d-flex {
    display: flex;
    justify-content: flex-end;
}

.staff-management .btn-primary {
    background-color: var(--primary-color) !important;
    color: #FFFFFF !important;
    margin-left: auto !important;
    margin-right: 0;
    padding: 10px 15px;
}

.staff-management .btn-danger {
    background-color: #dc3545;
    color: white !important;
    margin-left: auto !important;
    margin-right: 0;
    padding: 10px 15px;
}

.staff-management .list-group-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.staff-management .card a.btn {
    margin: 0 !important;
}

/*--------------------------------------------------------------
# KPI / Prestasi CSS
--------------------------------------------------------------*/
.kpi .purple-text {
    color: var(--primary-color);
    font-weight: bold;
}

.kpi .text-label {
    font-weight: bold;
    color: var(--primary-color);
    min-width: 200px;
    white-space: normal;
    line-height: 1.5;
}

.kpi .btn-outline-primary {
    border-color: var(--primary-color);
    color: var(--primary-color) !important;
    background-color: transparent;
    width: auto;
}

.kpi .btn-outline-primary:hover {
    border-color: var(--primary-color);
    color: #FFFFFF !important;
    background-color: var(--primary-color);
    width: auto;
}

/* Custom search bar style */
.kpi .custom-search-bar {
    border: 2px solid var(--primary-color) !important;
    border-left: none;
    border-radius: 8px;
    padding: 10px 20px;
    width: 100%;
    font-size: 14px;
    padding-left: 50px;
    margin-right: 20px;
}

.kpi .custom-search-bar:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 8px rgba(111, 30, 211, 0.2);
}

.kpi .search-icon {
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--primary-color);
    font-size: 18px;
}

.kpi .dropdown-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

/* Custom Add button */
.kpi .custom-add-btn {
    border-color: var(--primary-color);
    color: #FFFFFF !important;
    background-color: var(--primary-color);
    padding: 10px 20px;
    border-radius: 8px;
    transition: all 0.3s;
    margin-left: 20px;
    font-weight: bold;
}

.kpi .custom-add-btn:hover {
    background-color: var(--primary-color);
    color: #fff !important;
}

.kpi select {
    background-color: transparent;
    padding: 10px;
    border-radius: 8px;
    width: 100%;
    border: 2px solid var(--primary-color);
    color: var(--primary-color);
    font-weight: bold;
    font-size: 14px;
    transition: border-color 0.3s, box-shadow 0.3s;
}

.kpi select:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 8px rgba(111, 30, 211, 0.2);
    outline: none;
}

.kpi select option {
    color: #444;
}

.kpi .form-group {
    margin-bottom: 20px;
}

.kpi .input-group .form-control {
    background-color: #F3F3F3;
    border: none;
    border-right: 0;
    border-radius: 8px;
    color: var(--primary-color);
    font-size: 14px;
    padding: 10px;
    box-sizing: border-box;
}

/* Table Design */
.kpi .table {
    border-collapse: collapse;
}

.kpi .table-hover tbody tr:hover {
    background-color: #f8f8f8;
}

.kpi .table thead th {
    font-weight: normal;
    font-size: 14px;
    color: var(--primary-color);
}

.kpi .table td,
.kpi .table th {
    border-top: none;
    vertical-align: middle;
}

.kpi .table td:nth-child(2) {
    height: 67.8px;
}

.kpi .maklumat-pegawai-table td:nth-child(2) {
    height: auto !important;
}

.kpi .custom-input {
    background-color: #F3F3F3;
    border-radius: 8px;
    border: none;
    box-sizing: border-box;
    color: #444;
    font-size: 14px;
    padding: 10px;
    width: 100%;
    margin-bottom: 10px;
}

.kpi .custom-input:focus {
    border-color: var(--primary-color);
    outline: none;
    box-shadow: 0 0 5px rgba(65, 84, 241, 0.2);
}

.kpi .custom-input-group {
    max-width: 100%;
    flex-wrap: nowrap;
}

.kpi .custom-select-wrapper {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
}

.kpi .small-input {
    width: 100px !important;
    padding: 5px;
    font-size: 14px;
    text-align: center;
}

.kpi .custom-input.small-input {
    width: 100px !important;
}

.kpi label {
    font-weight: bold;
    font-size: 16px;
    color: var(--primary-color);
    margin-bottom: 10px;
    display: block;
}

.kpi .tambah-lainnya {
    font-weight: bold;
    text-align: right;
    margin-left: auto;
    display: inline-block;
    text-decoration: none;
    margin-top: 10px;
    color: var(--primary-color);
    background: none;
    border: none;
    cursor: pointer;
    font-size: 16px;
}

.kpi .tambah-lainnya:hover {
    text-decoration: underline;
    color: var(--primary-color);
    background: none;
}

.kpi .btn+.btn {
    margin-left: 10px;
}

.kpi .btn[disabled] {
    pointer-events: none;
    cursor: not-allowed;
    opacity: 0.6;
}

.kpi .d-flex.justify-content-end {
    gap: 10px;
}

.kpi .btn-primary {
    background-color: var(--primary-color) !important;
    color: #FFFFFF !important;
    width: 200px !important;
}

.kpi .btn-secondary {
    background-color: #f8f9fa !important;
    color: black !important;
    border: 5px;
    border-color: #dee2e6;
}

.kpi .btn-same-size {
    width: 150px;
    height: 50px;
    padding: 10px;
    text-align: center;
    display: inline-block;
    font-size: 14px;
    line-height: 1.5;
}

.kpi .d-flex.justify-content-end {
    gap: 10px;
    margin-top: 20px;
}

.kpi .custom-upload-button {
    display: inline-flex;
    align-items: center;
    color: var(--primary-color);
    /* Adjust to match your theme */
    cursor: pointer;
    font-weight: 600;
    text-decoration: none;
    font-size: 16px;
}

.kpi .custom-upload-button i {
    margin-right: 5px;
    /* Spacing between icon and text */
}

.kpi .custom-upload-button:hover {
    text-decoration: underline;
}

/* Hide default file input */
.kpi .d-none {
    display: none;
}

.kpi .name-column {
    text-align: left;
}

.kpi .name-column .d-flex {
    display: flex;
    align-items: center;
}

.kpi .rounded-circle {
    object-fit: cover;
    /* Ensures the image fits the circle perfectly */
    display: inline-block;
    width: 40px;
    height: 40px;
}

.kpi .name-column img {
    width: 40px;
    height: 40px;
    object-fit: cover;
    margin-right: 10px;
}

.kpi .name-column strong {
    display: block;
}

.kpi .name-column small {
    color: #6c757d;
    /* Optional: Muted text color */
}

/* Status */
.kpi .status-waiting-review {
    color: #F8E113;
    font-weight: bold;
    background-color: transparent;
    border-radius: 0;
}

.kpi .status-approved {
    color: #18AF0B;
    font-weight: bold;
    background-color: transparent;
    border-radius: 0;
}

.kpi .status-rejected {
    color: red;
    font-weight: bold;
    background-color: transparent;
    border-radius: 0;
}

/* Custom styles for selected accordion item */
.kpi .accordion-button {
    background-color: var(--primary-color);
    color: white !important;
    border-color: var(--primary-color);
}

.kpi .accordion-button:focus {
    box-shadow: none;
}

.kpi .accordion-button:not(.collapsed) {
    background-color: var(--primary-color);
    color: white;
    /* Change the text color when selected */
    border-color: var(--primary-color);
}

.kpi .accordion-button:hover {
    background-color: var(--primary-color);
    color: white;
}

.kpi .accordion-button::after {
    color: #FFFFFF !important;
}

.kpi .accordion-button:not(.collapsed)::after {
    color: white !important;
}

.kpi .accordion-button:hover::after {
    color: white !important;
}

.kpi .row {
    display: flex;
    flex-wrap: wrap;
}

.kpi .col-md-6 {
    width: 48%;
    margin-right: 4%;
    margin-bottom: 16px;
}

.kpi .col-md-6:last-child {
    margin-right: 0;
}

.kpi input[type="range"] {
    width: 100%;
    height: 10px;
    -webkit-appearance: none;
    background: #ddd;
    border-radius: 5px;
}

.kpi input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    background: var(--primary-color);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    cursor: pointer;
}

/* Make the radio buttons bigger */
.kpi .form-check-input {
    width: 35px;
    height: 35px;
    margin: 5px 0;
}

/* Adjust the label font size to match the larger buttons */
.kpi .form-check-label {
    font-size: 16px;
    text-align: center;
}

.kpi .form-check-input:checked {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.kpi .form-check-group {
    display: flex;
    justify-content: space-between;
    width: 100%;
    align-items: center;
}

.kpi .form-check {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 0;
    /* Remove margin between radio buttons */
}

.kpi .d-flex .form-check {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.kpi .rating-label {
    font-size: 16px;
    font-weight: bold;
    color: var(--primary-color);
    padding: 0 15px;
}

.kpi .d-flex {
    display: flex;
    align-items: center;
    width: 100%;
}

.kpi .rating-label {
    font-size: 16px;
    color: var(--primary-color);
}

.kpi .card-header.bg-purple {
    background-color: var(--primary-color);
    color: white;
}

.kpi .text-right {
    text-align: right;
}

.kpi .section-title {
    font-size: 16px;
    color: #333;
    margin-bottom: 8px;
}

.kpi .score-box {
    display: inline-block;
    background-color: var(--primary-color);
    color: white;
    padding: 20px 20px;
    border-radius: 10px;
    font-weight: bold;
    font-size: 20px;
    position: relative;
    z-index: 1;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.kpi .col-md-8.text-start h5,
.kpi .col-md-8.text-start p {
    display: block;
    margin-bottom: 0.25rem;
    /* Optional spacing */
}

/* Custom Checkbox */
.kpi .delete-checkbox {
    -webkit-appearance: none;
    /* Remove default checkbox appearance */
    -moz-appearance: none;
    /* Remove default checkbox appearance */
    appearance: none;
    /* Remove default checkbox appearance */
    width: 20px;
    /* Adjust size */
    height: 20px;
    /* Adjust size */
    background-color: #F3F3F3;
    border-radius: 4px;
    /* Round corners to match the custom input */
    border: 1px solid var(--primary-color);
    box-sizing: border-box;
    position: relative;
    cursor: pointer;
    transition: all 0.2s ease;
}

/* Checkmark on checked state */
.kpi .delete-checkbox:checked::before {
    content: '\2713';
    /* Checkmark symbol */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 14px;
    color: #444;
}

/* Hover effect */
.kpi .delete-checkbox:hover {
    background-color: #e0e0e0;
    border-color: var(--primary-color);
}

/* Focus effect when the checkbox is focused */
.kpi .delete-checkbox:focus {
    outline: none;
    box-shadow: 0 0 5px rgba(65, 84, 241, 0.2);
}

.kpi .modal-lg {
    max-width: 50%;
    /* kpi modal pop up */
}

/*--------------------------------------------------------------
# Modal CSS
--------------------------------------------------------------*/
.modal-header {
    background-color: var(--primary-color);
    color: #FFFFFF !important;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    border-bottom: none;
    padding: 15px;
}

.modal-header .modal-title {
    margin: 0 200px;
    /* Center title */
    font-size: 20px;
    font-weight: bold;
    color: #FFFFFF !important;
}

.modal-body {
    padding-bottom: 60px;
    /* Add padding for the indicators */
    position: relative;
    /* Ensure content does not overlap */
}

/* Table Header Styles */
.modal-body table thead th {
    background-color: var(--primary-color);
    color: #FFFFFF !important;
    font-weight: bold;
    text-align: center;
}

/* Table Data Alignment */
.modal-body table tbody td {
    vertical-align: middle;
    text-align: center;
}

.modal-dialog {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}

/* Merged Rows */
.table-bordered tbody td[rowspan] {
    vertical-align: middle;
    text-align: center;
}

.modal-dialog-centered {
    display: flex;
    align-items: center;
    justify-content: center;
}

.carousel-control-prev,
.carousel-control-next {
    width: 40px;
    /* Adjust the button size */
    height: 40px;
    background-color: var(--primary-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.3;
    /* Slight transparency */
    transition: opacity 0.3s ease, transform 0.3s ease;
    /* Smooth transitions */
}

.carousel-control-prev:hover,
.carousel-control-next:hover {
    opacity: 1;
    transform: scale(1.1);
    /* Slightly enlarge on hover */
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    background-size: 100%;
    /*filter: invert(1);*/
}

/*--------------------------------------------------------------
# User Management CSS
--------------------------------------------------------------*/
.user-profile .custom-input {
    background-color: #F3F3F3;
    border-radius: 8px;
    border: 1px;
    box-sizing: border-box;
    color: #444;
    font-size: 14px;
    padding: 10px;
    width: 100%;
}

.user-profile .custom-input:focus {
    border-color: var(--primary-color);
    outline: none;
    box-shadow: 0 0 5px rgba(65, 84, 241, 0.2);
}

.user-profile .custom-input-group {
    max-width: 100%;
    flex-wrap: nowrap;
}

.user-profile .small-input {
    width: 100px !important;
    padding: 5px;
    font-size: 14px;
    text-align: center;
}

.user-profile .custom-input.small-input {
    width: 100px !important;
}

.user-profile .custom-select-wrapper {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
}

.user-profile .custom-input-group {
    max-width: 100%;
    flex-wrap: nowrap;
}

.user-profile .small-input {
    width: 100px !important;
    padding: 5px;
    font-size: 14px;
    text-align: center;
}

.user-profile .custom-select-wrapper select {
    width: 100%;
    padding-right: 40px;
    border: 1px solid var(--primary-color);
    border-radius: 8px;
    font-weight: normal;
    color: var(--primary-color);
    background-color: transparent;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

.user-profile .custom-select-wrapper select:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 8px rgba(111, 30, 211, 0.2);
    outline: none;
}

.user-profile .custom-select-wrapper .select-icon {
    position: absolute;
    right: 10px;
    pointer-events: none;
    color: var(--primary-color);
    font-size: 18px;
}

.user-profile .custom-select-wrapper select option {
    font-weight: normal;
    padding: 10px;
    background-color: #f8f8f8;
    color: var(--primary-color);
    border: none;
    font-weight: lighter;
}

/* Label Styling */
.user-profile label {
    font-weight: bold;
    font-size: 16px;
    color: var(--primary-color);
    margin-bottom: 10px;
}

.user-profile .dropdown-label {
    font-size: 16px;
    margin-right: 15px;
    color: var(--primary-color);
    white-space: nowrap;
}

.user-profile .input-group .form-control {
    background-color: #F3F3F3;
    border: none;
    border-right: 0;
    border-radius: 0.25rem 0 0 0.25rem;
    color: #444;
    font-size: 14px;
    padding: 10px;
    box-sizing: border-box;
}

.user-profile .input-group .input-group-text {
    background-color: #F3F3F3;
    border: none;
    border-left: 0;
    border-radius: 0 0.25rem 0.25rem 0;
    color: #444;
    cursor: pointer;
    display: flex;
    align-items: center;
    padding: 0.375rem 0.75rem;
}

/*--------------------------------------------------------------
# Dropify CSS Component
--------------------------------------------------------------*/
/* Center align the Dropify container */
.dropify-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #F3F3F3 !important;
    border-radius: 8px !important;
    border: none !important;
    padding: 15px;
    box-sizing: border-box;
    color: #444 !important;
    font-size: 14px;
    width: 100%;
    height: 200px;
}

/* Remove default Dropify icon text */
.dropify-wrapper .dropify-message p {
    display: none;
}

/* Center the preview image and style it */
.dropify-wrapper .dropify-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #F3F3F3 !important;
    border: none !important;
}

.dropify-wrapper .dropify-preview .dropify-render img {
    max-width: 150px;
    max-height: 150px;
    border-radius: 10%;
    object-fit: cover;
}

/* Hover effect similar to custom input focus style */
.dropify-wrapper:hover,
.dropify-wrapper:focus {
    border-color: #F3F3F3 !important;
    background-color: #F3F3F3 !important;
}

/* Custom label styling for Profile Picture */
.label-profile-picture {
    font-weight: bold;
    font-size: 1.2rem;
    color: #6f42c1;
    margin-bottom: 10px;
    display: block;
    text-align: left;
}

/*--------------------------------------------------------------
# Staff Component
--------------------------------------------------------------*/
.staff-component {
    display: flex;
}

.staff-component .avatar {
    width: 30px;
    height: 30px;
    display: inline-block;
    overflow: hidden;
    -o-object-fit: cover;
    object-fit: cover;
    border: 1px solid #e8eef3;
}

.staff-component .body {
    flex: 1;
}

.eye-icon-color {
    color: var(--primary-color);
}

.activity-status h4,
.activities-section h4 {
    font-size: var(--bs-subtitle-font-size);
}

.activity-status {
    margin-bottom: 30px;
}

.btn.full-btn {
    width: 100% !important;
}

.btn.btn-green {
    background: #18AF0B;
    color: #FFF;
}

.btn.btn-green:hover {
    background: #18AF0B;
}

.btn.btn-red {
    background: #AF150B;
    color: #FFF;
}

.btn.btn-red:hover {
    background: #AF150B;
}

.alert-box {
    background: #f0f0f0;
    padding: 10px;
}

/*--------------------------------------------------------------
# Ticket
--------------------------------------------------------------*/

.jawaban-card {
    border-radius: 10px;
    background: #FFF;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    padding: 20px;
    margin-bottom: 20px;


    .jawaban-title {
        font-weight: bold;
        font-size: 1.2em;
        margin-bottom: 20px;
        color: var(--primary-color);
    }

    .jawaban-item {
        margin-bottom: 10px;
    }

    .jawaban-label {
        font-size: 14px;
        color: var(--primary-color);
        margin-right: 20px;

    }

    .jawaban-description {
        color: #1C2434;
        font-family: var(--bos-font-family);
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        letter-spacing: 0.28px;
        height: 5vh;
    }

}

.all-ticket {
    border-radius: 10px;
    background: #FFF;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    padding: 20px;

    table {
        width: 100%;
        margin-bottom: 20px;
        table-layout: fixed;
    }

    .all-tickets-header {
        color: var(--primary-color);
        font-family: var(--bos-font-family);
        font-size: 18px;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
        letter-spacing: 0.36px;
    }

    tr:first-child th {
        color: white;
        font-family: var(--bos-font-family);
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        letter-spacing: 0.28px;
        padding-bottom: 10px;
        border-bottom: 1px solid black;
    }

    tr:not(:first-child) td {
        color: #1C2434;
        font-family: var(--bos-font-family);
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        letter-spacing: 0.28px;
        padding: 10px 0px;
        border-bottom: 1px solid black;
        text-align: center;
    }

    .bi-eye {
        font-size: 1.8em;
    }

    .all-tickets-header {
        padding-bottom: 30px;
    }
}

.assigned-ticket {
    border-radius: 10px;
    background: #FFF;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    padding: 20px;

    table {
        width: 100%;
        margin-bottom: 20px;
        table-layout: fixed;
    }

    .all-tickets-header {
        color: var(--primary-color);
        font-family: var(--bos-font-family);
        font-size: 18px;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
        letter-spacing: 0.36px;
    }

    tr:first-child th {
        color: white;
        font-family: var(--bos-font-family);
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        letter-spacing: 0.28px;
        padding-bottom: 10px;
        border-bottom: 1px solid black;
    }

    tr:not(:first-child) td {
        color: #1C2434;
        font-family: var(--bos-font-family);
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        letter-spacing: 0.28px;
        padding: 10px 0px;
        border-bottom: 1px solid black;
        text-align: center;
    }

    .bi-eye {
        font-size: 1.8em;
    }

    .all-tickets-header {
        padding-bottom: 30px;
    }
}

.my-ticket {
    border-radius: 10px;
    background: #FFF;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    padding: 20px;

    table {
        width: 100%;
        margin-bottom: 20px;
        table-layout: fixed;
    }

    .my-tickets-header {
        color: var(--primary-color);
        font-family: var(--bos-font-family);
        font-size: 18px;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
        letter-spacing: 0.36px;
        padding-bottom: 30px;

    }


    tr:first-child th {
        color: white;
        font-family: var(--bos-font-family);
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        letter-spacing: 0.28px;
        padding-bottom: 10px;
        border-bottom: 1px solid black;
    }

    tr:not(:first-child) td {
        color: #1C2434;
        font-family: var(--bos-font-family);
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        letter-spacing: 0.28px;
        padding: 10px 0px;
        border-bottom: 1px solid black;
        text-align: center;
    }

    .bi-eye {
        font-size: 1.8em;
    }

}


.ticket-details {
    border-radius: 10px;
    background: #FFF;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    padding: 20px;
    margin-bottom: 20px;
    /* Adjust the margin as needed */


    table {
        width: 100%;
        margin-bottom: 0px;
        table-layout: fixed;
    }

    tr td {
        color: #1C2434;
        font-family: var(--bos-font-family);
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        letter-spacing: 0.28px;
        height: 5vh;
    }

    .label {
        margin-right: 20px;
    }

    .ticket-sum {
        font-weight: bold;
        font-size: 1.2em;
        margin-bottom: 20px;
        color: var(--primary-color);
    }
}

.comments-section {
    margin: 20px 0;
    padding: 10px;


    .comments-header {
        font-size: 1.5rem;
        font-weight: bold;
        margin-bottom: 10px;
        color: #333;
    }

    .comments-container {
        max-height: 300px;
        /* Adjust this value to control the height of the container */
        overflow-y: auto;
        /* Enable vertical scroll */
        padding: 30px;
        border-radius: 8px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        border: 1px solid #ddd;
        background-color: #fff;
    }

    .comment {
        margin-bottom: 15px;
        padding: 10px;
        border-radius: 6px;
        background-color: #f9f9f9;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    }

    .comment:last-child {
        margin-bottom: 0;
    }

    .comment-user {
        font-size: 0.9rem;
        color: #555;
        margin-bottom: 5px;
    }

    .comment-user .text-primary {
        font-weight: bold;
        color: #007bff;
    }

    .comment-date {
        font-size: 0.8rem;
        color: #888;
        margin-left: 10px;
    }

    .comment-body {
        font-size: 1rem;
        color: #333;
        line-height: 1.5;
        margin-top: 5px;
    }

    /* Add smooth scrolling for better user experience */

    .comments-container::-webkit-scrollbar {
        width: 8px;
    }

    .comments-container::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 8px;
    }

    .comments-container::-webkit-scrollbar-thumb {
        background: #ccc;
        border-radius: 8px;
    }

    .comments-container::-webkit-scrollbar-thumb:hover {
        background: #888;
    }
}

.tickets-total {
    .ticket-card {
        border-radius: 12px;
        padding: 10px;
        height: 130px;
        /* Ensure card height is sufficient */
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        justify-content: space-between;
        /* Ensure space between title and count */
    }

    .card-title {
        display: flex;
        justify-content: space-between;
        border-bottom: none;
        background-color: transparent;
        font-weight: 600;
        color: #6b21a8;
    }

    .ticket-icon {
        color: #6b21a8;
        font-size: 1.2em;
    }

    .ticket-count {
        align-items: center;
        justify-content: center;
        /* Center the ticket count */
        font-size: 1.5em;
        color: #6b21a8;
        height: auto;
        /* Allow the height to adjust based on content */
    }

    .tag-container {
        display: flex;
        justify-content: flex-start;
        gap: 15px;
        margin-bottom: 20px;
    }

    .tag {
        display: inline-flex;
        align-items: start;
        justify-content: flex-start;
        padding: 8px 18px;
        border: 2px solid #6b21a8;
        border-radius: 10px;
        background-color: #fff;
        color: #6b21a8;
        text-decoration: none;
        font-weight: 600;
        transition: background-color 0.3s, color 0.3s;
        font-size: 14px;
        width: 200px;
    }

    .tag i {
        margin-right: 8px;
        font-size: 1.2em;
        color: inherit;
    }

    .tag:hover {
        background-color: #6b21a8;
        color: #fff;
    }

    .tag-active {
        background-color: #6b21a8;
        color: #fff;
        border: 2px solid #6b21a8;
    }
}

.assign-to-form {

    border-radius: 10px;
    background: #FFF;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    padding: 20px;

    .jawaban-input {
        height: 150px;
        margin-top: 10px;
        width: 150%;
        /* Ensures the input takes up the full width of its container */
        max-width: 150%;
        /* Prevents overflow beyond the container */
        background-color: #f0f0f0;
        /* Light gray background color */
        border-radius: 10px;
        box-sizing: border-box;
        /* Includes padding and border in the element's width and height */
        resize: none;
        /* Prevents resizing if it's a <textarea> */
    }


    .custom-input {
        background-color: #f0f0f0;
        /* Light gray background color */
        border-radius: 10px;
    }

    .col-form-label {
        font-weight: bold;
        color: var(--primary-color);
    }

    .custom-select {
        position: relative;
        display: inline-block;
        width: 100%;
        /* Set width to 100% to make it responsive */
        max-width: 200px;
        /* Limit maximum width */
        height: 40px;
        /* Adjust height as needed */
        border: 1px solid #673AB7;
        border-radius: 5px;
        background-color: #fff;
        color: #673AB7;
        cursor: pointer;
        font-family: var(--bos-font-family);
        font-size: 14px;
        padding: 5px;
        box-sizing: border-box;
        /* Ensure padding doesn't affect width */
    }

    .custom-select select {
        width: 100%;
        height: 100%;
        border: none;
        background-color: transparent;
        appearance: none;
        -webkit-appearance: none;
        /* Remove default styling for Webkit browsers */
        -moz-appearance: none;
        /* Remove default styling for Firefox */
        padding: 5px;
        color: #673AB7;
        /* Set text color */
        font-size: inherit;
        /* Ensure consistent font size */
    }

    .custom-select select option {
        color: #673AB7;
        /* Set option text color */
    }

    .custom-select::after {
        content: "";
        position: absolute;
        top: 50%;
        right: 10px;
        transform: translateY(-50%);
        width: 0;
        height: 0;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-top: 10px solid #673AB7;
        pointer-events: none;
    }

    .form-group {
        margin-top: 20px;
        /* Adjust top spacing */
    }

    .form-group .col-md-12 {
        display: flex;
        justify-content: center;
        /* Center the button horizontally */
    }

    .form-group .custom-button {
        background-color: var(--primary-color);
        color: white;
        width: 150px;
        /* Adjust the width to match */
        height: 40px;
        padding: 10px 80px !important;
        border-radius: 8px;
        border: none;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        white-space: nowrap;
        font-weight: bold;
    }

    .form-group .custom-button:hover {
        background-color: #5a0ecb;
        color: white;
        box-shadow: 0 4px 8px rgba(65, 84, 241, 0.2);
    }

}

.hantar-tiket-form {

    border-radius: 10px;
    background: #FFF;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    padding: 20px;


    .form-group {
        /*margin-bottom: 15px;*/
    }

    label {

        font-weight: 600;
        color: var(--primary-color);
        display: block;
    }

    .form-control {
        border-radius: 5px;
    }

    .custom-button {
        background-color: var(--primary-color);
        color: white;
        width: 150px;
        /* Adjust the width to match */
        height: 40px;
        padding: 10px 80px !important;
        border-radius: 8px;
        border: none;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        white-space: nowrap;
        font-weight: bold;
    }

    .custom-button:hover {
        background-color: #5a0ecb;
        color: white;
        box-shadow: 0 4px 8px rgba(65, 84, 241, 0.2);
    }

    .col-md-12 {
        display: flex;
        justify-content: center;
        /* Center the button horizontally */
    }

    .custom-select {
        position: relative;
        display: inline-block;
        width: 100%;
        /* Set width to 100% to make it responsive */
        height: 40px;
        /* Adjust height as needed */
        background-color: #f0f0f0;
        border-radius: 10px;
        color: #673AB7;
        cursor: pointer;
        font-size: 14px;
        padding: 5px;
        box-sizing: border-box;
        /* Ensure padding doesn't affect width */
        margin-top: 10px;
    }

    .custom-select select {
        width: 100%;
        height: 100%;
        border: none;
        background-color: transparent;
        appearance: none;
        -webkit-appearance: none;
        /* Remove default styling for Webkit browsers */
        -moz-appearance: none;
        /* Remove default styling for Firefox */
        padding: 5px;
        color: #673AB7;
        /* Set text color */
        font-size: inherit;
        /* Ensure consistent font size */
    }

    .custom-select select option {
        color: #673AB7;
        /* Set option text color */
    }

    .custom-select::after {
        content: "";
        position: absolute;
        top: 50%;
        right: 10px;
        transform: translateY(-50%);
        width: 0;
        height: 0;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-top: 10px solid #673AB7;
        pointer-events: none;
    }

    .penerangan-input {
        height: 150px;
        margin-top: 10px;
        background-color: #f0f0f0;
        /* Light gray background color */
        border-radius: 10px;
    }

    .custom-input {
        margin-top: 10px;
        background-color: #f0f0f0;
        /* Light gray background color */
        border-radius: 10px;

    }
}

/*--------------------------------------------------------------
# For Kenderaan, Ticket, Bilik Tempahan subnavigator
--------------------------------------------------------------*/

.tag-container {
    display: flex;
    justify-content: flex-start;
    gap: 15px;
    margin-bottom: 20px;


    .tag {
        display: inline-flex;
        align-items: start;
        justify-content: flex-start;
        padding: 8px 18px;
        border: 2px solid #6b21a8;
        /* Dark purple border */
        border-radius: 10px;
        /* More rounded corners */
        background-color: #fff;
        /* White background by default */
        color: #6b21a8;
        /* Purple text */
        text-decoration: none;
        font-weight: 600;
        transition: background-color 0.3s, color 0.3s;
        font-size: 14px;
        width: 200px;
    }

    .tag i {
        margin-right: 8px;
        font-size: 1.2em;
        /* Icon size */
        color: inherit;
    }

    /* Hover effect */

    .tag:hover {
        background-color: #6b21a8;
        /* Purple background on hover */
        color: #fff;
        /* White text on hover */
    }

    /* Active tag styling */

    .tag-active {
        background-color: #6b21a8;
        /* BOS primary background */
        color: #fff;
        /* White text */
        border: 2px solid #6b21a8;
        /* Ensure border matches the background */
    }
}

/*--------------------------------------------------------------
# role and permission
--------------------------------------------------------------*/
.role-and-permission {
    border-radius: 10px;
    background: #FFF;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    padding: 30px;
    margin-top: 40px;

    table {
        width: 100%;
        margin-bottom: 30px;
        table-layout: fixed;
    }

    h2 {
        color: var(--primary-color);
        font-family: var(--bos-font-family);
        font-size: 18px;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
        letter-spacing: 0.36px;
    }

    tr th {
        color: var(--primary-color);
        font-family: var(--bos-font-family);
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        letter-spacing: 0.28px;
        padding-bottom: 10px;
        border-bottom: 1px solid black;
    }

    tr td {
        color: #1C2434;
        font-family: var(--bos-font-family);
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        letter-spacing: 0.28px;
        padding: 10px 0px;
        border-bottom: 1px solid black;
    }

    .custom-search-bar {
        border: 2px solid var(--primary-color) !important;
        border-left: none;
        border-radius: 8px;
        padding: 10px 20px;
        width: 100%;
        font-size: 14px;
        padding-left: 50px;
        margin-right: 20px;
    }

    .custom-search-bar:focus {
        outline: none;
        border-color: var(--primary-color);
        box-shadow: 0 0 8px rgba(111, 30, 211, 0.2);
    }

    .search-icon {
        left: 20px;
        top: 50%;
        transform: translateY(-50%);
        color: var(--primary-color);
        font-size: 18px;
    }

    .custom-button {
        background-color: white;
    }

    table th,
    table td {
        text-align: left;
        padding: 10px;
    }

    th.text-end,
    td.text-end {
        text-align: right;
        /* Right-align specific columns */
    }

    td.ps-3 {
        padding-left: 20px;
        /* Add space on the left */
    }

    td.pe-3 {
        padding-right: 20px;
        /* Add space on the right */
    }

    table {
        margin: auto;
        /* Center the table horizontally */
    }

    .btn-purple {
        border-color: var(--primary-color);
        color: #FFFFFF !important;
        background-color: var(--primary-color);
        padding: 10px 20px;
        border-radius: 8px;
        transition: all 0.3s;
        margin-left: 20px;
        font-weight: bold;
    }

    .btn-purple:hover {
        background-color: var(--primary-color);
        color: #fff !important;
    }

    .lokasi .form-select {
        border-radius: 10px;
        padding: 5px;
    }
}



/*room-booking*/

.tempahan-bilik-card {
    border-radius: 10px;
    background: #FFF;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    padding: 20px;

    .form-control {
        background-color: #F3F3F3;
        border-radius: 10px;
        padding: 7px;
    }

    .lokasi {
        width: 50%;
    }

    .lokasi .form-select {
        border-radius: 10px;
        padding: 5px;
        padding-left: 10px;
    }

    .durasi .tarikh-tempahan {
        display: inline-block;
        width: 40%;
    }

    .durasi>.form-label {
        width: 100%;
    }

    .sublabel {
        font-size: 0.8em;
        color: var(--primary-color);
        margin-bottom: 5px;
    }

    .tarikh-tempahan-container {
        display: flex;
        justify-content: space-between;
    }

    .nama-tetamu-kehormat {
        padding-bottom: 140px;
    }

    .for-btn {
        text-align: center;
    }

    .for-btn .btn-primary {
        height: 41px;
        width: 353px;
        border-radius: 10px;
    }

}

.room-booking #page2 .row-page2 {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
}

.row-page2 thead {
    background-color: var(--primary-color);
    color: white;
    height: 55px;
    border-radius: 10px;
}


.tempahan-peralatan-card {

    .nav-pills .nav-link:hover {
        background-color: var(--primary-color);
        color: #fff;
    }

    .nav-pills .nav-link.active {
        background-color: var(--primary-color);
    }

    .nav-pills .nav-link {
        background: white;
        box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
        border-radius: 10px;
        width: 100%;
        height: 70px;
        display: flex;
        align-items: center;
    }

    a.nav-link {
        font-size: 14px;
        font-family: var(--bos-font-family);
        font-weight: 600;
        letter-spacing: 0.32px;
        word-wrap: break-word;
    }

    .nav-item {
        padding-bottom: 10px;
    }

    .tab-content .row {
        background: white;
        box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
        border-radius: 10px;
        height: auto;
        align-items: flex-start;
    }

    .tab-pane.active .peralatan-table {
        padding: 0px;
    }

    .tab-pane.active .peralatan-table table thead th:first-child {
        border-top-left-radius: 10px;
    }

    .tab-pane.active .peralatan-table table thead th:last-child {
        border-top-right-radius: 10px;
    }

    .peralatan-table tr td,
    .peralatan-table tr th {
        padding: 15px;
    }

    .for-btn {
        text-align: center;
    }

    .for-btn .btn-primary {
        height: 41px;
        width: 353px;
        border-radius: 10px;
    }

    table tbody tr td {
        border-bottom-width: 1px;
    }
}

.room-booking-details {
    border-radius: 10px;
    background: #FFF;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    padding: 20px;

    table tr {
        height: 36px;
    }
}

.language-switcher {
    position: fixed;
    bottom: 15px;
    right: 70px;
    z-index: 123231232131;
    border: 1px solid var(--primary-color);
    border-radius: 4px;
    overflow: hidden;
}

.language-switcher ul {
    margin-bottom: 0;
    padding: 0;
    display: flex;
}

.language-switcher ul li {
    list-style-type: none;
    display: inline-block;
}

.language-switcher ul li a {
    padding: 5px;
    display: inline-block;
    background: #FFF;
}

.language-switcher ul li a.active,
.language-switcher ul li a:hover {
    background: var(--primary-color);
    color: #FFF;
}

@media (min-width: 1200px) {
    .language-switcher {
        display: none !important;
    }

    .sidebar-language-switcher {
        display: inline-flex;
        align-items: center;
        flex-shrink: 0;
        margin-left: 18px;
        overflow: hidden;
        background: #ffffff;
        border: 1px solid rgba(63, 65, 181, 0.28);
        border-radius: 12px;
        box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
    }

    .sidebar-language-switcher a {
        min-width: 34px;
        padding: 6px 9px;
        color: var(--bos-primary);
        font-size: 12px;
        font-weight: 800;
        line-height: 1;
        text-align: center;
        text-decoration: none !important;
        transition: background-color 0.2s ease, color 0.2s ease;
    }

    .sidebar-language-switcher a+a {
        border-left: 1px solid rgba(63, 65, 181, 0.18);
    }

    .sidebar-language-switcher a:hover,
    .sidebar-language-switcher a:focus,
    .sidebar-language-switcher a.active {
        background: var(--bos-primary);
        color: #ffffff;
    }
}

@media (max-width: 1199px) {
    .language-switcher {
        top: 18px;
        right: 18px;
        bottom: auto;
        background: var(--bos-primary);
        border-color: var(--bos-primary);
        box-shadow: 0 8px 18px rgba(63, 65, 181, 0.18);
    }

    .language-switcher ul li a {
        min-width: 38px;
        padding: 7px 10px;
        color: #ffffff;
        background: var(--bos-primary);
        font-size: 13px;
        font-weight: 800;
        line-height: 1;
        text-align: center;
    }

    .language-switcher ul li a.active {
        display: none;
    }
}

@media screen and (min-width: 1200px) {
    .sidebar-show-menu {
        display: none;
    }
}

@media screen and (max-width: 768px) {
    .private .cutlet {
        max-width: 100%;
    }

    .private .card {
        min-width: 100%;
    }

    .header {
        padding-left: 60px;
    }

    /*#calendar .fc-button-primary {*/
    /*    padding: 0;*/
    /*}*/

    .fc .fc-toolbar.fc-header-toolbar {
        display: block;
    }

    .fc .fc-daygrid-day-bottom {
        font-size: 8px;
        line-height: 1;
    }
}


.tempahan-bilik-card {
    border-radius: 10px;
    background: #FFF;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    padding: 20px;

    .form-control {
        background-color: #F3F3F3;
        border-radius: 10px;
        padding: 7px;
    }

    .lokasi {
        width: 50%;
    }

    .lokasi .form-select {
        border-radius: 10px;
        padding: 5px;
        padding-left: 10px;
    }

    .durasi .tarikh-tempahan {
        display: inline-block;
        width: 40%;
    }

    .durasi>.form-label {
        width: 100%;
    }

    .sublabel {
        font-size: 0.8em;
        color: var(--primary-color);
        margin-bottom: 5px;
    }

    .tarikh-tempahan-container {
        display: flex;
        justify-content: space-between;
    }

    .nama-tetamu-kehormat {
        padding-bottom: 140px;
    }

    .for-btn {
        text-align: center;
    }

    .for-btn .btn-primary {
        height: 41px;
        width: 353px;
        border-radius: 10px;
    }

}

.room-booking #page2 .row-page2 {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
}

.row-page2 thead {
    background-color: var(--primary-color);
    color: white;
    height: 55px;
    border-radius: 10px;
}

/*--------------------------------------------------------------
# Gaji
--------------------------------------------------------------*/
.gaji-card {

    /* Nav Pills Styling */
    .nav-pills .nav-link:hover {
        background-color: var(--primary-color);
        color: #fff;
    }

    .nav-pills .nav-link.active {
        background-color: var(--primary-color);
        color: #fff;
    }

    .nav-pills .nav-link {
        background: white;
        box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
        border-radius: 10px;
        width: 100%;
        height: 70px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: background-color 0.3s ease, color 0.3s ease;
    }

    a.nav-link {
        font-size: 14px;
        font-family: var(--bos-font-family);
        font-weight: 600;
        letter-spacing: 0.32px;
        word-wrap: break-word;
        text-align: center;
        text-decoration: none;
        color: inherit;
    }

    .nav-item {
        padding-bottom: 10px;
    }

    /* Tab Content Styling */
    .tab-content .row {
        background: white;
        box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
        border-radius: 10px;
        align-items: flex-start;
        padding: 20px;
        height: auto;
        /* Automatically adjust based on content */
        min-height: 100px;
        /* Optional: Set a minimum height if needed */
    }

    .tab-pane.active .gaji-table {
        padding: 0;
    }

    /* Gaji Table Styling */
    .gaji-table table {
        width: 100%;
        border-collapse: collapse;
    }

    .gaji-table table thead th {
        background-color: var(--primary-color);
        color: #fff;
        text-align: left;
        padding: 10px;
        font-weight: 700;
    }

    .gaji-table table thead th:first-child {
        border-top-left-radius: 10px;
    }

    .gaji-table table thead th:last-child {
        border-top-right-radius: 10px;
    }

    .gaji-table tr td,
    .gaji-table tr th {
        padding: 15px;
        vertical-align: middle;
    }

    .gaji-table tbody tr {
        transition: background-color 0.3s ease;
    }

    .gaji-table tbody tr:hover {
        background-color: rgba(0, 0, 0, 0.05);
    }

    table tbody tr td {
        border-bottom: 1px solid #ddd;
    }

    table tbody tr:last-child td {
        border-bottom: none;
    }

    /* Input Group Styling */
    .input-group-text {
        background-color: #f8f9fa;
        border: 1px solid #ced4da;
    }

    .input-group input {
        border-radius: 0;
    }

    /* For Button Section */
    .for-btn {
        text-align: center;
        margin-top: 20px;
    }

    .for-btn .btn-primary {
        height: 41px;
        width: 353px;
        border-radius: 10px;
        font-weight: bold;
        font-size: 16px;
        transition: all 0.3s ease;
    }

    .for-btn .btn-primary:hover {
        background-color: darken(var(--primary-color), 10%);
        box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
    }

    /* Select Field Styling */
    select.form-control {
        width: 100%;
        max-width: 100%;
        height: auto;
        padding: 10px;
        border-radius: 5px;
        border: 1px solid #ddd;
        font-size: 14px;
        font-family: var(--bos-font-family);
    }

    select.form-control:focus {
        border-color: var(--primary-color);
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
    }

    /* Custom Dropdown Styling */
    .custom-dropdown {
        position: relative;
        margin-top: 10px;
    }

    .custom-dropdown .dropdown-btn {
        width: 100%;
        padding: 10px;
        border: 1px solid #ccc;
        background-color: #fff;
        text-align: left;
        cursor: pointer;
        border-radius: 5px;
        font-size: 14px;
        font-family: var(--bos-font-family);
        color: #6c757d;
        /* Placeholder color */
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .custom-dropdown .dropdown-btn.active {
        color: #000;
        /* Change text color when items are selected */
    }

    .custom-dropdown .dropdown-list {
        margin: 0;
        padding: 0;
        list-style: none;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        max-height: 200px;
        overflow-y: auto;
        border: 1px solid #ccc;
        background-color: #fff;
        z-index: 1000;
        display: none;
        border-radius: 5px;
    }

    .custom-dropdown .dropdown-list li {
        padding: 10px;
        cursor: pointer;
        display: flex;
        align-items: center;
    }

    .custom-dropdown .dropdown-list li:hover {
        background-color: rgba(0, 0, 0, 0.05);
    }

    .custom-dropdown .dropdown-list input[type="checkbox"] {
        margin-right: 10px;
    }

    .custom-dropdown .dropdown-btn:focus+.dropdown-list,
    .custom-dropdown .dropdown-list:hover {
        display: block;
    }
}

/*--------------------------------------------------------------
# BOS Leave Application Form Final Overrides
# Purpose: Keep the new leave form design above legacy leave-form styles.
--------------------------------------------------------------*/
.bos-leave-page .leave-form {
    padding: 0;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
}

.bos-leave-page .bos-leave-form-card h2 {
    color: var(--bos-primary);
    font-family: var(--bos-font-family);
    font-size: 24px;
    font-weight: 900;
    letter-spacing: -0.03em;
}

.bos-leave-page .bos-leave-form-card p {
    color: var(--bos-neutral);
    font-family: var(--bos-font-family);
    font-size: 15px;
    line-height: 1.55;
}

.bos-leave-page .bos-form-field label {
    color: #1e293b;
    font-family: var(--bos-font-family);
    font-size: 14px;
    font-weight: 800;
}

/*--------------------------------------------------------------
# Staff Management Page
# Purpose: Staff list, same-page Role List/Settings/Add Staff tabs.
--------------------------------------------------------------*/
.staff-index-page .staff-page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 24px 0;
    flex-wrap: wrap;
    gap: 16px;
}

.staff-index-page .staff-page-title {
    color: #1e1b4b;
    font-family: var(--bos-font-family);
    font-size: 28px;
    font-weight: 800;
    margin: 0 0 8px;
}

.staff-index-page .staff-page-subtitle {
    color: #64748b;
    font-family: var(--bos-font-family);
    font-size: 15px;
    margin: 0;
}

.staff-index-page .header-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.staff-index-page .btn-action-outline,
.staff-index-page .btn-action-primary {
    border-radius: 20px;
    padding: 10px 20px;
    font-family: var(--bos-font-family);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
}

.staff-index-page .btn-action-outline {
    background: #fff;
    color: #312e81;
    border: 1px solid #e0e7ff;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.02);
}

.staff-index-page .btn-action-outline:hover,
.staff-index-page .btn-action-outline.active,
.staff-index-page .staff-tab-btn.active {
    background: #eef2ff;
    border-color: #c7d2fe;
    color: #312e81;
}

.staff-index-page .btn-action-primary {
    background: #312e81;
    color: #fff;
    border: 1px solid #312e81;
    box-shadow: 0 4px 15px rgba(49, 46, 129, 0.2);
}

.staff-index-page .btn-action-primary:hover {
    background: #272c82;
    color: #fff;
    transform: translateY(-1px);
}

.staff-index-page .staff-tab-btn {
    cursor: pointer;
}

.staff-index-page .staff-panel {
    display: none;
}

.staff-index-page .staff-panel.active {
    display: block;
}

.staff-index-page .staff-inline-card {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    margin-bottom: 24px;
    padding: 0;
}

.staff-index-page .staff-inline-frame {
    width: 100%;
    min-height: 760px;
    border: 0;
    border-radius: 0;
    background: #fff;
    display: block;
}

.staff-index-page .filter-card {
    background: #fff;
    border: 1px solid #e9eef8;
    border-radius: 16px;
    padding: 24px;
    box-shadow: none;
    margin-bottom: 24px;
}

.staff-index-page .filter-row {
    display: flex;
    gap: 20px;
    align-items: flex-end;
}

.staff-index-page .filter-group {
    flex: 1;
}

.staff-index-page .filter-group.search-group {
    flex: 2;
    position: relative;
}

.staff-index-page .filter-group.search-group .search-icon {
    position: absolute;
    left: 16px;
    top: calc(50% + 15px);
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: 20px;
    line-height: 1;
    pointer-events: none;
}

.staff-index-page .filter-label {
    display: block;
    color: #475569;
    font-family: var(--bos-font-family);
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 8px;
}

.staff-index-page .filter-input {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    color: #1e293b;
    background: #f8fafc;
    font-family: var(--bos-font-family);
    font-size: 14px;
    outline: none;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.staff-index-page .filter-input.pl-5 {
    padding-left: 56px;
}

.staff-index-page .filter-input:focus {
    border-color: #4f46e5;
    background: #fff;
}

.staff-index-page .table-card {
    background: #fff;
    border: 1px solid #e9eef8;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: none;
    margin-bottom: 24px;
}

.staff-index-page .staff-table {
    width: 100%;
    border-collapse: collapse;
}

.staff-index-page .staff-table th {
    background: #f8fafc;
    color: #475569;
    font-family: var(--bos-font-family);
    font-size: 14px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 16px 20px;
    text-align: left;
    border-bottom: 1px solid #e2e8f0;
}

.staff-index-page .staff-table td {
    padding: 16px 20px;
    vertical-align: middle;
    border-bottom: 1px solid #f1f5f9;
    color: #334155;
    font-family: var(--bos-font-family);
    font-size: 14px;
    font-weight: 500;
}

.staff-index-page .staff-table tr:last-child td {
    border-bottom: 0;
}

.staff-index-page .staff-table tr:hover td {
    background: #fafbfc;
}

.staff-index-page .staff-id-badge {
    background: #f1f5f9;
    color: #475569;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 800;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.staff-index-page .status-badge {
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 800;
    display: inline-block;
}

.staff-index-page .status-approved {
    background: #dcfce7;
    color: #166534;
}

.staff-index-page .status-rejected {
    background: #f1f5f9;
    color: #64748b;
}

.staff-index-page .action-links {
    display: flex;
    gap: 12px;
    align-items: center;
}

.staff-index-page .action-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    background: #fff;
    border: 1px solid #e2e8f0;
    transition: all 0.2s ease;
    text-decoration: none;
}

.staff-index-page .action-icon:hover {
    background: #e0e7ff;
    color: #312e81;
    border-color: #c7d2fe;
    transform: translateY(-2px);
}

.staff-index-page .action-icon.danger:hover {
    background: #fee2e2;
    color: #dc2626;
    border-color: #fecaca;
}

.staff-settings-card {
    width: 100%;
}

@media (max-width: 992px) {
    .staff-index-page .filter-row {
        flex-direction: column;
        align-items: stretch;
    }

    .staff-index-page .table-card {
        overflow-x: auto;
    }

    .staff-index-page .staff-inline-frame {
        min-height: 680px;
    }
}

/*--------------------------------------------------------------
# Staff Management Embedded Pages
# Purpose: Make Role List, Settings, and Add Staff render natively inside Staff page tabs.
--------------------------------------------------------------*/
.embedded-content-body,
.embedded-content-body #app {
    margin: 0 !important;
    padding: 0 !important;
    background: #fff !important;
    overflow-x: hidden !important;
}

.embedded-content-body .back-to-top {
    display: none !important;
}

main.embedded-main {
    margin: 0 !important;
    padding: 24px !important;
    min-height: auto !important;
    max-width: 100% !important;
    background: #fff !important;
}

main.embedded-main .container-fluid {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

main.embedded-main .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

main.embedded-main [class*="col-"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

main.embedded-main .card,
main.embedded-main .table-card,
main.embedded-main .filter-card {
    width: 100% !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}

main.embedded-main .card-body {
    padding: 0 !important;
}

main.embedded-main .role-and-permission .d-flex.justify-content-start,
main.embedded-main .staff-management .d-flex.justify-content-between {
    margin-bottom: 0 !important;
    gap: 14px !important;
}

main.embedded-main .role-and-permission,
main.embedded-main .staff-management {
    color: #1f2937;
    font-family: var(--bos-font-family);
}

main.embedded-main .role-and-permission>.container-fluid,
main.embedded-main .staff-management>.row>[class*="col-"]>.card>.card-body {
    display: grid;
    gap: 24px;
}

main.embedded-main .role-and-permission .d-flex.justify-content-start.align-items-center.mb-3 {
    background: #fff;
    border: 1px solid #e0e7f3;
    border-radius: 16px;
    padding: 24px;
    box-shadow: none;
}

main.embedded-main .role-search-wrap {
    width: min(100%, 520px);
}

main.embedded-main .role-and-permission .search-icon {
    left: 18px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: #94a3b8 !important;
    font-size: 22px !important;
    z-index: 2;
}

main.embedded-main .custom-search-bar,
main.embedded-main .custom-input,
main.embedded-main .form-control,
main.embedded-main .form-select,
main.embedded-main .select2-container .select2-selection {
    min-height: 56px !important;
    border: 1px solid #d9e2f1 !important;
    border-radius: 12px !important;
    background: #f8fafc !important;
    box-shadow: none !important;
    color: #1f2937 !important;
    font-family: var(--bos-font-family) !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    padding: 12px 16px !important;
}

main.embedded-main .custom-search-bar {
    padding-left: 58px !important;
}

main.embedded-main .custom-search-bar::placeholder,
main.embedded-main .custom-input::placeholder,
main.embedded-main .form-control::placeholder {
    color: #7c8798 !important;
    font-weight: 500 !important;
}

main.embedded-main .custom-search-bar:focus,
main.embedded-main .custom-input:focus,
main.embedded-main .form-control:focus,
main.embedded-main .form-select:focus {
    background: #fff !important;
    border-color: #4f46e5 !important;
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.08) !important;
}

main.embedded-main label,
main.embedded-main .label-profile-picture,
main.embedded-main .purple-text {
    color: #475569 !important;
    font-family: var(--bos-font-family) !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    margin-bottom: 8px !important;
}

main.embedded-main .purple-text {
    color: #3730a3 !important;
    font-size: 18px !important;
}

main.embedded-main .btn-purple,
main.embedded-main .btn-success {
    min-height: 56px !important;
    border-radius: 12px !important;
    background: #312e81 !important;
    border: 1px solid #312e81 !important;
    color: #fff !important;
    box-shadow: none !important;
    padding: 12px 22px !important;
    font-family: var(--bos-font-family) !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    text-decoration: none !important;
}

main.embedded-main .btn-purple:hover,
main.embedded-main .btn-success:hover {
    background: #272c82 !important;
    border-color: #272c82 !important;
    color: #fff !important;
}

main.embedded-main .table,
main.embedded-main .list-group {
    width: 100% !important;
    margin: 0 !important;
    border: 1px solid #e9eef8 !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    background: #fff !important;
    box-shadow: none !important;
}

main.embedded-main .table thead th {
    background: #f8fafc !important;
    border-bottom: 1px solid #e2e8f0 !important;
    color: #475569 !important;
    font-family: var(--bos-font-family) !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    letter-spacing: 0.04em !important;
    padding: 18px 22px !important;
    text-transform: none !important;
}

main.embedded-main .table tbody td,
main.embedded-main .list-group-item {
    border-color: #e9eef8 !important;
    color: #1f2937 !important;
    font-family: var(--bos-font-family) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    padding: 20px 22px !important;
}

main.embedded-main .table tbody tr {
    border-bottom: 1px solid #e9eef8 !important;
}

main.embedded-main .table tbody tr:last-child {
    border-bottom: 0 !important;
}

main.embedded-main .role-row form {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 12px !important;
}

main.embedded-main .role-row.is-hidden,
main.embedded-main .no-roles-message.is-hidden {
    display: none !important;
}

main.embedded-main .nav-tabs {
    background: #fff !important;
    border: 1px solid #e9eef8 !important;
    border-bottom: 0 !important;
    border-radius: 16px 16px 0 0 !important;
    gap: 8px !important;
    padding: 18px 18px 0 !important;
    flex-wrap: wrap !important;
}

main.embedded-main .nav-tabs .nav-link {
    border-radius: 12px 12px 0 0 !important;
    color: #3730a3 !important;
    font-family: var(--bos-font-family) !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    padding: 12px 18px !important;
}

main.embedded-main .nav-tabs .nav-link.active {
    color: #111827 !important;
    background: #fff !important;
    border-color: #e2e8f0 #e2e8f0 #fff !important;
}

main.embedded-main .tab-content {
    background: #fff !important;
    border: 1px solid #e9eef8 !important;
    border-top: 0 !important;
    border-radius: 0 0 16px 16px !important;
    margin-top: 0 !important;
    padding: 24px !important;
}

main.embedded-main .tab-pane>form.d-flex {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) auto !important;
    gap: 14px !important;
    align-items: center !important;
    margin-bottom: 18px !important;
}

main.embedded-main .list-group-item {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 14px !important;
    align-items: center !important;
    background: #fff !important;
}

main.embedded-main .list-group-item form.d-flex {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) auto !important;
    gap: 14px !important;
    align-items: center !important;
    margin: 0 !important;
}

main.embedded-main .list-group-item .btn-primary,
main.embedded-main .list-group-item .btn-danger,
main.embedded-main .role-row .custom-button,
main.embedded-main .role-row a[href*="/edit"] {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #fff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: none !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-indent: -999px !important;
    position: relative !important;
}

main.embedded-main .list-group-item .btn-primary:hover,
main.embedded-main .role-row a[href*="/edit"]:hover {
    background: #eef2ff !important;
    border-color: #c7d2fe !important;
}

main.embedded-main .list-group-item .btn-danger:hover,
main.embedded-main .role-row .custom-button:hover {
    background: #fff1f2 !important;
    border-color: #fecdd3 !important;
}

main.embedded-main .list-group-item .btn-primary::after,
main.embedded-main .role-row a[href*="/edit"]::after {
    content: "\F4CA";
    font-family: "bootstrap-icons";
    color: #4f46e5;
    font-size: 16px;
    text-indent: 0;
    position: absolute;
}

main.embedded-main .list-group-item .btn-danger::after,
main.embedded-main .role-row .custom-button::after {
    content: "\F5DE";
    font-family: "bootstrap-icons";
    color: #ef4444;
    font-size: 16px;
    text-indent: 0;
    position: absolute;
}

main.embedded-main .role-row .custom-button i,
main.embedded-main .role-row a[href*="/edit"] i,
main.embedded-main .list-group-item .btn-primary,
main.embedded-main .list-group-item .btn-danger {
    font-size: 0 !important;
}

main.embedded-main #staffForm {
    display: grid !important;
    gap: 20px !important;
}

main.embedded-main #staffForm>.row {
    margin: 0 !important;
    padding: 24px !important;
    border: 1px solid #e9eef8 !important;
    border-radius: 16px !important;
    background: #fff !important;
    row-gap: 18px !important;
}

main.embedded-main #staffForm>.row:first-of-type {
    padding: 20px 24px !important;
    border: 1px solid #e9eef8 !important;
    background: #fff !important;
}

main.embedded-main #staffForm .dropify-wrapper {
    height: 160px !important;
    min-height: 160px !important;
    border-radius: 16px !important;
    border-color: #d9e2f1 !important;
    background: #f8fafc !important;
}

main.embedded-main #staffForm .input-group {
    align-items: stretch !important;
}

main.embedded-main #staffForm .input-group .form-control {
    border-radius: 12px 0 0 12px !important;
}

main.embedded-main #staffForm .input-group .input-group-text {
    border: 1px solid #d9e2f1 !important;
    border-left: 0 !important;
    border-radius: 0 12px 12px 0 !important;
    background: #f8fafc !important;
    color: #64748b !important;
    padding: 0 18px !important;
}

main.embedded-main #staffForm .col-md-3,
main.embedded-main #staffForm .col-md-4,
main.embedded-main #staffForm .col-md-6,
main.embedded-main #staffForm .col-12 {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
}

main.embedded-main .mt-4,
main.embedded-main .mt-5,
main.embedded-main .mb-5,
main.embedded-main .pb-5 {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

main.embedded-main .global-mobile-menu-btn,
main.embedded-main .mobile-bottom-nav,
main.embedded-main .mobile-dashboard-nav,
main.embedded-main .global-mobile-bottom-nav,
main.embedded-main .language-switcher {
    display: none !important;
}

/*--------------------------------------------------------------
# Staff Management Iframe Safety
# Purpose: Hide accidental nested full layout while iframe redirects into embedded mode.
--------------------------------------------------------------*/
.staff-index-page .staff-inline-frame {
    color-scheme: light;
}

/*--------------------------------------------------------------
# BOS Complaint FAQ / Knowledge Base
# Purpose: Modern FAQ page for Complaint module.
--------------------------------------------------------------*/
.bos-faq-page {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
    min-height: calc(100vh - 140px);
    font-family: var(--bos-font-family);
    color: #111827;
}

.bos-faq-page--single {
    max-width: 1180px;
    margin: 0 auto;
    width: 100%;
}

.bos-faq-hero p,
.bos-faq-feature-card p,
.bos-faq-ai-card p,
.bos-faq-bottom-grid p,
.bos-faq-empty p {
    color: #64748b;
    font-size: 15px;
    line-height: 1.6;
    margin: 0;
}

.bos-faq-eyebrow {
    color: #00755f;
    display: inline-block;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.14em;
    line-height: 1.2;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.bos-faq-main {
    display: grid;
    gap: 28px;
}

.bos-faq-tabs {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.bos-faq-tab {
    min-height: 46px;
    border: 1px solid #dbe4f5;
    border-radius: 999px;
    background: #fff;
    color: #312e81;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 11px 20px;
    font-size: 14px;
    font-weight: 800;
    text-decoration: none;
    transition: all 0.2s ease;
}

.bos-faq-tab:hover,
.bos-faq-tab.active {
    background: #eef2ff;
    border-color: #c7d2fe;
    color: #312e81;
}

.bos-faq-hero {
    text-align: center;
    padding: 42px 28px 26px;
    border-radius: 28px;
    background:
        radial-gradient(circle at 20% 10%, rgba(79, 70, 229, 0.08), transparent 26%),
        radial-gradient(circle at 80% 0%, rgba(16, 185, 129, 0.08), transparent 24%),
        #f7f9ff;
}

.bos-faq-hero h1 {
    color: #071326;
    font-size: clamp(28px, 3vw, 42px);
    font-weight: 900;
    letter-spacing: -0.04em;
    margin: 0 0 12px;
}

.bos-faq-hero p {
    max-width: 720px;
    margin: 0 auto;
}

.bos-faq-search {
    max-width: 720px;
    min-height: 68px;
    margin: 30px auto 0;
    padding: 0 24px;
    border: 1px solid #e4e9f5;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 18px 36px rgba(15, 23, 42, 0.12);
    display: flex;
    align-items: center;
    gap: 14px;
}

.bos-faq-search i {
    color: #1d1ca8;
    font-size: 24px;
}

.bos-faq-search input {
    width: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    color: #1f2937;
    font-size: 16px;
    font-weight: 600;
}

.bos-faq-search input::placeholder {
    color: #7c8798;
    font-weight: 500;
}

.bos-faq-popular {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    color: #64748b;
    font-size: 14px;
}

.bos-faq-popular button {
    border: 0;
    border-radius: 999px;
    background: #dbeafe;
    color: #1d1ca8;
    padding: 7px 16px;
    font-size: 13px;
    font-weight: 700;
}

.bos-faq-feature-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 22px;
}

.bos-faq-feature-card,
.bos-faq-ai-card,
.bos-faq-bottom-grid article {
    border: 1px solid #e8eef8;
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 18px 36px rgba(15, 23, 42, 0.06);
}

.bos-faq-feature-card {
    padding: 34px;
}

.bos-faq-feature-card h2,
.bos-faq-ai-card h2,
.bos-faq-bottom-grid h3,
.bos-faq-empty h3 {
    color: #071326;
    font-size: 21px;
    font-weight: 900;
    letter-spacing: -0.03em;
    margin: 0 0 10px;
}

.bos-faq-feature-card a,
.bos-faq-ai-card a,
.bos-faq-bottom-grid a {
    color: #000c9c;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 20px;
    font-size: 15px;
    font-weight: 800;
    text-decoration: none;
}

.bos-faq-ai-card {
    padding: 30px;
    background: linear-gradient(135deg, #4440c7 0%, #312e81 100%);
    color: #fff;
}

.bos-faq-ai-card i {
    color: #c7d2fe;
    display: block;
    font-size: 34px;
    margin-bottom: 16px;
}

.bos-faq-ai-card h2,
.bos-faq-ai-card p {
    color: #fff;
}

.bos-faq-ai-card a {
    width: 100%;
    justify-content: center;
    border-radius: 999px;
    background: #fff;
    color: #000c9c;
    padding: 12px 18px;
}

.bos-faq-section {
    display: grid;
    gap: 18px;
}

.bos-faq-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.bos-faq-section-header>div {
    display: flex;
    align-items: center;
    gap: 12px;
}

.bos-faq-section-header i {
    color: #1d1ca8;
    font-size: 22px;
}

.bos-faq-section-header h2 {
    color: #071326;
    font-size: 28px;
    font-weight: 900;
    letter-spacing: -0.04em;
    margin: 0;
}

.bos-faq-count {
    border-radius: 999px;
    background: #e8f0ff;
    color: #312e81;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 800;
}

.bos-faq-accordion {
    display: grid;
    gap: 14px;
}

.bos-faq-accordion .accordion-item {
    border: 1px solid #e5ebf7;
    border-radius: 20px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.05);
}

.bos-faq-accordion .accordion-item:has(.accordion-collapse.show) {
    background: #e7e3ff;
    border-color: #d7d1ff;
}

.bos-faq-accordion .accordion-button {
    background: transparent;
    color: #000c9c;
    border: 0;
    box-shadow: none;
    padding: 22px 26px;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.bos-faq-accordion .accordion-button.collapsed {
    color: #071326;
}

.bos-faq-accordion .accordion-button:focus {
    box-shadow: none;
}

.bos-faq-accordion .accordion-body {
    padding: 0 26px 24px;
    color: #334155;
}

.bos-faq-accordion .accordion-body p {
    margin: 12px 0 0;
    color: #334155;
    font-size: 15px;
    line-height: 1.75;
}

.bos-faq-item-category {
    display: inline-block;
    color: #00755f;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.bos-faq-item.is-hidden {
    display: none;
}

.bos-faq-empty {
    display: none;
    text-align: center;
    border: 1px dashed #cbd5e1;
    border-radius: 20px;
    padding: 34px;
    background: #fff;
}

.bos-faq-empty.is-visible {
    display: block;
}

.bos-faq-empty i {
    color: #94a3b8;
    font-size: 32px;
    margin-bottom: 12px;
}

.bos-faq-bottom-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
}

.bos-faq-bottom-grid article {
    padding: 34px;
    text-align: center;
}

.bos-faq-bottom-grid span {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #dbeafe;
    color: #1d1ca8;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    margin-bottom: 18px;
}

@media (max-width: 1199px) {
    .bos-faq-page--single {
        max-width: 100%;
    }
}

@media (max-width: 768px) {
    .bos-faq-page {
        gap: 22px;
    }

    .bos-faq-hero,
    .bos-faq-feature-card,
    .bos-faq-ai-card,
    .bos-faq-bottom-grid article {
        border-radius: 20px;
    }

    .bos-faq-feature-grid,
    .bos-faq-bottom-grid {
        grid-template-columns: 1fr;
    }

    .bos-faq-tabs {
        justify-content: flex-start;
    }

    .bos-faq-search {
        min-height: 58px;
        padding: 0 18px;
    }

    .bos-faq-section-header {
        align-items: flex-start;
        flex-direction: column;
    }
}

/*--------------------------------------------------------------
# BOS Complaint Submit Ticket
--------------------------------------------------------------*/
.bos-ticket-page {
    --ticket-primary: #312eac;
    --ticket-primary-soft: #eef2ff;
    --ticket-border: #dfe7f5;
    --ticket-text: #111827;
    --ticket-muted: #64748b;
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    color: var(--ticket-text);
    font-family: var(--bos-font-family);
}

.bos-ticket-tabs {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}

.bos-ticket-tab {
    min-height: 46px;
    border: 1px solid var(--ticket-border);
    border-radius: 999px;
    background: #fff;
    color: var(--ticket-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 11px 20px;
    font-size: 14px;
    font-weight: 800;
    text-decoration: none;
    transition: all 0.2s ease;
}

.bos-ticket-tab:hover,
.bos-ticket-tab.active {
    background: var(--ticket-primary-soft);
    border-color: #c7d2fe;
    color: var(--ticket-primary);
}

.bos-ticket-hero {
    min-height: 210px;
    border: 1px solid #dfe7f5;
    border-radius: 28px;
    background:
        linear-gradient(90deg, rgba(49, 46, 172, 0.72), rgba(49, 46, 172, 0.2)),
        radial-gradient(circle at 85% 20%, rgba(16, 185, 129, 0.2), transparent 28%),
        #4440c7;
    color: #fff;
    display: flex;
    align-items: center;
    padding: 42px 50px;
    margin-bottom: 34px;
    overflow: hidden;
    box-shadow: 0 22px 42px rgba(49, 46, 172, 0.14);
}

.bos-ticket-hero h1 {
    color: #fff;
    font-size: clamp(38px, 5vw, 64px);
    font-weight: 900;
    letter-spacing: -0.05em;
    line-height: 1;
    margin: 0 0 16px;
}

.bos-ticket-hero p {
    max-width: 720px;
    color: rgba(255, 255, 255, 0.88);
    font-size: 19px;
    font-weight: 500;
    line-height: 1.55;
    margin: 0;
}

.bos-ticket-eyebrow {
    color: #bbf7d0;
    display: inline-block;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.16em;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.bos-ticket-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 32px;
    align-items: start;
}

.bos-ticket-form,
.bos-ticket-main,
.bos-ticket-aside {
    display: grid;
    gap: 28px;
}

.bos-ticket-card,
.bos-ticket-guide-card,
.bos-ticket-response-card,
.bos-ticket-faq-card {
    border: 1px solid #e5ebf7;
    border-radius: 28px;
    background: #fff;
    box-shadow: 0 18px 36px rgba(15, 23, 42, 0.06);
}

.bos-ticket-card {
    padding: 34px;
}

.bos-ticket-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    margin-bottom: 28px;
}

.bos-ticket-card-header>div {
    display: flex;
    align-items: center;
    gap: 12px;
}

.bos-ticket-card-header i {
    color: #000c9c;
    font-size: 23px;
}

.bos-ticket-card-header h2,
.bos-ticket-response-card h2,
.bos-ticket-guide-card h2,
.bos-ticket-faq-card h2 {
    color: #000c9c;
    font-size: 24px;
    font-weight: 900;
    letter-spacing: -0.03em;
    margin: 0;
}

.bos-ticket-card-header span {
    color: var(--ticket-muted);
    font-size: 14px;
    font-weight: 700;
}

.bos-ticket-category-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.bos-ticket-category-option {
    min-height: 150px;
    border: 2px solid #cfd7e8;
    border-radius: 18px;
    background: #fff;
    color: #1f2937;
    cursor: pointer;
    display: grid;
    place-items: center;
    gap: 12px;
    padding: 20px;
    text-align: center;
    transition: all 0.2s ease;
}

.bos-ticket-category-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.bos-ticket-category-option span {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: #f1f5ff;
    color: var(--ticket-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
}

.bos-ticket-category-option strong {
    font-size: 20px;
    font-weight: 800;
}

.bos-ticket-category-option:hover,
.bos-ticket-category-option:has(input:checked),
.bos-ticket-category-option.is-static {
    border-color: #000c9c;
    background: #f7f7ff;
    box-shadow: 0 16px 32px rgba(49, 46, 172, 0.12);
}

.bos-ticket-form-header {
    align-items: flex-start;
}

.bos-ticket-priority {
    min-width: 300px;
    border: 1px solid #c8d0e2;
    border-radius: 999px;
    background: #f3f6fc;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    padding: 5px;
}

.bos-ticket-priority button {
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #334155;
    padding: 9px 16px;
    font-size: 14px;
    font-weight: 800;
    transition: all 0.2s ease;
}

.bos-ticket-priority button.active {
    background: var(--ticket-primary);
    color: #fff;
    box-shadow: 0 10px 20px rgba(49, 46, 172, 0.18);
}

.bos-ticket-field-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
}

.bos-ticket-field {
    display: grid;
    gap: 9px;
    margin-bottom: 22px;
}

.bos-ticket-field label {
    color: #475569;
    font-size: 15px;
    font-weight: 900;
}

.bos-ticket-field .form-control {
    min-height: 58px;
    border: 1px solid #d8e1f0;
    border-radius: 14px;
    background-color: #fbfcff;
    color: #1f2937;
    font-size: 16px;
    font-weight: 600;
    padding: 14px 18px;
    box-shadow: none;
}

.bos-ticket-field .form-control:focus {
    border-color: var(--ticket-primary);
    box-shadow: 0 0 0 4px rgba(49, 46, 172, 0.1);
}

.bos-ticket-field textarea.form-control {
    min-height: 250px;
    resize: vertical;
}

.bos-ticket-field small,
.bos-ticket-error {
    color: #dc2626;
    font-size: 13px;
    font-weight: 800;
}

.bos-ticket-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 16px;
    margin-top: 10px;
}

.bos-ticket-btn {
    min-height: 54px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 32px;
    font-size: 17px;
    font-weight: 900;
    text-decoration: none;
    transition: all 0.2s ease;
}

.bos-ticket-btn-secondary {
    border: 1px solid #000c9c;
    background: #fff;
    color: #000c9c;
}

.bos-ticket-btn-primary {
    border: 0;
    background: var(--ticket-primary);
    color: #fff;
    min-width: 250px;
    box-shadow: 0 18px 28px rgba(49, 46, 172, 0.22);
}

.bos-ticket-btn-primary:hover,
.bos-ticket-btn-secondary:hover {
    transform: translateY(-1px);
}

.bos-ticket-response-card {
    padding: 30px;
    background: linear-gradient(145deg, #312eac 0%, #24218f 100%);
    color: #fff;
}

.bos-ticket-response-card i {
    color: #bbf7d0;
    font-size: 28px;
    margin-bottom: 14px;
}

.bos-ticket-response-card h2 {
    color: #fff;
    margin-bottom: 18px;
}

.bos-ticket-response-card strong {
    color: #fff;
    display: block;
    font-size: 48px;
    font-weight: 900;
    letter-spacing: -0.05em;
    line-height: 1;
    margin-bottom: 14px;
}

.bos-ticket-response-card strong span {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.bos-ticket-response-card p {
    color: rgba(255, 255, 255, 0.86);
    font-size: 16px;
    line-height: 1.65;
    margin: 0;
}

.bos-ticket-guide-card,
.bos-ticket-faq-card {
    padding: 30px;
}

.bos-ticket-guide-card h2,
.bos-ticket-faq-card h2 {
    color: #071326;
    margin-bottom: 22px;
}

.bos-ticket-guide-card div {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

.bos-ticket-guide-card div+div {
    margin-top: 20px;
}

.bos-ticket-guide-card span {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #6ee7b7;
    color: #00755f;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
}

.bos-ticket-guide-card p,
.bos-ticket-faq-card p {
    color: var(--ticket-muted);
    font-size: 15px;
    line-height: 1.55;
    margin: 0;
}

.bos-ticket-guide-card strong {
    color: #071326;
    display: block;
    font-size: 16px;
    font-weight: 900;
    margin-bottom: 4px;
}

.bos-ticket-faq-card {
    min-height: 210px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    background:
        linear-gradient(180deg, rgba(15, 23, 42, 0.08), rgba(15, 23, 42, 0.78)),
        radial-gradient(circle at 20% 10%, rgba(68, 64, 199, 0.18), transparent 36%),
        #dbeafe;
    overflow: hidden;
}

.bos-ticket-faq-card h2,
.bos-ticket-faq-card p,
.bos-ticket-faq-card a {
    color: #fff;
}

.bos-ticket-faq-card a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    font-size: 15px;
    font-weight: 900;
    text-decoration: none;
}

@media (max-width: 1199px) {
    .bos-ticket-layout {
        grid-template-columns: 1fr;
    }

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

@media (max-width: 991px) {

    .bos-ticket-category-grid,
    .bos-ticket-field-grid,
    .bos-ticket-aside {
        grid-template-columns: 1fr;
    }

    .bos-ticket-form-header,
    .bos-ticket-card-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .bos-ticket-priority {
        width: 100%;
        min-width: 0;
    }
}

@media (max-width: 768px) {
    .bos-ticket-tabs {
        justify-content: flex-start;
    }

    .bos-ticket-hero {
        min-height: auto;
        border-radius: 22px;
        padding: 34px 26px;
    }

    .bos-ticket-card,
    .bos-ticket-guide-card,
    .bos-ticket-response-card,
    .bos-ticket-faq-card {
        border-radius: 22px;
        padding: 24px;
    }

    .bos-ticket-category-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .bos-ticket-actions {
        align-items: stretch;
        flex-direction: column-reverse;
    }

    .bos-ticket-btn,
    .bos-ticket-btn-primary {
        width: 100%;
        min-width: 0;
    }
}

/*--------------------------------------------------------------
# BOS Complaint Ticket Lists
# Purpose: Shared My Tickets and Assigned Tickets listing design.
--------------------------------------------------------------*/
.bos-ticket-list-page {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    color: #111827;
    font-family: var(--bos-font-family);
}

.bos-ticket-list-hero {
    border: 1px solid #dfe7f5;
    border-radius: 28px;
    background:
        radial-gradient(circle at 92% 18%, rgba(16, 185, 129, 0.14), transparent 30%),
        linear-gradient(135deg, #4440c7 0%, #305da8 58%, #10b981 100%);
    color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    padding: 42px 46px;
    margin-bottom: 28px;
    box-shadow: 0 22px 42px rgba(49, 46, 172, 0.14);
}

.bos-ticket-list-hero h1 {
    color: #fff;
    font-size: clamp(36px, 4.5vw, 58px);
    font-weight: 900;
    letter-spacing: -0.05em;
    line-height: 1;
    margin: 0 0 14px;
}

.bos-ticket-list-hero p {
    max-width: 720px;
    color: rgba(255, 255, 255, 0.88);
    font-size: 18px;
    font-weight: 500;
    line-height: 1.55;
    margin: 0;
}

.bos-ticket-stat-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    margin-bottom: 28px;
}

.bos-ticket-stat-card {
    border: 1px solid #e5ebf7;
    border-radius: 24px;
    background: #fff;
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 24px;
    box-shadow: 0 16px 32px rgba(15, 23, 42, 0.05);
}

.bos-ticket-stat-card>span {
    width: 58px;
    height: 58px;
    border-radius: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
}

.bos-ticket-stat-card.primary>span {
    background: #eef2ff;
    color: #312eac;
}

.bos-ticket-stat-card.warning>span {
    background: #fff7ed;
    color: #ea580c;
}

.bos-ticket-stat-card.success>span {
    background: #dcfce7;
    color: #15803d;
}

.bos-ticket-stat-card p {
    color: #64748b;
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 0.04em;
    margin: 0 0 6px;
    text-transform: uppercase;
}

.bos-ticket-stat-card strong {
    color: #111827;
    display: block;
    font-size: 34px;
    font-weight: 900;
    letter-spacing: -0.05em;
    line-height: 1;
}

.bos-ticket-list-card {
    border: 1px solid #e5ebf7;
    border-radius: 28px;
    background: #fff;
    overflow: hidden;
    box-shadow: 0 18px 36px rgba(15, 23, 42, 0.06);
}

.bos-ticket-list-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    padding: 30px 34px;
    border-bottom: 1px solid #e5ebf7;
}

.bos-ticket-list-toolbar h2 {
    color: #111827;
    font-size: 28px;
    font-weight: 900;
    letter-spacing: -0.04em;
    margin: 0 0 8px;
}

.bos-ticket-list-toolbar p {
    color: #64748b;
    font-size: 15px;
    font-weight: 600;
    margin: 0;
}

.bos-ticket-list-search {
    min-width: 360px;
    min-height: 54px;
    border: 1px solid #d8e1f0;
    border-radius: 999px;
    background: #fbfcff;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 20px;
}

.bos-ticket-list-search i {
    color: #94a3b8;
    font-size: 20px;
}

.bos-ticket-list-search input {
    width: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    color: #1f2937;
    font-size: 15px;
    font-weight: 700;
}

.bos-ticket-list-search input::placeholder {
    color: #94a3b8;
    font-weight: 600;
}

.bos-ticket-list-table {
    display: grid;
}

.bos-ticket-list-head,
.bos-ticket-list-row {
    display: grid;
    grid-template-columns: 120px minmax(220px, 1.5fr) 130px minmax(160px, 1fr) 130px 140px 90px;
    align-items: center;
    gap: 18px;
}

.bos-ticket-list-head {
    background: #f8fafc;
    color: #475569;
    padding: 20px 34px;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.bos-ticket-list-row {
    color: #334155;
    padding: 24px 34px;
    border-top: 1px solid #e5ebf7;
    font-size: 15px;
    font-weight: 700;
    transition: background 0.2s ease;
}

.bos-ticket-list-row:hover {
    background: #fbfcff;
}

.bos-ticket-list-row.is-hidden {
    display: none;
}

.bos-ticket-id {
    width: fit-content;
    border-radius: 10px;
    background: #f1f5f9;
    color: #475569;
    padding: 8px 12px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    font-size: 14px;
    font-weight: 900;
}

.bos-ticket-subject {
    color: #111827;
    font-size: 16px;
    font-weight: 900;
    line-height: 1.35;
}

.bos-ticket-priority-pill,
.bos-ticket-status-pill {
    width: fit-content;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 7px 12px;
    font-size: 13px;
    font-style: normal;
    font-weight: 900;
}

.bos-ticket-priority-pill.high {
    background: #fee2e2;
    color: #b91c1c;
}

.bos-ticket-priority-pill.medium {
    background: #fef3c7;
    color: #a16207;
}

.bos-ticket-priority-pill.low {
    background: #dcfce7;
    color: #15803d;
}

.bos-ticket-priority-pill.default {
    background: #f1f5f9;
    color: #475569;
}

.bos-ticket-status-pill.unassigned {
    background: #fee2e2;
    color: #b91c1c;
}

.bos-ticket-status-pill.open {
    background: #dbeafe;
    color: #1d4ed8;
}

.bos-ticket-status-pill.closed {
    background: #dcfce7;
    color: #15803d;
}

.bos-ticket-status-pill.default {
    background: #f1f5f9;
    color: #475569;
}

.bos-ticket-row-action {
    width: 46px;
    height: 46px;
    border: 1px solid #dfe7f5;
    border-radius: 50%;
    color: #312eac;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    text-decoration: none;
    transition: all 0.2s ease;
}

.bos-ticket-row-action:hover {
    background: #312eac;
    border-color: #312eac;
    color: #fff;
}

.bos-ticket-list-empty {
    display: grid;
    place-items: center;
    gap: 10px;
    padding: 54px 24px;
    color: #64748b;
    text-align: center;
}

.bos-ticket-list-empty i {
    color: #94a3b8;
    font-size: 34px;
}

.bos-ticket-list-empty strong {
    color: #111827;
    font-size: 18px;
    font-weight: 900;
}

.bos-ticket-list-empty p {
    max-width: 420px;
    margin: 0;
}

.bos-ticket-list-empty.is-filter-empty {
    display: none;
}

.bos-ticket-list-empty.is-filter-empty.is-visible {
    display: grid;
}

@media (max-width: 1199px) {
    .bos-ticket-list-head {
        display: none;
    }

    .bos-ticket-list-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: start;
    }

    .bos-ticket-list-row>span:last-child {
        grid-column: 1 / -1;
    }
}

@media (max-width: 991px) {

    .bos-ticket-list-hero,
    .bos-ticket-list-toolbar {
        align-items: flex-start;
        flex-direction: column;
    }

    .bos-ticket-list-search {
        width: 100%;
        min-width: 0;
    }

    .bos-ticket-stat-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {

    .bos-ticket-list-hero,
    .bos-ticket-list-card {
        border-radius: 22px;
    }

    .bos-ticket-list-hero {
        padding: 32px 24px;
    }

    .bos-ticket-list-toolbar,
    .bos-ticket-list-row {
        padding: 24px;
    }

    .bos-ticket-list-row {
        grid-template-columns: 1fr;
    }
}

/*--------------------------------------------------------------
# BOS HR Page Refinement
# Purpose: Harmonise HR forms/lists with BOS design without copying Complaint pages.
--------------------------------------------------------------*/
.bos-hr-page,
.staff-index-page,
.staff-management,
.vehicle-page-container,
.bos-leave-page {
    font-family: var(--bos-font-family);
    color: #1f2937;
}

.bos-hr-page {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
}

.bos-hr-nav-wrap,
.bos-hr-section {
    width: 100%;
}

.bos-hr-nav-wrap {
    margin: 24px 0 28px;
}

.bos-hr-nav.tag-container,
.bos-hr-page .tag-container {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin: 0;
}

.bos-hr-page .tag,
.bos-leave-page .bos-leave-nav-item,
.vehicle-nav-pill {
    min-height: 46px;
    border: 1px solid #dbe4f5 !important;
    border-radius: 999px !important;
    background: #fff !important;
    color: var(--bos-primary) !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 20px !important;
    font-size: 14px;
    font-weight: 850;
    text-decoration: none;
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.04);
}

.bos-hr-page .tag:hover,
.bos-hr-page .tag-active,
.bos-leave-page .bos-leave-nav-item:hover,
.bos-leave-page .bos-leave-nav-item.active,
.vehicle-nav-pill:hover,
.vehicle-nav-pill.active {
    background: var(--bos-primary) !important;
    border-color: var(--bos-primary) !important;
    color: #fff !important;
    box-shadow: 0 16px 28px rgba(63, 65, 181, 0.2);
    transform: translateY(-1px);
}

.bos-hr-container {
    display: grid;
    gap: 24px;
}

.bos-hr-page-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 24px;
    padding: 32px;
    border: 1px solid #e2e8f0;
    border-radius: 28px;
    background:
        radial-gradient(circle at 90% 12%, rgba(16, 185, 129, 0.12), transparent 28%),
        linear-gradient(135deg, #ffffff 0%, #f7f9ff 100%);
    box-shadow: 0 18px 36px rgba(15, 23, 42, 0.05);
}

.bos-hr-eyebrow {
    color: var(--bos-secondary-dark);
    display: inline-block;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.14em;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.bos-hr-page-head h2 {
    color: #1e1b4b;
    font-size: clamp(28px, 3vw, 42px);
    font-weight: 900;
    letter-spacing: -0.05em;
    line-height: 1;
    margin: 0 0 10px;
}

.bos-hr-page-head p {
    max-width: 720px;
    color: #64748b;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.6;
    margin: 0;
}

.bos-hr-action-group {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    flex-wrap: wrap;
}

.bos-hr-action-btn,
.bos-hr-primary-btn,
.bos-hr-row-btn,
.staff-index-page .btn-action-primary,
.staff-index-page .btn-action-outline,
.vehicle-form-card button[type="submit"],
.vehicle-form-card .btn,
.staff-management button[type="submit"],
.staff-management .btn-primary,
.staff-management .custom-add-btn {
    min-height: 44px;
    border-radius: 999px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 11px 18px !important;
    font-size: 14px;
    font-weight: 850;
    text-decoration: none;
    transition: all 0.2s ease;
}

.bos-hr-primary-btn,
.bos-hr-row-btn,
.staff-index-page .btn-action-primary,
.vehicle-form-card button[type="submit"],
.staff-management button[type="submit"],
.staff-management .btn-primary,
.staff-management .custom-add-btn {
    border: 1px solid var(--bos-primary) !important;
    background: var(--bos-primary) !important;
    color: #fff !important;
    box-shadow: 0 14px 26px rgba(63, 65, 181, 0.18);
}

.staff-index-page .btn-action-outline {
    border: 1px solid #dbe4f5 !important;
    background: #fff !important;
    color: var(--bos-primary) !important;
}

.bos-hr-action-btn.success {
    border: 1px solid #bbf7d0;
    background: #ecfdf5;
    color: #047857;
}

.bos-hr-action-btn.warning {
    border: 1px solid #fed7aa;
    background: #fff7ed;
    color: #c2410c;
}

.bos-hr-action-btn.info {
    border: 1px solid #bfdbfe;
    background: #eff6ff;
    color: #1d4ed8;
}

.bos-hr-action-btn:hover,
.bos-hr-primary-btn:hover,
.bos-hr-row-btn:hover,
.staff-index-page .btn-action-primary:hover,
.staff-index-page .btn-action-outline:hover,
.vehicle-form-card button[type="submit"]:hover,
.staff-management button[type="submit"]:hover {
    transform: translateY(-1px);
}

.bos-hr-filter-card,
.staff-index-page .filter-card,
.staff-management form#search-form,
.leave-quota,
.leave-approval,
.vehicle-form-card,
.staff-management .card {
    border: 1px solid #e2e8f0 !important;
    border-radius: 24px !important;
    background: #fff !important;
    box-shadow: 0 18px 36px rgba(15, 23, 42, 0.05) !important;
}

.bos-hr-filter-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 14px;
    align-items: end;
    padding: 24px;
}

.bos-hr-search-field {
    min-height: 56px;
    border: 1px solid #d8e1f0;
    border-radius: 16px;
    background: #fbfcff;
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 0 18px;
}

.bos-hr-search-field i {
    color: #94a3b8;
    font-size: 21px;
}

.bos-hr-search-field .form-control {
    width: 100%;
    min-height: auto;
    border: 0;
    background: transparent;
    box-shadow: none;
    color: #1f2937;
    font-size: 15px;
    font-weight: 700;
    padding: 0;
}

.bos-hr-search-field .form-control:focus {
    border: 0;
    box-shadow: none;
}

.bos-hr-table-card,
.staff-index-page .table-card,
.staff-management .table-responsive,
.leave-quota .table-responsive,
.leave-approval .table-responsive {
    border: 1px solid #e2e8f0;
    border-radius: 24px;
    background: #fff;
    overflow: auto;
    box-shadow: 0 18px 36px rgba(15, 23, 42, 0.04);
}

.bos-hr-table-card .table,
.staff-index-page .table,
.staff-management .table,
.leave-quota .table,
.leave-approval .table {
    margin: 0;
}

.bos-hr-table-card .table thead th,
.staff-index-page .table thead th,
.staff-management .table thead th,
.leave-quota .table thead th,
.leave-approval .table thead th {
    background: #f8fafc !important;
    border-bottom: 1px solid #e2e8f0 !important;
    color: #475569 !important;
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 0.04em;
    padding: 18px !important;
    text-transform: uppercase;
}

.bos-hr-table-card .table tbody td,
.staff-index-page .table tbody td,
.staff-management .table tbody td,
.leave-quota .table tbody td,
.leave-approval .table tbody td {
    border-color: #edf2f7 !important;
    color: #334155;
    font-size: 14px;
    font-weight: 650;
    padding: 18px !important;
    vertical-align: middle;
}

.bos-hr-table-card .table tbody tr:hover,
.staff-index-page .table tbody tr:hover,
.staff-management .table tbody tr:hover,
.leave-quota .table tbody tr:hover,
.leave-approval .table tbody tr:hover {
    background: #fbfcff;
}

.staff-management .custom-input,
.staff-management .form-control,
.staff-management .form-select,
.staff-management select,
.staff-management textarea,
.vehicle-form-card input:not([type="checkbox"]):not([type="radio"]),
.vehicle-form-card select,
.vehicle-form-card textarea,
.bos-leave-page .form-control,
.bos-leave-page select,
.bos-leave-page textarea {
    min-height: 54px !important;
    border: 1px solid #d8e1f0 !important;
    border-radius: 14px !important;
    background-color: #fbfcff !important;
    color: #1f2937 !important;
    font-family: var(--bos-font-family) !important;
    font-size: 15px !important;
    font-weight: 650 !important;
    box-shadow: none !important;
}

.staff-management .custom-input:focus,
.staff-management .form-control:focus,
.staff-management .form-select:focus,
.staff-management select:focus,
.staff-management textarea:focus,
.vehicle-form-card input:not([type="checkbox"]):not([type="radio"]):focus,
.vehicle-form-card select:focus,
.vehicle-form-card textarea:focus,
.bos-leave-page .form-control:focus,
.bos-leave-page select:focus,
.bos-leave-page textarea:focus {
    background-color: #fff !important;
    border-color: var(--bos-primary) !important;
    box-shadow: 0 0 0 4px rgba(63, 65, 181, 0.1) !important;
    outline: none !important;
}

.staff-management label,
.vehicle-field label,
.bos-leave-page label {
    color: #475569 !important;
    font-family: var(--bos-font-family) !important;
    font-size: 14px !important;
    font-weight: 850 !important;
}

.vehicle-page-container {
    /* max-width and margin removed for global container alignment */
}

.vehicle-header {
    padding: 28px 32px;
    border: 1px solid #e2e8f0;
    border-radius: 28px;
    background:
        radial-gradient(circle at 92% 12%, rgba(16, 185, 129, 0.11), transparent 28%),
        linear-gradient(135deg, #fff 0%, #f7f9ff 100%);
    box-shadow: 0 18px 36px rgba(15, 23, 42, 0.05);
}

.vehicle-header h1 {
    color: #1e1b4b;
    font-size: clamp(28px, 3vw, 42px);
    font-weight: 900;
    letter-spacing: -0.05em;
}

.im-vehicle-nav-wrap {
    position: relative;
    margin: 8px 0 24px 0 !important;
}

.im-vehicle-nav-wrap::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 56px;
    height: 100%;
    pointer-events: none;
    background: linear-gradient(to right, rgba(248, 249, 255, 0), rgba(248, 249, 255, 1));
}

.im-vehicle-nav {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    gap: 8px !important;
    padding: 4px 0 !important;
    scrollbar-width: none;
}

.im-vehicle-nav::-webkit-scrollbar {
    display: none;
}

@media (max-width: 768px) {
    .im-vehicle-nav {
        flex-wrap: wrap !important;
        overflow-x: visible !important;
    }

    .im-vehicle-nav-wrap::after {
        display: none !important;
    }
}


select.im-select {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%2364748b' class='bi bi-chevron-down' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 14px center !important;
    background-size: 12px !important;
    padding-right: 36px !important;
}


.vehicle-form-card {
    border-radius: 28px !important;
    padding: 34px !important;
}

.vehicle-section-title,
.staff-management .purple-text,
.staff-management h3,
.staff-management h4 {
    color: #312e81 !important;
    font-family: var(--bos-font-family) !important;
    font-weight: 900 !important;
    letter-spacing: -0.02em;
}

@media (max-width: 991px) {

    .bos-hr-page-head,
    .bos-hr-filter-card {
        grid-template-columns: 1fr;
    }

    .bos-hr-page-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .bos-hr-action-group {
        justify-content: flex-start;
    }
}

@media (max-width: 768px) {

    .bos-hr-page-head,
    .bos-hr-filter-card,
    .vehicle-header,
    .vehicle-form-card {
        border-radius: 22px !important;
        padding: 24px !important;
    }



    .bos-hr-page .tag,
    .vehicle-nav-pill {
        width: 100%;
    }

    /* Hide desktop pill nav on mobile, show compact dropdown instead */
    .vehicle-nav-container {
        display: none !important;
    }

    .rb-mobile-nav {
        display: block !important;
    }
}

/* --- Tempahan Bilik: Mobile Compact Dropdown Nav --- */
.rb-mobile-nav {
    display: none;
    position: relative;
}

.rb-mobile-nav-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    min-height: 46px;
    padding: 10px 16px;
    border: 1.5px solid var(--im-color-line);
    border-radius: 999px;
    background: #ffffff;
    color: var(--im-color-primary);
    font-family: var(--im-font-sans);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: border-color 0.16s ease, box-shadow 0.16s ease;
    box-shadow: 0 1px 4px rgba(111, 30, 211, 0.07);
    user-select: none;
}

.rb-mobile-nav-trigger:hover {
    border-color: var(--im-color-primary);
    box-shadow: 0 2px 8px rgba(111, 30, 211, 0.13);
}

.rb-mobile-nav-trigger .rb-nav-label {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
}

.rb-mobile-nav-trigger .rb-nav-chevron {
    flex-shrink: 0;
    font-size: 14px;
    color: var(--im-color-text-soft);
    transition: transform 0.2s ease;
}

.rb-mobile-nav.open .rb-mobile-nav-trigger .rb-nav-chevron {
    transform: rotate(180deg);
}

.rb-mobile-nav-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    background: #ffffff;
    border: 1.5px solid var(--im-color-line);
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(111, 30, 211, 0.08);
    z-index: 1050;
    overflow: hidden;
    padding: 8px;
}

.rb-mobile-nav.open .rb-mobile-nav-dropdown {
    display: block;
}

.rb-mobile-nav-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 10px;
    text-decoration: none !important;
    font-family: var(--im-font-sans);
    font-size: 14px;
    font-weight: 600;
    color: var(--im-color-text);
    cursor: pointer;
    transition: background 0.14s ease;
}

.rb-mobile-nav-option:hover {
    background: var(--im-color-surface-soft);
    color: var(--im-color-text);
}

.rb-mobile-nav-option.active {
    background: var(--im-color-primary-soft);
    color: var(--im-color-primary);
}

.rb-mobile-nav-option .rb-opt-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.rb-mobile-nav-option .rb-opt-check {
    font-size: 15px;
    color: var(--im-color-primary);
    opacity: 0;
    flex-shrink: 0;
}

.rb-mobile-nav-option.active .rb-opt-check {
    opacity: 1;
}

@media (max-width: 768px) {

    /* Reinforcement: hide desktop pill nav, show mobile dropdown */
    .vehicle-nav-container {
        display: none !important;
    }

    .rb-mobile-nav {
        display: block !important;
    }
}


/*--------------------------------------------------------------
# HR Vehicle Redesign Custom Styles
# Purpose: OVERHAUL UI/UX of HR Vehicle application to match premium design.
--------------------------------------------------------------*/
.vehicle-page-container {
    font-family: 'Public Sans', sans-serif;
    color: #1e293b;
    background: #f8fafc;
    padding: 4px 0 24px 0;
}

/* Header style override or custom header */
.vehicle-header {
    margin-bottom: 24px;
}

.vehicle-header h1 {
    font-size: 28px;
    font-weight: 800;
    color: #1e3a8a;
    margin-bottom: 4px;
}

.vehicle-header p {
    font-size: 14px;
    color: #64748b;
    margin: 0;
}

/* Promo Cards Grid */
.vehicle-promo-grid {
    display: grid;
    grid-template-columns: 2fr 1.2fr;
    gap: 24px;
    margin-bottom: 30px;
}

.vehicle-promo-card-left {
    background: linear-gradient(135deg, #5c62ec 0%, #3e44c2 100%);
    border-radius: 16px;
    padding: 30px;
    color: #ffffff;
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(63, 65, 181, 0.15);
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 160px;
}

/* Subtle pattern backdrop */
.vehicle-promo-card-left::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.03) 25%, transparent 25%),
        linear-gradient(-45deg, rgba(255, 255, 255, 0.03) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, rgba(255, 255, 255, 0.03) 75%),
        linear-gradient(-45deg, transparent 75%, rgba(255, 255, 255, 0.03) 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
    pointer-events: none;
}

.vehicle-promo-card-left .kicker {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 8px;
}

.vehicle-promo-card-left h2 {
    font-size: 28px;
    font-weight: 800;
    margin: 0;
    letter-spacing: -0.02em;
}

.vehicle-promo-card-right {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 24px;
    display: flex;
    align-items: center;
    gap: 16px;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.03);
}

.vehicle-promo-card-right .icon-box {
    background: rgba(79, 70, 229, 0.08);
    color: #4f46e5;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    flex-shrink: 0;
}

.vehicle-promo-card-right .text-content h3 {
    font-size: 16px;
    font-weight: 800;
    color: #1e1b4b;
    margin: 0 0 4px 0;
}

.vehicle-promo-card-right .text-content p {
    font-size: 13px;
    color: #64748b;
    margin: 0;
    line-height: 1.4;
}

/* Form Container Card */
.vehicle-form-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 30px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.02);
    margin-bottom: 24px;
}

.vehicle-section {
    margin-bottom: 35px;
}

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

.vehicle-section-title {
    font-size: 18px;
    font-weight: 800;
    color: #0f172a;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid #f1f5f9;
}

.vehicle-section-title i {
    color: #4f46e5;
    font-size: 20px;
}

/* Grid System */
.vehicle-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.vehicle-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.vehicle-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

/* Field Styles */
.vehicle-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.vehicle-field-full {
    grid-column: 1 / -1;
}

.vehicle-field label {
    font-size: 12px;
    font-weight: 750;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

/* Styled Inputs */
.vehicle-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.vehicle-input-wrapper i {
    position: absolute;
    left: 14px;
    color: #94a3b8;
    font-size: 16px;
}

.vehicle-input-wrapper select,
.vehicle-input-wrapper input:not([type="checkbox"]):not([type="radio"]),
.vehicle-input-wrapper textarea {
    width: 100%;
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    padding: 12px 14px 12px 38px;
    font-size: 14px;
    color: #0f172a;
    transition: all 0.2s ease;
    font-weight: 600;
}

.vehicle-input-wrapper select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 38px;
}

.vehicle-input-wrapper .select-arrow {
    position: absolute;
    right: 14px;
    left: auto;
    color: #94a3b8;
    pointer-events: none;
}

.vehicle-input-wrapper textarea {
    padding-left: 14px;
    min-height: 100px;
}

.vehicle-input-wrapper select:focus,
.vehicle-input-wrapper input:not([type="checkbox"]):not([type="radio"]):focus,
.vehicle-input-wrapper textarea:focus {
    outline: none;
    background: #ffffff;
    border-color: #4f46e5;
    box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.08);
}

/* Modern Counter Input */
.vehicle-counter-input {
    display: flex;
    align-items: center;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    background: #f8fafc;
    overflow: hidden;
    max-width: 150px;
}

.vehicle-counter-btn {
    border: none;
    background: transparent;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #475569;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    transition: background 0.2s;
}

.vehicle-counter-btn:hover {
    background: #e2e8f0;
}

.vehicle-counter-value {
    flex: 1;
    text-align: center;
    font-weight: 700;
    font-size: 14px;
    color: #0f172a;
    border: none;
    background: transparent;
    width: 100%;
    outline: none;
}

/* Counter with label/unit next to it */
.vehicle-counter-container {
    display: flex;
    align-items: center;
    gap: 10px;
}

.vehicle-unit-text {
    font-size: 14px;
    font-weight: 600;
    color: #64748b;
}

/* Card Checkboxes (Keperluan Tambahan) */
.vehicle-checkbox-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.vehicle-checkbox-card {
    border: 1px solid #cbd5e1;
    border-radius: 12px;
    padding: 20px;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    cursor: pointer;
    background: #ffffff;
    transition: all 0.2s ease;
}

.vehicle-checkbox-card:hover {
    border-color: #4f46e5;
    background: #fcfcff;
}

.vehicle-checkbox-card.selected {
    border-color: #4f46e5;
    background: rgba(79, 70, 229, 0.04);
    box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.08);
}

.vehicle-checkbox-card input[type="checkbox"] {
    width: 18px;
    height: 18px;
    border-radius: 4px;
    accent-color: #4f46e5;
    margin-top: 3px;
    cursor: pointer;
}

.vehicle-checkbox-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.vehicle-checkbox-title {
    font-size: 15px;
    font-weight: 750;
    color: #0f172a;
}

.vehicle-checkbox-desc {
    font-size: 12px;
    color: #64748b;
    font-weight: 500;
}

/* Pemandu details box */
.vehicle-driver-box {
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    border-radius: 12px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.vehicle-driver-status-badge {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 12px;
    font-size: 14px;
    font-weight: 750;
    color: #1e293b;
    display: flex;
    align-items: center;
    gap: 8px;
}

.vehicle-driver-status-badge i {
    color: #4f46e5;
}

.vehicle-driver-note {
    font-size: 12px;
    color: #b45309;
    background: #fef3c7;
    border: 1px solid #fde68a;
    border-radius: 8px;
    padding: 10px 14px;
    margin: 0;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-weight: 600;
}

.vehicle-driver-note i {
    font-size: 16px;
    margin-top: 1px;
}

/* Confirmation and Action Bar */
.vehicle-action-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 20px 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
}

.vehicle-confirm-wrapper {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    font-weight: 700;
    color: #334155;
}

.vehicle-confirm-wrapper i {
    color: #10b981;
    font-size: 20px;
}

.vehicle-buttons {
    display: flex;
    gap: 12px;
}

.vehicle-btn-outline {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    color: #475569;
    padding: 10px 24px;
    border-radius: 9999px;
    font-weight: 750;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.vehicle-btn-outline:hover {
    background: #f8fafc;
    border-color: #94a3b8;
    color: #0f172a;
}

.vehicle-btn-primary {
    background: #312e81;
    border: 1px solid #cbd5e1;
    color: #ffffff;
    padding: 10px 24px;
    border-radius: 9999px;
    font-weight: 750;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.vehicle-btn-primary:hover {
    background: #1e1b4b;
    border-color: #cbd5e1;
    box-shadow: 0 4px 12px rgba(30, 27, 75, 0.25);
}

/* Nav Pills Redesign */
.vehicle-nav-container {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    gap: 12px !important;
    margin: 0 0 20px 0 !important;
    padding-bottom: 6px !important;
}

@media (max-width: 768px) {
    .vehicle-nav-container {
        display: none !important;
    }
}

.vehicle-nav-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    color: #475569;
    font-size: 13px;
    font-weight: 750;
    text-decoration: none;
    transition: all 0.2s;
}

.vehicle-nav-pill i {
    font-size: 14px;
}

.vehicle-nav-pill:hover {
    border-color: #4f46e5;
    color: #4f46e5;
    background: rgba(79, 70, 229, 0.02);
}

.vehicle-nav-pill.active {
    background: #4f46e5;
    border-color: #4f46e5;
    color: #ffffff;
}

/* Custom styles for select elements in Vehicle pages */
.vehicle-page-container select.select-custom,
.kenderaan select.custom-dropdown-vehicle-edit,
.kenderaan select.select {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-color: #ffffff !important;
    border: 1.5px solid var(--im-color-line) !important;
    border-radius: 16px !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 8px 36px 8px 12px !important;
    font-size: 13.5px !important;
    color: var(--im-color-text) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%2364748b' class='bi bi-chevron-down' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 14px center !important;
    background-size: 12px !important;
    transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.vehicle-page-container select.select-custom:focus,
.kenderaan select.custom-dropdown-vehicle-edit:focus,
.kenderaan select.select:focus {
    outline: none !important;
    border-color: var(--im-color-primary) !important;
    box-shadow: 0 0 0 4px rgba(63, 65, 181, 0.12) !important;
}

.vehicle-page-container .select-icon,
.kenderaan .select-icon,
.vehicle-page-container .select2-selection__arrow,
.kenderaan .select2-selection__arrow {
    display: none !important;
}

.vehicle-page-container .custom-select-wrapper,
.kenderaan .custom-select-wrapper {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}

/* Custom styles for select elements without browser default styling */
select.select-custom {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2394a3b8'%3e%3cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 16px;
    padding-right: 40px !important;
}

/* Responsive adjustments */
@media (max-width: 1024px) {
    .vehicle-promo-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {

    .vehicle-grid-4,
    .vehicle-grid-3,
    .vehicle-grid-2 {
        grid-template-columns: 1fr;
    }

    .vehicle-checkbox-grid {
        grid-template-columns: 1fr;
    }

    .vehicle-action-card {
        flex-direction: column;
        align-items: stretch;
    }

    .vehicle-buttons {
        flex-direction: column-reverse;
    }

    .vehicle-buttons button,
    .vehicle-buttons a {
        width: 100%;
    }
}

/* Premium Status Badges */
.status-approved,
.status-rejected,
.status-waiting-review,
.status-supported {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 12px;
    border-radius: 9999px;
    font-size: 11px;
    font-weight: 750 !important;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    text-decoration: none !important;
    line-height: 1.2;
}

.status-approved {
    background-color: #d1fae5;
    color: #065f46 !important;
}

.status-rejected {
    background-color: #fee2e2;
    color: #991b1b !important;
}

.status-waiting-review {
    background-color: #fef3c7;
    color: #92400e !important;
}

.status-supported {
    background-color: #dbeafe;
    color: #1e40af !important;
}

/* Premium Table Layouts */
.vehicle-table-wrapper {
    overflow-x: auto;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    margin-top: 16px;
    background: #ffffff;
}

.vehicle-table-wrapper table {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
}

.vehicle-table-wrapper th {
    background: #f8fafc;
    color: #475569;
    font-size: 14px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 14px 18px;
    border-bottom: 2px solid #e2e8f0;
    text-align: center;
    white-space: nowrap;
}

.vehicle-table-wrapper td {
    padding: 14px 18px;
    font-size: 14px;
    color: #0f172a;
    border-bottom: 1px solid #f1f5f9;
    font-weight: 600;
    vertical-align: middle;
}

.vehicle-table-wrapper tr:last-child td {
    border-bottom: none;
}

.vehicle-table-wrapper tr:hover td {
    background-color: #f8fafc;
}

/* Filter and Search controls */
.vehicle-filter-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.vehicle-filter-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.vehicle-filter-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.vehicle-search-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    min-width: 250px;
}

.vehicle-search-wrapper i {
    position: absolute;
    left: 14px;
    color: #94a3b8;
    font-size: 16px;
    pointer-events: none;
}

.vehicle-search-wrapper input {
    width: 100%;
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    padding: 10px 14px 10px 38px;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.2s;
}

.vehicle-search-wrapper input:focus {
    outline: none;
    background: #ffffff;
    border-color: #4f46e5;
    box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.08);
}

.vehicle-select-filter {
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    padding: 10px 36px 10px 14px;
    font-size: 14px;
    font-weight: 600;
    color: #0f172a;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2394a3b8'%3e%3cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 16px;
    transition: all 0.2s;
}

.vehicle-select-filter:focus {
    background-color: #ffffff;
    border-color: #4f46e5;
    box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.08);
}

/* Quick Add Button */
.vehicle-add-btn {
    background: #4f46e5;
    color: #ffffff;
    border: 1px solid #4f46e5;
    border-radius: 10px;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 750;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s;
    cursor: pointer;
}

.vehicle-add-btn:hover {
    background: #4338ca;
    border-color: #4338ca;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.2);
}

.vehicle-add-btn i {
    font-size: 16px;
}

/* ==========================================
   Announcement composer / view styles
   ========================================== */

/* Card Container Styles */
.composer-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 24px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.01), 0 2px 4px -1px rgba(0, 0, 0, 0.005);
}

.composer-card-title {
    font-size: 13px;
    font-weight: 800;
    color: #4f46e5;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.composer-card-title i {
    font-size: 16px;
}

/* Rich Text Editor Mockup */
.editor-toolbar {
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    border-bottom: none;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    padding: 10px 14px;
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.editor-toolbar button {
    background: transparent;
    border: none;
    color: #64748b;
    padding: 4px 8px;
    border-radius: 6px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.editor-toolbar button:hover {
    background: #cbd5e1;
    color: #0f172a;
}

.editor-toolbar .toolbar-separator {
    width: 1px;
    height: 20px;
    background-color: #cbd5e1;
    margin: 0 4px;
}

.editor-textarea {
    border: 1px solid #cbd5e1;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    padding: 16px;
    width: 100%;
    min-height: 280px;
    font-size: 14px;
    outline: none;
    resize: vertical;
    font-weight: 500;
}

.editor-textarea:focus {
    border-color: #4f46e5;
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}

.subject-input {
    font-size: 1.5rem;
    font-weight: 700;
    border: none;
    border-bottom: 2px solid #cbd5e1;
    border-radius: 0;
    padding: 10px 0;
    margin-bottom: 24px;
    width: 100%;
    outline: none;
    background: transparent;
    transition: border-bottom-color 0.2s;
}

.subject-input:focus {
    border-bottom-color: #4f46e5;
    box-shadow: none;
}

/* Scheduling inputs */
.datetime-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.datetime-wrapper i {
    position: absolute;
    right: 14px;
    color: #94a3b8;
    pointer-events: none;
    font-size: 16px;
}

.datetime-input {
    width: 100%;
    padding: 10px 36px 10px 14px;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    outline: none;
    background: #f8fafc;
    transition: all 0.2s;
}

.datetime-input:focus {
    background: #ffffff;
    border-color: #4f46e5;
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}

/* Info Promo Banner */
.promo-banner {
    background: linear-gradient(135deg, #4f46e5, #3b82f6);
    color: #ffffff;
    border-radius: 16px;
    padding: 20px;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    box-shadow: 0 10px 15px -3px rgba(59, 130, 246, 0.15);
}

.promo-banner .icon-wrapper {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.promo-banner .icon-wrapper i {
    font-size: 24px;
    color: #ffffff;
}

.promo-banner h3 {
    font-size: 15px;
    font-weight: 800;
    margin-bottom: 4px;
    color: #ffffff;
}

.promo-banner p {
    font-size: 12px;
    opacity: 0.9;
    margin: 0;
    line-height: 1.5;
    font-weight: 500;
}

/* Checkbox Group Styles */
.checkbox-badge-group {
    background: #f1f5f9;
    border-radius: 12px;
    padding: 14px;
    display: flex;
    gap: 20px;
}

.checkbox-badge-group .form-check-input {
    width: 18px;
    height: 18px;
    accent-color: #4f46e5;
    cursor: pointer;
}

.checkbox-badge-group .form-check-label {
    font-size: 13px;
    font-weight: 700;
    color: #334155;
    cursor: pointer;
}

/* Dropify style customization */
.dropify-wrapper {
    border-radius: 12px;
    border: 2px dashed #cbd5e1 !important;
    font-weight: 600;
}

/* Card Container Styles */
.view-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 28px;
    margin-bottom: 24px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.01), 0 2px 4px -1px rgba(0, 0, 0, 0.005);
}

.view-card-title {
    font-size: 13px;
    font-weight: 800;
    color: #4f46e5;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.info-label {
    font-size: 11px;
    font-weight: 800;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 4px;
}

.info-value {
    font-size: 14px;
    font-weight: 700;
    color: #1e293b;
}

.message-subject {
    font-size: 1.8rem;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.3;
    margin-bottom: 16px;
}

.message-meta {
    border-bottom: 1px solid #e2e8f0;
    padding-bottom: 16px;
    margin-bottom: 24px;
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
}

.message-body {
    font-size: 15px;
    color: #334155;
    line-height: 1.7;
    white-space: pre-line;
    font-weight: 500;
}

/* Attachment styling */
.attachment-box {
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    border-radius: 12px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
    transition: all 0.2s;
}

.attachment-box:hover {
    border-color: #cbd5e1;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
}

.attachment-preview-img {
    max-width: 100%;
    max-height: 200px;
    border-radius: 8px;
    object-fit: cover;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* ==========================================
   Announcement list page enhancements
   ========================================== */

/* Header Hero Banner */
.announcement-banner {
    background: linear-gradient(135deg, #3b42c4, #4f46e5);
    color: #ffffff !important;
    border-radius: 20px;
    padding: 36px 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 30px;
    box-shadow: 0 10px 25px -5px rgba(59, 66, 196, 0.2);
}

.announcement-banner-content {
    max-width: 70%;
}

.announcement-banner h1 {
    font-size: 2.2rem;
    font-weight: 800;
    margin-bottom: 8px;
    color: #ffffff;
}

.announcement-banner p {
    font-size: 14px;
    opacity: 0.9;
    line-height: 1.6;
    margin: 0;
    font-weight: 500;
}

.announcement-banner-btn {
    background: #ffffff;
    color: #3b42c4 !important;
    border: none;
    border-radius: 9999px;
    padding: 12px 24px;
    font-weight: 750;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s;
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.announcement-banner-btn:hover {
    background: #f8fafc;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
}

/* Section Action/Filter Layout */
.section-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 32px;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 16px;
}

.section-title {
    font-size: 1.25rem;
    font-weight: 800;
    color: #0f172a;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.toggle-expired {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    color: #475569;
}

.action-btn-group {
    display: flex;
    gap: 10px;
}

.btn-action-light {
    background: #e0e7ff;
    color: #4f46e5 !important;
    border: none;
    border-radius: 10px;
    padding: 10px 18px;
    font-weight: 750;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    transition: all 0.2s;
}

.btn-action-light:hover {
    background: #cbd5e1;
    color: #1e1b4b !important;
}

/* Stats Summary Cards */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 32px;
}

.stats-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    padding: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.01), 0 2px 4px -1px rgba(0, 0, 0, 0.005);
    position: relative;
    overflow: hidden;
}

.stats-card-left {
    display: flex;
    flex-direction: column;
}

.stats-card-title {
    font-size: 10px;
    font-weight: 800;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.stats-card-value {
    font-size: 2.25rem;
    font-weight: 850;
    color: #0f172a;
    margin: 6px 0;
    line-height: 1.1;
}

.stats-card-desc {
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
    display: flex;
    align-items: center;
    gap: 4px;
}

.stats-card-desc.trend-up {
    color: #10b981;
}

.stats-card-icon {
    background: #f8fafc;
    border-radius: 12px;
    padding: 12px;
    color: #64748b;
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
}

/* Status Badges with Dots */
.status-badge-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 9999px;
    font-size: 11px;
    font-weight: 750;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.status-badge-pill::before {
    content: "●";
    font-size: 10px;
}

.status-badge-pill.active {
    background: #d1fae5;
    color: #065f46;
}

.status-badge-pill.active::before {
    color: #10b981;
}

.status-badge-pill.expired {
    background: #f1f5f9;
    color: #475569;
}

.status-badge-pill.expired::before {
    color: #94a3b8;
}

.status-badge-pill.scheduled {
    background: #dbeafe;
    color: #1e40af;
}

.status-badge-pill.scheduled::before {
    color: #3b82f6;
}

/* Recipient Department Badge */
.recipient-badge {
    background: #e0e7ff;
    color: #4338ca;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 750;
    display: inline-flex;
    align-items: center;
}

@media (max-width: 992px) {
    .stats-grid {
        grid-template-columns: 1fr;
    }

    .announcement-banner {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }

    .announcement-banner-content {
        max-width: 100%;
    }
}

/*--------------------------------------------------------------
# E-Wallet Page Redesign & Modern Components
# Purpose: Styles for E-Wallet Policy Management and Bulk Import pages.
# Author: Antigravity
--------------------------------------------------------------*/

/* Page Headers & General Layout */
.wallet-page-container {
    font-family: "Public Sans", sans-serif;
    color: #1e293b;
    padding: 10px 0;
}

.wallet-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    flex-wrap: wrap;
    gap: 16px;
}

.wallet-header-left h1 {
    font-size: 28px;
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 6px 0;
}

.wallet-header-left p {
    font-size: 14px;
    color: #64748b;
    margin: 0;
}

.wallet-breadcrumb {
    background: transparent;
    padding: 0;
}

.wallet-breadcrumb .breadcrumb-item,
.wallet-breadcrumb .breadcrumb-item a {
    color: #64748b;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
}

.wallet-breadcrumb .breadcrumb-item.active {
    color: #312e81;
    font-weight: 850;
}

.wallet-alert {
    margin-bottom: 20px;
    border-radius: 12px;
}

.wallet-alert-list {
    padding-left: 20px;
}

.wallet-card-header-icon {
    margin-right: 8px;
    color: #3f41b5;
    font-size: 16px;
}

.wallet-submit-btn {
    border: none;
    border-radius: 12px;
    background-color: #312e81;
    font-size: 16px;
}

.wallet-submit-btn i {
    font-size: 18px;
}

.wallet-activity-widget {
    margin-bottom: 24px;
}

.wallet-activity-title {
    color: #0f172a;
    font-size: 14px;
    letter-spacing: normal;
    text-transform: none;
}

.wallet-view-all-link {
    color: #3f41b5;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
}

.wallet-view-all-link:hover {
    color: #272c82;
}

/* Custom Pill Buttons */
.btn-pill-primary {
    background-color: #312e81;
    color: #ffffff;
    font-weight: 600;
    font-size: 14px;
    padding: 12px 24px;
    border-radius: 9999px;
    border: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px rgba(49, 46, 129, 0.15);
}

.btn-pill-primary:hover {
    background-color: #1e1b4b;
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(49, 46, 129, 0.25);
}

.btn-pill-outline {
    background-color: #ffffff;
    color: #312e81;
    font-weight: 600;
    font-size: 14px;
    padding: 10px 22px;
    border-radius: 9999px;
    border: 2px solid #312e81;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
}

.btn-pill-outline:hover {
    background-color: rgba(49, 46, 129, 0.05);
    color: #1e1b4b;
    border-color: #1e1b4b;
    transform: translateY(-1px);
}

.btn-pill-danger {
    background-color: #f1f5f9;
    color: #475569;
    font-weight: 600;
    font-size: 14px;
    padding: 12px 24px;
    border-radius: 9999px;
    border: 1px solid #cbd5e1;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
}

.btn-pill-danger:hover {
    background-color: #e2e8f0;
    color: #0f172a;
    transform: translateY(-1px);
}

/* Premium Card Components */
.wallet-card {
    background: #ffffff;
    border-radius: 20px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.04);
    padding: 24px;
    margin-bottom: 24px;
    height: 100%;
}

.wallet-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.wallet-card-title {
    font-size: 16px;
    font-weight: 700;
    color: #0f172a;
    margin: 0;
}

/* Left Card: CGPA Policy Settings */
.policy-active-badge {
    background-color: #e0e7ff;
    color: #4338ca;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 6px;
    text-transform: uppercase;
}

.policy-threshold-display {
    font-size: 80px;
    font-weight: 800;
    color: #312e81;
    line-height: 1;
    margin: 20px 0;
    font-family: sans-serif;
}

.policy-threshold-desc {
    font-size: 13.5px;
    color: #64748b;
    line-height: 1.5;
    margin-bottom: 24px;
}

/* Right Card: Digital Wallet Distribution Impact */
.impact-info-box {
    background-color: #eff6ff;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 20px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.impact-info-box i {
    font-size: 20px;
    color: #3b82f6;
}

.impact-info-box p {
    font-size: 13.5px;
    color: #1e3a8a;
    margin: 0;
    line-height: 1.4;
}

.wallet-stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 20px;
}

.wallet-stat-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 16px;
}

.wallet-stat-card-title {
    font-size: 11px;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    margin-bottom: 8px;
    letter-spacing: 0.5px;
}

.wallet-stat-card-value {
    font-size: 24px;
    font-weight: 800;
    color: #0f172a;
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.wallet-stat-card-trend {
    font-size: 11px;
    font-weight: 700;
    color: #10b981;
}

.impact-warning-banner {
    background-color: #fff7ed;
    border: 1px solid #ffedd5;
    border-radius: 10px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: #c2410c;
}

.impact-warning-banner i {
    font-size: 16px;
}

/* Bottom Card: ID Card Scanner UI Simulation */
.scanner-split-container {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 32px;
    align-items: center;
}

@media (max-width: 991px) {
    .scanner-split-container {
        grid-template-columns: 1fr;
    }
}

.scanner-left-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #f8fafc;
    border-radius: 16px;
    padding: 32px;
    border: 1px dashed #cbd5e1;
}

/* E-Card Animation styling */
.scanner-card-view {
    position: relative;
    width: 290px;
    height: 180px;
    background: linear-gradient(135deg, #1e1b4b 0%, #312e81 100%);
    border-radius: 14px;
    box-shadow: 0 15px 35px rgba(30, 27, 75, 0.3);
    padding: 20px;
    color: #ffffff;
    overflow: hidden;
    margin-bottom: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.scanner-card-view::before {
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.05) 0%, transparent 60%);
    pointer-events: none;
}

/* Gold chip */
.card-chip {
    width: 38px;
    height: 30px;
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    border-radius: 6px;
    position: relative;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
    border: 1px solid #b45309;
}

.card-chip::after {
    content: "";
    position: absolute;
    top: 5px;
    left: 8px;
    width: 20px;
    height: 18px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 2px;
}

.card-logo {
    position: absolute;
    top: 20px;
    right: 20px;
    text-align: right;
}

.card-logo-title {
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.5px;
    color: #ffffff;
}

.card-logo-subtitle {
    font-size: 8px;
    color: #a5b4fc;
    text-transform: uppercase;
}

/* Skeleton bars representing the card details */
.card-details-skeleton {
    margin-top: 30px;
}

.skeleton-bar {
    height: 8px;
    background-color: rgba(255, 255, 255, 0.15);
    border-radius: 4px;
    margin-bottom: 8px;
}

.skeleton-bar-md {
    width: 60%;
}

.skeleton-bar-sm {
    width: 40%;
}

.skeleton-bar-lg {
    width: 80%;
    margin-top: 20px;
    height: 12px;
}

/* Laser scan line animation */
.scan-laser {
    position: absolute;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, rgba(16, 185, 129, 0) 0%, #10b981 50%, rgba(16, 185, 129, 0) 100%);
    box-shadow: 0 0 12px #10b981;
    z-index: 5;
    animation: scanLaser 3.5s infinite linear;
    pointer-events: none;
}

@keyframes scanLaser {
    0% {
        top: 5%;
    }

    50% {
        top: 95%;
    }

    100% {
        top: 5%;
    }
}

.scan-status-text {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #0f172a;
    color: #38bdf8;
    padding: 8px 16px;
    border-radius: 9999px;
    font-size: 12.5px;
    font-weight: 600;
}

.pulsing-dot {
    width: 8px;
    height: 8px;
    background-color: #10b981;
    border-radius: 50%;
    animation: pulseGreen 1.5s infinite ease-in-out;
}

@keyframes pulseGreen {
    0% {
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
    }

    70% {
        box-shadow: 0 0 0 8px rgba(16, 185, 129, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
    }
}

/* Right data table (scanner details) */
.detected-data-card {
    background: #f8fafc;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    padding: 20px;
}

.detected-data-title {
    font-size: 15px;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.detected-data-table {
    width: 100%;
    margin-bottom: 20px;
}

.detected-data-row {
    display: flex;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid #e2e8f0;
    font-size: 13.5px;
}

.detected-data-row:last-child {
    border-bottom: none;
}

.detected-data-label {
    color: #64748b;
    font-weight: 500;
}

.detected-data-val {
    color: #0f172a;
    font-weight: 600;
}

.badge-ready {
    background-color: #d1fae5;
    color: #065f46;
    font-size: 10.5px;
    font-weight: 700;
    padding: 4px 8px;
    border-radius: 4px;
}

.scan-footer-note {
    font-size: 12px;
    color: #94a3b8;
    text-align: center;
    margin-top: 12px;
    font-style: italic;
}


/*--------------------------------------------------------------
# Bulk Import Layout Components
--------------------------------------------------------------*/

/* Import Settings Parameters Box */
.import-settings-box {
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 24px;
}

.import-settings-title {
    font-size: 15px;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 16px;
}

/* Floating labels / Modern inputs */
.wallet-form-group {
    position: relative;
    margin-bottom: 16px;
}

.wallet-form-control {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    font-size: 14px;
    color: #0f172a;
    background-color: #ffffff;
    transition: all 0.2s ease;
}

.wallet-form-control:focus {
    border-color: #3f41b5;
    box-shadow: 0 0 0 3px rgba(63, 65, 181, 0.1);
    outline: none;
}

.wallet-form-label {
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
    margin-bottom: 6px;
    display: block;
}

/* Upload zone (Drag and Drop) */
.wallet-dropzone {
    background-color: #f8fafc;
    border: 2px dashed #cbd5e1;
    border-radius: 16px;
    padding: 40px 24px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
}

.wallet-dropzone:hover,
.wallet-dropzone.dragover {
    border-color: #3f41b5;
    background-color: rgba(63, 65, 181, 0.02);
}

.wallet-dropzone-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background-color: #eef2ff;
    color: #3f41b5;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin-bottom: 16px;
    transition: all 0.2s ease;
}

.wallet-dropzone:hover .wallet-dropzone-icon {
    transform: scale(1.1);
}

.wallet-dropzone-title {
    font-size: 15px;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 6px;
}

.wallet-dropzone-sub {
    font-size: 12.5px;
    color: #64748b;
    margin-bottom: 18px;
}

/* File selection display text */
.selected-file-banner {
    background-color: #f0fdf4;
    border: 1px solid #bbf7d0;
    color: #166534;
    padding: 10px 16px;
    border-radius: 8px;
    margin-bottom: 16px;
    display: none;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
}

/* System Summary (Right Column Widgets) */
.widget-box {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 20px;
}

.widget-title {
    font-size: 13.5px;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 16px;
}

.widget-item {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.widget-item:last-child {
    margin-bottom: 0;
}

.widget-item-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.widget-item-icon.success {
    background-color: #d1fae5;
    color: #10b981;
}

.widget-item-icon.info {
    background-color: #ffedd5;
    color: #f97316;
}

.widget-item-content {
    flex-grow: 1;
}

.widget-item-label {
    font-size: 11px;
    font-weight: 600;
    color: #94a3b8;
    text-transform: uppercase;
    margin-bottom: 2px;
}

.widget-item-val {
    font-size: 14px;
    font-weight: 700;
    color: #0f172a;
}

.template-preview-container {
    background: #f8fafc;
    border-radius: 12px;
    padding: 12px;
    border: 1px solid #e2e8f0;
    margin-top: 16px;
}

.template-preview-image {
    width: 100%;
    border-radius: 6px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03);
    border: 1px solid #cbd5e1;
}

/* Data Preview Mapping Table Component */
.wallet-table-container {
    margin-top: 10px;
}

.wallet-table-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.wallet-table-title {
    font-size: 15px;
    font-weight: 700;
    color: #0f172a;
    display: flex;
    align-items: center;
    gap: 8px;
}

.wallet-badge-group {
    display: flex;
    gap: 8px;
}

.wallet-badge-pill {
    font-size: 11px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 9999px;
}

.wallet-badge-pill.success {
    background-color: #d1fae5;
    color: #065f46;
}

.wallet-badge-pill.danger {
    background-color: #fee2e2;
    color: #991b1b;
}

.wallet-table {
    width: 100%;
    border-collapse: collapse;
}

.wallet-table th {
    background-color: #f8fafc;
    color: #64748b;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 14px 16px;
    text-align: left;
    border-bottom: 1px solid #e2e8f0;
    letter-spacing: 0.5px;
}

.wallet-table td {
    padding: 14px 16px;
    font-size: 14px;
    color: #0f172a;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
}

.wallet-table tr:last-child td {
    border-bottom: none;
}

.wallet-table tbody tr:hover {
    background-color: #f8fafc;
}

.badge-row-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 6px;
}

.badge-row-status.valid {
    background-color: #d1fae5;
    color: #065f46;
}

.badge-row-status.valid::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #10b981;
}

.badge-row-status.invalid {
    background-color: #fee2e2;
    color: #991b1b;
}

.badge-row-status.invalid::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #ef4444;
}

.action-resolve-link {
    color: #312e81;
    font-weight: 700;
    text-decoration: underline;
    font-size: 12.5px;
}

.action-resolve-link:hover {
    color: #1e1b4b;
}

.edit-action-icon {
    color: #64748b;
    cursor: pointer;
    font-size: 16px;
    transition: color 0.15s ease;
}

.edit-action-icon:hover {
    color: #312e81;
}

.wallet-table-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    background-color: #f8fafc;
    border-top: 1px solid #e2e8f0;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
}

.wallet-table-footer-text {
    font-size: 12.5px;
    color: #64748b;
    font-style: italic;
}

.wallet-table-footer-actions {
    display: flex;
    gap: 12px;
}

/* Bottom Marketing/Promo Grid */
.promo-cards-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-top: 16px;
}

@media (max-width: 1199px) {
    .promo-cards-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 575px) {
    .promo-cards-grid {
        grid-template-columns: 1fr;
    }
}

.promo-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 20px;
    text-align: center;
    transition: all 0.2s ease;
}

.promo-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.03);
}

.promo-card-icon-box {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    margin-bottom: 16px;
}

.promo-card-icon-box.shield {
    background-color: #fff1f2;
    color: #f43f5e;
}

.promo-card-icon-box.bolt {
    background-color: #f0fdf4;
    color: #22c55e;
}

.promo-card-icon-box.doc {
    background-color: #eff6ff;
    color: #3b82f6;
}

.promo-card-icon-box.help {
    background-color: #fdf2f8;
    color: #ec4899;
}

.promo-card-title {
    font-size: 13.5px;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 8px;
}

.promo-card-desc {
    font-size: 12px;
    color: #64748b;
    line-height: 1.4;
    margin: 0;
}

/*--------------------------------------------------------------
# E-Wallet Personal Top-up Redesign
--------------------------------------------------------------*/
.quick-topup-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-top: 12px;
}

@media (max-width: 768px) {
    .quick-topup-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.quick-topup-card {
    background: #ffffff;
    border: 2px solid #e2e8f0;
    border-radius: 16px;
    padding: 20px 16px;
    text-align: center;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.quick-topup-card:hover {
    transform: translateY(-2px);
    border-color: #cbd5e1;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
}

.quick-topup-card.active {
    border-color: #3f41b5;
    background-color: #f5f3ff;
}

.quick-card-lbl {
    font-size: 11px;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.quick-card-val {
    font-size: 20px;
    font-weight: 800;
    color: #1e293b;
}

.quick-topup-card.active .quick-card-lbl {
    color: #3f41b5;
}

.quick-topup-card.active .quick-card-val {
    color: #312e81;
}

/* Manual Amount Box */
.manual-amount-wrapper {
    display: flex;
    align-items: center;
    background-color: #f8fafc;
    border: 2px solid #e2e8f0;
    border-radius: 16px;
    padding: 16px 24px;
    margin-top: 12px;
}

.manual-currency {
    font-size: 24px;
    font-weight: 700;
    color: #475569;
    margin-right: 12px;
}

.manual-amount-field {
    border: none;
    background: transparent;
    font-size: 28px;
    font-weight: 800;
    color: #0f172a;
    width: 100%;
    outline: none;
    padding: 0;
}

.manual-amount-field::-webkit-inner-spin-button,
.manual-amount-field::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.manual-amount-subtext {
    font-size: 12px;
    color: #64748b;
    margin-top: 8px;
    padding-left: 4px;
}

/* Payment Methods */
.payment-methods-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 12px;
}

.payment-method-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #ffffff;
    border: 2px solid #e2e8f0;
    border-radius: 16px;
    padding: 16px 20px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.payment-method-card:hover {
    border-color: #cbd5e1;
}

.payment-method-card.active {
    border-color: #3f41b5;
    background-color: #f5f3ff;
}

.wallet-internal-credit-card {
    cursor: default;
}

.wallet-internal-credit-card:hover {
    border-color: #3f41b5;
}

.pay-method-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.pay-method-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background-color: #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #475569;
    transition: all 0.2s ease;
}

.payment-method-card.active .pay-method-icon {
    background-color: #e0e7ff;
    color: #3f41b5;
}

.pay-method-title {
    font-size: 14px;
    font-weight: 700;
    color: #1f2937;
}

.pay-method-desc {
    font-size: 12px;
    color: #64748b;
}

.pay-method-check {
    font-size: 18px;
    color: #94a3b8;
}

.payment-method-card.active .pay-method-check {
    color: #3f41b5;
}

/* E-Wallet Sidebar Balance */
@media (min-width: 1200px) {
    .sidebar::after {
        content: "";
        display: block;
        margin-top: auto;
        padding-top: 15px;
    }

    .sidebar-balance-card {
        margin-top: 24px;
        padding: 16px;
        border-radius: 16px;
        background: #312e81;
        color: #ffffff;
        box-shadow: 0 4px 12px rgba(49, 46, 129, 0.15);
    }

    .sidebar-balance-lbl {
        margin-bottom: 4px;
        font-size: 11px;
        letter-spacing: 0.5px;
        opacity: 0.8;
        text-transform: uppercase;
    }

    .sidebar-balance-val {
        font-size: 20px;
        font-weight: 800;
    }
}

/* Recent Activity List */
.recent-activity-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.activity-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 12px;
    border-bottom: 1px solid #f1f5f9;
}

.activity-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.activity-icon-box {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.activity-icon-box.topup {
    background-color: #ecfdf5;
    color: #10b981;
}

.activity-icon-box.payment {
    background-color: #eff6ff;
    color: #3b82f6;
}

.activity-icon-box.failed {
    background-color: #fef2f2;
    color: #ef4444;
}

.activity-content {
    display: flex;
    flex: 1;
    justify-content: space-between;
    align-items: center;
    margin-left: 12px;
}

.activity-name {
    font-size: 13.5px;
    font-weight: 700;
    color: #1e293b;
}

.activity-time {
    font-size: 11px;
    color: #64748b;
    margin-top: 2px;
}

.activity-amount {
    font-size: 14px;
    font-weight: 700;
}

.activity-amount.topup {
    color: #10b981;
}

.activity-amount.payment {
    color: #1e293b;
}

.activity-amount.failed {
    color: #ef4444;
}

/* Virtual Card Mockup */
.virtual-card-widget {
    background: linear-gradient(135deg, #1e3a8a 0%, #312e81 100%);
    border-radius: 20px;
    padding: 24px;
    color: #ffffff;
    box-shadow: 0 10px 25px rgba(49, 46, 129, 0.25);
    position: relative;
    overflow: hidden;
}

.virtual-card-widget::before {
    content: "";
    position: absolute;
    top: -50px;
    right: -50px;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.03);
}

.vcard-body {
    display: flex;
    flex-direction: column;
    height: 140px;
    justify-content: space-between;
}

.vcard-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.vcard-chip {
    width: 38px;
    height: 28px;
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    border-radius: 6px;
}

.vcard-logo {
    font-size: 18px;
    font-weight: 800;
    letter-spacing: 1px;
    opacity: 0.9;
}

.vcard-number {
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 2px;
    margin: 16px 0;
    font-family: monospace;
}

.vcard-lbl {
    font-size: 9px;
    letter-spacing: 0.5px;
    opacity: 0.7;
    text-transform: uppercase;
}

.vcard-name {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.5px;
    margin-top: 2px;
}

/* Secure Transactions Banner */
.secure-banner-container {
    background: linear-gradient(135deg, #e0e7ff 0%, #e0f2fe 100%);
    border: 1px solid #c7d2fe;
    border-radius: 20px;
    padding: 24px;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.secure-banner-container::after {
    content: "\F54A";
    /* Bootstrap Shield Check icon code */
    font-family: "bootstrap-icons";
    position: absolute;
    right: 24px;
    font-size: 72px;
    color: rgba(99, 102, 241, 0.08);
}

.secure-banner-content h3 {
    font-size: 15px;
    font-weight: 800;
    color: #312e81;
    margin: 0 0 6px 0;
}

.secure-banner-content p {
    font-size: 12.5px;
    color: #4338ca;
    margin: 0;
    max-width: 80%;
    line-height: 1.5;
}

.wallet-page-container .wallet-card {
    height: auto;
}

/*--------------------------------------------------------------
# G-Concierge Tickets Page Redesign
--------------------------------------------------------------*/
.ticket-metric-card {
    padding: 24px;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 4px 18px rgba(15, 23, 42, 0.03);
    transition: all 0.25s ease;
}

.ticket-metric-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
}

.ticket-metric-card.info-theme {
    border-left: 5px solid #3f41b5;
}

.ticket-metric-card.warning-theme {
    border-left: 5px solid #64748b;
}

.ticket-metric-card.danger-theme {
    border-left: 5px solid #ef4444;
}

.ticket-metric-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ticket-metric-header span {
    font-size: 13.5px;
    font-weight: 700;
    color: #475569;
}

.ticket-metric-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.ticket-metric-icon.info {
    background-color: #e0e7ff;
    color: #3f41b5;
}

.ticket-metric-icon.warning {
    background-color: #f1f5f9;
    color: #475569;
}

.ticket-metric-icon.danger {
    background-color: #fee2e2;
    color: #ef4444;
}

.ticket-metric-body h2 {
    font-size: 32px;
    font-weight: 800;
    color: #0f172a;
    margin: 0;
}

.metric-subtext {
    font-size: 11px;
    font-weight: 700;
    margin: 4px 0 0 0;
}

.metric-subtext.success {
    color: #10b981;
}

.metric-subtext.danger {
    color: #ef4444;
}

/* Tab Navigation Pills */
.tab-pill-btn {
    border: none;
    background: #f1f5f9;
    color: #475569;
    padding: 8px 18px;
    border-radius: 20px;
    font-weight: 700;
    font-size: 13px;
    transition: all 0.2s ease;
    outline: none;
}

.tab-pill-btn:hover {
    background: #e2e8f0;
    color: #0f172a;
}

.tab-pill-btn.active {
    background: #3f41b5;
    color: #ffffff;
    box-shadow: 0 4px 10px rgba(63, 65, 181, 0.2);
}

/* Priority Bullet Badges */
.priority-bullet-badge {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    font-weight: 800;
    padding: 4px 10px;
    border-radius: 20px;
    letter-spacing: 0.5px;
}

.priority-bullet-badge .bullet {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    margin-right: 6px;
    display: inline-block;
}

.priority-bullet-badge.danger {
    background-color: #fff1f2;
    color: #f43f5e;
    border: 1px solid #fecdd3;
}

.priority-bullet-badge.danger .bullet {
    background-color: #f43f5e;
}

.priority-bullet-badge.warning {
    background-color: #eff6ff;
    color: #3b82f6;
    border: 1px solid #bfdbfe;
}

.priority-bullet-badge.warning .bullet {
    background-color: #3b82f6;
}

.priority-bullet-badge.success {
    background-color: #f1f5f9;
    color: #64748b;
    border: 1px solid #e2e8f0;
}

.priority-bullet-badge.success .bullet {
    background-color: #64748b;
}

/* Ticket Status Badges */
.ticket-status-badge {
    display: inline-block;
    font-size: 11.5px;
    font-weight: 700;
    padding: 6px 12px;
    border-radius: 8px;
    text-align: center;
}

.ticket-status-badge.received {
    background-color: #f3e8ff;
    color: #7c3aed;
}

.ticket-status-badge.processing {
    background-color: #e0f2fe;
    color: #0369a1;
}

.ticket-status-badge.completed {
    background-color: #dcfce7;
    color: #15803d;
}

.ticket-status-badge.overdue {
    background-color: #fee2e2;
    color: #b91c1c;
}

/* Pagination Styling */
.pagination-page-num {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 13px;
    font-weight: 700;
    color: #64748b;
    transition: all 0.2s ease;
}

.pagination-page-num:hover {
    background-color: #f1f5f9;
    color: #0f172a;
}

.pagination-page-num.active {
    background-color: #3f41b5;
    color: #ffffff;
    box-shadow: 0 2px 6px rgba(63, 65, 181, 0.15);
}

/* KPI Resolution Performance Metrics */
.kpi-metrics-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-top: 16px;
}

.kpi-metric-item {
    text-align: left;
    padding: 12px 0;
}

.kpi-lbl {
    font-size: 10px;
    font-weight: 700;
    color: #64748b;
    letter-spacing: 0.5px;
    display: block;
    margin-bottom: 6px;
}

.kpi-metric-item h3 {
    font-size: 22px;
    font-weight: 800;
    color: #0f172a;
    margin: 0;
}

.kpi-metric-item h3.success {
    color: #10b981;
}

/* Help Links List */
.help-links-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.help-link-item {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 12px 16px;
    transition: all 0.2s ease;
    cursor: pointer;
}

.help-link-item:hover {
    border-color: #cbd5e1;
    background: #ffffff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
}

.help-link-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.help-link-icon.doc {
    background-color: #eff6ff;
    color: #3b82f6;
}

.help-link-icon.video {
    background-color: #ecfdf5;
    color: #10b981;
}

.help-link-title {
    font-size: 13px;
    font-weight: 700;
    color: #0f172a;
}

.help-link-desc {
    font-size: 11.5px;
    color: #64748b;
    margin-top: 2px;
}

/*--------------------------------------------------------------
# BOS HR Final Consistency Overrides
# Purpose: Ensure later legacy HR CSS does not override the refined form/layout layer.
--------------------------------------------------------------*/
.vehicle-page-container {
    background: transparent !important;
}

.vehicle-header {
    padding: 28px 32px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 28px !important;
    background:
        radial-gradient(circle at 92% 12%, rgba(16, 185, 129, 0.11), transparent 28%),
        linear-gradient(135deg, #fff 0%, #f7f9ff 100%) !important;
    box-shadow: 0 18px 36px rgba(15, 23, 42, 0.05) !important;
}

.vehicle-header h1 {
    color: #1e1b4b !important;
    font-size: clamp(28px, 3vw, 42px) !important;
    font-weight: 900 !important;
    letter-spacing: -0.05em !important;
}

.vehicle-header p {
    color: #64748b !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1.6 !important;
}

.vehicle-form-card,
.staff-management .card,
.bos-hr-filter-card,
.bos-hr-table-card {
    border-radius: 28px !important;
}

.vehicle-section-title,
.staff-management .purple-text,
.staff-management h3,
.staff-management h4 {
    color: #312e81 !important;
    font-family: var(--bos-font-family) !important;
    font-weight: 900 !important;
}

/*--------------------------------------------------------------
# BOS Global Popup Modal
# Purpose: Replaces default browser alert/confirm popups with consistent BOS modal styling.
--------------------------------------------------------------*/
.bos-popup-container {
    font-family: var(--bos-font-family, "Public Sans", sans-serif) !important;
    backdrop-filter: blur(8px);
}

.bos-popup {
    width: min(92vw, 460px) !important;
    padding: 38px 34px 30px !important;
    border-radius: 28px !important;
    background: #ffffff !important;
    box-shadow: 0 30px 80px rgba(15, 23, 42, 0.25) !important;
}

.bos-popup-progress {
    position: relative;
    width: 118px;
    height: 118px;
    margin: 0 auto 18px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        conic-gradient(var(--bos-primary, #3f41b5) 0 74%, #e8efff 74% 100%);
}

.bos-popup-progress::before {
    content: "";
    position: absolute;
    inset: 10px;
    border-radius: inherit;
    background: #ffffff;
}

.bos-popup-progress span {
    position: absolute;
    right: -34px;
    top: 4px;
    width: 74px;
    height: 92px;
    opacity: 0.42;
}

.bos-popup-progress span::before,
.bos-popup-progress span::after {
    content: "";
    position: absolute;
    border-radius: 6px;
    background: #eef2f7;
}

.bos-popup-progress span::before {
    width: 28px;
    height: 72px;
    left: 0;
    top: 12px;
}

.bos-popup-progress span::after {
    width: 38px;
    height: 28px;
    right: 4px;
    top: 0;
}

.bos-popup-progress strong {
    position: relative;
    z-index: 1;
    color: #1111a8;
    font-size: 30px;
    font-weight: 800;
    line-height: 1;
}

.bos-popup-title {
    margin: 0 !important;
    padding: 0 !important;
    color: #0f172a !important;
    font-size: 25px !important;
    font-weight: 900 !important;
    letter-spacing: -0.035em !important;
    line-height: 1.25 !important;
}

.bos-popup-message {
    margin: 14px auto 0 !important;
    padding: 0 !important;
    color: #334155 !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 1.55 !important;
    text-align: center !important;
}

/*
 * BosPopup is message/confirmation-only. SweetAlert keeps inactive input
 * elements in its DOM; the global select theme must never make those dormant
 * controls visible (notably the empty select previously shown under errors).
 */
.bos-popup>.swal2-input,
.bos-popup>.swal2-file,
.bos-popup>.swal2-range,
.bos-popup>.swal2-select,
.bos-popup>.swal2-radio,
.bos-popup>.swal2-checkbox,
.bos-popup>textarea.swal2-textarea,
.bos-popup>.bos-select-custom-container {
    display: none !important;
}

.bos-popup-actions {
    width: 100% !important;
    gap: 12px !important;
    margin: 28px 0 0 !important;
}

.bos-popup-btn {
    min-width: 132px !important;
    min-height: 50px !important;
    border-radius: 16px !important;
    border: 1.5px solid transparent !important;
    padding: 12px 22px !important;
    font-size: 15px !important;
    font-weight: 900 !important;
    box-shadow: none !important;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease !important;
}

.bos-popup-btn:hover {
    transform: translateY(-1px);
}

.bos-popup-btn-primary {
    color: #ffffff !important;
    background: var(--bos-primary, #3f41b5) !important;
    box-shadow: 0 14px 30px rgba(63, 65, 181, 0.22) !important;
}

.bos-popup-btn-outline {
    color: #1e1b4b !important;
    background: #eef4ff !important;
    border-color: #dbe4f3 !important;
}

@media (max-width: 575px) {
    .bos-popup {
        padding: 30px 22px 24px !important;
        border-radius: 24px !important;
    }

    .bos-popup-progress {
        width: 96px;
        height: 96px;
    }

    .bos-popup-actions {
        flex-direction: column-reverse !important;
    }

    .bos-popup-btn {
        width: 100% !important;
    }
}

/*--------------------------------------------------------------
# BOS Access Restriction / Security Governance
--------------------------------------------------------------*/
.bos-access-page {
    --access-primary: var(--bos-primary, #3f41b5);
    --access-primary-dark: #29278f;
    --access-secondary: var(--bos-secondary, #10b981);
    --access-neutral: var(--bos-neutral, #64748b);
    --access-ink: #0f172a;
    --access-border: #dbe4f3;
    --access-surface: #ffffff;
    --access-soft: #eef4ff;
    min-height: calc(100vh - 80px);
    padding: 28px 0 56px;
    color: var(--access-ink);
    font-family: var(--bos-font-family, "Public Sans", sans-serif);
    background: #f6f8ff;
}

.bos-access-shell {
    width: min(100%, 1500px);
    margin: 0 auto;
    padding: 0 clamp(18px, 3vw, 38px);
}

.bos-access-topbar,
.bos-access-builder-hero {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 24px;
}

.bos-access-kicker,
.bos-access-breadcrumb {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--access-primary);
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.bos-access-topbar h1,
.bos-access-builder-hero h1 {
    margin: 8px 0 8px;
    color: #052e7e;
    font-size: clamp(34px, 4vw, 56px);
    font-weight: 900;
    letter-spacing: -0.055em;
}

.bos-access-topbar p,
.bos-access-builder-hero p {
    max-width: 760px;
    margin: 0;
    color: var(--access-neutral);
    font-size: 18px;
    font-weight: 600;
    line-height: 1.55;
}

.bos-access-primary-btn,
.bos-access-outline-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 56px;
    padding: 14px 28px;
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: 16px;
    font-weight: 900;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.bos-access-primary-btn {
    color: #fff;
    background: var(--access-primary-dark);
    box-shadow: 0 16px 34px rgba(41, 39, 143, 0.22);
}

.bos-access-outline-btn {
    color: var(--access-primary-dark);
    background: rgba(255, 255, 255, 0.72);
    border-color: #c7d2fe;
}

.bos-access-primary-btn:hover,
.bos-access-outline-btn:hover {
    transform: translateY(-1px);
    text-decoration: none;
}

.bos-access-alert {
    margin-bottom: 18px;
    padding: 16px 20px;
    border-radius: 18px;
    border: 1px solid rgba(16, 185, 129, 0.25);
    color: #065f46;
    background: #d1fae5;
    font-weight: 800;
}

.bos-access-tabs {
    display: inline-flex;
    align-items: center;
    gap: 24px;
    margin-bottom: 22px;
    padding: 0 2px;
    color: #334155;
    font-weight: 800;
}

.bos-access-tabs button {
    padding: 12px 4px;
    border-bottom: 3px solid transparent;
    border-top: 0;
    border-right: 0;
    border-left: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
    appearance: none;
}

.bos-access-tabs .is-active {
    color: var(--access-primary-dark);
    border-color: var(--access-primary);
}

.bos-access-tab-panel[hidden] {
    display: none !important;
}

.bos-access-filter-card,
.bos-access-step-card,
.bos-access-then-card,
.bos-access-guide-card,
.bos-access-rule-card,
.bos-access-preview-card,
.bos-access-stat-card,
.bos-access-overview-card,
.bos-access-log-card,
.bos-access-empty {
    border: 1px solid var(--access-border);
    border-radius: 28px;
    background: var(--access-surface);
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.045);
}

.bos-access-filter-card {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) minmax(220px, 320px);
    gap: 18px;
    margin-bottom: 26px;
    padding: 22px;
}

.bos-access-search {
    position: relative;
    display: flex;
    align-items: center;
}

.bos-access-search-icon {
    position: absolute;
    top: 50%;
    left: 24px;
    width: 24px;
    height: 24px;
    transform: translateY(-50%);
    color: var(--access-primary);
    pointer-events: none;
}

.bos-access-search-icon::before,
.bos-access-search-icon::after {
    content: "";
    position: absolute;
    display: block;
}

.bos-access-search-icon::before {
    top: 1px;
    left: 1px;
    width: 15px;
    height: 15px;
    border: 3px solid currentColor;
    border-radius: 999px;
}

.bos-access-search-icon::after {
    right: 1px;
    bottom: 2px;
    width: 10px;
    height: 3px;
    border-radius: 999px;
    background: currentColor;
    transform: rotate(45deg);
    transform-origin: center;
}

.bos-access-search input,
.bos-access-filter-select select,
.bos-access-control {
    width: 100%;
    min-height: 58px;
    border: 1.5px solid var(--access-border);
    border-radius: 16px;
    color: #1e293b;
    background: #f8faff;
    font-size: 16px;
    font-weight: 700;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.bos-access-search input {
    height: 64px;
    padding: 0 20px 0 72px;
    line-height: 64px;
}

.bos-access-filter-select label,
.bos-access-step-card label {
    display: block;
    margin-bottom: 8px;
    color: #475569;
    font-size: 14px;
    font-weight: 900;
}

.bos-access-filter-select select,
.bos-access-control {
    padding: 0 16px;
}

.bos-access-search input:focus,
.bos-access-filter-select select:focus,
.bos-access-control:focus {
    border-color: var(--access-primary);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(63, 65, 181, 0.11);
}

.bos-access-overview-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 24px;
    padding: 30px;
}

.bos-access-overview-card h2,
.bos-access-logs-head h2 {
    margin: 8px 0;
    color: #1e1b4b;
    font-size: clamp(26px, 2.4vw, 38px);
    font-weight: 900;
    letter-spacing: -0.04em;
}

.bos-access-overview-card p,
.bos-access-logs-head p {
    max-width: 720px;
    margin: 0;
    color: var(--access-neutral);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.55;
}

.bos-access-logs-head {
    margin-bottom: 18px;
}

.bos-access-log-list {
    display: grid;
    gap: 14px;
}

.bos-access-log-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 20px 24px;
}

.bos-access-log-card span {
    display: inline-flex;
    margin-bottom: 6px;
    color: var(--access-primary);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.bos-access-log-card strong {
    display: block;
    color: #111827;
    font-size: 18px;
    font-weight: 900;
}

.bos-access-log-card p {
    margin: 4px 0 0;
    color: var(--access-neutral);
    font-weight: 700;
}

.bos-access-log-card small {
    white-space: nowrap;
    color: #64748b;
    font-weight: 800;
}

.bos-access-list-head {
    display: grid;
    grid-template-columns: 1fr 130px;
    gap: 18px;
    padding: 0 26px 14px;
    color: #334155;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.bos-access-rule-list {
    display: grid;
    gap: 16px;
}

.bos-access-rule-card {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 20px;
    padding: 22px 24px;
}

.bos-access-rule-main {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px 14px;
    color: #1e293b;
    font-size: 17px;
}

.bos-access-rule-main strong {
    font-weight: 900;
}

.bos-access-chip,
.bos-access-target {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 5px 12px;
    border-radius: 10px;
    color: var(--access-primary-dark);
    background: #e7efff;
    font-size: 13px;
    font-weight: 900;
}

.bos-access-condition {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 14px;
    border: 1px solid #d8def8;
    border-radius: 999px;
    background: #f5f6ff;
}

.bos-access-condition b {
    color: #dc2626;
}

.bos-access-target {
    color: #047857;
    background: #d1fae5;
}

.bos-access-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

.bos-access-actions form {
    margin: 0;
}

.bos-access-icon-btn {
    width: 44px;
    height: 44px;
    border: 1px solid var(--access-border);
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--access-primary);
    background: #fff;
    font-size: 18px;
    text-decoration: none;
}

.bos-access-icon-btn.is-danger {
    color: #ef4444;
}

.bos-access-empty {
    padding: 36px;
    text-align: center;
    color: var(--access-neutral);
    font-weight: 800;
}

.bos-access-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    margin-top: 28px;
}

.bos-access-stat-card {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 6px 16px;
    align-items: center;
    padding: 24px;
}

.bos-access-stat-card span {
    grid-row: span 2;
    width: 56px;
    height: 56px;
    border-radius: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--access-primary-dark);
    background: #eef2ff;
    font-size: 26px;
}

.bos-access-stat-card strong {
    color: #020617;
    font-size: 32px;
    font-weight: 900;
    line-height: 1;
}

.bos-access-stat-card small {
    color: var(--access-neutral);
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.bos-access-builder-hero {
    padding: 22px 0 16px;
}

.bos-access-builder-actions {
    display: flex;
    gap: 14px;
}

.bos-access-builder-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 24px;
    align-items: start;
}

.bos-access-builder-main,
.bos-access-builder-side {
    display: grid;
    gap: 22px;
}

.bos-access-step-card {
    padding: 30px;
}

.bos-access-step-title {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
}

.bos-access-step-title span {
    width: 42px;
    height: 42px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: var(--access-primary);
    font-weight: 900;
}

.bos-access-step-title h2,
.bos-access-then-card h2 {
    margin: 0;
    color: #111827;
    font-size: 24px;
    font-weight: 900;
    letter-spacing: -0.03em;
}

.bos-access-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    margin-bottom: 20px;
}

.bos-access-value-container select[multiple] {
    min-height: 132px;
    padding-top: 12px;
}

.bos-access-help,
.bos-access-rule-note {
    margin: 12px 0 0;
    color: var(--access-neutral);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.5;
}

.bos-access-rule-note {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-top: 22px;
    border-top: 1px solid var(--access-border);
}

.bos-access-preview-card {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 20px;
    align-items: center;
    padding: 26px 30px;
    background: #dbeafe;
}

.bos-access-preview-icon {
    width: 58px;
    height: 58px;
    border-radius: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: var(--access-primary-dark);
    font-size: 28px;
}

.bos-access-preview-card small {
    color: var(--access-primary-dark);
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.bos-access-preview-card p {
    margin: 5px 0 0;
    color: #020617;
    font-size: clamp(20px, 2.2vw, 30px);
    font-weight: 700;
    line-height: 1.35;
}

.bos-access-preview-card strong {
    color: var(--access-primary-dark);
}

.bos-access-then-card {
    padding: 28px;
    color: #fff;
    background: linear-gradient(145deg, #312e81, #2c2aa4);
    border-color: rgba(255, 255, 255, 0.14);
}

.bos-access-then-card h2 {
    color: #fff;
    margin-bottom: 18px;
}

.bos-access-then-option {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.08);
}

.bos-access-then-option span {
    color: #fb7185;
    font-size: 24px;
}

.bos-access-guide-card {
    min-height: 260px;
    padding: 28px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    color: #fff;
    overflow: hidden;
    background:
        linear-gradient(180deg, rgba(15, 23, 42, 0.08), rgba(15, 23, 42, 0.82)),
        radial-gradient(circle at 85% 15%, rgba(16, 185, 129, 0.65), transparent 32%),
        linear-gradient(145deg, #3f41b5, #111827);
}

.bos-access-guide-card span {
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.bos-access-guide-card h3 {
    margin: 8px 0;
    color: #fff;
    font-size: 24px;
    font-weight: 900;
}

.bos-access-guide-card p {
    margin: 0;
    color: rgba(255, 255, 255, 0.82);
    font-weight: 600;
    line-height: 1.55;
}

@media (max-width: 1199px) {
    .bos-access-builder-grid {
        grid-template-columns: 1fr;
    }

    .bos-access-builder-side {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .bos-access-page {
        padding-bottom: 110px;
    }

    .bos-access-topbar,
    .bos-access-builder-hero {
        flex-direction: column;
    }

    .bos-access-builder-actions,
    .bos-access-filter-card,
    .bos-access-form-grid,
    .bos-access-builder-side,
    .bos-access-stats-grid,
    .bos-access-rule-card {
        grid-template-columns: 1fr;
    }

    .bos-access-builder-actions {
        display: grid;
        width: 100%;
    }

    .bos-access-list-head {
        display: none;
    }

    .bos-access-actions {
        justify-content: flex-start;
    }

    .bos-access-step-card,
    .bos-access-filter-card,
    .bos-access-preview-card,
    .bos-access-rule-card {
        padding: 20px;
        border-radius: 22px;
    }
}

/* =========================================================
   BOS Academic Module
   Used by Academic pages: Find Student, Student Leave,
   Enrollment, Analysis, Course Registration, Import Student,
   Laporan Kursus, Examination, and Settings.
   ========================================================= */

.bos-academic-page {
    --academic-primary: var(--primary-color, #3f41b5);
    --academic-primary-dark: #2f318f;
    --academic-secondary: var(--secondary-color, #10b981);
    --academic-ink: #0f172a;
    --academic-muted: #64748b;
    --academic-line: #dbe4f3;
    --academic-surface: #ffffff;
    --academic-soft: #eef4ff;
    color: var(--academic-ink);
    font-family: "Public Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.bos-academic-shell {
    display: grid;
    gap: 24px;
}

.bos-academic-hero {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    padding: 30px 34px;
    border: 1px solid rgba(219, 228, 243, 0.9);
    border-radius: 28px;
    background:
        radial-gradient(circle at 92% 18%, rgba(16, 185, 129, 0.18), transparent 28%),
        linear-gradient(135deg, rgba(63, 65, 181, 0.12), rgba(255, 255, 255, 0.96) 54%),
        #fff;
    box-shadow: 0 18px 50px rgba(15, 23, 42, 0.06);
}

.bos-academic-eyebrow {
    margin-bottom: 8px;
    color: var(--academic-primary);
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.bos-academic-heading {
    margin: 0;
    color: #092a6f;
    font-size: clamp(30px, 4vw, 56px);
    font-weight: 900;
    letter-spacing: -0.04em;
    line-height: 1.05;
}

.bos-academic-subtitle {
    max-width: 760px;
    margin: 12px 0 0;
    color: var(--academic-muted);
    font-size: 18px;
    font-weight: 650;
    line-height: 1.55;
}

.bos-academic-hero-icon {
    display: grid;
    flex: 0 0 auto;
    width: 82px;
    height: 82px;
    place-items: center;
    border-radius: 26px;
    color: #fff;
    font-size: 34px;
    background: linear-gradient(145deg, var(--academic-primary), #2563a8 72%, #0f8b75);
    box-shadow: 0 18px 35px rgba(63, 65, 181, 0.22);
}

.bos-academic-card,
.bos-academic-page .card {
    border: 1px solid rgba(219, 228, 243, 0.92) !important;
    border-radius: 28px !important;
    background: var(--academic-surface) !important;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.045) !important;
    overflow: hidden;
}

.bos-academic-page .card-body,
.bos-academic-card-body {
    padding: 30px !important;
}

.bos-academic-title,
.bos-academic-page .card-title {
    margin: 0 0 18px !important;
    color: #211b57 !important;
    font-size: 26px !important;
    font-weight: 900 !important;
    letter-spacing: -0.02em;
}

.bos-academic-page label,
.bos-academic-page .form-label {
    margin-bottom: 8px;
    color: #475569;
    font-size: 15px;
    font-weight: 850;
}

.bos-academic-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    align-items: end;
}

.bos-academic-form .mb-3 {
    margin-bottom: 0 !important;
}

.bos-academic-form .bos-academic-form-full {
    grid-column: 1 / -1;
}

.bos-academic-page .form-control,
.bos-academic-page .form-select {
    min-height: 56px;
    border: 1px solid var(--academic-line);
    border-radius: 16px;
    background-color: #f8fafc;
    color: #1f2937;
    font-size: 16px;
    font-weight: 650;
    box-shadow: none;
}

.bos-academic-page .form-control:focus,
.bos-academic-page .form-select:focus {
    border-color: var(--academic-primary);
    background-color: #fff;
    box-shadow: 0 0 0 4px rgba(63, 65, 181, 0.12);
}

.bos-academic-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

.bos-academic-page .btn,
.bos-academic-btn {
    min-height: 48px;
    padding: 12px 22px;
    border-radius: 999px;
    font-weight: 850;
    letter-spacing: -0.01em;
}

.bos-academic-page .btn-primary,
.bos-academic-btn-primary {
    border-color: transparent !important;
    background: var(--academic-primary) !important;
    color: #fff !important;
    box-shadow: 0 14px 28px rgba(63, 65, 181, 0.2);
}

.bos-academic-page .btn-success {
    border-color: transparent !important;
    background: var(--academic-secondary) !important;
    color: #063b2c !important;
}

.bos-academic-page .btn-custom {
    border-color: transparent !important;
    background: var(--academic-primary) !important;
    color: #fff !important;
}

.bos-academic-table-wrap {
    margin-top: 24px;
    border: 1px solid rgba(219, 228, 243, 0.92);
    border-radius: 26px;
    background: #fff;
    overflow-x: auto;
}

.bos-academic-page .table,
.bos-academic-table {
    margin-bottom: 0;
    color: #1f2937;
    vertical-align: middle;
}

.bos-academic-page .table thead th,
.bos-academic-table thead th {
    padding: 20px 22px;
    border-bottom: 1px solid var(--academic-line);
    background: #f8fbff;
    color: #475569;
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.bos-academic-page .table tbody td,
.bos-academic-table tbody td {
    padding: 20px 22px;
    border-color: #edf2f7;
    color: #1f2937;
    font-size: 15px;
    font-weight: 650;
}

.bos-academic-empty {
    margin: 22px 0 0;
    padding: 28px;
    border: 1px dashed rgba(100, 116, 139, 0.28);
    border-radius: 22px;
    background: #f8fafc;
    color: var(--academic-muted);
    font-weight: 750;
    text-align: center;
}

.bos-academic-results-title {
    margin: 28px 0 14px;
    color: #211b57;
    font-size: 22px;
    font-weight: 900;
}

.bos-academic-chart-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
    margin-top: 24px;
}

.bos-academic-chart-card {
    padding: 22px;
    border: 1px solid rgba(219, 228, 243, 0.92);
    border-radius: 24px;
    background: #fff;
}

.bos-academic-import-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 22px;
    align-items: center;
}

@media (max-width: 991px) {

    .bos-academic-hero,
    .bos-academic-import-panel {
        align-items: flex-start;
        grid-template-columns: 1fr;
        flex-direction: column;
    }

    .bos-academic-form,
    .bos-academic-chart-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767px) {
    .bos-academic-page {
        padding-bottom: 110px;
    }

    .bos-academic-hero,
    .bos-academic-page .card-body,
    .bos-academic-card-body {
        padding: 22px !important;
        border-radius: 24px;
    }

    .bos-academic-heading {
        font-size: 34px;
    }

    .bos-academic-subtitle {
        font-size: 15px;
    }

    .bos-academic-hero-icon {
        width: 58px;
        height: 58px;
        border-radius: 18px;
        font-size: 25px;
    }
}

/* BOS Staff Verification / Pengesahan Staf */
.bos-staff-verify-page {
    --verify-primary: #3f41b5;
    --verify-primary-dark: #2f318f;
    --verify-secondary: #10b981;
    --verify-danger: #dc2626;
    --verify-ink: #0f172a;
    --verify-heading: #211b57;
    --verify-muted: #64748b;
    --verify-line: #dbe4f3;
    --verify-soft: #f4f7ff;
    padding: 18px 8px 42px;
    color: var(--verify-ink);
    font-family: "Public Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.bos-alert {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-bottom: 22px;
    padding: 16px 20px;
    border-radius: 18px;
    font-weight: 800;
}

.bos-alert-success {
    border: 1px solid rgba(16, 185, 129, 0.26);
    background: #d1fae5;
    color: #065f46;
}

.bos-verify-hero {
    display: flex;
    gap: 24px;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 28px;
}

.bos-eyebrow {
    display: inline-flex;
    margin-bottom: 8px;
    color: var(--verify-primary);
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.bos-verify-hero h1 {
    margin: 0;
    color: #00347e;
    font-size: clamp(40px, 5vw, 72px);
    font-weight: 950;
    line-height: 0.98;
    letter-spacing: -0.05em;
}

.bos-verify-hero p {
    max-width: 780px;
    margin: 16px 0 0;
    color: var(--verify-muted);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.45;
}

.bos-verify-hero-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.bos-staff-verify-page .bos-btn {
    display: inline-flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 0 24px;
    border-radius: 999px;
    border: 1px solid transparent;
    font-weight: 900;
    text-decoration: none;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.bos-staff-verify-page .bos-btn:hover {
    transform: translateY(-1px);
    text-decoration: none;
}

.bos-staff-verify-page .bos-btn-outline {
    border-color: rgba(63, 65, 181, 0.2);
    background: #fff;
    color: var(--verify-primary-dark);
}

.bos-staff-verify-page .bos-btn-success {
    background: var(--verify-secondary);
    color: #063f2f;
    box-shadow: 0 18px 36px rgba(16, 185, 129, 0.18);
}

.bos-staff-verify-page .bos-btn-danger-outline {
    border-color: rgba(220, 38, 38, 0.9);
    background: #fff;
    color: #b91c1c;
}

.bos-verify-stats {
    display: grid;
    grid-template-columns: minmax(0, 2fr) repeat(2, minmax(220px, 1fr));
    gap: 22px;
    margin-bottom: 28px;
}

.bos-verify-stat-card {
    position: relative;
    min-height: 168px;
    padding: 30px;
    overflow: hidden;
    border: 1px solid rgba(219, 228, 243, 0.92);
    border-radius: 28px;
    background: #fff;
}

.bos-verify-stat-card span {
    display: block;
    margin-bottom: 10px;
    color: var(--verify-muted);
    font-size: 13px;
    font-weight: 950;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.bos-verify-stat-card strong {
    display: block;
    color: var(--verify-heading);
    font-size: clamp(34px, 4vw, 58px);
    font-weight: 950;
    line-height: 1.05;
    letter-spacing: -0.05em;
}

.bos-verify-stat-card p {
    max-width: 560px;
    margin: 16px 0 0;
    color: var(--verify-muted);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.55;
}

.bos-verify-stat-primary {
    background: linear-gradient(135deg, #fff 0%, #fff 58%, rgba(209, 250, 229, 0.7) 100%);
}

.bos-verify-stat-primary::after {
    content: "\F52A";
    position: absolute;
    right: 26px;
    bottom: -28px;
    color: rgba(63, 65, 181, 0.08);
    font-family: bootstrap-icons;
    font-size: 150px;
    line-height: 1;
}

.bos-verify-stat-primary>i {
    position: absolute;
    top: 28px;
    right: 28px;
    display: grid;
    width: 58px;
    height: 58px;
    place-items: center;
    border-radius: 18px;
    background: rgba(16, 185, 129, 0.14);
    color: var(--verify-secondary);
    font-size: 28px;
}

.bos-verify-list-card {
    overflow: hidden;
    border: 1px solid rgba(219, 228, 243, 0.96);
    border-radius: 30px;
    background: #fff;
}

.bos-verify-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 28px 30px;
    border-bottom: 1px solid rgba(219, 228, 243, 0.72);
}

.bos-card-title {
    display: flex;
    gap: 16px;
    align-items: center;
}

.bos-card-title h2 {
    margin: 0;
    color: var(--verify-heading);
    font-size: 26px;
    font-weight: 950;
    letter-spacing: -0.03em;
}

.bos-card-title p {
    margin: 6px 0 0;
    color: var(--verify-muted);
    font-weight: 700;
}

.bos-icon-box {
    display: grid;
    width: 54px;
    height: 54px;
    place-items: center;
    border-radius: 16px;
    background: #eef2ff;
    color: var(--verify-primary);
    font-size: 26px;
}

.bos-verify-bulk-bar {
    display: none;
    align-items: center;
    justify-content: space-between;
    padding: 18px 30px;
    background: var(--verify-primary-dark);
    color: #fff;
}

.bos-verify-bulk-bar.is-active {
    display: flex;
}

.bos-verify-bulk-bar strong {
    display: block;
    font-size: 18px;
    font-weight: 950;
}

.bos-verify-bulk-bar small {
    color: #c7d2fe;
    font-weight: 700;
}

.bos-table-responsive {
    overflow-x: auto;
}

.bos-verify-table {
    width: 100%;
    min-width: 960px;
    margin: 0;
    border-collapse: separate;
    border-spacing: 0;
}

.bos-verify-table th {
    padding: 20px 24px;
    border-bottom: 1px solid var(--verify-line);
    background: #f8fbff;
    color: #475569;
    font-size: 14px;
    font-weight: 950;
    letter-spacing: 0.06em;
    text-align: left;
    text-transform: uppercase;
}

.bos-verify-table td {
    padding: 22px 24px;
    border-bottom: 1px solid #edf2f7;
    color: #1f2937;
    font-size: 16px;
    font-weight: 700;
    vertical-align: middle;
}

.bos-verify-row {
    cursor: pointer;
    transition: background 0.18s ease;
}

.bos-verify-row:hover td,
.bos-verify-row.is-selected td {
    background: #f8fbff;
}

.bos-checkbox {
    width: 19px;
    height: 19px;
    border: 2px solid #cbd5e1;
    border-radius: 6px;
    appearance: none;
    background: #fff;
    cursor: pointer;
}

.bos-checkbox:checked {
    border-color: var(--verify-primary);
    background: var(--verify-primary);
    box-shadow: inset 0 0 0 3px #fff;
}

.bos-ref-text {
    color: #000f9f;
    font-weight: 950;
}

.bos-staff-id {
    display: inline-flex;
    padding: 8px 14px;
    border-radius: 10px;
    background: #f1f5f9;
    color: #475569;
    font-weight: 950;
}

.bos-staff-cell {
    display: flex;
    gap: 14px;
    align-items: center;
}

.bos-staff-avatar,
.bos-drawer-avatar {
    width: 48px;
    height: 48px;
    border-radius: 16px;
    object-fit: cover;
}

.bos-staff-cell strong {
    display: block;
    color: #1f2937;
    font-weight: 950;
}

.bos-staff-cell small {
    display: block;
    margin-top: 3px;
    color: var(--verify-muted);
    font-weight: 700;
}

.bos-status-pill {
    display: inline-flex;
    align-items: center;
    padding: 9px 14px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 950;
}

.bos-status-warning {
    background: #fff7ed;
    color: #c2410c;
}

.bos-icon-action {
    display: inline-grid;
    width: 48px;
    height: 48px;
    place-items: center;
    border: 1px solid rgba(219, 228, 243, 0.96);
    border-radius: 999px;
    background: #fff;
    color: var(--verify-primary);
    font-size: 20px;
    transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.bos-icon-action:hover {
    transform: translateY(-1px);
    border-color: rgba(63, 65, 181, 0.35);
    background: #eef2ff;
}

.bos-empty-state {
    display: grid;
    gap: 8px;
    place-items: center;
    padding: 46px 20px;
    color: var(--verify-muted);
    text-align: center;
}

.bos-empty-state i {
    color: #94a3b8;
    font-size: 34px;
}

.bos-empty-state strong {
    color: var(--verify-heading);
    font-size: 20px;
    font-weight: 950;
}

.bos-verify-table-footer {
    padding: 20px 30px;
    border-top: 1px solid rgba(219, 228, 243, 0.72);
    color: var(--verify-muted);
    font-size: 14px;
    font-weight: 750;
}

.bos-verify-drawer-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1090;
    background: rgba(15, 23, 42, 0.48);
    backdrop-filter: blur(7px);
}

.bos-verify-drawer {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 1100;
    display: flex;
    flex-direction: column;
    width: min(420px, 100vw);
    height: 100vh;
    background: #eef3ff;
    box-shadow: -28px 0 80px rgba(15, 23, 42, 0.22);
    transform: translateX(105%);
    transition: transform 0.26s ease;
}

.bos-verify-drawer.is-open {
    transform: translateX(0);
}

.bos-drawer-open {
    overflow: hidden;
}

.bos-verify-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 92px;
    padding: 24px 30px;
    background: var(--verify-primary-dark);
    color: #fff;
}

.bos-verify-drawer-header h2 {
    display: flex;
    gap: 12px;
    align-items: center;
    margin: 0;
    font-size: 24px;
    font-weight: 950;
}

.bos-drawer-close {
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    font-size: 22px;
}

.bos-verify-drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: 26px;
}

.bos-verify-staff-summary,
.bos-verify-info-grid,
.bos-document-preview {
    border: 1px solid rgba(219, 228, 243, 0.96);
    border-radius: 24px;
    background: #fff;
}

.bos-verify-staff-summary {
    display: flex;
    gap: 14px;
    align-items: center;
    padding: 18px;
    margin-bottom: 16px;
}

.bos-verify-staff-summary span,
.bos-verify-info-grid span {
    display: block;
    color: var(--verify-muted);
    font-size: 12px;
    font-weight: 950;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.bos-verify-staff-summary strong {
    display: block;
    margin-top: 4px;
    color: var(--verify-heading);
    font-size: 19px;
    font-weight: 950;
}

.bos-verify-staff-summary small {
    color: var(--verify-muted);
    font-weight: 750;
}

.bos-verify-info-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    overflow: hidden;
    margin-bottom: 16px;
    background: var(--verify-line);
}

.bos-verify-info-grid>div {
    min-width: 0;
    padding: 16px;
    background: #fff;
}

.bos-verify-info-grid strong {
    display: block;
    overflow: hidden;
    margin-top: 6px;
    color: #1f2937;
    font-weight: 850;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bos-document-preview {
    position: relative;
    overflow: hidden;
    padding: 32px 28px;
}

.bos-document-watermark {
    position: absolute;
    top: 52%;
    left: 50%;
    color: rgba(15, 23, 42, 0.04);
    font-size: 58px;
    font-weight: 950;
    letter-spacing: 0.12em;
    pointer-events: none;
    transform: translate(-50%, -50%) rotate(-28deg);
}

.bos-document-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding-bottom: 22px;
    border-bottom: 3px solid #d8d9ff;
}

.bos-document-logo {
    display: grid;
    width: 72px;
    height: 72px;
    place-items: center;
    border-radius: 8px;
    background: #dfe8ff;
    color: #000f9f;
    font-size: 32px;
}

.bos-document-top>div:last-child {
    text-align: right;
}

.bos-document-top strong {
    display: block;
    color: #0f172a;
    font-size: 18px;
    font-weight: 950;
}

.bos-document-top span {
    color: var(--verify-muted);
    font-size: 13px;
    font-weight: 850;
    letter-spacing: 0.08em;
}

.bos-document-preview h3 {
    margin: 30px 0 26px;
    color: #000f9f;
    font-size: 21px;
    font-weight: 850;
    text-align: center;
    text-decoration: underline;
}

.bos-document-meta {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 14px 18px;
    margin: 0 0 24px;
}

.bos-document-meta dt {
    color: #0f172a;
    font-size: 13px;
    font-weight: 950;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.bos-document-meta dd {
    margin: 0;
    color: #334155;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.06em;
}

.bos-document-preview p {
    margin: 0 0 28px;
    padding-top: 22px;
    border-top: 1px dashed #cbd5e1;
    color: #334155;
    font-size: 15px;
    font-weight: 650;
    line-height: 1.8;
    text-align: justify;
}

.bos-document-stamp {
    display: grid;
    width: 132px;
    height: 132px;
    place-items: center;
    margin-left: auto;
    border: 1px solid #dbe4f3;
    color: #9ca3af;
}

.bos-document-stamp i {
    font-size: 34px;
}

.bos-document-stamp span {
    margin-top: -20px;
    font-size: 12px;
    font-style: italic;
}

.bos-verify-drawer-footer {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    padding: 22px 26px;
    border-top: 1px solid rgba(219, 228, 243, 0.96);
    background: #fff;
}

@media (max-width: 1200px) {
    .bos-verify-stats {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767px) {
    .bos-staff-verify-page {
        padding-bottom: 120px;
    }

    .bos-verify-hero {
        flex-direction: column;
    }

    .bos-verify-hero h1 {
        font-size: 42px;
    }

    .bos-verify-hero p {
        font-size: 16px;
    }

    .bos-verify-card-header,
    .bos-verify-bulk-bar {
        align-items: flex-start;
        flex-direction: column;
        gap: 18px;
    }

    .bos-card-title {
        align-items: flex-start;
    }

    .bos-verify-drawer {
        width: 100vw;
    }

    .bos-verify-info-grid,
    .bos-verify-drawer-footer {
        grid-template-columns: 1fr;
    }
}

/* BOS Finance Payslip / Slip Gaji Archive */
.bos-finance-payslip-page {
    --finance-primary: #3f41b5;
    --finance-primary-dark: #2f318f;
    --finance-secondary: #10b981;
    --finance-ink: #0f172a;
    --finance-heading: #211b57;
    --finance-muted: #64748b;
    --finance-line: #dbe4f3;
    --finance-soft: #f4f7ff;
    padding: 18px 8px 44px;
    color: var(--finance-ink);
    font-family: "Public Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.bos-finance-hero {
    display: flex;
    gap: 28px;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 26px;
}

.bos-finance-breadcrumb {
    display: inline-flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 10px;
    color: var(--finance-muted);
    font-size: 14px;
    font-weight: 750;
}

.bos-finance-breadcrumb strong {
    color: #000f9f;
    font-weight: 900;
}

.bos-finance-hero h1 {
    margin: 0;
    color: #00347e;
    font-size: clamp(42px, 5vw, 72px);
    font-weight: 950;
    line-height: 0.98;
    letter-spacing: -0.055em;
}

.bos-finance-hero p {
    max-width: 840px;
    margin: 18px 0 0;
    color: var(--finance-muted);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.5;
}

.bos-finance-trust-card {
    display: grid;
    grid-template-columns: repeat(2, minmax(150px, 1fr));
    min-width: 430px;
    overflow: hidden;
    border: 1px solid rgba(219, 228, 243, 0.9);
    border-radius: 999px;
    background: #fff;
}

.bos-finance-trust-card span {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
    padding: 18px 22px;
    color: var(--finance-ink);
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 0.02em;
}

.bos-finance-trust-card span:first-child {
    margin: 8px;
    border-radius: 999px;
    background: var(--finance-primary-dark);
    color: #fff;
}

.bos-finance-toolbar {
    display: flex;
    gap: 22px;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 22px;
    padding: 24px 28px;
    border: 1px solid rgba(219, 228, 243, 0.9);
    border-radius: 28px;
    background: #fff;
}

.bos-finance-years {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}

.bos-finance-years>span {
    color: var(--finance-muted);
    font-size: 13px;
    font-weight: 950;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.bos-year-chip {
    min-width: 82px;
    height: 42px;
    border: 0;
    border-radius: 999px;
    background: #dfe9ff;
    color: #1f2a44;
    font-weight: 850;
}

.bos-year-chip.is-active {
    background: var(--finance-primary);
    color: #fff;
    box-shadow: 0 16px 30px rgba(63, 65, 181, 0.18);
}

.bos-finance-toolbar-meta {
    display: flex;
    gap: 18px;
    align-items: center;
    padding-left: 30px;
    border-left: 1px solid var(--finance-line);
}

.bos-finance-toolbar-meta span {
    display: block;
    color: var(--finance-muted);
    font-size: 13px;
    font-weight: 800;
}

.bos-finance-toolbar-meta strong {
    display: block;
    margin-top: 4px;
    color: #000f9f;
    font-size: 18px;
    font-weight: 900;
}

.bos-finance-toolbar-meta>i {
    display: grid;
    width: 58px;
    height: 58px;
    place-items: center;
    border-radius: 16px;
    background: #6ee7b7;
    color: #047857;
    font-size: 28px;
}

.bos-finance-action-row {
    display: flex;
    gap: 18px;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 28px;
}

.bos-finance-search {
    position: relative;
    flex: 1;
    max-width: 640px;
}

.bos-finance-search i {
    position: absolute;
    top: 50%;
    left: 24px;
    color: #94a3b8;
    font-size: 25px;
    transform: translateY(-50%);
}

.bos-finance-search input {
    width: 100%;
    min-height: 62px;
    padding: 0 24px 0 68px;
    border: 1px solid rgba(219, 228, 243, 0.96);
    border-radius: 999px;
    background: #fff;
    color: #1f2937;
    font-size: 18px;
    font-weight: 750;
    outline: none;
}

.bos-finance-search input:focus {
    border-color: rgba(63, 65, 181, 0.45);
    box-shadow: 0 0 0 5px rgba(63, 65, 181, 0.08);
}

.bos-finance-primary-btn,
.bos-finance-secondary-btn,
.bos-finance-danger-btn {
    display: inline-flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
    min-height: 56px;
    padding: 0 26px;
    border-radius: 999px;
    border: 0;
    font-weight: 950;
    text-decoration: none;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.bos-finance-primary-btn {
    background: var(--finance-primary-dark);
    color: #fff;
    box-shadow: 0 18px 38px rgba(63, 65, 181, 0.18);
}

.bos-finance-primary-btn:hover,
.bos-finance-secondary-btn:hover,
.bos-finance-danger-btn:hover {
    transform: translateY(-1px);
    text-decoration: none;
}

.bos-finance-secondary-btn {
    border: 1px solid rgba(63, 65, 181, 0.28);
    background: #fff;
    color: var(--finance-primary-dark);
}

.bos-finance-danger-btn {
    background: #dc2626;
    color: #fff;
}

.bos-finance-danger-btn:disabled {
    cursor: not-allowed;
    opacity: 0.45;
    transform: none;
}

.bos-finance-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 24px;
    align-items: start;
}

.bos-finance-section-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 18px;
}

.bos-finance-section-heading span {
    color: var(--finance-primary);
    font-size: 13px;
    font-weight: 950;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.bos-finance-section-heading h2 {
    margin: 6px 0 0;
    color: var(--finance-ink);
    font-size: 30px;
    font-weight: 900;
    letter-spacing: -0.03em;
}

.bos-finance-view-toggle {
    display: flex;
    gap: 14px;
    color: var(--finance-muted);
    font-size: 24px;
}

.bos-payslip-card-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
    margin-bottom: 28px;
}

.bos-payslip-card {
    overflow: hidden;
    border: 1px solid rgba(219, 228, 243, 0.92);
    border-radius: 26px;
    background: #fff;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.04);
}

.bos-payslip-preview {
    position: relative;
    display: grid;
    min-height: 190px;
    place-items: center;
    overflow: hidden;
    background: linear-gradient(135deg, #dfe9ff 0%, #eef4ff 100%);
}

.bos-payslip-preview::before {
    content: "BOS";
    position: absolute;
    color: rgba(63, 65, 181, 0.08);
    font-size: 78px;
    font-weight: 950;
    letter-spacing: 0.1em;
}

.bos-payslip-paper {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 10px;
    width: 88px;
    height: 118px;
    padding: 20px 14px;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 16px 28px rgba(15, 23, 42, 0.16);
    transform: rotate(-4deg);
}

.bos-payslip-paper span {
    height: 8px;
    border-radius: 999px;
    background: #d8d9ff;
}

.bos-payslip-paper span:nth-child(2) {
    width: 76%;
    background: #e5e7eb;
}

.bos-payslip-paper span:nth-child(3) {
    width: 58%;
    background: #e5e7eb;
}

.bos-payslip-badge {
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 1;
    padding: 7px 13px;
    border-radius: 999px;
    background: #873a00;
    color: #fff;
    font-size: 12px;
    font-weight: 950;
}

.bos-payslip-body {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    justify-content: space-between;
    padding: 24px 24px 12px;
}

.bos-payslip-body h3 {
    margin: 0;
    color: var(--finance-ink);
    font-size: 22px;
    font-weight: 900;
}

.bos-payslip-body p {
    margin: 8px 0 0;
    color: var(--finance-muted);
    font-weight: 750;
}

.bos-payslip-verified {
    display: grid;
    width: 28px;
    height: 28px;
    place-items: center;
    color: #047857;
    font-size: 22px;
}

.bos-payslip-meta {
    display: flex;
    justify-content: space-between;
    margin: 0 24px;
    padding: 18px 0;
    border-top: 1px solid #edf2f7;
    color: #475569;
    font-size: 14px;
    font-weight: 800;
}

.bos-payslip-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 10px;
    padding: 0 24px 24px;
}

.bos-payslip-view,
.bos-payslip-icon-btn {
    display: inline-flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    border: 0;
    border-radius: 14px;
    font-weight: 950;
    text-decoration: none;
}

.bos-payslip-view {
    background: #dbeafe;
    color: #000f9f;
}

.bos-payslip-icon-btn {
    width: 48px;
    background: var(--finance-primary);
    color: #fff;
}

.bos-payslip-icon-btn:last-child {
    background: #fff1f2;
    color: #dc2626;
}

.bos-finance-table-card,
.bos-finance-empty,
.bos-finance-security-card,
.bos-finance-summary-card {
    border: 1px solid rgba(219, 228, 243, 0.92);
    border-radius: 28px;
    background: #fff;
}

.bos-finance-empty {
    display: grid;
    gap: 10px;
    place-items: center;
    min-height: 260px;
    color: var(--finance-muted);
    text-align: center;
}

.bos-finance-empty i {
    color: var(--finance-primary);
    font-size: 44px;
}

.bos-finance-empty strong {
    color: var(--finance-heading);
    font-size: 22px;
    font-weight: 950;
}

.bos-finance-table-card {
    overflow: hidden;
}

.bos-finance-table-header {
    display: flex;
    gap: 18px;
    align-items: center;
    justify-content: space-between;
    padding: 24px 28px;
    border-bottom: 1px solid rgba(219, 228, 243, 0.86);
}

.bos-finance-table-header h2 {
    margin: 0;
    color: var(--finance-heading);
    font-size: 25px;
    font-weight: 950;
}

.bos-finance-table-header p {
    margin: 6px 0 0;
    color: var(--finance-muted);
    font-weight: 700;
}

.bos-finance-table {
    width: 100%;
    min-width: 980px;
    margin: 0;
    border-collapse: separate;
    border-spacing: 0;
}

.bos-finance-table th {
    padding: 19px 22px;
    border-bottom: 1px solid var(--finance-line);
    background: #f8fbff;
    color: #475569;
    font-size: 14px;
    font-weight: 950;
    letter-spacing: 0.06em;
    text-align: left;
    text-transform: uppercase;
}

.bos-finance-table td {
    padding: 20px 22px;
    border-bottom: 1px solid #edf2f7;
    color: #1f2937;
    font-size: 14px;
    font-weight: 750;
    vertical-align: middle;
}

.bos-finance-file-cell {
    display: flex;
    gap: 12px;
    align-items: center;
}

.bos-finance-file-cell span {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border-radius: 14px;
    background: #eef2ff;
    color: var(--finance-primary);
    font-size: 21px;
}

.bos-finance-file-cell strong {
    color: #1f2937;
    font-weight: 900;
}

.bos-finance-row-actions {
    display: flex;
    gap: 10px;
    align-items: center;
}

.bos-finance-side {
    display: grid;
    gap: 22px;
}

.bos-finance-security-card {
    padding: 28px;
    background: linear-gradient(135deg, #23364f 0%, #0f172a 100%);
    color: #fff;
}

.bos-finance-security-card>span {
    display: grid;
    width: 54px;
    height: 54px;
    place-items: center;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.1);
    color: #dbeafe;
    font-size: 24px;
}

.bos-finance-security-card h3,
.bos-finance-summary-card h3 {
    margin: 22px 0 12px;
    font-size: 24px;
    font-weight: 950;
}

.bos-finance-security-card p {
    margin: 0 0 24px;
    color: #cbd5e1;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.6;
}

.bos-finance-security-card a {
    display: inline-flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 54px;
    border-radius: 14px;
    background: #c7d2fe;
    color: #000f9f;
    font-weight: 950;
    text-decoration: none;
}

.bos-finance-summary-card {
    display: grid;
    grid-template-columns: 86px minmax(0, 1fr);
    gap: 24px;
    align-items: center;
    padding: 28px;
}

.bos-summary-icon {
    display: grid;
    width: 86px;
    height: 86px;
    place-items: center;
    border: 6px solid #e0e7ff;
    border-radius: 999px;
    color: var(--finance-primary);
    font-size: 31px;
}

.bos-finance-summary-card p {
    margin: 0;
    color: var(--finance-muted);
    font-weight: 700;
    line-height: 1.55;
}

.bos-summary-metrics {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 18px;
}

.bos-summary-metrics span {
    display: grid;
    gap: 3px;
    padding: 12px 16px;
    border-radius: 12px;
    background: #dfe9ff;
}

.bos-summary-metrics small {
    color: var(--finance-muted);
    font-size: 11px;
    font-weight: 950;
    text-transform: uppercase;
}

.bos-summary-metrics strong {
    color: #000f9f;
    font-size: 18px;
    font-weight: 950;
}

.bos-finance-pagination {
    margin-top: 22px;
}

.bos-finance-modal {
    border: 0;
    border-radius: 24px;
    overflow: hidden;
}

.bos-finance-modal .modal-header,
.bos-finance-modal .modal-footer {
    border-color: #edf2f7;
}

.bos-finance-modal .modal-title {
    color: var(--finance-heading);
    font-weight: 950;
}

@media (max-width: 1400px) {
    .bos-payslip-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .bos-finance-grid {
        grid-template-columns: 1fr;
    }

    .bos-finance-side {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 991px) {

    .bos-finance-hero,
    .bos-finance-toolbar,
    .bos-finance-action-row {
        align-items: stretch;
        flex-direction: column;
    }

    .bos-finance-trust-card {
        min-width: 0;
        width: 100%;
    }

    .bos-finance-toolbar-meta {
        justify-content: space-between;
        padding-left: 0;
        padding-top: 18px;
        border-left: 0;
        border-top: 1px solid var(--finance-line);
    }
}

@media (max-width: 767px) {
    .bos-finance-payslip-page {
        padding-bottom: 120px;
    }

    .bos-finance-hero h1 {
        font-size: 42px;
    }

    .bos-finance-hero p {
        font-size: 16px;
    }

    .bos-finance-trust-card,
    .bos-payslip-card-grid,
    .bos-finance-side {
        grid-template-columns: 1fr;
    }

    .bos-finance-table-header,
    .bos-finance-section-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .bos-finance-summary-card {
        grid-template-columns: 1fr;
    }
}

/*--------------------------------------------------------------
# BOS Sidebar Restructuring Styles (Batch 2)
--------------------------------------------------------------*/

/* Topbar Header Spacing Adjustments */
.header {
    display: none !important;
}

@media (min-width: 1200px) {

    #main,
    .main {
        margin-top: 0 !important;
        padding-top: 30px !important;
    }
}

@media (max-width: 1199px) {

    #main,
    .main {
        padding-top: 30px !important;
        /* Top space for floating mobile menu button */
    }
}

/* Sidebar Profile Card Positioning */
.sidebar .sidebar-profile-card {
    margin-top: 0px !important;
    margin-bottom: 20px !important;
    padding: 12px !important;
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.05) !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.02) !important;
}

/* Sidebar Notifications Dropdown Menu Layout */
.sidebar-bell-dropdown {
    position: relative;
    margin-bottom: 16px;
    padding: 0 8px;
}

.sidebar-bell-btn {
    display: flex !important;
    align-items: center !important;
    padding: 12px 18px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #4b5563 !important;
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.05) !important;
    border-radius: 9999px !important;
    transition: all 0.25s ease !important;
    text-decoration: none !important;
    width: 100%;
}

.sidebar-bell-btn:hover {
    background: rgba(59, 66, 196, 0.08) !important;
    color: #3b42c4 !important;
    border-color: rgba(59, 66, 196, 0.2) !important;
}

.sidebar-bell-content {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 12px;
}

.sidebar-bell-icon-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.sidebar-bell-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    font-size: 9px;
    font-weight: 800;
    color: #ffffff;
    background-color: #dc2626;
    border-radius: 50%;
    padding: 2px 5px;
    line-height: 1;
}

.sidebar-bell-text {
    font-size: 14px;
    font-weight: 600;
}

.sidebar-bell-chevron {
    font-size: 12px;
    color: #9ca3af;
}

/* Positioning dropdown menus inside the fixed sidebar viewport */
.sidebar .dropdown-menu.notifications {
    position: absolute;
    z-index: 10000 !important;
    margin-top: 8px !important;
    width: 320px !important;
    max-height: 480px;
    overflow-y: auto;
    border: 1px solid rgba(63, 65, 181, 0.15);
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.15);
}

@media (max-width: 575px) {
    .sidebar .dropdown-menu.notifications {
        width: 280px !important;
    }
}

/* Sidebar Language Switcher Custom Styling */
.sidebar-language-switcher-wrapper {
    margin-bottom: 24px;
    padding: 0 8px;
}

.sidebar-language-switcher-wrapper .sidebar-language-switcher {
    margin-left: 0 !important;
    display: flex !important;
    width: 100% !important;
    border-radius: 9999px !important;
    background: #ffffff !important;
}

.sidebar-language-switcher-wrapper .sidebar-language-switcher a {
    flex: 1 !important;
    text-align: center !important;
    padding: 10px 12px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    border-radius: 9999px !important;
}

/* Ensure language switcher works on mobile inside the sidebar wrapper */
@media (max-width: 1199px) {
    .sidebar-language-switcher-wrapper .sidebar-language-switcher {
        display: flex !important;
        margin-left: 0 !important;
        background: #ffffff !important;
        border: 1px solid rgba(63, 65, 181, 0.28) !important;
        border-radius: 9999px !important;
        box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06) !important;
    }

    .sidebar-language-switcher-wrapper .sidebar-language-switcher a {
        color: var(--bos-primary) !important;
    }

    .sidebar-language-switcher-wrapper .sidebar-language-switcher a.active {
        background: var(--bos-primary) !important;
        color: #ffffff !important;
    }
}

/* Premium Unified Page Header & Breadcrumbs Styles */
.bos-page-header {
    margin-bottom: 24px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    padding-bottom: 18px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.bos-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: #6b7280;
    font-family: 'Public Sans', sans-serif;
}

.bos-breadcrumb-item {
    display: inline-flex;
    align-items: center;
}

.bos-breadcrumb-item a {
    color: #3b42c4;
    text-decoration: none;
    transition: color 0.15s ease;
}

.bos-breadcrumb-item a:hover {
    color: #1e3a8a;
    text-decoration: underline;
}

.bos-breadcrumb-item.active {
    color: #1f2937;
    font-weight: 700;
}

.bos-breadcrumb-separator {
    color: #9ca3af;
    margin: 0 8px;
    user-select: none;
    font-weight: 500;
}

.bos-page-title {
    margin: 0;
    font-size: 28px;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.2;
    letter-spacing: -0.02em;
    font-family: 'Public Sans', sans-serif;
}

/* Global Filter Card Design Standard */
.filter-card {
    background: #fff;
    border: 1px solid #e9eef8;
    border-radius: 16px;
    padding: 24px;
    box-shadow: none;
    margin-bottom: 24px;
}

.filter-row {
    display: flex;
    gap: 20px;
    align-items: flex-end;
    flex-wrap: wrap;
}

.filter-group {
    flex: 1;
    min-width: 200px;
}

.filter-group.search-group {
    flex: 2;
    position: relative;
}

.filter-group.search-group .search-icon {
    position: absolute;
    left: 16px;
    top: calc(50% + 11px);
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: 18px;
    line-height: 1;
    pointer-events: none;
}

.filter-label {
    display: block;
    color: #475569;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 8px;
}

.filter-input {
    width: 100%;
    height: 40px;
    padding: 8px 16px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font-size: 14px;
    transition: all 0.15s ease;
}

.filter-input:focus {
    outline: none;
    border-color: #3b42c4;
    box-shadow: 0 0 0 3px rgba(59, 66, 196, 0.1);
}

/* Hide legacy academic hero headers on standardized views */
.bos-page-header~* .bos-academic-hero,
.bos-page-header~.bos-academic-hero,
.bos-page-header+* .bos-academic-hero,
.bos-page-header+.bos-academic-hero {
    display: none !important;
}

/* Hide legacy card titles / breadcrumbs when standardized header is active */
.bos-page-header~* .bos-finance-breadcrumb,
.bos-page-header~.bos-finance-breadcrumb,
.bos-page-header~* .wallet-breadcrumb,
.bos-page-header~.wallet-breadcrumb,
.bos-page-header~* nav[aria-label="breadcrumb"] {
    display: none !important;
}

/* Custom layout adjustments for verify_staff secondary action bar */
.bos-verify-hero-secondary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.bos-hero-description {
    margin: 0;
    color: #4b5563;
    font-size: 15px;
    font-weight: 550;
    line-height: 1.5;
}

.bos-hero-actions {
    display: flex;
    gap: 12px;
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .bos-page-title {
        font-size: 22px;
    }

    .bos-verify-hero-secondary {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .bos-hero-actions {
        width: 100%;
    }

    .bos-hero-actions .bos-btn {
        width: 100%;
    }
}

/* ==========================================================================
   BATCH 4 — TABLE & BUTTON DESIGN STANDARDIZATION
   ========================================================================== */

/* 1. Global Cards & List Card Standardization */
#main .card,
.bos-academic-card,
.bos-verify-list-card,
.table-card {
    overflow: hidden !important;
    border: 1px solid rgba(219, 228, 243, 0.96) !important;
    border-radius: 30px !important;
    background: #fff !important;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.045) !important;
}

#main .card-body,
.bos-academic-card-body,
.bos-verify-list-card .card-body {
    padding: 30px !important;
}

/* 2. Global Tables & cell styling to match reference HR Staff Verification design */
#main table,
#main .table,
.bos-academic-table,
.bos-verify-table,
#staffTable {
    width: 100% !important;
    margin: 0 !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    background: #fff !important;
    border: none !important;
}

/* th styling */
#main table thead th,
#main table th,
#main .table thead th,
#main .table th,
.bos-academic-table thead th,
.bos-academic-table th,
.bos-verify-table th,
#staffTable th {
    padding: 20px 24px !important;
    border-bottom: 1px solid rgba(219, 228, 243, 0.72) !important;
    background: #f8fbff !important;
    color: #475569 !important;
    font-size: 14px !important;
    line-height: 1.3 !important;
    font-weight: 950 !important;
    letter-spacing: 0.06em !important;
    text-align: left !important;
    text-transform: uppercase !important;
}

/* td styling — Global Data Table Typography Standard (task): 14px body
   text, matching the th rule directly above (was 16px here, an
   inconsistent pair since this selector already covers nearly every
   normal Kunos data table — #main table / #main .table apply to any
   table/.table rendered inside the app shell; PDF/print/email views never
   render inside #main, so they were never affected by this rule and stay
   unaffected by this change too). */
#main table tbody td,
#main table td,
#main .table tbody td,
#main .table td,
.bos-academic-table tbody td,
.bos-academic-table td,
.bos-verify-table td,
#staffTable td {
    padding: 22px 24px !important;
    border-bottom: 1px solid #edf2f7 !important;
    border-top: none !important;
    color: #1f2937 !important;
    font-size: 14px !important;
    line-height: 1.45 !important;
    font-weight: 700 !important;
    vertical-align: middle !important;
    background: #fff !important;
}

/* row hover states */
#main table tbody tr:hover td,
#main table tr:hover td,
#main .table tbody tr:hover td,
#main .table tr:hover td,
.bos-academic-table tbody tr:hover td,
.bos-academic-table tr:hover td,
.bos-verify-row:hover td,
#staffTable tbody tr:hover td,
#staffTable tr:hover td {
    background: #f8fbff !important;
}

/* Responsive Table Wrapper */
#main .table-responsive,
.bos-academic-table-wrap,
.table-responsive {
    overflow-x: auto !important;
    border: 1px solid rgba(219, 228, 243, 0.96) !important;
    border-radius: 30px !important;
    background: #fff !important;
    margin-top: 24px !important;
}

/* 3. Search/Filter Area form controls styling */
#main .form-control,
#main .form-select {
    border: 1px solid #cbd5e1 !important;
    border-radius: 12px !important;
    min-height: 52px !important;
    padding: 10px 16px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #1e293b !important;
    background-color: #ffffff !important;
    box-shadow: none !important;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !important;
}

#main .form-control:focus,
#main .form-select:focus {
    border-color: #3b42c4 !important;
    box-shadow: 0 0 0 4px rgba(59, 66, 196, 0.12) !important;
    background-color: #ffffff !important;
    outline: 0 !important;
}

/* 4. Action Buttons styling mapped to reference bos-btn */
#main .btn-primary,
.bos-academic-btn-primary,
.bos-btn-primary {
    display: inline-flex !important;
    gap: 8px !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 48px !important;
    padding: 0 24px !important;
    border-radius: 999px !important;
    font-weight: 900 !important;
    text-decoration: none !important;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease !important;
    background: #3b42c4 !important;
    color: #ffffff !important;
    border-color: transparent !important;
    box-shadow: 0 10px 24px rgba(59, 66, 196, 0.18) !important;
}

#main .btn-primary:hover,
.bos-academic-btn-primary:hover,
.bos-btn-primary:hover {
    background: #1e3a8a !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 12px 28px rgba(30, 58, 138, 0.25) !important;
}

/* Outline button version */
#main .btn-outline-primary,
#main .btn-outline,
.bos-btn-outline {
    display: inline-flex !important;
    gap: 8px !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 48px !important;
    padding: 0 24px !important;
    border-radius: 999px !important;
    font-weight: 900 !important;
    text-decoration: none !important;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease !important;
    background: #ffffff !important;
    color: #3b42c4 !important;
    border: 1px solid rgba(59, 66, 196, 0.2) !important;
}

#main .btn-outline-primary:hover,
#main .btn-outline:hover,
.bos-btn-outline:hover {
    background: rgba(59, 66, 196, 0.08) !important;
    color: #3b42c4 !important;
    transform: translateY(-1px) !important;
}

/*--------------------------------------------------------------
# Sidebar Controls Row (Language Switcher + Notification Bell Side-by-Side)
--------------------------------------------------------------*/
.sidebar-controls-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 24px;
    padding: 0 8px;
    width: 100%;
}

.sidebar-controls-row .sidebar-language-switcher-wrapper {
    flex-grow: 1;
    margin-bottom: 0 !important;
    padding: 0 !important;
}

.sidebar-controls-row .sidebar-language-switcher {
    border: 1px solid rgba(0, 0, 0, 0.05) !important;
}

.sidebar-controls-row .sidebar-bell-dropdown {
    margin-bottom: 0 !important;
    padding: 0 !important;
    flex-shrink: 0;
}

.sidebar-controls-row .sidebar-bell-btn {
    width: 42px !important;
    height: 42px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    border: 1px solid rgba(0, 0, 0, 0.05) !important;
    background: #ffffff !important;
    color: #4b5563 !important;
    position: relative;
    transition: all 0.25s ease !important;
}

.sidebar-controls-row .sidebar-bell-btn:hover {
    background: rgba(59, 66, 196, 0.08) !important;
    color: #3b42c4 !important;
    border-color: rgba(59, 66, 196, 0.2) !important;
}

.sidebar-controls-row .sidebar-bell-icon-wrapper {
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sidebar-controls-row .sidebar-bell-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    font-size: 9px;
    font-weight: 800;
    color: #ffffff;
    background-color: #dc2626;
    border-radius: 50%;
    padding: 2px 5px;
    line-height: 1;
}

/* Position dropdown correctly when opened from sidebar button */
.sidebar-controls-row .dropdown-menu.notifications {
    position: absolute;
    z-index: 10000 !important;
    margin-top: 8px !important;
    width: 320px !important;
    max-height: 480px;
    overflow-y: auto;
    border: 1px solid rgba(63, 65, 181, 0.15);
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.15);
}

@media (max-width: 575px) {
    .sidebar-controls-row .dropdown-menu.notifications {
        width: 280px !important;
    }
}

/*--------------------------------------------------------------
# BATCH 2 — PROFILE PAGE UI FIX
--------------------------------------------------------------*/
#profile-edit .custom-select {
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    height: auto !important;
    position: relative !important;
    display: block !important;
    margin-top: 0 !important;
}

/* Custom Dropdown Styling for Profile Page */
.profile-custom-select-wrapper {
    position: relative;
    width: 100%;
    margin-top: 5px;
}

.profile-custom-select-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 42px;
    padding: 8px 16px;
    background: #ffffff;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    color: #1f2937;
    transition: all 0.2s ease;
}

.profile-custom-select-trigger:hover {
    border-color: #7c3aed;
    /* Premium purple hover */
}

.profile-custom-select-trigger.open {
    border-color: #7c3aed;
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.15);
}

.profile-custom-select-left {
    display: flex;
    align-items: center;
    gap: 10px;
    overflow: hidden;
}

.profile-custom-select-icon {
    color: #7c3aed;
    /* Purple icon */
    font-size: 16px;
    display: flex;
    align-items: center;
}

.profile-custom-select-text {
    font-weight: 500;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.profile-custom-select-arrow {
    color: #6b7280;
    font-size: 12px;
    transition: transform 0.2s ease;
    display: flex;
    align-items: center;
}

.profile-custom-select-trigger.open .profile-custom-select-arrow {
    transform: rotate(180deg);
}

.profile-custom-select-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    z-index: 1000;
    max-height: 240px;
    overflow-y: auto;
    display: none;
    padding: 6px;
}

.profile-custom-select-dropdown.show {
    display: block;
}

/* Custom Scrollbar for Dropdown */
.profile-custom-select-dropdown::-webkit-scrollbar {
    width: 6px;
}

.profile-custom-select-dropdown::-webkit-scrollbar-track {
    background: transparent;
}

.profile-custom-select-dropdown::-webkit-scrollbar-thumb {
    background: rgba(124, 58, 237, 0.3);
    border-radius: 3px;
}

.profile-custom-select-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    font-size: 14px;
    color: #4b5563;
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.15s ease;
    margin-bottom: 2px;
}

.profile-custom-select-option:last-child {
    margin-bottom: 0;
}

.profile-custom-select-option:hover {
    background-color: #f5f3ff;
    /* Light purple bg on hover */
    color: #7c3aed;
}

.profile-custom-select-option-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.profile-custom-select-option-icon {
    font-size: 14px;
    color: #9ca3af;
}

.profile-custom-select-option:hover .profile-custom-select-option-icon {
    color: #7c3aed;
}

/* Selected item highlighted in purple */
.profile-custom-select-option.selected {
    background-color: #7c3aed !important;
    /* Premium purple */
    color: #ffffff !important;
}

.profile-custom-select-option.selected .profile-custom-select-option-icon {
    color: #ffffff !important;
}

.profile-custom-select-option-check {
    display: none;
    font-size: 16px;
    color: #ffffff;
}

.profile-custom-select-option.selected .profile-custom-select-option-check {
    display: block;
}

/* Rounded Cancel buttons on Profile page */
.profile .cancel-all-btn,
.profile .cancel-tentang-btn,
.profile #cancel-tentang-btn {
    border-radius: 999px !important;
}

.profile .cancel-all-btn {
    display: inline-flex !important;
    gap: 8px !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 48px !important;
    padding: 0 24px !important;
    font-weight: 900 !important;
    text-decoration: none !important;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease !important;
}

/* BosPopup Success Styling */
.bos-popup-progress.bos-popup-success {
    background: #10b981 !important;
    /* Green progress ring */
}

.bos-popup-progress.bos-popup-success strong {
    color: #10b981 !important;
    /* Green checkmark icon */
    font-size: 40px !important;
}

/* BosPopup Error Styling */
.bos-popup-progress.bos-popup-error {
    background: #ef4444 !important;
    /* Red progress ring */
}

.bos-popup-progress.bos-popup-error strong {
    color: #ef4444 !important;
    /* Red exclamation icon */
    font-size: 40px !important;
}

/* BosPopup Warning Styling */
.bos-popup-progress.bos-popup-warning {
    background: #f59e0b !important;
    /* Yellow/Orange progress ring */
}

.bos-popup-progress.bos-popup-warning strong {
    color: #f59e0b !important;
    /* Yellow/Orange exclamation icon */
    font-size: 40px !important;
}

/*--------------------------------------------------------------
# BATCH 3 — SIDEBAR LAYOUT AND NOTIFICATION PANEL
--------------------------------------------------------------*/

/* Compact Premium Sidebar spacing to reduce wasted space */
.sidebar {
    padding: 20px 14px !important;
}

.sidebar-logo {
    padding: 0 4px 16px 4px !important;
    margin-bottom: 16px !important;
}

.sidebar-logo-bar {
    gap: 8px !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.sidebar-brand-block {
    min-width: 0;
    flex-grow: 1;
}

.sidebar-brand-title {
    font-size: 22px !important;
    /* Slightly smaller for fitting language switcher */
}

.sidebar-brand-subtitle {
    font-size: 11px !important;
}

.sidebar-nav .nav-item {
    margin-bottom: 4px !important;
}

.sidebar-nav .nav-link {
    padding: 10px 14px !important;
    font-size: 14px !important;
    gap: 10px !important;
}

.sidebar-nav .nav-content {
    padding: 4px 0 4px 28px !important;
}

.sidebar-nav .nav-content a {
    padding: 6px 10px !important;
    font-size: 13px !important;
}

/* Compact logo-bar language switcher styling */
.sidebar-logo-bar .sidebar-language-switcher-wrapper {
    margin-bottom: 0 !important;
    padding: 0 !important;
    width: auto !important;
    flex-shrink: 0;
}

.sidebar-logo-bar .sidebar-language-switcher {
    display: flex !important;
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    border-radius: 20px !important;
    padding: 2px !important;
}

.sidebar-logo-bar .sidebar-language-switcher a {
    padding: 4px 8px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    border-radius: 15px !important;
    text-decoration: none !important;
    color: #4b5563 !important;
    flex: none !important;
    text-align: center !important;
}

.sidebar-logo-bar .sidebar-language-switcher a.active {
    background: #3b42c4 !important;
    /* Premium Indigo */
    color: #ffffff !important;
}

.sidebar-logo-bar .sidebar-language-switcher a:hover,
.sidebar-logo-bar .sidebar-language-switcher a:focus {
    background: #3b42c4 !important;
    /* Premium Indigo */
    color: #ffffff !important;
}

/* Sidebar Profile Row - Profile Card + Notification Bell */
.sidebar-profile-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 20px;
    padding: 0 4px;
}

.sidebar-profile-card-link {
    flex-grow: 1;
    text-decoration: none !important;
    min-width: 0;
    /* Prevents flex items from overflowing */
}

.sidebar-profile-card {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 6px !important;
    border-radius: 12px !important;
    transition: background-color 0.2s;
    background: transparent;
    border: none !important;
    margin-bottom: 0 !important;
}

.sidebar-profile-card-link:hover .sidebar-profile-card {
    background-color: rgba(59, 66, 196, 0.05);
    /* Light hover tint */
}

.sidebar-bell-btn {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    border: 1px solid rgba(0, 0, 0, 0.05) !important;
    background: #ffffff !important;
    color: #4b5563 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    position: relative !important;
    flex-shrink: 0;
    transition: all 0.2s;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
}

.sidebar-bell-btn:hover {
    background-color: #f1f5f9 !important;
    color: #3b42c4 !important;
    transform: scale(1.05);
}

.sidebar-bell-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    font-size: 9px;
    font-weight: 800;
    color: #ffffff;
    background-color: #dc2626;
    border-radius: 50%;
    padding: 2px 5px;
    line-height: 1;
}

/* Slide-in Notification Panel (Left Overlay) */
.notification-sidebar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(15, 23, 42, 0.4);
    backdrop-filter: blur(4px);
    z-index: 99998;
    /* Below panel, above everything else */
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.notification-sidebar-overlay.show {
    visibility: visible;
    opacity: 1;
}

.notification-sidebar-panel {
    position: fixed;
    top: 0;
    left: 0;
    width: 380px;
    height: 100vh;
    background: #ffffff;
    box-shadow: 10px 0 30px rgba(0, 0, 0, 0.08);
    z-index: 99999;
    /* Above overlay */
    display: flex;
    flex-direction: column;
    transform: translateX(-100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.notification-sidebar-panel.show {
    transform: translateX(0);
}

@media (max-width: 480px) {
    .notification-sidebar-panel {
        width: 100%;
    }
}

/* Inventory supplier directory */
.im-page .inventory-suppliers-table {
    width: 100%;
    table-layout: fixed;
}

.im-page .inventory-suppliers-table__number {
    width: 6%;
}

.im-page .inventory-suppliers-table__name {
    width: 21%;
}

.im-page .inventory-suppliers-table__contact {
    width: 17%;
}

.im-page .inventory-suppliers-table__communication {
    width: 18%;
}

.im-page .inventory-suppliers-table__address {
    width: 23%;
}

.im-page .inventory-suppliers-table__status {
    width: 8%;
}

.im-page .inventory-suppliers-table__actions {
    width: 7%;
}

.im-page .inventory-suppliers-table th,
.im-page .inventory-suppliers-table td {
    min-width: 0;
    vertical-align: middle;
}

.im-page .inventory-suppliers-table .inventory-supplier-address {
    color: #64748b;
    font-size: .78rem;
    line-height: 1.45;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: normal;
}

.im-page .inventory-suppliers-table td:nth-child(6),
.im-page .inventory-suppliers-table td:nth-child(7) {
    white-space: nowrap;
}

@media (max-width: 1100px) {
    .im-page .inventory-suppliers-table {
        min-width: 980px;
    }
}

/* Inventory assembly workspace */
.im-page .inventory-assembly-workspace {
    margin-top: 22px;
    padding: 18px;
    border: 1px solid var(--im-color-line);
    border-radius: 14px;
    background: var(--im-color-surface-soft, #f8fafc);
}

.im-page .inventory-assembly-workspace>header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
}

.im-page .inventory-assembly-workspace>header p {
    margin: 3px 0 0;
    color: #64748b;
    font-size: .78rem;
}

.im-page .inventory-assembly-form {
    display: grid;
    grid-template-columns: minmax(150px, .45fr) minmax(220px, 1fr) auto;
    align-items: end;
    gap: 12px;
}

.im-page .inventory-assembly-list {
    display: grid;
    gap: 9px;
    margin-top: 16px;
}

.im-page .inventory-assembly-list>article {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--im-color-line);
    border-radius: 12px;
    background: #fff;
}

.im-page .inventory-assembly-list small {
    display: block;
    color: #64748b;
}

.im-page .inventory-assembly-reversal {
    position: relative;
}

.im-page .inventory-assembly-reversal summary {
    cursor: pointer;
    color: #dc2626;
    font-size: .78rem;
    font-weight: 700;
}

.im-page .inventory-assembly-reversal form {
    display: grid;
    gap: 8px;
    width: min(300px, 72vw);
    margin-top: 8px;
}

@media (max-width: 820px) {
    .im-page .inventory-assembly-form {
        grid-template-columns: 1fr;
    }

    .im-page .inventory-assembly-list>article {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .im-page .inventory-assembly-list>article form,
    .im-page .inventory-assembly-list>article details {
        grid-column: 1 / -1;
    }
}

@media (max-width: 480px) {

    .im-page .inventory-assembly-workspace>header,
    .im-page .inventory-assembly-list>article {
        grid-template-columns: 1fr;
        flex-direction: column;
        align-items: stretch;
    }
}

/* Kunos AI voice transcription feedback */
.bos-ai-transcribing {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 30px;
    margin: 6px 3px 0;
    color: var(--im-color-primary, #5146e5);
    font-size: .76rem;
    font-weight: 700;
}

.bos-ai-transcribing[hidden] {
    display: none;
}

.bos-ai-transcribing__wave {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    width: 32px;
    height: 24px;
    padding: 4px 5px;
    border-radius: 9px;
    background: var(--im-color-primary-soft, #efefff);
}

.bos-ai-transcribing__wave i {
    width: 3px;
    height: 5px;
    border-radius: 999px;
    background: currentColor;
    animation: bos-ai-transcribing-wave .9s ease-in-out infinite;
    transform-origin: center;
}

.bos-ai-transcribing__wave i:nth-child(2),
.bos-ai-transcribing__wave i:nth-child(4) {
    animation-delay: -.18s;
}

.bos-ai-transcribing__wave i:nth-child(3) {
    animation-delay: -.36s;
}

.bos-ai-icon-button.is-transcribing {
    background: var(--im-color-primary-soft, #efefff);
    color: var(--im-color-primary, #5146e5);
    cursor: wait;
}

@keyframes bos-ai-transcribing-wave {

    0%,
    100% {
        height: 5px;
        opacity: .55;
    }

    50% {
        height: 16px;
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bos-ai-transcribing__wave i {
        animation: none;
        height: 10px;
    }
}

.inventory-conversion-preview {
    padding: 10px 12px;
    border: 1px solid var(--im-color-primary-border, #c9c8f7);
    border-radius: 12px;
    background: var(--im-color-primary-soft, #f0efff);
    color: var(--im-color-primary-strong, #3f41b5);
    font-size: .82rem;
    font-weight: 700;
}

.inventory-packaging-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
    gap: 20px;
    align-items: start;
}

.inventory-section-title {
    margin: 0 0 14px;
    color: var(--im-color-text, #172033);
    font-size: .95rem;
    font-weight: 750;
}

.inventory-packaging-form {
    padding: 16px;
    border: 1px solid var(--im-color-line, #e4e7ec);
    border-radius: 14px;
    background: var(--im-color-surface-soft, #f8f9fc);
}

.inventory-packaging-form .im-label {
    margin-top: 12px;
}

.inventory-packaging-form .im-label:first-of-type {
    margin-top: 0;
}

.inventory-check {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 12px 0;
    color: var(--im-color-text, #172033);
    font-size: .82rem;
}

.inventory-barcode-row {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 11px 12px;
    border-bottom: 1px solid var(--im-color-line, #e4e7ec);
}

.inventory-barcode-row>i {
    color: var(--im-color-primary, #5146e5);
    font-size: 1.2rem;
}

.inventory-barcode-row strong,
.inventory-barcode-row small {
    display: block;
}

.inventory-empty-panel {
    display: grid;
    justify-items: center;
    gap: 7px;
    padding: 34px 18px;
    color: var(--im-color-text-soft, #667085);
    text-align: center;
}

.inventory-empty-panel>i {
    font-size: 1.8rem;
}

.inventory-empty-panel p {
    margin: 0;
    font-size: .8rem;
}

.inventory-bom-summary {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
}

.inventory-bom-summary>div {
    min-width: 180px;
    padding: 12px 14px;
    border-radius: 12px;
    background: var(--im-color-surface-soft, #f8f9fc);
}

.inventory-bom-summary span,
.inventory-bom-summary strong {
    display: block;
}

.inventory-bom-summary span {
    color: var(--im-color-text-soft, #667085);
    font-size: .72rem;
}

.inventory-bom-summary strong {
    margin-top: 3px;
    color: var(--im-color-text, #172033);
}

.inventory-bom-card {
    overflow: hidden;
    margin-bottom: 14px;
    border: 1px solid var(--im-color-line, #e4e7ec);
    border-radius: 14px;
}

.inventory-bom-card>header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    background: var(--im-color-surface-soft, #f8f9fc);
}

.inventory-bom-card>header>div {
    display: flex;
    align-items: center;
    gap: 8px;
}

.inventory-bom-components article {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) repeat(3, auto);
    align-items: center;
    gap: 16px;
    padding: 11px 14px;
    border-top: 1px solid var(--im-color-line, #e4e7ec);
    font-size: .78rem;
}

.inventory-bom-components small {
    display: block;
    color: var(--im-color-text-soft, #667085);
}

.inventory-bom-add-form {
    display: grid;
    grid-template-columns: 1.5fr 1fr .7fr .7fr auto;
    gap: 8px;
    padding: 12px 14px;
    border-top: 1px solid var(--im-color-line, #e4e7ec);
}

@media (max-width: 900px) {
    .inventory-bom-add-form {
        grid-template-columns: 1fr 1fr;
    }

    .inventory-bom-components article {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 520px) {
    .inventory-bom-summary {
        display: grid;
    }

    .inventory-bom-summary>div {
        min-width: 0;
    }

    .inventory-bom-add-form,
    .inventory-bom-components article {
        grid-template-columns: 1fr;
    }
}

.inventory-barcode-row small {
    margin-top: 2px;
    color: var(--im-color-text-soft, #667085);
    font-size: .72rem;
}

@media (max-width: 900px) {
    .inventory-packaging-layout {
        grid-template-columns: 1fr;
    }
}

.inventory-field-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 6px;
}

.inventory-field-heading .im-label {
    margin: 0;
}

.inventory-barcode-modal .modal-dialog {
    width: min(520px, calc(100vw - 24px));
}

.inventory-barcode-modal .modal-content {
    overflow: hidden;
    border: 1px solid var(--im-color-line, #e4e7ec);
    border-radius: 18px;
}

.inventory-barcode-modal .modal-header p {
    margin: 3px 0 0;
    color: var(--im-color-text-soft, #667085);
    font-size: .78rem;
}

.inventory-barcode-camera {
    position: relative;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    border-radius: 14px;
    background: #111827;
}

.inventory-barcode-camera video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.inventory-barcode-frame {
    position: absolute;
    inset: 25% 10%;
    border: 2px solid #fff;
    border-radius: 12px;
    box-shadow: 0 0 0 999px rgba(15, 23, 42, .32);
}

.inventory-barcode-status {
    min-height: 22px;
    margin: 10px 0;
    color: var(--im-color-text-soft, #667085);
    font-size: .8rem;
}

.inventory-barcode-manual__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
}

@media (max-width: 480px) {
    .inventory-barcode-modal .modal-dialog {
        width: 100%;
        max-width: none;
        min-height: 100%;
        margin: 0;
    }

    .inventory-barcode-modal .modal-content {
        min-height: 100dvh;
        border: 0;
        border-radius: 0;
    }

    .inventory-barcode-camera {
        aspect-ratio: 1 / 1;
    }

    .inventory-barcode-manual__row {
        grid-template-columns: 1fr;
    }
}

.notification-sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px;
    border-bottom: 1px solid #f1f5f9;
}

.notification-sidebar-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 800;
    color: #0f172a;
    font-family: 'Poppins', sans-serif;
}

.notification-sidebar-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.notification-sidebar-actions .mark-all-read-btn {
    border: none;
    background: transparent;
    color: #3b42c4;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    transition: background 0.2s;
}

.notification-sidebar-actions .mark-all-read-btn:hover {
    background: #f1f5f9;
}

.notification-sidebar-actions .close-notification-panel {
    border: none;
    background: #f1f5f9;
    color: #64748b;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s;
}

.notification-sidebar-actions .close-notification-panel:hover {
    background: #e2e8f0;
    color: #0f172a;
}

.notification-sidebar-body {
    flex-grow: 1;
    overflow-y: auto;
    padding: 12px;
}

/* Custom Scrollbar for Notification Body */
.notification-sidebar-body::-webkit-scrollbar {
    width: 5px;
}

.notification-sidebar-body::-webkit-scrollbar-track {
    background: transparent;
}

.notification-sidebar-body::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.06);
    border-radius: 10px;
}

.notification-sidebar-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.notification-sidebar-item {
    border-radius: 12px;
    margin-bottom: 8px;
    transition: background 0.2s;
    overflow: hidden;
}

.notification-sidebar-item.unread {
    background: #f8fafc;
    border-left: 3px solid #3b42c4;
}

.notification-sidebar-item.read {
    background: #ffffff;
    border-left: 3px solid transparent;
}

.notification-sidebar-item:hover {
    background: #f1f5f9;
}

.notification-item-btn {
    border: none;
    background: transparent;
    padding: 16px;
    width: 100%;
    text-align: left;
    cursor: pointer;
    display: block;
}

.notification-item-content {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.notification-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.notification-text-block {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.notification-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.unread-dot {
    width: 8px;
    height: 8px;
    background-color: #3b42c4;
    border-radius: 50%;
    flex-shrink: 0;
}

.notification-text-block h4 {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    color: #1e293b;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.notification-text-block p {
    margin: 0;
    font-size: 13px;
    color: #64748b;
    line-height: 1.4;
    word-break: break-word;
}

.notification-time {
    font-size: 11px;
    color: #94a3b8;
    margin-top: 2px;
    display: block;
}

.notification-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 200px;
    color: #94a3b8;
    gap: 12px;
}

.notification-empty-state i {
    font-size: 40px;
}

.notification-empty-state p {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
}

.notification-sidebar-footer {
    padding: 18px;
    border-top: 1px solid #f1f5f9;
    text-align: center;
    background: #f8fafc;
}

.notification-sidebar-footer a {
    color: #3b42c4;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition: color 0.2s;
}

.notification-sidebar-footer a:hover {
    color: #1e3a8a;
}

/* =========================================================
   BATCH AKADEMIK 1: Custom Redesign Styles
   ========================================================= */
:root {
    --m3-surface: #f8f9ff;
    --m3-surface-container: #eff4ff;
    --m3-primary: #26259e;
    --m3-primary-hover: #1c1a80;
    --m3-secondary: #006c49;
    --m3-secondary-hover: #005036;
    --m3-tertiary: #873a00;
    --m3-on-primary: #ffffff;
    --m3-outline-variant: #c7c5d5;
    --m3-shadow: 0 15px 40px rgba(38, 37, 158, 0.08);
    --m3-radius-xl: 1.5rem;
    --m3-radius-md: 0.75rem;
}

/* Horizontal Filters */
.bos-academic-filter-card {
    background: #ffffff !important;
    border: 1px solid rgba(219, 228, 243, 0.8) !important;
    border-radius: var(--m3-radius-xl) !important;
    box-shadow: var(--m3-shadow) !important;
    margin-bottom: 24px;
}

.bos-academic-filter-form {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: flex-end;
    padding: 8px 0;
}

.bos-academic-filter-form .filter-group {
    flex: 1 1 240px;
}

.bos-academic-filter-form .filter-action {
    flex: 0 0 auto;
}

/* Bento Stats Grid */
.bos-bento-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
    margin-top: 32px;
}

.bos-bento-card {
    position: relative;
    background: #ffffff;
    border: 1px solid rgba(219, 228, 243, 0.8);
    border-radius: var(--m3-radius-xl);
    padding: 24px;
    box-shadow: var(--m3-shadow);
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.bos-bento-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 20px 45px rgba(38, 37, 158, 0.12);
}

.bos-bento-card-gradient {
    background: linear-gradient(135deg, #26259e 0%, #3f41b5 100%) !important;
    color: #ffffff !important;
}

.bos-bento-card span {
    display: block;
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #64748b;
    margin-bottom: 8px;
}

.bos-bento-card-gradient span {
    color: rgba(255, 255, 255, 0.8) !important;
}

.bos-bento-card strong {
    display: block;
    font-size: 36px;
    font-weight: 900;
    color: #0b1c30;
    line-height: 1.1;
}

.bos-bento-card-gradient strong {
    color: #ffffff !important;
}

.bos-bento-card p {
    margin: 12px 0 0 0;
    font-size: 14px;
    color: #464553;
    font-weight: 500;
}

.bos-bento-card-gradient p {
    color: rgba(255, 255, 255, 0.9) !important;
}

.bos-bento-icon {
    position: absolute;
    right: 20px;
    bottom: 10px;
    font-size: 72px;
    color: rgba(38, 37, 158, 0.05);
    line-height: 1;
}

.bos-bento-card-gradient .bos-bento-icon {
    color: rgba(255, 255, 255, 0.08) !important;
}

/* Metadata Banner */
.bos-metadata-card {
    border-radius: var(--m3-radius-xl) !important;
    border: 1px solid rgba(219, 228, 243, 0.8) !important;
    box-shadow: var(--m3-shadow) !important;
    background: #ffffff !important;
    padding: 24px 30px !important;
}

.bos-metadata-title {
    font-size: 20px !important;
    font-weight: 900 !important;
    color: #092a6f !important;
    margin-bottom: 16px !important;
}

.bos-metadata-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.bos-metadata-item {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 18px;
    background: #e5eeff;
    border-radius: 999px;
    color: #0b1c30;
    font-weight: 700;
    font-size: 14px;
    border: 1px solid rgba(38, 37, 158, 0.1);
}

.bos-metadata-item i {
    color: #26259e;
    font-size: 16px;
}

/* Custom Checklist Tables */
.bos-checked-table tbody tr.selected-row {
    background-color: #f0f4ff;
}

.bos-m3-checkbox {
    width: 20px;
    height: 20px;
    border-radius: 6px;
    border: 2px solid #777685;
    transition: all 0.2s ease;
    cursor: pointer;
}

.bos-m3-checkbox:checked {
    background-color: #26259e;
    border-color: #26259e;
}

/* Laporan Kursus Parameter Column & Report Column Split */
.bos-split-layout {
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    gap: 28px;
    align-items: start;
}

@media (max-width: 991px) {
    .bos-split-layout {
        grid-template-columns: 1fr;
    }
}

.bos-parameter-card {
    border-radius: var(--m3-radius-xl) !important;
    border: 1px solid rgba(219, 228, 243, 0.8) !important;
    box-shadow: var(--m3-shadow) !important;
    background: #ffffff !important;
}

.bos-report-card {
    border-radius: var(--m3-radius-xl) !important;
    border: 1px solid rgba(219, 228, 243, 0.8) !important;
    box-shadow: var(--m3-shadow) !important;
    background: #ffffff !important;
}

.bos-btn-m3-outline {
    border: 2px solid #26259e !important;
    background: transparent !important;
    color: #26259e !important;
    padding: 10px 22px !important;
    border-radius: 999px !important;
    font-weight: 850 !important;
    transition: all 0.2s ease !important;
}

.bos-btn-m3-outline:hover {
    background: #26259e !important;
    color: #ffffff !important;
    box-shadow: 0 10px 20px rgba(38, 37, 158, 0.15) !important;
}

/* =========================================================
   BATCH AKADEMIK 2: Carian Pelajar & Enrollment Styles
   ========================================================= */
.bos-search-input-group {
    position: relative;
}

.bos-search-input-group i {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    color: #64748b;
    font-size: 18px;
    z-index: 10;
}

#main .bos-search-input-group .form-control,
#main .bos-search-input-group .form-control-sm,
.bos-search-input-group .form-control,
.bos-search-input-group .form-control-sm {
    padding-left: 48px !important;
}

.bos-search-input-group i {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    color: #64748b;
    font-size: 16px;
    z-index: 10;
    pointer-events: none;
}

.bos-filter-reset-link {
    display: block;
    text-align: center;
    margin-top: 16px;
    color: #64748b;
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    transition: color 0.2s ease;
}

.bos-filter-reset-link:hover {
    color: #26259e;
}

.bos-avatar-initials {
    width: 40px;
    height: 40px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 14px;
    color: #26259e;
    background-color: #e5eeff;
    border: 1px solid rgba(38, 37, 158, 0.1);
    text-transform: uppercase;
}

.bos-avatar-orange {
    color: #873a00;
    background-color: #ffebdb;
    border-color: rgba(135, 58, 0, 0.1);
}

.bos-avatar-green {
    color: #006c49;
    background-color: #d1fae5;
    border-color: rgba(0, 108, 73, 0.1);
}

/* Custom Dropdown Select Elements */
.bos-select-custom-container {
    position: relative;
    width: 100%;
}

/* Preserve compact filter rows after the native select is visually wrapped. */
.d-flex.flex-wrap>.bos-select-global,
.bos-erp-filter-toolbar>.bos-select-global,
.im-filter-bar>.bos-select-global,
.fbs-filters>.bos-select-global {
    width: auto !important;
    min-width: min(220px, 100%);
    flex: 1 1 220px;
}

.bos-select-native-source {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
}

/* Once bos-select.js has wrapped a select, the original element (now
   .bos-select-native-source, nested inside .bos-select-custom-container) is
   still a real <select> and still matches every "native select" compatibility
   theme below (.user-profile .custom-select-wrapper select,
   .staff-management select.bos-native-select, etc.) — each of those uses
   !important on min-height/padding/border/background with specificity
   (2 classes + 1 element) that ties or beats the single-class rule above,
   re-inflating the "hidden" select back to a full, boxed, chevron-styled
   control sitting right next to the new custom trigger (the profile-page
   duplicate-dropdown symptom). This re-assertion uses 3 selector classes
   (2 classes + 1 element = higher specificity than any of those compat
   rules) so a hidden native source can never be visually re-inflated by ANY
   current or future per-context "compatibility" theme, regardless of where
   in this file that theme is declared. */
.bos-select-custom-container select.bos-native-select.bos-select-native-source {
    min-height: 0 !important;
    height: 1px !important;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
}

.bos-select-custom-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #ffffff;
    border: 1px solid #d1d5db;
    /* border-gray-300 */
    border-radius: 12px;
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 500;
    color: #1e293b;
    cursor: pointer;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    min-height: 42px;
}

.bos-select-custom-trigger:focus {
    border-color: #26259e !important;
    box-shadow: 0 0 0 3px rgba(38, 37, 158, 0.15) !important;
}

.bos-select-custom-container.open .bos-select-custom-trigger {
    border-color: #26259e;
}

.bos-select-custom-icon {
    font-size: 12px;
    color: #64748b;
    transition: transform 0.2s ease;
}

.bos-select-custom-container.open .bos-select-custom-icon {
    transform: rotate(180deg);
}

.bos-select-custom-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    width: 100%;
    background-color: #ffffff;
    border: 1px solid rgba(219, 228, 243, 0.8);
    border-radius: 12px;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.08);
    z-index: 999;
    display: none;
    max-height: 250px;
    overflow-y: auto;
    padding: 6px;
}

.bos-select-global .bos-select-custom-dropdown {
    position: fixed !important;
    inset: auto;
    z-index: var(--bos-layer-modal-dropdown) !important;
}

.bos-select--error .bos-select-custom-trigger {
    border-color: var(--bos-select-danger) !important;
}

.bos-select--error .bos-select-custom-trigger:focus {
    box-shadow: 0 0 0 4px rgba(220, 53, 69, .12) !important;
}

.bos-select-custom-container.open .bos-select-custom-dropdown {
    display: block;
}

.bos-select-custom-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    font-size: 14px;
    font-weight: 500;
    color: #334155;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s;
}

.bos-select-custom-option:hover {
    background-color: #f1f5f9;
    color: #0f172a;
}

.bos-select-custom-option.selected {
    background-color: #26259e !important;
    color: #ffffff !important;
}

.bos-select-custom-check-icon {
    font-size: 16px;
    color: transparent;
}

.bos-select-custom-option.selected .bos-select-custom-check-icon {
    color: #ffffff;
}

/* Checked Table Row Highlight */
.bos-checked-table tbody tr.selected-row {
    background-color: rgba(38, 37, 158, 0.04) !important;
}

.bos-checked-table tbody tr.selected-row td {
    background-color: rgba(38, 37, 158, 0.04) !important;
}

/* Stats Bento Row */
.bos-stats-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 28px;
    margin-bottom: 20px;
}

@media (max-width: 768px) {
    .bos-stats-row {
        grid-template-columns: 1fr;
    }
}

.bos-stat-card {
    background: #ffffff;
    border: 1px solid rgba(219, 228, 243, 0.8);
    border-radius: 16px;
    padding: 24px;
    display: flex;
    align-items: center;
    gap: 20px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
}

.bos-stat-icon-wrap {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    flex-shrink: 0;
}

.bos-stat-icon-purple {
    background-color: #e5eeff;
    color: #26259e;
}

.bos-stat-icon-green {
    background-color: #d1fae5;
    color: #059669;
}

.bos-stat-icon-orange {
    background-color: #fff7ed;
    color: #ea580c;
}

.bos-stat-info {
    display: flex;
    flex-direction: column;
}

.bos-stat-label {
    font-size: 14px;
    color: #64748b;
    font-weight: 600;
    margin-bottom: 4px;
}

.bos-stat-number {
    font-size: 28px;
    font-weight: 800;
    color: #0b1c30;
    line-height: 1;
}

/* General Layout Fixes */
.bos-academic-breadcrumbs {
    font-size: 14px;
    font-weight: 500;
}

.bos-academic-breadcrumbs span {
    font-family: 'Public Sans', sans-serif;
}


/* Leave Application Details Drawer Redesign */
.leave-drawer-header-subtitle {
    font-size: 13px;
    opacity: 0.8;
    margin-top: 4px;
    font-weight: 500;
}

.leave-drawer-status-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-radius: 16px;
    margin-bottom: 24px;
    border: 1px solid transparent;
}

/* Yellow Theme: Dalam Proses */
.leave-drawer-status-card.status-pending {
    background-color: #fffbeb;
    border-color: #fde68a;
}

.leave-drawer-status-card.status-pending .status-label {
    color: #b45309;
    font-size: 24px;
    font-weight: 800;
}

.leave-drawer-status-card.status-pending .status-desc {
    color: #d97706;
    font-size: 13px;
    font-weight: 500;
}

.leave-drawer-status-card.status-pending .status-icon-wrapper {
    background-color: #fef3c7;
    color: #d97706;
}

/* Red Theme: Dibatalkan */
.leave-drawer-status-card.status-cancelled {
    background-color: #fdf2f2;
    border-color: #fde8e8;
}

.leave-drawer-status-card.status-cancelled .status-label {
    color: #9b1c1c;
    font-size: 24px;
    font-weight: 800;
}

.leave-drawer-status-card.status-cancelled .status-desc {
    color: #c81e1e;
    font-size: 13px;
    font-weight: 500;
}

.leave-drawer-status-card.status-cancelled .status-icon-wrapper {
    background-color: #fde8e8;
    color: #c81e1e;
}

/* Green Theme: Diluluskan */
.leave-drawer-status-card.status-approved {
    background-color: #f3faf7;
    border-color: #def7ec;
}

.leave-drawer-status-card.status-approved .status-label {
    color: #03543f;
    font-size: 24px;
    font-weight: 800;
}

.leave-drawer-status-card.status-approved .status-desc {
    color: #057a55;
    font-size: 13px;
    font-weight: 500;
}

.leave-drawer-status-card.status-approved .status-icon-wrapper {
    background-color: #def7ec;
    color: #057a55;
}

.status-icon-wrapper {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
}

.leave-drawer-section-title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: #64748b;
    text-transform: uppercase;
    margin-bottom: 12px;
    margin-top: 24px;
}

.leave-drawer-info-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-bottom: 16px;
}

.leave-drawer-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}

.leave-drawer-card-label {
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.leave-drawer-card-value {
    font-size: 15px;
    font-weight: 700;
    color: #0f172a;
}

.leave-drawer-card-subvalue {
    font-size: 12px;
    color: #64748b;
    margin-top: 2px;
}

.leave-drawer-chronology-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 14px 18px;
}

.leave-drawer-chronology-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #475569;
}

.leave-drawer-chronology-value {
    font-size: 13px;
    font-weight: 700;
    color: #0f172a;
}

.leave-drawer-reason-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 18px;
}

.leave-drawer-reason-text {
    font-size: 14px;
    color: #334155;
    line-height: 1.5;
    margin-bottom: 12px;
}

.leave-drawer-badge-container {
    display: flex;
    gap: 8px;
}

.leave-drawer-badge {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 4px 8px;
    border-radius: 6px;
    background-color: #f1f5f9;
    color: #475569;
}

.leave-drawer-badge.priority {
    background-color: #eff6ff;
    color: #1d4ed8;
}

/* Audit Trail and Notes */
.leave-drawer-notes-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 12px;
}

.leave-drawer-note-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 16px;
}

.leave-drawer-note-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: #f1f5f9;
    color: #475569;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}

.leave-drawer-note-item.approved .leave-drawer-note-icon {
    background-color: #eef2ff;
    color: #4f46e5;
}

.leave-drawer-note-content {
    flex: 1;
}

.leave-drawer-note-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
}

.leave-drawer-note-title {
    font-size: 13px;
    font-weight: 700;
    color: #0f172a;
}

.leave-drawer-note-badge {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    text-transform: uppercase;
}

.leave-drawer-note-badge.disokong {
    background-color: #def7ec;
    color: #03543f;
}

.leave-drawer-note-badge.diluluskan {
    background-color: #e1effe;
    color: #1e429f;
}

.leave-drawer-note-text {
    font-size: 13px;
    color: #475569;
    line-height: 1.4;
}

/* Footer Buttons */
.btn-drawer-close-flat {
    background: transparent;
    border: none;
    font-weight: 600;
    font-size: 14px;
    color: #475569;
    padding: 10px 20px;
    cursor: pointer;
    transition: color 0.15s ease;
}

.btn-drawer-close-flat:hover {
    color: #0f172a;
}

.btn-drawer-cancel-red {
    background-color: #c81e1e;
    color: #ffffff;
    border: none;
    border-radius: 9999px;
    padding: 10px 24px;
    font-weight: 600;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.btn-drawer-cancel-red:hover {
    background-color: #9b1c1c;
}

.btn-drawer-print-blue {
    background-color: #3f51b5;
    color: #ffffff;
    border: none;
    border-radius: 9999px;
    padding: 10px 24px;
    font-weight: 600;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.btn-drawer-print-blue:hover {
    background-color: #2c387e;
}

/* Attendance Page Layout Alignment Fix */
.kehadiran-container-override {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Vehicle Page Layout Alignment Fix */
/* .vehicle-page-container padding overrides removed for global container alignment */

/* Student Search Input Icon Override */
.bos-search-input-group.no-icon .form-control {
    padding-left: 12px !important;
}

/* Staff Management Form Refructuring / Restructuring Layout */
.staff-management form {
    padding-bottom: 110px !important;
    /* Extra bottom padding to clear the sticky footer */
    position: relative;
}

.staff-section-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    padding: 24px !important;
    margin-bottom: 24px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.02) !important;
}

.staff-section-title {
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    color: #1f2937 !important;
    border-left: 4px solid var(--bos-primary) !important;
    padding-left: 12px !important;
    margin-bottom: 20px !important;
    line-height: 1.2 !important;
    text-transform: none !important;
}

.staff-form-footer {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    background-color: #ffffff !important;
    border-top: 1px solid #e2e8f0 !important;
    box-shadow: 0 -4px 6px -1px rgba(0, 0, 0, 0.05), 0 -2px 4px -1px rgba(0, 0, 0, 0.03) !important;
    z-index: 1000 !important;
    padding: 16px 24px !important;
    display: flex !important;
    justify-content: flex-end !important;
    gap: 12px !important;
}

/* Specific button overrides inside the footer to override round buttons with customized premium look */
.staff-form-footer .custom-add-btn.btn-cancel,
.staff-form-footer .custom-add-btn.btn-submit {
    min-height: 40px !important;
    border-radius: 8px !important;
    padding: 8px 20px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: none !important;
    text-decoration: none !important;
    transition: all 0.15s ease !important;
}

.staff-form-footer .custom-add-btn.btn-cancel {
    background-color: #f3f4f6 !important;
    border: 1px solid #d1d5db !important;
    color: #4b5563 !important;
}

.staff-form-footer .custom-add-btn.btn-cancel:hover {
    background-color: #e5e7eb !important;
    color: #1f2937 !important;
    border-color: #c5c9d0 !important;
}

.staff-form-footer .custom-add-btn.btn-submit {
    background-color: var(--bos-primary) !important;
    border: 1px solid var(--bos-primary) !important;
    color: #ffffff !important;
}

.staff-form-footer .custom-add-btn.btn-submit:hover {
    background-color: var(--bos-primary-dark) !important;
    border-color: var(--bos-primary-dark) !important;
}

/*--------------------------------------------------------------
# Staff Drawer Compact Layout
# Purpose: Compact BOS-style create/edit staff drawers without changing backend behavior.
--------------------------------------------------------------*/
.staff-drawer-page {
    padding-inline: 0 !important;
}

.staff-drawer-page .row {
    margin-inline: 0 !important;
}

.staff-drawer-page>.row>.col-md-12 {
    padding-inline: 0 !important;
}

.staff-drawer-page .staff-drawer-shell {
    max-width: 920px;
    margin: 0 0 24px auto;
    border: 1px solid #dbe3f1 !important;
    border-radius: 24px !important;
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.08) !important;
    overflow: hidden;
}

.staff-drawer-page .staff-drawer-body {
    padding: 0 !important;
}

.staff-drawer-page .staff-drawer-form {
    position: relative;
    padding: 0 32px 118px !important;
    background: #ffffff;
}

.staff-drawer-page .staff-drawer-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding: 24px 0 18px;
    margin-bottom: 10px;
    border-bottom: 1px solid #e8edf5;
}

.staff-drawer-page .staff-drawer-header-main {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    min-width: 0;
}

.staff-drawer-page .staff-drawer-header-icon {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--bos-primary);
    background: #eef0ff;
    font-size: 20px;
}

.staff-drawer-page .staff-drawer-header-title {
    margin: 0;
    color: #1f2937;
    font-size: 17px;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -0.01em;
}

.staff-drawer-page .staff-drawer-header-subtitle {
    margin: 3px 0 0;
    color: #64748b;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.staff-drawer-page .staff-drawer-close {
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    background: transparent;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.staff-drawer-page .staff-drawer-close:hover {
    background: #f1f5f9;
    color: #334155;
}

.staff-drawer-page .staff-section-card,
.staff-drawer-page .staff-drawer-section {
    margin-bottom: 16px !important;
    padding: 0 0 12px !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.staff-drawer-page .staff-section-title {
    margin: 0 0 14px !important;
    padding: 0 0 12px 14px !important;
    border: 0 !important;
    border-bottom: 1px solid #e8edf5 !important;
    position: relative;
    color: #1f2937 !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    line-height: 1.3 !important;
}

.staff-drawer-page .staff-section-title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 12px;
    width: 4px;
    border-radius: 999px;
    background: linear-gradient(180deg, #4c50d9 0%, #3b82f6 100%);
}

.staff-drawer-page .staff-section-card>.row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 18px;
    margin: 0 0 14px !important;
}

.staff-drawer-page .staff-section-card>.row:last-child {
    margin-bottom: 0 !important;
}

.staff-drawer-page .staff-section-card>.row>[class*="col-"] {
    width: auto !important;
    max-width: none !important;
    flex: initial !important;
    padding: 0 !important;
    margin: 0 !important;
}

.staff-drawer-page .staff-section-card>.row>.col-12 {
    grid-column: 1 / -1;
}

.staff-drawer-page .staff-section-card label,
.staff-drawer-page .staff-section-card .dropdown-label,
.staff-drawer-page .label-profile-picture {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 8px;
    color: #334155;
    font-size: 13px;
    font-weight: 700;
}

.staff-drawer-page .custom-input,
.staff-drawer-page .form-control,
.staff-drawer-page .form-select,
.staff-drawer-page .select2-container--default .select2-selection--single,
.staff-drawer-page .select2-container--default .select2-selection--multiple {
    min-height: 46px !important;
    border-radius: 14px !important;
    border: 1px solid #dbe3f1 !important;
    background: #ffffff !important;
    box-shadow: none !important;
    font-size: 13px !important;
    font-weight: 600 !important;
}

.staff-drawer-page .custom-input,
.staff-drawer-page .form-control,
.staff-drawer-page .form-select {
    padding: 10px 14px !important;
}

.staff-drawer-page textarea.custom-input,
.staff-drawer-page textarea.form-control {
    min-height: 84px !important;
    resize: vertical;
}

.staff-drawer-page .input-group .form-control {
    border-right: 0 !important;
}

.staff-drawer-page .input-group-text {
    min-width: 48px;
    border-radius: 0 14px 14px 0 !important;
    border: 1px solid #dbe3f1 !important;
    border-left: 0 !important;
    color: #64748b;
    background: #ffffff !important;
}

.staff-drawer-page .custom-input:focus,
.staff-drawer-page .form-control:focus,
.staff-drawer-page .form-select:focus,
.staff-drawer-page .select2-container--default.select2-container--focus .select2-selection--single,
.staff-drawer-page .select2-container--default.select2-container--focus .select2-selection--multiple {
    border-color: #5b61e8 !important;
    box-shadow: 0 0 0 4px rgba(76, 80, 217, 0.12) !important;
    outline: none;
}

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

.staff-drawer-page .select2-container--default .select2-selection--single {
    display: flex;
    align-items: center;
    padding: 0 42px 0 14px !important;
}

.staff-drawer-page .select2-container--default .select2-selection--single .select2-selection__rendered {
    padding: 0 !important;
    color: #111827 !important;
    line-height: 1.4 !important;
}

.staff-drawer-page .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100% !important;
    right: 12px !important;
}

.staff-drawer-page .select2-container--default .select2-selection--multiple {
    padding: 6px 10px !important;
}

.staff-drawer-page .select2-container--default .select2-selection--multiple .select2-selection__rendered {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px;
    padding: 0 !important;
}

.staff-drawer-page .select2-container--default .select2-selection--multiple .select2-selection__choice {
    margin: 0 !important;
    border: 1px solid rgba(76, 80, 217, 0.18) !important;
    border-radius: 999px !important;
    background: #eef2ff !important;
    color: #3730a3 !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    padding: 4px 10px !important;
}

.staff-drawer-page .staff-drawer-profile-row {
    grid-template-columns: minmax(0, 1fr) !important;
}

.staff-drawer-page .staff-drawer-profile-row .dropify-wrapper {
    min-height: 138px !important;
    height: 138px !important;
    border: 1px dashed #dbe3f1 !important;
    border-radius: 18px !important;
    background: #fbfdff !important;
}

.staff-drawer-page .staff-drawer-profile-row .dropify-wrapper .dropify-message {
    padding: 18px 12px !important;
}

.staff-drawer-page .staff-drawer-profile-row .dropify-wrapper .dropify-message p {
    font-size: 13px !important;
    color: #64748b !important;
}

.staff-drawer-page .staff-drawer-profile-row .dropify-wrapper .dropify-preview .dropify-render img {
    max-height: 108px !important;
}

.staff-drawer-page .input-with-text {
    display: flex;
    align-items: center;
    gap: 10px;
}

.staff-drawer-page .input-with-text small {
    color: #64748b;
    font-size: 12px;
    font-weight: 700;
}

.staff-drawer-page .form-check {
    margin: 0;
    padding: 10px 14px 10px 36px;
    border: 1px solid #dbe3f1;
    border-radius: 14px;
    background: #ffffff;
}

.staff-drawer-page .form-check-input {
    margin-top: 0.2rem;
}

.staff-drawer-page #selected-roles-display {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px !important;
}

.staff-drawer-page #selected-roles-display .badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border-radius: 999px;
    background: #eef2ff !important;
    color: #3730a3 !important;
    font-size: 12px;
    font-weight: 700;
}

.staff-drawer-page .staff-drawer-section-note {
    margin: -2px 0 12px !important;
    color: #64748b !important;
    font-size: 12px !important;
    line-height: 1.5;
}

.staff-drawer-page .staff-workflow-table-wrap {
    grid-column: 1 / -1;
    border: 1px solid #dbe3f1;
    border-radius: 18px;
    overflow: hidden;
    background: #ffffff;
}

.staff-drawer-page .staff-workflow-table {
    margin-bottom: 0 !important;
}

.staff-drawer-page .staff-workflow-table thead {
    background: linear-gradient(135deg, #3f41b5 0%, #3158a6 100%) !important;
}

.staff-drawer-page .staff-workflow-table thead th {
    padding: 12px 14px !important;
    color: #ffffff !important;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-color: rgba(255, 255, 255, 0.18) !important;
}

.staff-drawer-page .staff-workflow-table td {
    padding: 12px 14px !important;
    font-size: 13px;
    vertical-align: middle !important;
    border-color: #e8edf5 !important;
}

.staff-drawer-page .staff-workflow-table td[rowspan] {
    min-width: 120px;
    font-weight: 800;
    color: #334155;
    background: #f8fafc;
}

.staff-drawer-page .staff-drawer-footer,
.staff-drawer-page .staff-form-footer {
    position: sticky !important;
    bottom: 0 !important;
    left: auto !important;
    right: auto !important;
    margin: 22px -32px -1px !important;
    padding: 18px 32px calc(18px + env(safe-area-inset-bottom, 0px)) !important;
    border-top: 1px solid #e8edf5 !important;
    background: rgba(255, 255, 255, 0.96) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    justify-content: space-between !important;
    box-shadow: 0 -10px 24px rgba(15, 23, 42, 0.06) !important;
}

.staff-drawer-page .staff-form-footer .custom-add-btn.btn-cancel,
.staff-drawer-page .staff-form-footer .custom-add-btn.btn-submit {
    min-width: 160px;
    min-height: 50px !important;
    padding: 12px 22px !important;
    border-radius: 16px !important;
    font-size: 14px !important;
    font-weight: 800 !important;
}

.staff-drawer-page .staff-form-footer .custom-add-btn.btn-cancel {
    background: #ffffff !important;
    color: #475569 !important;
    border-color: #dbe3f1 !important;
}

.staff-drawer-page .staff-form-footer .custom-add-btn.btn-submit {
    background: linear-gradient(135deg, #4c50d9 0%, #3f41b5 100%) !important;
    border: 0 !important;
    color: #ffffff !important;
    box-shadow: 0 12px 24px rgba(63, 65, 181, 0.2) !important;
}

.staff-drawer-page .text-danger {
    margin-top: 6px;
    font-size: 12px;
}

@media (max-width: 991.98px) {
    .staff-drawer-page .staff-drawer-shell {
        max-width: 100%;
        margin-right: 0;
    }

    .staff-drawer-page .staff-drawer-form {
        padding-inline: 20px !important;
    }

    .staff-drawer-page .staff-form-footer,
    .staff-drawer-page .staff-drawer-footer {
        margin-inline: -20px !important;
        padding-inline: 20px !important;
    }
}

@media (max-width: 767.98px) {
    .staff-drawer-page .staff-drawer-form {
        padding-bottom: 128px !important;
    }

    .staff-drawer-page .staff-section-card>.row {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }

    .staff-drawer-page .staff-form-footer,
    .staff-drawer-page .staff-drawer-footer {
        flex-direction: column-reverse !important;
        align-items: stretch !important;
    }

    .staff-drawer-page .staff-form-footer .custom-add-btn.btn-cancel,
    .staff-drawer-page .staff-form-footer .custom-add-btn.btn-submit {
        width: 100%;
    }
}

/* ==========================================================================
   Staff Drawer UI Polish
   ========================================================================== */
.staff-drawer-page {
    --staff-drawer-gap: 14px;
}

.staff-drawer-page .staff-drawer-shell {
    border-radius: 26px !important;
    overflow: hidden;
}

.staff-drawer-page .staff-drawer-body {
    padding: 0 !important;
}

.staff-drawer-page .staff-drawer-form {
    gap: 16px;
    padding: 0 22px 92px !important;
}

.staff-drawer-page .staff-drawer-header {
    position: sticky;
    top: 0;
    z-index: 4;
    margin: 0 -22px 2px !important;
    padding: 14px 22px 12px !important;
    background: rgba(255, 255, 255, 0.98);
    border-bottom: 1px solid #edf2fb;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.staff-drawer-page .staff-drawer-header-main {
    gap: 12px;
}

.staff-drawer-page .staff-drawer-header-icon {
    width: 40px;
    height: 40px;
    font-size: 18px;
    border-radius: 14px;
    box-shadow: none;
}

.staff-drawer-page .staff-drawer-header-copy {
    min-width: 0;
}

.staff-drawer-page .staff-drawer-header-title {
    font-size: 15px;
    line-height: 1.25;
    margin-bottom: 2px;
}

.staff-drawer-page .staff-drawer-header-subtitle {
    font-size: 10px;
    letter-spacing: 0.11em;
}

.staff-drawer-page .staff-drawer-close {
    width: 36px;
    height: 36px;
    font-size: 14px;
    border-radius: 12px;
}

.staff-drawer-page .staff-section-card,
.staff-drawer-page .staff-drawer-section {
    padding: 14px 0 2px !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.staff-drawer-page .staff-drawer-section+.staff-drawer-section {
    border-top: 1px solid #edf2fb !important;
}

.staff-drawer-page .staff-section-title {
    margin-bottom: 12px !important;
    padding-bottom: 10px;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.01em;
}

.staff-drawer-page .staff-section-title::before {
    width: 4px;
    height: 24px;
    border-radius: 999px;
}

.staff-drawer-page .staff-section-card>.row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 14px;
    margin: 0 0 10px !important;
}

.staff-drawer-page .staff-section-card>.row:last-child {
    margin-bottom: 0 !important;
}

.staff-drawer-page .staff-section-card>.row>[class*="col-"] {
    width: 100%;
    max-width: 100%;
    margin: 0 !important;
    padding: 0 !important;
}

.staff-drawer-page .staff-section-card>.row>.col-12,
.staff-drawer-page .staff-section-card>.row>[class*="col-"].staff-workflow-table-wrap,
.staff-drawer-page .staff-drawer-profile-row>.col-12 {
    grid-column: 1 / -1;
}

.staff-drawer-page .staff-section-card label,
.staff-drawer-page .staff-section-card .dropdown-label,
.staff-drawer-page .label-profile-picture {
    margin-bottom: 5px !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    color: #3f4e67 !important;
    line-height: 1.35;
}

.staff-drawer-page .staff-section-card .bi-info-circle {
    font-size: 12px;
    color: #7b8ba8;
}

.staff-drawer-page .custom-select-wrapper {
    width: 100%;
}

.staff-drawer-page .custom-input,
.staff-drawer-page .form-control,
.staff-drawer-page .form-select,
.staff-drawer-page .select2-container--default .select2-selection--single,
.staff-drawer-page .select2-container--default .select2-selection--multiple {
    min-height: 40px !important;
    height: 40px !important;
    padding: 8px 12px !important;
    border-radius: 13px !important;
    font-size: 13px !important;
    line-height: 1.3 !important;
    background: #ffffff !important;
}

.staff-drawer-page textarea.custom-input,
.staff-drawer-page textarea.form-control {
    min-height: 72px !important;
    height: auto !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    resize: vertical;
}

.staff-drawer-page .small-input {
    min-width: 0;
}

.staff-drawer-page .input-group {
    align-items: stretch;
}

.staff-drawer-page .input-group .form-control {
    min-height: 40px !important;
    height: 40px !important;
}

.staff-drawer-page .input-group-text {
    min-width: 42px;
    padding: 0 10px !important;
    font-size: 14px;
    background: #fff !important;
}

.staff-drawer-page .select2-container {
    width: 100% !important;
    min-width: 0 !important;
}

.staff-drawer-page .select2-container--default .select2-selection--single {
    display: flex;
    align-items: center;
    padding: 0 34px 0 12px !important;
}

.staff-drawer-page .select2-container--default .select2-selection--single .select2-selection__rendered {
    padding: 0 !important;
    font-size: 13px !important;
    line-height: 1.3 !important;
    color: #1f2937 !important;
}

.staff-drawer-page .select2-container--default .select2-selection--single .select2-selection__arrow {
    right: 8px !important;
    width: 20px !important;
}

.staff-drawer-page .select2-container--default .select2-selection--multiple {
    height: auto !important;
    min-height: 42px !important;
    padding: 5px 8px !important;
}

.staff-drawer-page .select2-container--default .select2-selection--multiple .select2-selection__rendered {
    gap: 4px;
}

.staff-drawer-page .select2-container--default .select2-selection--multiple .select2-search--inline .select2-search__field {
    margin-top: 0 !important;
    font-size: 13px !important;
}

.staff-drawer-page .select2-container--default .select2-selection--multiple .select2-selection__choice {
    padding: 4px 8px !important;
    font-size: 11.5px !important;
}

.staff-drawer-page .staff-drawer-profile-row {
    grid-template-columns: minmax(0, 1fr) !important;
    margin-bottom: 12px !important;
}

.staff-drawer-page .staff-drawer-profile-row .dropify-wrapper {
    min-height: 96px !important;
    height: 96px !important;
    border-radius: 16px !important;
    padding: 0 !important;
}

.staff-drawer-page .staff-drawer-profile-row .dropify-wrapper .dropify-message {
    padding: 12px 14px !important;
}

.staff-drawer-page .staff-drawer-profile-row .dropify-wrapper .dropify-message p {
    font-size: 12px !important;
    line-height: 1.45;
}

.staff-drawer-page .staff-drawer-profile-row .dropify-wrapper .dropify-preview .dropify-render img {
    max-height: 72px !important;
}

.staff-drawer-page .staff-drawer-profile-row .dropify-wrapper .dropify-preview .dropify-infos {
    padding-top: 8px !important;
}

.staff-drawer-page .input-with-text {
    gap: 8px;
}

.staff-drawer-page .input-with-text small {
    font-size: 11px;
    white-space: nowrap;
}

.staff-drawer-page .form-check {
    padding: 8px 12px 8px 34px;
    border-radius: 12px;
    min-height: 40px;
}

.staff-drawer-page .form-check-label {
    font-size: 12.5px;
    font-weight: 700;
}

.staff-drawer-page #selected-roles-display .badge {
    padding: 6px 10px;
    font-size: 11.5px;
}

.staff-drawer-page .staff-drawer-section-note {
    margin: -2px 0 10px !important;
    font-size: 11.5px !important;
}

.staff-drawer-page .staff-workflow-table-wrap {
    border-radius: 16px;
    overflow: hidden;
}

.staff-drawer-page .staff-workflow-table {
    width: 100%;
    table-layout: fixed;
}

.staff-drawer-page .staff-workflow-table thead th {
    padding: 10px 12px !important;
    font-size: 11px;
}

.staff-drawer-page .staff-workflow-table thead th:nth-child(1) {
    width: 22%;
}

.staff-drawer-page .staff-workflow-table thead th:nth-child(2) {
    width: 22%;
}

.staff-drawer-page .staff-workflow-table thead th:nth-child(3) {
    width: 56%;
}

.staff-drawer-page .staff-workflow-table td {
    padding: 8px 10px !important;
    font-size: 12px;
    line-height: 1.35;
}

.staff-drawer-page .staff-workflow-table td[rowspan] {
    min-width: 0;
    width: 22%;
    font-size: 12px;
}

.staff-drawer-page .staff-workflow-table td:nth-child(2) {
    width: 22%;
    font-weight: 700;
    color: #475569;
}

.staff-drawer-page .staff-workflow-table td select,
.staff-drawer-page .staff-workflow-table td .select2-container,
.staff-drawer-page .staff-workflow-table td .select2-selection--single {
    width: 100% !important;
    min-width: 0 !important;
}

.staff-drawer-page .staff-workflow-table td .custom-input,
.staff-drawer-page .staff-workflow-table td .form-control,
.staff-drawer-page .staff-workflow-table td .select2-container--default .select2-selection--single {
    min-height: 36px !important;
    height: 36px !important;
    font-size: 12px !important;
    padding-top: 6px !important;
    padding-bottom: 6px !important;
}

.staff-drawer-page .staff-workflow-table td .select2-container--default .select2-selection--single {
    padding-right: 30px !important;
}

.staff-drawer-page .staff-workflow-table td .text-danger {
    font-size: 11px;
    margin-top: 4px;
}

.staff-drawer-page .staff-form-footer,
.staff-drawer-page .staff-drawer-footer {
    margin: 14px -22px 0 !important;
    padding: 12px 22px calc(12px + env(safe-area-inset-bottom, 0px)) !important;
    min-height: 68px;
}

.staff-drawer-page .staff-form-footer .custom-add-btn.btn-cancel,
.staff-drawer-page .staff-form-footer .custom-add-btn.btn-submit {
    min-width: 142px;
    min-height: 44px !important;
    padding: 10px 18px !important;
    border-radius: 14px !important;
    font-size: 13px !important;
}

@media (max-width: 1199.98px) {
    .staff-drawer-page .staff-drawer-form {
        padding-inline: 18px !important;
    }

    .staff-drawer-page .staff-drawer-header {
        margin-inline: -18px !important;
        padding-inline: 18px !important;
    }

    .staff-drawer-page .staff-form-footer,
    .staff-drawer-page .staff-drawer-footer {
        margin-inline: -18px !important;
        padding-inline: 18px !important;
    }
}

@media (max-width: 767.98px) {
    .staff-drawer-page .staff-drawer-form {
        padding: 0 16px 118px !important;
    }

    .staff-drawer-page .staff-drawer-header {
        margin-inline: -16px !important;
        padding: 12px 16px !important;
    }

    .staff-drawer-page .staff-drawer-header-icon {
        width: 36px;
        height: 36px;
        font-size: 16px;
    }

    .staff-drawer-page .staff-drawer-header-title {
        font-size: 14px;
    }

    .staff-drawer-page .staff-section-card>.row {
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
    }

    .staff-drawer-page .staff-workflow-table {
        table-layout: auto;
    }

    .staff-drawer-page .staff-workflow-table td,
    .staff-drawer-page .staff-workflow-table th {
        white-space: normal;
    }

    .staff-drawer-page .staff-form-footer,
    .staff-drawer-page .staff-drawer-footer {
        margin-inline: -16px !important;
        padding-inline: 16px !important;
    }
}

/* ==========================================================================
   Enrollment Page Fix
   ========================================================================== */
.bos-enrollment-shell {
    padding-top: 0 !important;
}

.bos-enrollment-filter-card,
.bos-enrollment-results-card,
.bos-enrollment-meta-card,
.bos-enrollment-list-card {
    border-radius: 18px !important;
    border: 1px solid rgba(219, 228, 243, 0.9) !important;
    box-shadow: 0 10px 30px rgba(37, 42, 114, 0.06) !important;
}

.bos-enrollment-filter-card .bos-academic-card-body,
.bos-enrollment-results-card .bos-academic-card-body,
.bos-enrollment-list-card .bos-academic-card-body {
    padding: 24px !important;
}

.bos-enrollment-card-title {
    letter-spacing: -0.01em;
}

.bos-enrollment-list-card .bos-academic-actions,
.bos-enrollment-results-card .bos-academic-actions {
    margin-top: 20px !important;
}

.bos-enrollment-list-card .bos-academic-table code,
.bos-enrollment-results-card .bos-academic-table code {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    background: #eef2ff;
    color: #3730a3 !important;
    font-weight: 800;
}

@media (max-width: 991.98px) {

    .bos-enrollment-filter-card .bos-academic-card-body,
    .bos-enrollment-results-card .bos-academic-card-body,
    .bos-enrollment-list-card .bos-academic-card-body {
        padding: 20px !important;
    }
}

/* ==========================================================================
   Institutional Modernity Global Design System
   Namespaced as .im-* only
   ========================================================================== */
:root {
    --im-font-sans: "Public Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --im-color-primary: #3f41b5;
    --im-color-primary-strong: #2f319d;
    --im-color-primary-soft: #e9edff;
    --im-color-primary-border: #cdd6ff;
    --im-color-success: #10b981;
    --im-color-success-soft: #dcfce7;
    --im-color-success-ink: #047857;
    --im-color-danger: #e11d48;
    --im-color-danger-soft: #ffe4e6;
    --im-color-danger-ink: #be123c;
    --im-color-warning: #f59e0b;
    --im-color-warning-soft: #fef3c7;
    --im-color-warning-ink: #b45309;
    --im-color-info: #2563eb;
    --im-color-info-soft: #dbeafe;
    --im-color-info-ink: #1d4ed8;
    --im-color-surface: #ffffff;
    --im-color-surface-soft: #f8fbff;
    --im-color-surface-muted: #f1f5ff;
    --im-color-line: #dbe4f3;
    --im-color-line-strong: #c8d4ea;
    --im-color-text: #17263c;
    --im-color-text-soft: #64748b;
    --im-color-text-muted: #8b98ab;
    --im-shadow-sm: 0 4px 10px rgba(37, 42, 114, 0.06);
    --im-shadow-md: 0 12px 32px rgba(37, 42, 114, 0.08);
    --im-shadow-lg: 0 20px 48px rgba(37, 42, 114, 0.12);
    --im-radius-card: 24px;
    --im-radius-control: 16px;
    --im-radius-pill: 999px;
    --im-gutter: 16px;
    --im-section-gap: 32px;
    --im-space-2: 8px;
    --im-space-3: 12px;
    --im-space-4: 16px;
    --im-space-5: 20px;
    --im-space-6: 24px;
    --im-space-8: 32px;
    --im-space-10: 40px;
    --im-drawer-width: min(560px, 100%);
}

.im-font-sans {
    font-family: var(--im-font-sans);
}

.im-page {
    font-family: var(--im-font-sans);
    color: var(--im-color-text);
    background: transparent;
}

.im-bg-soft {
    background: transparent;
}

.im-text-display {
    font-family: var(--im-font-sans);
    font-size: clamp(2rem, 3vw, 2.5rem);
    line-height: 1.05;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--im-color-text);
}

.im-text-headline {
    font-family: var(--im-font-sans);
    font-size: clamp(1.5rem, 2vw, 2rem);
    line-height: 1.15;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--im-color-text);
}

.im-text-title {
    font-family: var(--im-font-sans);
    font-size: 1.25rem;
    line-height: 1.2;
    font-weight: 700;
    color: var(--im-color-text);
}

.im-text-body {
    font-family: var(--im-font-sans);
    font-size: 1rem;
    line-height: 1.65;
    font-weight: 400;
    color: var(--im-color-text);
}

.im-text-body-sm {
    font-family: var(--im-font-sans);
    font-size: 0.9375rem;
    line-height: 1.6;
    font-weight: 400;
    color: var(--im-color-text-soft);
}

.im-text-label {
    font-family: var(--im-font-sans);
    font-size: 0.8125rem;
    line-height: 1.4;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--im-color-text-soft);
}

.im-text-mono {
    font-family: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
    font-size: 0.875rem;
    line-height: 1.6;
}

.im-section-gap {
    margin-bottom: var(--im-section-gap);
}

.im-gutter {
    gap: var(--im-gutter);
}

.im-gap-2 {
    gap: var(--im-space-2);
}

.im-gap-3 {
    gap: var(--im-space-3);
}

.im-gap-4 {
    gap: var(--im-space-4);
}

.im-gap-6 {
    gap: var(--im-space-6);
}

.im-p-4 {
    padding: var(--im-space-4);
}

.im-p-6 {
    padding: var(--im-space-6);
}

.im-p-8 {
    padding: var(--im-space-8);
}

.im-px-gutter {
    padding-left: var(--im-gutter);
    padding-right: var(--im-gutter);
}

.im-py-4 {
    padding-top: var(--im-space-4);
    padding-bottom: var(--im-space-4);
}

.im-py-6 {
    padding-top: var(--im-space-6);
    padding-bottom: var(--im-space-6);
}

.im-card {
    background: var(--im-color-surface);
    border: 1px solid rgba(219, 228, 243, 0.9);
    border-radius: var(--im-radius-card);
}

.im-card-soft {
    background: var(--im-color-surface-soft);
}

.im-card-muted {
    background: var(--im-color-surface-muted);
}

.im-card-outline-primary {
    border: 1.5px solid rgba(63, 65, 181, 0.55);
}

.im-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--im-space-4);
    padding: var(--im-space-6);
    border-bottom: 1px solid rgba(219, 228, 243, 0.8);
}

.im-card-body {
    padding: var(--im-space-6);
}

.im-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--im-space-4);
    padding: var(--im-space-5) var(--im-space-6);
    border-top: 1px solid rgba(219, 228, 243, 0.8);
    background: rgba(248, 251, 255, 0.9);
}

.im-card-title {
    margin: 0;
    font-family: var(--im-font-sans);
    font-size: 1.125rem;
    line-height: 1.2;
    font-weight: 700;
    color: var(--im-color-text);
}

.im-card-subtitle {
    margin: 4px 0 0;
    font-family: var(--im-font-sans);
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--im-color-text-soft);
}

.im-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 44px;
    padding: 0 22px;
    border-radius: var(--im-radius-pill);
    border: 1px solid transparent;
    font-family: var(--im-font-sans);
    font-size: 0.9375rem;
    line-height: 1;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: transform 0.16s ease, filter 0.16s ease, background-color 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, color 0.16s ease;
}

.im-btn:hover {
    filter: brightness(1.05);
    text-decoration: none;
}

.im-btn:active {
    transform: scale(0.98);
}

.im-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px rgba(63, 65, 181, 0.25);
}

.im-btn:disabled,
.im-btn.is-disabled,
.im-btn[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.im-btn-primary {
    background: var(--im-color-primary);
    border-color: var(--im-color-primary);
    color: #ffffff;
    box-shadow: 0 10px 24px rgba(63, 65, 181, 0.18);
}

.im-btn-success {
    background: var(--im-color-success);
    border-color: var(--im-color-success);
    color: #ffffff;
}

.im-btn-danger {
    background: var(--im-color-danger);
    border-color: var(--im-color-danger);
    color: #ffffff;
}

.im-btn-secondary {
    background: #e9efff;
    border-color: #e9efff;
    color: var(--im-color-text);
}

.im-btn-ghost {
    background: transparent;
    border-color: var(--im-color-primary);
    color: var(--im-color-primary);
}

.im-btn-soft {
    background: var(--im-color-primary-soft);
    border-color: var(--im-color-primary-soft);
    color: var(--im-color-primary-strong);
}

.im-btn-sm {
    min-height: 38px;
    padding: 0 16px;
    font-size: 0.875rem;
}

.im-btn-lg {
    min-height: 52px;
    padding: 0 28px;
    font-size: 1rem;
}

.im-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 999px;
    border: 1px solid rgba(63, 65, 181, 0.14);
    background: #ffffff;
    color: var(--im-color-primary);
    box-shadow: 0 4px 12px rgba(37, 42, 114, 0.06);
    transition: transform 0.16s ease, background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
}

.im-icon-btn:hover {
    background: var(--im-color-primary);
    border-color: var(--im-color-primary);
    color: #ffffff;
}

.im-icon-btn:active {
    transform: scale(0.96);
}

.im-icon-btn-sm {
    width: 34px;
    height: 34px;
}

.im-icon-btn-lg {
    width: 48px;
    height: 48px;
}

.im-icon-btn-danger {
    color: var(--im-color-danger);
    border-color: rgba(225, 29, 72, 0.16);
}

.im-icon-btn-danger:hover {
    background: var(--im-color-danger);
    border-color: var(--im-color-danger);
    color: #ffffff;
}

.im-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 30px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid transparent;
    font-family: var(--im-font-sans);
    font-size: 0.8125rem;
    line-height: 1;
    font-weight: 700;
    white-space: nowrap;
}

.im-chip-dot::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: currentColor;
    flex: 0 0 auto;
}

.im-chip-success {
    background: var(--im-color-success-soft);
    color: var(--im-color-success-ink);
}

.im-chip-info {
    background: var(--im-color-info-soft);
    color: var(--im-color-info-ink);
}

.im-chip-danger {
    background: var(--im-color-danger-soft);
    color: var(--im-color-danger-ink);
}

.im-chip-warning {
    background: var(--im-color-warning-soft);
    color: var(--im-color-warning-ink);
}

.im-chip-muted {
    background: #eef2f7;
    color: #64748b;
}

.im-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--im-gutter);
}

.im-form-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.im-form-row-full {
    grid-column: 1 / -1;
}

.im-label {
    display: inline-block;
    margin: 0;
    font-family: var(--im-font-sans);
    font-size: 0.8125rem;
    line-height: 1.4;
    font-weight: 700;
    color: var(--im-color-text-soft);
}

.im-help {
    font-family: var(--im-font-sans);
    font-size: 0.75rem;
    line-height: 1.5;
    color: var(--im-color-text-muted);
}

.im-input,
.im-select,
.im-textarea {
    width: 100%;
    min-height: 46px;
    padding: 12px 16px;
    border: 1.5px solid var(--im-color-line);
    border-radius: var(--im-radius-control);
    background: #ffffff;
    color: var(--im-color-text);
    font-family: var(--im-font-sans);
    font-size: 0.9375rem;
    line-height: 1.4;
    transition: border-color 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease;
}

.im-textarea {
    min-height: 120px;
    resize: vertical;
}

.im-input::placeholder,
.im-textarea::placeholder {
    color: var(--im-color-text-muted);
}

.im-input:focus,
.im-select:focus,
.im-textarea:focus,
.im-field.is-focus .im-input,
.im-field.is-focus .im-select,
.im-field.is-focus .im-textarea {
    outline: none;
    border-color: var(--im-color-primary);
    box-shadow: 0 0 0 4px rgba(63, 65, 181, 0.12);
}

.im-input:disabled,
.im-select:disabled,
.im-textarea:disabled,
.im-field.is-disabled .im-input,
.im-field.is-disabled .im-select,
.im-field.is-disabled .im-textarea {
    background: #f3f6fc;
    color: #94a3b8;
    cursor: not-allowed;
}

.im-field.is-error .im-input,
.im-field.is-error .im-select,
.im-field.is-error .im-textarea {
    border-color: var(--im-color-danger);
    background: rgba(225, 29, 72, 0.04);
}

.im-error {
    font-family: var(--im-font-sans);
    font-size: 0.75rem;
    line-height: 1.4;
    font-weight: 600;
    color: var(--im-color-danger);
}

.im-input-group {
    display: flex;
    align-items: stretch;
    width: 100%;
}

.im-input-group .im-input,
.im-input-group .im-select {
    border-radius: var(--im-radius-control) 0 0 var(--im-radius-control);
}

.im-input-addon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 46px;
    padding: 0 14px;
    border: 1.5px solid var(--im-color-line);
    border-left: 0;
    border-radius: 0 var(--im-radius-control) var(--im-radius-control) 0;
    background: #ffffff;
    color: var(--im-color-text-soft);
}

.im-table-wrap {
    background: #ffffff;
    border: 1px solid rgba(219, 228, 243, 0.9);
    border-radius: var(--im-radius-card);
    box-shadow: var(--im-shadow-sm);
    overflow: hidden;
}

.im-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-family: var(--im-font-sans);
}

.im-table--flush thead th:first-child {
    border-top-left-radius: var(--im-radius-card);
}

.im-table--flush thead th:last-child {
    border-top-right-radius: var(--im-radius-card);
}

.im-table thead th {
    padding: 18px 20px;
    background: #eaf0ff;
    color: var(--im-color-text-soft);
    /* Global Data Table Typography Standard (task): 14px for both header
       and body — was 0.8125rem (13px) here vs 0.9375rem (15px) on tbody
       td below, an inconsistent pair on Kunos's own shared table
       primitive. Visual hierarchy against the body text is kept through
       weight/letter-spacing/uppercase/muted color, not through a smaller
       header size (task section 5). */
    font-size: 14px;
    line-height: 1.3;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(219, 228, 243, 0.9);
}

.im-table tbody td {
    padding: 12px 16px;
    color: var(--im-color-text);
    font-size: 14px;
    line-height: 1.45;
    border-bottom: 1px solid rgba(232, 237, 245, 0.95);
    background: #ffffff;
}

.im-table tbody tr:last-child td {
    border-bottom: 0;
}

.im-table.is-compact thead th {
    padding: 14px 16px;
}

.im-table.is-compact tbody td {
    padding: 14px 16px;
}

.im-table-user {
    display: flex;
    align-items: center;
    gap: 12px;
}

.im-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    font-size: 13px;
    border-radius: 999px;
    background: linear-gradient(135deg, #e8ebff 0%, #ccf8e4 100%);
    color: var(--im-color-primary);
    font-weight: 800;
}

.im-drawer {
    display: flex;
    flex-direction: column;
    width: var(--im-drawer-width);
    height: 100%;
    background: #ffffff;
    border-left: 1px solid rgba(219, 228, 243, 0.9);
    box-shadow: -20px 0 40px rgba(15, 23, 42, 0.1);
}

.im-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--im-space-4);
    padding: 18px 20px;
    border-bottom: 1px solid rgba(219, 228, 243, 0.85);
    background: rgba(255, 255, 255, 0.96);
}

.im-drawer-title-group {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.im-drawer-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 14px;
    background: var(--im-color-primary-soft);
    color: var(--im-color-primary);
    font-size: 1.125rem;
}

.im-drawer-title {
    margin: 0;
    font-family: var(--im-font-sans);
    font-size: 1.125rem;
    line-height: 1.25;
    font-weight: 800;
    color: var(--im-color-text);
}

.im-drawer-subtitle {
    margin: 2px 0 0;
    font-family: var(--im-font-sans);
    font-size: 0.75rem;
    line-height: 1.4;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--im-color-text-muted);
}

.im-drawer-body {
    flex: 1 1 auto;
    padding: 20px;
    overflow: auto;
}

.im-drawer-section {
    padding: 18px 0;
    border-bottom: 1px solid rgba(237, 242, 251, 0.95);
}

.im-drawer-section:last-child {
    border-bottom: 0;
}

.im-drawer-section-title {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 14px;
    font-family: var(--im-font-sans);
    font-size: 1rem;
    line-height: 1.3;
    font-weight: 800;
    color: var(--im-color-text);
}

.im-drawer-section-title::before {
    content: "";
    width: 4px;
    height: 26px;
    border-radius: 999px;
    background: var(--im-color-primary);
    flex: 0 0 auto;
}

.im-drawer-footer {
    position: sticky;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--im-space-4);
    padding: 16px 20px calc(16px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid rgba(219, 228, 243, 0.9);
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.im-logic-builder {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.im-logic-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 14px 16px;
    border: 1px solid rgba(219, 228, 243, 0.95);
    border-radius: 24px;
    background: #eef4ff;
}

.im-logic-row.is-then {
    grid-template-columns: auto minmax(0, 1fr) auto;
    background: rgba(63, 65, 181, 0.06);
    border-left: 4px solid var(--im-color-primary);
}

.im-logic-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 72px;
    min-height: 32px;
    padding: 0 12px;
    border-radius: 12px;
    font-family: var(--im-font-sans);
    font-size: 0.8125rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    color: #ffffff;
    background: var(--im-color-primary);
}

.im-logic-tag.is-success {
    background: #047857;
}

.im-preview-card {
    background: #dfeaff;
    border: 1px solid rgba(189, 206, 250, 0.9);
    border-radius: var(--im-radius-card);
    padding: var(--im-space-6);
}

.im-preview-title {
    margin: 0 0 10px;
    font-family: var(--im-font-sans);
    font-size: 0.8125rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--im-color-primary-strong);
}

.im-preview-body {
    margin: 0;
    font-family: var(--im-font-sans);
    font-size: 1rem;
    line-height: 1.65;
    font-weight: 600;
    color: var(--im-color-text);
}

@media (max-width: 991.98px) {
    .im-form-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .im-drawer {
        width: 100%;
    }

    .im-logic-row {
        grid-template-columns: minmax(0, 1fr);
    }

    .im-logic-row.is-then {
        grid-template-columns: minmax(0, 1fr);
    }

    .im-drawer-footer {
        flex-direction: column-reverse;
        align-items: stretch;
    }
}

.im-leave-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: var(--im-section-gap);
}

.im-leave-nav-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 46px;
    padding: 0 18px;
    border: 1px solid rgba(63, 65, 181, 0.14);
    border-radius: var(--im-radius-pill);
    background: #ffffff;
    color: var(--im-color-text-soft);
    text-decoration: none;
    font-family: var(--im-font-sans);
    font-size: 0.9375rem;
    font-weight: 700;
    transition: all 0.16s ease;
}

/* ==========================================================================
   KPI Institutional Modernity Page Helpers
   ========================================================================== */
.im-kpi-shell {
    width: 100%;
}

.im-kpi-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(280px, 0.9fr);
    gap: var(--im-space-6);
    align-items: stretch;
}

.im-kpi-hero-card {
    position: relative;
    background:
        radial-gradient(circle at top right, rgba(111, 200, 255, 0.2), transparent 36%),
        linear-gradient(135deg, #312f97 0%, #3f41b5 58%, #0ea5a4 130%);
    color: #ffffff;
    min-height: 260px;
}

.im-kpi-hero-card .im-card-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100%;
}

.im-kpi-hero-card .im-chip {
    width: fit-content;
}

.im-kpi-hero-title {
    margin: 18px 0 14px;
    color: #ffffff;
    max-width: 680px;
}

.im-kpi-hero-copy {
    max-width: 620px;
    color: rgba(255, 255, 255, 0.86);
}

.im-kpi-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: var(--im-space-6);
}

.im-kpi-summary-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--im-space-4);
}

.im-kpi-metric-card {
    min-height: 0;
}

.im-kpi-metric-label {
    margin-bottom: 10px;
    text-transform: uppercase;
}

.im-kpi-metric-value {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    margin-bottom: 10px;
    font-family: var(--im-font-sans);
    font-size: clamp(2rem, 3vw, 2.75rem);
    line-height: 0.95;
    font-weight: 800;
    color: var(--im-color-text);
    letter-spacing: -0.03em;
}

.im-kpi-metric-value span {
    font-size: 1rem;
    line-height: 1.2;
    color: var(--im-color-text-soft);
}

.im-kpi-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.im-kpi-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 46px;
    padding: 0 18px;
    border: 1px solid rgba(63, 65, 181, 0.16);
    border-radius: var(--im-radius-pill);
    background: #ffffff;
    color: var(--im-color-text-soft);
    text-decoration: none;
    font-family: var(--im-font-sans);
    font-size: 0.9375rem;
    line-height: 1;
    font-weight: 700;
    transition: transform 0.16s ease, border-color 0.16s ease, background-color 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
}

.im-kpi-tab:hover {
    color: var(--im-color-primary);
    text-decoration: none;
    box-shadow: var(--im-shadow-sm);
}

.im-kpi-tab.is-active {
    background: var(--im-color-primary-soft);
    border-color: rgba(63, 65, 181, 0.28);
    color: var(--im-color-primary-strong);
}

.im-kpi-tab[type="button"] {
    appearance: none;
    cursor: pointer;
}

.im-kpi-panel {
    display: none;
}

.im-kpi-panel.is-active {
    display: block;
}

.im-kpi-stack {
    display: flex;
    flex-direction: column;
    gap: var(--im-space-6);
}

.im-kpi-actions,
.im-kpi-table-actions,
.im-kpi-summary-inline,
.im-kpi-footer-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.im-kpi-table-title {
    max-width: 220px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.im-table td {
    white-space: nowrap;
}

.im-kpi-table-copy {
    font-family: var(--im-font-sans);
    font-size: 0.8125rem;
    line-height: 1.55;
    color: var(--im-color-text-soft);
}

.im-kpi-progress-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
    font-family: var(--im-font-sans);
    font-size: 0.8125rem;
    color: var(--im-color-text-soft);
}

.im-kpi-progress-meta strong {
    color: var(--im-color-primary-strong);
    font-weight: 800;
}

.im-kpi-progress {
    width: 100%;
    height: 8px;
    border-radius: 999px;
    background: #e6edf9;
    overflow: hidden;
}

.im-kpi-progress-bar {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #3f41b5 0%, #10b981 100%);
}

.im-kpi-mini-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--im-space-6);
}

.im-kpi-mini-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 18px;
    margin-bottom: 16px;
    background: var(--im-color-primary-soft);
    color: var(--im-color-primary);
    font-size: 1.2rem;
}

.im-kpi-mini-icon.is-success {
    background: var(--im-color-success-soft);
    color: var(--im-color-success-ink);
}

.im-kpi-empty {
    padding: 30px 20px !important;
    text-align: center;
    color: var(--im-color-text-soft) !important;
}

.im-kpi-accordion-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--im-color-text);
    font-family: var(--im-font-sans);
    font-size: 1rem;
    line-height: 1.3;
    font-weight: 700;
    text-align: left;
}

.im-kpi-accordion-toggle i {
    color: var(--im-color-text-soft);
}

@media (max-width: 991.98px) {

    .im-kpi-hero-grid,
    .im-kpi-mini-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 767.98px) {
    .im-kpi-shell {
        width: 100%;
    }

    .im-kpi-actions,
    .im-kpi-summary-inline,
    .im-kpi-footer-chips {
        width: 100%;
    }

    .im-kpi-actions>*,
    .im-kpi-summary-inline>*,
    .im-kpi-footer-chips>* {
        width: 100%;
        justify-content: center;
    }
}

.im-leave-nav-link:hover,
.im-leave-nav-link.is-active {
    background: var(--im-color-primary);
    border-color: var(--im-color-primary);
    color: #ffffff;
}

.im-leave-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--im-gutter);
}

.im-leave-summary-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 16px;
    font-size: 1.25rem;
    flex: 0 0 auto;
}

.im-leave-summary-icon.is-primary {
    background: #e6ebff;
    color: var(--im-color-primary);
}

.im-leave-summary-icon.is-success {
    background: #dff8ed;
    color: #0f9f6e;
}

.im-leave-summary-icon.is-warning {
    background: #fff1dd;
    color: #d97706;
}

.im-leave-summary-value {
    font-family: var(--im-font-sans);
    font-size: 1.625rem;
    line-height: 1.1;
    font-weight: 800;
    color: var(--im-color-text);
}

.im-leave-summary-value small {
    font-size: 0.9375rem;
    color: var(--im-color-primary);
    font-weight: 700;
}

.im-leave-hero-card {
    background: linear-gradient(135deg, #3f41b5 0%, #6554f1 55%, #18b981 100%);
    color: #ffffff;
}

.im-leave-hero-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 68px;
    height: 68px;
    border-radius: 22px;
    background: rgba(63, 65, 181, 0.08);
    color: var(--im-color-primary);
    font-size: 1.75rem;
}

.im-leave-tab-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.im-leave-tab {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 0 16px;
    border: 1px solid rgba(63, 65, 181, 0.12);
    border-radius: var(--im-radius-pill);
    background: #ffffff;
    color: var(--im-color-text-soft);
    text-decoration: none;
    font-family: var(--im-font-sans);
    font-size: 0.9375rem;
    font-weight: 700;
    transition: all 0.16s ease;
}

.im-leave-tab:hover,
.im-leave-tab.active,
.im-leave-tab.is-active {
    border-color: var(--im-color-primary);
    background: rgba(63, 65, 181, 0.08);
    color: var(--im-color-primary);
}

.im-leave-drawer-frame {
    width: 100%;
    height: calc(100vh - 77px);
    border: 0;
    display: block;
    background: #ffffff;
}

.im-leave-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--im-gutter);
}

.im-leave-note-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--im-gutter);
}

@media (max-width: 1199.98px) {
    .im-leave-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {

    .im-leave-summary-grid,
    .im-leave-detail-grid,
    .im-leave-note-list {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ==========================================================================
   Attendance Institutional Modernity Helpers
   ========================================================================== */
.im-attendance-shell {
    width: 100%;
}

.im-attendance-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--im-gutter);
}

.im-attendance-summary-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px;
    min-height: 88px;
}

.im-attendance-summary-icon {
    width: 52px;
    height: 52px;
    border-radius: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    flex: 0 0 auto;
}

.im-attendance-summary-icon.is-success {
    background: var(--im-color-success-soft);
    color: var(--im-color-success-ink);
}

.im-attendance-summary-icon.is-warning {
    background: var(--im-color-warning-soft);
    color: var(--im-color-warning-ink);
}

.im-attendance-summary-icon.is-danger {
    background: var(--im-color-danger-soft);
    color: var(--im-color-danger-ink);
}

.im-attendance-summary-icon.is-info {
    background: var(--im-color-info-soft);
    color: var(--im-color-info-ink);
}

.im-attendance-summary-label {
    margin-bottom: 6px;
}

.im-attendance-summary-value {
    margin: 0;
    font-family: var(--im-font-sans);
    font-size: clamp(1.75rem, 2.3vw, 2.25rem);
    line-height: 1;
    font-weight: 800;
    color: var(--im-color-text);
}

.im-attendance-card-header {
    align-items: flex-start;
}

.im-attendance-header-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

.im-attendance-filter-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.im-attendance-filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.im-attendance-row-actions {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.im-attendance-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-top: 16px;
}

.im-attendance-frame-wrap {
    padding: 0 !important;
    overflow: hidden !important;
    height: calc(100% - 60px);
}

.im-attendance-frame {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

.im-drawer-attendance-frame {
    width: 100%;
    max-width: none;
    height: 100%;
    border-left: 0;
    box-shadow: none;
}

.im-attendance-drawer-page {
    padding: 0 !important;
}

.im-attendance-drawer-page .container-fluid,
.im-attendance-drawer-page .row,
.im-attendance-drawer-page .col-md-12,
.im-attendance-drawer-page .col-12 {
    padding: 0;
    margin: 0;
}

.im-attendance-check-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.im-attendance-check-card {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 12px 14px;
    border: 1px solid rgba(219, 228, 243, 0.95);
    border-radius: 16px;
    background: #fff;
    color: var(--im-color-text);
    font-family: var(--im-font-sans);
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
}

.im-attendance-check-card input {
    margin: 0;
}

.im-attendance-check-card:hover {
    border-color: rgba(63, 65, 181, 0.35);
    background: #f9fbff;
}

@media (max-width: 1199.98px) {
    .im-attendance-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .im-attendance-shell {
        width: 100%;
    }

    .im-attendance-summary-grid,
    .im-attendance-check-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .im-attendance-pagination,
    .im-attendance-filter-bar,
    .im-attendance-header-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .im-attendance-header-actions .im-btn,
    .im-attendance-filter-bar .im-btn {
        width: 100%;
    }
}

.im-attendance-records-card {
    border-radius: 24px;
    overflow: hidden;
}

.im-attendance-records-card .im-attendance-table-responsive {
    border: 0;
}

.im-attendance-table-responsive {
    border-top: 1px solid rgba(219, 228, 243, 0.9);
}

.im-attendance-records-card .im-table {
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

.im-attendance-records-card .im-table thead th {
    border-top: 0;
}

.im-attendance-records-card .im-table tbody tr:last-child td {
    border-bottom: 0;
}

.im-attendance-records-card {
    border-radius: 24px;
    overflow: hidden;
}

.im-attendance-records-card .im-attendance-table-responsive {
    border: 0;
}

.im-attendance-records-card .im-table {
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

.im-attendance-records-card .im-table thead th:first-child,
.im-attendance-records-card .im-table thead th:last-child {
    border-radius: 0 !important;
}

.im-attendance-records-card .im-table thead th {
    background: #eaf0ff;
}

.im-attendance-records-card .im-table-wrap {
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

.im-table-clean-wrap {
    background: #ffffff;
    border: 1px solid rgba(219, 228, 243, 0.9);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: var(--im-shadow-sm);
}

.im-table-clean-wrap .im-table {
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin: 0;
}

.im-table-clean-wrap .im-table thead th:first-child,
.im-table-clean-wrap .im-table thead th:last-child {
    border-radius: 0 !important;
}

.im-table-clean-wrap .im-table tbody tr:last-child td {
    border-bottom: 0;
}

/* Inventory listing pages (Categories, Suppliers, Movements & Adjustments):
   the outer .im-card panel used to carry its own white background/border on
   top of .im-table-clean-wrap's own card look, producing a "double card"
   stack. Scoped to .inv-listing-card only — .im-card stays untouched
   everywhere else in the app. */
.im-page .inv-listing-card.im-card {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

/* Inventory > Categories: search/filter toolbar + empty states. Scoped to
   these specific classes so no other listing page or pagination component
   is affected. CSS Grid (not flexbox) is used deliberately: the global
   `.im-select, .im-textarea { width: 100% }` rule (search "width: 100%" in
   this file) fights flex-basis:auto sizing on <select> elements, forcing
   them to stretch full-width and wrap the toolbar onto separate rows. Grid
   track widths aren't affected by a child's own `width` property, so this
   sidesteps that interaction entirely instead of fighting it with more
   !important overrides. */
.inv-cat-toolbar-bar {
    background: #f8f9fc;
    border: 1px solid var(--im-color-line);
    border-radius: 16px;
    padding: 10px 14px
}

.inv-cat-toolbar {
    display: grid;
    grid-template-columns: minmax(200px, 1fr) 210px 160px auto;
    gap: 8px;
    align-items: end
}

.inv-cat-field {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0
}

.inv-cat-field-label {
    margin: 0;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--im-color-text-soft, #64748b)
}

.inv-cat-search-wrap {
    position: relative;
    display: flex;
    align-items: center;
    min-width: 0
}

.inv-cat-search-icon {
    position: absolute;
    top: 50%;
    left: 16px;
    transform: translateY(-50%);
    z-index: 1;
    font-size: 13px;
    line-height: 1;
    color: #94a3b8;
    pointer-events: none
}

/* Compound selector (wrapper + own class), not `.inv-cat-toolbar-search`
   alone: the global `.im-input { padding: 10px 18px !important; }` rule
   sits LATER in this file, so at equal specificity it would otherwise win
   the source-order tiebreak and silently override this padding regardless
   of !important. Raising specificity here wins the cascade unconditionally,
   without touching the shared `.im-input` rule used everywhere else.

   `-webkit-appearance`/`appearance: none` is the other half of the fix:
   `type="search"` inputs get the browser's own `searchfield` native
   rendering by default, which manages its own internal text-inset
   separately from the CSS box model — our `padding-left` was correct on
   paper but the browser was still positioning the caret/placeholder
   relative to its own native inset, not our padding, so the icon and text
   could still visually collide. Resetting appearance makes this input lay
   out exactly like a plain text input, where padding is the only thing
   controlling the text's start position. The native WebKit search
   decorations (magnifier/cancel icons) are hidden too since this field has
   its own custom icon and clear button. */
.inv-cat-search-wrap .inv-cat-toolbar-search {
    -webkit-appearance: none !important;
    appearance: none !important;
    box-sizing: border-box !important;
    width: 100% !important;
    height: 38px !important;
    min-height: 38px !important;
    padding: 6px 34px 6px 42px !important;
    font-size: 13px !important;
    line-height: 1.3 !important
}

.inv-cat-search-wrap .inv-cat-toolbar-search::-webkit-search-decoration,
.inv-cat-search-wrap .inv-cat-toolbar-search::-webkit-search-cancel-button,
.inv-cat-search-wrap .inv-cat-toolbar-search::-webkit-search-results-button,
.inv-cat-search-wrap .inv-cat-toolbar-search::-webkit-search-results-decoration {
    -webkit-appearance: none;
    display: none
}

.inv-cat-search-clear {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 0;
    padding: 2px;
    line-height: 1;
    color: #94a3b8;
    cursor: pointer
}

.inv-cat-search-clear:hover,
.inv-cat-search-clear:focus-visible {
    color: #475569
}

.inv-cat-toolbar-select {
    width: 100% !important;
    height: 38px !important;
    min-height: 38px !important;
    padding: 6px 12px !important;
    font-size: 13px !important
}

.inv-cat-toolbar-actions {
    display: flex;
    gap: 8px
}

.inv-cat-toolbar-btn {
    height: 38px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap
}

.inv-cat-empty {
    text-align: center;
    padding: 40px 20px
}

.inv-cat-empty i {
    font-size: 48px;
    color: #cbd5e1;
    display: block;
    margin-bottom: 12px
}

.inv-cat-empty p {
    color: #64748b;
    font-weight: 600;
    margin: 0 0 12px
}

@media(max-width:991.98px) {
    .inv-cat-toolbar {
        grid-template-columns: 1fr 1fr 1fr
    }

    .inv-cat-field-search {
        grid-column: 1/-1
    }
}

@media(max-width:575.98px) {
    .inv-cat-toolbar-bar {
        padding: 10px
    }

    .inv-cat-toolbar {
        grid-template-columns: 1fr 1fr;
        gap: 8px
    }

    .inv-cat-field-search {
        grid-column: 1/-1
    }

    .inv-cat-toolbar-actions {
        grid-column: 1/-1;
        display: grid;
        grid-template-columns: 1fr 1fr
    }

    .inv-cat-toolbar-btn {
        width: 100%;
        justify-content: center
    }
}

/* Inventory > Supplier Documents > Upload page. Scoped entirely to .sd-*
   classes on this one page — no other Supplier Document or Inventory view
   is affected. */
.sd-upload-formats-note {
    margin: -4px 0 16px;
    font-size: 12px;
    color: var(--im-color-text-soft, #64748b)
}

.sd-upload-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 24px;
    max-width: 960px;
    margin: 0 auto
}

.sd-upload-main {
    min-width: 0
}

.sd-upload-card {
    background: #fff;
    border: 1px solid var(--im-color-line);
    border-radius: 20px;
    padding: 28px;
    box-shadow: none
}

.sd-upload-stepper {
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(219, 228, 243, .7)
}

.sd-upload-stepper ol {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin: 0;
    padding: 0
}

.sd-upload-stepper li {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 700;
    color: var(--im-color-text-soft, #94a3b8)
}

.sd-upload-stepper li.is-current {
    color: var(--im-color-primary, #3f41b5)
}

.sd-step-index {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #eef0fb;
    color: var(--im-color-text-soft, #94a3b8);
    font-size: 10.5px
}

.sd-upload-stepper li.is-current .sd-step-index {
    background: var(--im-color-primary, #3f41b5);
    color: #fff
}

.sd-upload-note {
    margin: 10px 0 0;
    font-size: 12px;
    color: var(--im-color-text-soft, #64748b);
    display: flex;
    align-items: center;
    gap: 6px
}

.sd-dropzone {
    position: relative;
    border: 1.5px dashed #cbd5e1;
    border-radius: 16px;
    padding: 28px 20px;
    text-align: center;
    background: #f8f9fc;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease
}

.sd-dropzone:hover,
.sd-dropzone:focus-visible {
    border-color: var(--im-color-primary, #3f41b5);
    background: #f5f6ff
}

.sd-dropzone:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px rgba(63, 65, 181, .12)
}

.sd-dropzone.is-dragover {
    border-color: var(--im-color-primary, #3f41b5);
    background: #eef0ff
}

.sd-dropzone-icon {
    font-size: 34px;
    color: #94a3b8;
    display: block;
    margin-bottom: 10px
}

.sd-dropzone-empty h3 {
    font-size: 15px;
    font-weight: 700;
    margin: 0 0 4px;
    color: var(--im-color-text, #1e293b)
}

.sd-dropzone-helper {
    font-size: 12.5px;
    color: var(--im-color-text-soft, #64748b);
    margin: 0 0 16px
}

.sd-dropzone-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px
}

.sd-dropzone-actions .im-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px
}

.sd-action-mobile {
    display: none
}

.sd-dropzone-selected {
    display: flex;
    align-items: center;
    gap: 14px;
    text-align: left;
    padding: 4px
}

.sd-selected-thumb {
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    border-radius: 12px;
    overflow: hidden;
    background: #eef0fb;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: var(--im-color-primary, #3f41b5)
}

.sd-selected-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.sd-selected-info {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px
}

.sd-selected-info strong {
    font-size: 13.5px;
    overflow-wrap: anywhere
}

.sd-selected-actions {
    flex: 0 0 auto;
    display: flex;
    gap: 8px
}

.sd-visually-hidden-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0
}

.sd-dropzone-formats {
    margin: 10px 0 0;
    font-size: 11.5px;
    color: var(--im-color-text-soft, #94a3b8);
    text-align: center
}

.sd-field-row {
    margin-top: 20px
}

.sd-field-help {
    margin: 6px 0 0
}

.sd-duplicate-card {
    margin-top: 18px;
    padding: 16px;
    border: 1px solid #fde68a;
    border-radius: 14px;
    background: #fffbeb
}

.sd-duplicate-header {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #92400e;
    font-size: 13.5px
}

.sd-duplicate-header i {
    font-size: 16px
}

.sd-duplicate-explanation {
    margin: 6px 0 12px;
    font-size: 12.5px;
    color: #78350f
}

.sd-duplicate-fields .im-input {
    margin-top: 4px
}

.sd-duplicate-checkbox {
    align-items: center;
    cursor: pointer
}

.sd-upload-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px solid rgba(219, 228, 243, .7)
}

.sd-upload-guide {
    align-self: start;
    background: #f8f9fc;
    border: 1px solid var(--im-color-line);
    border-radius: 18px;
    padding: 20px
}

.sd-upload-guide h4 {
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--im-color-text-soft, #64748b);
    margin: 0 0 12px
}

.sd-upload-guide ol {
    margin: 0;
    padding-left: 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: 13px;
    color: var(--im-color-text, #1e293b)
}

@media(min-width:769px) {
    .sd-action-mobile {
        display: none !important
    }
}

@media(max-width:768px) {
    .sd-upload-page {
        padding-bottom: 84px
    }

    .sd-upload-layout {
        grid-template-columns: 1fr;
        max-width: 100%
    }

    .sd-upload-guide {
        margin-top: 20px
    }

    .sd-upload-card {
        padding: 20px
    }

    .sd-action-desktop {
        display: none
    }

    .sd-dropzone-actions {
        flex-direction: column;
        align-items: stretch
    }

    .sd-upload-footer {
        flex-direction: column-reverse
    }

    .sd-upload-footer .im-btn {
        width: 100%;
        justify-content: center
    }

    .sd-dropzone-selected {
        flex-wrap: wrap
    }

    .sd-selected-actions {
        width: 100%
    }

    .sd-selected-actions .im-btn {
        flex: 1 1 0
    }
}

/* Inventory > Items > Register New Item drawer: single scroll container.
   Only applied when embedded in the drawer iframe (.inv-item-drawer-page);
   the standalone full-page render keeps its original classes/behavior
   untouched. The previous markup used `min-height: 100vh` on the outer
   wrapper, which has no ceiling — once the three form cards' content
   exceeded one viewport (routine for this form), the wrapper grew past
   100vh, the iframe's own document got its own native scrollbar, and the
   inner `.im-drawer-body` (which also had `overflow-y:auto`) had no
   definite height to actually constrain against, so its scrollbar could
   appear too — two scrollbars for one form. Fixing the wrapper to exactly
   100vh with overflow:hidden, and making the form a column flex box with
   `min-height:0` on the scrolling item (the classic flexbox gotcha — without
   it a flex child's min-height defaults to its content size and never
   shrinks), leaves `.im-drawer-body` as the only element that can ever
   scroll, and `.im-drawer-footer` as a normal flex item that can never
   overlap it. */
/* background is plain white here (not the app's usual #f7f9ff page tint) —
   the drawer shell (.im-drawer) is already white, and create.blade.php/
   edit.blade.php's .im-drawer-body used to repeat the SAME #f7f9ff tint as
   its own inline background, stacking two tinted layers inside the white
   drawer and producing a "page inside the drawer" look. Only one flat white
   surface now; individual .im-card sections keep their own subtle border. */
.inv-item-drawer-page {
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background-color: #ffffff
}

.inv-item-drawer-form {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column
}

.inv-item-drawer-form .im-drawer-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    background-color: #ffffff
}

.inv-item-drawer-form .im-drawer-footer {
    flex: 0 0 auto
}

/* Register New Item / Edit Item drawer width. The shared .im-drawer base
   rule (see --im-drawer-width, currently min(560px,100%)) forces almost
   every field in this form into one narrow column — .im-drawer is used by
   ~35 other pages across CRM/HR/Projects/Finance, so that shared variable
   is never touched here. Instead this scoped class — applied only to the
   single <aside id="project-drawer"> in
   Modules/Inventory/resources/views/items/index.blade.php that hosts BOTH
   Register New Item and Edit Item (openHrDrawer() loads either route into
   the same iframe/drawer) — overrides the width for those two forms only.
   Same specificity as .im-drawer (single class), so source order alone
   decides the winner; no !important needed. */
.inv-item-drawer {
    width: min(1020px, 94vw);
    max-width: min(1020px, 94vw);
}

@media (min-width: 1500px) {
    .inv-item-drawer {
        width: min(1080px, 90vw);
        max-width: min(1080px, 90vw);
    }
}

@media (max-width: 991px) {
    .inv-item-drawer {
        width: 92vw;
        max-width: 92vw;
    }
}

@media (max-width: 700px) {
    .inv-item-drawer {
        width: 100vw;
        max-width: 100vw;
    }
}

/* The form itself renders inside an iframe (embed=staff-inline) whose
   document loads this same stylesheet, so the media queries above (and
   these below) respond to the iframe's own width — which fills the drawer
   — not the parent page's viewport. Nothing in .im-card/.im-drawer-body
   sets a max-width, so once the drawer is wider the existing Bootstrap
   .row/.col-md-6 grid already used throughout create.blade.php/edit.blade.php
   naturally gets more horizontal room; this block only adds the padding
   scale the wider layout needs (the conflicting hardcoded inline
   padding:20px on both elements was removed from create.blade.php/
   edit.blade.php so this compound selector — .inv-item-drawer-form is more
   specific than the shared .im-drawer-body/.im-drawer-footer base rules —
   can take effect without !important). Composite builder dropdown clipping
   is fixed separately via Select2's dropdownParent option, not CSS — see
   composite-builder.blade.php. */
.inv-item-drawer-form .im-drawer-body {
    padding: 32px 36px;
}

@media (max-width: 991px) {
    .inv-item-drawer-form .im-drawer-body {
        padding: 24px 26px;
    }
}

@media (max-width: 700px) {
    .inv-item-drawer-form .im-drawer-body {
        padding: 16px 18px;
    }
}

.inv-item-drawer-form .im-drawer-footer {
    padding: 14px 36px;
}

@media (max-width: 700px) {
    .inv-item-drawer-form .im-drawer-footer {
        padding: 12px 18px;
        flex-direction: column-reverse;
        gap: 8px;
    }

    .inv-item-drawer-form .im-drawer-footer>* {
        width: 100%;
        text-align: center;
    }
}

/* While ANY drawer is open (existing .bos-drawer-open body class, already
   toggled by every openHrDrawer()/closeHrDrawer() pair in this module),
   hide the floating Kunos AI launcher/window so it can never sit on top of
   a drawer's Save/Cancel controls or scrollbar. Restored automatically the
   moment the class is removed on close — no JS change needed here. */
body.bos-drawer-open .bos-ai-launcher,
body.bos-drawer-open .bos-ai-window {
    display: none !important;
}

/* Bukku "Resolve Bukku Mapping" drawer (Finance → Export/Sync GL → Bukku
   Preview) doesn't use the shared .bos-drawer-open class — it's scoped to
   its own .bukku-drawer-open body class instead, toggled by
   openGlResolveDrawer()/closeGlResolveDrawer() in bukku-sync.blade.php, so
   this stays narrowly scoped to that one drawer only (no effect on the
   mobile-nav rules above, which this drawer doesn't need). Same actual
   Kunos AI widget selectors as the rule above — .bos-ai-launcher (the
   floating button) and .bos-ai-window (the expanded chat panel), both
   defined in layouts/partials/bos-ai-assistant.blade.php. Restored
   automatically the instant the class is removed — no other CSS changes
   to the widget's own design/position/functionality. */
body.bukku-drawer-open .bos-ai-launcher,
body.bukku-drawer-open .bos-ai-window {
    display: none !important;
}

/* The global mobile bottom nav renders at z-index 2147483647 — far above
   any drawer's own z-index:1100 — so on a mobile viewport it would sit on
   top of a drawer's footer/Save button even though the drawer is the
   active, focused UI. Hide it for the same "any drawer is open" duration
   as the AI launcher above; it reappears automatically once the class is
   removed on close.
   Also covers body.bos-mobile-sidebar-open — the main mobile navigation
   drawer (bos-sidebar.js's setMobileOpen()) uses that class, not
   bos-drawer-open, but its own z-index (2147483645, see #mobile-sidebar's
   own comment) is likewise below the bottom nav's, so its footer
   ("Log Keluar"/logout) was the same kind of unreachable-behind-the-bottom-
   -nav target this rule already exists to prevent. */
body.bos-drawer-open .global-mobile-bottom-nav,
body.bos-drawer-open .mobile-bottom-nav,
body.bos-drawer-open .mobile-dashboard-nav,
body.bos-drawer-open .global-mobile-menu-btn,
body.bos-mobile-sidebar-open .global-mobile-bottom-nav,
body.bos-mobile-sidebar-open .mobile-bottom-nav,
body.bos-mobile-sidebar-open .mobile-dashboard-nav,
body.bos-mobile-sidebar-open .global-mobile-menu-btn {
    display: none !important;
}

/* Register New Item drawer — "Scan Barcode" beside the existing Barcode
   input (input itself is untouched; this only wraps it). */
.inv-barcode-field-row {
    display: flex;
    gap: 8px;
    align-items: center
}

.inv-barcode-field-row .im-input {
    flex: 1 1 auto;
    min-width: 0
}

.inv-barcode-field-row .inv-scan-trigger {
    flex: 0 0 auto;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 6px
}

/* Shared "Scan Barcode" modal (Items index + Register New Item drawer). */
.inv-scan-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1300;
    background: rgba(15, 23, 42, .55)
}

.inv-scan-modal {
    position: fixed;
    inset: 0;
    z-index: 1301;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px
}

.inv-scan-panel {
    width: min(420px, 100%);
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(15, 23, 42, .28)
}

.inv-scan-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid var(--im-color-line)
}

.inv-scan-body {
    padding: 16px;
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0
}

.inv-scan-footer {
    padding: 12px 16px;
    border-top: 1px solid var(--im-color-line);
    display: flex;
    justify-content: flex-end
}

.inv-scan-camera-wrap {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    background: #0f172a;
    aspect-ratio: 4/3
}

.inv-scan-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block
}

.inv-scan-frame {
    position: absolute;
    inset: 14%;
    border: 3px solid rgba(255, 255, 255, .85);
    border-radius: 12px;
    box-shadow: 0 0 0 999px rgba(15, 23, 42, .35)
}

.inv-scan-status {
    margin: 10px 0 0;
    font-size: 12.5px;
    color: var(--im-color-text-soft, #64748b);
    text-align: center
}

.inv-scan-result {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px
}

.inv-scan-result-row {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 6px 0;
    border-bottom: 1px solid rgba(219, 228, 243, .7);
    font-size: 12.5px
}

.inv-scan-result-row span {
    color: var(--im-color-text-soft, #64748b)
}

.inv-scan-result-row strong {
    text-align: right;
    overflow-wrap: anywhere
}

.inv-scan-duplicate-note {
    margin: 8px 0 0;
    font-size: 12px;
    color: #92400e;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 10px;
    padding: 8px 10px
}

.inv-scan-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px
}

.inv-scan-manual {
    margin-top: 12px
}

.inv-scan-manual-row {
    display: flex;
    gap: 8px;
    margin-top: 4px
}

.inv-scan-manual-row .im-input {
    flex: 1 1 auto;
    min-width: 0
}

/* Standalone Receive Stock form inside the scan-result panel. Records a stock
   movement (quantity received), never a replacement balance. */
.inv-scan-receive {
    margin-top: 12px;
    padding: 12px;
    border: 1px solid var(--im-color-line);
    border-radius: 12px;
    background: var(--im-color-surface-soft, #f8fafc)
}

.inv-scan-receive__title {
    margin: 0 0 10px;
    font-size: 13px;
    font-weight: 700;
    color: var(--im-color-text, #0f172a)
}

.inv-scan-receive__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px
}

.inv-scan-receive__grid .im-label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12px;
    margin: 0
}

.inv-scan-receive__grid .im-input {
    width: 100%
}

.inv-scan-receive__preview {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px dashed var(--im-color-line);
    font-size: 12.5px
}

.inv-scan-receive__preview span {
    color: var(--im-color-text-soft, #64748b);
    display: inline-flex;
    align-items: center;
    gap: 6px
}

.inv-scan-receive__preview strong {
    color: var(--im-color-text, #0f172a);
    font-size: 14px
}

.inv-scan-receive__error {
    margin: 10px 0 0;
    font-size: 12px;
    color: #b91c1c;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 10px;
    padding: 8px 10px
}

@media(max-width:575.98px) {
    .inv-scan-actions {
        flex-direction: column
    }

    .inv-scan-actions .im-btn {
        width: 100%
    }

    .inv-barcode-field-row {
        flex-direction: column;
        align-items: stretch
    }

    .inv-scan-receive__grid {
        grid-template-columns: 1fr
    }
}

/* Inventory dashboard — "Stock by Category" widget: capped at a maximum of
   8 stocked categories server-side, so this max-height is a compact/scroll
   safety net rather than the thing doing the limiting. */
.inv-cat-stock-list {
    max-height: 360px;
    overflow-y: auto;
    padding-right: 2px;
}

.inv-cat-stock-view-all {
    flex-shrink: 0;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--im-color-primary, #3f41b5);
    text-decoration: none;
    white-space: nowrap;
}

.inv-cat-stock-view-all:hover {
    text-decoration: underline;
}

.inv-cat-stock-zero-note {
    margin: 12px 0 0;
    padding-top: 10px;
    border-top: 1px dashed rgba(219, 228, 243, 0.9);
    color: var(--im-color-text-soft, #64748b);
    font-size: 11.5px;
    text-align: center;
}

@media (max-width: 575.98px) {
    .inv-cat-stock-list {
        max-height: 320px;
    }
}

.im-section-heading {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.im-drawer-footer.im-drawer-footer-split {
    justify-content: space-between !important;
}

.im-attendance-drawer-page .im-attendance-summary-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.im-attendance-drawer-page .im-attendance-summary-card {
    min-height: 96px;
    padding: 16px;
}

.im-attendance-drawer-page .im-attendance-summary-icon {
    width: 48px;
    height: 48px;
    font-size: 1.25rem;
}

.im-attendance-drawer-page .im-attendance-summary-value {
    font-size: 1.75rem;
}

.im-attendance-drawer-page .im-attendance-summary-label {
    font-size: 0.75rem;
}

@media (max-width: 480px) {
    .im-attendance-drawer-page .im-attendance-summary-grid {
        grid-template-columns: 1fr;
    }
}

/* Institutional Modernity - Staff Management Refactor */
.im-table .name-column .staff-component {
    display: inline-flex;
    align-items: center;
    max-width: 260px;
    vertical-align: middle;
}

.im-table .name-column .staff-component .body {
    min-width: 0;
}

.im-table .name-column .staff-component .name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block !important;
}

.im-table .name-column .staff-component .name span {
    display: inline-block;
    max-width: 150px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
}

.im-table .name-column .staff-component .position {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.im-table tbody td {
    vertical-align: middle !important;
}

/* Ensure actions div doesn't wrap and stays circular */
.im-table .action-links {
    display: flex !important;
    gap: 8px !important;
    justify-content: center !important;
    align-items: center !important;
    white-space: nowrap !important;
}

.im-table .action-links .im-icon-btn {
    flex: 0 0 auto !important;
}

.im-table-pagination {
    display: flex;
    justify-content: center;
    padding: 16px 20px;
    border-top: 1px solid rgba(219, 228, 243, 0.9);
    background: #ffffff;
}

.im-table-pagination .pagination {
    display: flex;
    gap: 10px;
    margin: 0;
}

/* System Settings Final UI Polish (task): this is the one shared Kunos
   pagination component (vendor/pagination/custom-pagination.blade.php),
   reused by ~40 pages across the app — standardizing it here fixes the
   "tiny circular" pagination everywhere it appears at once, per the
   task's own reference screenshot (larger rounded-square buttons, filled
   purple active state, purple-outlined inactive state) — rather than
   inventing a second/third pagination system. Pages with their own
   separately-scoped pagination CSS (.project-report-pagination,
   .log-routes-pagination, .ros-pagination__links, .pagination-page-num)
   are untouched — none of them nest inside .im-table-pagination. */
.im-table-pagination .page-item .page-link {
    min-width: 44px;
    height: 44px;
    padding: 0 4px;
    border-radius: 8px;
    border: 1.5px solid var(--im-color-primary);
    background: #ffffff;
    color: var(--im-color-primary);
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.im-table-pagination .page-item.active .page-link {
    background: var(--im-color-primary);
    border-color: var(--im-color-primary);
    color: #ffffff;
}

.im-table-pagination .page-item.disabled .page-link {
    opacity: 0.45;
}

/* Previous/Next are the first and last <li> in this component's markup —
   chevron-only per the task ("no unnecessary large enclosing box"),
   visually distinct from the numbered rounded-square page buttons. */
.im-table-pagination .page-item:first-child .page-link,
.im-table-pagination .page-item:last-child .page-link {
    min-width: 32px;
    border: none;
    background: transparent;
    color: var(--im-color-primary);
    font-weight: 400;
}

.im-table-pagination .page-item:first-child.disabled .page-link,
.im-table-pagination .page-item:last-child.disabled .page-link {
    color: var(--im-color-text-soft);
}

/* --- Staff Drawer Compact Layout Fixes --- */
body.embedded-content-body,
body.embedded-content-body #app {
    height: 100vh !important;
    overflow: hidden !important;
}

body.embedded-content-body main.embedded-main {
    height: 100vh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

.embedded-content-body .im-drawer {
    width: 100% !important;
    height: 100vh !important;
    border: none !important;
    box-shadow: none !important;
}

.im-drawer .im-input,
.im-drawer .im-select,
.im-drawer .im-textarea,
body.embedded-content-body .im-input,
body.embedded-content-body .im-select,
body.embedded-content-body .im-textarea {
    min-height: 40px !important;
    padding: 8px 12px !important;
    font-size: 13.5px !important;
    border-radius: 16px !important;
}

.im-drawer .im-textarea,
body.embedded-content-body .im-textarea {
    min-height: 72px !important;
}

.im-drawer .select2-container--default .select2-selection--single,
.im-drawer .select2-container--default .select2-selection--multiple,
body.embedded-content-body .select2-container--default .select2-selection--single,
body.embedded-content-body .select2-container--default .select2-selection--multiple {
    min-height: 40px !important;
    border: 1.5px solid var(--im-color-line) !important;
    border-radius: 16px !important;
    background: #ffffff !important;
}

/* --- Academic Penetapan + shared custom select polish --- */
.bos-select-custom-container {
    min-width: 0;
}

.bos-select-custom-trigger {
    width: 100%;
    min-width: 0;
    gap: 10px;
    white-space: normal !important;
    appearance: none;
    -webkit-appearance: none;
    border: 1.5px solid var(--im-color-line);
    background: #ffffff;
    box-sizing: border-box;
    text-align: left;
    font-family: inherit;
}

.bos-select-custom-label {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bos-select-custom-icon,
.bos-select-custom-check-icon {
    flex: 0 0 auto;
}

.bos-select-custom-dropdown {
    left: 0;
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
    overflow-y: auto;
    max-height: 280px;
}

.bos-select-custom-option {
    width: 100%;
    min-width: 0;
    gap: 10px;
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    background: transparent;
    box-sizing: border-box;
    text-align: left;
    font-family: inherit;
}

.bos-select-custom-option>span {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.im-table-pagination-split {
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.im-table-pagination-split .im-card-subtitle {
    margin: 0;
}

.im-penetapan-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.im-penetapan-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
}

.im-penetapan-stat {
    padding: 20px 22px;
}

.im-penetapan-stat .im-text-headline {
    margin: 8px 0 4px;
}

.im-penetapan-empty {
    padding: 48px 24px;
    text-align: center;
}

.im-penetapan-calendar-shell {
    overflow: hidden;
}

.im-penetapan-calendar-shell .fc {
    font-family: 'Public Sans', sans-serif;
}

.im-penetapan-calendar-shell #calendar {
    margin: 0;
}

@media (max-width: 767.98px) {
    .im-table-pagination-split {
        justify-content: center;
    }
}

.im-drawer .select2-container--default .select2-selection--single {
    height: 40px !important;
    padding: 8px 12px !important;
    display: flex !important;
    align-items: center !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%2364748b' class='bi bi-chevron-down' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 14px center !important;
    background-size: 12px !important;
    padding-right: 36px !important;
}

.im-drawer .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--im-color-text) !important;
    padding: 0 !important;
    line-height: 1.3 !important;
}

.im-drawer .select2-container--default .select2-selection--single .select2-selection__arrow {
    display: none !important;
}

.im-drawer .select2-container--default .select2-selection--multiple {
    height: auto !important;
    padding: 4px 12px !important;
}

.im-drawer .select2-container--default .select2-selection--multiple .select2-selection__choice {
    border: 1px solid rgba(76, 80, 217, 0.18) !important;
    border-radius: 999px !important;
    background: #eef2ff !important;
    color: #3730a3 !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    padding: 2px 8px !important;
    margin: 2px !important;
}

.im-drawer .select2-container--default.select2-container--focus .select2-selection--single,
.im-drawer .select2-container--default.select2-container--focus .select2-selection--multiple {
    border-color: var(--im-color-primary) !important;
    box-shadow: 0 0 0 4px rgba(63, 65, 181, 0.12) !important;
}

.im-drawer select.im-select {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%2364748b' class='bi bi-chevron-down' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 14px center !important;
    background-size: 12px !important;
    padding-right: 36px !important;
}

.im-drawer .im-drawer-footer {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 12px !important;
}

.im-drawer .im-drawer-footer .im-btn {
    flex: 1 1 auto !important;
    width: auto !important;
    margin: 0 !important;
}

.im-workflow-cards {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.im-workflow-card {
    border: 1.5px solid var(--im-color-line);
    border-radius: 16px;
    background: var(--im-color-surface);
    overflow: hidden;
}

.im-workflow-card-header {
    background: var(--im-color-surface-soft);
    padding: 8px 14px;
    border-bottom: 1.5px solid var(--im-color-line);
}

.im-workflow-card-badge {
    font-size: 11px;
    font-weight: 800;
    color: var(--im-color-primary-strong);
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.im-workflow-card-body {
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Custom Dropdown Select overrides for Institutional Modernity */
.bos-select-custom-trigger,
.bos-select-custom-dropdown {
    border-radius: 16px !important;
    border-color: var(--im-color-line) !important;
}

.bos-select-custom-trigger:focus,
.bos-select-custom-container.open .bos-select-custom-trigger {
    border-color: var(--im-color-primary) !important;
    box-shadow: 0 0 0 4px rgba(63, 65, 181, 0.12) !important;
}

.bos-select-custom-option.selected {
    background-color: var(--im-color-primary) !important;
    color: #ffffff !important;
}

.bos-select-custom-option.selected .bos-select-custom-check-icon {
    color: #ffffff !important;
}

.bos-select-custom-option:not(.selected) .bos-select-custom-check-icon {
    color: transparent !important;
}

.bos-select-custom-trigger:hover,
.bos-select-custom-option:hover {
    border-color: var(--im-color-primary) !important;
}

.bos-select-custom-dropdown {
    overscroll-behavior: contain;
}

.im-student-program-filter {
    min-width: 260px;
}

.bos-select-custom-trigger {
    white-space: nowrap;
}

.bos-select-custom-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Schedule Settings (/planner) calendar layout ─────────────── */
.im-penetapan-schedule-page {
    /* Shared Kunos-aligned tones for the calendar + Event Details modal */
    --im-sched-ink: #1f2a44;
    --im-sched-muted: #6b7a99;
    --im-sched-event-bg: #5b5fe0;
    --im-sched-event-bg-strong: #4a4ed4;
    /* Month view uses a slightly softer, flat indigo so a stack of events
       on one day reads lighter than the week-view gradient blocks. */
    --im-sched-event-bg-soft: #7175e6;
}

.im-penetapan-schedule-page .fc {
    font-family: 'Public Sans', sans-serif;
    --fc-small-font-size: 0.75rem;
    --fc-neutral-text-color: var(--im-sched-muted);
    --fc-now-indicator-color: #e0457b;
}

/* Filter card — one compact horizontal row */
.im-schedule-filter-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 14px;
}

.im-schedule-filter-row .im-form-row {
    flex: 1 1 180px;
    min-width: 158px;
    margin-bottom: 0;
}

.im-schedule-filter-row .im-form-row:nth-child(2) {
    flex: 1.5 1 240px;
}

.im-schedule-filter-actions {
    display: flex;
    gap: 8px;
    flex: 0 0 auto;
}

/* Calendar card shell */
.im-schedule-card {
    padding: 0;
    overflow: hidden;
}

.im-schedule-card-head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 18px 20px;
    border-bottom: 1px solid var(--im-color-line);
}

.im-schedule-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: var(--im-color-primary-soft, #f0efff);
    color: var(--im-color-primary-strong, #3f41b5);
    font-size: 1.05rem;
    flex: 0 0 auto;
}

.im-schedule-calendar {
    padding: 16px 20px 4px;
}

.im-schedule-hint {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin: 4px 20px 18px;
    padding: 12px 14px;
    border-radius: 12px;
    background: var(--im-color-surface-soft, #f7f8fb);
    border: 1px solid var(--im-color-line);
}

.im-schedule-hint-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--im-color-primary-strong, #3f41b5);
    flex: 0 0 auto;
}

.im-schedule-hint-text {
    font-size: 0.875rem;
    color: var(--im-color-text-muted);
}

/* FullCalendar toolbar inside the card */
.im-penetapan-schedule-page .fc .fc-toolbar.fc-header-toolbar {
    gap: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.im-penetapan-schedule-page .fc .fc-toolbar-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--im-sched-ink);
    letter-spacing: -0.01em;
}

/* #calendar id keeps these ahead of the legacy "#calendar .fc-button-primary"
   rule further up this file. */
.im-penetapan-schedule-page #calendar .fc-button,
.im-penetapan-schedule-page #calendar .fc-button-primary {
    border-radius: 999px;
    border: 1px solid rgba(76, 80, 217, 0.16);
    background-color: #ffffff;
    background-image: none;
    color: var(--im-color-primary);
    box-shadow: none;
    padding: 0.45rem 0.9rem;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: capitalize;
}

.im-penetapan-schedule-page #calendar .fc-button .fc-icon {
    font-size: 1.15em;
    vertical-align: middle;
}

.im-penetapan-schedule-page #calendar .fc-button-primary:not(:disabled).fc-button-active,
.im-penetapan-schedule-page #calendar .fc-button-primary:not(:disabled):active,
.im-penetapan-schedule-page #calendar .fc-button:focus,
.im-penetapan-schedule-page #calendar .fc-button:hover {
    background-color: var(--im-color-primary);
    background-image: none;
    color: #ffffff;
    border-color: var(--im-color-primary);
    box-shadow: 0 0 0 4px rgba(63, 65, 181, 0.12);
}

.im-penetapan-schedule-page #calendar .fc-button-primary:disabled {
    background-color: #ffffff;
    color: var(--im-color-primary);
    opacity: 0.45;
}

.im-penetapan-schedule-page #calendar .fc-button-group > .fc-button {
    border-radius: 999px;
}

/* Grid frame + softened chrome */
.im-penetapan-schedule-page .fc .fc-view-harness {
    border: 1px solid var(--im-color-line);
    border-radius: 14px;
    overflow: hidden;
    background: #ffffff;
}

.im-penetapan-schedule-page .fc-theme-standard .fc-scrollgrid {
    border: 0;
}

.im-penetapan-schedule-page .fc-theme-standard td,
.im-penetapan-schedule-page .fc-theme-standard th {
    border-color: rgba(224, 230, 244, 0.9);
}

.im-penetapan-schedule-page .fc .fc-col-header-cell {
    background: var(--im-color-surface-soft, #f7f8fb);
}

.im-penetapan-schedule-page .fc .fc-col-header-cell-cushion {
    color: var(--im-sched-ink);
    font-weight: 600;
    font-size: 0.78rem;
    letter-spacing: 0.01em;
    padding: 8px 4px;
    text-decoration: none;
}

.im-penetapan-schedule-page .fc .fc-timegrid-slot {
    height: 3rem;
}

.im-penetapan-schedule-page .fc .fc-timegrid-axis-cushion,
.im-penetapan-schedule-page .fc .fc-timegrid-slot-label-cushion {
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--im-sched-muted);
}

.im-penetapan-schedule-page .fc .fc-day-today {
    background: rgba(63, 65, 181, 0.04);
}

/* Event cards — course code strongest, time supporting, lecturer/room muted.
   A near-solid indigo gradient is used (not a flat colour) so it stays on the
   Kunos theme regardless of the per-course colour the endpoint sends inline. */
.im-penetapan-schedule-page .fc-timegrid-event,
.im-penetapan-schedule-page .fc-daygrid-event {
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background-image: linear-gradient(160deg, var(--im-sched-event-bg) 0%, var(--im-sched-event-bg-strong) 100%);
    box-shadow: 0 3px 10px rgba(74, 78, 212, 0.20);
    padding: 0;
    cursor: pointer;
    transition: box-shadow 0.15s ease, transform 0.15s ease, filter 0.15s ease;
}

.im-penetapan-schedule-page .fc-timegrid-event:hover,
.im-penetapan-schedule-page .fc-daygrid-event:hover {
    filter: brightness(1.06);
    box-shadow: 0 8px 20px rgba(74, 78, 212, 0.32);
    transform: translateY(-1px);
    z-index: 5;
}

.im-penetapan-schedule-page .fc-timegrid-event .fc-event-main,
.im-penetapan-schedule-page .fc-daygrid-event .fc-event-main {
    padding: 4px 6px;
    color: #ffffff;
}

.im-sched-ev {
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow: hidden;
    line-height: 1.25;
}

/* Course code — most prominent */
.im-sched-ev-code {
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Time — smaller supporting text */
.im-sched-ev-time {
    font-size: 0.68rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.88);
}

/* Lecturer + room — smallest, softest, single-line ellipsis */
.im-sched-ev-meta {
    font-size: 0.66rem;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.78);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Month view (dayGridMonth) — compact Kunos calendar ───────────
   FC renders month timed-events as a low-contrast "dot + dark title"
   list by default; eventDisplay:'block' + these rules give solid,
   white-on-indigo single-line cards in a tighter grid. The #calendar id
   and, where noted, !important are needed to beat FC's own injected
   .fc-daygrid-* rules and the legacy
   "#calendar .fc-event-title{font-size:.688rem}" block earlier here. */

/* Grid — softer borders, tighter cells, room for ~3 events, no fixed height.
   A generic table rule elsewhere puts 24px left/right padding on every <td>,
   which here squeezes each month cell's content to ~83px of a 133px column.
   Zero it out for the month grid so events fill the cell. */
.im-penetapan-schedule-page #calendar .fc-dayGridMonth-view td.fc-daygrid-day {
    padding: 0 !important;
}

.im-penetapan-schedule-page #calendar .fc-dayGridMonth-view .fc-daygrid-day-frame {
    min-height: 96px;
    padding: 2px;
}

.im-penetapan-schedule-page #calendar .fc-dayGridMonth-view .fc-daygrid-day-events {
    width: 100%;
    margin-top: 2px;
    padding: 0 3px 3px;
}

.im-penetapan-schedule-page #calendar .fc-dayGridMonth-view .fc-daygrid-day-events .fc-daygrid-event-harness {
    width: 100%;
}

.im-penetapan-schedule-page #calendar .fc-dayGridMonth-view .fc-daygrid-day-bottom {
    padding: 1px 5px 0;
}

/* Date number — consistent top-right */
.im-penetapan-schedule-page #calendar .fc-dayGridMonth-view .fc-daygrid-day-top {
    flex-direction: row;
    justify-content: flex-end;
    padding: 5px 7px 2px;
}

.im-penetapan-schedule-page #calendar .fc-dayGridMonth-view .fc-daygrid-day-number {
    padding: 0;
    font-size: 0.76rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--im-sched-ink);
    text-decoration: none;
}

.im-penetapan-schedule-page #calendar .fc-dayGridMonth-view .fc-day-other .fc-daygrid-day-number {
    color: var(--im-sched-muted);
    opacity: 0.5;
    font-weight: 500;
}

/* Today — soft lavender treatment, not a strong purple slab */
.im-penetapan-schedule-page #calendar .fc-dayGridMonth-view .fc-day-today {
    background: rgba(63, 65, 181, 0.05);
}

.im-penetapan-schedule-page #calendar .fc-dayGridMonth-view .fc-day-today .fc-daygrid-day-number {
    color: var(--im-color-primary-strong, #3f41b5);
    background: var(--im-color-primary-soft, #ecebff);
    border-radius: 999px;
    min-width: 1.35rem;
    height: 1.35rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Event — one compact line: code left, time right, full cell width */
.im-penetapan-schedule-page #calendar .fc-dayGridMonth-view .fc-daygrid-event-harness {
    width: 100%;
}

.im-penetapan-schedule-page #calendar .fc-dayGridMonth-view .fc-daygrid-event {
    display: block;
    width: 100%;
    border-radius: 6px;
    border: 0;
    background-image: none !important;
    background-color: var(--im-sched-event-bg-soft, #6b6ee6) !important;
    box-shadow: none;
    margin: 0 0 4px;
}

.im-penetapan-schedule-page #calendar .fc-dayGridMonth-view .fc-daygrid-event .fc-event-main-frame,
.im-penetapan-schedule-page #calendar .fc-dayGridMonth-view .fc-daygrid-event .fc-event-title-container,
.im-penetapan-schedule-page #calendar .fc-dayGridMonth-view .fc-daygrid-event .fc-event-title {
    width: 100%;
    min-width: 0;
    overflow: hidden;
}

.im-penetapan-schedule-page #calendar .fc-dayGridMonth-view .fc-daygrid-event:last-child {
    margin-bottom: 0;
}

.im-penetapan-schedule-page #calendar .fc-dayGridMonth-view .fc-daygrid-event:hover {
    filter: brightness(1.05);
    box-shadow: 0 3px 9px rgba(74, 78, 212, 0.24);
    transform: none;
}

.im-penetapan-schedule-page #calendar .fc-dayGridMonth-view .fc-daygrid-event .fc-event-main {
    padding: 0;
    color: #ffffff !important;
}

/* hide FC's default month dot marker */
.im-penetapan-schedule-page #calendar .fc-dayGridMonth-view .fc-daygrid-event-dot {
    display: none;
}

.im-sched-month-event {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    min-height: 22px;
    padding: 3px 7px;
    line-height: 1.2;
    overflow: hidden;
}

.im-sched-month-code {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    color: #ffffff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.im-sched-month-time {
    flex: 0 0 auto;
    font-size: 0.66rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.85);
    white-space: nowrap;
}

/* "+N more" roll-up link — small muted indigo */
.im-penetapan-schedule-page #calendar .fc-dayGridMonth-view .fc-daygrid-more-link {
    display: inline-block;
    margin-top: 1px;
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--im-color-primary, #3f41b5);
}

.im-penetapan-schedule-page #calendar .fc-dayGridMonth-view .fc-daygrid-more-link:hover {
    color: var(--im-color-primary-strong, #3f41b5);
    text-decoration: underline;
}

/* ── Event Details modal — Kunos-branded ─────────────────────── */
/* Vars are re-declared here: the modal is rendered outside
   .im-penetapan-schedule-page, so it can't inherit them from there. */
.im-penetapan-schedule-modal {
    --im-sched-ink: #1f2a44;
    --im-sched-muted: #6b7a99;
}

.im-penetapan-schedule-modal .modal-dialog {
    max-width: 560px;
}

.im-penetapan-schedule-modal .modal-content {
    border: 1px solid var(--im-color-line);
    border-radius: 22px;
    box-shadow: 0 28px 64px rgba(15, 23, 42, 0.18);
    background: #ffffff;
    overflow: hidden;
}

/* Override the aggressive global ".modal-header { background: primary; color:#fff !important }"
   block for this modal only — a refined branded header, not a heavy purple slab. */
.im-penetapan-schedule-modal .modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    text-align: left;
    gap: 12px;
    padding: 20px 24px;
    border-bottom: 1px solid var(--im-color-line);
    background-color: transparent;
    background-image: linear-gradient(180deg, rgba(63, 65, 181, 0.06) 0%, rgba(63, 65, 181, 0) 100%);
    color: var(--im-sched-ink);
}

.im-penetapan-schedule-modal .modal-header .modal-title {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--im-sched-ink) !important;
}

.im-penetapan-schedule-modal .im-sched-modal-sub {
    font-size: 0.82rem;
    color: var(--im-sched-muted);
}

.im-penetapan-schedule-modal .im-sched-modal-close {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    color: var(--im-sched-muted);
}

.im-penetapan-schedule-modal .im-sched-modal-close:hover {
    background: var(--im-color-surface-soft, #f2f4f8);
    color: var(--im-sched-ink);
}

.im-penetapan-schedule-modal .modal-body {
    padding: 20px 24px;
}

.im-sched-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 14px;
    margin: 0;
}

.im-sched-detail-item {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 10px 12px;
    border: 1px solid var(--im-color-line);
    border-radius: 12px;
    background: var(--im-color-surface-soft, #f7f8fb);
    min-width: 0;
}

.im-sched-detail-item.is-wide {
    grid-column: 1 / -1;
}

.im-sched-detail-item dt {
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--im-sched-muted);
}

.im-sched-detail-item dd {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--im-sched-ink);
    word-break: break-word;
}

.im-penetapan-schedule-modal .modal-footer {
    padding: 14px 24px 18px;
    border-top: 1px solid var(--im-color-line);
    background: var(--im-color-surface-soft, #f7f8fb);
}

@media (max-width: 575.98px) {
    .im-sched-detail-grid {
        grid-template-columns: 1fr;
    }

    .im-penetapan-schedule-modal .modal-header,
    .im-penetapan-schedule-modal .modal-body {
        padding-left: 18px;
        padding-right: 18px;
    }
}

@media (max-width: 991.98px) {
    .im-schedule-filter-row .im-form-row,
    .im-schedule-filter-row .im-form-row:nth-child(2) {
        flex: 1 1 100%;
    }

    .im-schedule-filter-actions {
        width: 100%;
    }

    .im-schedule-filter-actions .im-btn {
        flex: 1 1 auto;
        justify-content: center;
    }
}

@media (max-width: 767.98px) {
    .bos-select-custom-dropdown {
        max-height: 240px;
    }

    .im-schedule-card-head,
    .im-schedule-calendar {
        padding-left: 14px;
        padding-right: 14px;
    }

    .im-schedule-hint {
        flex-direction: column;
        gap: 4px;
        margin-left: 14px;
        margin-right: 14px;
    }

    .im-penetapan-schedule-page .fc .fc-toolbar-title {
        font-size: 1rem;
    }

    .im-penetapan-schedule-page .fc .fc-toolbar.fc-header-toolbar {
        justify-content: center;
    }
}


/* ── View Course / Course Offered (penetapan.tawarView) ───────── */
.im-course-offered-card .im-section-heading {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.im-course-offered-head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.im-course-offered-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--im-color-primary-soft, #f0efff);
    color: var(--im-color-primary-strong, #3f41b5);
    font-size: 1.1rem;
    flex: 0 0 auto;
}

.im-course-offered-context {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* Bulk action toolbar — the Drop button is tied to checkbox selection,
   never floats alone at the bottom-right. */
.im-course-offered-bulkbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 12px 14px;
    margin-bottom: 14px;
    border: 1px solid var(--im-color-line);
    border-radius: 12px;
    background: var(--im-color-surface-soft, #f7f8fb);
}

.im-course-offered-selcount {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--im-color-text-muted);
}

.im-course-offered-bulkbar .im-btn-danger:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.im-course-offered-check {
    width: 16px;
    height: 16px;
    accent-color: var(--im-color-primary, #3f41b5);
    cursor: pointer;
    vertical-align: middle;
}

.im-course-offered-table tbody tr:hover td {
    background: rgba(63, 65, 181, 0.035);
}

.im-course-offered-table td strong {
    color: var(--im-color-text);
    font-weight: 700;
}

@media (max-width: 575.98px) {
    .im-course-offered-bulkbar {
        justify-content: stretch;
    }

    .im-course-offered-bulkbar .im-btn {
        flex: 1 1 auto;
        justify-content: center;
    }
}


/* Slide-right drawer wide version for complex views */
.bos-verify-drawer.im-drawer-wide {
    width: min(850px, 90vw) !important;
}

/* ── KPI Page Layout Refinements ── */

/* Reduce hero card height/padding on desktop */
.im-kpi-hero-card {
    min-height: 200px;
}

.im-kpi-hero-card .im-card-body {
    padding: 24px 28px;
}

.im-kpi-hero-title {
    margin: 12px 0 10px;
    font-size: clamp(1.35rem, 2.4vw, 1.9rem);
}

.im-kpi-hero-copy {
    font-size: 0.875rem;
}

.im-kpi-hero-actions {
    margin-top: 18px;
}

/* Reduce metric card padding and value size */
.im-kpi-metric-card .im-card-body {
    padding: 18px 22px;
}

.im-kpi-metric-value {
    font-size: clamp(1.6rem, 2.4vw, 2.1rem);
    margin-bottom: 6px;
}

/* Report filter: fixed width on desktop, stacks on mobile */
.im-kpi-report-filter {
    flex-shrink: 0;
}

.im-kpi-report-filter .im-select-sm {
    min-width: 90px;
}

/* Compact select variant — fully themed, no native grey OS style */
.im-select-sm {
    min-height: 38px;
    height: 38px;
    padding: 6px 36px 6px 12px;
    font-size: 0.875rem;
    border: 1.5px solid var(--im-color-line);
    border-radius: var(--im-radius-control);
    background-color: #ffffff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='%2364748b' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    color: var(--im-color-text);
    font-family: var(--im-font-sans);
    cursor: pointer;
    transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.im-select-sm:focus {
    outline: none;
    border-color: var(--im-color-primary);
    box-shadow: 0 0 0 4px rgba(63, 65, 181, 0.12);
}

/* Mobile: stack report heading and filter */
@media (max-width: 575.98px) {
    .im-kpi-report-filter {
        width: 100%;
    }

    .im-kpi-report-filter .d-flex {
        width: 100%;
    }

    .im-kpi-report-filter .im-select-sm {
        flex: 1 1 auto;
        min-width: 0;
    }
}

/* ═══════════════════════════════════════════════════════
   Unified Sidebar Profile Card
   ═══════════════════════════════════════════════════════ */
.im-sidebar-profile-card {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #ffffff;
    border: 1px solid rgba(63, 65, 181, 0.10);
    border-radius: 16px;
    padding: 8px 10px;
    margin-bottom: 18px;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.06);
}

.im-sidebar-profile-link {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1 1 auto;
    min-width: 0;
    text-decoration: none !important;
    color: inherit;
}

.im-sidebar-profile-link:hover {
    text-decoration: none !important;
}

.im-sidebar-profile-avatar-wrap {
    position: relative;
    flex-shrink: 0;
}

.im-sidebar-profile-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #ffffff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.10);
    display: block;
}

.im-sidebar-profile-dot {
    position: absolute;
    bottom: 1px;
    right: 1px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #22c55e;
    border: 2px solid #ffffff;
}

.im-sidebar-profile-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
}

.im-sidebar-profile-name {
    font-family: var(--im-font-sans, 'Inter', sans-serif);
    font-size: 0.875rem;
    font-weight: 700;
    color: #1f2937;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

.im-sidebar-profile-role {
    font-family: var(--im-font-sans, 'Inter', sans-serif);
    font-size: 0.75rem;
    font-weight: 500;
    color: #6b7280;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
    margin-top: 2px;
}

/* Bell button — flush right inside card */
.im-sidebar-bell-btn {
    flex-shrink: 0;
    position: relative;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid rgba(63, 65, 181, 0.12);
    background: #f8fafc;
    color: #4b5563;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.18s ease, color 0.18s ease, transform 0.14s ease;
    font-size: 1rem;
    padding: 0;
}

.im-sidebar-bell-btn:hover,
.im-sidebar-bell-btn.has-badge {
    background: rgba(63, 65, 181, 0.10);
    color: #3b42c4;
}

.im-sidebar-bell-btn:hover {
    transform: scale(1.08);
}

.im-sidebar-bell-badge {
    position: absolute;
    top: -3px;
    right: -3px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    font-size: 9px;
    font-weight: 800;
    line-height: 16px;
    color: #ffffff;
    background: #dc2626;
    border-radius: 9999px;
    border: 2px solid #ffffff;
    text-align: center;
}

/* Mobile drawer: compact profile card */
@media (max-width: 1199px) {
    .im-sidebar-profile-card {
        padding: 6px 8px;
        margin-bottom: 12px;
        border-radius: 14px;
    }

    .im-sidebar-profile-avatar {
        width: 36px;
        height: 36px;
    }

    .im-sidebar-profile-dot {
        width: 8px;
        height: 8px;
    }

    .im-sidebar-bell-btn {
        width: 32px;
        height: 32px;
        font-size: 0.9rem;
    }
}

/* ═══════════════════════════════════════════════════════
   Mobile Bottom Nav — refined white card
   ═══════════════════════════════════════════════════════ */
@media (max-width: 1199px) {
    .global-mobile-bottom-nav {
        background: #ffffff !important;
        border-top: 1px solid rgba(63, 65, 181, 0.08);
        box-shadow: 0 -8px 28px rgba(15, 23, 42, 0.09) !important;
        border-radius: 20px 20px 0 0;
        padding: 8px 24px calc(8px + env(safe-area-inset-bottom, 0px)) !important;
    }

    .global-mobile-nav-item {
        color: #6b7280 !important;
        font-size: 0.7rem !important;
        font-weight: 600 !important;
        gap: 3px !important;
        border-radius: 12px;
        padding: 6px 8px !important;
        transition: color 0.16s ease, background-color 0.16s ease;
    }

    .global-mobile-nav-item i {
        font-size: 1.35rem !important;
    }

    .global-mobile-nav-item.active {
        color: #3b42c4 !important;
    }

    .global-mobile-menu-btn {
        width: 52px !important;
        height: 52px !important;
        border-radius: 50% !important;
        background: linear-gradient(135deg, #3b42c4, #6366f1) !important;
        color: #ffffff !important;
        border: none !important;
        font-size: 1.5rem !important;
        box-shadow: 0 4px 16px rgba(63, 65, 181, 0.35) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
        transition: transform 0.18s ease, box-shadow 0.18s ease !important;
    }

    .global-mobile-menu-btn:hover,
    .global-mobile-menu-btn:focus {
        transform: scale(1.08) !important;
        box-shadow: 0 6px 22px rgba(63, 65, 181, 0.45) !important;
    }
}

.im-leave-summary-icon.is-danger {
    background: #ffe4e6;
    color: #e11d48;
}

/* Custom Dropdown for Institutional Modernity */
.im-dropdown-custom .dropdown-menu {
    border-radius: var(--im-radius-control) !important;
    border: 1px solid rgba(219, 228, 243, 0.9) !important;
    box-shadow: var(--im-shadow-md) !important;
    padding: 8px !important;
}

.im-dropdown-custom .dropdown-item {
    font-family: var(--im-font-sans) !important;
    font-size: 0.9375rem !important;
    font-weight: 600 !important;
    color: var(--im-color-text) !important;
    border-radius: 8px !important;
    padding: 8px 14px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    transition: all 0.16s ease !important;
}

.im-dropdown-custom .dropdown-item:hover {
    background-color: var(--im-color-primary-soft) !important;
    color: var(--im-color-primary) !important;
}

.im-dropdown-custom .dropdown-item.active {
    background-color: var(--im-color-primary) !important;
    color: #ffffff !important;
}

.im-dropdown-custom .dropdown-item.active .check-icon {
    display: inline-block !important;
}

/*--------------------------------------------------------------
# Academic Institutional Modernity
# Purpose: Align Academic enrollment, analysis, course registration,
# import student, and course report pages with pelajar_profiles UI.
--------------------------------------------------------------*/
.im-academic-page {
    font-family: var(--im-font-sans);
}

.im-academic-container {
    padding: 4px 0 28px;
}

.im-academic-empty-icon {
    font-size: 2.5rem;
    color: var(--im-color-primary);
    opacity: 0.7;
}

.im-academic-helper-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    color: var(--im-color-text);
    font-size: 0.9375rem;
    line-height: 1.55;
}

.im-academic-upload-box {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 18px;
    align-items: center;
    padding: 20px;
    border: 1px dashed var(--im-color-line);
    border-radius: 22px;
    background: linear-gradient(180deg, #fff 0%, #f8fbff 100%);
}

.im-academic-upload-icon {
    width: 58px;
    height: 58px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    background: var(--im-color-primary-soft);
    color: var(--im-color-primary);
    font-size: 1.5rem;
}

.im-academic-upload-copy h4 {
    margin: 0 0 4px;
    font-size: 1rem;
    font-weight: 800;
    color: var(--im-color-text);
}

.im-academic-upload-copy p,
.im-academic-error-list,
.im-academic-upload-input {
    color: var(--im-color-text-muted);
    font-size: 0.9375rem;
}

.im-academic-chart-title {
    margin-bottom: 14px;
}

.im-academic-chart-panel {
    position: relative;
    min-height: 320px;
}

.im-row-selected td {
    background: rgba(63, 65, 181, 0.05);
}

.im-academic-checkbox {
    width: 18px;
    height: 18px;
    border-radius: 6px !important;
    border-color: var(--im-color-line-strong);
    box-shadow: none !important;
}

.im-academic-checkbox:checked {
    background-color: var(--im-color-primary);
    border-color: var(--im-color-primary);
}

@media (max-width: 991.98px) {
    .im-academic-upload-box {
        grid-template-columns: 1fr;
        text-align: left;
    }

    .im-academic-upload-input .im-btn {
        width: 100%;
    }
}

@media (max-width: 767.98px) {
    .im-academic-container {
        padding-bottom: 24px;
    }

    .im-academic-chart-panel {
        min-height: 260px;
    }
}

/*--------------------------------------------------------------
# Academic Institutional Modernity helpers
# Purpose: Shared compact helpers for exam/report/pelajar profile
# views without introducing a second design system.
--------------------------------------------------------------*/
.im-stats-icon {
    width: 56px;
    height: 56px;
    border-radius: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(63, 65, 181, 0.12), rgba(59, 130, 246, 0.12));
    color: var(--im-color-primary);
    font-size: 1.35rem;
    flex-shrink: 0;
}

.im-tabbar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.im-tabbar-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 18px;
    border-radius: 999px;
    border: 1px solid rgba(63, 65, 181, 0.14);
    background: #ffffff;
    color: var(--im-color-text-muted);
    font-weight: 700;
    text-decoration: none;
    transition: all 0.18s ease;
}

.im-tabbar-link:hover,
.im-tabbar-link.is-active {
    color: var(--im-color-primary);
    border-color: rgba(63, 65, 181, 0.28);
    background: rgba(63, 65, 181, 0.08);
}

.im-academic-meta-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 24px;
}

.im-academic-meta-grid>div,
.im-academic-summary-table th,
.im-academic-summary-table td {
    color: var(--im-color-text);
    font-size: 0.95rem;
}

.im-academic-meta-grid span,
.im-academic-summary-table th {
    display: block;
    margin-bottom: 4px;
    color: var(--im-color-text-muted);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.im-academic-summary-table,
.im-academic-summary-compare {
    width: 100%;
    border-collapse: collapse;
}

.im-academic-summary-table th,
.im-academic-summary-table td,
.im-academic-summary-compare th,
.im-academic-summary-compare td {
    padding: 12px 14px;
    vertical-align: middle;
}

.im-academic-summary-table-bordered th,
.im-academic-summary-table-bordered td,
.im-academic-summary-compare th,
.im-academic-summary-compare td {
    border: 1px solid rgba(219, 228, 243, 0.9);
}

.im-academic-summary-compare th {
    background: #f8fbff;
}

.im-academic-legacy-action {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
}

.im-academic-legacy-action .btn,
.im-academic-legacy-action input[type='submit'],
.im-academic-legacy-action button[type='submit'] {
    min-height: 38px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid transparent;
    font-family: var(--im-font-sans);
    font-size: 0.875rem;
    font-weight: 700;
    box-shadow: none;
}

.im-academic-legacy-action .btn-primary,
.im-academic-legacy-action input[type='submit'] {
    background: var(--im-color-primary);
    color: #ffffff;
}

.im-academic-legacy-action .btn-danger {
    background: rgba(239, 68, 68, 0.1);
    color: #dc2626;
    border-color: rgba(239, 68, 68, 0.18);
}

.im-academic-legacy-action .form-control,
.im-academic-legacy-action input[type='text'] {
    min-height: 40px;
    max-width: 88px;
    border-radius: 14px;
    border: 1px solid rgba(219, 228, 243, 0.9);
    text-align: center;
}

@media (max-width: 991.98px) {
    .im-academic-meta-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
}

@media (max-width: 767.98px) {
    .im-tabbar-link {
        width: 100%;
        justify-content: flex-start;
    }

    .im-academic-summary-table th,
    .im-academic-summary-table td,
    .im-academic-summary-compare th,
    .im-academic-summary-compare td {
        padding: 10px 12px;
    }
}

.notification-icon-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
}

.notification-icon-fallback i {
    font-size: 1.35rem;
    color: var(--im-primary, #3f3cc8);
}

.mark-all-read-btn {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    color: var(--im-primary);
    font-weight: 600;
}

.mark-all-read-btn:hover {
    color: var(--im-primary-dark);
    text-decoration: underline;
}

/* --------------------------------------------------------------------------
   Institutional Modernity drawer refinements — attendance / staff / vehicle
   Purpose: align non-leave drawers with the HR Leave slide-right pattern.
-------------------------------------------------------------------------- */
.im-drawer-close-minimal {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--im-color-text-soft) !important;
}

.im-drawer-close-minimal:hover {
    background: var(--im-color-primary-soft) !important;
    color: var(--im-color-primary) !important;
}

.im-drawer-section-tight {
    padding: 14px 0;
}

.im-attendance-drawer-page {
    padding: 0;
}

.im-attendance-drawer-card,
.im-inline-drawer-form,
.im-staff-drawer-form,
.im-vehicle-drawer-form {
    height: 100%;
}

.im-attendance-drawer-card .im-card-header,
.im-attendance-drawer-card .im-card-body {
    padding-left: 0;
    padding-right: 0;
}

.im-attendance-review-card .im-card-body {
    padding-top: 14px;
}

.im-staff-drawer-form .im-drawer-header,
.im-vehicle-drawer-form .im-drawer-header {
    padding: 14px 18px;
}

.im-staff-drawer-form .im-drawer-title,
.im-vehicle-drawer-form .im-drawer-title {
    font-size: 1rem;
}

.im-staff-drawer-form .im-drawer-icon,
.im-vehicle-drawer-form .im-drawer-icon {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    font-size: 1rem;
}

.im-staff-drawer-form .im-drawer-body,
.im-vehicle-drawer-form .im-drawer-body,
.im-inline-drawer-form .im-drawer-body {
    padding: 16px 18px;
}

.im-staff-drawer-form .im-drawer-section,
.im-vehicle-drawer-form .im-drawer-section,
.im-inline-drawer-form .im-drawer-section {
    padding: 14px 0;
}

.im-staff-drawer-form .im-drawer-section-title,
.im-vehicle-drawer-form .im-drawer-section-title,
.im-inline-drawer-form .im-drawer-section-title {
    margin-bottom: 12px;
    font-size: 0.96rem;
}

.im-staff-drawer-upload .dropify-wrapper,
.im-staff-drawer-upload .dropify-wrapper .dropify-message {
    min-height: 132px !important;
    max-height: 132px !important;
}

.im-required {
    color: #ef4444;
}

.im-staff-role-radio,
.im-staff-role-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.im-staff-workflow-grid {
    display: grid;
    gap: 12px;
}

.im-staff-workflow-grid .table-responsive {
    overflow-x: auto;
}

.im-staff-workflow-grid table {
    margin-bottom: 0;
}

.im-staff-workflow-grid th,
.im-staff-workflow-grid td {
    padding: 10px 12px;
}

.im-staff-drawer-footer,
.im-inline-drawer-form .im-drawer-footer,
.im-vehicle-drawer-form .im-drawer-footer {
    padding: 14px 18px calc(14px + env(safe-area-inset-bottom, 0px));
}

.im-compact-counter {
    display: inline-flex;
    align-items: stretch;
    overflow: hidden;
    border: 1.5px solid var(--im-color-line);
    border-radius: 16px;
    background: #fff;
}

.im-compact-counter-btn {
    width: 42px;
    border: 0;
    background: #f8fbff;
    color: var(--im-color-primary);
    font-weight: 800;
}

.im-compact-counter-input {
    width: 78px;
    border: 0;
    text-align: center;
    font-weight: 700;
}

.im-compact-counter-unit {
    display: inline-flex;
    align-items: center;
    padding: 0 12px;
    color: var(--im-color-text-muted);
    font-size: 0.875rem;
    font-weight: 700;
}

.bos-verify-row.is-selected td {
    background: rgba(63, 65, 181, 0.05);
}

.bos-verify-drawer {
    background: #f7f9ff;
}

.bos-verify-drawer-header {
    min-height: 76px;
    padding: 18px 20px;
    background: linear-gradient(135deg, #3f41b5 0%, #4757c6 100%);
}

.bos-verify-drawer-header h2 {
    font-size: 1.12rem;
}

.bos-verify-drawer-body {
    padding: 18px;
}

.bos-verify-drawer-footer {
    padding: 16px 18px;
    background: rgba(255, 255, 255, 0.96);
}

.bos-verify-drawer-footer .im-btn:last-child {
    color: var(--im-color-danger-ink) !important;
    background: var(--im-color-danger-soft) !important;
    border-color: transparent !important;
}

@media (max-width: 991.98px) {

    .im-staff-workflow-grid th,
    .im-staff-workflow-grid td {
        padding: 9px 10px;
    }
}

/* Hide drawer header when page is embedded in iframe */
body.embedded-content-body .im-drawer-header {
    display: none !important;
}

body.embedded-content-body .im-drawer-body {
    height: 100vh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

/* Custom styles for embedded drawer details view and scroll-to-top overlap prevention */
body.embedded-content-body {
    --im-section-gap: 20px !important;
}

body.bos-drawer-open .back-to-top {
    display: none !important;
}

.im-attendance-drawer-filter-row {
    border-bottom: 1.5px solid var(--im-color-line);
    margin-bottom: 20px;
}

/* ==========================================================================
   BOS DROPDOWN DESIGN STANDARD OVERRIDES (Select2 & Custom Dropdowns)
   ========================================================================== */

/* 1. Custom Select (.bos-select-custom-container) */
.bos-select-custom-container {
    width: 100% !important;
}

.bos-select-custom-trigger {
    height: 42px !important;
    min-height: 42px !important;
    background-color: #ffffff !important;
    border: 1px solid #DCE2F2 !important;
    border-radius: 16px !important;
    padding: 10px 18px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #1B2640 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    cursor: pointer !important;
    outline: none !important;
    transition: all 0.2s ease-in-out !important;
    box-shadow: none !important;
}

.bos-select-custom-trigger:focus,
.bos-select-custom-container.open .bos-select-custom-trigger {
    border-color: #4F46E5 !important;
    box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.12) !important;
}

.bos-select-custom-icon {
    font-size: 14px !important;
    color: #667085 !important;
    transition: transform 0.2s ease-in-out !important;
}

.bos-select-custom-container.open .bos-select-custom-icon {
    transform: rotate(180deg) !important;
}

.bos-select-custom-dropdown {
    position: absolute !important;
    top: calc(100% + 6px) !important;
    left: 0 !important;
    width: 100% !important;
    background-color: #ffffff !important;
    border: 1px solid #DCE2F2 !important;
    border-radius: 16px !important;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.12) !important;
    z-index: 9999 !important;
    max-height: 250px !important;
    overflow-y: auto !important;
    padding: 6px !important;
    margin: 0 !important;
}

.bos-select-custom-option {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 10px 14px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #1B2640 !important;
    border-radius: 12px !important;
    cursor: pointer !important;
    transition: all 0.15s ease-in-out !important;
    background: transparent !important;
}

.bos-select-custom-option:hover {
    background-color: rgba(79, 70, 229, 0.08) !important;
    color: #1B2640 !important;
}

.bos-select-custom-option.selected {
    background-color: rgba(79, 70, 229, 0.12) !important;
    color: #4F46E5 !important;
    font-weight: 600 !important;
}

.bos-select-custom-check-icon {
    font-size: 16px !important;
    color: transparent !important;
    transition: color 0.15s ease-in-out !important;
}

.bos-select-custom-option.selected .bos-select-custom-check-icon {
    color: #4F46E5 !important;
}


/* 2. Select2 Overrides */

/* Select2 Container */
.select2-container {
    width: 100% !important;
    max-width: 100% !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Select2 Selection Box (Single) */
.select2-container--default .select2-selection--single {
    height: 42px !important;
    background-color: #ffffff !important;
    border: 1px solid #DCE2F2 !important;
    border-radius: 16px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    outline: none !important;
    transition: all 0.2s ease-in-out !important;
}

.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
    border-color: #4F46E5 !important;
    box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.12) !important;
}

/* Rendered value (Single) */
.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #1B2640 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    padding-left: 18px !important;
    padding-right: 36px !important;
    width: 100% !important;
    line-height: 40px !important;
}

/* Arrow (Single) */
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100% !important;
    width: 36px !important;
    top: 0 !important;
    right: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
    display: none !important;
    /* Hide default arrow */
}

/* Insert custom chevron icon via pseudo-element */
.select2-container--default .select2-selection--single .select2-selection__arrow::before {
    content: "\F282";
    /* Bootstrap Icons Chevron Down */
    font-family: "bootstrap-icons" !important;
    font-size: 14px !important;
    color: #667085 !important;
    transition: transform 0.2s ease-in-out !important;
}

.select2-container--open .select2-selection--single .select2-selection__arrow::before {
    transform: rotate(180deg) !important;
}

/* Select2 Selection Box (Multiple) */
.select2-container--default .select2-selection--multiple {
    min-height: 42px !important;
    background-color: #ffffff !important;
    border: 1px solid #DCE2F2 !important;
    border-radius: 16px !important;
    padding: 4px 10px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 6px !important;
    outline: none !important;
    transition: all 0.2s ease-in-out !important;
}

.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--multiple {
    border-color: #4F46E5 !important;
    box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.12) !important;
}

/* Multi-select Rendered box */
.select2-container--default .select2-selection--multiple .select2-selection__rendered {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
}

/* Multi-select Pill */
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: rgba(79, 70, 229, 0.12) !important;
    border: none !important;
    border-radius: 8px !important;
    color: #4F46E5 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    padding: 4px 10px !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
}

/* Multi-select Pill Remove icon */
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: #4F46E5 !important;
    border: none !important;
    background: transparent !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    padding: 0 !important;
    margin: 0 !important;
    cursor: pointer !important;
    order: 2 !important;
    /* Move remove icon to the right side of pill */
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
    background: transparent !important;
    color: #3730a3 !important;
}

/* Select2 Dropdown Panel */
.select2-dropdown {
    background-color: #ffffff !important;
    border: 1px solid #DCE2F2 !important;
    border-radius: 16px !important;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.12) !important;
    z-index: 99999 !important;
    margin-top: 6px !important;
    padding: 6px !important;
    overflow: hidden !important;
}

/* Dropdown Search Box container */
.select2-search--dropdown {
    padding: 8px !important;
}

/* Dropdown Search Input */
.select2-search--dropdown .select2-search__field {
    border: 1px solid #DCE2F2 !important;
    border-radius: 12px !important;
    padding: 8px 12px !important;
    font-size: 13px !important;
    color: #1B2640 !important;
    outline: none !important;
    transition: all 0.2s ease-in-out !important;
}

.select2-search--dropdown .select2-search__field:focus {
    border-color: #4F46E5 !important;
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.12) !important;
}

/* Options list */
.select2-results__options {
    max-height: 200px !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Option Item */
.select2-results__option {
    padding: 8px 12px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #1B2640 !important;
    border-radius: 12px !important;
    cursor: pointer !important;
    transition: all 0.15s ease-in-out !important;
}

/* Hovered Option state */
.select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background-color: rgba(79, 70, 229, 0.08) !important;
    color: #1B2640 !important;
}

/* Selected Option state */
.select2-results__option[aria-selected=true],
.select2-container--default .select2-results__option--selected {
    background-color: rgba(79, 70, 229, 0.12) !important;
    color: #4F46E5 !important;
    font-weight: 600 !important;
}

/* 3. Text Input & Textarea standard styles to match BOS design standard */
.im-input {
    height: 42px !important;
    min-height: 42px !important;
    background-color: #ffffff !important;
    border: 1px solid #DCE2F2 !important;
    border-radius: 16px !important;
    padding: 10px 18px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #1B2640 !important;
    outline: none !important;
    transition: all 0.2s ease-in-out !important;
    box-shadow: none !important;
}

.im-textarea {
    min-height: 80px !important;
    background-color: #ffffff !important;
    border: 1px solid #DCE2F2 !important;
    border-radius: 16px !important;
    padding: 12px 18px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #1B2640 !important;
    outline: none !important;
    transition: all 0.2s ease-in-out !important;
    box-shadow: none !important;
}

.im-input:focus,
.im-textarea:focus {
    border-color: #4F46E5 !important;
    box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.12) !important;
}

/* Input group styling fixes for 16px radius */
.im-input-group .im-input {
    border-top-left-radius: 16px !important;
    border-bottom-left-radius: 16px !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.im-input-group .im-input-addon {
    border: 1px solid #DCE2F2 !important;
    border-left: 0 !important;
    border-top-right-radius: 16px !important;
    border-bottom-right-radius: 16px !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    height: 42px !important;
    min-height: 42px !important;
    background-color: #ffffff !important;
    color: #667085 !important;
    transition: all 0.2s ease-in-out !important;
}

/*--------------------------------------------------------------
# BOS Dashboard Calendar
# Purpose: FullCalendar month view with BOS-styled +more links and popover.
--------------------------------------------------------------*/
.bos-dashboard-calendar-shell,
.bos-dashboard-calendar-shell #calendar {
    width: 100%;
}

.bos-dashboard-calendar-shell #calendar .fc-daygrid-day-top {
    padding: 4px 6px !important;
}

.bos-dashboard-calendar-shell #calendar .fc-daygrid-day-number {
    padding: 0 !important;
    color: #94a3b8 !important;
    font-size: 12px !important;
    font-weight: 700 !important;
}

.bos-dashboard-calendar-shell #calendar .fc-col-header-cell {
    padding: 8px 0 !important;
    background: #f8fbff !important;
}

.bos-dashboard-calendar-shell #calendar .fc-col-header-cell-cushion {
    color: #1e293b !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.bos-dashboard-calendar-shell #calendar .fc-scrollgrid,
.bos-dashboard-calendar-shell #calendar .fc-theme-standard td,
.bos-dashboard-calendar-shell #calendar .fc-theme-standard th {
    border-color: #dce2f2 !important;
}

.bos-dashboard-calendar-shell #calendar .fc-col-header-cell,
.bos-dashboard-calendar-shell #calendar .fc-daygrid-day {
    width: 14.285% !important;
    min-width: 14.285% !important;
    max-width: 14.285% !important;
}

.bos-dashboard-calendar-shell #calendar .fc-col-header,
.bos-dashboard-calendar-shell #calendar .fc-daygrid-body,
.bos-dashboard-calendar-shell #calendar .fc-scrollgrid-sync-table {
    width: 100% !important;
    table-layout: fixed !important;
}

.bos-dashboard-calendar-shell #calendar .fc-daygrid-day-frame {
    min-height: 108px !important;
    padding-bottom: 8px !important;
}

.bos-dashboard-calendar-shell #calendar .fc-daygrid-day-events {
    margin: 2px 4px 0 !important;
    min-height: 20px !important;
}

.bos-dashboard-calendar-shell #calendar .fc-daygrid-day-events .fc-daygrid-event-harness {
    margin-bottom: 4px !important;
}

.bos-dashboard-calendar-shell #calendar .fc-daygrid-event {
    padding: 4px 8px !important;
    margin-top: 2px !important;
    border: 0 !important;
    border-radius: 10px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.bos-dashboard-calendar-shell #calendar .fc-event-title {
    word-break: keep-all !important;
}

.bos-dashboard-calendar-shell #calendar .fc-toolbar-title {
    color: #1e293b !important;
    font-size: 15px !important;
    font-weight: 800 !important;
}

.bos-dashboard-calendar-shell #calendar .fc-button {
    padding: 6px 10px !important;
    border-radius: 12px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
}

.bos-dashboard-calendar-shell #calendar .fc-daygrid-more-link {
    display: inline-flex !important;
    align-items: center !important;
    padding: 4px 8px !important;
    margin: 2px 0 0 2px !important;
    color: var(--bos-primary) !important;
    background: rgba(63, 65, 181, 0.08) !important;
    border-radius: 999px !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    transition: all 0.18s ease !important;
}

.bos-dashboard-calendar-shell #calendar .fc-daygrid-more-link:hover {
    color: #ffffff !important;
    background: var(--bos-primary) !important;
    text-decoration: none !important;
}

.fc .fc-popover {
    z-index: 1050 !important;
    overflow: hidden;
    border: 1px solid #dce2f2 !important;
    border-radius: 18px !important;
    background: #ffffff !important;
    box-shadow: 0 20px 44px rgba(15, 23, 42, 0.16) !important;
}

.fc .fc-popover-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px !important;
    background: linear-gradient(180deg, #f8fbff 0%, #ffffff 100%) !important;
    border-bottom: 1px solid #e2e8f0 !important;
}

.fc .fc-popover-title {
    color: #1e293b !important;
    font-size: 13px !important;
    font-weight: 800 !important;
}

.fc .fc-popover-close {
    color: #64748b !important;
    font-size: 16px !important;
    opacity: 1 !important;
    transition: color 0.18s ease;
}

.fc .fc-popover-close:hover {
    color: var(--bos-primary) !important;
}

.fc .fc-popover-body {
    max-height: 260px;
    padding: 12px !important;
    overflow-y: auto;
}

.fc .fc-popover-body .fc-daygrid-event {
    margin-bottom: 8px !important;
    padding: 8px 12px !important;
    border: 0 !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
}

.fc .fc-popover-body .fc-daygrid-event:last-child {
    margin-bottom: 0 !important;
}

.bos-dashboard-month-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.bos-dashboard-month-title {
    flex: 1;
    text-align: center;
    color: #1e293b;
    font-size: 15px;
    font-weight: 800;
    text-transform: capitalize;
}

.bos-dashboard-month-nav {
    width: 38px;
    height: 38px;
    border: 1px solid #dce2f2;
    border-radius: 12px;
    background: #ffffff;
    color: var(--bos-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.18s ease;
}

.bos-dashboard-month-nav:hover {
    background: var(--bos-primary);
    border-color: var(--bos-primary);
    color: #ffffff;
}

.bos-dashboard-month-grid {
    position: relative;
}

.bos-dashboard-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    border: 1px solid #dce2f2;
    border-radius: 20px;
    overflow: hidden;
    background: #ffffff;
}

.bos-dashboard-calendar-header-cell {
    padding: 10px 8px;
    background: #f8fbff;
    border-bottom: 1px solid #dce2f2;
    color: #1e293b;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-align: center;
}

.bos-dashboard-calendar-day {
    min-height: 126px;
    padding: 8px;
    border-right: 1px solid #dce2f2;
    border-bottom: 1px solid #dce2f2;
    background: #ffffff;
}

.bos-dashboard-calendar-day:nth-child(7n) {
    border-right: 0;
}

.bos-dashboard-calendar-day.is-muted {
    background: #f8fbff;
}

.bos-dashboard-calendar-day.is-today {
    background: rgba(63, 65, 181, 0.04);
}

.bos-dashboard-calendar-day-top {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 6px;
}

.bos-dashboard-calendar-day-number {
    color: #94a3b8;
    font-size: 12px;
    font-weight: 800;
}

.bos-dashboard-calendar-day.is-today .bos-dashboard-calendar-day-number {
    color: var(--bos-primary);
}

.bos-dashboard-calendar-day-events {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.bos-dashboard-calendar-event-chip,
.bos-dashboard-calendar-more {
    width: 100%;
    border: 0;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.25;
    text-align: left;
}

.bos-dashboard-calendar-event-chip {
    padding: 6px 8px;
    background: var(--event-bg, var(--bos-primary));
    color: var(--event-color, #ffffff);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.bos-dashboard-calendar-more {
    padding: 0;
    color: var(--bos-primary);
    background: transparent;
}

.bos-dashboard-calendar-popover {
    position: absolute;
    z-index: 20;
    width: min(320px, calc(100% - 16px));
    border: 1px solid #dce2f2;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 20px 44px rgba(15, 23, 42, 0.16);
}

.bos-dashboard-calendar-popover-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border-bottom: 1px solid #e2e8f0;
}

.bos-dashboard-calendar-popover-header strong {
    color: #1e293b;
    font-size: 13px;
    font-weight: 800;
}

.bos-dashboard-calendar-popover-close {
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 999px;
    background: #f8fbff;
    color: #64748b;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.bos-dashboard-calendar-popover-body {
    max-height: 240px;
    padding: 10px;
    overflow-y: auto;
}

.bos-dashboard-calendar-popover-item {
    width: 100%;
    border: 0;
    border-radius: 12px;
    background: rgba(63, 65, 181, 0.06);
    color: #1e293b;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    margin-bottom: 8px;
    text-align: left;
    font-size: 12px;
    font-weight: 700;
}

.bos-dashboard-calendar-popover-item:last-child {
    margin-bottom: 0;
}

.bos-dashboard-calendar-popover-dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    flex-shrink: 0;
    background: var(--event-bg, var(--bos-primary));
}

.bos-dashboard-calendar-loading {
    min-height: 320px;
    border: 1px dashed #dce2f2;
    border-radius: 20px;
    color: #64748b;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
}

.bos-dashboard-calendar-loading.is-error {
    color: #dc2626;
}

.bos-dashboard-calendar-drawer-frame-wrap {
    padding: 0;
    flex-grow: 1;
    overflow: hidden;
    height: calc(100% - 75px);
    background: #f8fbff;
}

.bos-dashboard-calendar-drawer-frame {
    width: 100%;
    height: 100%;
    border: 0;
    background: #ffffff;
}

@media (max-width: 991.98px) {
    .bos-dashboard-calendar-grid {
        grid-template-columns: repeat(7, minmax(120px, 1fr));
        min-width: 840px;
    }

    .bos-dashboard-calendar-shell {
        overflow-x: auto;
    }

    .bos-dashboard-calendar-shell #calendar .fc-daygrid-day-frame {
        min-height: 96px !important;
    }
}

/*--------------------------------------------------------------
# PROFILE FINAL UI AMENDMENTS
--------------------------------------------------------------*/
.profile .custom-select::after,
.profile .custom-select-wrapper::after,
.profile .profile-custom-select-wrapper::after {
    display: none !important;
}

.profile .profile-custom-select-wrapper {
    margin-top: 0 !important;
}

.profile .profile-custom-select-trigger {
    min-height: 46px;
    padding: 12px 16px;
    border: 1.5px solid var(--im-color-line);
    border-radius: 16px;
    background: #fff;
    box-shadow: none;
    color: var(--im-color-text);
    font-family: var(--im-font-sans);
    font-size: 0.9375rem;
}

.profile .profile-custom-select-trigger:hover,
.profile .profile-custom-select-trigger.open {
    border-color: var(--im-color-primary);
    box-shadow: 0 0 0 4px rgba(63, 65, 181, 0.12);
}

.profile .profile-custom-select-text {
    font-weight: 500;
    color: var(--im-color-text);
}

.profile .profile-custom-select-arrow {
    color: var(--im-color-text-soft);
    font-size: 0.8rem;
}

.profile .profile-custom-select-dropdown {
    top: calc(100% + 8px);
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 16px;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.12);
    padding: 8px;
}

.profile .profile-custom-select-option {
    min-height: 42px;
    padding: 10px 14px;
    border-radius: 12px;
    color: var(--im-color-text);
    font-weight: 500;
}

.profile .profile-custom-select-option.selected {
    background: var(--im-color-primary) !important;
    color: #fff !important;
}

.profile .profile-custom-select-option-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    color: inherit;
}

.profile .profile-custom-select-option.selected .profile-custom-select-option-check {
    opacity: 1;
}

.im-profile-mobile-nav {
    display: none;
}

.im-profile-mobile-nav-trigger {
    width: 100%;
    min-height: 46px;
    padding: 12px 16px;
    border: 1.5px solid var(--im-color-line);
    border-radius: 16px;
    background: #fff;
    color: var(--im-color-text);
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: none;
}

.im-profile-mobile-nav-trigger.show,
.im-profile-mobile-nav-trigger:focus,
.im-profile-mobile-nav-trigger:hover {
    border-color: var(--im-color-primary);
    box-shadow: 0 0 0 4px rgba(63, 65, 181, 0.12);
    background: #fff;
    color: var(--im-color-text);
}

.im-profile-mobile-nav-trigger::after {
    margin-left: 12px;
}

.im-profile-mobile-nav-menu {
    width: 100%;
    padding: 8px;
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 16px;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.12);
}

.im-profile-mobile-nav-menu.show {
    display: block !important;
}

.im-profile-mobile-nav-menu .dropdown-item {
    min-height: 42px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--im-color-text);
    font-weight: 600;
}

.im-profile-mobile-nav-menu .dropdown-item i {
    opacity: 0;
}

.im-profile-mobile-nav-menu .dropdown-item.active,
.im-profile-mobile-nav-menu .dropdown-item:active {
    background: var(--im-color-primary);
    color: #fff;
}

.im-profile-mobile-nav-menu .dropdown-item.active i {
    opacity: 1;
}

.im-empty-state .im-icon-btn.im-icon-btn-lg {
    width: 72px;
    height: 72px;
    border-radius: 999px;
    font-size: 1.65rem;
    color: var(--im-color-primary);
    background: var(--im-color-primary-soft);
    border: 1px solid rgba(99, 102, 241, 0.18);
}

@media (max-width: 767.98px) {
    .im-profile-mobile-nav {
        display: block;
    }

    .im-profile-desktop-tabs {
        display: none !important;
    }
}

/* --- Room Booking final amendments --- */
.room-booking-toolbar-summary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.room-booking-toolbar-summary .im-chip {
    white-space: nowrap;
}

/* --- Student & Lecturer Portals --- */
.bos-portal-body {
    background: #f4f7ff;
    color: #172033;
    font-family: 'Public Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.bos-portal-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 292px minmax(0, 1fr);
}

.bos-portal-sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 32px 20px;
    background: #eef4ff;
    border-right: 1px solid #dbe5f6;
}

.bos-portal-brand {
    display: grid;
    gap: 4px;
    color: #0b3b88;
    text-decoration: none;
}

.bos-portal-brand strong {
    font-size: 34px;
    line-height: 1;
    font-weight: 800;
}

.bos-portal-brand span,
.bos-portal-kicker {
    color: #64748b;
    font-weight: 700;
    letter-spacing: .04em;
}

.bos-portal-nav {
    display: grid;
    gap: 10px;
}

.bos-portal-nav a {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 52px;
    padding: 0 18px;
    color: #4b5565;
    border-radius: 999px;
    text-decoration: none;
    font-weight: 700;
}

.bos-portal-nav a.is-active,
.bos-portal-nav a:hover {
    color: #fff;
    background: linear-gradient(135deg, #3f41b5, #2f61b3);
    box-shadow: 0 14px 30px rgba(63, 65, 181, .22);
}

.bos-portal-nav i {
    font-size: 1.1rem;
}

.bos-portal-logout {
    margin-top: auto;
}

.bos-portal-logout button {
    border: 0;
    background: transparent;
    color: #dc2626;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 10px;
}

.bos-portal-main {
    width: 100%;
    max-width: 1480px;
    margin: 0 auto;
    padding: 32px;
}

.bos-portal-topbar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 32px;
}

.bos-portal-topbar h1 {
    margin: 4px 0;
    color: #0b3b88;
    font-size: clamp(2rem, 4vw, 3.5rem);
    font-weight: 800;
}

.bos-portal-topbar p {
    margin: 0;
    color: #64748b;
    font-size: 1.05rem;
}

.bos-portal-user {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: 999px;
    background: #fff;
    color: #0b3b88;
    font-weight: 800;
    box-shadow: 0 10px 30px rgba(15, 23, 42, .08);
}

.bos-portal-grid,
.bos-portal-two-col {
    display: grid;
    gap: 16px;
    margin-bottom: 32px;
}

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

.bos-portal-two-col {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.bos-portal-profile-card h2,
.bos-portal-stat strong {
    display: block;
    margin: 12px 0 4px;
    color: #172033;
    font-size: 1.6rem;
    font-weight: 800;
}

.bos-portal-stat span,
.bos-portal-info-grid span {
    color: #64748b;
    font-weight: 700;
}

.bos-portal-stat small,
.bos-portal-list span {
    color: #718096;
}

.bos-portal-list {
    display: grid;
    gap: 12px;
}

.bos-portal-list>div {
    padding: 14px 16px;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    background: #f8fbff;
}

.bos-portal-list strong,
.bos-portal-list span {
    display: block;
}

.bos-portal-form-grid,
.bos-portal-info-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.bos-portal-form-grid label,
.bos-portal-info-grid>div {
    display: grid;
    gap: 8px;
    font-weight: 700;
    color: #334155;
}

.bos-portal-full {
    grid-column: 1 / -1;
}

.bos-portal-check {
    align-content: end;
    grid-template-columns: auto 1fr;
    align-items: center;
}

.bos-portal-inline-form {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.bos-portal-inline-form .im-input {
    max-width: 220px;
}

.bos-portal-empty {
    margin: 0;
    color: #64748b;
}

.bos-portal-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.bos-portal-actions form {
    margin: 0;
}

.bos-portal-drawer {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    justify-content: flex-end;
    background: rgba(15, 23, 42, 0.45);
    opacity: 0;
    pointer-events: none;
    transition: opacity 180ms ease;
}

.bos-portal-drawer.is-open {
    opacity: 1;
    pointer-events: auto;
}

.bos-portal-drawer-panel {
    width: min(640px, 100%);
    height: 100%;
    background: #fff;
    box-shadow: -24px 0 60px rgba(15, 23, 42, 0.18);
    transform: translateX(100%);
    transition: transform 220ms ease;
    display: flex;
    flex-direction: column;
}

.bos-portal-drawer.is-open .bos-portal-drawer-panel {
    transform: translateX(0);
}

.bos-portal-drawer-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 24px;
    border-bottom: 1px solid #e2e8f0;
}

.bos-portal-drawer-header h2 {
    margin: 10px 0 4px;
    color: #172554;
    font-size: 24px;
    font-weight: 800;
}

.bos-portal-drawer-header p {
    margin: 0;
    color: #64748b;
}

.bos-portal-drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
}

.bos-portal-drawer-footer {
    position: sticky;
    bottom: -24px;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin: 24px -24px -24px;
    padding: 18px 24px;
    background: rgba(255, 255, 255, 0.96);
    border-top: 1px solid #e2e8f0;
}

.im-alert {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
    padding: 16px 18px;
    border-radius: 18px;
    font-weight: 700;
}

.im-alert strong {
    display: inline-grid;
    width: 28px;
    height: 28px;
    place-items: center;
    border-radius: 999px;
}

.im-alert-success {
    background: #dcfce7;
    color: #047857;
}

.im-alert-success strong {
    border: 2px solid #10b981;
}

.im-alert-danger {
    background: #fee2e2;
    color: #b91c1c;
}

.im-alert-danger strong {
    border: 2px solid #ef4444;
}

.im-alert-warning {
    background: #fef3c7;
    color: #92400e;
}

.im-alert-warning strong {
    border: 2px solid #f59e0b;
}

@media (max-width: 991.98px) {
    .bos-portal-shell {
        grid-template-columns: 1fr;
    }

    .bos-portal-sidebar {
        position: relative;
        height: auto;
        padding: 18px;
    }

    .bos-portal-nav {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .bos-portal-main {
        padding: 20px;
    }

    .bos-portal-grid,
    .bos-portal-two-col,
    .bos-portal-form-grid,
    .bos-portal-info-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 575.98px) {
    .bos-portal-nav {
        grid-template-columns: 1fr;
    }

    .bos-portal-topbar {
        flex-direction: column;
    }

    .bos-portal-drawer-footer {
        flex-direction: column-reverse;
    }
}

/* ==========================================================================
   BOS Student Portal Dashboard Redesign Styles
   ========================================================================== */
.student-dashboard-container {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-top: 10px;
}

/* Welcome Hero Banner */
.student-welcome-hero {
    background: linear-gradient(135deg, #3f41b5 0%, #2f319d 100%);
    border-radius: 24px;
    padding: 32px;
    color: #ffffff;
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(63, 65, 181, 0.15);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.student-welcome-hero::after {
    content: '';
    position: absolute;
    right: -5%;
    top: -20%;
    width: 250px;
    height: 250px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    pointer-events: none;
}

.student-welcome-hero::before {
    content: '';
    position: absolute;
    right: 15%;
    bottom: -30%;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.03);
    pointer-events: none;
}

.student-welcome-text h1 {
    font-size: 2.25rem;
    font-weight: 800;
    margin: 0 0 8px 0;
    color: #ffffff;
    letter-spacing: -0.02em;
}

.student-welcome-text p {
    margin: 0;
    font-size: 1.05rem;
    color: rgba(255, 255, 255, 0.85);
    font-weight: 500;
}

.student-welcome-meta {
    display: flex;
    gap: 12px;
    margin-top: 16px;
    flex-wrap: wrap;
}

.student-meta-badge {
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #ffffff;
    padding: 6px 14px;
    border-radius: 12px;
    font-size: 0.85rem;
    font-weight: 600;
    backdrop-filter: blur(4px);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.student-meta-badge.status-active {
    background: rgba(16, 185, 129, 0.2);
    border-color: rgba(16, 185, 129, 0.3);
    color: #34d399;
}

/* Stats Row & Modern Cards */
.student-stats-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.student-stat-card-modern {
    background: #ffffff;
    border: 1px solid rgba(219, 228, 243, 0.8);
    border-radius: 24px;
    padding: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 4px 12px rgba(37, 42, 114, 0.03);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.student-stat-card-modern:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(37, 42, 114, 0.08);
    border-color: rgba(63, 65, 181, 0.2);
}

.student-stat-info {
    flex: 1;
}

.student-stat-label {
    display: block;
    font-size: 0.8rem;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 8px;
}

.student-stat-value {
    font-size: 1.85rem;
    font-weight: 800;
    color: #1e293b;
    margin: 0 0 8px 0;
    line-height: 1;
}

.student-stat-indicator {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.78rem;
    font-weight: 700;
    padding: 4px 8px;
    border-radius: 8px;
}

.student-stat-indicator.positive {
    background: #ecfdf5;
    color: #047857;
}

.student-stat-indicator.neutral {
    background: #f1f5f9;
    color: #475569;
}

.student-stat-progress-wrap {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.student-stat-progress-text {
    display: flex;
    justify-content: space-between;
    font-size: 0.78rem;
    font-weight: 600;
    color: #64748b;
}

.student-stat-progress-bar {
    height: 6px;
    background: #e2e8f0;
    border-radius: 999px;
    overflow: hidden;
}

.student-stat-progress-fill {
    height: 100%;
    border-radius: 999px;
    transition: width 0.5s ease-out;
}

.student-stat-progress-fill.primary {
    background: linear-gradient(90deg, #3f41b5, #5c5edc);
}

.student-stat-progress-fill.success {
    background: linear-gradient(90deg, #10b981, #34d399);
}

.student-stat-icon-box {
    width: 54px;
    height: 54px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
    margin-left: 16px;
}

.student-stat-icon-box.purple {
    background: #f3f4ff;
    color: #3f41b5;
}

.student-stat-icon-box.emerald {
    background: #ecfdf5;
    color: #10b981;
}

.student-stat-icon-box.blue {
    background: #eff6ff;
    color: #2563eb;
}

/* Two Column Content Grids */
.student-content-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
    gap: 24px;
    margin-bottom: 24px;
}

/* Card Header Controls */
.im-card-header-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.im-card-action-link {
    font-size: 0.82rem;
    font-weight: 700;
    color: #3f41b5;
    text-decoration: none;
    transition: color 0.15s ease;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.im-card-action-link:hover {
    color: #2f319d;
    text-decoration: underline;
}

/* Course Progress Card Row Items */
.student-course-item-row {
    display: flex;
    align-items: center;
    padding: 16px;
    border-radius: 18px;
    background: #f8fbff;
    border: 1px solid #e2e8f0;
    margin-bottom: 12px;
    transition: all 0.2s ease;
}

.student-course-item-row:hover {
    background: #f1f7ff;
    border-color: rgba(63, 65, 181, 0.15);
    transform: translateX(4px);
}

.student-course-icon-container {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
    margin-right: 16px;
}

.student-course-icon-container.idx-0 {
    color: #3f41b5;
    background: #f3f4ff;
}

.student-course-icon-container.idx-1 {
    color: #10b981;
    background: #ecfdf5;
}

.student-course-icon-container.idx-2 {
    color: #2563eb;
    background: #eff6ff;
}

.student-course-icon-container.idx-3 {
    color: #f59e0b;
    background: #fffbeb;
}

.student-course-icon-container.idx-4 {
    color: #ec4899;
    background: #fdf2f8;
}

.student-course-details {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.student-course-meta-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.student-course-code {
    font-size: 0.8rem;
    font-weight: 800;
    color: #64748b;
    letter-spacing: 0.05em;
}

.student-course-credits {
    font-size: 0.78rem;
    font-weight: 700;
    color: #64748b;
}

.student-course-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: #1e293b;
    margin: 2px 0 6px 0;
    line-height: 1.3;
}

.student-course-progress-section {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 4px;
}

.student-course-progress-bar-wrap {
    flex: 1;
    height: 6px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    overflow: hidden;
}

.student-course-progress-fill {
    height: 100%;
    border-radius: 999px;
}

.student-course-progress-fill.idx-0 {
    background: #3f41b5;
}

.student-course-progress-fill.idx-1 {
    background: #10b981;
}

.student-course-progress-fill.idx-2 {
    background: #2563eb;
}

.student-course-progress-fill.idx-3 {
    background: #f59e0b;
}

.student-course-progress-fill.idx-4 {
    background: #ec4899;
}

.student-course-progress-pct {
    font-size: 0.8rem;
    font-weight: 800;
    color: #1e293b;
    min-width: 32px;
    text-align: right;
}

/* Timeline / Takwim Akademik */
.student-timeline {
    position: relative;
    padding-left: 20px;
    margin-left: 8px;
    border-left: 2px dashed #cbd5e1;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.student-timeline-item {
    position: relative;
}

.student-timeline-marker {
    position: absolute;
    left: -27px;
    top: 3px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid #ffffff;
    box-shadow: 0 0 0 2px #3f41b5;
    background: #3f41b5;
    transition: all 0.2s ease;
}

.student-timeline-item.idx-0 .student-timeline-marker {
    background: #3f41b5;
    box-shadow: 0 0 0 2px #3f41b5;
}

.student-timeline-item.idx-1 .student-timeline-marker {
    background: #10b981;
    box-shadow: 0 0 0 2px #10b981;
}

.student-timeline-item.idx-2 .student-timeline-marker {
    background: #2563eb;
    box-shadow: 0 0 0 2px #2563eb;
}

.student-timeline-item.idx-3 .student-timeline-marker {
    background: #f59e0b;
    box-shadow: 0 0 0 2px #f59e0b;
}

.student-timeline-item.idx-4 .student-timeline-marker {
    background: #ec4899;
    box-shadow: 0 0 0 2px #ec4899;
}

.student-timeline-item.idx-5 .student-timeline-marker {
    background: #64748b;
    box-shadow: 0 0 0 2px #64748b;
}

.student-timeline-content {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 14px 16px;
    transition: all 0.2s ease;
}

.student-timeline-content:hover {
    border-color: rgba(63, 65, 181, 0.15);
    background: #f8fbff;
    transform: translateX(4px);
}

.student-timeline-date {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 6px;
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.student-timeline-item.idx-0 .student-timeline-date {
    color: #3f41b5;
    background: #f3f4ff;
}

.student-timeline-item.idx-1 .student-timeline-date {
    color: #10b981;
    background: #ecfdf5;
}

.student-timeline-item.idx-2 .student-timeline-date {
    color: #2563eb;
    background: #eff6ff;
}

.student-timeline-item.idx-3 .student-timeline-date {
    color: #f59e0b;
    background: #fffbeb;
}

.student-timeline-item.idx-4 .student-timeline-date {
    color: #ec4899;
    background: #fdf2f8;
}

.student-timeline-item.idx-5 .student-timeline-date {
    color: #64748b;
    background: #f1f5f9;
}

.student-timeline-title {
    font-size: 0.9rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 4px 0;
    line-height: 1.3;
}

.student-timeline-desc {
    font-size: 0.78rem;
    color: #64748b;
    margin: 0;
    line-height: 1.4;
}

/* Row List Cards (Latest Assignments & Notes) */
.student-list-items {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.student-list-item-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-radius: 18px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    transition: all 0.2s ease;
}

.student-list-item-card:hover {
    background: #f8fbff;
    border-color: rgba(63, 65, 181, 0.15);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(37, 42, 114, 0.02);
}

.student-list-item-left {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1;
}

.student-list-item-icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    flex-shrink: 0;
}

.student-list-item-icon.assignment {
    background: #fef2f2;
    color: #ef4444;
}

.student-list-item-icon.lecture-note {
    background: #f0fdf4;
    color: #15803d;
}

.student-list-item-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.student-list-item-title {
    font-size: 0.92rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
    line-height: 1.3;
}

.student-list-item-meta {
    font-size: 0.78rem;
    color: #64748b;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.student-list-item-meta .sep {
    color: #cbd5e1;
}

.student-list-item-meta .status-badge {
    font-size: 0.72rem;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 4px;
    text-transform: uppercase;
}

.student-list-item-meta .status-badge.pending {
    background: #fff7ed;
    color: #c2410c;
}

.student-list-item-meta .status-badge.submitted {
    background: #f0fdf4;
    color: #166534;
}

.student-list-item-right {
    margin-left: 12px;
}

.student-action-btn-circle {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #f1f5f9;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #475569;
    transition: all 0.2s ease;
    cursor: pointer;
    text-decoration: none;
}

.student-list-item-card:hover .student-action-btn-circle {
    background: #3f41b5;
    color: #ffffff;
}

/* Responsive Overrides */
@media (max-width: 1024px) {
    .student-stats-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .student-content-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .student-stats-row {
        grid-template-columns: 1fr;
    }

    .student-welcome-hero {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        padding: 24px;
    }

    .student-welcome-text h1 {
        font-size: 1.75rem;
    }
}

/* ==========================================
   BOS Portals - Common Profile Revamp Styles
   ========================================== */
.profile-revamp-card {
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
    border: none;
    padding: 24px;
}

.profile-revamp-avatar-wrapper {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    margin: 0 auto 20px;
    position: relative;
    border: 3px solid #e2e8f0;
    padding: 4px;
    background: #fff;
}

.profile-revamp-avatar {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.profile-revamp-status {
    position: absolute;
    bottom: 5px;
    right: 5px;
    background: #10b981;
    color: white;
    font-size: 10px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 20px;
    border: 2px solid white;
}

.profile-revamp-status.inactive {
    background: #64748b;
}

.profile-revamp-name {
    font-family: 'Outfit', sans-serif;
    font-size: 22px;
    font-weight: 800;
    color: #1e293b;
    margin-bottom: 4px;
}

.profile-revamp-designation {
    font-size: 14px;
    color: #64748b;
    margin-bottom: 20px;
}

.profile-revamp-info-row {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px dashed #e2e8f0;
    font-size: 14px;
}

.profile-revamp-info-row:last-child {
    border-bottom: none;
}

.profile-revamp-info-label {
    color: #64748b;
    font-weight: 500;
}

.profile-revamp-info-value {
    color: #1e3a8a;
    font-weight: 700;
}

.profile-revamp-achievements {
    background: #e0e7ff;
    border-radius: 12px;
    padding: 20px;
    margin-top: 20px;
}

.profile-revamp-achievements h5 {
    color: #312e81;
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 15px;
}

.progress-bar-custom {
    height: 8px;
    background: #c7d2fe;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 10px;
}

.progress-bar-custom-fill {
    height: 100%;
    background: #312e81;
    border-radius: 4px;
}

.progress-text {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    color: #475569;
    font-weight: 600;
}

.progress-text span:last-child {
    color: #312e81;
    font-weight: 800;
}

.profile-revamp-tabs {
    background: white;
    padding: 24px;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
}

.nav-pills-custom {
    gap: 10px;
    border-bottom: none !important;
}

.nav-pills-custom .nav-link {
    color: #64748b;
    border-radius: 20px;
    font-weight: 600;
    padding: 8px 24px;
    background: #e2e8f0;
    border: none;
    margin-bottom: 10px;
}

.nav-pills-custom .nav-link.active {
    background: #312e81;
    color: white;
}

.profile-info-section {
    margin-top: 24px;
}

.profile-info-section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 16px;
}

.profile-info-section-title i {
    color: #312e81;
    font-size: 20px;
}

.profile-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.profile-info-card {
    background: #f8fafc;
    border-radius: 12px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    border: 1px solid #e2e8f0;
}

.profile-info-card-label {
    font-size: 13px;
    color: #64748b;
    font-weight: 500;
}

.profile-info-card-value {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 600;
    color: #1e293b;
}

.profile-info-card-value i {
    color: #64748b;
    font-size: 18px;
}

.profile-service-card {
    background: #eff6ff;
    border-radius: 16px;
    padding: 20px;
    border: 1px solid #bfdbfe;
}

.profile-service-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 16px;
}

.profile-service-item {
    background: white;
    padding: 16px;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
}

.profile-service-item-label {
    font-size: 13px;
    color: #64748b;
    margin-bottom: 4px;
}

.profile-service-item-value {
    font-size: 15px;
    font-weight: 700;
    color: #1e293b;
}

@media (max-width: 768px) {
    .profile-info-grid {
        grid-template-columns: 1fr;
    }

    .profile-service-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================
   Student Portal – Profile Page
   ========================================== */
.student-results-summary-card {
    background: linear-gradient(135deg, #4f46e5 0%, #312e81 100%);
    border-radius: 16px;
    padding: 24px;
    color: white;
    margin-bottom: 24px;
}

.student-results-summary-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 16px;
}

.student-results-summary-item {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 16px;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.student-results-summary-label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #c7d2fe;
    margin-bottom: 4px;
}

.student-results-summary-value {
    font-size: 24px;
    font-weight: 800;
}

@media (max-width: 576px) {
    .student-results-summary-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================
   Lecturer Portal – Profile Page
   ========================================== */
.lecturer-stat-badge {
    background: #f1f5f9;
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 13px;
    color: #475569;
    font-weight: 600;
    margin-bottom: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.lecturer-stat-badge span:last-child {
    background: #312e81;
    color: white;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 12px;
    font-weight: 700;
}

.lecturer-socmed-grid {
    display: flex;
    gap: 12px;
    margin-top: 12px;
}

.lecturer-socmed-icon {
    font-size: 18px;
    color: #64748b;
    transition: color 0.2s;
}

.lecturer-socmed-icon:hover {
    color: #312e81;
}

/* ==========================================
   Lecturer Portal – Dashboard
   ========================================== */
.lecturer-welcome-card {
    background: linear-gradient(135deg, #4f46e5 0%, #312e81 100%);
    border-radius: 16px;
    padding: 32px;
    color: white;
    box-shadow: 0 10px 25px rgba(49, 46, 129, 0.15);
    margin-bottom: 28px;
    position: relative;
    overflow: hidden;
}

.lecturer-welcome-card::after {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 300px;
    height: 300px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 50%;
}

.lecturer-welcome-title {
    font-family: 'Outfit', sans-serif;
    font-size: 28px;
    font-weight: 800;
    margin-bottom: 8px;
}

.lecturer-welcome-subtitle {
    font-size: 15px;
    color: #e0e7ff;
    max-width: 600px;
    line-height: 1.5;
    margin-bottom: 0;
}

.lecturer-welcome-meta {
    position: absolute;
    bottom: 24px;
    right: 32px;
    text-align: right;
    font-size: 13px;
    color: #c7d2fe;
    font-weight: 600;
}

.lecturer-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 28px;
}

.lecturer-stat-card {
    background: white;
    border-radius: 16px;
    padding: 24px;
    border: 1px solid #f1f5f9;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.25s ease;
}

.lecturer-stat-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
    border-color: #e2e8f0;
}

.lecturer-stat-info {
    display: flex;
    flex-direction: column;
}

.lecturer-stat-label {
    font-size: 13px;
    color: #64748b;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.lecturer-stat-value {
    font-size: 32px;
    font-weight: 800;
    color: #1e293b;
    line-height: 1.1;
}

.lecturer-stat-desc {
    font-size: 11px;
    color: #94a3b8;
    margin-top: 4px;
}

.lecturer-stat-icon-box {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
}

.icon-blue {
    background: #eff6ff;
    color: #3b82f6;
}

.icon-purple {
    background: #faf5ff;
    color: #a855f7;
}

.icon-orange {
    background: #fff7ed;
    color: #f97316;
}

.icon-green {
    background: #f0fdf4;
    color: #22c55e;
}

.lecturer-main-grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 24px;
    margin-bottom: 28px;
}

/* Lecturer Dashboard – Teaching Schedule */
.schedule-timeline-container {
    max-height: 330px;
    overflow-y: auto;
    padding-right: 8px;
}

.schedule-timeline-container::-webkit-scrollbar {
    width: 6px;
}

.schedule-timeline-container::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 8px;
}

.schedule-timeline-container::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 8px;
}

.schedule-timeline-container::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

.schedule-timeline {
    position: relative;
    padding-left: 28px;
    margin: 8px 0;
    list-style: none;
}

.schedule-timeline-item {
    position: relative;
    padding-bottom: 24px;
}

.schedule-timeline-item:last-child {
    padding-bottom: 4px;
}

.schedule-timeline-item::before {
    content: '';
    position: absolute;
    left: -17px;
    top: 24px;
    bottom: -6px;
    width: 2px;
    background: #e2e8f0;
}

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

.schedule-timeline-icon {
    position: absolute;
    left: -29px;
    top: 0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 13px;
    z-index: 1;
}

.schedule-timeline-icon.is-today {
    background: #312e81;
    color: white;
    box-shadow: 0 0 0 4px rgba(49, 46, 129, 0.15);
}

.schedule-timeline-icon.is-future {
    background: white;
    border: 2px solid #312e81;
    color: #312e81;
}

.schedule-timeline-content {
    display: flex;
    flex-direction: column;
}

.schedule-timeline-title {
    font-size: 15px;
    font-weight: 700;
    color: #1e293b;
    line-height: 1.3;
}

.schedule-timeline-time {
    font-size: 13px;
    color: #475569;
    margin-top: 4px;
    font-weight: 500;
}

@media (max-width: 992px) {
    .lecturer-stats-grid {
        grid-template-columns: 1fr 1fr;
    }

    .lecturer-main-grid {
        grid-template-columns: 1fr;
    }

    .lecturer-welcome-card {
        padding: 24px;
    }

    .lecturer-welcome-meta {
        position: static;
        text-align: left;
        margin-top: 16px;
    }
}

@media (max-width: 576px) {
    .lecturer-stats-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================
   BOS Portals - Course Detail & Class Styling
   ========================================== */
.course-detail-kredit-box {
    background: rgba(116, 51, 255, 0.08);
    border: 1px solid rgba(116, 51, 255, 0.15);
}

.course-detail-submit-box {
    background: rgba(116, 51, 255, 0.03);
    border: 1px dashed rgba(116, 51, 255, 0.15);
}

.course-detail-small-date {
    font-size: 0.75rem;
}

.course-detail-form-file {
    max-width: 180px;
}

.lecturer-class-meta {
    font-size: 0.75rem;
    opacity: 0.7;
}

/* Continuous Assessment Styling */
.marks-input {
    max-width: 80px !important;
    text-align: center;
}

.feedback-input {
    max-width: 150px !important;
}

.assessment-header {
    background: linear-gradient(135deg, var(--bos-primary) 0%, #4f46e5 100%);
    color: #ffffff;
    border-radius: 12px 12px 0 0;
}

.assessment-card {
    border: 1px solid var(--bos-border);
    border-radius: 12px;
    background-color: #ffffff;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

/* Custom Student Portal Additions */
.status-dot {
    font-size: 6px;
    vertical-align: middle;
    margin-right: 4px;
}

.aid-badge {
    background: rgba(234, 179, 8, 0.15) !important;
    border-color: rgba(234, 179, 8, 0.25) !important;
    color: #facc15 !important;
}

.student-hero-quick-buttons-wrapper {
    display: flex;
    gap: 12px;
    margin-top: 16px;
    flex-wrap: wrap;
}

.student-hero-btn {
    background: rgba(255, 255, 255, 0.18) !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    color: #ffffff !important;
    padding: 6px 14px;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
}

.student-hero-btn:hover {
    background: rgba(255, 255, 255, 0.28) !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
    color: #ffffff !important;
    transform: translateY(-1px);
}

.financial-filter-form {
    padding: 4px;
}

.filter-input-wrap {
    flex: 1;
    min-width: 150px;
}

.filter-btn-wrap {
    min-width: 100px;
}

.filter-btn-wrap .search-btn {
    width: 100%;
    height: 38px;
}

.financial-empty-icon {
    font-size: 3rem;
    display: block;
    margin-bottom: 8px;
}

.results-empty-icon {
    font-size: 3rem;
    color: var(--im-color-text-muted);
}

.courses-empty-icon {
    font-size: 3rem;
    color: var(--im-color-text-muted);
}

/* Attendance Radio Segment Control */
.attendance-status-selector {
    display: inline-flex;
    background-color: var(--im-color-gray-100, #f3f4f6);
    padding: 3px;
    border-radius: 8px;
    border: 1px solid var(--im-color-gray-200, #e5e7eb);
}

.attendance-status-selector label {
    margin-bottom: 0;
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 6px;
    transition: all 0.2s ease;
    user-select: none;
    color: var(--im-color-text-muted, #6b7280);
}

.attendance-status-selector input[type="radio"] {
    display: none;
}

.attendance-status-selector input[type="radio"]:checked+label.status-present {
    background-color: #22c55e;
    color: #ffffff;
}

.attendance-status-selector input[type="radio"]:checked+label.status-absent {
    background-color: #ef4444;
    color: #ffffff;
}

.attendance-status-selector input[type="radio"]:checked+label.status-late {
    background-color: #f97316;
    color: #ffffff;
}

.attendance-status-selector input[type="radio"]:checked+label.status-excused {
    background-color: #3b82f6;
    color: #ffffff;
}

/* Student Portal Attendance Badges */
.att-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    font-size: 0.75rem;
    font-weight: 700;
    border-radius: 6px;
    gap: 4px;
}

.att-badge.present {
    background-color: rgba(34, 197, 94, 0.15);
    color: #15803d;
}

.att-badge.absent {
    background-color: rgba(239, 68, 68, 0.15);
    color: #b91c1c;
}

.att-badge.late {
    background-color: rgba(249, 115, 22, 0.15);
    color: #c2410c;
}

.att-badge.excused {
    background-color: rgba(59, 130, 246, 0.15);
    color: #1d4ed8;
}

.att-warning-badge {
    background-color: rgba(239, 68, 68, 0.15) !important;
    border: 1px solid rgba(239, 68, 68, 0.25) !important;
    color: #ef4444 !important;
    font-weight: 700;
    font-size: 0.75rem;
    padding: 4px 10px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.att-success-badge {
    background-color: rgba(34, 197, 94, 0.15) !important;
    border: 1px solid rgba(34, 197, 94, 0.25) !important;
    color: #22c55e !important;
    font-weight: 700;
    font-size: 0.75rem;
    padding: 4px 10px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.attendance-badge-indicator {
    width: 8px;
    height: 8px;
    display: inline-block;
    vertical-align: middle;
    margin-left: 4px;
}

.detail-label-col {
    width: 35%;
}

.progress-height-sm {
    height: 6px;
}

.attendance-checkbox-col {
    width: 40px;
    text-align: center;
}

/* Custom Bulk Attendance Action Buttons */
.im-btn-warning {
    background-color: #f97316;
    border-color: #f97316;
    color: #ffffff;
}

.im-btn-warning:hover {
    background-color: #ea580c;
    border-color: #ea580c;
    color: #ffffff;
}

.im-btn-info {
    background-color: #3b82f6;
    border-color: #3b82f6;
    color: #ffffff;
}

.im-btn-info:hover {
    background-color: #2563eb;
    border-color: #2563eb;
    color: #ffffff;
}

/* Student Timetable Printing CSS */
.student-schedule-print {
    display: none !important;
}

@media print {
    @page {
        size: A4 landscape;
        margin: 10mm;
    }

    /* Completely remove screen UI from print flow */
    #header,
    .header,
    #sidebar,
    .sidebar,
    #mobile-sidebar,
    .mobile-sidebar,
    .mobile-sidebar-overlay,
    #notificationPanel,
    .notification-sidebar-panel,
    .notification-panel-overlay,
    #bosAiDrawer,
    .bos-ai-window,
    #bos-ai-assistant-widget,
    .bos-ai-panel,
    .bos-ai-launcher,
    .bos-sidebar-flyout,
    #bosSidebarFlyout,
    .global-mobile-bottom-nav,
    .global-mobile-menu-btn,
    .modal,
    .modal-backdrop,
    .bos-page-header,
    .bos-page-title,
    .bos-app-title-card,
    .app-title-card,
    .pagetitle,
    .im-app-title,
    .breadcrumb,
    .bos-breadcrumb,
    .bos-breadcrumb-nav,
    .bos-breadcrumb-item,
    .bos-no-print,
    .schedule-section-header,
    .agenda-card,
    .today-agenda,
    .tomorrow-agenda,
    .im-card,
    .schedule-print-btn,
    #footer,
    .footer,
    .back-to-top,
    .preloader-container,
    .im-alert {
        display: none !important;
        visibility: hidden !important;
        box-shadow: none !important;
        background: none !important;
        filter: none !important;
    }

    /* Printable hierarchy: pure white, no gradient, no shadow, no filter */
    html,
    body,
    body.portal-student,
    body.portal-lecturer,
    #app,
    main,
    #main,
    .main,
    .im-page,
    .container-fluid,
    .student-schedule-print,
    .print-timetable-container,
    .bos-print-timetable-wrapper {
        background: #fff !important;
        background-color: #fff !important;
        background-image: none !important;
        box-shadow: none !important;
        filter: none !important;
    }

    html, body {
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        color: #000000 !important;
        font-family: system-ui, -apple-system, sans-serif !important;
    }

    #app,
    main,
    #main,
    .main,
    .im-page,
    .container-fluid {
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        max-width: none !important;
        border: none !important;
    }

    .student-schedule-print {
        display: block !important;
        position: static !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
    }

    .student-schedule-print .print-header {
        text-align: center;
        margin-bottom: 8px;
        padding-bottom: 6px;
        border-bottom: 1.5px solid #1e293b;
    }

    .student-schedule-print .print-title {
        font-size: 17px !important;
        font-weight: 800 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
        color: #0f172a !important;
        margin: 0 0 2px !important;
    }

    .student-schedule-print .print-meta-grid {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 6px 14px !important;
        margin-bottom: 12px !important;
        padding: 6px 10px !important;
        background-color: #f8fafc !important;
        border: 1px solid #cbd5e1 !important;
        border-radius: 6px !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .student-schedule-print .print-meta-item .meta-label {
        font-size: 9px !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        color: #64748b !important;
        line-height: 1.2 !important;
    }

    .student-schedule-print .print-meta-item .meta-value {
        font-size: 10.5px !important;
        font-weight: 700 !important;
        color: #0f172a !important;
        line-height: 1.3 !important;
    }

    .student-schedule-print .print-meta-item .meta-value code {
        font-family: inherit !important;
        color: inherit !important;
        background: transparent !important;
        padding: 0 !important;
        font-size: inherit !important;
    }

    .bos-print-timetable-wrapper {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
    }

    .table-print-list {
        width: 100% !important;
        border-collapse: collapse !important;
        table-layout: fixed !important;
        margin: 0 !important;
        font-size: 9.5px !important;
        border: 1.5px solid #334155 !important;
    }

    .table-print-list thead {
        display: table-header-group !important;
    }

    .table-print-list tr {
        break-inside: avoid !important;
        page-break-inside: avoid !important;
    }

    .table-print-list th,
    .table-print-list td {
        border: 1px solid #94a3b8 !important;
        padding: 5px 8px !important;
        font-size: 9.5px !important;
        line-height: 1.3 !important;
        color: #0f172a !important;
        vertical-align: middle !important;
    }

    .table-print-list th {
        background-color: #f1f5f9 !important;
        font-weight: 800 !important;
        text-transform: uppercase !important;
        font-size: 9px !important;
        letter-spacing: 0.3px !important;
        color: #1e293b !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .table-print-list th.day-cell,
    .table-print-list td.day-cell {
        width: 11% !important;
        font-weight: 800 !important;
        text-align: center !important;
        text-transform: uppercase !important;
        background-color: #f8fafc !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .table-print-list th.time-cell,
    .table-print-list td.time-cell {
        width: 17% !important;
        white-space: nowrap !important;
        font-weight: 600 !important;
    }

    .table-print-list th.code-cell,
    .table-print-list td.code-cell {
        width: 12% !important;
        font-weight: 800 !important;
    }

    .table-print-list th.name-cell,
    .table-print-list td.name-cell {
        width: 28% !important;
        font-weight: 600 !important;
    }

    .table-print-list th.room-cell,
    .table-print-list td.room-cell {
        width: 14% !important;
    }

    .table-print-list th.lecturer-cell,
    .table-print-list td.lecturer-cell {
        width: 18% !important;
    }

    .table-print-list td.no-class-cell {
        text-align: center !important;
        font-style: italic !important;
        color: #64748b !important;
        padding: 7px !important;
    }
}

/* Academic Inbox Styling */
.messaging-layout {
    display: flex;
    gap: 20px;
    height: 680px;
}

.messaging-sidebar {
    width: 320px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
}

.messaging-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    /* Prevents flex items from overflowing */
}

.thread-list-scroll {
    overflow-y: auto;
    flex-grow: 1;
}

.thread-list-item {
    display: block;
    padding: 15px 20px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    text-decoration: none;
    color: inherit;
    transition: background-color 0.2s, border-left-color 0.2s;
    border-left: 3px solid transparent;
}

.thread-list-item:hover {
    background-color: rgba(63, 65, 181, 0.03);
    color: inherit;
}

.thread-list-item.active {
    background-color: rgba(63, 65, 181, 0.06);
    border-left-color: var(--im-color-primary);
    color: inherit;
}

.message-history-box {
    display: flex;
    flex-direction: column;
    gap: 15px;
    background-color: #f8fafc;
}

.message-bubble-wrapper {
    display: flex;
    width: 100%;
}

.message-bubble-wrapper.sent {
    justify-content: flex-end;
}

.message-bubble-wrapper.received {
    justify-content: flex-start;
}

.message-bubble {
    max-width: 75%;
    padding: 12px 16px;
    border-radius: 12px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
    font-size: 0.875rem;
    line-height: 1.5;
    position: relative;
}

.message-bubble-wrapper.sent .message-bubble {
    background-color: var(--im-color-primary);
    color: #ffffff;
    border-bottom-right-radius: 2px;
}

.message-bubble-wrapper.received .message-bubble {
    background-color: #ffffff;
    color: var(--im-color-text);
    border-bottom-left-radius: 2px;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.message-meta {
    font-size: 0.7rem;
    margin-top: 4px;
}

.text-white-50 {
    color: rgba(255, 255, 255, 0.7) !important;
}

.text-xxs {
    font-size: 0.7rem;
}

.text-xxs.text-white-50 {
    color: rgba(255, 255, 255, 0.6) !important;
}

.text-xxs.text-primary {
    color: var(--im-color-primary) !important;
}

.text-xxs.text-secondary {
    color: #64748b !important;
}

.text-xxs.text-muted {
    color: #94a3b8 !important;
}

@media (max-width: 991px) {
    .messaging-layout {
        flex-direction: column;
        height: auto;
    }

    .messaging-sidebar {
        width: 100%;
        height: 350px;
    }

    .messaging-content {
        height: 500px;
    }
}

.msg-max-width-180 {
    max-width: 180px;
}

.msg-max-width-220 {
    max-width: 220px;
}

.msg-max-width-300 {
    max-width: 300px;
}

/*--------------------------------------------------------------
# Portal Color Differentiation
# Scoped themes for Student and Lecturer portals
--------------------------------------------------------------*/

/* Student Portal: Blue/Teal Theme */
body.portal-student {
    --bos-primary: #0284c7;
    --bos-primary-dark: #0369a1;
    --bos-primary-soft: #e0f2fe;
    --bos-secondary: #0d9488;
    --bos-secondary-dark: #0f766e;
    --bos-secondary-soft: #ccfbf1;
    --bos-surface-card: #f0f9ff;

    --primary-color: var(--bos-primary);
    --bs-primary-rgb: 2, 132, 199;
    --bs-btn-bg: var(--bos-primary);
    --bs-btn-hover-bg: var(--bos-primary-dark);
    --bs-btn-hover-border-color: var(--bos-primary-dark);
    --bs-btn-active-bg: var(--bos-primary-dark);
    --bs-btn-active-border-color: var(--bos-primary-dark);
    --bs-btn-disabled-bg: var(--bos-primary);
    --bs-btn-disabled-border-color: var(--bos-primary);
    --bs-btn-border-color: var(--bos-primary);
    --bs-link-color: var(--bos-primary);
    --bs-link-color-rgb: 2, 132, 199;
    --bs-link-hover-color: var(--bos-primary-dark);

    /* Design System Variable Overrides */
    --im-color-primary: var(--bos-primary);
    --im-color-primary-strong: var(--bos-primary-dark);
    --im-color-primary-soft: var(--bos-primary-soft);
    --im-color-primary-border: #bae6fd;
    --im-color-surface-muted: #f0f9ff;
    --im-color-text-link: var(--bos-primary);
    --im-shadow-sm: 0 4px 10px rgba(2, 132, 199, 0.06);
    --im-shadow-md: 0 12px 32px rgba(2, 132, 199, 0.08);
    --im-shadow-lg: 0 20px 48px rgba(2, 132, 199, 0.12);
}

/* Lecturer Portal: Green/Indigo Theme */
body.portal-lecturer {
    --bos-primary: #10b981;
    --bos-primary-dark: #059669;
    --bos-primary-soft: #d1fae5;
    --bos-secondary: #4f46e5;
    --bos-secondary-dark: #3730a3;
    --bos-secondary-soft: #e0e7ff;
    --bos-surface-card: #f0fdf4;

    --primary-color: var(--bos-primary);
    --bs-primary-rgb: 16, 185, 129;
    --bs-btn-bg: var(--bos-primary);
    --bs-btn-hover-bg: var(--bos-primary-dark);
    --bs-btn-hover-border-color: var(--bos-primary-dark);
    --bs-btn-active-bg: var(--bos-primary-dark);
    --bs-btn-active-border-color: var(--bos-primary-dark);
    --bs-btn-disabled-bg: var(--bos-primary);
    --bs-btn-disabled-border-color: var(--bos-primary);
    --bs-btn-border-color: var(--bos-primary);
    --bs-link-color: var(--bos-primary);
    --bs-link-color-rgb: 16, 185, 129;
    --bs-link-hover-color: var(--bos-primary-dark);

    /* Design System Variable Overrides */
    --im-color-primary: var(--bos-primary);
    --im-color-primary-strong: var(--bos-primary-dark);
    --im-color-primary-soft: var(--bos-primary-soft);
    --im-color-primary-border: #a7f3d0;
    --im-color-surface-muted: #f0fdf4;
    --im-color-text-link: var(--bos-primary);
    --im-shadow-sm: 0 4px 10px rgba(16, 185, 129, 0.06);
    --im-shadow-md: 0 12px 32px rgba(16, 185, 129, 0.08);
    --im-shadow-lg: 0 20px 48px rgba(16, 185, 129, 0.12);
}

/* ==========================================================================
   Scoped Overrides for Portal Visual Differentiation
   ========================================================================== */

/* --- Student Portal (Blue/Teal) Overrides --- */
body.portal-student .sidebar-nav li.nav-item.active li.active a {
    background-color: var(--bos-primary) !important;
    color: #FFF !important;
}

body.portal-student .sidebar-nav .nav-content a:hover {
    color: var(--bos-primary-dark) !important;
}

body.portal-student .student-welcome-hero {
    background: linear-gradient(135deg, var(--bos-primary) 0%, var(--bos-primary-dark) 100%) !important;
    box-shadow: 0 10px 30px rgba(2, 132, 199, 0.15) !important;
}

body.portal-student .student-results-summary-card {
    background: linear-gradient(135deg, var(--bos-primary) 0%, var(--bos-primary-dark) 100%) !important;
}

body.portal-student .student-list-item-card:hover .student-action-btn-circle {
    background: var(--bos-primary) !important;
    color: #ffffff !important;
}

body.portal-student .student-stat-icon-box.purple {
    background: var(--bos-primary-soft) !important;
    color: var(--bos-primary) !important;
}

body.portal-student .student-course-icon-container.idx-0 {
    color: var(--bos-primary) !important;
    background: var(--bos-primary-soft) !important;
}

body.portal-student .student-course-progress-fill.idx-0 {
    background: var(--bos-primary) !important;
}

body.portal-student .student-timeline-item.idx-0 .student-timeline-marker {
    background: var(--bos-primary) !important;
    box-shadow: 0 0 0 2px var(--bos-primary) !important;
}

body.portal-student .student-timeline-item.idx-0 .student-timeline-date {
    color: var(--bos-primary) !important;
    background: var(--bos-primary-soft) !important;
}

body.portal-student .student-timeline-content:hover,
body.portal-student .student-list-item-card:hover {
    border-color: rgba(2, 132, 199, 0.2) !important;
    box-shadow: 0 4px 12px rgba(2, 132, 199, 0.05) !important;
}

body.portal-student .nav-pills-custom .nav-link.active {
    background: var(--bos-primary) !important;
}

body.portal-student .progress-bar-custom-fill {
    background: var(--bos-primary) !important;
}

body.portal-student .progress-text span:last-child {
    color: var(--bos-primary) !important;
}

body.portal-student .profile-info-section-title i {
    color: var(--bos-primary) !important;
}

body.portal-student .profile-revamp-achievements {
    background: var(--bos-primary-soft) !important;
}

body.portal-student .profile-revamp-achievements h5 {
    color: var(--bos-primary-dark) !important;
}

body.portal-student .progress-bar-custom {
    background: rgba(2, 132, 199, 0.15) !important;
}

body.portal-student .assessment-header {
    background: linear-gradient(135deg, var(--bos-primary) 0%, var(--bos-primary-dark) 100%) !important;
}

body.portal-student .wallet-submit-btn {
    background-color: var(--bos-primary) !important;
}

body.portal-student .wallet-submit-btn:hover {
    background-color: var(--bos-primary-dark) !important;
}

body.portal-student .wallet-view-all-link {
    color: var(--bos-primary) !important;
}

body.portal-student .wallet-view-all-link:hover {
    color: var(--bos-primary-dark) !important;
}

body.portal-student .wallet-form-control:focus {
    border-color: var(--bos-primary) !important;
    box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.1) !important;
}

body.portal-student .wallet-dropzone:hover,
body.portal-student .wallet-dropzone.dragover {
    border-color: var(--bos-primary) !important;
    background-color: rgba(2, 132, 199, 0.02) !important;
}

body.portal-student .wallet-dropzone-icon {
    background-color: var(--bos-primary-soft) !important;
    color: var(--bos-primary) !important;
}

body.portal-student .btn-pill-primary {
    background-color: var(--bos-primary) !important;
}

body.portal-student .btn-pill-primary:hover {
    background-color: var(--bos-primary-dark) !important;
}

body.portal-student .btn-primary {
    background-color: var(--bos-primary) !important;
    border-color: var(--bos-primary) !important;
}

body.portal-student .btn-primary:hover {
    background-color: var(--bos-primary-dark) !important;
    border-color: var(--bos-primary-dark) !important;
}

body.portal-student .btn-outline-primary {
    color: var(--bos-primary) !important;
    border-color: var(--bos-primary) !important;
}

body.portal-student .btn-outline-primary:hover {
    background-color: var(--bos-primary) !important;
    border-color: var(--bos-primary) !important;
    color: #fff !important;
}

body.portal-student .im-btn-secondary {
    background: var(--bos-primary-soft) !important;
    border-color: var(--bos-primary-soft) !important;
    color: var(--im-color-text) !important;
}

body.portal-student .im-icon-btn {
    border-color: rgba(2, 132, 199, 0.15) !important;
}

body.portal-student .im-card-outline-primary {
    border-color: rgba(2, 132, 199, 0.55) !important;
}


/* --- Lecturer Portal (Green/Indigo) Overrides --- */
body.portal-lecturer .sidebar-nav li.nav-item.active li.active a {
    background-color: var(--bos-primary) !important;
    color: #FFF !important;
}

body.portal-lecturer .sidebar-nav .nav-content a:hover {
    color: var(--bos-primary-dark) !important;
}

body.portal-lecturer .lecturer-welcome-card {
    background: linear-gradient(135deg, var(--bos-primary) 0%, var(--bos-primary-dark) 100%) !important;
    box-shadow: 0 10px 25px rgba(16, 185, 129, 0.15) !important;
}

body.portal-lecturer .lecturer-stat-badge span:last-child {
    background: var(--bos-primary) !important;
}

body.portal-lecturer .lecturer-socmed-icon:hover {
    color: var(--bos-primary) !important;
}

body.portal-lecturer .nav-pills-custom .nav-link.active {
    background: var(--bos-primary) !important;
}

body.portal-lecturer .progress-bar-custom-fill {
    background: var(--bos-primary) !important;
}

body.portal-lecturer .progress-text span:last-child {
    color: var(--bos-primary) !important;
}

body.portal-lecturer .profile-info-section-title i {
    color: var(--bos-primary) !important;
}

body.portal-lecturer .profile-revamp-achievements {
    background: var(--bos-primary-soft) !important;
}

body.portal-lecturer .profile-revamp-achievements h5 {
    color: var(--bos-primary-dark) !important;
}

body.portal-lecturer .progress-bar-custom {
    background: rgba(16, 185, 129, 0.15) !important;
}

body.portal-lecturer .btn-primary {
    background-color: var(--bos-primary) !important;
    border-color: var(--bos-primary) !important;
}

body.portal-lecturer .btn-primary:hover {
    background-color: var(--bos-primary-dark) !important;
    border-color: var(--bos-primary-dark) !important;
}

body.portal-lecturer .btn-outline-primary {
    color: var(--bos-primary) !important;
    border-color: var(--bos-primary) !important;
}

body.portal-lecturer .btn-outline-primary:hover {
    background-color: var(--bos-primary) !important;
    border-color: var(--bos-primary) !important;
    color: #fff !important;
}

body.portal-lecturer .im-btn-secondary {
    background: var(--bos-primary-soft) !important;
    border-color: var(--bos-primary-soft) !important;
    color: var(--im-color-text) !important;
}

body.portal-lecturer .im-icon-btn {
    border-color: rgba(16, 185, 129, 0.15) !important;
}

body.portal-lecturer .im-card-outline-primary {
    border-color: rgba(16, 185, 129, 0.55) !important;
}

/* --- Additional Sidebar & Body Background Scoped Overrides --- */

/* Student Portal Backgrounds & Sidebar */
body.portal-student {
    background-color: #f0f9ff !important;
}

body.portal-student .sidebar {
    background-color: #f0f6fa !important;
}

body.portal-student .sidebar-nav .nav-item.active>.nav-link,
body.portal-student .sidebar-nav .nav-link:not(.collapsed) {
    background-color: var(--bos-primary) !important;
    box-shadow: 0 4px 12px rgba(2, 132, 199, 0.25) !important;
    color: #ffffff !important;
}

body.portal-student .sidebar-nav .nav-item.active>.nav-link i,
body.portal-student .sidebar-nav .nav-link:not(.collapsed) i {
    color: #ffffff !important;
}

body.portal-student .sidebar-nav .nav-link:hover {
    background-color: rgba(2, 132, 199, 0.08) !important;
    color: var(--bos-primary) !important;
}

body.portal-student .sidebar-nav .nav-link:hover i {
    color: var(--bos-primary) !important;
}

body.portal-student .sidebar-nav .nav-content a:hover,
body.portal-student .sidebar-nav .nav-content li.active a {
    color: var(--bos-primary) !important;
    background-color: rgba(2, 132, 199, 0.05) !important;
}

/* Lecturer Portal Backgrounds & Sidebar */
body.portal-lecturer {
    background-color: #f0fdf4 !important;
}

body.portal-lecturer .sidebar {
    background-color: #f0fdf4 !important;
}

body.portal-lecturer .sidebar-nav .nav-item.active>.nav-link,
body.portal-lecturer .sidebar-nav .nav-link:not(.collapsed) {
    background-color: var(--bos-primary) !important;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.25) !important;
    color: #ffffff !important;
}

body.portal-lecturer .sidebar-nav .nav-item.active>.nav-link i,
body.portal-lecturer .sidebar-nav .nav-link:not(.collapsed) i {
    color: #ffffff !important;
}

body.portal-lecturer .sidebar-nav .nav-link:hover {
    background-color: rgba(16, 185, 129, 0.08) !important;
    color: var(--bos-primary) !important;
}

body.portal-lecturer .sidebar-nav .nav-link:hover i {
    color: var(--bos-primary) !important;
}

body.portal-lecturer .sidebar-nav .nav-content a:hover,
body.portal-lecturer .sidebar-nav .nav-content li.active a {
    color: var(--bos-primary) !important;
    background-color: rgba(16, 185, 129, 0.05) !important;
}

/* E-Wallet Tab Switcher */
.ewallet-tabs-container {
    display: flex;
    gap: 8px;
    background: rgba(15, 23, 42, 0.05);
    padding: 6px;
    border-radius: 12px;
    margin-bottom: 24px;
    width: fit-content;
}

.ewallet-tab-btn {
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 600;
    color: #475569;
    border: none;
    background: transparent;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

.ewallet-tab-btn.active {
    background: #ffffff;
    color: var(--im-color-primary, #6366f1);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}

/* Manual Student Search Suggestions */
.search-container {
    position: relative;
    width: 100%;
}

.search-input-wrapper {
    position: relative;
    width: 100%;
}

.search-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: #64748b;
    font-size: 18px;
}

.search-input {
    width: 100%;
    height: 48px;
    padding: 0 16px 0 48px;
    border: 1.5px solid var(--im-color-line, #e2e8f0);
    border-radius: var(--im-radius-control, 16px);
    background: #ffffff;
    color: #0f172a;
    font-size: 14px;
    transition: all 0.2s;
}

.search-input:focus {
    outline: none;
    border-color: var(--im-color-primary, #6366f1);
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1);
}

.suggestions-list {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    width: 100%;
    background: #ffffff;
    border: 1.5px solid var(--im-color-line, #e2e8f0);
    border-radius: 12px;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    max-height: 250px;
    overflow-y: auto;
    z-index: 1000;
    display: none;
    padding: 6px 0;
}

.suggestion-item {
    padding: 10px 16px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 2px;
    transition: background 0.15s;
}

.suggestion-item:hover {
    background: rgba(99, 102, 241, 0.05);
}

.suggestion-item .student-name {
    font-size: 14px;
    font-weight: 600;
    color: #0f172a;
    text-align: left;
}

.suggestion-item .student-meta {
    font-size: 12px;
    color: #64748b;
    text-align: left;
}

/* Badges and Mode 2 Styles */
.reward-status-badge {
    padding: 6px 12px;
    border-radius: 9999px;
    font-size: 12px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.reward-status-badge.rewarded {
    background: #f0fdf4;
    color: #166534;
    border: 1px solid #bbf7d0;
}

.reward-status-badge.pending {
    background: #fef9c3;
    color: #854d0e;
    border: 1px solid #fef08a;
}

.action-btn-group {
    display: flex;
    gap: 8px;
}

.action-btn {
    border: none;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}

.action-btn-reward {
    background: #10b981;
    color: #ffffff;
}

.action-btn-reward:hover:not(:disabled) {
    background: #059669;
}

.action-btn-reward:disabled {
    background: #cbd5e1;
    color: #64748b;
    cursor: not-allowed;
}

.action-btn-topup {
    background: #e2e8f0;
    color: #334155;
}

.action-btn-topup:hover {
    background: #cbd5e1;
}

/* Screen Timetable Grid Calendar View */
.bos-calendar-wrapper {
    margin-top: 15px;
    background-color: #ffffff;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    overflow-x: auto;
}

.bos-calendar-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    min-width: 1100px;
}

.bos-calendar-table th,
.bos-calendar-table td {
    border: 1px solid #e5e7eb;
    padding: 6px;
    font-size: 11px;
    vertical-align: middle;
    text-align: center;
    height: 75px;
}

.bos-calendar-table th {
    background-color: #f8fafc;
    color: #475569;
    font-weight: 700;
    height: 35px;
    border-bottom: 2px solid #cbd5e1;
}

.bos-calendar-table th.bos-calendar-day-header {
    width: 80px;
    background-color: #f1f5f9;
}

.bos-calendar-table td.bos-calendar-day-label {
    width: 80px;
    font-weight: 700;
    color: #1e293b;
    background-color: #f8fafc;
    text-transform: uppercase;
}

.bos-calendar-table th.bos-calendar-lunch-header {
    background-color: #f1f5f9;
    color: #64748b;
}

.bos-calendar-table td.bos-calendar-empty-cell {
    background-color: #ffffff;
}

.bos-calendar-table td.bos-calendar-empty-cell.is-lunch {
    background-color: #f8fafc;
}

.bos-calendar-table td.bos-calendar-class-cell {
    padding: 4px;
    background-color: #eff6ff;
    border: 1px solid #bfdbfe;
    vertical-align: top;
}

.bos-calendar-class-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-align: left;
    background: #ffffff;
    border-left: 4px solid #3b82f6;
    border-radius: 4px;
    padding: 6px 8px;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.bos-calendar-class-code {
    font-size: 11px;
    font-weight: 800;
    color: #1d4ed8;
    margin-bottom: 2px;
}

.bos-calendar-class-name {
    font-size: 10px;
    font-weight: 600;
    color: #1e293b;
    line-height: 1.2;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bos-calendar-class-meta {
    font-size: 9px;
    color: #64748b;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.bos-calendar-class-meta span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bos-calendar-class-meta i {
    color: #94a3b8;
    margin-right: 2px;
}


/* Finance Student ID Settings DataTable alignment */
.dataTables_wrapper {
    padding: 0 !important;
    margin: 0 !important;
}

.dataTables_wrapper table.dataTable.no-footer {
    border-bottom: none !important;
}

.dataTables_wrapper table.dataTable thead th {
    border-bottom: 1px solid var(--im-color-line) !important;
    background-color: var(--im-color-surface-soft) !important;
    color: var(--im-color-text) !important;
    font-weight: 700 !important;
    font-size: 12.5px !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 14px 16px !important;
    background-image: none !important;
}

.dataTables_wrapper .im-table tbody tr {
    height: 66px;
}

.dataTables_wrapper .im-table tbody td {
    vertical-align: middle !important;
    padding: 12px 16px !important;
    border-bottom: 1px solid var(--im-color-line) !important;
}

.dataTables_wrapper .dataTables_info {
    float: none !important;
    padding: 0 !important;
    margin: 0 !important;
    font-family: var(--im-font-sans) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--im-color-text-soft) !important;
}

.dataTables_wrapper .dataTables_paginate {
    float: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    gap: 6px !important;
    align-items: center !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 38px !important;
    height: 38px !important;
    padding: 0 10px !important;
    margin: 0 !important;
    border-radius: 999px !important;
    border: 1px solid var(--im-color-line) !important;
    background: var(--im-color-surface-soft) !important;
    color: var(--im-color-primary) !important;
    font-family: var(--im-font-sans) !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    text-decoration: none !important;
    transition: all 0.16s ease !important;
    box-shadow: none !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--im-color-primary-soft) !important;
    border-color: var(--im-color-primary) !important;
    color: var(--im-color-primary) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: var(--im-color-primary) !important;
    border-color: var(--im-color-primary) !important;
    color: #ffffff !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active {
    opacity: 0.45 !important;
    cursor: default !important;
    background: var(--im-color-surface-soft) !important;
    border-color: var(--im-color-line) !important;
    color: var(--im-color-text-soft) !important;
}


/* BOS Finance delete confirmation modal
   Purpose: shared themed delete confirmation for EA Form and Payslip pages. */
.bos-delete-modal .modal-dialog {
    max-width: 520px;
}

.bos-delete-modal .modal-content {
    position: relative;
    border: 0;
    border-radius: 32px;
    box-shadow: 0 28px 70px rgba(15, 23, 42, 0.24);
    overflow: hidden;
}

.bos-delete-modal .modal-body {
    padding: 48px 40px 22px;
    text-align: center;
}

.bos-delete-modal-icon {
    width: 112px;
    height: 112px;
    margin: 0 auto 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 10px solid rgba(225, 29, 72, 0.14);
    border-radius: 999px;
    color: #E11D48;
    font-size: 56px;
    background: #fff;
}

.bos-delete-modal-title {
    margin: 0 0 12px;
    font-family: var(--im-font-family, 'Public Sans', sans-serif);
    font-size: clamp(26px, 3vw, 36px);
    font-weight: 800;
    color: var(--im-color-text, #0F172A);
}

.bos-delete-modal-text {
    max-width: 380px;
    margin: 0 auto;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.45;
    color: var(--im-color-text-muted, #475569);
}

.bos-delete-modal .modal-footer {
    padding: 12px 40px 40px;
    border: 0;
    display: flex;
    justify-content: center;
    gap: 16px;
}

.bos-delete-modal .modal-footer .im-btn {
    min-width: 150px;
    justify-content: center;
}

.bos-delete-modal-close {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--im-color-text-muted, #64748B);
    background: rgba(226, 232, 240, 0.7);
}

.bos-delete-modal-close:hover {
    color: #fff;
    background: var(--im-color-primary, #3F41B5);
}

body.modal-open .modal-backdrop.show {
    opacity: 0.42;
    backdrop-filter: blur(5px);
}

/* BOS standard application modal
   Shared by Organization Settings and Finance/Budget workflows. */
.bos-app-modal {
    --bos-modal-border: var(--im-color-line, #dbe4f0);
    --bos-modal-muted: var(--im-color-text-soft, #64748b);
    --bos-modal-heading: var(--im-color-text, #17233b);
    z-index: 1085;
}

.bos-app-modal+.modal-backdrop {
    z-index: 1080;
}

body.modal-open .flatpickr-calendar.open,
body.modal-open .select2-container--open,
body.modal-open .dropdown-menu.show {
    z-index: 1100;
}

/* Shared BOS Leave range calendar. It is portalled to body by Flatpickr so
   assistant/message overflow never clips it. Modals remain above this layer. */
.flatpickr-calendar.bos-leave-range-calendar {
    z-index: 1075;
    max-width: calc(100vw - 24px);
    border: 1px solid var(--im-color-line, #dbe4f0);
    border-radius: 16px;
    box-shadow: 0 18px 44px rgba(23, 35, 59, 0.18);
    overflow: hidden;
}

.flatpickr-calendar.bos-ai-leave-range-calendar {
    z-index: 1100;
}

.bos-leave-range-calendar .flatpickr-day.selected,
.bos-leave-range-calendar .flatpickr-day.startRange,
.bos-leave-range-calendar .flatpickr-day.endRange {
    border-color: var(--im-color-primary, #4942c7);
    background: var(--im-color-primary, #4942c7);
}

.bos-leave-range-calendar .flatpickr-day.inRange {
    border-color: var(--im-color-primary-soft, #eeecff);
    background: var(--im-color-primary-soft, #eeecff);
    box-shadow: -5px 0 0 var(--im-color-primary-soft, #eeecff), 5px 0 0 var(--im-color-primary-soft, #eeecff);
}

.bos-leave-range-calendar .flatpickr-day.bos-leave-nonworking-day:not(.flatpickr-disabled) {
    color: var(--im-color-text-soft, #7b879c);
    background-image: linear-gradient(transparent 84%, rgba(73, 66, 199, .22) 84%);
}

.bos-leave-range-calendar .flatpickr-day.bos-leave-public-holiday:not(.flatpickr-disabled)::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 3px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--im-color-danger, #e5484d);
    transform: translateX(-50%);
}

@media (max-width: 575.98px) {
    .flatpickr-calendar.bos-leave-range-calendar {
        width: min(307.875px, calc(100vw - 24px));
    }
}

.bos-app-modal .modal-dialog {
    max-width: 560px;
}

.bos-app-modal.bos-app-modal-sm .modal-dialog {
    max-width: 440px;
}

.bos-app-modal.bos-app-modal-md .modal-dialog {
    max-width: 560px;
}

.bos-app-modal.bos-app-modal-lg .modal-dialog {
    max-width: 840px;
}

.bos-app-modal.bos-app-modal-wide .modal-dialog {
    max-width: 760px;
}

.bos-app-modal .modal-content {
    display: flex;
    max-height: calc(100dvh - 40px);
    overflow: hidden;
    border: 1px solid var(--bos-modal-border);
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 24px 64px rgba(31, 42, 84, 0.2);
}

.bos-app-modal .modal-content>form {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    flex-direction: column;
}

.bos-app-modal .modal-header {
    min-height: auto;
    padding: 20px 22px 17px;
    align-items: flex-start;
    border-bottom: 1px solid var(--bos-modal-border);
    background: #fff;
}

.bos-app-modal .bos-modal-heading {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1 1 auto;
    min-width: 0;
    padding-right: 12px;
}

.bos-app-modal .bos-modal-heading-copy {
    min-width: 0;
}

.bos-app-modal .bos-modal-heading:not(:has(.bos-modal-icon))::before {
    content: "\2726";
    display: inline-flex;
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: var(--im-color-primary-soft, #eef0ff);
    color: var(--im-color-primary, #3f41b5);
    font-size: 16px;
}

.bos-app-modal .bos-modal-icon {
    display: inline-flex;
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: var(--im-color-primary-soft, #eef0ff);
    color: var(--im-color-primary, #3f41b5);
    font-size: 17px;
}

.bos-app-modal .modal-title,
.bos-app-modal .bos-modal-title {
    /* Root cause: a legacy global rule (".modal-header .modal-title { color:
       #FFFFFF !important }", from the old solid-purple modal header design)
       unconditionally forces every modal title white with !important. It
       always outranked this rule's plain (non-important) color, so every
       .bos-app-modal title — including this one, before this fix — silently
       inherited white-on-white. The !important here only counters that
       specific pre-existing !important; it is scoped tightly to
       .bos-app-modal so the old purple-header modals elsewhere keep their
       original white title exactly as before. */
    margin: 0 !important;
    color: var(--bos-modal-heading) !important;
    font-size: 1.05rem;
    line-height: 1.35;
    font-weight: 800;
    text-align: left !important;
}

.bos-app-modal .bos-modal-subtitle {
    display: block;
    margin-top: 4px;
    color: var(--bos-modal-muted);
    font-size: .82rem;
    line-height: 1.45;
    font-weight: 500;
}

.bos-app-modal .btn-close {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    margin: -4px -5px 0 0;
    padding: 0;
    border: 1px solid var(--bos-modal-border);
    border-radius: 10px;
    background-color: #f7f9fc;
    background-size: 11px;
    opacity: .72;
}

.bos-app-modal .btn-close:hover,
.bos-app-modal .btn-close:focus {
    opacity: 1;
    border-color: rgba(63, 65, 181, .28);
    box-shadow: 0 0 0 3px rgba(63, 65, 181, .1);
}

.bos-app-modal .modal-body {
    min-height: 0;
    overflow-y: auto;
    padding: 22px;
    color: var(--bos-modal-heading);
}

/* Compact Gantt Day/Week/Month view switcher — a segmented control with
   visible gaps between buttons instead of Bootstrap's merged .btn-group. */
.project-gantt-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.project-gantt-view-switcher {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.project-gantt-view-btn {
    display: inline-flex;
    align-items: center;
    height: 30px;
    padding: 0 14px;
    border: 1.5px solid var(--im-color-primary, #4942c7);
    border-radius: 13px;
    background: #fff;
    color: var(--im-color-primary, #4942c7);
    font-size: .78rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}

.project-gantt-view-btn:hover {
    background: var(--im-color-primary-soft, #eef0ff);
}

.project-gantt-view-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(73, 66, 199, .22);
}

.project-gantt-view-btn.is-active {
    background: var(--im-color-primary, #4942c7);
    border-color: var(--im-color-primary, #4942c7);
    color: #fff;
}

@media (max-width: 768px) {
    .project-gantt-toolbar {
        align-items: stretch;
    }

    .project-gantt-view-switcher,
    .project-gantt-actions {
        width: 100%;
    }
}

.bos-modal-notice {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-bottom: 18px;
    padding: 11px 13px;
    border: 1px solid #f1d486;
    border-radius: 12px;
    background: #fff9e9;
    color: #6f5012;
    font-size: .81rem;
    line-height: 1.5;
}

.bos-modal-notice>i {
    flex: 0 0 auto;
    margin-top: 2px;
    color: #b7790b;
}

.bos-modal-notice ul {
    margin: 0;
    padding-left: 17px;
}

.bos-modal-notice li+li {
    margin-top: 3px;
}

.bos-modal-notice.is-danger {
    border-color: #fecdd3;
    background: #fff5f6;
    color: #9f1239;
}

.bos-modal-notice.is-success {
    border-color: #a7e3cb;
    background: #f1fcf7;
    color: #146c50;
}

.bos-modal-variant-success .bos-modal-icon {
    background: #eaf9f2;
    color: #147258;
}

.bos-modal-variant-danger .bos-modal-icon {
    background: #fff0f2;
    color: #b4233c;
}

.bos-modal-variant-warning .bos-modal-icon {
    background: #fff6df;
    color: #9a6810;
}

.bos-modal-variant-info .bos-modal-icon {
    background: #edf4ff;
    color: #315ba8;
}

.bos-modal-review-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 18px;
}

.bos-modal-review-grid .bos-modal-field-full {
    grid-column: 1 / -1;
}

.bos-modal-review-grid .im-form-row {
    min-width: 0;
    gap: 6px;
}

.bos-modal-review-grid .im-input,
.bos-modal-review-grid .im-select {
    min-height: 48px;
    border-radius: 12px;
}

.bos-modal-review-grid input[type="number"] {
    appearance: textfield;
}

.bos-modal-review-grid input[type="number"]::-webkit-inner-spin-button,
.bos-modal-review-grid input[type="number"]::-webkit-outer-spin-button {
    margin: 0;
    appearance: none;
}

.bos-app-modal .modal-footer,
.bos-app-modal .bos-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 15px 22px 18px;
    border-top: 1px solid var(--bos-modal-border);
    background: #f9fbfe;
}

.bos-app-modal .modal-footer>*,
.bos-app-modal .bos-modal-footer>* {
    margin: 0;
}

.bos-app-modal .modal-footer .im-btn,
.bos-app-modal .bos-modal-footer .im-btn {
    min-width: 104px;
    min-height: 40px;
    padding: 0 18px;
    box-shadow: none;
}

.bos-app-modal .im-input,
.bos-app-modal .im-select {
    width: 100%;
    min-height: 44px;
    border-radius: 12px;
    border-color: var(--bos-modal-border);
    background-color: #fff;
    font-size: .875rem;
}

.bos-app-modal .im-select {
    appearance: none;
}

.bos-modal-summary {
    padding: 14px 15px;
    border: 1px solid #dfe6f2;
    border-radius: 13px;
    background: #f7f9fd;
}

.bos-modal-summary-title {
    color: var(--bos-modal-heading);
    font-size: .9rem;
    font-weight: 800;
}

.bos-modal-summary-meta {
    margin-top: 4px;
    color: var(--bos-modal-muted);
    font-size: .78rem;
    line-height: 1.5;
}

.bos-modal-field+.bos-modal-field {
    margin-top: 17px;
}

.bos-modal-check {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin: 0;
    padding: 12px 13px;
    border: 1px solid var(--bos-modal-border);
    border-radius: 12px;
    background: #fff;
    color: var(--bos-modal-heading);
    font-size: .84rem;
    line-height: 1.45;
    cursor: pointer;
}

.bos-modal-check+.bos-modal-check {
    margin-top: 10px;
}

.bos-modal-check .form-check-input {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin: 1px 0 0;
    border-color: #aebbd0;
}

.bos-modal-check .form-check-input:checked {
    border-color: var(--im-color-primary, #3f41b5);
    background-color: var(--im-color-primary, #3f41b5);
}

.bos-modal-danger-note {
    padding: 12px 14px;
    border: 1px solid #fecdd3;
    border-radius: 12px;
    background: #fff7f8;
    color: #9f1239;
    font-size: .82rem;
    line-height: 1.5;
}

@media (max-width: 575.98px) {

    .bos-app-modal .modal-dialog,
    .bos-app-modal.bos-app-modal-wide .modal-dialog,
    .bos-app-modal.bos-app-modal-sm .modal-dialog,
    .bos-app-modal.bos-app-modal-md .modal-dialog,
    .bos-app-modal.bos-app-modal-lg .modal-dialog {
        max-width: none;
        margin: 12px;
    }

    .bos-app-modal .modal-content {
        max-height: calc(100dvh - 24px);
        border-radius: 17px;
    }

    .bos-app-modal .modal-header,
    .bos-app-modal .modal-body {
        padding: 17px;
    }

    .bos-app-modal .modal-footer,
    .bos-app-modal .bos-modal-footer {
        padding: 13px 17px 16px;
        flex-direction: column-reverse;
    }

    .bos-app-modal .modal-footer .im-btn,
    .bos-app-modal .bos-modal-footer .im-btn {
        width: 100%;
    }

    .bos-modal-review-grid {
        grid-template-columns: 1fr;
        gap: 13px;
    }

    .bos-modal-review-grid .bos-modal-field-full {
        grid-column: auto;
    }

    .bos-app-modal .bos-modal-icon {
        flex-basis: 34px;
        width: 34px;
        height: 34px;
        border-radius: 10px;
    }
}

@media (max-width: 575.98px) {
    .bos-delete-modal .modal-dialog {
        margin: 16px;
    }

    .bos-delete-modal .modal-body {
        padding: 42px 24px 18px;
    }

    .bos-delete-modal-icon {
        width: 92px;
        height: 92px;
        font-size: 44px;
    }

    .bos-delete-modal .modal-footer {
        padding: 10px 24px 28px;
        flex-direction: column-reverse;
    }

    .bos-delete-modal .modal-footer .im-btn {
        width: 100%;
    }
}

/* CRM shared confirmation-modal component (Issue/Cancel Invoice, Convert to
   Invoice, Recurring plan actions, BoQ transitions, row deletion, etc).
   Deliberately does not use the `modal-header`/`modal-title` classes anywhere
   below — a legacy sitewide rule (~line 9408) paints any element carrying
   those classes as a full-height solid purple bar with a 200px title margin;
   avoiding the class names sidesteps it instead of fighting its specificity. */
.crm-confirm-modal {
    --crmcm-border: var(--im-color-line, #dbe4f0);
    --crmcm-muted: var(--im-color-text-soft, #64748b);
    --crmcm-heading: var(--im-color-text, #17233b);
    z-index: 1085;
}

.crm-confirm-modal+.modal-backdrop {
    background-color: rgb(15, 23, 42);
}

.crm-confirm-modal .modal-dialog {
    width: min(520px, calc(100vw - 32px));
    max-width: 520px;
}

.crm-confirm-modal .modal-content {
    display: flex;
    max-height: calc(100dvh - 40px);
    overflow: hidden;
    border: 1px solid var(--crmcm-border);
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 24px 64px rgba(31, 42, 84, 0.2);
}

.crm-confirm-modal .modal-content>form {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    flex-direction: column;
}

.crm-confirm-modal__header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 19px 20px 16px;
    border-bottom: 1px solid var(--crmcm-border);
    background: #fff;
}

.crm-confirm-modal__icon {
    display: inline-flex;
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: var(--im-color-primary-soft, #eef0ff);
    color: var(--im-color-primary, #3f41b5);
    font-size: 18px;
}

.crm-confirm-modal__heading-copy {
    flex: 1 1 auto;
    min-width: 0;
    padding-right: 8px;
}

.crm-confirm-modal__title {
    margin: 0;
    color: var(--crmcm-heading);
    font-size: 1.3rem;
    line-height: 1.25;
    font-weight: 700;
}

.crm-confirm-modal__subtitle {
    display: block;
    margin-top: 4px;
    color: var(--crmcm-muted);
    font-size: .82rem;
    line-height: 1.45;
    font-weight: 500;
}

.crm-confirm-modal__close {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    margin: -4px -4px 0 0;
    padding: 0;
    border: 1px solid var(--crmcm-border);
    border-radius: 10px;
    background-color: #f7f9fc;
    background-size: 11px;
    opacity: .72;
}

.crm-confirm-modal__close:hover,
.crm-confirm-modal__close:focus {
    opacity: 1;
    border-color: rgba(63, 65, 181, .28);
    box-shadow: 0 0 0 3px rgba(63, 65, 181, .1);
}

.crm-confirm-modal__body {
    min-height: 0;
    overflow-y: auto;
    padding: 20px;
    color: var(--crmcm-heading);
    font-size: .9rem;
    line-height: 1.55;
}

.crm-confirm-modal__body p:first-child {
    margin-top: 0;
}

.crm-confirm-modal__body p:last-child {
    margin-bottom: 0;
}

.crm-confirm-modal__list {
    margin: 10px 0 0;
    padding-left: 18px;
    color: var(--crmcm-muted);
    font-size: .85rem;
    line-height: 1.6;
}

.crm-confirm-modal__list li+li {
    margin-top: 3px;
}

.crm-confirm-modal__warning {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-top: 14px;
    padding: 11px 13px;
    border: 1px solid #e4d9ff;
    border-radius: 12px;
    background: #f7f4ff;
    color: #4a3b8a;
    font-size: .81rem;
    line-height: 1.5;
}

.crm-confirm-modal__warning>i {
    flex: 0 0 auto;
    margin-top: 2px;
}

.crm-confirm-modal__footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 20px 18px;
    border-top: 1px solid var(--crmcm-border);
    background: #f9fbfe;
}

.crm-confirm-modal__footer>* {
    margin: 0;
}

.crm-confirm-modal__footer .im-btn {
    min-width: 104px;
    min-height: 44px;
    padding: 0 20px;
    border-radius: 13px;
    font-size: .875rem;
    box-shadow: none;
}

.crm-confirm-modal .im-input,
.crm-confirm-modal .im-select {
    width: 100%;
    min-height: 44px;
    border-radius: 12px;
    border-color: var(--crmcm-border);
    background-color: #fff;
    font-size: .875rem;
}

/* Variants: default (no modifier) = confirmation/primary, purple. */
.crm-confirm-modal--success .crm-confirm-modal__icon {
    background: #eaf9f2;
    color: #147258;
}

.crm-confirm-modal--danger .crm-confirm-modal__icon {
    background: #fff0f2;
    color: #b4233c;
}

.crm-confirm-modal--warning .crm-confirm-modal__icon {
    background: #fff6df;
    color: #9a6810;
}

.crm-confirm-modal--info .crm-confirm-modal__icon {
    background: #edf4ff;
    color: #315ba8;
}

.crm-confirm-modal--danger .crm-confirm-modal__warning {
    border-color: #fecdd3;
    background: #fff5f6;
    color: #9f1239;
}

.crm-confirm-modal--warning .crm-confirm-modal__warning {
    border-color: #f1d486;
    background: #fff9e9;
    color: #6f5012;
}

@media (max-width: 767.98px) {
    .crm-confirm-modal .modal-dialog {
        width: calc(100vw - 24px);
        max-width: none;
        margin: 12px auto;
    }

    .crm-confirm-modal .modal-content {
        max-height: calc(100dvh - 24px);
        border-radius: 17px;
    }

    .crm-confirm-modal__header,
    .crm-confirm-modal__body {
        padding: 16px;
    }

    .crm-confirm-modal__footer {
        padding: 12px 16px calc(16px + env(safe-area-inset-bottom, 0px));
        flex-direction: column-reverse;
    }

    .crm-confirm-modal__footer .im-btn {
        width: 100%;
    }
}

/* BOS Helpdesk Ticket Detail Theme Fix */
.bos-ticket-detail-page,
.bos-ticket-conversation-section {
    max-width: 1400px;
}

.bos-ticket-summary-card,
.bos-ticket-conversation-card,
.bos-ticket-form-card,
.bos-ticket-empty-state {
    box-shadow: 0 14px 36px rgba(15, 23, 42, 0.05);
}

.bos-ticket-summary-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(219, 228, 243, 0.9);
}

.bos-ticket-kicker,
.bos-ticket-label {
    margin: 0 0 8px;
    color: #64748b;
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.bos-ticket-title {
    margin: 0;
    color: #0f285f;
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 900;
    line-height: 1;
}

.bos-ticket-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
}

.bos-ticket-content-block {
    padding: 20px 0;
    border-bottom: 1px solid rgba(219, 228, 243, 0.72);
}

.bos-ticket-content-block:last-of-type {
    border-bottom: 0;
}

.bos-ticket-subject {
    margin: 0;
    color: #172033;
    font-size: 1.25rem;
    font-weight: 800;
}

.bos-ticket-description {
    margin: 0;
    color: #334155;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.7;
}

.bos-ticket-meta-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    padding-top: 8px;
}

.bos-ticket-meta-item {
    padding: 16px;
    border: 1px solid rgba(219, 228, 243, 0.9);
    border-radius: 18px;
    background: #f8fbff;
}

.bos-ticket-meta-item span {
    display: block;
    margin-bottom: 6px;
    color: #64748b;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.bos-ticket-meta-item strong {
    color: #172033;
    font-size: 0.96rem;
    font-weight: 800;
}

.bos-ticket-card-footer {
    justify-content: space-between;
}

.bos-ticket-section-heading {
    margin-bottom: 16px;
}

.bos-ticket-comment {
    display: flex;
    gap: 14px;
    padding: 18px 0;
    border-bottom: 1px solid rgba(219, 228, 243, 0.75);
}

.bos-ticket-comment:last-child {
    border-bottom: 0;
}

.bos-ticket-comment-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    border-radius: 999px;
    background: #e9efff;
    color: var(--im-color-primary);
    font-weight: 900;
}

.bos-ticket-comment-body {
    flex: 1;
    min-width: 0;
}

.bos-ticket-comment-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

.bos-ticket-comment-meta strong {
    color: #172033;
    font-weight: 800;
}

.bos-ticket-comment-meta span {
    color: #94a3b8;
    font-size: 0.82rem;
    font-weight: 700;
}

.bos-ticket-comment-body p {
    margin: 0;
    color: #334155;
    line-height: 1.65;
}

.bos-ticket-empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    margin-bottom: 14px;
    border-radius: 20px;
    background: #e9efff;
    color: var(--im-color-primary);
    font-size: 1.45rem;
}

.bos-ticket-empty-state h3 {
    margin: 0 0 8px;
    color: #172033;
    font-size: 1.15rem;
    font-weight: 800;
}

.bos-ticket-empty-state p {
    margin: 0;
    color: #64748b;
    font-weight: 600;
}

.bos-ticket-textarea {
    min-height: 120px;
    resize: vertical;
}

.bos-ticket-form-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

@media (max-width: 991.98px) {

    .bos-ticket-summary-head,
    .bos-ticket-comment-meta,
    .bos-ticket-card-footer {
        align-items: flex-start;
        flex-direction: column;
    }

    .bos-ticket-badges {
        justify-content: flex-start;
    }

    .bos-ticket-meta-grid,
    .bos-ticket-form-grid {
        grid-template-columns: 1fr;
    }
}


/*--------------------------------------------------------------
# BOS Modules Compact Override
# Applied to Projects + Inventory modules to tighten sizing
--------------------------------------------------------------*/

.im-page {
    --im-section-gap: 20px !important;
}

.im-page .im-section-gap {
    margin-bottom: 20px !important;
}

/* Compact card padding */
.im-page .im-card:not(.p-0),
.im-page .im-card.p-4,
.im-page .im-card.p-3 {
    padding: 16px !important;
}

/* Target input / select / textarea sizes */
.im-page .im-input,
.im-page .im-select,
.im-page .im-textarea,
.im-page select.im-select,
.im-page textarea.im-input {
    min-height: 42px !important;
    height: auto !important;
    padding: 9px 14px !important;
    font-size: 13.5px !important;
    border-radius: 10px !important;
}

.im-page .im-select,
.im-page select.im-select {
    padding-right: 32px !important;
}

/* Native selects inside im-page that don't have im-select class */
.im-page select:not(.select2-hidden-accessible) {
    appearance: none !important;
    -webkit-appearance: none !important;
    background-color: #ffffff !important;
    border: 1.5px solid var(--im-color-line) !important;
    border-radius: 10px !important;
    min-height: 42px !important;
    padding: 9px 32px 9px 14px !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: var(--im-color-text) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%2364748b' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 11px !important;
    transition: border-color 0.16s ease, box-shadow 0.16s ease !important;
    cursor: pointer !important;
    width: 100% !important;
}

.im-page select:not(.select2-hidden-accessible):focus {
    outline: none !important;
    border-color: var(--im-color-primary) !important;
    box-shadow: 0 0 0 3px rgba(63, 65, 181, 0.12) !important;
}

/* Compact labels */
.im-page .im-label {
    font-size: 11.5px !important;
    font-weight: 700 !important;
    margin-bottom: 3px !important;
    display: block !important;
}

/* Compact im-form-row spacing */
.im-page .im-form-row {
    margin-bottom: 12px !important;
}

/* Compact buttons */
.im-page .im-btn {
    min-height: 42px !important;
    height: auto !important;
    padding: 8px 20px !important;
    font-size: 13.5px !important;
    border-radius: 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.im-page .im-btn-sm,
.im-page .im-btn.im-btn-sm {
    min-height: 32px !important;
    padding: 4px 12px !important;
    font-size: 12px !important;
    border-radius: 8px !important;
}

/* Compact icon buttons */
.im-page .im-icon-btn {
    width: 32px !important;
    height: 32px !important;
    font-size: 13px !important;
}

.im-page .im-icon-btn.im-icon-btn-sm {
    width: 28px !important;
    height: 28px !important;
    font-size: 12px !important;
}

/* Compact table rows */
.im-page .im-table th,
.im-page .im-table td {
    padding: 14px 12px !important;
    font-size: 14px !important;
}

/* Compact chips */
.im-page .im-chip {
    font-size: 10.5px !important;
    padding: 3px 8px !important;
}

/* Kanban board card compact */
.im-page .kanban-card {
    font-size: 12.5px !important;
}

/* Sidebar project summary compact */
.im-page .project-sidebar-info {
    font-size: 12px !important;
}

/* ==========================================================================
   BOS ERP Projects & Inventory responsive standardization
   ========================================================================== */
.bos-erp-filter-card {
    padding: 12px 16px;
    border: 1.5px solid var(--im-color-line);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
}

.bos-erp-filter-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    width: 100%;
}

.bos-erp-filter-search {
    flex: 2 1 240px;
    min-width: 200px;
}

.bos-erp-filter-control {
    flex: 1 1 160px;
    min-width: 140px;
}

.bos-erp-filter-toolbar .im-input,
.bos-erp-filter-toolbar .im-select,
.bos-erp-filter-toolbar .select2-container {
    width: 100% !important;
    min-height: 42px !important;
}

.bos-erp-filter-actions {
    flex: 0 0 auto;
    display: flex;
    gap: 8px;
    white-space: nowrap;
    margin-left: auto;
}

.im-page .bos-erp-filter-toolbar .im-btn {
    min-height: 42px !important;
    padding: 8px 18px !important;
    border-radius: 10px !important;
}

.bos-erp-more-filters {
    position: relative;
    flex: 0 0 auto;
}

.bos-erp-more-filters>summary {
    list-style: none;
    white-space: nowrap;
    cursor: pointer;
}

.bos-erp-more-filters>summary::-webkit-details-marker {
    display: none;
}

.bos-erp-more-filters-panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 1050;
    width: min(300px, 80vw);
    padding: 14px;
    border: 1px solid var(--im-color-line);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.16);
}

.bos-erp-table {
    width: 100%;
    table-layout: auto;
}

.bos-project-list-table,
.bos-inventory-list-table {
    table-layout: fixed !important;
}

.bos-project-list-table th:first-child,
.bos-project-list-table td:first-child,
.bos-inventory-list-table th:first-child,
.bos-inventory-list-table td:first-child {
    width: 30%;
}

.bos-erp-primary-link {
    display: inline-block;
    color: var(--im-color-primary);
    font-weight: 700;
    text-decoration: none;
}

.bos-erp-meta-line {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
    margin-top: 4px;
    color: var(--im-color-text-muted, #64748b);
    font-size: 11px;
    line-height: 1.35;
}

.bos-erp-meta-line>span:not(.im-chip)+span:not(.im-chip)::before {
    content: "•";
    margin-right: 8px;
    color: #cbd5e1;
}

.bos-erp-item-thumb {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border-radius: 10px;
    object-fit: cover;
}

.bos-erp-item-placeholder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--im-color-line);
    background: var(--im-color-surface-soft, #f8fafc);
    color: var(--im-color-text-muted, #64748b);
}

.bos-erp-detail-tabs {
    min-height: 42px !important;
    border-bottom: 1px solid var(--im-color-line);
    background: #fff !important;
    display: flex !important;
    align-items: flex-end;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* Firefox */
}

.bos-erp-detail-tabs::-webkit-scrollbar {
    display: none;
    /* Chrome, Safari, Opera */
}

.bos-erp-detail-tabs .nav-link {
    min-height: 40px !important;
    padding: 9px 14px !important;
    border: 0;
    border-bottom: 2px solid transparent;
    color: var(--im-color-text-muted, #64748b);
    font-size: 13px !important;
    font-weight: 700;
    white-space: nowrap;
}

.bos-erp-detail-tabs .nav-link.active {
    border-bottom-color: var(--im-color-primary);
    background: transparent;
    color: var(--im-color-primary);
}

.bos-erp-tabs-more .dropdown-menu {
    min-width: 220px;
    padding: 8px;
    border: 1px solid var(--im-color-line);
    border-radius: 14px;
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.14);
}

.bos-erp-tabs-more .dropdown-item {
    display: flex;
    gap: 9px;
    align-items: center;
    width: 100%;
    padding: 9px 11px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--im-color-text);
    font-size: 12.5px;
    font-weight: 650;
}

.bos-erp-tabs-more .dropdown-item:hover,
.bos-erp-tabs-more .dropdown-item.active {
    background: var(--im-color-primary);
    color: #fff;
}

.bos-erp-detail-tabs+.tab-content {
    padding: 18px !important;
}

@media (max-width: 991.98px) {

    .im-table-clean-wrap:has(.bos-erp-table),
    .im-table-clean-wrap:has(.bos-detail-responsive-table) {
        overflow: visible;
        border: 0;
        background: transparent;
    }

    .bos-erp-table,
    .bos-detail-responsive-table,
    .bos-erp-table tbody,
    .bos-detail-responsive-table tbody {
        display: block;
        width: 100%;
    }

    .bos-erp-table thead,
    .bos-detail-responsive-table thead {
        display: none;
    }

    .bos-erp-table tbody tr,
    .bos-detail-responsive-table tbody tr {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px 18px;
        margin-bottom: 12px;
        padding: 16px;
        border: 1px solid var(--im-color-line);
        border-radius: 18px;
        background: #fff;
        box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
    }

    .bos-erp-table tbody td,
    .bos-detail-responsive-table tbody td {
        display: block;
        width: auto !important;
        padding: 0 !important;
        border: 0 !important;
        text-align: left !important;
        min-width: 0;
    }

    .bos-erp-table tbody td::before,
    .bos-detail-responsive-table tbody td::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 4px;
        color: var(--im-color-text-muted, #64748b);
        font-size: 10px;
        font-weight: 800;
        letter-spacing: 0.05em;
        text-transform: uppercase;
    }

    .bos-erp-table tbody td:first-child,
    .bos-detail-responsive-table tbody td:first-child {
        grid-column: 1 / -1;
    }

    .bos-erp-table tbody td[colspan],
    .bos-detail-responsive-table tbody td[colspan] {
        grid-column: 1 / -1;
        text-align: center !important;
    }

    .bos-erp-detail-tabs {
        overflow-x: auto;
        scrollbar-width: none;
    }

    .bos-erp-detail-tabs::-webkit-scrollbar {
        display: none;
    }
}

@media (max-width: 767.98px) {
    .bos-erp-filter-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .bos-erp-filter-search,
    .bos-erp-filter-control,
    .bos-erp-more-filters,
    .bos-erp-filter-actions {
        width: 100% !important;
        flex: 1 1 auto;
    }

    .bos-erp-filter-actions {
        margin-left: 0;
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .bos-erp-more-filters-panel {
        right: auto;
        left: 0;
        width: 100%;
    }

    .bos-erp-table tbody tr,
    .bos-detail-responsive-table tbody tr {
        grid-template-columns: 1fr;
        padding: 14px;
        border-radius: 16px;
    }

    .bos-erp-table tbody td,
    .bos-detail-responsive-table tbody td {
        grid-column: 1 / -1;
    }

    .bos-erp-detail-tabs .nav-link {
        min-height: 40px;
        padding-inline: 10px;
        font-size: 12px;
    }
}

/* Standardized Premium Action Buttons for BOS ERP */
.im-icon-btn {
    width: 32px !important;
    height: 32px !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05) !important;
    transition: all 0.15s ease !important;
}

.im-icon-btn-sm {
    width: 28px !important;
    height: 28px !important;
    border-radius: 6px !important;
    font-size: 12px !important;
}

.im-icon-btn:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1) !important;
}

.im-icon-btn:active {
    transform: translateY(0) scale(0.96) !important;
}

/* Compact tab tables cell padding and fonts */
.tab-content .im-table th {
    font-size: 14px !important;
    padding: 10px 12px !important;
}

.tab-content .im-table td {
    font-size: 14px !important;
    padding: 10px 12px !important;
}

/* Horizontal scrolling containment */
#main,
.im-page {
    overflow-x: hidden !important;
}

.table-responsive {
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
}

/* ==========================================================================
   Global BOS select system
   Native selects, Select2, bootstrap-select and the legacy BOS custom select
   share these presentation tokens. Behaviour and submitted values stay native.
   ========================================================================== */
:root {
    --bos-select-height: 48px;
    --bos-select-radius: 16px;
    --bos-select-option-radius: 12px;
    --bos-select-border: var(--im-color-line, #dce3f0);
    --bos-select-border-hover: #b7c1d6;
    --bos-select-primary: var(--im-color-primary, #4c50d9);
    --bos-select-primary-soft: rgba(76, 80, 217, .09);
    --bos-select-ring: rgba(76, 80, 217, .14);
    --bos-select-text: var(--im-color-text, #19263f);
    --bos-select-muted: var(--im-color-text-muted, #667085);
    --bos-select-disabled: #f3f6fb;
    --bos-select-danger: var(--im-color-danger, #dc3545);
    --bos-select-menu-shadow: 0 14px 34px rgba(20, 34, 66, .12);
    --bos-layer-dropdown: 1080;
    --bos-layer-modal-dropdown: 1095;
    --bos-select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='m4 6 4 4 4-4' stroke='%23667085' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Native control: applies to old forms as well as .im-select/.form-select. */
select.bos-native-select,
select.im-select,
select.form-select,
select.form-control,
select.custom-select,
select.bos-select {
    width: 100%;
    min-height: var(--bos-select-height) !important;
    height: var(--bos-select-height);
    padding: 0 44px 0 16px !important;
    border: 1px solid var(--bos-select-border) !important;
    border-radius: var(--bos-select-radius) !important;
    background-color: #fff !important;
    background-image: var(--bos-select-chevron) !important;
    background-repeat: no-repeat !important;
    background-position: right 15px center !important;
    background-size: 16px 16px !important;
    color: var(--bos-select-text) !important;
    font-family: inherit;
    font-size: .875rem !important;
    font-weight: 500;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    box-shadow: none !important;
    cursor: pointer;
    transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}

select.bos-native-select:hover:not(:disabled),
select.im-select:hover:not(:disabled),
select.form-select:hover:not(:disabled),
select.form-control:hover:not(:disabled),
select.custom-select:hover:not(:disabled) {
    border-color: var(--bos-select-border-hover) !important;
}

select.bos-native-select:focus,
select.im-select:focus,
select.form-select:focus,
select.form-control:focus,
select.custom-select:focus,
select.bos-select:focus {
    outline: 0 !important;
    border-color: var(--bos-select-primary) !important;
    box-shadow: 0 0 0 4px var(--bos-select-ring) !important;
}

select.bos-native-select:disabled,
select.im-select:disabled,
select.form-select:disabled,
select.form-control:disabled,
select.custom-select:disabled {
    border-color: #e1e6ef !important;
    background-color: var(--bos-select-disabled) !important;
    color: #98a2b3 !important;
    cursor: not-allowed;
    opacity: 1;
}

select.bos-native-select.is-invalid,
select.im-select.is-invalid,
select.form-select.is-invalid,
.is-error select.bos-native-select,
.is-error select.im-select,
[aria-invalid="true"].bos-native-select {
    border-color: var(--bos-select-danger) !important;
}

select.bos-native-select.is-invalid:focus,
select.im-select.is-invalid:focus,
select.form-select.is-invalid:focus,
.is-error select.bos-native-select:focus,
.is-error select.im-select:focus,
[aria-invalid="true"].bos-native-select:focus {
    box-shadow: 0 0 0 4px rgba(220, 53, 69, .12) !important;
}

/* Keep true native multiple/list boxes accessible; they do not use a chevron. */
select.bos-native-select[multiple],
select.bos-native-select[size]:not([size="1"]),
select.im-select[multiple],
select.im-select[size]:not([size="1"]) {
    height: auto;
    min-height: 120px !important;
    padding: 8px !important;
    background-image: none !important;
    white-space: normal;
}

select.bos-native-select[multiple] option,
select.bos-native-select[size]:not([size="1"]) option,
select.im-select[multiple] option,
select.im-select[size]:not([size="1"]) option {
    min-height: 40px;
    padding: 10px 12px;
    border-radius: 10px;
}

/* BOS custom dropdown (Academic reference pattern and compatibility pages). */
.bos-select-custom-container {
    position: relative;
    width: 100% !important;
    min-width: 0;
}

.bos-select-custom-trigger {
    width: 100% !important;
    min-width: 0;
    min-height: var(--bos-select-height) !important;
    height: var(--bos-select-height) !important;
    padding: 0 44px 0 16px !important;
    border: 1px solid var(--bos-select-border) !important;
    border-radius: var(--bos-select-radius) !important;
    background: #fff !important;
    color: var(--bos-select-text) !important;
    font-size: .875rem !important;
    font-weight: 500 !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px;
    text-align: left;
    cursor: pointer;
    box-shadow: none !important;
    transition: border-color .16s ease, box-shadow .16s ease;
}

.bos-select-custom-trigger:hover:not(:disabled) {
    border-color: var(--bos-select-border-hover) !important;
}

.bos-select-custom-trigger:disabled,
.bos-select--disabled .bos-select-custom-trigger {
    border-color: #e1e6ef !important;
    background: var(--bos-select-disabled) !important;
    color: #98a2b3 !important;
    cursor: not-allowed;
}

.bos-select-custom-trigger:focus-visible,
.bos-select-custom-container.open .bos-select-custom-trigger {
    outline: 0 !important;
    border-color: var(--bos-select-primary) !important;
    box-shadow: 0 0 0 4px var(--bos-select-ring) !important;
}

.bos-select-custom-label {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap !important;
}

.bos-select-custom-icon {
    position: absolute;
    right: 16px;
    flex: 0 0 auto;
    color: var(--bos-select-muted) !important;
    transition: color .16s ease, transform .16s ease !important;
}

.bos-select-custom-container.open .bos-select-custom-icon {
    color: var(--bos-select-primary) !important;
    transform: rotate(180deg) !important;
}

.bos-select-custom-dropdown {
    position: fixed !important;
    inset: auto !important;
    max-width: min(420px, calc(100vw - 24px)) !important;
    max-height: min(248px, calc(100vh - 120px)) !important;
    margin: 0 !important;
    padding: 6px !important;
    border: 1px solid var(--bos-select-border) !important;
    border-radius: var(--bos-select-radius) !important;
    background: #fff !important;
    box-shadow: var(--bos-select-menu-shadow) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    z-index: var(--bos-layer-dropdown) !important;
}

.bos-select-custom-option {
    position: relative;
    width: 100%;
    min-width: 0;
    min-height: 42px;
    padding: 9px 40px 9px 13px !important;
    border: 0 !important;
    border-radius: var(--bos-select-option-radius) !important;
    background: #fff !important;
    color: var(--bos-select-text) !important;
    display: flex !important;
    align-items: center !important;
    font-size: .875rem !important;
    font-weight: 500 !important;
    text-align: left;
    cursor: pointer;
}

.bos-select-custom-option[aria-disabled="true"] {
    background: transparent !important;
    color: #98a2b3 !important;
    cursor: not-allowed;
}

.bos-select-custom-dropdown.is-scrollable {
    box-shadow: var(--bos-select-menu-shadow), inset 0 -12px 12px -14px rgba(25, 38, 63, .34) !important;
    scrollbar-color: #9da9bc #f5f7fb;
}

.bos-select-custom-group {
    padding: 10px 14px 6px;
    color: var(--bos-select-muted);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.bos-select-custom-option>span {
    flex: 1 1 auto;
    min-width: 0;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: anywhere;
}

.bos-select-custom-option-text {
    display: grid;
    gap: 2px;
}

.bos-select-custom-option-primary {
    color: inherit;
    font: inherit;
}

.bos-select-custom-option-secondary {
    color: var(--bos-select-muted);
    font-size: .72rem;
    font-weight: 500;
    line-height: 1.3;
}

/* Subtle third line (e.g. "Commercial Bank"/"Islamic Bank"/"Digital Bank" on
   the searchable Bank Name selector) — deliberately smaller/lighter than the
   secondary legal-name line so it reads as metadata, not a second title. */
.bos-select-custom-option-type {
    color: var(--bos-select-muted);
    font-size: .66rem;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
    opacity: .8;
}

/* Real runtime bug fix: multiple earlier `.bos-select-custom-option` rules in
   this file (several theme-iteration blocks accumulated over time) declare
   `display: flex !important` with no [hidden] exception. Since the browser's
   native `[hidden] { display: none }` UA rule has no !important, it always
   loses to those — meaning applySearchFilter()'s `item.hidden = true` (in
   bos-select.js) was setting the DOM attribute correctly but had ZERO visual
   effect: every option stayed visibly displayed regardless of search
   filtering. This single, higher-specificity, !important rule wins the
   cascade deterministically (attribute selector beats the plain class,
   regardless of the conflicting rules' order in the file) and is the
   complete fix — no JS change was needed once this was found. */
.bos-select-custom-option[hidden] {
    display: none !important;
}

.bos-select-custom-option:hover,
.bos-select-custom-option:focus-visible {
    outline: 0;
    background: rgba(76, 80, 217, .055) !important;
    color: var(--bos-select-text) !important;
}

.bos-select-custom-option.selected,
.bos-select-custom-option[aria-selected="true"] {
    background: var(--bos-select-primary-soft) !important;
    color: var(--bos-select-primary) !important;
    font-weight: 700 !important;
}

.bos-select-custom-check-icon {
    position: absolute;
    right: 15px;
    color: transparent !important;
}

.bos-select-custom-option.selected .bos-select-custom-check-icon,
.bos-select-custom-option[aria-selected="true"] .bos-select-custom-check-icon {
    color: var(--bos-select-primary) !important;
}

/* Select2 single and multiple controls. */
.select2-container {
    width: 100% !important;
    max-width: 100%;
}

.select2-container--default .select2-selection--single {
    width: 100%;
    height: var(--bos-select-height) !important;
    min-height: var(--bos-select-height) !important;
    padding: 0 !important;
    border: 1px solid var(--bos-select-border) !important;
    border-radius: var(--bos-select-radius) !important;
    background: #fff !important;
    display: flex !important;
    align-items: center !important;
    box-shadow: none !important;
    transition: border-color .16s ease, box-shadow .16s ease;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    width: 100%;
    min-width: 0;
    padding: 0 44px 0 16px !important;
    color: var(--bos-select-text) !important;
    font-size: .875rem !important;
    font-weight: 500;
    line-height: calc(var(--bos-select-height) - 2px) !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: #98a2b3 !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    width: 42px !important;
    height: 100% !important;
    top: 0 !important;
    right: 2px !important;
    display: grid !important;
    place-items: center;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
    display: none !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow::before {
    content: "" !important;
    width: 16px;
    height: 16px;
    background: var(--bos-select-chevron) center / 16px no-repeat;
    transition: transform .16s ease;
}

.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow::before {
    transform: rotate(180deg);
}

.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--multiple {
    border-color: var(--bos-select-primary) !important;
    box-shadow: 0 0 0 4px var(--bos-select-ring) !important;
}

.select2-container--default.select2-container--disabled .select2-selection--single,
.select2-container--default.select2-container--disabled .select2-selection--multiple {
    border-color: #e1e6ef !important;
    background: var(--bos-select-disabled) !important;
    color: #98a2b3 !important;
    cursor: not-allowed;
}

select.is-invalid+.select2-container .select2-selection,
.is-error .select2-container .select2-selection,
.select2-container.is-invalid .select2-selection {
    border-color: var(--bos-select-danger) !important;
}

.select2-container--default .select2-selection--multiple {
    width: 100%;
    min-height: var(--bos-select-height) !important;
    padding: 5px 10px !important;
    border: 1px solid var(--bos-select-border) !important;
    border-radius: var(--bos-select-radius) !important;
    background: #fff !important;
    display: flex;
    align-items: center;
}

.select2-container--default .select2-selection--multiple .select2-selection__rendered {
    width: 100%;
    padding: 0 !important;
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    max-width: 100%;
    margin: 0 !important;
    padding: 5px 28px 5px 10px !important;
    border: 1px solid rgba(76, 80, 217, .13) !important;
    border-radius: 999px !important;
    background: var(--bos-select-primary-soft) !important;
    color: #3730a3 !important;
    font-size: .78rem !important;
    font-weight: 700 !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    position: absolute !important;
    inset: 0 0 0 auto !important;
    width: 26px;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 999px 999px 0 !important;
    background: transparent !important;
    color: var(--bos-select-primary) !important;
}

.select2-container--open {
    z-index: var(--bos-layer-dropdown) !important;
}

.modal-open .select2-container--open,
.bos-modal-open .select2-container--open,
.bos-app-modal .select2-container--open,
.im-drawer .select2-container--open {
    z-index: var(--bos-layer-modal-dropdown) !important;
}

.select2-dropdown {
    margin-top: 8px !important;
    padding: 8px !important;
    border: 1px solid var(--bos-select-border) !important;
    border-radius: var(--bos-select-radius) !important;
    background: #fff !important;
    box-shadow: var(--bos-select-menu-shadow) !important;
    overflow: hidden;
    z-index: var(--bos-layer-dropdown) !important;
}

.select2-container--open .select2-dropdown--above {
    margin-top: -8px !important;
    margin-bottom: 8px;
}

.select2-search--dropdown {
    padding: 2px 2px 8px !important;
}

.select2-search--dropdown .select2-search__field {
    min-height: 42px;
    padding: 8px 12px !important;
    border: 1px solid var(--bos-select-border) !important;
    border-radius: 12px !important;
    color: var(--bos-select-text);
    outline: 0;
}

.select2-search--dropdown .select2-search__field:focus {
    border-color: var(--bos-select-primary) !important;
    box-shadow: 0 0 0 3px var(--bos-select-ring) !important;
}

.select2-results__options {
    max-height: min(352px, calc(100vh - 160px)) !important;
    padding: 0 !important;
    overscroll-behavior: contain;
}

.select2-results__option {
    position: relative;
    min-height: 48px;
    padding: 13px 42px 13px 14px !important;
    border-radius: var(--bos-select-option-radius) !important;
    color: var(--bos-select-text) !important;
    font-size: .875rem !important;
    font-weight: 500;
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background: rgba(76, 80, 217, .055) !important;
    color: var(--bos-select-text) !important;
}

.select2-container--default .select2-results__option[aria-selected="true"],
.select2-container--default .select2-results__option--selected {
    background: var(--bos-select-primary-soft) !important;
    color: var(--bos-select-primary) !important;
    font-weight: 700 !important;
}

.select2-container--default .select2-results__option[aria-selected="true"]::after,
.select2-container--default .select2-results__option--selected::after {
    content: "\2713";
    position: absolute;
    right: 15px;
    top: 50%;
    color: var(--bos-select-primary);
    font-size: .95rem;
    font-weight: 800;
    transform: translateY(-50%);
}

.select2-results__option[aria-disabled="true"] {
    background: transparent !important;
    color: #98a2b3 !important;
    cursor: not-allowed;
}

/* bootstrap-select compatibility without altering plugin initialization. */
.bootstrap-select {
    width: 100% !important;
}

.bootstrap-select>.dropdown-toggle {
    min-height: var(--bos-select-height) !important;
    padding: 0 44px 0 16px !important;
    border: 1px solid var(--bos-select-border) !important;
    border-radius: var(--bos-select-radius) !important;
    background: #fff var(--bos-select-chevron) right 15px center / 16px no-repeat !important;
    color: var(--bos-select-text) !important;
    font-size: .875rem !important;
    font-weight: 500 !important;
    box-shadow: none !important;
}

.bootstrap-select>.dropdown-toggle::after {
    display: none !important;
}

.bootstrap-select.show>.dropdown-toggle,
.bootstrap-select>.dropdown-toggle:focus,
.bootstrap-select>.dropdown-toggle:focus-visible {
    outline: 0 !important;
    border-color: var(--bos-select-primary) !important;
    box-shadow: 0 0 0 4px var(--bos-select-ring) !important;
}

.bootstrap-select.disabled>.dropdown-toggle,
.bootstrap-select>.dropdown-toggle.disabled {
    border-color: #e1e6ef !important;
    background-color: var(--bos-select-disabled) !important;
    color: #98a2b3 !important;
}

.bootstrap-select .dropdown-menu {
    max-width: min(100%, calc(100vw - 24px));
    padding: 8px !important;
    border: 1px solid var(--bos-select-border) !important;
    border-radius: var(--bos-select-radius) !important;
    background: #fff !important;
    box-shadow: var(--bos-select-menu-shadow) !important;
    z-index: var(--bos-layer-dropdown);
}

.bootstrap-select .dropdown-menu.inner {
    max-height: min(352px, calc(100vh - 160px)) !important;
    padding: 0 !important;
}

.bootstrap-select .dropdown-item {
    min-height: 48px;
    padding: 13px 42px 13px 14px !important;
    border-radius: var(--bos-select-option-radius) !important;
    color: var(--bos-select-text) !important;
    font-size: .875rem;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bootstrap-select .dropdown-item:hover,
.bootstrap-select .dropdown-item:focus {
    background: rgba(76, 80, 217, .055) !important;
}

.bootstrap-select .dropdown-item.active,
.bootstrap-select .dropdown-item.selected {
    position: relative;
    background: var(--bos-select-primary-soft) !important;
    color: var(--bos-select-primary) !important;
    font-weight: 700;
}

.bootstrap-select .dropdown-item.active::after,
.bootstrap-select .dropdown-item.selected::after {
    content: "\2713";
    position: absolute;
    right: 15px;
    color: var(--bos-select-primary);
    font-weight: 800;
}

.bootstrap-select .bs-searchbox {
    padding: 2px 2px 8px;
}

.bootstrap-select .bs-searchbox .form-control {
    min-height: 42px;
    border: 1px solid var(--bos-select-border);
    border-radius: 12px;
}

/* One restrained scrollbar for all custom menus. */
.bos-select-custom-dropdown,
.select2-results__options,
.bootstrap-select .dropdown-menu.inner {
    scrollbar-width: thin;
    scrollbar-color: #c4ccda transparent;
}

.bos-select-custom-dropdown::-webkit-scrollbar,
.select2-results__options::-webkit-scrollbar,
.bootstrap-select .dropdown-menu.inner::-webkit-scrollbar {
    width: 6px;
}

.bos-select-custom-dropdown::-webkit-scrollbar-track,
.select2-results__options::-webkit-scrollbar-track,
.bootstrap-select .dropdown-menu.inner::-webkit-scrollbar-track {
    background: transparent;
}

.bos-select-custom-dropdown::-webkit-scrollbar-thumb,
.select2-results__options::-webkit-scrollbar-thumb,
.bootstrap-select .dropdown-menu.inner::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: #c4ccda;
}

.bos-select-custom-dropdown::-webkit-scrollbar {
    width: 7px;
}

.bos-select-custom-dropdown::-webkit-scrollbar-track {
    background: #f5f7fb;
}

.bos-select-custom-dropdown::-webkit-scrollbar-thumb {
    border: 2px solid #f5f7fb;
    background: #9da9bc;
}

/* Compact filter toolbars retain the same language, with a bounded width only. */
.bos-erp-filter-toolbar select.bos-native-select,
.bos-erp-filter-toolbar select.im-select,
.bos-erp-filter-toolbar .select2-container,
.im-filter-bar select.bos-native-select,
.im-filter-bar select.im-select,
.im-filter-bar .select2-container {
    min-width: 150px;
    max-width: 100%;
}

@media (max-width: 575.98px) {
    :root {
        --bos-select-height: 48px;
    }

    .bos-select-custom-dropdown,
    .select2-dropdown,
    .bootstrap-select .dropdown-menu {
        max-width: calc(100vw - 24px) !important;
    }

    .bos-erp-filter-toolbar select.bos-native-select,
    .bos-erp-filter-toolbar select.im-select,
    .bos-erp-filter-toolbar .select2-container,
    .im-filter-bar select.bos-native-select,
    .im-filter-bar select.im-select,
    .im-filter-bar .select2-container {
        width: 100% !important;
        min-width: 0;
    }
}

@media (prefers-reduced-motion: reduce) {

    .bos-select-custom-trigger,
    .bos-select-custom-icon,
    .select2-selection,
    .select2-selection__arrow::before,
    select.bos-native-select {
        transition: none !important;
    }
}

/* Compatibility contexts formerly carrying their own compact select theme. */
.im-drawer select.bos-native-select,
.im-drawer select.im-select,
body.embedded-content-body select.bos-native-select,
body.embedded-content-body select.im-select,
.staff-management select.bos-native-select,
.staff-management select.im-select,
.staff-drawer-page select.bos-native-select,
.staff-drawer-page select.im-select,
.kenderaan .custom-select-wrapper select,
.user-profile .custom-select-wrapper select {
    min-height: var(--bos-select-height) !important;
    height: var(--bos-select-height) !important;
    padding: 0 44px 0 16px !important;
    border: 1px solid var(--bos-select-border) !important;
    border-radius: var(--bos-select-radius) !important;
    background-color: #fff !important;
    background-image: var(--bos-select-chevron) !important;
    background-repeat: no-repeat !important;
    background-position: right 15px center !important;
    background-size: 16px !important;
}

.im-drawer .select2-container--default .select2-selection--single,
body.embedded-content-body .select2-container--default .select2-selection--single,
.staff-management .select2-container--default .select2-selection--single,
.staff-drawer-page .select2-container--default .select2-selection--single {
    min-height: var(--bos-select-height) !important;
    height: var(--bos-select-height) !important;
    padding: 0 !important;
    border: 1px solid var(--bos-select-border) !important;
    border-radius: var(--bos-select-radius) !important;
    background: #fff !important;
    background-image: none !important;
}

.im-drawer .select2-container--default .select2-selection--single .select2-selection__rendered,
body.embedded-content-body .select2-container--default .select2-selection--single .select2-selection__rendered,
.staff-management .select2-container--default .select2-selection--single .select2-selection__rendered,
.staff-drawer-page .select2-container--default .select2-selection--single .select2-selection__rendered {
    padding: 0 44px 0 16px !important;
    line-height: calc(var(--bos-select-height) - 2px) !important;
}

.im-drawer .select2-container--default .select2-selection--single .select2-selection__arrow,
body.embedded-content-body .select2-container--default .select2-selection--single .select2-selection__arrow,
.staff-management .select2-container--default .select2-selection--single .select2-selection__arrow,
.staff-drawer-page .select2-container--default .select2-selection--single .select2-selection__arrow {
    width: 42px !important;
    height: 100% !important;
    right: 2px !important;
    display: grid !important;
}

.im-drawer .select2-container--default .select2-selection--multiple,
body.embedded-content-body .select2-container--default .select2-selection--multiple,
.staff-management .select2-container--default .select2-selection--multiple,
.staff-drawer-page .select2-container--default .select2-selection--multiple {
    min-height: var(--bos-select-height) !important;
    height: auto !important;
    padding: 5px 10px !important;
    border: 1px solid var(--bos-select-border) !important;
    border-radius: var(--bos-select-radius) !important;
}

/* Leave calendars keep Flatpickr's compact native month/year controls.
   These scoped rules intentionally follow the global select system so its
   broad form-select dimensions cannot leak into Flatpickr's internal select. */
.bos-leave-calendar .flatpickr-months {
    position: relative;
    display: flex;
    align-items: center;
    height: 50px;
    min-height: 50px;
    overflow: visible;
}

.bos-leave-calendar .flatpickr-month {
    position: relative;
    flex: 1 1 auto;
    height: 50px;
    min-height: 50px;
    overflow: visible;
}

.bos-leave-calendar .flatpickr-current-month {
    position: absolute;
    top: 0;
    left: 12.5%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 75%;
    height: 50px;
    padding: 0;
    line-height: 1;
    transform: none;
}

.bos-leave-calendar .flatpickr-current-month select.flatpickr-monthDropdown-months,
.im-page .bos-leave-calendar .flatpickr-current-month select.flatpickr-monthDropdown-months {
    width: auto !important;
    min-width: 0 !important;
    height: 32px !important;
    min-height: 32px !important;
    margin: 0 !important;
    padding: 0 4px !important;
    border: 0 !important;
    border-radius: 8px !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    color: inherit !important;
    font: inherit !important;
    line-height: 32px !important;
    cursor: pointer !important;
    appearance: auto !important;
    -webkit-appearance: menulist !important;
}

.bos-leave-calendar .flatpickr-current-month .numInputWrapper {
    width: 72px;
    height: 32px;
    margin-left: 4px;
}

.bos-leave-calendar .flatpickr-current-month input.cur-year {
    height: 32px;
    padding: 0 4px;
    line-height: 32px;
}

.bos-leave-calendar .flatpickr-prev-month,
.bos-leave-calendar .flatpickr-next-month {
    top: 0;
    display: flex;
    align-items: center;
    height: 50px;
    padding: 0 16px;
}

.bos-leave-calendar .flatpickr-rContainer,
.bos-leave-calendar .flatpickr-weekdays,
.bos-leave-calendar .flatpickr-weekdaycontainer,
.bos-leave-calendar .flatpickr-days,
.bos-leave-calendar .dayContainer {
    width: 100%;
    max-width: none;
}

.bos-leave-calendar .flatpickr-weekday {
    flex: 1 1 calc(100% / 7);
    max-width: calc(100% / 7);
}

.bos-leave-calendar .dayContainer {
    display: flex;
    flex-wrap: wrap;
    min-width: 100%;
}

.bos-leave-calendar .flatpickr-day {
    flex: 0 0 calc(100% / 7);
    max-width: calc(100% / 7);
}


/* =========================================
   CRM MODULE
   Complete UI/UX redesign. All CRM styles live here — no crm.css.
   Built on BOS design tokens (--im-color-*, --im-radius-*, --im-space-*).
   ========================================= */

/* --- Content shell ---------------------------------------------------------- */
.crm-page {
    padding: 4px 28px 56px;
    max-width: 1560px;
    margin: 0 auto;
    width: 100%;
    --bos-select-height: 44px;
    font-family: var(--im-font-sans);
    color: var(--im-color-text);
}

/* --- Toolbar / filter bar --------------------------------------------------- */
.crm-toolbar,
.crm-record-toolbar {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 18px;
    justify-content: flex-start;
}

.crm-record-toolbar {
    justify-content: space-between;
}

.crm-filter-bar {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    flex: 1 1 auto;
    min-width: 0;
}

.crm-filter-bar .im-input,
.crm-filter-bar .im-select {
    min-height: 40px;
    border-radius: 12px;
}

.crm-filter-bar .im-input {
    flex: 1 1 220px;
    min-width: 180px;
}

.crm-filter-bar .im-select {
    flex: 0 1 180px;
}

.crm-index-filter {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) repeat(3, minmax(150px, 190px)) auto auto;
    gap: 10px;
    width: 100%;
}

.crm-index-filter>.crm-filter-search {
    width: 100%;
    min-width: 0;
}

.crm-index-filter>.bos-select-global {
    width: auto !important;
    min-width: 0;
}

.crm-index-filter>.crm-filter-date {
    width: 170px;
    min-width: 0;
}

.crm-index-filter>.im-btn,
.crm-index-filter>.crm-filter-clear {
    align-self: center;
    white-space: nowrap;
}

.crm-index-filter--visits {
    grid-template-columns: minmax(220px, 1fr) repeat(3, minmax(145px, 180px)) repeat(2, 170px) auto auto;
}

.crm-filter-clear {
    font-size: .8125rem;
    font-weight: 600;
    color: var(--im-color-text-soft);
    text-decoration: none;
    padding: 8px 12px;
    border-radius: 10px;
}

.crm-filter-clear:hover {
    background: var(--im-color-surface-muted);
    color: var(--im-color-text);
}

/* --- Page header ------------------------------------------------------------ */
.crm-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 22px;
}

.crm-page-header__breadcrumb {
    font-size: .8125rem;
    color: var(--im-color-text-muted);
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.crm-page-header__breadcrumb a {
    color: var(--im-color-text-soft);
    text-decoration: none;
}

.crm-page-header__breadcrumb a:hover {
    text-decoration: underline;
    color: var(--im-color-primary);
}

.crm-page-header__title {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.crm-page-header__title h1,
.crm-page-header__title h2 {
    margin: 0;
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--im-color-text);
    letter-spacing: -.01em;
    line-height: 1.2;
}

.crm-page-header__subtitle {
    color: var(--im-color-text-soft);
    font-size: .9375rem;
    margin-top: 4px;
    line-height: 1.45;
}

.crm-page-header__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.crm-page-header__filters {
    flex-basis: 100%;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 14px;
}

/* --- Grids & metrics -------------------------------------------------------- */
.crm-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

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

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

/* --- Cards (3 levels) ------------------------------------------------------- */
.crm-card {
    background: var(--im-color-surface);
    border: 1px solid var(--im-color-line);
    border-radius: 18px;
    padding: 22px;
    box-shadow: var(--im-shadow-sm);
}

.crm-card--compact {
    padding: 16px;
}

.crm-card--flush {
    padding: 0;
    overflow: hidden;
}

.crm-card--association {
    padding: 16px;
    border-radius: 16px;
}

.crm-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

.crm-card-header h2,
.crm-card-header h3,
.crm-card-header h4 {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
}

.crm-card-header__count {
    font-size: .75rem;
    font-weight: 700;
    color: var(--im-color-text-soft);
    background: var(--im-color-surface-muted);
    border-radius: 999px;
    padding: 2px 10px;
}

.crm-card-header__action {
    font-size: .8125rem;
    font-weight: 700;
}

.crm-card-footer-link {
    font-size: .8125rem;
    font-weight: 700;
    color: var(--im-color-primary);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.crm-card-footer-link:hover {
    text-decoration: underline;
}

/* Metric cards (dashboard) --------------------------------------------------- */
.crm-metric {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.crm-metric__icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    font-size: 1.125rem;
    margin-bottom: 8px;
    background: var(--im-color-primary-soft);
    color: var(--im-color-primary);
}

.crm-metric__icon[data-variant="info"] {
    background: var(--im-color-info-soft);
    color: var(--im-color-info);
}

.crm-metric__icon[data-variant="warning"] {
    background: var(--im-color-warning-soft);
    color: var(--im-color-warning-ink);
}

.crm-metric__icon[data-variant="success"] {
    background: var(--im-color-success-soft);
    color: var(--im-color-success);
}

.crm-metric__icon[data-variant="danger"] {
    background: var(--im-color-danger-soft);
    color: var(--im-color-danger);
}

.crm-metric__label {
    font-size: .8125rem;
    color: var(--im-color-text-soft);
    font-weight: 600;
}

.crm-metric strong,
.crm-metric__value {
    display: block;
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--im-color-text);
    line-height: 1.15;
}

.crm-metric__support {
    font-size: .75rem;
    color: var(--im-color-text-muted);
}

.crm-metric__link {
    font-size: .8125rem;
    font-weight: 700;
    color: var(--im-color-primary);
    text-decoration: none;
    margin-top: 4px;
}

.crm-metric__link:hover {
    text-decoration: underline;
}

/* --- Tables ----------------------------------------------------------------- */
.crm-table-wrap {
    overflow-x: auto;
    margin: 0 -22px;
    padding: 0 22px;
}

.crm-card--flush .crm-table-wrap {
    margin: 0;
    padding: 0;
}

.crm-table {
    width: 100%;
    border-collapse: collapse;
}

.crm-table th,
.crm-table td {
    padding: 14px 16px;
    text-align: left;
    border-bottom: 1px solid var(--im-color-line);
    vertical-align: top;
}

.crm-table thead th {
    font-size: .75rem;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
    color: var(--im-color-text-soft);
    background: var(--im-color-surface-soft);
    border-bottom: 1px solid var(--im-color-line);
    height: 48px;
    white-space: nowrap;
}

.crm-table tbody tr {
    transition: background .12s ease;
}

.crm-table tbody tr:hover {
    background: var(--im-color-surface-soft);
}

.crm-table tbody td strong {
    font-size: .9375rem;
    color: var(--im-color-text);
}

.crm-table tbody td .text-muted,
.crm-table tbody td small {
    font-size: .8125rem;
    color: var(--im-color-text-soft);
}

.crm-table a {
    color: var(--im-color-text);
    text-decoration: none;
    font-weight: 600;
}

.crm-table a:hover {
    color: var(--im-color-primary);
}

.crm-index-table {
    table-layout: auto;
    min-width: 980px;
}

.crm-index-table th,
.crm-index-table td {
    max-width: none;
    padding-block: 12px;
    vertical-align: middle;
    overflow-wrap: normal;
    word-break: normal;
}

.crm-index-table th:first-child,
.crm-index-table td:first-child {
    min-width: 190px;
}

.crm-index-table th:nth-child(2),
.crm-index-table td:nth-child(2) {
    min-width: 180px;
}

.crm-index-table td strong,
.crm-index-table td a {
    word-break: normal;
    overflow-wrap: break-word;
}

/* Invoice index — denser table, tuned to avoid a horizontal scrollbar at
   1280px+ while fixing the specific wrap failures (Source column wrapping
   one word per line, dates/amounts breaking across lines). Overrides the
   generic .crm-index-table 980px min-width with a lower, purpose-fit one —
   scoped to this table only, so Companies (which also uses
   .crm-index-table) is unaffected. */
.crm-invoice-index-table {
    min-width: 860px;
    table-layout: fixed;
}

.crm-invoice-index-table th,
.crm-invoice-index-table td {
    padding-block: 10px;
}

.crm-invoice-index-table th:first-child,
.crm-invoice-index-table td:first-child {
    min-width: 130px;
    width: 130px;
}

.crm-invoice-index-table th:nth-child(2),
.crm-invoice-index-table td:nth-child(2) {
    min-width: 170px;
    width: 18%;
}

.crm-invoice-index-table th:nth-child(3),
.crm-invoice-index-table td:nth-child(3) {
    min-width: 110px;
    width: 12%;
}

.crm-invoice-index-table th:nth-child(4),
.crm-invoice-index-table td:nth-child(4) {
    min-width: 140px;
    width: 140px;
}

.crm-invoice-index-table th:nth-child(5),
.crm-invoice-index-table td:nth-child(5) {
    min-width: 140px;
    width: 150px;
}

.crm-invoice-index-table th:nth-child(6),
.crm-invoice-index-table td:nth-child(6) {
    min-width: 150px;
    width: 15%;
}

.crm-invoice-index-table th:last-child,
.crm-invoice-index-table td:last-child {
    width: 56px;
    text-align: right;
}

.crm-invoice-cell-nowrap {
    white-space: nowrap;
}

.crm-invoice-source-cell {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.crm-invoice-amount-cell {
    white-space: nowrap;
}

.crm-invoice-amount-cell strong {
    font-size: .9375rem;
}

.crm-invoice-amount-paid {
    display: block;
    color: var(--im-color-success);
    font-weight: 700;
}

.crm-invoice-amount-outstanding {
    display: block;
    color: var(--im-color-warning-ink);
    font-weight: 700;
}

.dropdown-item-danger {
    color: var(--im-color-danger);
}

.dropdown-item-danger:hover,
.dropdown-item-danger:focus {
    color: var(--im-color-danger);
    background: var(--im-color-danger-soft);
}

/* Company directory --------------------------------------------------------- */
.crm-company-directory {
    width: 100%;
    max-width: 1380px;
    margin-inline: auto;
}

.crm-company-directory .crm-page-header {
    margin-bottom: 12px;
}

.crm-directory-count {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 3px 10px;
    border-radius: 999px;
    color: var(--im-color-text-soft);
    background: var(--im-color-surface-muted);
    font-size: .75rem;
    font-weight: 700;
}

.crm-company-summary {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px 12px;
    min-height: 46px;
    margin-bottom: 12px;
    padding: 9px 14px;
    border: 1px solid var(--im-color-line);
    border-radius: 14px;
    color: var(--im-color-text-soft);
    background: var(--im-color-surface);
    font-size: .78rem;
}

.crm-company-summary strong {
    color: var(--im-color-text);
    font-size: .9rem;
}

.crm-company-summary>i {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--im-color-text-muted);
}

.crm-company-toolbar {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
    margin-bottom: 12px;
    padding: 10px;
    border: 1px solid var(--im-color-line);
    border-radius: 15px;
    background: var(--im-color-surface);
}

.crm-company-search {
    position: relative;
    display: flex;
    flex: 1 1 320px;
    min-width: 230px;
}

.crm-company-search i {
    position: absolute;
    top: 50%;
    left: 13px;
    color: var(--im-color-text-muted);
    transform: translateY(-50%);
    pointer-events: none;
}

.crm-company-search input {
    width: 100%;
    height: 40px;
    padding: 7px 12px 7px 37px;
    border: 1px solid var(--im-color-line);
    border-radius: 11px;
    color: var(--im-color-text);
    background: var(--im-color-surface);
    outline: 0;
}

.crm-company-search input:focus {
    border-color: var(--im-color-primary);
    box-shadow: 0 0 0 3px var(--im-color-primary-soft);
}

.crm-company-filter-panel {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
}

.crm-company-filter-panel .im-select {
    flex: none;
    min-height: 40px;
    border-radius: 11px;
}

.crm-company-filter--status {
    width: 170px;
}

.crm-company-filter--industry,
.crm-company-filter--owner {
    width: 190px;
}

.crm-company-apply {
    min-width: 76px;
}

.crm-company-toolbar.is-loading {
    opacity: .75;
    pointer-events: none;
}

.crm-company-filter-toggle {
    display: none;
}

.crm-filter-count {
    display: inline-grid;
    min-width: 19px;
    height: 19px;
    place-items: center;
    border-radius: 999px;
    color: #fff;
    background: var(--im-color-primary);
    font-size: .68rem;
}

.crm-company-table-card {
    overflow: hidden;
    border: 1px solid var(--im-color-line);
    border-radius: 16px;
    background: var(--im-color-surface);
    box-shadow: var(--im-shadow-sm);
}

.crm-company-table-scroll {
    width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
}

.crm-company-table {
    width: 100%;
    min-width: 1080px;
    table-layout: fixed;
    border-collapse: collapse;
}

.crm-company-table th {
    height: 42px;
    padding: 9px 12px;
    border-bottom: 1px solid var(--im-color-line);
    color: var(--im-color-text-soft);
    background: var(--im-color-surface-soft);
    font-size: .7rem;
    font-weight: 800;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.crm-company-table td {
    height: 76px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--im-color-line);
    color: var(--im-color-text);
    font-size: .8rem;
    vertical-align: middle;
}

.crm-company-table tbody tr:last-child td {
    border-bottom: 0;
}

.crm-company-table tbody tr:hover {
    background: var(--im-color-surface-soft);
}

.crm-company-table th:nth-child(1) {
    width: 23%;
    min-width: 240px;
}

.crm-company-table th:nth-child(2) {
    width: 15%;
}

.crm-company-table th:nth-child(3) {
    width: 11%;
}

.crm-company-table th:nth-child(4) {
    width: 9%;
}

.crm-company-table th:nth-child(5) {
    width: 15%;
}

.crm-company-table th:nth-child(6) {
    width: 12%;
}

.crm-company-table th:nth-child(7) {
    width: 10%;
}

.crm-company-table th:nth-child(8) {
    width: 54px;
}

.crm-company-cell a {
    display: -webkit-box;
    overflow: hidden;
    color: var(--im-color-text);
    font-size: .9rem;
    font-weight: 800;
    line-height: 1.3;
    text-decoration: none;
    overflow-wrap: normal;
    word-break: normal;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.crm-company-cell a:hover {
    color: var(--im-color-primary);
}

.crm-company-cell small,
.crm-company-table td small {
    display: block;
    margin-top: 3px;
    overflow: hidden;
    color: var(--im-color-text-muted);
    font-size: .69rem;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.crm-company-muted {
    color: var(--im-color-text-muted);
}

.crm-company-deal-count {
    display: inline-grid;
    min-width: 30px;
    height: 30px;
    place-items: center;
    border-radius: 9px;
    color: var(--im-color-primary);
    background: var(--im-color-primary-soft);
    font-weight: 800;
    text-decoration: none;
}

.crm-company-owner {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.crm-company-owner>span {
    display: grid;
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    place-items: center;
    border-radius: 50%;
    color: var(--im-color-primary);
    background: var(--im-color-primary-soft);
    font-size: .68rem;
    font-weight: 800;
}

.crm-company-owner strong {
    overflow: hidden;
    font-size: .78rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.crm-company-last-activity {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--im-color-text-soft);
    white-space: nowrap;
}

.crm-company-pagination {
    padding: 10px 14px;
    border-top: 1px solid var(--im-color-line);
}

.crm-company-mobile-list {
    display: none;
}

.crm-company-empty {
    min-height: 270px;
    display: grid;
    align-content: center;
}

/* --- Status badges ---------------------------------------------------------- */
.crm-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border-radius: 999px;
    padding: 4px 11px;
    background: var(--im-color-primary-soft);
    color: var(--im-color-primary);
    font-weight: 700;
    font-size: .75rem;
    line-height: 1.4;
    white-space: nowrap;
}

.crm-status[data-variant]::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex: none;
}

.crm-status[data-variant="neutral"] {
    background: var(--im-color-surface-muted);
    color: var(--im-color-text-soft);
}

.crm-status[data-variant="info"] {
    background: var(--im-color-info-soft);
    color: var(--im-color-info-ink);
}

.crm-status[data-variant="primary"] {
    background: var(--im-color-primary-soft);
    color: var(--im-color-primary);
}

.crm-status[data-variant="pending"] {
    background: var(--im-color-warning-soft);
    color: var(--im-color-warning-ink);
}

.crm-status[data-variant="in-progress"],
.crm-status[data-variant="in_progress"] {
    background: var(--im-color-info-soft);
    color: var(--im-color-info-ink);
}

.crm-status[data-variant="warning"] {
    background: var(--im-color-warning-soft);
    color: var(--im-color-warning-ink);
}

.crm-status[data-variant="success"] {
    background: var(--im-color-success-soft);
    color: var(--im-color-success-ink);
}

.crm-status[data-variant="danger"] {
    background: var(--im-color-danger-soft);
    color: var(--im-color-danger-ink);
}

.crm-status[data-variant="inactive"] {
    background: #f1f5f9;
    color: #475569;
}

/* --- Buttons ---------------------------------------------------------------- */
.crm-btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 10px;
    border: 1px solid var(--im-color-line);
    background: var(--im-color-surface);
    color: var(--im-color-text-soft);
    line-height: 1;
    cursor: pointer;
    transition: background .12s ease, color .12s ease, border-color .12s ease;
}

.crm-btn-icon>.bi {
    display: block;
    margin: 0;
    line-height: 1;
}

.crm-btn-icon>.bi::before {
    display: block;
    vertical-align: 0;
}

.crm-btn-icon:hover {
    background: var(--im-color-surface-muted);
    color: var(--im-color-text);
    border-color: var(--im-color-line-strong);
}

.crm-btn-icon:focus-visible {
    outline: 2px solid var(--im-color-primary);
    outline-offset: 2px;
}

/* --- Forms ------------------------------------------------------------------ */
.crm-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.crm-form-full,
.crm-form-grid .crm-form-full {
    grid-column: 1 / -1;
}

.crm-form-actions {
    display: flex;
    gap: 10px;
    padding-top: 16px;
    margin-top: 8px;
    border-top: 1px solid var(--im-color-line);
}

.crm-form-section+.crm-form-section {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--im-color-line);
}

.crm-form-check-align {
    padding-top: 28px;
}

.crm-form-section__title {
    font-size: .9375rem;
    font-weight: 800;
    margin-bottom: 12px;
}

.crm-notes-text {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.crm-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 16px;
}

/* min-width:0 lets a grid cell actually shrink to its track instead of
   staying content-sized (grid's default min-width:auto) -- without it, an
   unbroken long value (an email address, on Contact Detail's Contact
   Information card) forces its own track wide and visually runs into the
   next column instead of wrapping. overflow-wrap covers the same case for
   the value text itself. Both are no-ops for the short values (money,
   dates) this grid already displays elsewhere. */
.crm-summary-grid>div {
    min-width: 0;
}

.crm-summary-grid>div small {
    display: block;
    font-size: .75rem;
    color: var(--im-color-text-soft);
    font-weight: 600;
    margin-bottom: 2px;
}

.crm-summary-grid>div strong {
    font-size: .9375rem;
    overflow-wrap: anywhere;
}

.crm-totals {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-end;
}

.crm-totals>span {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    width: 100%;
    max-width: 320px;
    font-size: .875rem;
    color: var(--im-color-text-soft);
}

.crm-totals>span strong {
    color: var(--im-color-text);
}

.crm-totals .crm-total-final {
    font-size: 1rem;
    font-weight: 800;
    padding-top: 8px;
    border-top: 2px solid var(--im-color-line);
    color: var(--im-color-primary);
}

.crm-totals .crm-total-final strong {
    color: var(--im-color-primary);
}

.crm-notes-display {
    font-size: .875rem;
    color: var(--im-color-text-soft);
    line-height: 1.6;
    white-space: pre-wrap;
}

.crm-revision-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.crm-revision-item {
    padding: 8px 12px;
    border-radius: var(--im-radius-md);
    background: var(--im-color-surface-muted);
}

/* --- Tabs (Deal workspace) -------------------------------------------------- */
.crm-tabs-nav {
    display: flex;
    gap: 2px;
    overflow-x: auto;
    border-bottom: 2px solid var(--im-color-line);
    margin-bottom: 20px;
    scrollbar-width: thin;
}

.crm-tabs-nav__link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
    padding: 11px 16px;
    border: 0;
    background: none;
    color: var(--im-color-text-soft);
    font-size: .875rem;
    font-weight: 600;
    text-decoration: none;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    cursor: pointer;
    transition: color .12s ease, border-color .12s ease;
}

.crm-tabs-nav__link:hover {
    color: var(--im-color-text);
}

.crm-tabs-nav__link.is-active {
    color: var(--im-color-primary);
    border-bottom-color: var(--im-color-primary);
}

.crm-tabs-nav__link:focus-visible {
    outline: 2px solid var(--im-color-primary);
    outline-offset: -2px;
    border-radius: 8px;
}

.crm-tabs-nav__badge {
    font-size: .6875rem;
    font-weight: 700;
    background: var(--im-color-surface-muted);
    color: var(--im-color-text-soft);
    border-radius: 999px;
    padding: 1px 7px;
}

.crm-tabs-nav__link.is-active .crm-tabs-nav__badge {
    background: var(--im-color-primary-soft);
    color: var(--im-color-primary);
}

.crm-tab-panel {
    display: none;
    animation: crm-fade-in .18s ease;
}

.crm-tab-panel.is-active {
    display: block;
}

@keyframes crm-fade-in {
    from {
        opacity: 0;
        transform: translateY(4px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/* --- Deal header & pipeline bar -------------------------------------------- */
.crm-deal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.crm-deal-header__main {
    min-width: 0;
    flex: 1 1 360px;
}

.crm-deal-header__title {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}

.crm-deal-header__title h1 {
    margin: 0;
    font-size: 1.625rem;
    font-weight: 800;
    line-height: 1.2;
}

.crm-deal-header__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    font-size: .8125rem;
    color: var(--im-color-text-soft);
}

.crm-deal-header__meta strong {
    color: var(--im-color-text);
}

.crm-deal-header__actions {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.crm-pipeline-bar {
    display: flex;
    align-items: stretch;
    gap: 0;
    background: var(--im-color-surface-muted);
    border-radius: 14px;
    padding: 6px;
    margin-bottom: 22px;
    overflow-x: auto;
}

.crm-pipeline-bar__step {
    flex: 1 1 0;
    min-width: 120px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 10px 8px;
    border-radius: 10px;
    font-size: .75rem;
    font-weight: 700;
    color: var(--im-color-text-muted);
    text-align: center;
    position: relative;
    transition: background .12s ease, color .12s ease;
    cursor: default;
}

.crm-pipeline-bar__step+.crm-pipeline-bar__step::before {
    content: "";
    position: absolute;
    left: -3px;
    top: 25%;
    height: 50%;
    width: 6px;
    background: var(--im-color-surface-muted);
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    z-index: 1;
}

.crm-pipeline-bar__step.is-done {
    color: var(--im-color-success-ink);
    background: var(--im-color-success-soft);
}

.crm-pipeline-bar__step.is-current {
    color: #fff;
    background: var(--im-color-primary);
}

.crm-pipeline-bar__step.is-lost {
    color: var(--im-color-danger-ink);
    background: var(--im-color-danger-soft);
}

/* --- Record layout (3-column overview) ------------------------------------- */
.crm-record-layout {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr) 300px;
    gap: 20px;
    align-items: start;
}

.crm-record-layout>*,
.crm-record-side,
.crm-record-main,
.crm-record-side .crm-card {
    min-width: 0;
    max-width: 100%;
}

/* Company Detail — the left profile card already had its own 20px
   override (below) while the center timeline card and right association
   cards fell through to .crm-card's generic 22px, so the 3 columns never
   matched. Standardizing every .crm-card inside this specific layout to
   20px keeps the change scoped to record-detail pages instead of touching
   .crm-card everywhere else in the module. :not(.crm-card--association)
   excludes Deal Detail's own association cards, which deliberately opt
   into the existing 16px compact modifier already. (Contact Detail moved
   off .crm-record-layout entirely -- see .crm-overview-layout below --
   this rule now only applies to Company Detail, which still uses the
   3-column layout.) */
.crm-record-layout .crm-card:not(.crm-card--association) {
    padding: 20px;
}

.crm-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    align-items: start;
}

/* Contact Detail overview tab — main content + relationship sidebar,
   reusing the same ratio/gap already established by .crm-dashboard-primary
   (below) rather than inventing a new one. .crm-record-side/.crm-record-main
   are reused for their existing min-width:0/max-width:100% overflow-safety
   rule (above) even though this isn't the 3-column .crm-record-layout. */
.crm-overview-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(280px, .8fr);
    gap: 20px;
    align-items: start;
}

@media (max-width: 900px) {
    .crm-overview-layout {
        grid-template-columns: 1fr;
    }

    /* The existing bare ".crm-record-main { grid-row: 2 }" rule (below,
       written for the old 3-column .crm-record-layout) also matches these
       reused class names and would otherwise push Contact Information/
       Recent Activity below the Companies/Site Visits/Opportunities
       sidebar once this grid collapses to one column -- the opposite of
       the required mobile order. These 2-class overrides win on
       specificity regardless of source order and keep main first. */
    .crm-overview-layout .crm-record-main {
        grid-row: 1;
    }

    .crm-overview-layout .crm-record-side {
        grid-row: 2;
    }
}

/* Contact Detail Overview — vertical spacing BETWEEN the stacked cards in
   each column. Both columns were previously relying on left-over spacing
   that wasn't theirs: the main column's first card used Bootstrap's mb-3
   utility (16px, and only between the first two cards), while the sidebar
   cards are .crm-association-card, which sets margin-bottom:0 -- so
   Companies/Site Visits/Opportunities had no gap at all and visually
   touched. A single gap on the flex parent replaces both, is one source of
   truth, and leaves card padding/margins untouched. */
.crm-overview-layout .crm-record-main,
.crm-overview-layout .crm-record-side {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

@media (max-width: 900px) {

    /* :last-child matches the exact element the legacy
       ".crm-record-side:last-child { display: grid/block; gap: 14px; ... }"
       rules further down this file (written for the old 3-column
       .crm-record-layout, at the 1100px/700px breakpoints) also target.
       Redeclaring display/flex-direction here, not just gap, matters:
       those legacy rules set display:grid at <=1100px and display:block at
       <=700px, and CSS gap has no effect on a block container -- an
       earlier version of this rule only overrode gap and measured out at
       an actual 0px on-screen gap below 700px despite a computed gap:16px.
       This selector's specificity (2 classes + :last-child) beats both
       legacy rules regardless of source order, so the sidebar stays a
       single flex column with a real, consistent 16px gap everywhere
       below 900px. */
    .crm-overview-layout .crm-record-main {
        gap: 16px;
    }

    .crm-overview-layout .crm-record-side:last-child {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }
}

.crm-sticky-card {
    position: sticky;
    top: 16px;
}

.crm-record-side .crm-sticky-card {
    padding: 20px;
}

.crm-record-side .crm-sticky-card>h2 {
    margin: 0 0 8px;
    font-size: 1.35rem;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.crm-record-avatar {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--im-color-primary-soft);
    color: var(--im-color-primary);
    display: grid;
    place-items: center;
    font-size: 1.1rem;
    font-weight: 800;
    margin-bottom: 12px;
}

.crm-quick-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 16px 0 20px;
}

.crm-quick-actions .im-btn {
    width: 100%;
    min-width: 0;
    min-height: 40px;
    height: auto;
    justify-content: center;
    padding: 8px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .75rem;
    line-height: 1.25;
    white-space: normal;
    overflow-wrap: anywhere;
}

.crm-quick-action--wide {
    grid-column: 1 / -1;
}

.crm-team-member-form {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

.crm-team-member-form label {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.crm-team-member-form .im-btn {
    width: 100%;
    min-width: 0;
    min-height: 40px;
}

.crm-property {
    padding: 12px 0;
    border-bottom: 1px solid var(--im-color-line);
}

.crm-property:last-child {
    border-bottom: none;
}

.crm-property span,
.crm-property strong {
    display: block;
}

.crm-property span {
    font-size: .6875rem;
    text-transform: uppercase;
    letter-spacing: .02em;
    color: var(--im-color-text-muted);
    font-weight: 700;
    margin-bottom: 3px;
}

.crm-property strong {
    overflow-wrap: anywhere;
    font-size: .9375rem;
}

/* Deal Detail — Stage section (crm-stage-property, inside the left summary
   card's .crm-property list). Replaces the old layout that showed the same
   stage name twice back-to-back: a status badge, then a <select> whose own
   pre-selected option repeated it. "Current Stage" (badge, prominent) and
   "Change Stage" (select, secondary) are now visually distinct blocks
   separated by a divider, each with its own small uppercase caption
   matching .crm-property span's existing caption style. */
.crm-stage-current {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}

.crm-stage-current__label {
    font-size: .6875rem;
    text-transform: uppercase;
    letter-spacing: .02em;
    color: var(--im-color-text-muted);
    font-weight: 700;
}

/* .crm-property span { text-transform: uppercase } (above) is written for
   this list's own small caption labels, but a <x-crm::status-badge> also
   renders as a plain <span> — nesting the badge inside .crm-property (the
   only place in the CRM module that does; contacts/companies place their
   status badge as a sibling instead, so this is scoped narrowly enough to
   never affect them) picked up that rule too and force-uppercased the
   stage name itself. Restoring its natural case here is what keeps this
   badge showing "Qualification"/"Proposal / Quotation" rather than
   shouting the label per this task's explicit requirement. */
.crm-property .crm-status {
    text-transform: none;
}

/* --- CRM Company Detail Workspace Redesign --- */
.crm-company-record-layout {
    /* Inherits .crm-record-layout 3-column grid */
}

@media (max-width: 991px) {
    .crm-company-record-layout {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .crm-company-record-layout>.crm-record-side:first-child {
        order: 1;
    }

    .crm-company-record-layout>.crm-record-main {
        display: contents;
    }

    .crm-company-main-identity {
        order: 2;
    }

    .crm-company-record-layout>.crm-record-side:last-child {
        order: 3;
    }

    .crm-company-main-activity {
        order: 4;
    }
}

/* --- CRM Company Detail — Spacing & Density Polish --------------------------
   Scoped exclusively to .crm-company-record-layout (Company Detail Overview)
   so nothing here can regress Deal Detail, Contact Detail, or any other page.
   Target rhythm: compact, professional, balanced — matching Deal Detail. --- */

/* 1. Card internal padding — 18px (down from 20px) */
.crm-company-record-layout .crm-card:not(.crm-card--association) {
    padding: 18px;
}

/* 2. Main column: vertical spacing between stacked cards */
.crm-company-record-layout .crm-record-main {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* 3. Left summary — tighter property rows */
.crm-company-record-layout .crm-record-side:first-child .crm-property {
    padding: 8px 0;
}

.crm-company-record-layout .crm-record-side:first-child .crm-property span {
    margin-bottom: 2px;
}

/* 4. Avatar — reduce bottom margin */
.crm-company-record-layout .crm-record-avatar {
    margin-bottom: 8px;
}

/* 5. Quick Actions — tighten surrounding space */
.crm-company-record-layout .crm-quick-actions {
    margin: 10px 0 4px;
}

/* 6. <hr> between properties and Quick Actions */
.crm-company-record-layout .crm-record-side:first-child hr {
    margin: 8px 0;
}

/* 7. h4.h6 "Quick Actions" heading */
.crm-company-record-layout .crm-record-side:first-child .h6 {
    margin-bottom: 6px;
    font-size: .8125rem;
}

/* 8. Company & e-Invoice heading — reduce mb-3 (16px → 10px) */
.crm-company-record-layout .crm-section-heading.mb-3 {
    margin-bottom: 10px !important;
}

/* 9. TIN Verification box — compact */
.crm-company-record-layout .crm-tin-verification-box {
    padding: 10px 14px;
    margin-bottom: 12px;
    border-radius: 10px;
}

.crm-company-record-layout .crm-tin-verification-meta,
.crm-company-record-layout .crm-tin-verification-help {
    margin-top: 5px;
}

/* 10. Information rows inside main column (field/value pairs) */
.crm-company-record-layout .crm-record-main .crm-property {
    padding: 7px 0;
}

.crm-company-record-layout .crm-record-main .crm-property span {
    margin-bottom: 2px;
}

/* 11. Form grid (2-column field layout) — reduce vertical gap */
.crm-company-record-layout .crm-form-grid {
    gap: 0 16px;
}

/* 12. Section divider (Registered Address, Notes) — tighter */
.crm-company-record-layout .crm-section-divider {
    margin: 12px 0 8px;
    padding-top: 12px;
}

/* 13. Recent Activity card — content-driven height */
.crm-company-record-layout .crm-timeline {
    margin-top: 2px;
}

.crm-company-record-layout .crm-timeline-item {
    grid-template-columns: 32px 1fr;
    gap: 10px;
    padding: 10px 0;
}

.crm-company-record-layout .crm-timeline-dot {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    font-size: .875rem;
}

.crm-company-record-layout .crm-card-header {
    margin-bottom: 8px;
}

/* 14. Recent Activity empty state — more compact */
.crm-company-record-layout .crm-empty-block {
    padding: 20px 16px;
}

/* 15. Related Records card — compact rows */
.crm-company-record-layout .crm-related-records-list {
    gap: 5px;
}

.crm-company-record-layout .crm-related-item {
    padding: 7px 10px;
    border-radius: 8px;
}

.crm-company-record-layout .crm-related-item__icon {
    width: 28px;
    height: 28px;
    border-radius: 7px;
    font-size: .875rem;
}

.crm-company-record-layout .crm-related-item__main {
    gap: 8px;
}

.crm-company-record-layout .crm-company-card--related .crm-card-header.mb-3 {
    margin-bottom: 8px !important;
}

/* 16. Primary Contact card — reduce mb-3 gap */
.crm-company-record-layout .crm-record-side:last-child>.crm-card.mb-3 {
    margin-bottom: 10px !important;
}

/* 17. Right column — properties inside primary contact card */
.crm-company-record-layout .crm-record-side:last-child .crm-property {
    padding: 7px 0;
}

.crm-company-record-layout .crm-record-side:last-child .crm-property span {
    margin-bottom: 2px;
}

/* 18. Footer spacing — reduce excessive bottom padding for Company pages */
.crm-page:has(.crm-company-record-layout) {
    padding-bottom: 32px;
}

/* 19. Tabs → workspace gap */
.crm-page:has(.crm-company-record-layout) .crm-tabs-nav {
    margin-bottom: 16px;
}

/* 20. Header → tabs gap */
.crm-page:has(.crm-company-record-layout) .crm-deal-header {
    margin-bottom: 16px;
}

/* 21. e-Invoice missing alert — tighter bottom margin */
.crm-company-record-layout .alert.mb-3 {
    margin-bottom: 10px !important;
}

/* 22. Activities Tab — spacing polish (Company page only) */
.crm-page:has(.crm-company-record-layout) #tab-activities .crm-card {
    padding: 18px;
}

.crm-page:has(.crm-company-record-layout) #tab-activities .crm-section-heading {
    margin-bottom: 10px;
}

.crm-page:has(.crm-company-record-layout) #tab-activities .crm-activity-composer {
    gap: 10px;
    margin-bottom: 10px;
    padding-bottom: 14px;
}

.crm-page:has(.crm-company-record-layout) #tab-activities .crm-audio-note-trigger {
    margin-bottom: 12px;
}

.crm-page:has(.crm-company-record-layout) #tab-activities .crm-activity-filters {
    margin-bottom: 6px;
}

.crm-page:has(.crm-company-record-layout) #tab-activities .crm-timeline-item {
    grid-template-columns: 32px 1fr;
    gap: 10px;
    padding: 10px 0;
}

.crm-page:has(.crm-company-record-layout) #tab-activities .crm-timeline-dot {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    font-size: .875rem;
}

.crm-page:has(.crm-company-record-layout) #tab-activities .crm-timeline {
    margin-top: 4px;
}

/* 23. Mobile — keep comfortable, don't over-tighten */
@media (max-width: 767px) {
    .crm-company-record-layout .crm-card:not(.crm-card--association) {
        padding: 16px;
    }

    .crm-company-record-layout .crm-record-main .crm-property {
        padding: 8px 0;
    }

    .crm-company-record-layout .crm-related-item {
        padding: 9px 12px;
    }

    .crm-company-record-layout .crm-tin-verification-box {
        padding: 12px 14px;
    }
}

/* --- End CRM Company Detail Spacing Polish --- */

.crm-section-divider {
    margin: 24px 0 16px;
    padding-top: 20px;
    border-top: 1px solid var(--im-color-line, #e2e8f0);
}

.crm-section-divider h4 {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--im-color-text-main, #1e293b);
    display: flex;
    align-items: center;
    gap: 8px;
}

.crm-tin-verification-box {
    background: #f8fafc;
    border: 1px solid var(--im-color-line, #e2e8f0);
    border-radius: 12px;
    padding: 16px 18px;
    margin-bottom: 20px;
}

.crm-tin-verification-box.is-valid {
    background: #f0fdf4;
    border-color: #bbf7d0;
}

.crm-tin-verification-box.is-invalid {
    background: #fef2f2;
    border-color: #fecaca;
}

.crm-tin-verification-box.is-warning {
    background: #fffbeb;
    border-color: #fde68a;
}

.crm-tin-verification-label {
    display: block;
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--im-color-text-muted, #64748b);
    font-weight: 700;
    margin-bottom: 4px;
}

.crm-tin-verification-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.crm-tin-verification-meta,
.crm-tin-verification-help {
    margin-top: 8px;
    font-size: 0.8125rem;
    line-height: 1.4;
}

.crm-related-records-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.crm-related-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: #f8fafc;
    border: 1px solid var(--im-color-line, #e2e8f0);
    border-radius: 10px;
    transition: all 0.15s ease;
}

.crm-related-item:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
}

.crm-related-item__main {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.crm-related-item__icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: #fff;
    color: var(--im-color-primary, #6366f1);
    display: grid;
    place-items: center;
    font-size: 1rem;
    border: 1px solid var(--im-color-line, #e2e8f0);
    flex-shrink: 0;
}

.crm-related-item__info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.crm-related-item__title {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--im-color-text-main, #1e293b);
}

.crm-related-item__action {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.crm-related-link {
    color: var(--im-color-text-muted, #64748b);
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 6px;
    transition: all 0.15s ease;
}

.crm-related-link:hover {
    background: #e2e8f0;
    color: var(--im-color-primary, #6366f1);
}

.crm-stage-current .crm-status {
    font-size: .8125rem;
    max-width: 100%;
    overflow-wrap: anywhere;
    white-space: normal;
}

.crm-stage-current__progress {
    margin: 0;
    font-size: .78rem;
    color: var(--im-color-text-soft);
    overflow-wrap: anywhere;
}

.crm-stage-change {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed var(--im-color-line);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.crm-stage-change__label {
    font-size: .6875rem;
    text-transform: uppercase;
    letter-spacing: .02em;
    color: var(--im-color-text-muted);
    font-weight: 700;
}

.crm-stage-change__select {
    width: 100%;
}

.crm-section-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.crm-section-heading h3 {
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 700;
}

.crm-section-heading p {
    margin: 3px 0 0;
    color: var(--im-color-text-soft);
    font-size: .8125rem;
}

.crm-section-heading>span {
    background: var(--im-color-primary-soft);
    color: var(--im-color-primary);
    border-radius: 999px;
    padding: 3px 10px;
    font-weight: 700;
    font-size: .75rem;
}

/* --- Association cards ------------------------------------------------------ */
.crm-association-card {
    margin-bottom: 0;
}

.crm-association-card>a {
    display: block;
    padding: 11px 0;
    border-bottom: 1px solid var(--im-color-line);
    text-decoration: none;
    color: var(--im-color-text);
}

.crm-association-card>a:last-child {
    border-bottom: none;
}

.crm-association-card>a strong,
.crm-association-card>a small {
    display: block;
}

.crm-association-card>a small {
    color: var(--im-color-text-soft);
    font-size: .8125rem;
}

.crm-association-item {
    padding: 11px 0;
    border-bottom: 1px solid var(--im-color-line);
}

.crm-association-item:last-child {
    border-bottom: none;
}

.crm-association-next-action {
    font-size: .8125rem;
    color: var(--im-color-primary);
    font-weight: 700;
    margin-top: 4px;
}

/* --- Activity composer / timeline ------------------------------------------ */
.crm-activity-modal__section {
    padding: 16px;
    border: 1px solid #e1e6f0;
    border-radius: 15px;
    background: #fff;
}

.crm-activity-modal__section+.crm-activity-modal__section {
    margin-top: 14px;
}

.crm-activity-modal__section-heading {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin-bottom: 13px;
}

.crm-activity-modal__section-heading h3 {
    margin: 0;
    color: #1c2942;
    font-size: .86rem;
    font-weight: 750;
}

.crm-activity-modal__section-heading p {
    margin: 3px 0 0;
    color: #79859a;
    font-size: .72rem;
    line-height: 1.45;
}

.crm-activity-modal__section-icon {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: #eef0ff;
    color: #4b46ca;
}

.crm-activity-modal__section .im-label {
    display: block;
    margin-bottom: 6px;
}

.crm-activity-modal__section textarea.im-input {
    display: block;
    width: 100%;
    min-height: 118px;
    resize: vertical;
}

.crm-activity-modal__fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 13px;
}

.crm-activity-modal__fields label {
    min-width: 0;
}

.crm-activity-modal__fields .im-select,
.crm-activity-modal__fields .im-input {
    display: block;
    width: 100%;
}

.crm-activity-modal__attachment {
    min-width: 0;
}

.crm-activity-modal__attachment .crm-audio-note-upload-label {
    display: inline-flex;
    width: auto;
    max-width: 100%;
}

.crm-activity-modal__attachment small {
    display: block;
    margin-top: 7px;
    color: #79859a;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.crm-activity-modal__upload {
    min-height: 78px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 14px;
    border: 1px dashed #bfc5ee;
    border-radius: 12px;
    background: #f8f8ff;
    color: #4943c3;
    font-size: .78rem;
    font-weight: 700;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}

.crm-activity-modal__upload:hover {
    border-color: #817be5;
    background: #f2f2ff;
}

.crm-activity-modal__upload:focus-within {
    outline: 3px solid rgba(79, 70, 229, .18);
    outline-offset: 2px;
}

.crm-activity-modal__status {
    min-height: 18px;
    margin-top: 7px;
    color: #687791;
    font-size: .72rem;
}

.crm-activity-modal__error {
    min-height: 18px;
    margin-top: 9px;
    color: #c43737;
    font-size: .74rem;
}

.crm-activity-modal .crm-audio-modal__footer .im-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
}

@media (max-width: 575.98px) {
    .crm-activity-modal__section {
        padding: 14px;
    }

    .crm-activity-modal__fields {
        grid-template-columns: 1fr;
    }

    .crm-activity-modal__upload {
        min-height: 70px;
    }
}

.crm-activity-type,
.crm-activity-filters {
    display: flex;
    overflow-x: auto;
    padding-bottom: 2px;
}

/* Note/Call/Meeting composer tabs stay a tight pill group; the All/Notes/
   Calls/.../Projects filter row is a much longer, higher-density list and
   reads as one bunched cluster at the same 7px gap — split so filters get
   real breathing room between entries. */
.crm-activity-type {
    gap: 7px;
}

.crm-activity-filters {
    gap: 14px;
}

.crm-activity-type input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.crm-activity-type span,
.crm-activity-filters button {
    display: block;
    border: 0;
    border-radius: 10px;
    padding: 8px 13px;
    background: var(--im-color-surface);
    color: var(--im-color-text-soft);
    white-space: nowrap;
    font-size: .8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .12s ease, color .12s ease;
}

.crm-activity-type span:hover,
.crm-activity-filters button:hover {
    color: var(--im-color-text);
}

.crm-activity-type input:checked+span,
.crm-activity-filters button.active {
    background: var(--im-color-primary);
    color: #fff;
}

.crm-activity-filters button:focus-visible,
.crm-activity-type input:focus-visible+span {
    outline: 2px solid var(--im-color-primary);
    outline-offset: 2px;
}

/* CRM Contact/Company Activity Timeline card breathing room. On the Deal
   page the Audio Note trigger sits inside .crm-quick-actions (which already
   has its own gap/margin) and Next Actions / Recent Activity are two
   separate cards with natural mb-3 space between them. Contact/Company
   instead stack the Audio Note button, the inline .crm-activity-composer
   form and the .crm-timeline list directly inside ONE card with no
   deliberate spacing between them at all (.crm-activity-composer had no
   rule of its own) -- this closes that gap without restructuring the page
   into new cards/sections. */
.crm-record-main .crm-audio-note-trigger {
    margin-bottom: 16px;
}

.crm-activity-composer {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 12px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--im-color-line);
}

.crm-activity-composer .text-end {
    margin-top: 2px;
}

/* Voice Note card */
.voice-note-card {
    padding: 16px;
    background: var(--im-color-surface);
    border: 1px solid var(--im-color-line);
    border-radius: 12px;
}

.voice-note-lang {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.voice-note-lang .im-select {
    max-width: 240px;
}

.voice-note-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.voice-record-btn {
    position: relative;
}

.voice-note-indicator {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
}

.voice-note-pulse {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #e53935;
    animation: voice-pulse 1.4s ease-in-out infinite;
}

@keyframes voice-pulse {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: .4;
        transform: scale(1.4);
    }
}

.voice-note-rec-label {
    font-size: .8125rem;
    font-weight: 600;
    color: #e53935;
}

.voice-note-status-msg {
    font-size: .8125rem;
    color: var(--im-color-text-soft);
    padding: 8px 0;
}

.voice-note-status-msg.voice-note-error {
    color: #c62828;
}

.voice-note-progress {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    font-size: .8125rem;
    color: var(--im-color-text-soft);
}

.voice-note-spinner {
    width: 18px;
    height: 18px;
    border: 2px solid var(--im-color-line);
    border-top-color: var(--im-color-primary);
    border-radius: 50%;
    animation: voice-spin .7s linear infinite;
}

@keyframes voice-spin {
    to {
        transform: rotate(360deg);
    }
}

.voice-note-keep-audio {
    font-size: .8125rem;
    color: var(--im-color-text-soft);
    cursor: pointer;
}

.voice-note-keep-audio input {
    width: 16px;
    height: 16px;
}

/* CRM AI Audio Note — one shared, scoped component for Company, Contact and Deal. */
.crm-audio-note-upload-label {
    margin: 0;
    cursor: pointer
}

.crm-audio-note-upload-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0
}

.crm-audio-note-upload-input:focus-visible+.crm-audio-note-upload-label,
.crm-audio-note-upload-label:focus-visible {
    outline: 3px solid rgba(79, 70, 229, .24);
    outline-offset: 3px
}

.crm-audio-modal .modal-dialog {
    width: min(960px, calc(100vw - 32px));
    max-width: 960px;
    max-height: 88vh;
    margin-left: auto;
    margin-right: auto
}

.crm-audio-modal .modal-content {
    max-height: 88vh;
    overflow: hidden;
    border: 1px solid #dfe5f1;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 28px 75px rgba(28, 39, 73, .2)
}

.crm-audio-modal__header {
    min-height: auto;
    padding: 20px 22px;
    border-bottom: 1px solid #e7ebf3;
    background: #fff;
    align-items: flex-start;
    gap: 18px
}

.crm-audio-modal__heading {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0
}

.crm-audio-modal__icon {
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border: 1px solid #d9dcff;
    border-radius: 14px;
    background: linear-gradient(145deg, #f0f1ff, #e7f5ff);
    color: #4b46ca;
    font-size: 1.15rem;
    box-shadow: 0 7px 18px rgba(75, 70, 202, .09)
}

.crm-audio-modal__heading .modal-title {
    margin: 0;
    color: #17243d;
    font-size: 1.15rem;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -.015em
}

.crm-audio-modal__heading p {
    max-width: 520px;
    margin: 4px 0 0;
    color: #687791;
    font-size: .79rem;
    line-height: 1.45
}

.crm-audio-modal__header-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 7px;
    margin-left: auto;
    flex-wrap: wrap
}

.crm-audio-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 29px;
    padding: 5px 9px;
    border: 1px solid #dcdfff;
    border-radius: 999px;
    background: #f2f2ff;
    color: #4642bd;
    font-size: .68rem;
    font-weight: 750;
    line-height: 1.2
}

.crm-audio-badge--private {
    border-color: #d6e8f2;
    background: #f0f8fc;
    color: #38677f
}

.crm-audio-modal__close,
.crm-audio-icon-btn {
    width: 38px;
    height: 38px;
    display: inline-grid;
    place-items: center;
    padding: 0;
    border: 1px solid #dfe5f1;
    border-radius: 12px;
    background: #fff;
    color: #526079;
    font-size: .92rem;
    line-height: 1;
    transition: .15s ease
}

.crm-audio-modal__close:hover,
.crm-audio-icon-btn:hover {
    border-color: #c7ccf7;
    background: #f4f4ff;
    color: #403bb7
}

.crm-audio-modal__close:disabled {
    opacity: .42;
    cursor: not-allowed
}

/* Root cause: Bootstrap Icons' own base rule ([class^="bi-"]::before) sets
   vertical-align:-.125em — correct when an icon sits inline next to text,
   but it visibly nudges an ICON-ONLY glyph off the geometric center that
   place-items:center otherwise correctly computes for this button's own
   box. Same proven fix already used by the shared .crm-btn-icon class
   elsewhere (see that rule) — scoped here rather than merged into it,
   since this is a separate, audio-note-specific class with its own sizing. */
.crm-audio-modal__close .bi,
.crm-audio-icon-btn .bi {
    display: block;
    margin: 0;
    line-height: 1
}

.crm-audio-modal__close .bi::before,
.crm-audio-icon-btn .bi::before {
    display: block;
    vertical-align: 0
}

.crm-audio-modal__body {
    min-height: 0;
    padding: 20px 22px;
    background: linear-gradient(180deg, #fbfcff 0, #fff 140px);
    overflow-y: auto;
    overscroll-behavior: contain
}

.crm-audio-info {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    gap: 10px;
    margin-bottom: 16px;
    padding: 13px 14px;
    border: 1px solid #dce2ff;
    border-radius: 14px;
    background: #f4f5ff;
    color: #3e4a69
}

.crm-audio-info>i {
    margin-top: 2px;
    color: #5149d8
}

.crm-audio-info p {
    margin: 0;
    font-size: .77rem;
    line-height: 1.55
}

.crm-audio-language {
    display: grid;
    grid-template-columns: 34px auto minmax(150px, 200px) minmax(220px, 1fr);
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    padding: 11px 13px;
    border: 1px solid #e1e6f0;
    border-radius: 14px;
    background: #fff;
}

.crm-audio-language__icon {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: #eef0ff;
    color: #4b46ca
}

.crm-audio-language__label label {
    margin: 0;
    color: #23314c;
    font-size: .76rem;
    font-weight: 750;
    white-space: nowrap
}

.crm-audio-language .im-select {
    min-height: 40px;
    height: 40px;
    padding-top: 7px;
    padding-bottom: 7px;
    font-size: .78rem
}

.crm-audio-language small {
    color: #738099;
    font-size: .7rem;
    line-height: 1.4
}

/* CRM Audio Note — Recording Source toggle (Microphone / Online Meeting).
   Mirrors .crm-audio-language's own card/icon-badge grammar directly above
   (same border/radius/background, same icon-badge treatment) rather than
   inventing a new visual language for this composer. */
.crm-audio-source {
    display: grid;
    grid-template-columns: 34px auto 1fr;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    padding: 11px 13px;
    border: 1px solid #e1e6f0;
    border-radius: 14px;
    background: #fff;
}

.crm-audio-source__icon {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: #eef0ff;
    color: #4b46ca;
}

.crm-audio-source__label {
    color: #23314c;
    font-size: .76rem;
    font-weight: 750;
    white-space: nowrap;
}

.crm-audio-source__toggle {
    display: inline-flex;
    border: 1px solid #e1e6f0;
    border-radius: 10px;
    padding: 2px;
    gap: 2px;
    background: #f6f7fb;
    justify-self: end;
}

.crm-audio-source__opt {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #59657a;
    font-size: .74rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s ease, color .15s ease;
}

.crm-audio-source__opt.is-active {
    background: #4b46ca;
    color: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .08);
}

.crm-audio-source small#audioNoteSourceHelp {
    grid-column: 2 / -1;
    color: #738099;
    font-size: .7rem;
    line-height: 1.4;
}

.crm-audio-source__consent {
    grid-column: 2 / -1;
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 4px 0 0;
    padding: 8px 10px;
    border-radius: 10px;
    background: #fff8e6;
    border: 1px solid #ffd591;
    color: #92400e;
    font-size: .7rem;
    line-height: 1.4;
}

@media (max-width: 560px) {
    .crm-audio-source {
        grid-template-columns: 34px 1fr;
    }
    .crm-audio-source__toggle {
        grid-column: 1 / -1;
        justify-self: stretch;
    }
    .crm-audio-source__opt {
        flex: 1 1 0;
        justify-content: center;
    }
}

.crm-audio-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px
}

.crm-audio-action-card {
    min-height: 235px;
    padding: 18px;
    border: 1px solid #dfe5f1;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 8px 22px rgba(31, 47, 82, .055);
    transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease
}

.crm-audio-action-card:hover {
    border-color: #c7ccf7;
    transform: translateY(-1px);
    box-shadow: 0 11px 26px rgba(31, 47, 82, .075)
}

.crm-audio-action-card__intro {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start
}

.crm-audio-action-card__icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    margin-bottom: 13px;
    border-radius: 13px;
    background: #eeefff;
    color: #4b46ca;
    font-size: 1rem
}

.crm-audio-upload .crm-audio-action-card__icon {
    background: #edf7fc;
    color: #347493
}

.crm-audio-action-card h3 {
    margin: 0 0 6px;
    color: #18253e;
    font-size: .92rem;
    font-weight: 780
}

.crm-audio-action-card p {
    margin: 0 0 14px;
    color: #6c7890;
    font-size: .76rem;
    line-height: 1.45
}

.crm-audio-action-card .im-btn {
    width: 100%;
    min-height: 42px;
    justify-content: center;
    margin-top: auto;
    border-radius: 12px;
    font-size: .76rem
}

.crm-audio-action-card small {
    display: block;
    margin-top: 9px;
    color: #8691a5;
    font-size: .67rem
}

.crm-audio-record__active {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center
}

.crm-audio-record__status {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #be2638;
    font-size: .8rem
}

.crm-audio-record__dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #e2354a;
    box-shadow: 0 0 0 5px rgba(226, 53, 74, .11);
    animation: crm-audio-pulse 1.25s ease-in-out infinite
}

.crm-audio-record__timer {
    display: flex;
    align-items: baseline;
    gap: 5px;
    margin: 13px 0 9px;
    color: #17243d
}

.crm-audio-record__timer span:first-child {
    font-size: 1.7rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums
}

.crm-audio-record__timer span:last-child {
    color: #8a95a8;
    font-size: .72rem
}

.crm-audio-wave {
    height: 33px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px
}

.crm-audio-wave i {
    width: 3px;
    height: 9px;
    border-radius: 999px;
    background: #6962dc;
    animation: crm-audio-wave .85s ease-in-out infinite
}

.crm-audio-wave i:nth-child(2n) {
    animation-delay: -.18s
}

.crm-audio-wave i:nth-child(3n) {
    animation-delay: -.36s
}

.crm-audio-wave i:nth-child(4n) {
    animation-delay: -.54s
}

.crm-audio-record__controls {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 12px
}

.crm-audio-record__controls .im-btn {
    margin: 0;
    white-space: normal
}

.crm-audio-inline-warning {
    margin: 9px 0 0;
    padding: 8px 10px;
    border-radius: 10px;
    background: #fff6df;
    color: #8b5a0c;
    font-size: .69rem;
    line-height: 1.4
}

.crm-audio-ready {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    margin-top: 14px;
    padding: 14px;
    border: 1px solid #cfd5fa;
    border-radius: 15px;
    background: #f7f7ff
}

.crm-audio-ready__icon {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: #e6e7ff;
    color: #4842c3
}

.crm-audio-ready__details {
    min-width: 0;
    display: grid;
    gap: 3px
}

.crm-audio-ready__details strong {
    overflow: hidden;
    color: #1c2942;
    font-size: .8rem;
    text-overflow: ellipsis;
    white-space: nowrap
}

.crm-audio-ready__details>span {
    color: #748099;
    font-size: .68rem
}

.crm-audio-ready__details audio {
    width: min(410px, 100%);
    height: 32px;
    margin-top: 5px
}

.crm-audio-ready__actions {
    display: flex;
    align-items: center;
    gap: 7px
}

.crm-audio-ready__actions .im-btn {
    min-height: 38px;
    border-radius: 11px;
    font-size: .72rem
}

.crm-audio-workflow {
    margin-top: 18px;
    padding: 15px 16px;
    border: 1px solid #e4e8f1;
    border-radius: 16px;
    background: #fff
}

.crm-audio-workflow>h3 {
    margin: 0 0 12px;
    color: #26334c;
    font-size: .78rem;
    font-weight: 780
}

.crm-audio-workflow__steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px
}

.crm-audio-workflow__step {
    position: relative;
    display: grid;
    grid-template-columns: 24px 26px minmax(0, 1fr);
    gap: 7px;
    align-items: start
}

.crm-audio-workflow__step:not(:last-child)::after {
    content: '\F285';
    position: absolute;
    right: -15px;
    top: 10px;
    color: #c0c7d7;
    font-family: 'bootstrap-icons';
    font-size: .65rem
}

.crm-audio-workflow__step>span {
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #4d47c9;
    color: #fff;
    font-size: .65rem;
    font-weight: 800
}

.crm-audio-workflow__step>i {
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    color: #615bd3;
    font-size: .8rem
}

.crm-audio-workflow__step strong,
.crm-audio-workflow__step small {
    display: block
}

.crm-audio-workflow__step strong {
    color: #26334c;
    font-size: .73rem
}

.crm-audio-workflow__step small {
    margin-top: 2px;
    color: #7b879b;
    font-size: .64rem;
    line-height: 1.35
}

.crm-audio-processing {
    max-width: 680px;
    margin: 24px auto;
    padding: 28px;
    text-align: center
}

.crm-audio-processing__visual {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px
}

.crm-audio-processing__ai {
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    border: 1px solid #d7d9ff;
    border-radius: 18px;
    background: linear-gradient(145deg, #f0efff, #e8f6ff);
    color: #4d47ca;
    font-size: 1.3rem;
    box-shadow: 0 10px 25px rgba(77, 71, 202, .12)
}

.crm-audio-processing h3 {
    margin: 12px 0 5px;
    color: #17243d;
    font-size: 1.05rem;
    font-weight: 800
}

.crm-audio-processing>p {
    margin: 0;
    color: #738099;
    font-size: .76rem;
    line-height: 1.5
}

.crm-audio-processing__meta {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin: 14px 0
}

.crm-audio-processing__meta>span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 9px;
    border-radius: 999px;
    background: #f0f2f7;
    color: #66738a;
    font-size: .67rem;
    font-weight: 700
}

.crm-audio-progress {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    margin: 18px 0 0;
    padding: 0;
    list-style: none
}

.crm-audio-progress li {
    min-width: 0;
    padding: 9px 5px;
    border: 1px solid #e4e8f1;
    border-radius: 10px;
    background: #fff;
    color: #929bad;
    font-size: .65rem
}

.crm-audio-progress li i {
    display: block;
    margin-bottom: 4px;
    font-size: .83rem
}

.crm-audio-progress li.is-active {
    border-color: #babefa;
    background: #f2f2ff;
    color: #4b46c8;
    font-weight: 750
}

.crm-audio-progress li.is-complete {
    border-color: #cce7da;
    background: #f1fbf6;
    color: #2f7b5c
}

.crm-audio-processing__preserved {
    display: inline-flex !important;
    align-items: center;
    gap: 7px;
    margin-top: 14px !important;
    padding: 8px 10px;
    border-radius: 10px;
    background: #eef9f4;
    color: #34755b !important;
    font-size: .68rem !important
}

.crm-audio-state-panel {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 15px;
    border: 1px solid #eed3d7;
    border-radius: 15px;
    background: #fff6f7;
    color: #71333c
}

.crm-audio-state-panel__icon {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: #fee7ea;
    color: #c53247
}

.crm-audio-state-panel h3 {
    margin: 0 0 4px;
    color: #6c2d37;
    font-size: .88rem
}

.crm-audio-state-panel p {
    margin: 0;
    color: #87525a;
    font-size: .75rem;
    line-height: 1.45
}

.crm-audio-state-panel__actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 12px
}

.crm-audio-global-error {
    margin-top: 14px
}

.crm-audio-review__complete {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 14px
}

.crm-audio-review__complete>span {
    width: 39px;
    height: 39px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: #e8f8f0;
    color: #2d805c;
    font-size: 1.05rem
}

.crm-audio-review__complete h3 {
    margin: 0;
    color: #17243d;
    font-size: 1rem
}

.crm-audio-review__complete p {
    margin: 3px 0 0;
    color: #768299;
    font-size: .73rem
}

.crm-audio-review__meta {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin: 0 0 14px
}

.crm-audio-review__meta>div {
    padding: 10px 11px;
    border: 1px solid #e4e8f1;
    border-radius: 11px;
    background: #fff
}

.crm-audio-review__meta dt {
    color: #8792a5;
    font-size: .61rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em
}

.crm-audio-review__meta dd {
    margin: 4px 0 0;
    color: #29364f;
    font-size: .72rem;
    font-weight: 700;
    overflow-wrap: anywhere
}

.crm-audio-review__section {
    margin-bottom: 13px;
    padding: 15px;
    border: 1px solid #e1e6f0;
    border-radius: 15px;
    background: #fff
}

.crm-audio-review__section-heading {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 11px
}

.crm-audio-review__section-heading h3 {
    margin: 0;
    color: #1c2942;
    font-size: .86rem
}

.crm-audio-review__section-heading p {
    margin: 3px 0 0;
    color: #79859a;
    font-size: .68rem;
    line-height: 1.4
}

.crm-audio-review__safe {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex: 0 0 auto;
    color: #39745b;
    font-size: .65rem;
    font-weight: 700
}

.crm-audio-review textarea.im-input {
    min-height: 96px;
    resize: vertical
}

.crm-audio-review textarea.crm-audio-note-transcript,
.crm-audio-review textarea.crm-audio-review-textarea {
    display: block;
    box-sizing: border-box;
    width: 100%;
    height: 360px !important;
    min-height: 360px !important;
    max-height: 55vh !important;
    padding: 24px 26px !important;
    overflow-x: hidden !important;
    overflow-y: hidden !important;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word;
    color: #26334b;
    font-size: .86rem;
    line-height: 1.65;
    resize: vertical
}

.crm-audio-review textarea.crm-audio-note-transcript:focus,
.crm-audio-review textarea.crm-audio-review-textarea:focus {
    border-color: #7771e5;
    box-shadow: 0 0 0 3px rgba(81, 73, 216, .12)
}

.crm-audio-review__field+.crm-audio-review__field {
    margin-top: 10px
}

.crm-audio-review__field small {
    display: block;
    margin-top: 4px;
    color: #7d899d;
    font-size: .67rem
}

.crm-audio-summary-warning {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 10px;
    margin-bottom: 12px;
    padding: 12px;
    border: 1px solid #f0d79c;
    border-radius: 12px;
    background: #fff9e9;
    color: #795710
}

.crm-audio-summary-warning>i {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: #fff1c9
}

.crm-audio-summary-warning strong {
    font-size: .78rem
}

.crm-audio-summary-warning p {
    margin: 3px 0;
    color: #856929;
    font-size: .7rem;
    line-height: 1.45
}

.crm-audio-summary-warning a {
    display: inline-block;
    margin-top: 6px;
    color: #5049cb;
    font-size: .7rem;
    font-weight: 700
}

.crm-audio-confirmation {
    background: #f7f8ff
}

.crm-audio-confirmation>h3 {
    margin: 0 0 10px;
    color: #26334c;
    font-size: .78rem
}

.crm-audio-confirmation dl {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 0
}

.crm-audio-confirmation dl>div {
    padding: 8px 10px;
    border-radius: 10px;
    background: #fff
}

.crm-audio-confirmation dt {
    color: #8993a5;
    font-size: .61rem;
    text-transform: uppercase
}

.crm-audio-confirmation dd {
    margin: 3px 0 0;
    color: #25324b;
    font-size: .72rem;
    font-weight: 700;
    overflow-wrap: anywhere
}

.crm-audio-decision {
    position: sticky;
    bottom: 0;
    z-index: 4;
    margin-top: 12px;
    padding: 14px;
    border: 1px solid #d9dcff;
    border-radius: 15px;
    background: #fff;
    box-shadow: 0 14px 35px rgba(32, 42, 75, .15)
}

.crm-audio-decision>div {
    display: flex;
    align-items: flex-start;
    gap: 10px
}

.crm-audio-decision>div:last-child {
    justify-content: flex-end;
    margin-top: 12px
}

.crm-audio-decision .crm-audio-state-panel__icon {
    background: #eeefff;
    color: #4d47c9
}

.crm-audio-decision h3 {
    margin: 0 0 3px;
    color: #25324b;
    font-size: .84rem
}

.crm-audio-decision p {
    margin: 0;
    color: #6f7b91;
    font-size: .73rem
}

.crm-audio-modal__footer {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 22px;
    border-top: 1px solid #e5e9f1;
    background: #fff
}

.crm-audio-modal__footer-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap
}

.crm-audio-modal__footer .im-btn {
    min-height: 40px;
    border-radius: 11px;
    font-size: .74rem
}

/* Inventory supplier-document discard confirmation. It deliberately reuses
   the current CRM action-modal shell; only destructive colour and compact
   width are scoped here. */
.sd-discard-modal .modal-dialog {
    width: min(580px, calc(100vw - 32px));
    max-width: 580px
}

.sd-discard-modal .modal-content {
    max-height: none
}

.sd-discard-modal__icon {
    border-color: #f3cdd3;
    background: #fff0f2;
    color: #c73548;
    box-shadow: none
}

.sd-discard-modal__body {
    min-height: 0;
    padding-top: 18px;
    padding-bottom: 18px;
    background: #fff
}

.sd-discard-modal__warning {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    align-items: start;
    gap: 12px;
    padding: 15px 16px;
    border: 1px solid #f1cfd5;
    border-radius: 14px;
    background: #fff5f6;
    color: #76313c
}

.sd-discard-modal__warning>i {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    background: #fee5e9;
    color: #c73548;
    font-size: 1rem
}

.sd-discard-modal__warning p {
    margin: 0;
    font-size: .78rem;
    line-height: 1.55
}

.sd-discard-modal .crm-audio-modal__footer-actions {
    margin-left: auto
}

@media (max-width:575.98px) {
    .sd-discard-modal .modal-dialog {
        width: calc(100vw - 16px)
    }

    .sd-discard-modal .modal-content {
        height: auto;
        max-height: calc(100dvh - 16px)
    }

    .sd-discard-modal .crm-audio-modal__footer {
        display: flex
    }

    .sd-discard-modal .crm-audio-modal__footer-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        width: 100%
    }
}

body.crm-audio-note-open .bos-ai-launcher,
body.crm-audio-note-open .bos-ai-window {
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important
}

.crm-audio-toast {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 1200;
    display: flex;
    align-items: center;
    gap: 9px;
    max-width: min(420px, calc(100vw - 32px));
    padding: 12px 15px;
    border: 1px solid #bfe2d0;
    border-radius: 13px;
    background: #f2fbf6;
    color: #286a4c;
    box-shadow: 0 14px 34px rgba(28, 55, 43, .16);
    font-size: .78rem;
    font-weight: 700;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity .2s ease, transform .2s ease
}

.crm-audio-toast.is-visible {
    opacity: 1;
    transform: none
}

.crm-audio-toast i {
    color: #2f8b62;
    font-size: 1rem
}

/* Generic Kunos-style auto-dismiss flash toast — same fixed bottom-right,
   fade+rise motion language as .crm-audio-toast, but for any short
   confirmation message (e.g. "Quotation template changed to Kunos Modern."),
   not audio-specific. Shown/hidden purely by JS toggling .is-visible; the
   underlying session flash message is never re-shown on refresh (JS reads
   it once via @json() and never re-reads session state). */
.crm-flash-toast {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 1200;
    display: flex;
    align-items: center;
    gap: 9px;
    max-width: min(420px, calc(100vw - 32px));
    padding: 12px 15px;
    border: 1px solid #d6d3f5;
    border-radius: 13px;
    background: #f5f4fe;
    color: #3b32a6;
    box-shadow: 0 14px 34px rgba(43, 34, 102, .16);
    font-size: .78rem;
    font-weight: 700;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity .2s ease, transform .2s ease;
    pointer-events: none
}

.crm-flash-toast.is-visible {
    opacity: 1;
    transform: none
}

.crm-flash-toast i {
    color: #4338ca;
    font-size: 1rem
}

@media(max-width:640px) {
    .crm-flash-toast {
        right: 16px;
        bottom: 16px;
        left: 16px;
        max-width: none
    }
}

.crm-audio-delete-confirm {
    flex: 1 1 100%;
    margin-top: 7px;
    padding: 11px;
    border: 1px solid #eed7a7;
    border-radius: 11px;
    background: #fff9ec
}

.crm-audio-delete-confirm p {
    margin: 0 0 8px;
    color: #73561b;
    font-size: .7rem;
    line-height: 1.4
}

.crm-audio-delete-confirm>div {
    display: flex;
    justify-content: flex-end;
    gap: 7px
}

.crm-audio-delete-confirm .im-btn {
    min-height: 34px;
    font-size: .68rem
}

@keyframes crm-audio-pulse {
    50% {
        box-shadow: 0 0 0 8px rgba(226, 53, 74, .05)
    }
}

@keyframes crm-audio-wave {

    0%,
    100% {
        height: 7px;
        opacity: .55
    }

    50% {
        height: 28px;
        opacity: 1
    }
}

@media(prefers-reduced-motion:reduce) {

    .crm-audio-wave i,
    .crm-audio-record__dot {
        animation: none
    }

    .crm-audio-action-card {
        transition: none
    }
}

@media(max-width:991px) and (min-width:768px) {

    .crm-audio-review textarea.crm-audio-note-transcript,
    .crm-audio-review textarea.crm-audio-review-textarea {
        height: 280px !important;
        min-height: 280px !important;
        max-height: 50vh !important;
        padding: 22px 24px !important
    }
}

@media(max-width:767px) {
    .crm-audio-modal .modal-dialog {
        width: calc(100vw - 16px);
        height: calc(100dvh - 16px);
        max-height: none;
        margin: 8px
    }

    .crm-audio-modal .modal-content {
        height: 100%;
        max-height: none;
        border-radius: 18px
    }

    .crm-audio-modal__header {
        padding: 15px;
        gap: 10px
    }

    .crm-audio-modal__heading {
        align-items: flex-start
    }

    .crm-audio-modal__icon {
        flex-basis: 40px;
        width: 40px;
        height: 40px;
        border-radius: 12px
    }

    .crm-audio-modal__heading .modal-title {
        font-size: 1rem
    }

    .crm-audio-modal__heading p {
        font-size: .7rem
    }

    .crm-audio-modal__header-actions {
        gap: 5px
    }

    .crm-audio-modal__header-actions .crm-audio-badge {
        display: none
    }

    .crm-audio-modal__close {
        width: 40px;
        height: 40px
    }

    .crm-audio-modal__body {
        padding: 14px
    }

    .crm-audio-info {
        font-size: .73rem
    }

    .crm-audio-language {
        grid-template-columns: 34px minmax(0, 1fr);
        gap: 8px
    }

    .crm-audio-language .im-select,
    .crm-audio-language small {
        grid-column: 1/-1
    }

    .crm-audio-language .im-select {
        width: 100%
    }

    .crm-audio-actions {
        grid-template-columns: 1fr
    }

    .crm-audio-action-card {
        min-height: 220px
    }

    .crm-audio-record__controls {
        grid-template-columns: 1fr
    }

    .crm-audio-ready {
        grid-template-columns: 38px minmax(0, 1fr)
    }

    .crm-audio-ready__actions {
        grid-column: 1/-1
    }

    .crm-audio-ready__actions .im-btn {
        flex: 1
    }

    .crm-audio-workflow__steps {
        grid-template-columns: 1fr;
        gap: 12px
    }

    .crm-audio-workflow__step:not(:last-child)::after {
        display: none
    }

    .crm-audio-progress {
        grid-template-columns: repeat(2, 1fr)
    }

    .crm-audio-processing {
        padding: 18px 5px
    }

    .crm-audio-review__meta {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .crm-audio-review__section-heading {
        display: block
    }

    .crm-audio-review__safe,
    .crm-audio-review__section-heading .crm-audio-badge {
        margin-top: 7px
    }

    .crm-audio-review textarea.crm-audio-note-transcript,
    .crm-audio-review textarea.crm-audio-review-textarea {
        height: 220px !important;
        min-height: 220px !important;
        max-height: 45vh !important;
        padding: 20px 22px !important;
        font-size: .82rem
    }

    .crm-audio-confirmation dl {
        grid-template-columns: 1fr
    }

    .crm-audio-modal__footer {
        display: grid;
        grid-template-columns: 1fr;
        padding: 11px 14px calc(11px + env(safe-area-inset-bottom))
    }

    .crm-audio-modal__footer>button,
    .crm-audio-modal__footer-actions,
    .crm-audio-modal__footer-actions .im-btn {
        width: 100%
    }

    .crm-audio-modal__footer-actions {
        display: grid;
        grid-template-columns: 1fr
    }

    .crm-audio-state-panel {
        display: grid;
        grid-template-columns: 34px 1fr
    }

    .crm-audio-state-panel__actions {
        grid-column: 1/-1;
        display: grid
    }

    .crm-audio-state-panel__actions .im-btn {
        width: 100%
    }

    .crm-audio-toast {
        right: 16px;
        bottom: 16px;
        left: 16px;
        max-width: none
    }
}

/* Quotation -> Invoice conversion (Stage C) */
.crm-convert-invoice-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 16px;
    margin: 0 0 16px;
}

.crm-convert-invoice-summary dt {
    margin-bottom: 4px;
    color: var(--im-color-text-muted);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .035em;
    text-transform: uppercase;
}

.crm-convert-invoice-summary dd {
    margin: 0;
    color: var(--im-color-text);
    font-size: .9rem;
    font-weight: 600;
}

.crm-convert-invoice-note p {
    font-size: .8125rem;
}

.crm-convert-invoice-ineligible {
    color: var(--im-color-text-soft);
    font-size: .8125rem;
}

/* Recurring plan created note (Stage D) */
.crm-recurring-plan-created-note {
    margin: 0 0 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.crm-recurring-plan-created-note a {
    font-weight: 700;
    text-decoration: underline;
}

.crm-timeline {
    margin-top: 8px;
}

.crm-timeline-item {
    display: grid;
    grid-template-columns: 36px 1fr;
    gap: 12px;
    padding: 16px 0;
    border-bottom: 1px solid var(--im-color-line);
}

.crm-timeline-item:last-child {
    border-bottom: none;
}

.crm-timeline-dot {
    width: 36px;
    height: 36px;
    border-radius: 11px;
    background: var(--im-color-primary-soft);
    color: var(--im-color-primary);
    display: grid;
    place-items: center;
    font-size: .9375rem;
}

.crm-timeline-meta {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: baseline;
}

.crm-timeline-meta strong {
    font-size: .9375rem;
}

.crm-timeline-meta time,
.crm-timeline-item small {
    font-size: .75rem;
    color: var(--im-color-text-soft);
}

/* --- Stepper (Design & QS) ------------------------------------------------- */
.crm-stepper {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: nowrap;
    overflow-x: auto;
    margin: 4px -2px 18px;
    padding: 2px;
    scrollbar-width: thin;
}

.crm-stepper__step {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: .75rem;
    font-weight: 700;
    color: var(--im-color-text-muted);
    padding: 6px 12px 6px 9px;
    border-radius: 999px;
    background: var(--im-color-surface-muted);
    white-space: nowrap;
}

.crm-stepper__dot {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--im-color-surface);
    border: 2px solid var(--im-color-line-strong);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    flex: none;
}

.crm-stepper__step.is-done {
    color: var(--im-color-success-ink);
    background: var(--im-color-success-soft);
}

.crm-stepper__step.is-done .crm-stepper__dot {
    background: var(--im-color-success);
    border-color: var(--im-color-success);
    color: #fff;
}

.crm-stepper__step.is-current {
    color: var(--im-color-primary);
    background: var(--im-color-primary-soft);
}

.crm-stepper__step.is-current .crm-stepper__dot {
    background: var(--im-color-primary);
    border-color: var(--im-color-primary);
    color: #fff;
}

.crm-stepper__connector {
    width: 14px;
    height: 2px;
    background: var(--im-color-line);
    flex: none;
}

/* --- Blueprint version list ------------------------------------------------ */
.crm-version-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 11px 0;
    border-bottom: 1px solid var(--im-color-line);
}

.crm-version-item:last-child {
    border-bottom: none;
}

.crm-version-item__badge {
    font-size: .6875rem;
    font-weight: 800;
    color: var(--im-color-primary);
}

.crm-version-collapsed {
    display: none;
}

.crm-version-toggle {
    font-size: .75rem;
    font-weight: 700;
    color: var(--im-color-text-soft);
    background: none;
    border: none;
    padding: 4px 0;
    cursor: pointer;
}

/* --- Board / Kanban -------------------------------------------------------- */
.crm-board {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    padding-bottom: 14px;
    scroll-snap-type: x proximity;
}

.crm-board-column {
    min-width: 300px;
    flex: 0 0 300px;
    background: var(--im-color-surface-muted);
    border-radius: 16px;
    padding: 12px;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
}

.crm-board-column__header {
    position: sticky;
    top: 0;
    background: var(--im-color-surface-muted);
    padding-bottom: 8px;
    z-index: 1;
    border-bottom: 2px solid var(--im-color-line);
    margin-bottom: 8px;
}

.crm-board-column__header .crm-board-column__bar {
    height: 4px;
    border-radius: 999px;
    background: var(--im-color-primary);
    margin-bottom: 8px;
}

.crm-board-card {
    background: var(--im-color-surface);
    border: 1px solid var(--im-color-line);
    border-radius: 14px;
    padding: 14px;
    margin-bottom: 10px;
    cursor: grab;
    transition: box-shadow .15s ease, transform .15s ease, opacity .15s ease;
    box-shadow: var(--im-shadow-sm);
}

.crm-board-card:hover {
    box-shadow: var(--im-shadow-md);
}

.crm-board-card.is-dragging {
    opacity: .5;
    transform: scale(.98);
}

.crm-board-column.is-drop-target {
    outline: 2px dashed var(--im-color-primary);
    outline-offset: -4px;
}

.crm-board-card__title {
    font-weight: 700;
    font-size: .9375rem;
    color: var(--im-color-text);
    text-decoration: none;
    display: block;
    margin-bottom: 4px;
}

.crm-board-card__title:hover {
    color: var(--im-color-primary);
}

.crm-board-card__meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    font-size: .8125rem;
    color: var(--im-color-text-soft);
}

.crm-board-card__avatars {
    display: flex;
    gap: -6px;
}

.crm-board-card__avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--im-color-primary-soft);
    color: var(--im-color-primary);
    display: grid;
    place-items: center;
    font-size: .6875rem;
    font-weight: 700;
    border: 2px solid var(--im-color-surface);
    margin-left: -6px;
}

.crm-board-card__avatar:first-child {
    margin-left: 0;
}

.crm-board-cards {
    min-height: 60px;
}

/* --- Pipeline settings ----------------------------------------------------- */
.crm-pipeline-layout {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}

.crm-pipeline-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.crm-pipeline-list__item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid transparent;
    background: var(--im-color-surface);
    text-decoration: none;
    color: var(--im-color-text-soft);
    font-weight: 600;
    font-size: .875rem;
    cursor: pointer;
    transition: background .12s ease, border-color .12s ease;
}

.crm-pipeline-list__item:hover {
    background: var(--im-color-surface-muted);
}

.crm-pipeline-list__item.is-active {
    background: var(--im-color-primary-soft);
    border-color: var(--im-color-primary-border);
    color: var(--im-color-primary);
}

.crm-pipeline-stages {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.crm-stage-config {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid var(--im-color-line);
    background: var(--im-color-surface);
}

.crm-stage-config__handle {
    cursor: grab;
    color: var(--im-color-text-muted);
    font-size: 1rem;
}

.crm-stage-config__color {
    width: 14px;
    height: 14px;
    border-radius: 4px;
    flex: none;
}

.crm-stage-config__name {
    font-weight: 700;
    font-size: .9375rem;
}

.crm-stage-config__meta {
    font-size: .75rem;
    color: var(--im-color-text-soft);
}

.crm-stage-config--expanded {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 16px;
}

.crm-stage-config[hidden] {
    display: none;
}

.crm-stage-config__collapsed {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
}

.crm-stage-config__collapsed .crm-stage-config__name {
    flex: 1 1 auto;
    min-width: 0;
}

.crm-stage-config__expanded-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.crm-stage-config__expanded-form .crm-form-full {
    grid-column: 1 / -1;
}

.crm-stage-config__color[data-variant="primary"] {
    background: var(--im-color-primary);
}

.crm-stage-config__color[data-variant="success"] {
    background: var(--im-color-success);
}

.crm-stage-config__color[data-variant="danger"] {
    background: var(--im-color-danger);
}

.crm-stage-config__color[data-variant="warning"] {
    background: var(--im-color-warning);
}

.crm-stage-config__color[data-variant="info"] {
    background: var(--im-color-info);
}

.crm-stage-config__color[data-variant="pending"],
.crm-stage-config__color[data-variant="in-progress"],
.crm-stage-config__color[data-variant="in_progress"] {
    background: var(--im-color-warning);
}

.crm-stage-config__color[data-variant="inactive"] {
    background: #94a3b8;
}

.crm-stage-config__color[data-variant="neutral"],
.crm-stage-config__color:not([data-variant]) {
    background: var(--im-color-text-muted);
}

.crm-board-column__bar[data-variant="primary"] {
    background: var(--im-color-primary);
}

.crm-board-column__bar[data-variant="success"] {
    background: var(--im-color-success);
}

.crm-board-column__bar[data-variant="danger"] {
    background: var(--im-color-danger);
}

.crm-board-column__bar[data-variant="warning"] {
    background: var(--im-color-warning);
}

.crm-board-column__bar[data-variant="info"] {
    background: var(--im-color-info);
}

.crm-board-column__bar[data-variant="pending"],
.crm-board-column__bar[data-variant="in-progress"],
.crm-board-column__bar[data-variant="in_progress"] {
    background: var(--im-color-warning);
}

.crm-board-column__bar[data-variant="inactive"] {
    background: #94a3b8;
}

.crm-board-column__bar[data-variant="neutral"],
.crm-board-column__bar:not([data-variant]) {
    background: var(--im-color-primary);
}

.crm-save-order-bar {
    position: sticky;
    bottom: 0;
    background: var(--im-color-surface);
    border-top: 1px solid var(--im-color-line);
    padding: 12px 16px;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin: 12px -22px -22px;
    border-radius: 0 0 18px 18px;
    box-shadow: 0 -4px 12px rgba(37, 42, 114, .06);
}

.crm-stage-add-inline {
    padding: 12px 14px;
    border: 2px dashed var(--im-color-line);
    border-radius: 14px;
}

.crm-pipeline-detail {
    display: none;
}

.crm-pipeline-detail.is-active {
    display: block;
}

.crm-pipeline-detail__name {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 800;
}

.crm-card-header .crm-pipeline-detail__name {
    font-size: 1.25rem;
    font-weight: 800;
}

.crm-pipeline-detail__desc {
    margin: 4px 0 0;
    color: var(--im-color-text-soft);
    font-size: .8125rem;
}

/* --- Empty states ---------------------------------------------------------- */
.crm-empty {
    padding: 28px;
    text-align: center;
    color: var(--im-color-text-soft);
    font-size: .875rem;
}

.crm-empty--compact {
    padding: 16px;
}

.crm-empty-block {
    text-align: center;
    padding: 32px 16px;
    color: var(--im-color-text-soft);
}

.crm-empty-block__icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: var(--im-color-surface-muted);
    color: var(--im-color-text-muted);
    display: grid;
    place-items: center;
    font-size: 1.375rem;
    margin: 0 auto 12px;
}

.crm-empty-block__title {
    font-weight: 700;
    color: var(--im-color-text);
    margin-bottom: 4px;
    font-size: .9375rem;
}

.crm-empty-block__help {
    font-size: .8125rem;
    color: var(--im-color-text-soft);
    max-width: 320px;
    margin: 0 auto;
}

.crm-empty-block__action {
    margin-top: 14px;
    display: flex;
    gap: 8px;
    justify-content: center;
    flex-wrap: wrap;
}

.crm-warning-note {
    background: var(--im-color-warning-soft);
    color: var(--im-color-warning-ink);
    border-radius: 12px;
    padding: 10px 12px;
    font-size: .8125rem;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.crm-mobile-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* --- Drawer (slide-right) -------------------------------------------------- */
.crm-drawer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .45);
    z-index: 1040;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .2s ease, visibility .2s ease;
}

.crm-drawer-overlay.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.crm-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: var(--im-drawer-width);
    max-width: 100%;
    background: var(--im-color-surface);
    z-index: 1045;
    transform: translateX(100%);
    transition: transform .25s ease;
    display: flex;
    flex-direction: column;
    box-shadow: var(--im-shadow-lg);
}

.crm-drawer.is-open {
    transform: translateX(0);
}

.crm-drawer[aria-hidden="true"] {
    visibility: hidden;
    pointer-events: none;
}

.crm-drawer.is-open[aria-hidden="false"] {
    visibility: visible;
    pointer-events: auto;
}

.crm-drawer__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--im-color-line);
}

.crm-drawer__header h3 {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 700;
}

.crm-drawer__body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 20px;
}

/* justify-content: flex-start (not flex-end) — see the later .crm-drawer__footer
   block below for why: the form actions now anchor to the LEFT, leaving the
   right side of the footer as a deliberate, unclaimed "utility/AI" zone
   instead of the buttons hugging the right edge the global Kunos AI
   launcher also occupies. */
.crm-drawer__footer {
    padding: 14px 20px;
    border-top: 1px solid var(--im-color-line);
    display: flex;
    gap: 10px;
    justify-content: flex-start;
}

/* --- Responsive ------------------------------------------------------------ */
@media (max-width: 1280px) {
    .crm-record-layout {
        grid-template-columns: 240px minmax(0, 1fr) 290px;
    }

    .crm-index-filter,
    .crm-index-filter--visits {
        grid-template-columns: repeat(3, minmax(150px, 1fr)) auto auto;
    }

    .crm-index-filter>.crm-filter-search {
        grid-column: 1 / -1;
    }

    .crm-index-filter>.crm-filter-date {
        width: 100%;
    }
}

@media (max-width: 1100px) {
    .crm-record-layout {
        grid-template-columns: 240px minmax(0, 1fr);
    }

    .crm-record-side:last-child {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
    }

    .crm-association-card {
        margin: 0;
    }

    .crm-pipeline-layout {
        grid-template-columns: 1fr;
    }

    .crm-pipeline-list {
        flex-direction: row;
        overflow-x: auto;
        gap: 8px;
        padding-bottom: 4px;
    }

    .crm-pipeline-list__item {
        flex: 0 0 auto;
    }

    .crm-company-toolbar {
        flex-wrap: wrap;
    }

    .crm-company-search {
        flex-basis: 100%;
    }

    .crm-company-filter-panel {
        flex: 1 1 100%;
    }
}

@media (max-width: 900px) {

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

    .crm-grid--3 {
        grid-template-columns: 1fr;
    }

    .crm-two-col {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 820px) {
    .crm-board-column {
        min-width: 260px;
        flex: 0 0 260px;
    }

    .crm-filter-bar {
        flex-wrap: wrap;
    }

    .crm-filter-bar .im-input {
        flex: 1 1 100%;
        min-width: 0;
    }

    .crm-metric {
        padding: 14px;
    }

    .crm-metric__value {
        font-size: 1.5rem;
    }

    .crm-company-filter-panel .im-select {
        flex: 1 1 160px;
        width: auto;
    }
}

@media (max-width: 700px) {
    .crm-page {
        padding-inline: 14px;
    }

    .crm-record-layout {
        grid-template-columns: 1fr;
    }

    .crm-record-side:last-child {
        grid-column: auto;
        display: block;
    }

    .crm-sticky-card {
        position: static;
    }

    .crm-record-main {
        grid-row: 2;
    }

    .crm-quick-actions {
        grid-template-columns: 1fr 1fr;
    }

    .crm-form-grid {
        grid-template-columns: 1fr;
    }

    .crm-page-header {
        flex-direction: column;
        align-items: stretch;
    }

    .crm-page-header__actions {
        justify-content: flex-start;
    }

    .crm-deal-header {
        flex-direction: column;
    }

    .crm-table.responsive thead {
        display: none;
    }

    .crm-table.responsive tr {
        display: block;
        border-bottom: 1px solid var(--im-color-line);
        padding: 10px;
    }

    .crm-table.responsive td {
        display: block;
        border: 0;
        padding: 4px 0;
    }

    .crm-table.responsive td[data-label]::before {
        content: attr(data-label);
        font-weight: 700;
        color: var(--im-color-text-soft);
        display: block;
        font-size: .6875rem;
        text-transform: uppercase;
    }

    .crm-index-filter,
    .crm-index-filter--visits {
        display: grid;
        grid-template-columns: 1fr;
    }

    .crm-index-filter>.crm-filter-search,
    .crm-index-filter>.bos-select-global,
    .crm-index-filter>.crm-filter-date,
    .crm-index-filter>.im-btn,
    .crm-index-filter>.crm-filter-clear {
        grid-column: auto;
        width: 100% !important;
    }

    .crm-index-filter>.crm-filter-clear {
        text-align: center;
    }

    .crm-index-table {
        min-width: 0;
    }

    .crm-board-column {
        min-width: calc(100vw - 44px);
        flex: 0 0 calc(100vw - 44px);
    }

    .crm-tabs-nav {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .crm-tabs-nav__link {
        white-space: nowrap;
    }

    .crm-company-summary {
        gap: 6px 9px;
        font-size: .7rem;
    }

    .crm-company-summary>i:nth-of-type(2) {
        display: none;
    }

    .crm-company-search {
        min-width: 0;
        flex-basis: calc(100% - 112px);
    }

    .crm-company-filter-toggle {
        display: inline-flex;
        flex: 0 0 auto;
    }

    .crm-company-filter-panel {
        display: none;
        flex: 1 1 100%;
        padding-top: 10px;
        border-top: 1px solid var(--im-color-line);
    }

    .crm-company-filter-panel.is-open {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .crm-company-filter-panel .im-select,
    .crm-company-filter-panel .im-btn {
        width: 100%;
    }

    .crm-company-filter--owner,
    .crm-company-filter-panel .crm-filter-clear {
        grid-column: 1 / -1;
    }

    .crm-company-table-scroll {
        display: none;
    }

    .crm-company-mobile-list {
        display: grid;
        gap: 10px;
        padding: 10px;
        background: var(--im-color-surface-soft);
    }

    .crm-company-mobile-card {
        padding: 14px;
        border: 1px solid var(--im-color-line);
        border-radius: 14px;
        background: var(--im-color-surface);
    }

    .crm-company-mobile-card__header,
    .crm-company-mobile-card__footer {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 10px;
    }

    .crm-company-mobile-card__header a {
        display: -webkit-box;
        overflow: hidden;
        color: var(--im-color-text);
        font-size: .92rem;
        font-weight: 800;
        text-decoration: none;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    .crm-company-mobile-card__header small {
        display: block;
        margin-top: 2px;
        color: var(--im-color-text-muted);
        font-size: .68rem;
    }

    .crm-company-mobile-card dl {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        margin: 14px 0;
    }

    .crm-company-mobile-card dl div {
        min-width: 0;
    }

    .crm-company-mobile-card dt {
        color: var(--im-color-text-muted);
        font-size: .65rem;
        text-transform: uppercase;
    }

    .crm-company-mobile-card dd {
        margin: 2px 0 0;
        overflow: hidden;
        color: var(--im-color-text);
        font-size: .77rem;
        font-weight: 700;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .crm-company-mobile-card__footer {
        align-items: center;
        padding-top: 10px;
        border-top: 1px solid var(--im-color-line);
    }

    .crm-company-mobile-card__footer>a {
        color: var(--im-color-primary);
        font-size: .76rem;
        font-weight: 800;
        text-decoration: none;
    }
}

@media (max-width: 576px) {

    .crm-grid,
    .crm-form-grid {
        grid-template-columns: 1fr;
    }

    .crm-card {
        padding: 16px;
    }

    .crm-table-wrap {
        margin: 0 -16px;
        padding: 0 16px;
    }

    .crm-mobile-actions>* {
        flex: 1 1 100%;
    }

    /* Quick Actions stays a 2-column grid at every mobile width (inherits
       the 1fr 1fr rule from the 700px breakpoint above) -- a 6-item single
       column here would be a long scrolling stack, exactly what the Quick
       Actions redesign was meant to avoid. */
    .crm-timeline-meta {
        display: block;
    }

    .crm-tabs-nav__link {
        padding: 10px 12px;
    }

    .crm-drawer {
        width: 100%;
    }
}

@media (max-width: 390px) {
    .crm-page {
        padding-inline: 10px;
    }

    .crm-page-header__title h1 {
        font-size: 1.25rem;
    }

    .crm-page-header__actions {
        flex-direction: column;
        gap: 8px;
    }

    .crm-page-header__actions .im-btn {
        width: 100%;
        justify-content: center;
    }

    .crm-filter-bar {
        flex-direction: column;
        align-items: stretch;
    }

    .crm-filter-bar .im-input,
    .crm-filter-bar .im-select,
    .crm-filter-bar .im-btn {
        width: 100%;
    }

    .crm-filter-clear {
        text-align: center;
    }

    .crm-metric__icon {
        width: 36px;
        height: 36px;
        font-size: 1rem;
    }

    .crm-metric__value {
        font-size: 1.25rem;
    }

    .crm-board-card {
        padding: 10px;
    }

    .crm-pipeline-bar {
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
    }

    .crm-pipeline-bar__step {
        border-radius: 8px;
        padding: 8px 10px;
    }

    .crm-card {
        padding: 12px;
        border-radius: 14px;
    }

    .crm-drawer__body {
        padding: 12px;
    }

    .crm-company-summary>i {
        display: none;
    }

    .crm-company-summary span {
        flex: 1 1 45%;
    }

    .crm-company-filter-panel.is-open {
        grid-template-columns: 1fr;
    }

    .crm-company-filter--owner,
    .crm-company-filter-panel .crm-filter-clear {
        grid-column: auto;
    }
}

/* Project Reports — professional analytical workspace. */
.project-reports-page {
    padding-top: 0;
    color: var(--im-color-text);
}

.project-report-filters {
    margin-bottom: 18px;
    padding: 14px 16px;
    border: 1px solid var(--im-color-line);
    border-radius: 12px;
    background: var(--im-color-surface);
}

.project-report-filters h2 {
    margin: 0 0 10px;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.project-report-filters form {
    display: grid;
    grid-template-columns: repeat(5, minmax(130px, 1fr)) auto;
    align-items: end;
    gap: 10px;
}

.project-report-filters label {
    display: grid;
    gap: 5px;
    min-width: 0;
}

.project-report-filters label>span {
    color: var(--im-color-text-soft);
    font-size: .65rem;
    font-weight: 700;
}

.project-report-filters__actions {
    display: flex;
    align-items: center;
    gap: 4px;
}

.project-report-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}

.project-report-kpis article {
    display: grid;
    gap: 2px;
    min-height: 94px;
    padding: 14px 16px;
    border: 1px solid var(--im-color-line);
    border-radius: 12px;
    background: var(--im-color-surface);
}

.project-report-kpis span {
    color: var(--im-color-text-soft);
    font-size: .64rem;
    font-weight: 800;
    letter-spacing: .055em;
    text-transform: uppercase;
}

.project-report-kpis strong {
    font-size: 1.55rem;
    line-height: 1.2;
}

.project-report-kpis strong em {
    color: var(--im-color-text-soft);
    font-size: .72rem;
    font-style: normal;
    font-weight: 700;
}

.project-report-kpis small {
    align-self: end;
    color: var(--im-color-text-muted);
    font-size: .67rem;
}

.project-report-kpis .is-attention strong {
    color: var(--im-color-danger, #dc2626);
}

.project-report-tabs {
    display: flex;
    gap: 4px;
    overflow-x: auto;
    margin-bottom: 18px;
    padding-bottom: 1px;
    border-bottom: 1px solid var(--im-color-line);
    scrollbar-width: thin;
}

.project-report-tabs button {
    flex: 0 0 auto;
    padding: 9px 13px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: var(--im-color-text-soft);
    font-size: .73rem;
    font-weight: 700;
}

.project-report-tabs button:hover,
.project-report-tabs button.active {
    border-bottom-color: var(--im-color-primary);
    color: var(--im-color-primary);
}

.project-report-content>.tab-pane>h2 {
    margin: 0 0 12px;
    font-size: .73rem;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.project-report-content>.tab-pane>h2.project-report-tab-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.project-report-tab-heading small {
    color: var(--im-color-text-muted);
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
}

/* Project Detail — always-visible description inside the collapsible
   Project Summary <summary> bar (project.description was previously only
   ever rendered inside the Overview tab-pane, so it disappeared the moment
   a visitor switched to any other tab, e.g. Task Board). Placed as a 5th
   grid item spanning the toggle's existing 4 columns, so it flows onto its
   own row underneath identity/status/progress/actions without touching
   that row's own layout — .project-summary-toggle's grid rules live in
   Modules/Projects/resources/views/show.blade.php's own <style> block,
   unchanged. */
.project-summary-toggle__description {
    grid-column: 1 / -1;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--im-color-line);
    color: var(--im-color-text-soft);
    font-size: 12.5px;
    line-height: 1.55;
}

.project-summary-toggle__description>i {
    flex-shrink: 0;
    margin-top: 2px;
    color: var(--im-color-text-muted);
    font-size: 12px;
}

.project-summary-toggle__description>span {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* grid-column:1 / -1 already spans the full row on both the desktop
   4-column grid and the 767.98px 2-column grid (see that breakpoint's own
   ".project-summary-toggle { grid-template-columns: minmax(0,1fr) auto }"
   in show.blade.php's <style> block) — no separate mobile override needed. */

/* Project Task Board — List view */
.project-task-header-count {
    color: var(--im-color-text-muted);
    font-size: .72rem;
    font-weight: 600;
}

.project-task-list-workspace {
    width: 100%;
    min-width: 0;
}

.project-task-filter-form {
    margin: 0 0 12px;
}

.project-task-filters {
    display: grid;
    gap: 9px;
    width: 100%;
    min-width: 0;
}

.project-task-filters__primary {
    display: grid;
    grid-template-columns: minmax(220px, 1.5fr) minmax(150px, 1fr) minmax(150px, 1fr) minmax(170px, 1fr) minmax(160px, 1fr);
    gap: 8px;
    align-items: center;
    min-width: 0;
}

.project-task-filters__secondary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-width: 0;
}

.project-task-secondary-controls {
    display: grid;
    grid-template-columns: minmax(132px, auto) minmax(180px, 220px);
    gap: 8px;
    align-items: center;
    min-width: 0;
}

.project-task-filters__primary>*,
.project-task-secondary-controls>* {
    min-width: 0;
}

.project-task-filters .im-input,
.project-task-filters .im-select {
    width: 100%;
    min-width: 0;
}

.project-task-filter-search {
    position: relative;
    min-width: 0;
}

.project-task-filter-search>i {
    position: absolute;
    top: 50%;
    left: 12px;
    z-index: 1;
    color: var(--im-color-text-muted);
    transform: translateY(-50%);
    pointer-events: none;
}

/* !important required: the global `.im-input { padding: 10px 18px !important; }`
   rule sits earlier in this file and otherwise silently wins over this
   plain (non-!important) padding-left, leaving no room for the icon above
   and causing it to overlap the placeholder text — same root cause already
   fixed once for `.inv-cat-search-wrap .inv-cat-toolbar-search` elsewhere
   in this file; same fix shape here. */
.project-task-filter-search .im-input {
    width: 100%;
    padding-left: 34px !important;
}

.project-task-date-filter,
.project-task-sort {
    position: relative;
    margin: 0;
}

.project-task-date-filter>span,
.project-task-sort>span {
    position: absolute;
    top: -7px;
    left: 9px;
    z-index: 1;
    padding: 0 4px;
    background: var(--im-color-surface);
    color: var(--im-color-text-muted);
    font-size: .58rem;
    font-weight: 700;
    letter-spacing: .035em;
    text-transform: uppercase;
}

.project-task-more-filters {
    position: relative;
}

.project-task-more-filters>summary {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding-inline: 10px;
    list-style: none;
    white-space: nowrap;
    cursor: pointer;
}

.project-task-more-filters>summary::-webkit-details-marker {
    display: none;
}

.project-task-more-filters__panel {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 30;
    width: 230px;
    padding: 14px;
    border: 1px solid var(--im-color-line);
    border-radius: 10px;
    background: var(--im-color-surface);
    box-shadow: 0 12px 28px rgba(15, 23, 42, .12);
}

.project-task-more-filters__panel label {
    display: grid;
    gap: 6px;
    margin: 0;
    color: var(--im-color-text-soft);
    font-size: .68rem;
    font-weight: 700;
}

.project-task-filter-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    white-space: nowrap;
}

.project-task-filter-actions .im-btn {
    min-width: 0;
    padding-inline: 12px;
}

#main .project-task-list-table-wrap {
    width: 100%;
    min-width: 0;
    overflow: visible;
    border: 1px solid var(--im-color-line);
    border-radius: 10px;
    background: var(--im-color-surface);
}

#main .project-task-list-table {
    width: 100%;
    min-width: 0;
    table-layout: fixed;
    margin: 0;
}

#main .project-task-list-table thead th {
    padding: 8px 10px !important;
    border-bottom: 1px solid var(--im-color-line);
    background: var(--im-color-surface-soft);
    color: var(--im-color-text-muted);
    font-size: .63rem !important;
    font-weight: 800;
    letter-spacing: .045em;
    white-space: nowrap;
}

#main .project-task-list-table tbody td {
    overflow: hidden;
    padding: 8px 10px !important;
    border-color: var(--im-color-line);
    vertical-align: middle;
    font-size: .75rem !important;
}

#main .project-task-list-table th:nth-child(1) {
    width: 24%;
}

#main .project-task-list-table th:nth-child(2) {
    width: 18%;
}

#main .project-task-list-table th:nth-child(3) {
    width: 17%;
}

#main .project-task-list-table th:nth-child(4) {
    width: 10%;
}

#main .project-task-list-table th:nth-child(5) {
    width: 15%;
}

#main .project-task-list-table th:nth-child(6) {
    width: 11%;
}

#main .project-task-list-table th:nth-child(7) {
    width: 5%;
}

.project-task-title-cell>a {
    display: -webkit-box;
    overflow: hidden;
    color: var(--im-color-text);
    font-weight: 700;
    line-height: 1.3;
    text-decoration: none;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.project-task-title-cell>a:hover {
    color: var(--im-color-primary);
}

.project-task-title-cell>small {
    display: block;
    margin-top: 2px;
    color: var(--im-color-text-muted);
    font-size: .65rem;
}

.project-task-title-cell .im-chip {
    margin-left: 5px;
}

.project-task-assignee {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
}

.project-task-assignee>span:last-child {
    overflow: hidden;
    max-width: 135px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.project-task-avatar {
    display: inline-grid;
    flex: 0 0 28px;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--im-color-primary-soft);
    color: var(--im-color-primary);
    font-size: .68rem;
    font-weight: 800;
}

.project-task-schedule {
    color: var(--im-color-text-soft);
    white-space: nowrap;
}

.project-task-schedule i {
    margin: 0 3px;
    font-size: .65rem;
}

.project-task-schedule.is-overdue {
    color: var(--im-color-danger);
    font-weight: 700;
}

.project-task-progress-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
}

.project-task-progress {
    flex: 0 0 82px;
    width: 82px;
    height: 6px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--im-color-surface-muted);
}

.project-task-progress span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--im-color-primary);
}

.project-task-progress-wrap small {
    min-width: 30px;
    color: var(--im-color-text-soft);
    font-weight: 700;
}

.project-task-actions-cell {
    overflow: visible !important;
    text-align: right;
}

.project-task-actions-cell .dropdown {
    display: inline-block;
}

.project-task-actions-cell .dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .75rem;
}

.project-task-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 10px;
    color: var(--im-color-text-muted);
    font-size: .72rem;
}

.project-task-pagination nav {
    margin-left: auto;
}

.project-task-empty {
    display: grid;
    justify-items: center;
    gap: 7px;
    padding: 34px 20px;
    border: 1px solid var(--im-color-line);
    border-radius: 10px;
    background: var(--im-color-surface);
    text-align: center;
}

.project-task-empty>i {
    color: var(--im-color-primary);
    font-size: 1.5rem;
}

.project-task-empty p {
    margin: 0 0 4px;
    color: var(--im-color-text-muted);
    font-size: .78rem;
}

@media (max-width:1199.98px) {
    .project-task-filters__primary {
        grid-template-columns: minmax(240px, 1.5fr) repeat(2, minmax(150px, 1fr));
    }

    .project-task-filter-search {
        grid-column: span 1;
    }

    .project-task-filters__primary .project-task-date-filter {
        grid-column: span 1;
    }

    #main .project-task-list-table-wrap {
        overflow-x: auto;
    }

    #main .project-task-list-table {
        min-width: 920px;
    }
}

@media (max-width:767.98px) {
    .project-task-filters__primary {
        grid-template-columns: 1fr 1fr;
    }

    .project-task-filter-search {
        grid-column: 1 / -1;
    }

    .project-task-filters__secondary {
        align-items: stretch;
        flex-direction: column;
        gap: 8px;
    }

    .project-task-secondary-controls {
        grid-template-columns: 1fr 1fr;
        width: 100%;
    }

    .project-task-filter-actions {
        width: 100%;
    }

    .project-task-filter-actions .im-btn {
        flex: 1;
    }

    .project-task-more-filters__panel {
        position: fixed;
        top: auto;
        right: 12px;
        bottom: 76px;
        left: 12px;
        width: auto;
    }

    #main .project-task-list-table-wrap {
        overflow: visible;
        border: 0;
        background: transparent;
    }

    #main .project-task-list-table {
        display: block;
        min-width: 0;
        table-layout: auto;
        background: transparent;
    }

    .project-task-list-table thead {
        display: none;
    }

    .project-task-list-table tbody {
        display: grid;
        gap: 9px;
    }

    .project-task-list-table tr {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 7px 14px;
        padding: 12px;
        border: 1px solid var(--im-color-line);
        border-radius: 10px;
        background: var(--im-color-surface);
    }

    #main .project-task-list-table td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        width: 100%;
        overflow: visible;
        padding: 0 !important;
        border: 0 !important;
        text-align: right;
    }

    .project-task-list-table td::before {
        content: attr(data-label);
        flex: 0 0 auto;
        color: var(--im-color-text-muted);
        font-size: .6rem;
        font-weight: 800;
        letter-spacing: .04em;
        text-transform: uppercase;
    }

    .project-task-list-table .project-task-title-cell {
        grid-column: 1 / -1;
        display: block;
        text-align: left;
    }

    .project-task-list-table .project-task-title-cell::before {
        display: none;
    }

    .project-task-list-table .project-task-title-cell>a {
        display: inline;
    }

    .project-task-list-table .project-task-title-cell>small {
        display: block;
    }

    .project-task-list-table .project-task-actions-cell {
        justify-content: flex-end;
    }

    .project-task-list-table .project-task-actions-cell::before {
        display: none;
    }

    .project-task-assignee>span:last-child {
        max-width: 100px;
    }

    .project-task-progress {
        flex-basis: 66px;
        width: 66px;
    }

    .project-task-pagination {
        align-items: flex-start;
        flex-direction: column;
    }

    .project-task-pagination nav {
        margin-left: 0;
        max-width: 100%;
    }
}

@media (max-width:430px) {

    .project-task-filters__primary,
    .project-task-secondary-controls {
        grid-template-columns: 1fr;
    }

    .project-task-filter-search,
    .project-task-filters__primary .project-task-date-filter {
        grid-column: 1;
    }

    .project-task-list-table tr {
        grid-template-columns: 1fr;
    }
}

.project-report-overview-grid {
    display: grid;
    grid-template-columns: minmax(0, 2.4fr) minmax(220px, 1fr);
    gap: 14px;
    margin-bottom: 20px;
}

.project-report-surface,
.project-report-health {
    border: 1px solid var(--im-color-line);
    border-radius: 12px;
    background: var(--im-color-surface);
}

.project-report-surface,
.project-report-health {
    padding: 16px;
}

.project-report-surface h3,
.project-report-health h3 {
    margin: 0 0 14px;
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .045em;
    text-transform: uppercase;
}

.project-status-list {
    display: grid;
    gap: 13px;
}

.project-status-list>div {
    display: grid;
    grid-template-columns: 110px 28px minmax(80px, 1fr);
    align-items: center;
    gap: 10px;
    font-size: .73rem;
}

.project-status-list strong {
    text-align: right;
}

.project-status-list progress,
.project-report-progress progress {
    width: 100%;
    height: 7px;
    overflow: hidden;
    border: 0;
    border-radius: 999px;
    background: var(--im-color-canvas);
}

.project-status-list progress::-webkit-progress-bar,
.project-report-progress progress::-webkit-progress-bar {
    background: var(--im-color-canvas);
}

.project-status-list progress::-webkit-progress-value,
.project-report-progress progress::-webkit-progress-value {
    border-radius: 999px;
    background: var(--im-color-primary);
}

.project-status-list progress::-moz-progress-bar,
.project-report-progress progress::-moz-progress-bar {
    border-radius: 999px;
    background: var(--im-color-primary);
}

.project-report-health {
    display: grid;
    align-content: start;
    gap: 0;
}

.project-report-health>div {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 10px 0;
    border-top: 1px solid var(--im-color-line);
}

.project-report-health>div strong {
    min-width: 28px;
    font-size: 1.05rem;
}

.project-report-health>div span {
    color: var(--im-color-text-soft);
    font-size: .72rem;
}

.project-report-health .is-danger strong {
    color: var(--im-color-danger, #dc2626);
}

.project-report-table-section {
    min-width: 0;
    margin-top: 2px;
}

.project-report-section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 0 9px;
}

.project-report-section-heading h3 {
    margin: 0;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.project-report-section-heading span {
    color: var(--im-color-text-muted);
    font-size: .67rem;
}

.project-report-table-wrap,
.project-report-list-wrap {
    overflow: hidden;
    border: 1px solid var(--im-color-line);
    border-radius: 9px;
    background: var(--im-color-surface);
}

.project-report-table-wrap table {
    width: 100%;
    min-width: 680px;
    border-collapse: collapse;
}

.project-report-table-wrap th,
.project-report-table-wrap td {
    padding: 9px 13px;
    border-bottom: 1px solid var(--im-color-line);
    text-align: left;
    font-size: .72rem;
}

.project-report-table-wrap--dense th,
.project-report-table-wrap--dense td {
    padding-top: 8px;
    padding-bottom: 8px;
}

.project-report-table-wrap th {
    background: var(--im-color-surface-muted);
    color: var(--im-color-text-muted);
    font-size: .61rem;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.project-report-table-wrap tbody tr:last-child td {
    border-bottom: 0;
}

.project-report-table-wrap td a,
.project-report-value-row a {
    color: var(--im-color-text);
    font-weight: 700;
    text-decoration: none;
}

.project-report-table-wrap td small {
    display: block;
    margin-top: 1px;
    color: var(--im-color-text-muted);
    font-size: .61rem;
}

.project-report-status {
    display: inline-flex;
    padding: 3px 7px;
    border-radius: 999px;
    background: var(--im-color-primary-soft);
    color: var(--im-color-primary);
    font-size: .62rem;
    font-weight: 700;
}

.project-report-progress {
    display: grid;
    grid-template-columns: minmax(80px, 1fr) 38px;
    align-items: center;
    gap: 8px;
    min-width: 140px;
}

.project-report-progress strong {
    text-align: right;
    font-size: .66rem;
}

.project-report-empty {
    padding: 22px !important;
    color: var(--im-color-text-muted);
    text-align: center !important;
    font-size: .72rem;
}

.project-report-two-column {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.project-report-value-row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 9px 12px;
    border-top: 1px solid var(--im-color-line);
    font-size: .72rem;
}

.project-report-value-row:first-child {
    border-top: 0;
}

.project-report-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 11px 0 0;
    color: var(--im-color-text-muted);
    font-size: .67rem;
}

.project-report-pagination .pagination {
    gap: 5px;
    margin: 0;
}

.project-report-pagination .page-link {
    display: grid;
    place-items: center;
    min-width: 31px;
    height: 31px;
    padding: 4px 8px;
    border: 1px solid var(--im-color-line);
    border-radius: 8px;
    background: var(--im-color-surface);
    color: var(--im-color-primary);
    font-size: .68rem;
    font-weight: 700;
}

.project-report-pagination .page-item.active .page-link {
    border-color: var(--im-color-primary);
    background: var(--im-color-primary);
    color: #fff;
}

.project-report-pagination .page-item.disabled .page-link {
    opacity: .45;
}

.project-report-activity>div {
    display: grid;
    grid-template-columns: 8px minmax(0, 1fr) auto;
    gap: 10px;
    padding: 11px 0;
    border-top: 1px solid var(--im-color-line);
}

.project-report-activity>div {
    padding-right: 12px;
    padding-left: 12px;
}

.project-report-activity>div:first-child {
    border-top: 0;
}

.project-report-activity>div>i {
    width: 7px;
    height: 7px;
    margin-top: 5px;
    border-radius: 50%;
    background: var(--im-color-primary);
}

.project-report-activity p {
    display: grid;
    gap: 2px;
    margin: 0;
    font-size: .72rem;
}

.project-report-activity p span,
.project-report-activity time {
    color: var(--im-color-text-muted);
    font-size: .63rem;
}

@media (max-width:1199.98px) {
    .project-report-filters form {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .project-report-filters__actions {
        justify-content: flex-end;
    }
}

@media (max-width:767.98px) {
    .project-report-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .project-report-overview-grid,
    .project-report-two-column {
        grid-template-columns: 1fr;
    }

    .project-report-filters form {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .project-report-filters__actions {
        grid-column: 1/-1;
    }
}

@media (max-width:479.98px) {
    .project-report-kpis article {
        min-height: 86px;
        padding: 12px;
    }

    .project-report-kpis strong {
        font-size: 1.3rem;
    }

    .project-report-filters form {
        grid-template-columns: 1fr;
    }

    .project-report-filters__actions {
        grid-column: auto;
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .project-status-list>div {
        grid-template-columns: 82px 24px minmax(60px, 1fr);
    }

    .project-report-pagination {
        align-items: flex-start;
        flex-direction: column;
    }

    .project-report-pagination .pagination {
        flex-wrap: wrap;
    }
}

.project-report-pdf-modal .modal-header {
    align-items: flex-start;
}

.project-report-pdf-modal .modal-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 800;
}

.project-report-pdf-modal .modal-header p {
    margin: 3px 0 0;
    color: var(--im-color-text-soft);
    font-size: .72rem;
}

.project-report-pdf-field {
    display: grid;
    gap: 6px;
    margin-bottom: 14px;
}

.project-report-pdf-field>span,
.project-report-pdf-filters strong {
    font-size: .68rem;
    font-weight: 800;
}

.project-report-pdf-filters {
    display: grid;
    gap: 3px;
    padding: 10px 12px;
    border-radius: 9px;
    background: var(--im-color-surface-muted);
}

.project-report-pdf-filters span {
    color: var(--im-color-text-soft);
    font-size: .69rem;
}

/* Project List — compact accepted-quotation conversion queue. */
.project-conversion-queue {
    overflow: hidden;
    border: 1px solid var(--im-color-line);
    border-radius: 14px;
    background: var(--im-color-surface);
}

.project-conversion-queue__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 13px 16px;
    border-bottom: 1px solid var(--im-color-line);
}

.project-conversion-queue__header h2 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: var(--im-color-text);
    font-size: .88rem;
    font-weight: 800;
}

.project-conversion-queue__header h2 i {
    color: var(--im-color-primary);
}

.project-conversion-queue__header p {
    margin: 3px 0 0;
    color: var(--im-color-text-soft);
    font-size: .7rem;
}

.project-conversion-queue__count {
    flex: 0 0 auto;
    padding: 4px 9px;
    border-radius: 999px;
    background: var(--im-color-primary-soft);
    color: var(--im-color-primary);
    font-size: .68rem;
    font-weight: 800;
}

.project-conversion-list {
    max-height: 310px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
}

.project-conversion-row {
    display: grid;
    grid-template-columns: minmax(250px, 1.25fr) minmax(250px, .85fr) auto;
    align-items: center;
    gap: 18px;
    min-height: 86px;
    padding: 12px 16px;
}

.project-conversion-row+.project-conversion-row {
    border-top: 1px solid var(--im-color-line);
}

.project-conversion-row__identity {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.project-conversion-row__identity a {
    width: fit-content;
    color: var(--im-color-primary);
    font-size: .76rem;
    font-weight: 800;
    text-decoration: none;
}

.project-conversion-row__identity strong {
    overflow: hidden;
    color: var(--im-color-text);
    font-size: .82rem;
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.project-conversion-row__identity span {
    overflow: hidden;
    color: var(--im-color-text-soft);
    font-size: .7rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.project-conversion-row__meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(100px, 1fr));
    gap: 14px;
    margin: 0;
}

.project-conversion-row__meta dt {
    color: var(--im-color-text-muted);
    font-size: .61rem;
    font-weight: 800;
    letter-spacing: .035em;
    text-transform: uppercase;
}

.project-conversion-row__meta dd {
    margin: 3px 0 0;
    color: var(--im-color-text);
    font-size: .76rem;
    font-weight: 700;
    white-space: nowrap;
}

.project-conversion-row__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    white-space: nowrap;
}

.project-conversion-empty {
    display: grid;
    gap: 3px;
    padding: 17px 16px;
}

.project-conversion-empty strong {
    color: var(--im-color-text);
    font-size: .78rem;
}

.project-conversion-empty span {
    color: var(--im-color-text-soft);
    font-size: .7rem;
}

@media (max-width: 991.98px) {
    .project-conversion-row {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .project-conversion-row__meta {
        grid-column: 1;
    }

    .project-conversion-row__actions {
        grid-column: 2;
        grid-row: 1 / span 2;
    }
}

@media (max-width: 575.98px) {
    .project-conversion-queue__header {
        align-items: flex-start;
    }

    .project-conversion-queue__header p {
        max-width: 30ch;
    }

    .project-conversion-row {
        grid-template-columns: 1fr;
        gap: 11px;
    }

    .project-conversion-row__identity strong,
    .project-conversion-row__identity span {
        white-space: normal;
    }

    .project-conversion-row__meta,
    .project-conversion-row__actions {
        grid-column: 1;
        grid-row: auto;
    }

    .project-conversion-row__actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .project-conversion-row__actions .im-btn {
        justify-content: center;
        width: 100%;
    }
}

@media (max-width: 390px) {
    .project-conversion-queue__header {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        padding: 12px;
    }

    .project-conversion-queue__header p {
        grid-column: 1 / -1;
    }

    .project-conversion-row {
        padding: 12px;
    }

    .project-conversion-row__meta {
        gap: 9px;
    }

    .project-conversion-row__actions {
        grid-template-columns: 1fr;
    }
}

/* --- CRM final workspace consolidation ------------------------------------ */
.crm-page {
    width: 100%;
    max-width: 100%;
    padding-inline: clamp(14px, 2.2vw, 32px);
    overflow-x: clip;
}

.crm-page-header {
    margin-bottom: 20px;
    padding: 2px 0 18px;
    border-bottom: 1px solid var(--im-color-line);
}

.crm-page-header__breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
}

.crm-page-header__separator {
    color: var(--im-color-text-muted);
}

.crm-page-header__badges {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.crm-metrics-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}

.crm-metric {
    position: relative;
    min-height: 150px;
}

.crm-metric__value--money {
    font-size: clamp(1.05rem, 1.5vw, 1.45rem);
}

.crm-dashboard-primary,
.crm-dashboard-secondary {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(280px, .8fr);
    gap: 18px;
    margin-bottom: 18px;
}

.crm-stage-overview {
    display: grid;
    gap: 6px;
}

.crm-stage-overview__row {
    display: grid;
    grid-template-columns: minmax(170px, 1fr) auto;
    gap: 8px 18px;
    padding: 12px;
    border-radius: 12px;
    color: var(--im-color-text);
    text-decoration: none;
}

.crm-stage-overview__row:hover {
    background: var(--im-color-primary-soft);
}

.crm-stage-overview__row>span:first-child {
    display: grid;
}

.crm-stage-overview__row small {
    color: var(--im-color-text-soft);
}

.crm-stage-overview__value {
    font-weight: 800;
}

.crm-stage-overview__track {
    grid-column: 1 / -1;
    width: 100%;
    height: 7px;
    overflow: hidden;
    border: 0;
    border-radius: 999px;
    background: var(--im-color-line);
}

.crm-stage-overview__track::-webkit-progress-bar {
    background: var(--im-color-line);
}

.crm-stage-overview__track::-webkit-progress-value {
    border-radius: inherit;
    background: var(--im-color-primary);
}

.crm-stage-overview__track::-moz-progress-bar {
    border-radius: inherit;
    background: var(--im-color-primary);
}

.crm-attention-row {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    min-height: 54px;
    padding: 9px 12px;
    border-bottom: 1px solid var(--im-color-line);
    color: var(--im-color-text);
    text-decoration: none;
}

.crm-attention-row:last-child {
    border-bottom: 0;
}

.crm-attention-row i {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 10px;
    color: var(--im-color-primary);
    background: var(--im-color-primary-soft);
}

/* Zero-count rows stay visible but subdued; a count > 0 gets the emphasis
   treatment — "nothing requires attention" should never dominate the
   screen, but a real pending item should still stand out. */
.crm-attention-row strong {
    color: var(--im-color-text-soft);
}

.crm-attention-row--active strong {
    color: var(--im-color-primary);
}

.crm-attention-row--active i {
    color: var(--im-color-warning-ink);
    background: var(--im-color-warning-soft);
}

/* CRM Dashboard redesign — four-KPI grid, grouped Sales Pipeline, flat-row
   Recent Deals / Recent Activity. Reuses .crm-card/.crm-metric/
   .crm-attention-row/.crm-empty-block/.crm-status wholesale; scoped so the
   6-column .crm-metrics-grid used elsewhere (Recurring Plans, Invoices) is
   never affected. */
.crm-metrics-grid--four {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.crm-metrics-grid--four .crm-metric {
    min-height: 108px;
}

.crm-metrics-grid--four .crm-metric__icon {
    width: 34px;
    height: 34px;
    font-size: 1rem;
    margin-bottom: 6px;
}

.crm-metrics-grid--four .crm-metric__value {
    font-size: 1.5rem;
}

.crm-pipeline-group {
    margin-bottom: 18px;
}

.crm-pipeline-group:last-child {
    margin-bottom: 0;
}

.crm-pipeline-group__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding: 2px 12px 8px;
    border-bottom: 1px solid var(--im-color-line);
    margin-bottom: 4px;
}

.crm-pipeline-group__header strong {
    font-size: .8125rem;
    font-weight: 800;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--im-color-text);
}

.crm-pipeline-group__header span {
    font-size: .75rem;
    color: var(--im-color-text-soft);
}

.crm-pipeline-group__footer {
    display: block;
    padding: 8px 12px 2px;
}

.crm-flat-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto auto;
    align-items: center;
    gap: 14px;
    padding: 11px 22px;
    border-bottom: 1px solid var(--im-color-line);
    color: var(--im-color-text);
    text-decoration: none;
}

.crm-flat-row:last-child {
    border-bottom: 0;
}

.crm-flat-row:hover {
    background: var(--im-color-primary-soft);
}

.crm-flat-row__main {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.crm-flat-row__main strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.crm-flat-row__main small {
    color: var(--im-color-text-soft);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
}

.crm-flat-row__value {
    font-weight: 700;
    white-space: nowrap;
}

.crm-flat-row__meta {
    color: var(--im-color-text-soft);
    font-size: .8125rem;
    white-space: nowrap;
}

.crm-flat-row--activity {
    grid-template-columns: 8px minmax(0, 1fr) auto;
    padding: 10px 22px;
    cursor: default;
}

.crm-activity-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--im-color-primary);
}

.crm-empty-block--compact {
    padding: 18px 16px;
}

.crm-empty-block--compact .crm-empty-block__help {
    display: block;
    margin-bottom: 0;
}

.crm-empty-block--compact .crm-empty-block__action {
    margin-top: 12px;
}

/* CRM Dashboard final refinement — cohesive workspace surfaces, one active
   Pipeline, compact focus/deal/activity rows. Dashboard-scoped so the shared
   CRM cards and tables used by record pages remain unchanged. */
.crm-metrics-grid--four {
    gap: 12px;
    margin-bottom: 22px;
}

.crm-metrics-grid--four .crm-metric {
    min-height: 90px;
    padding: 13px 15px;
    border-radius: 15px;
    box-shadow: none;
}

.crm-metrics-grid--four .crm-metric__icon {
    position: absolute;
    top: 13px;
    right: 14px;
    width: 30px;
    height: 30px;
    margin: 0;
    border-radius: 9px;
    font-size: .875rem;
}

.crm-metrics-grid--four .crm-metric__label {
    padding-right: 36px;
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .035em;
    text-transform: uppercase;
}

.crm-metrics-grid--four .crm-metric__value {
    margin-top: 2px;
    font-size: 1.42rem;
}

.crm-metrics-grid--four .crm-metric__support,
.crm-metrics-grid--four .crm-metric__link {
    margin-top: auto;
    font-size: .7rem;
}

.crm-dashboard-workspace {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(270px, 3fr);
    align-items: start;
    gap: 20px;
    margin-bottom: 24px;
}

.crm-dashboard-surface {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--im-color-line);
    border-radius: 15px;
    background: var(--im-color-surface);
}

.crm-dashboard-surface__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-height: 52px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--im-color-line);
}

.crm-dashboard-surface__header h3 {
    margin: 0;
    color: var(--im-color-text);
    font-size: .84rem;
    font-weight: 800;
    letter-spacing: .025em;
    text-transform: uppercase;
}

.crm-dashboard-surface__header a {
    color: var(--im-color-primary);
    font-size: .76rem;
    font-weight: 750;
    text-decoration: none;
}

.crm-pipeline-tabs {
    display: flex;
    gap: 4px;
    overflow-x: auto;
    padding: 10px 14px 0;
    border-bottom: 1px solid var(--im-color-line);
    scrollbar-width: thin;
}

.crm-pipeline-tab {
    flex: 0 0 auto;
    padding: 8px 11px 9px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: var(--im-color-text-soft);
    font-size: .75rem;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
}

.crm-pipeline-tab:hover,
.crm-pipeline-tab:focus-visible {
    color: var(--im-color-primary);
}

.crm-pipeline-tab.is-active {
    border-bottom-color: var(--im-color-primary);
    color: var(--im-color-primary);
}

.crm-pipeline-panel[hidden] {
    display: none;
}

.crm-pipeline-summary {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 16px;
    padding: 15px 18px 10px;
}

.crm-pipeline-summary>div>span,
.crm-pipeline-summary dt {
    color: var(--im-color-text-muted);
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .035em;
    text-transform: uppercase;
}

.crm-pipeline-summary>div>strong {
    display: block;
    margin-top: 3px;
    color: var(--im-color-text);
    font-size: .98rem;
}

.crm-pipeline-summary dl {
    display: flex;
    gap: 22px;
    margin: 0;
    text-align: right;
}

.crm-pipeline-summary dd {
    margin: 2px 0 0;
    color: var(--im-color-text);
    font-size: .85rem;
    font-weight: 750;
}

.crm-pipeline-overview .crm-stage-overview {
    gap: 0;
    padding: 2px 8px 6px;
}

.crm-pipeline-overview .crm-stage-overview__row {
    padding: 9px 10px;
    border-radius: 9px;
}

.crm-pipeline-overview .crm-stage-overview__row+.crm-stage-overview__row {
    border-top: 1px solid var(--im-color-line);
}

.crm-pipeline-overview .crm-stage-overview__row strong {
    font-size: .8rem;
    font-weight: 700;
}

.crm-pipeline-overview .crm-stage-overview__row small {
    font-size: .68rem;
}

.crm-pipeline-overview .crm-stage-overview__value {
    font-size: .76rem;
    font-weight: 700;
}

.crm-pipeline-overview .crm-stage-overview__track {
    height: 4px;
}

.crm-pipeline-panel__footer {
    display: flex;
    justify-content: flex-end;
    padding: 10px 18px 13px;
    border-top: 1px solid var(--im-color-line);
}

.crm-todays-focus {
    padding-bottom: 4px;
}

.crm-focus-section {
    padding: 14px 16px;
}

.crm-focus-section+.crm-focus-section {
    border-top: 1px solid var(--im-color-line);
}

.crm-focus-section h4 {
    margin: 0 0 8px;
    color: var(--im-color-text-muted);
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.crm-focus-row,
.crm-focus-meeting {
    display: grid;
    color: var(--im-color-text);
    text-decoration: none;
}

.crm-focus-row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    padding: 8px 0;
    color: var(--im-color-text-soft);
    font-size: .76rem;
}

.crm-focus-row+.crm-focus-row,
.crm-focus-meeting+.crm-focus-meeting {
    border-top: 1px solid var(--im-color-line);
}

.crm-focus-row strong {
    color: var(--im-color-text-muted);
}

.crm-focus-row.is-active {
    color: var(--im-color-text);
    font-weight: 700;
}

.crm-focus-row.is-active strong {
    color: var(--im-color-primary);
}

.crm-focus-meeting {
    gap: 2px;
    padding: 9px 0;
}

.crm-focus-meeting strong {
    font-size: .76rem;
}

.crm-focus-meeting span,
.crm-focus-empty {
    color: var(--im-color-text-soft);
    font-size: .68rem;
}

.crm-focus-empty {
    display: grid;
    gap: 8px;
    padding: 4px 0 2px;
}

.crm-focus-empty a {
    color: var(--im-color-primary);
    font-weight: 750;
    text-decoration: none;
}

.crm-dashboard-list {
    margin-bottom: 24px;
}

.crm-recent-deals__labels,
.crm-deal-row {
    display: grid;
    grid-template-columns: minmax(240px, 1fr) minmax(130px, .42fr) minmax(120px, .3fr) minmax(110px, .3fr);
    align-items: center;
    gap: 16px;
}

.crm-recent-deals__labels {
    padding: 8px 18px;
    background: var(--im-color-surface-soft);
    color: var(--im-color-text-muted);
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .035em;
    text-transform: uppercase;
}

.crm-deal-row {
    min-height: 58px;
    padding: 9px 18px;
    border-top: 1px solid var(--im-color-line);
    color: var(--im-color-text);
    text-decoration: none;
}

.crm-deal-row:hover {
    background: var(--im-color-surface-soft);
}

.crm-deal-row .crm-flat-row__main strong {
    font-size: .8rem;
    font-weight: 700;
}

.crm-deal-row .crm-flat-row__main small,
.crm-deal-row .crm-flat-row__meta {
    font-size: .68rem;
}

.crm-deal-row .crm-flat-row__value {
    justify-self: end;
    font-size: .78rem;
}

.crm-activity-row {
    display: grid;
    grid-template-columns: 7px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    min-height: 48px;
    padding: 8px 18px;
    border-top: 1px solid var(--im-color-line);
}

.crm-activity-row .crm-flat-row__main strong {
    font-size: .76rem;
    font-weight: 700;
}

.crm-activity-row .crm-flat-row__main small,
.crm-activity-row .crm-flat-row__meta {
    font-size: .67rem;
}

.crm-activity-row:hover {
    background: transparent;
}

@media (max-width: 991.98px) {
    .crm-metrics-grid--four {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .crm-dashboard-workspace {
        grid-template-columns: 1fr;
    }

    .crm-flat-row {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .crm-flat-row__value,
    .crm-flat-row__meta {
        display: none;
    }

    .crm-deal-row {
        grid-template-columns: minmax(0, 1fr) auto auto;
    }

    .crm-deal-row .crm-flat-row__value,
    .crm-deal-row .crm-flat-row__meta {
        display: block;
    }

    .crm-deal-row .crm-flat-row__meta {
        grid-column: 1 / -1;
    }
}

@media (max-width: 575.98px) {
    .crm-metrics-grid--four {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .crm-metrics-grid--four .crm-metric {
        min-height: 92px;
        padding: 11px;
    }

    .crm-pipeline-summary {
        align-items: flex-start;
        flex-direction: column;
    }

    .crm-pipeline-summary dl {
        width: 100%;
        justify-content: space-between;
        text-align: left;
    }

    .crm-pipeline-overview .crm-stage-overview__row {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .crm-recent-deals__labels {
        display: none;
    }

    .crm-deal-row {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 7px 10px;
    }

    .crm-deal-row .crm-status {
        justify-self: end;
    }

    .crm-deal-row .crm-flat-row__value,
    .crm-deal-row .crm-flat-row__meta {
        display: block;
        grid-column: 1 / -1;
        justify-self: start;
    }

    .crm-activity-row {
        grid-template-columns: 7px minmax(0, 1fr);
    }

    .crm-activity-row .crm-flat-row__meta {
        display: block;
        grid-column: 2;
    }
}

@media (max-width: 390px) {
    .crm-metrics-grid--four {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .crm-metrics-grid--four .crm-metric__icon {
        display: none;
    }

    .crm-metrics-grid--four .crm-metric__label {
        padding-right: 0;
        font-size: .62rem;
    }

    .crm-metrics-grid--four .crm-metric__value {
        font-size: 1.18rem;
    }

    .crm-dashboard-workspace {
        gap: 14px;
    }

    .crm-dashboard-surface__header {
        padding-inline: 13px;
    }

    .crm-pipeline-tabs {
        padding-inline: 9px;
    }

    .crm-pipeline-overview .crm-stage-overview__row {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .crm-pipeline-overview .crm-stage-overview__value {
        grid-row: auto;
    }
}

.crm-table-wrap {
    width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
}

.crm-table td {
    max-width: 260px;
}

.crm-table td a,
.crm-table td {
    overflow-wrap: anywhere;
}

.crm-record-main .crm-timeline {
    max-height: min(720px, 72vh);
    overflow-y: auto;
}

.crm-activity-picker {
    max-height: 150px;
    overflow-y: auto;
}

.crm-pre-line {
    white-space: pre-line;
}

.crm-ocr-preview {
    max-width: min(100%, 520px);
    max-height: 520px;
    object-fit: contain;
    transform-origin: center;
}

.crm-drawer {
    width: min(520px, 100vw);
}

/* A <form> that wraps a drawer's body/footer (or body+footer directly, with
   the header as a sibling outside the form — see contacts/index.blade.php)
   must itself be a flex column so .crm-drawer__body's flex:1 1 auto +
   overflow-y:auto can actually claim the remaining height and scroll,
   while .crm-drawer__footer stays pinned at the bottom. This used to be
   `display:grid; grid-template-rows:minmax(0,1fr) auto; height:calc(100% -
   76px)` — a 2-row grid + magic-number height tuned for exactly one drawer
   (Contact, whose form has exactly 2 children: body, footer). Because this
   is a generic `.crm-drawer form` descendant selector, it silently broke
   every OTHER drawer form that wraps a THIRD child (header+body+footer
   together, e.g. .boq-drawer-form drawers: Quotation/Invoice/BOQ/Recurring
   Plan row & commercial drawers) — CSS Grid auto-placement pushed the
   header into the flexible 1fr row (stretching it into a huge empty block)
   and shoved body+footer into auto-sized/implicit rows near the bottom.
   flex-column has no such row-count assumption and works correctly for
   any number of children, matching .boq-drawer-form's already-correct
   pattern below (which is now redundant here but harmless to keep). */
.crm-drawer form {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

.crm-drawer__body {
    overflow-y: auto;
}

.crm-drawer__footer {
    position: sticky;
    bottom: 0;
    z-index: 2;
    background: var(--im-color-surface);
}

/* Keep the footer's Cancel/Save action GROUP clear of the global Kunos AI
   floating launcher (.bos-ai-launcher, layouts/partials/bos-ai-assistant.
   blade.php) rather than moving the launcher itself, which stays on its
   own global layer per every page. Two prior passes both anchored the
   action group to the right (justify-content:flex-end) and pushed it left
   with a reserve sized to the launcher's own footprint — technically
   non-overlapping, but a right-anchored group with a large reserve ahead
   of it kept reading as centered/detached rather than intentional, however
   the reserve was tuned.

   This pass changes the anchor instead of re-tuning the reserve: the base
   rule above is now justify-content:flex-start, so Cancel/Save sit at the
   footer's natural LEFT edge (form actions), and the right portion of the
   footer is a deliberately empty utility/AI zone (align-items:center kept
   so the grouping itself is still deliberate, not the flex default
   `stretch`). This is inherently safer than any right-edge reserve — the
   action group's position no longer depends on the launcher's exact
   measured width at all, since it isn't anchored anywhere near it.

   padding-right stays, at a much smaller size, purely as a defensive
   minimum: a couple of these footers group 3 controls (invoices/
   quotations' "Use Template" footer — Cancel + Preview PDF + a submit
   button, ~395px total) which, left-aligned with no right guard at all,
   could still reach into the launcher's ~219px-from-right span on an
   in-between viewport width (roughly 500–560px, below the drawer's own
   576px full-width breakpoint but above where flex-wrap would trigger).
   100px (90px on mobile, where .bos-ai-launcher itself is already the
   smaller 50px icon-only variant) comfortably covers that gap without
   reintroducing any visible dead zone for the common 2-button footer,
   whose ~170px width never comes close to it. flex-wrap remains as a
   second line of defense for that same 3-control footer.
   Shared by every .crm-drawer__footer (Contacts, Quotations, Invoices,
   BOQs, Site Visits, Recurring Plans all use this one class) — the
   left-alignment is a strict improvement for all of them, never a
   regression, so this stays a shared fix rather than Contacts-only. */
.crm-drawer__footer {
    align-items: center;
    padding-right: 100px;
    flex-wrap: wrap;
}

@media (max-width: 768px) {
    .crm-drawer__footer {
        padding-right: 90px;
    }
}

.crm-drawer__section-title {
    margin-bottom: 16px;
    color: var(--im-color-text);
    font-weight: 800;
}

/* CRM Contact — Job Title / Department editable combobox (_create-drawer
   .blade.php). The menu is portaled to <body> and positioned fixed via JS
   (getBoundingClientRect), same technique bos-select.js documents for the
   identical drawer-clipping problem — .crm-combobox itself needs no
   special positioning context because of that. z-index reuses the shared
   --bos-layer-modal-dropdown token so it layers correctly above .crm-drawer
   (1045) and its overlay (1040), never behind either. */
.crm-combobox {
    position: relative;
}

.crm-combobox__menu {
    position: fixed;
    z-index: var(--bos-layer-modal-dropdown, 1095);
    background: #fff;
    border: 1px solid var(--im-color-line);
    border-radius: 10px;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, .08), 0 8px 10px -6px rgba(0, 0, 0, .08);
    overflow-y: auto;
    padding: 6px;
}

.crm-combobox__menu[hidden] {
    display: none;
}

.crm-combobox__option {
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.3;
    color: var(--im-color-text);
    cursor: pointer;
}

.crm-combobox__option:hover,
.crm-combobox__option.is-active {
    background: var(--im-color-surface-muted, #f1f5ff);
}

.crm-combobox__option--custom {
    margin-top: 4px;
    padding-top: 8px;
    border-top: 1px solid var(--im-color-line);
    color: var(--im-color-primary, #4345c5);
    font-weight: 650;
}

.crm-board {
    min-height: calc(100vh - 350px);
    padding-bottom: 12px;
}

.crm-board-column {
    flex: 0 0 310px;
    min-height: calc(100vh - 370px);
}

.crm-board-column__header {
    position: sticky;
    top: 0;
    z-index: 3;
}

.crm-board-column__values {
    display: grid;
    gap: 2px;
    margin-top: 7px;
    color: var(--im-color-text-soft);
    font-size: .7rem;
}

.crm-board-cards {
    min-height: 220px;
}

.crm-board-card__avatar {
    cursor: help;
}

.crm-tabs-nav {
    position: relative;
    scrollbar-width: thin;
    mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 30px), transparent);
}

.crm-form-section {
    padding: 18px;
    border: 1px solid var(--im-color-line);
    border-radius: 16px;
    background: var(--im-color-surface);
}

@media (max-width: 1180px) {
    .crm-metrics-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .crm-record-layout {
        grid-template-columns: 1fr;
    }

    .crm-record-layout>.crm-record-side:last-child {
        grid-column: auto;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
    }

    .crm-sticky-card {
        position: static;
    }
}

@media (max-width: 820px) {
    .crm-metrics-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .crm-dashboard-primary,
    .crm-dashboard-secondary,
    .crm-record-layout {
        grid-template-columns: 1fr;
    }

    .crm-record-layout>.crm-record-side:last-child {
        grid-column: auto;
    }

    .crm-board {
        min-height: calc(100vh - 310px);
    }

    .crm-board-column {
        min-height: calc(100vh - 330px);
    }
}

@media (max-width: 576px) {
    .crm-page {
        padding-inline: 12px;
    }

    .crm-metrics-grid {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .crm-metric {
        min-height: 138px;
        padding: 14px;
    }

    .crm-page-header__actions {
        width: 100%;
    }

    .crm-page-header__actions .im-btn {
        flex: 1 1 100%;
        width: 100%;
    }

    .crm-dashboard-primary,
    .crm-dashboard-secondary {
        gap: 12px;
    }

    .crm-stage-overview__row {
        grid-template-columns: 1fr;
    }

    .crm-stage-overview__value {
        grid-row: 2;
    }

    .crm-record-layout>.crm-record-side:last-child {
        display: block;
    }

    .crm-drawer {
        width: 100vw;
    }

    .crm-board-column {
        flex-basis: min(86vw, 310px);
    }

    .crm-tabs-nav {
        margin-inline: -12px;
        padding-inline: 12px 34px;
    }

    .qt-header__meta {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   CRM BOQ STRUCTURED BUILDER
   ========================================================================== */
.boq-builder-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 18px;
}

.boq-builder-header__title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.boq-builder-header__title h1 {
    margin: 0;
    color: var(--im-color-text);
    font-size: clamp(1.55rem, 2.2vw, 2rem);
    font-weight: 800;
    letter-spacing: -.02em;
}

.boq-builder-header__eyebrow,
.boq-drawer-eyebrow {
    color: var(--im-color-primary);
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .055em;
    text-transform: uppercase;
}

.boq-builder-header__subtitle {
    margin: 4px 0 0;
    color: var(--im-color-text-soft);
    font-size: .925rem;
}

.boq-builder-header__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
}

.boq-revision-badge {
    display: inline-flex;
    padding: 5px 10px;
    border: 1px solid var(--im-color-line);
    border-radius: 999px;
    background: var(--im-color-surface);
    color: var(--im-color-text-soft);
    font-size: .75rem;
    font-weight: 800;
}

.boq-summary-card {
    margin-bottom: 18px;
    padding: 20px 22px;
    border: 1px solid var(--im-color-line);
    border-radius: 18px;
    background: linear-gradient(135deg, var(--im-color-surface) 60%, var(--im-color-primary-soft));
    box-shadow: var(--im-shadow-sm);
}

.boq-summary-card__heading {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

.boq-summary-card__heading h2,
.boq-panel__header h2 {
    margin: 0;
    color: var(--im-color-text);
    font-size: 1.05rem;
    font-weight: 800;
}

.boq-summary-card__heading p,
.boq-panel__header p {
    margin: 3px 0 0;
    color: var(--im-color-text-soft);
    font-size: .8rem;
}

.boq-summary-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(130px, 1fr));
    gap: 16px 22px;
}

.boq-summary-field {
    min-width: 0;
}

.boq-summary-field span {
    display: block;
    margin-bottom: 4px;
    color: var(--im-color-text-muted);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .035em;
    text-transform: uppercase;
}

.boq-summary-field strong {
    display: block;
    overflow: hidden;
    color: var(--im-color-text);
    font-size: .9rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.boq-summary-field--money strong {
    color: var(--im-color-primary);
    font-size: 1rem;
}

.boq-summary-field--money small {
    font-size: .72rem;
    font-weight: 700;
}

.boq-builder-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    grid-template-areas: "boq-main boq-summary";
    align-items: start;
    gap: 18px;
    width: 100%;
    min-width: 0;
    padding-bottom: 112px;
}

.boq-builder-main {
    grid-area: boq-main;
    display: grid;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    gap: 18px;
    overflow: hidden;
}

.boq-panel,
.boq-commercial-card {
    border: 1px solid var(--im-color-line);
    border-radius: 18px;
    background: var(--im-color-surface);
    box-shadow: var(--im-shadow-sm);
}

.boq-panel {
    position: relative;
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

/* MyInvois e-Invoice (Phase 1, Sandbox only) — scoped narrowly to this
   integration's own section on Invoice/Company detail pages. Everything
   else in that section reuses existing shared classes (boq-panel,
   crm-form-grid, crm-property, crm-status, im-btn, im-alert). The Sandbox
   badge is deliberately its own distinct, always-visible style — never a
   variant of any status pill — so it can never be mistaken for a
   Production indicator. */
.crm-einvoice-env-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    padding: 4px 12px;
    border-radius: 999px;
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #fde68a;
    font-weight: 800;
    font-size: .72rem;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.crm-einvoice-readiness-list {
    margin: 0;
    padding-left: 18px;
    font-size: .8125rem;
}

/* §7/§8 — the compact "MyInvois Validation" area shown only once a
   document is genuinely Valid (validationUrl() non-null). Reuses the same
   Sandbox-badge treatment as .crm-einvoice-env-badge above it, deliberately
   green/success-toned instead of amber so a Valid document's own banner
   reads distinctly from the general "this whole integration is Sandbox"
   warning — still never resembling a Production indicator. */
.crm-einvoice-validation-area {
    padding: 12px 14px;
    border: 1px solid #bbf7d0;
    border-radius: 12px;
    background: #f0fdf4;
}

.crm-einvoice-validation-area .crm-einvoice-env-badge {
    margin-top: 0;
    background: #dcfce7;
    color: #166534;
    border-color: #bbf7d0;
}

.crm-einvoice-qr-image {
    max-width: 220px;
    width: 100%;
    height: auto;
}

.crm-einvoice-tin-actions {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed var(--im-color-line);
}

.boq-panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 20px;
    border-bottom: 1px solid var(--im-color-line);
}

.boq-panel__header>div:first-child {
    min-width: 0;
}

.boq-panel__actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.boq-action-button {
    min-height: 42px;
    padding: 8px 14px;
    border-radius: 12px;
    line-height: 1.2;
    white-space: nowrap;
}

.boq-action-button--outline,
.boq-import-dropdown>.boq-action-button {
    border-color: var(--im-color-primary-border);
    background: var(--im-color-surface);
    color: var(--im-color-primary);
    box-shadow: none;
}

.boq-action-button--outline:hover,
.boq-import-dropdown>.boq-action-button:hover,
.boq-import-dropdown>.boq-action-button[aria-expanded="true"] {
    border-color: var(--im-color-primary);
    background: var(--im-color-primary-soft);
    color: var(--im-color-primary-strong);
}

.boq-import-dropdown {
    position: relative;
}

.boq-import-menu {
    width: max-content;
    min-width: 220px;
    max-width: min(360px, calc(100vw - 24px));
    padding: 6px;
    border: 1px solid var(--im-color-line);
    border-radius: 12px;
    box-shadow: var(--im-shadow-md);
}

.boq-import-menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 40px;
    padding: 8px 10px;
    border-radius: 9px;
    color: var(--im-color-text);
    font-size: .82rem;
    font-weight: 650;
    line-height: 1.3;
    white-space: normal;
}

.boq-import-menu .dropdown-item i {
    flex: 0 0 auto;
    color: var(--im-color-primary);
}

.boq-import-menu .dropdown-item:hover,
.boq-import-menu .dropdown-item:focus {
    background: var(--im-color-primary-soft);
    color: var(--im-color-primary-strong);
}

.boq-panel__footer {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 14px 18px;
    border-top: 1px solid var(--im-color-line);
    background: var(--im-color-surface-soft);
}

.boq-table-scroll {
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    border-radius: 0 0 18px 18px;
}

.boq-table {
    width: 100%;
    min-width: 1180px;
    border-collapse: separate;
    border-spacing: 0;
}

.boq-table th,
.boq-table td {
    padding: 12px 10px;
    border-bottom: 1px solid var(--im-color-line);
    color: var(--im-color-text);
    font-size: .8rem;
    vertical-align: top;
}

.boq-table th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--im-color-surface-soft);
    color: var(--im-color-text-soft);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .025em;
    text-transform: uppercase;
    white-space: nowrap;
}

.boq-table tbody tr:last-child td {
    border-bottom: 0;
}

.boq-table tbody tr.is-dragging {
    opacity: .45;
}

.boq-table__handle {
    width: 34px;
    padding-inline: 6px !important;
    text-align: center;
}

.boq-drag-handle,
.boq-section-toggle {
    display: inline-grid;
    width: 28px;
    height: 28px;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--im-color-text-muted);
    cursor: grab;
}

.boq-drag-handle:hover,
.boq-section-toggle:hover {
    background: rgba(255, 255, 255, .75);
    color: var(--im-color-primary);
}

.boq-section-toggle {
    cursor: pointer;
}

.boq-structure-row--section td {
    background: #eeefff;
    color: #3036a5;
    border-bottom-color: #d9dcff;
}

.boq-structure-row--heading td {
    background: #f7f7fc;
    color: var(--im-color-text);
}

.boq-structure-row--note td {
    background: #fffaf0;
    color: #7a5512;
}

.boq-structure-row__content {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-width: 0;
}

.boq-structure-row__content[data-depth="1"],
.boq-item-description[data-depth="1"] {
    padding-left: 18px;
}

.boq-structure-row__content[data-depth="2"],
.boq-item-description[data-depth="2"] {
    padding-left: 36px;
}

.boq-structure-row__content[data-depth="3"],
.boq-item-description[data-depth="3"] {
    padding-left: 54px;
}

.boq-structure-row__content>div {
    min-width: 0;
}

.boq-structure-row__content strong,
.boq-structure-row__content small {
    display: block;
}

.boq-structure-row__content small {
    margin-top: 3px;
    color: inherit;
    opacity: .72;
    font-size: .75rem;
}

.boq-structure-row__code {
    flex: 0 0 auto;
    min-width: 34px;
}

.boq-row-kind,
.boq-item-type {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    border-radius: 999px;
    font-size: .64rem;
    font-weight: 800;
    line-height: 1.3;
}

.boq-row-kind {
    padding: 3px 7px;
    background: rgba(255, 255, 255, .7);
    color: inherit;
}

.boq-item-type {
    padding: 4px 8px;
    background: var(--im-color-surface-muted);
    color: var(--im-color-text-soft);
    white-space: nowrap;
}

.boq-item-row:hover td {
    background: var(--im-color-surface-soft);
}

.boq-item-description {
    min-width: 220px;
}

.boq-item-description strong,
.boq-item-description span,
.boq-item-description small {
    display: block;
}

.boq-item-description span {
    margin-top: 3px;
    color: var(--im-color-text-soft);
    line-height: 1.45;
}

.boq-item-description small {
    margin-top: 5px;
    color: var(--im-color-text-muted);
    line-height: 1.4;
}

.boq-row-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    white-space: nowrap;
}

.boq-row-actions form {
    margin: 0;
}

#invoiceItems .boq-row-actions .crm-btn-icon {
    width: 32px;
    height: 32px;
}

.boq-row-delete {
    color: var(--im-color-danger);
}

.boq-stock-value,
.boq-stock-shortage,
.boq-stock-na {
    display: block;
    white-space: nowrap;
}

.boq-stock-value {
    color: var(--im-color-success-ink);
    font-weight: 700;
}

.boq-stock-shortage {
    margin-top: 3px;
    color: var(--im-color-danger);
    font-size: .7rem;
    font-weight: 700;
}

.boq-stock-na {
    color: var(--im-color-text-muted);
}

.boq-empty-state {
    display: grid;
    justify-items: center;
    padding: 54px 24px;
    text-align: center;
}

.boq-empty-state__icon {
    display: grid;
    width: 58px;
    height: 58px;
    margin-bottom: 14px;
    place-items: center;
    border-radius: 18px;
    background: var(--im-color-primary-soft);
    color: var(--im-color-primary);
    font-size: 1.4rem;
}

.boq-empty-state h3 {
    margin: 0;
    color: var(--im-color-text);
    font-size: 1rem;
    font-weight: 800;
}

.boq-empty-state p {
    max-width: 420px;
    margin: 5px 0 0;
    color: var(--im-color-text-soft);
    font-size: .82rem;
}

.boq-empty-state__actions {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 18px;
}

.boq-empty-state__actions .im-btn-secondary:not(.boq-action-button--outline) {
    border-color: transparent;
    background: var(--im-color-primary-soft);
    color: var(--im-color-primary-strong);
}

.boq-commercial-sidebar {
    grid-area: boq-summary;
    position: sticky;
    top: 20px;
    z-index: 4;
    width: 100%;
    min-width: 0;
    max-width: 320px;
    justify-self: end;
}

.boq-commercial-card {
    overflow: hidden;
}

.boq-commercial-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 17px 18px;
    border-bottom: 1px solid var(--im-color-line);
}

.boq-commercial-card__header>div span,
.boq-commercial-card__header>div strong {
    display: block;
}

.boq-commercial-card__header>div span {
    color: var(--im-color-text);
    font-size: .95rem;
    font-weight: 800;
}

.boq-commercial-card__header>div strong {
    margin-top: 2px;
    color: var(--im-color-text-muted);
    font-size: .7rem;
}

.boq-commercial-list,
.boq-internal-summary dl {
    margin: 0;
}

.boq-commercial-list {
    padding: 14px 18px 18px;
}

.boq-commercial-list>div,
.boq-internal-summary dl>div {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 7px 0;
}

.boq-commercial-list dt,
.boq-internal-summary dt {
    color: var(--im-color-text-soft);
    font-size: .78rem;
    font-weight: 600;
}

.boq-commercial-list dd,
.boq-internal-summary dd {
    margin: 0;
    color: var(--im-color-text);
    font-size: .82rem;
    font-weight: 800;
    text-align: right;
}

.boq-commercial-list__total {
    margin-top: 8px;
    padding-top: 14px !important;
    border-top: 2px solid var(--im-color-line);
}

.boq-commercial-list__total dt,
.boq-commercial-list__total dd {
    color: var(--im-color-primary);
    font-size: .96rem;
}

/* Plain form cards inside .boq-panel (Invoice "New Invoice" page) — the
   existing .boq-panel__header rules already style the title/subtitle; this
   just adds the body padding that table-based boq-panel usages elsewhere
   (invoice items, BOQ, site visits) apply directly on their own content. */
.boq-panel__body {
    padding: 18px 20px;
}

.boq-panel__body .crm-form-grid:not(:last-child) {
    margin-bottom: 0;
}

/* Sidebar action footer for a create-page summary card that carries its
   own primary actions (unlike the show-page sidebar, which uses a separate
   sticky qt-footer bar). Scoped to its own class so the existing
   .boq-commercial-card usage elsewhere is unaffected. */
.boq-commercial-card__footer {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px 18px 18px;
    border-top: 1px solid var(--im-color-line);
}

.boq-commercial-card__footer .im-btn {
    width: 100%;
    justify-content: center;
}

/* New Invoice page only — reuses .boq-builder-layout/.boq-commercial-sidebar
   wholesale, but on narrow screens the summary+actions card should sit
   below the form (not above it, as the invoice-show page's layout does),
   since this page's primary action lives inside the card itself. */
@media (max-width: 1180px) {
    .invoice-create-layout {
        grid-template-areas:
            "boq-main"
            "boq-summary" !important;
    }
}

/* Compact secondary toolbar under the global page header (New Invoice) —
   Draft badge + helper text + Back action. Deliberately NOT another
   breadcrumb/H1; the global bos-page-header already renders those once. */
.crm-form-intro-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 18px;
}

.crm-form-intro-row__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.crm-form-intro-row__help {
    color: var(--im-color-text-soft);
    font-size: .8125rem;
}

/* Add Quotation page only — small card-header icon square, matching the
   .crm-metric__icon light-purple pattern but scoped for a boq-panel__header
   context (inline with the title, not stacked above it). */
.qt-panel-icon {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    display: grid;
    place-items: center;
    font-size: 1.05rem;
    background: var(--im-color-primary-soft);
    color: var(--im-color-primary);
}

/* Add Quotation page only — reuses .boq-builder-layout/.boq-commercial-sidebar
   wholesale; on narrow screens the summary+tips column sits below the form,
   matching the required mobile order (Details -> Summary -> Tips -> Actions). */
@media (max-width: 1180px) {
    .quotation-create-layout {
        grid-template-areas:
            "boq-main"
            "boq-summary" !important;
    }
}

/* Add Quotation page only — section dividers (Deal/Dates/Pricing/Notes)
   inside the single "Quotation Details" boq-panel, using the existing
   .boq-drawer-eyebrow label style as a spacer/heading rather than nested
   sub-cards. */
.boq-panel__body>.boq-drawer-eyebrow {
    display: block;
    margin: 22px 0 10px;
}

.boq-panel__body>.boq-drawer-eyebrow:first-child {
    margin-top: 0;
}

/* Add Quotation page only — bottom action row (Cancel left / Save Draft
   right), replacing the old bottom-left button pairing. */
.crm-form-actions-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--im-color-line);
}

/* Add Quotation page only — compact tips list inside a .boq-commercial-card,
   kept deliberately shorter/lighter than the main form card. */
.crm-tips-list {
    margin: 0;
    padding: 14px 18px 18px;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.crm-tips-list__item {
    display: flex;
    gap: 10px;
}

.crm-tips-list__item .bi {
    flex: 0 0 auto;
    margin-top: 2px;
    color: var(--im-color-primary);
    font-size: .9rem;
}

.crm-tips-list__item strong {
    display: block;
    color: var(--im-color-text);
    font-size: .8125rem;
    font-weight: 800;
}

.crm-tips-list__item span {
    display: block;
    margin-top: 2px;
    color: var(--im-color-text-soft);
    font-size: .78rem;
    line-height: 1.4;
}

.invoice-create-items__header {
    align-items: center;
}

.invoice-create-items__empty {
    display: grid;
    justify-items: center;
    gap: 6px;
    padding: 28px 16px;
    border: 1px dashed var(--im-color-line);
    border-radius: 12px;
    color: var(--im-color-text-soft);
    text-align: center;
}

.invoice-create-items__empty[hidden] {
    display: none;
}

.invoice-create-items__empty>i {
    font-size: 1.35rem;
}

.invoice-create-items__empty>strong {
    color: var(--im-color-text);
}

.invoice-create-items__list {
    display: grid;
    gap: 12px;
}

.invoice-create-item {
    overflow: hidden;
    border: 1px solid var(--im-color-line);
    border-radius: 12px;
    background: var(--im-color-surface);
}

.invoice-create-item__heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 14px;
    border-bottom: 1px solid var(--im-color-line);
    background: var(--im-color-surface-soft);
}

.invoice-create-item__heading>div {
    display: grid;
    min-width: 0;
    gap: 1px;
}

.invoice-create-item__heading span {
    color: var(--im-color-text-soft);
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.invoice-create-item__heading strong {
    overflow: hidden;
    color: var(--im-color-text);
    font-size: .88rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.invoice-create-item__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 13px;
    padding: 14px;
}

.invoice-create-item__mode,
.invoice-create-item__catalogue,
.invoice-create-item__name,
.invoice-create-item__description {
    grid-column: span 2;
}

.invoice-create-item__mode {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.invoice-create-item__mode-options {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.invoice-create-item__mode-options label {
    cursor: pointer;
}

.invoice-create-item__mode-options input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.invoice-create-item__mode-options span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 42px;
    padding: 8px 12px;
    border: 1px solid var(--im-color-line);
    border-radius: 10px;
    color: var(--im-color-text-soft);
    font-size: .8rem;
    font-weight: 700;
    transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}

.invoice-create-item__mode-options input:checked+span {
    border-color: var(--im-color-primary);
    background: color-mix(in srgb, var(--im-color-primary) 8%, white);
    color: var(--im-color-primary);
}

.invoice-create-item__mode-options input:focus-visible+span {
    outline: 2px solid color-mix(in srgb, var(--im-color-primary) 30%, transparent);
    outline-offset: 2px;
}

.invoice-create-item__catalogue[hidden] {
    display: none;
}

.invoice-create-item__amount {
    display: grid;
    align-content: center;
    gap: 4px;
    min-height: 66px;
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--im-color-surface-soft);
}

.invoice-create-item__amount span {
    color: var(--im-color-text-soft);
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
}

.invoice-create-item__amount strong {
    color: var(--im-color-text);
    font-size: .95rem;
}

.invoice-create-summary-money {
    border-top: 1px solid var(--im-color-line);
}

.invoice-create-summary-total {
    padding-top: 11px !important;
    border-top: 1px solid var(--im-color-line);
}

.invoice-create-summary-total dt,
.invoice-create-summary-total dd {
    color: var(--im-color-text) !important;
    font-weight: 800 !important;
}

@media (max-width: 760px) {
    .invoice-create-items__header {
        align-items: flex-start;
    }

    .invoice-create-item__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .invoice-create-item__mode,
    .invoice-create-item__catalogue,
    .invoice-create-item__name,
    .invoice-create-item__description {
        grid-column: auto;
    }
}

.boq-internal-summary {
    margin: 0 14px 14px;
    padding: 14px;
    border-radius: 14px;
    background: var(--im-color-surface-soft);
}

.boq-internal-summary h3 {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0 0 5px;
    color: var(--im-color-text);
    font-size: .78rem;
    font-weight: 800;
}

.boq-notes-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    padding: 18px 20px 22px;
}

.boq-note-block {
    min-width: 0;
    padding: 15px;
    border: 1px solid var(--im-color-line);
    border-radius: 14px;
    background: var(--im-color-surface-soft);
}

.boq-note-block--full {
    grid-column: 1 / -1;
}

.boq-note-block span {
    display: block;
    margin-bottom: 7px;
    color: var(--im-color-text);
    font-size: .75rem;
    font-weight: 800;
}

.boq-note-block p {
    margin: 0;
    color: var(--im-color-text-soft);
    font-size: .82rem;
    line-height: 1.6;
    white-space: pre-wrap;
}

.boq-workflow-steps {
    display: flex;
    align-items: flex-start;
    margin: 0;
    padding: 22px 20px 16px;
    list-style: none;
    overflow-x: auto;
}

.boq-workflow-steps li {
    position: relative;
    display: grid;
    flex: 1 0 118px;
    justify-items: center;
    gap: 7px;
    color: var(--im-color-text-muted);
    text-align: center;
}

.boq-workflow-steps li::after {
    position: absolute;
    top: 15px;
    left: calc(50% + 20px);
    width: calc(100% - 40px);
    height: 2px;
    background: var(--im-color-line);
    content: "";
}

.boq-workflow-steps li:last-child::after {
    display: none;
}

.boq-workflow-steps li>span {
    position: relative;
    z-index: 1;
    display: grid;
    width: 32px;
    height: 32px;
    place-items: center;
    border: 2px solid var(--im-color-line);
    border-radius: 50%;
    background: var(--im-color-surface);
    font-size: .62rem;
}

.boq-workflow-steps li strong {
    max-width: 115px;
    font-size: .7rem;
    line-height: 1.35;
}

.boq-workflow-steps li.is-complete {
    color: var(--im-color-success);
}

.boq-workflow-steps li.is-complete::after {
    background: var(--im-color-success);
}

.boq-workflow-steps li.is-complete>span {
    border-color: var(--im-color-success);
    background: var(--im-color-success-soft);
}

.boq-workflow-steps li.is-current {
    color: var(--im-color-primary);
}

.boq-workflow-steps li.is-current>span {
    border-color: var(--im-color-primary);
    background: var(--im-color-primary);
    color: #fff;
    box-shadow: 0 0 0 4px var(--im-color-primary-soft);
}

.boq-workflow-action {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 14px 20px 18px;
    border-top: 1px solid var(--im-color-line);
}

.boq-workflow-action form {
    margin: 0;
}

.im-btn-link-danger {
    border: 0;
    background: transparent;
    color: var(--im-color-danger);
    box-shadow: none;
}

.im-btn-link-danger:hover {
    background: var(--im-color-danger-soft);
    color: var(--im-color-danger-ink);
}

.boq-approval-history {
    padding: 18px 20px 22px;
    border-top: 1px solid var(--im-color-line);
}

.boq-approval-history h3 {
    margin: 0 0 10px;
    color: var(--im-color-text);
    font-size: .85rem;
    font-weight: 800;
}

.boq-approval-history article {
    display: grid;
    grid-template-columns: 34px 1fr;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid var(--im-color-line);
}

.boq-approval-history article:last-of-type {
    border-bottom: 0;
}

.boq-history-icon {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 10px;
    background: var(--im-color-primary-soft);
    color: var(--im-color-primary);
}

.boq-approval-history article strong,
.boq-approval-history article p,
.boq-approval-history article small {
    display: block;
}

.boq-approval-history article strong {
    font-size: .8rem;
}

.boq-approval-history article p {
    margin: 2px 0;
    color: var(--im-color-text-soft);
    font-size: .76rem;
}

.boq-approval-history article small,
.boq-history-empty {
    color: var(--im-color-text-muted);
    font-size: .7rem;
}

.boq-row-drawer,
.boq-commercial-drawer {
    width: min(620px, 100%);
}

.boq-drawer-form {
    display: flex;
    min-height: 0;
    flex: 1 1 auto;
    flex-direction: column;
}

.boq-row-type-picker {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin: 0 0 20px;
    padding: 0;
    border: 0;
}

/* UX simplification: this picker is now permanently [hidden] in markup
   (row type is decided by which add-row action was clicked, not chosen
   inside the drawer) — the unconditional display:grid above would silently
   override the browser's native [hidden] behaviour without this rule. */
.boq-row-type-picker[hidden] {
    display: none;
}

.boq-row-type-picker legend {
    grid-column: 1 / -1;
    margin-bottom: 4px;
    color: var(--im-color-text);
    font-size: .78rem;
    font-weight: 800;
}

.boq-row-type-picker input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.boq-row-type-picker span {
    display: grid;
    min-height: 74px;
    place-items: center;
    gap: 5px;
    padding: 10px 6px;
    border: 1px solid var(--im-color-line);
    border-radius: 12px;
    background: var(--im-color-surface);
    color: var(--im-color-text-soft);
    font-size: .72rem;
    font-weight: 700;
    text-align: center;
    cursor: pointer;
}

.boq-row-type-picker span i {
    font-size: 1rem;
}

.boq-row-type-picker input:checked+span {
    border-color: var(--im-color-primary);
    background: var(--im-color-primary-soft);
    color: var(--im-color-primary);
    box-shadow: 0 0 0 2px rgba(67, 56, 202, .1);
}

.boq-row-type-picker input:focus-visible+span {
    outline: 2px solid var(--im-color-primary);
    outline-offset: 2px;
}

.boq-drawer-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 15px;
}

.boq-drawer-fields>label {
    min-width: 0;
}

.boq-drawer-fields__full {
    grid-column: 1 / -1;
}

.boq-drawer-fields [hidden],
.boq-stock-preview[hidden] {
    display: none !important;
}

.boq-field-help {
    display: block;
    margin-top: 4px;
    color: var(--im-color-text-muted);
    font-size: .7rem;
}

/* Amount preview — read-only live estimate under the compact Item form
   (section 2/6 of the Add Item simplification spec). Never submitted;
   QuotationCalculationService still computes the stored amount server-side. */
.boq-amount-preview {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border: 1px solid var(--im-color-line);
    border-radius: 12px;
    background: var(--im-color-surface-soft, #f8fafc);
}

.boq-amount-preview .im-label {
    margin: 0;
}

.boq-amount-preview output {
    font-weight: 800;
    font-size: .95rem;
    color: var(--im-color-text);
}

/* Optional/advanced block (Place under / Item type / Sub-item code /
   Purchase cost / Technical specification) — deliberately lower visual
   weight and placed last, so a normal "Add Item" never has to look past
   document-structure concepts before quoting a product. */
.boq-drawer-optional {
    margin-top: 4px;
    padding-top: 16px;
    border-top: 1px dashed var(--im-color-line);
}

.boq-drawer-optional__title {
    margin-bottom: 10px;
    color: var(--im-color-text-muted);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.boq-drawer-optional__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 15px;
}

.boq-drawer-optional__grid>label {
    min-width: 0;
}

/* "Add Item & Add Another" — footer checkbox, sits between Cancel and the
   primary submit button so it reads as a modifier on the primary action. */
.boq-add-another {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-right: auto;
    color: var(--im-color-text-soft);
    font-size: .78rem;
    font-weight: 700;
    cursor: pointer;
}

.boq-stock-preview {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 12px;
    background: var(--im-color-success-soft);
    color: var(--im-color-success-ink);
}

.boq-stock-preview span {
    font-size: .75rem;
    font-weight: 700;
}

.boq-stock-preview strong {
    font-size: .85rem;
}

.boq-adjustment-field {
    display: grid;
    grid-template-columns: minmax(110px, .8fr) minmax(0, 1fr);
    gap: 8px;
}

@media (max-width: 1280px) {
    .boq-summary-grid {
        grid-template-columns: repeat(4, minmax(130px, 1fr));
    }

    .boq-builder-layout {
        grid-template-columns: minmax(0, 1fr) 290px;
    }

    .boq-commercial-sidebar {
        max-width: 290px;
    }
}

@media (max-width: 1180px) {
    .boq-summary-grid {
        grid-template-columns: repeat(3, minmax(130px, 1fr));
    }

    .boq-builder-layout {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "boq-summary"
            "boq-main";
    }

    .boq-commercial-sidebar {
        position: static;
        width: 100%;
        max-width: none;
        justify-self: stretch;
    }

    .boq-commercial-list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0 22px;
    }

    .boq-commercial-list__total {
        grid-column: 1 / -1;
    }

    .boq-builder-layout {
        padding-bottom: 104px;
    }

    .boq-panel__header {
        align-items: flex-start;
        flex-direction: column;
    }

    .boq-panel__actions {
        width: 100%;
        justify-content: flex-start;
        flex-wrap: wrap;
    }
}

@media (max-width: 1024px) {
    .boq-summary-grid {
        grid-template-columns: repeat(3, minmax(130px, 1fr));
    }
}

@media (max-width: 760px) {
    .boq-builder-header {
        flex-direction: column;
    }

    .boq-builder-header__actions {
        justify-content: flex-start;
    }

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

    .boq-table {
        min-width: 0;
    }

    .boq-table thead {
        display: none;
    }

    .boq-table tbody {
        display: grid;
        gap: 10px;
        padding: 12px;
    }

    .boq-table tbody tr,
    .boq-table tbody td {
        display: block;
        width: 100%;
    }

    .boq-table tbody tr {
        overflow: hidden;
        border: 1px solid var(--im-color-line);
        border-radius: 14px;
        background: var(--im-color-surface);
    }

    .boq-table tbody td {
        padding: 8px 12px;
        border: 0;
    }

    .boq-table tbody td[data-label] {
        display: grid;
        grid-template-columns: minmax(110px, .75fr) minmax(0, 1fr);
        align-items: baseline;
        gap: 10px;
    }

    .boq-table tbody td[data-label]::before {
        color: var(--im-color-text-muted);
        content: attr(data-label);
        font-size: .66rem;
        font-weight: 800;
        letter-spacing: .025em;
        text-transform: uppercase;
    }

    .boq-table .boq-table__handle {
        display: none;
    }

    .boq-structure-row td[colspan] {
        padding: 13px 12px;
    }

    .boq-structure-row td:last-child {
        padding-top: 0;
    }

    .boq-structure-row__content[data-depth],
    .boq-item-description[data-depth] {
        padding-left: 0;
    }

    .boq-item-description {
        min-width: 0;
    }

    .boq-item-description strong {
        font-size: .9rem;
    }

    .boq-row-actions {
        justify-content: flex-start;
    }

    .boq-notes-grid {
        grid-template-columns: 1fr;
    }

    .boq-note-block--full {
        grid-column: auto;
    }

    .boq-panel__footer {
        position: sticky;
        bottom: 0;
        z-index: 3;
    }

    .boq-workflow-action {
        position: sticky;
        bottom: 72px;
        z-index: 3;
        background: var(--im-color-surface);
        box-shadow: 0 -5px 15px rgba(15, 23, 42, .06);
    }

    .boq-row-type-picker {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 576px) {
    .boq-summary-card {
        padding: 16px;
    }

    .boq-summary-grid {
        grid-template-columns: 1fr 1fr;
        gap: 13px;
    }

    .boq-summary-field:nth-child(2),
    .boq-summary-field:nth-child(3) {
        grid-column: 1 / -1;
    }

    .boq-summary-field strong {
        white-space: normal;
    }

    .boq-builder-header__actions {
        width: 100%;
    }

    .boq-builder-header__actions>.im-btn {
        flex: 1 1 auto;
        justify-content: center;
    }

    .boq-panel__actions,
    .boq-empty-state__actions {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
    }

    .boq-panel__actions .boq-import-dropdown,
    .boq-panel__actions .boq-action-button,
    .boq-empty-state__actions .boq-action-button {
        width: 100%;
    }

    .boq-panel__actions .boq-action-button,
    .boq-empty-state__actions .boq-action-button {
        justify-content: center;
    }

    .boq-import-menu {
        width: 100%;
        min-width: 100%;
    }

    .boq-commercial-list {
        display: block;
    }

    .boq-commercial-list__total {
        grid-column: auto;
    }

    .boq-drawer-fields {
        grid-template-columns: 1fr;
    }

    .boq-drawer-optional__grid {
        grid-template-columns: 1fr;
    }

    .boq-drawer-fields__full {
        grid-column: auto;
    }

    .boq-panel__footer .im-btn,
    .boq-panel__footer a {
        flex: 1 1 calc(50% - 8px);
        justify-content: center;
    }

    .boq-workflow-action>*,
    .boq-workflow-action form,
    .boq-workflow-action .im-btn {
        width: 100%;
    }

    .boq-workflow-action .im-btn {
        justify-content: center;
    }
}


/* ==========================================================================
   QUOTATION BUILDER
   ========================================================================== */

/* The quotation builder reuses the BOQ structured-builder component styles
   (boq-summary-card, boq-builder-layout, boq-panel, boq-table, boq-commercial-card,
   crm-drawer, boq-row-type-picker, etc.) so it stays visually consistent.
   Only quotation-specific overrides and the sticky footer remain here. */

/* -- Sticky action footer (draft quotations / draft invoices) -- */
.qt-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 900;
    background: var(--im-color-surface, #fff);
    border-top: 1px solid var(--im-color-line, #e2e8f0);
    box-shadow: 0 -4px 16px rgba(0, 0, 0, .06);
}

.qt-footer__inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 12px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.qt-footer__right {
    display: flex;
    gap: 8px;
    align-items: center;
}

/* The desktop sidebar (#main/#footer's own left offset — see line ~5026) is fixed, opaque
   and z-index:1030, well above this bar's z-index:900. Without a matching left offset here,
   this bar's leftmost content (e.g. Cancel/Back) renders underneath the sidebar and is
   unreachable to clicks. Mirror #main/#footer's exact breakpoint/offset so the two agree. */
@media (min-width: 1200px) {
    .qt-footer {
        left: 300px;
    }

    .toggle-sidebar .qt-footer {
        left: 0;
    }
}

@media (max-width: 640px) {
    .qt-footer__inner {
        flex-direction: column;
        gap: 8px;
    }

    .qt-footer__right {
        width: 100%;
        justify-content: center;
    }
}

/* Create form preview */
.qt-create-preview {
    margin-top: 16px;
    padding: 12px 16px;
    background: var(--im-color-surface-soft, #f8fafc);
    border-radius: 10px;
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
}

/* ==========================================================================
   Commercial Document Settings (crm/settings/commercial-documents)
   ========================================================================== */
.cds-tabbar {
    display: flex;
    gap: 4px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    border-bottom: 1px solid var(--im-color-line, #e2e8f0);
    margin: 20px 0 24px;
    padding-bottom: 0;
}

.cds-tab-btn {
    flex: 0 0 auto;
    padding: 10px 16px;
    border: none;
    background: transparent;
    color: var(--im-color-text-soft, #64748b);
    font-weight: 600;
    font-size: 0.9rem;
    border-bottom: 2px solid transparent;
    cursor: pointer;
}

.cds-tab-btn:hover {
    color: var(--im-color-primary, #3f41b5);
}

.cds-tab-btn.active {
    color: var(--im-color-primary, #3f41b5);
    border-bottom-color: var(--im-color-primary, #3f41b5);
}

.cds-tab-content {
    position: relative;
}

.cds-panel {
    display: none;
}

.cds-panel.active {
    display: block;
}

.cds-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.cds-card-header h5 {
    margin: 0;
}

.cds-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 20px;
}

.cds-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cds-field--full {
    grid-column: 1 / -1;
}

.cds-subheading {
    grid-column: 1 / -1;
    margin-top: 8px;
    padding-top: 14px;
    border-top: 1px solid var(--im-color-border, #E4E7EC);
}

.cds-subheading:first-of-type {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

.cds-subheading h6 {
    margin: 0;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--im-color-muted, #475467);
}

.cds-field textarea.im-input {
    resize: vertical;
}

/* e-Invoice tab — inherited-from-General-Settings display rows (never an
   editable input; a real <input> would imply a second source of truth for
   the same value). */
.cds-field--readonly strong {
    font-size: .9375rem;
}

.cds-field--readonly small {
    color: var(--im-color-muted, #667085);
}

.cds-einvoice-status-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 10px 0;
    font-size: .8125rem;
    color: var(--im-color-muted, #667085);
}

.cds-einvoice-status-row strong {
    color: #172033;
}

.cds-einvoice-completeness {
    margin-top: 4px;
}

.cds-toggle-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    cursor: pointer;
}

.cds-toggle-row input[type="checkbox"] {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
}

.cds-badge-soon {
    display: inline-block;
    padding: 2px 8px;
    border-radius: var(--im-radius-pill, 999px);
    background: var(--im-color-warning-soft, #fef3c7);
    color: var(--im-color-warning-ink, #92400e);
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .3px;
}

.cds-disabled-soon {
    opacity: 0.7;
}

.cds-upload-row {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.cds-upload-dropzone {
    flex: 1 1 260px;
    min-width: 220px;
}

.cds-upload-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 90px;
    border: 1px dashed var(--im-color-line, #e2e8f0);
    border-radius: var(--im-radius-control, 10px);
    background: var(--im-color-surface-soft, #f8fafc);
    overflow: hidden;
}

.cds-upload-preview img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* Brand Assets: Logo / Authorised Signature / Document Footer, 3-up */
.cds-upload-row--3 .cds-upload-dropzone {
    flex: 1 1 220px;
}

.cds-upload-preview--wide {
    height: 70px;
}

.cds-color-input {
    display: flex;
    align-items: center;
    gap: 10px;
}

.cds-color-swatch {
    width: 44px;
    height: 38px;
    flex: 0 0 auto;
    padding: 2px;
    border: 1px solid var(--im-color-line, #e2e8f0);
    border-radius: var(--im-radius-control, 8px);
    background: transparent;
    cursor: pointer;
}

.cds-color-input .im-input {
    flex: 1 1 auto;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    text-transform: uppercase;
}

.cds-template-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
}

.cds-template-card {
    display: block;
    border: 1.5px solid var(--im-color-line, #e2e8f0);
    border-radius: var(--im-radius-control, 12px);
    padding: 12px;
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.cds-template-card:hover {
    border-color: var(--im-color-primary-border, #cdd6ff);
}

.cds-template-card--selected {
    border-color: var(--im-color-primary, #3f41b5);
    box-shadow: 0 0 0 3px var(--im-color-primary-soft, #e9edff);
}

.cds-template-card--disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

.cds-template-card__body {
    margin-top: 10px;
}

.cds-template-card__body strong {
    display: block;
    font-size: 0.9rem;
}

.cds-template-card__body .crm-status {
    margin-top: 6px;
}

.cds-template-thumb {
    height: 110px;
    border-radius: 8px;
    background: var(--im-color-surface-soft, #f8fafc);
    border: 1px solid var(--im-color-line, #e2e8f0);
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cds-template-thumb__header {
    height: 14px;
    width: 60%;
    border-radius: 3px;
    background: var(--im-color-primary-soft, #e9edff);
}

.cds-template-thumb__line {
    height: 6px;
    border-radius: 3px;
    background: var(--im-color-line, #e2e8f0);
}

.cds-template-thumb__line--short {
    width: 45%;
}

.cds-template-thumb--modern .cds-template-thumb__header {
    background: var(--im-color-primary-soft, #e9edff);
}

.cds-template-thumb--classic {
    background: #f3f3f1;
}

.cds-template-thumb--classic .cds-template-thumb__header {
    background: #1a1a1a1a;
}

.cds-template-thumb--compact {
    gap: 3px;
    padding: 8px;
}

.cds-template-thumb--compact .cds-template-thumb__line {
    height: 4px;
}

.cds-numbering-card .cds-card-header h5 {
    font-size: 1rem;
}

.cds-numbering-preview {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: var(--im-radius-pill, 999px);
    background: var(--im-color-primary-soft, #e9edff);
    color: var(--im-color-primary, #3f41b5);
    font-size: 0.85rem;
}

.cds-sticky-footer {
    position: sticky;
    bottom: 0;
    z-index: 5;
    padding: 12px 16px;
    margin: 24px -16px -16px;
    background: #fff;
    border-top: 1px solid var(--im-color-line, #e2e8f0);
    box-shadow: 0 -4px 12px rgba(15, 23, 42, .05);
}

@media (max-width: 1024px) {
    .cds-grid-2 {
        grid-template-columns: 1fr;
    }

    .cds-template-grid {
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    }
}

@media (min-width: 992px) {
    .cds-sticky-footer {
        display: none !important;
    }
}

@media (max-width: 640px) {
    .cds-tabbar {
        margin: 14px 0 18px;
    }

    .cds-upload-row {
        flex-direction: column;
    }

    .cds-color-input {
        flex-wrap: wrap;
    }
}

/* CRM Commercial Document Settings — General workspace only. */
.kunos-commercial-general-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.18fr) minmax(360px, .82fr);
    gap: 18px;
    align-items: start
}

.kunos-commercial-card {
    padding: 20px;
    min-width: 0;
    border-radius: 16px
}

.kunos-commercial-card .cds-card-header {
    margin-bottom: 16px
}

.kunos-commercial-card .cds-card-header h5 {
    font-size: 17px;
    color: #172033
}

.kunos-commercial-card .cds-card-header p {
    margin: 4px 0 0;
    color: #667085;
    font-size: 12.5px;
    line-height: 1.45
}

.kunos-commercial-business-info,
.kunos-commercial-coming-soon {
    grid-column: 1/-1
}

.kunos-commercial-card .cds-grid-2 {
    gap: 10px 18px
}

.kunos-commercial-card .cds-field {
    gap: 5px
}

.kunos-commercial-card .im-label {
    font-size: 12.5px
}

.kunos-commercial-card-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--im-color-line, #e4e7ec)
}

/* e-Invoice tab — form alignment/polish (UI-only; no field/name/route changes).
   §6: one cohesive card, sections separated by a subtle top border instead of
   a new card per section. §5: tightened vertical rhythm between a section's
   own heading/help text and its first field row. §9: a single, consistently
   right-aligned action footer already comes from .kunos-commercial-card-actions
   above — reused as-is, never duplicated per section. */
.cds-einvoice-profile-card {
    padding-top: 18px
}

.cds-einvoice-profile-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 10px
}

.cds-einvoice-profile-header h5 {
    margin: 0;
    font-size: 17px;
    color: #172033
}

.cds-einvoice-profile-header p {
    margin: 4px 0 0;
    color: #667085;
    font-size: 12.5px;
    line-height: 1.45
}

.cds-einvoice-profile-header .im-chip {
    flex: none
}

.cds-einvoice-status-row {
    flex-wrap: wrap
}

.cds-einvoice-completeness {
    padding-top: 10px;
    margin-top: 6px;
    border-top: 1px dashed var(--im-color-line, #e4e7ec)
}

.cds-einvoice-section+.cds-einvoice-section {
    margin-top: 22px;
    padding-top: 22px;
    border-top: 1px solid var(--im-color-line, #e4e7ec)
}

.cds-einvoice-section .crm-form-section__title {
    margin-bottom: 2px;
    font-size: 14px
}

.cds-einvoice-section-help {
    margin: 2px 0 12px;
    color: #667085;
    font-size: 12.5px;
    line-height: 1.45
}

.cds-einvoice-edit-link {
    margin-top: 10px
}

.cds-einvoice-edit-link a {
    font-size: 12.5px;
    font-weight: 650;
    color: var(--im-color-primary, #4345c5);
    text-decoration: none
}

.cds-einvoice-edit-link a:hover {
    text-decoration: underline
}

@media(max-width:575.98px) {
    .cds-einvoice-profile-header {
        flex-direction: column;
        align-items: flex-start
    }
}

.kunos-commercial-asset-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px
}

.kunos-commercial-asset-tile {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    padding: 13px;
    border: 1px solid var(--im-color-line, #e4e7ec);
    border-radius: 12px;
    background: #fbfcff
}

.kunos-commercial-asset-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    color: #344054;
    font-size: 13px
}

.kunos-commercial-asset-title span {
    padding: 2px 7px;
    border-radius: 999px;
    background: #ecfdf3;
    color: #067647;
    font-size: 10px;
    font-weight: 700
}

.kunos-commercial-asset-tile>small {
    min-height: 32px;
    color: #667085;
    font-size: 10.5px;
    line-height: 1.45
}

.kunos-commercial-footer-upload {
    grid-column: 1/-1
}

.kunos-commercial-file-input {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important
}

.kunos-commercial-upload-actions {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap
}

.kunos-commercial-upload-actions>span {
    min-width: 0;
    flex: 1;
    color: #667085;
    font-size: 11px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.kunos-commercial-upload-actions label {
    margin: 0;
    cursor: pointer
}

.kunos-commercial-brand-assets .cds-upload-preview {
    height: 92px;
    background: #fff
}

.kunos-commercial-brand-assets .cds-upload-preview--wide {
    height: 86px
}

.kunos-commercial-asset-state {
    position: relative
}

.kunos-commercial-asset-state .kunos-commercial-asset-badge {
    padding: 3px 7px;
    border: 1px solid #d0d5dd;
    border-radius: 999px;
    background: #f8fafc;
    color: #667085;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase
}

.kunos-commercial-asset-current .kunos-commercial-asset-badge {
    border-color: #abefc6;
    background: #ecfdf3;
    color: #067647
}

.kunos-commercial-asset-available .kunos-commercial-asset-badge {
    border-color: #c7d7fe;
    background: #eef4ff;
    color: #3538cd
}

.kunos-commercial-asset-preview {
    position: relative;
    display: grid;
    place-items: center;
    padding: 10px;
    border-style: dashed;
    background: #fff;
    overflow: hidden
}

.kunos-commercial-asset-current .kunos-commercial-asset-preview,
.kunos-commercial-asset-available .kunos-commercial-asset-preview {
    border-style: solid
}

.kunos-commercial-asset-preview img {
    display: block;
    width: auto;
    max-width: 88%;
    height: auto;
    max-height: 100%;
    object-fit: contain
}

.kunos-commercial-use-current {
    margin: 0
}

.kunos-commercial-use-current .im-btn {
    width: 100%
}

.kunos-commercial-logo-example {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #98a2b3;
    letter-spacing: .12em
}

.kunos-commercial-logo-example i {
    display: block;
    width: 30px;
    height: 30px;
    border: 2px solid #b8c0cf;
    border-radius: 9px;
    background: linear-gradient(135deg, #eef0ff 0 48%, #d6daf8 48% 52%, #f8fafc 52%)
}

.kunos-commercial-logo-example strong {
    font-size: 12px
}

.kunos-commercial-signature-example {
    position: relative;
    width: 126px;
    height: 50px;
    color: #98a2b3;
    transform: rotate(-3deg)
}

.kunos-commercial-signature-example i {
    position: absolute;
    top: 17px;
    left: 6px;
    width: 110px;
    height: 18px;
    border-top: 2px solid #aeb7c7;
    border-radius: 50%;
    transform: skewX(-24deg)
}

.kunos-commercial-signature-example i:after {
    content: '';
    position: absolute;
    top: -10px;
    left: 43px;
    width: 38px;
    height: 18px;
    border: 2px solid #aeb7c7;
    border-right: 0;
    border-bottom: 0;
    border-radius: 50%;
    transform: rotate(-10deg)
}

.kunos-commercial-signature-example span {
    position: absolute;
    right: 5px;
    bottom: 0;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 10px;
    font-style: italic
}

.kunos-commercial-footer-example {
    position: relative;
    display: grid;
    width: 100%;
    grid-template-columns: 1fr auto auto;
    gap: 18px;
    align-items: end;
    padding: 12px 14px;
    color: #667085;
    font-size: 9px
}

.kunos-commercial-footer-example strong {
    color: #475467;
    font-size: 10px
}

.kunos-commercial-footer-example i {
    position: absolute;
    right: 14px;
    bottom: 5px;
    left: 14px;
    height: 1px;
    background: #cfd5df
}

.kunos-commercial-colour-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px
}

.kunos-commercial-appearance .cds-color-input {
    gap: 10px
}

.kunos-commercial-appearance .cds-color-swatch {
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    padding: 0;
    border: 1px solid #d0d5dd;
    border-radius: 50%;
    background: transparent;
    overflow: hidden;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}

.kunos-commercial-appearance .cds-color-swatch::-webkit-color-swatch-wrapper {
    padding: 0;
    border-radius: 50%;
}

.kunos-commercial-appearance .cds-color-swatch::-webkit-color-swatch {
    border: 0;
    border-radius: 50%;
}

.kunos-commercial-appearance .cds-color-swatch::-moz-color-swatch {
    border: 0;
    border-radius: 50%;
}

.kunos-commercial-document-preview {
    --commercial-preview-primary: #4338ca;
    --commercial-preview-secondary: #eef0ff;
    margin-top: 16px
}

.kunos-commercial-document-preview>small {
    display: block;
    margin-bottom: 7px;
    color: #667085;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase
}

.kunos-commercial-document-preview__paper {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 206px;
    padding: 18px;
    border: 1px solid #dce1ec;
    border-top: 5px solid var(--commercial-preview-primary);
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 6px 18px rgba(15, 23, 42, .06);
    overflow: hidden;
    color: #475467;
    font-size: 10px
}

.kunos-commercial-document-preview__brand {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 6px;
    color: var(--commercial-preview-primary)
}

.kunos-commercial-document-preview__brand img {
    width: auto;
    max-width: 78px;
    height: 25px;
    object-fit: contain
}

.kunos-commercial-document-preview__brand strong {
    font-size: 14px;
    letter-spacing: .08em
}

.kunos-commercial-document-preview__paper>i {
    height: 2px;
    background: var(--commercial-preview-secondary)
}

.kunos-commercial-document-preview__row {
    display: grid;
    grid-template-columns: 1fr 40px 62px;
    gap: 8px;
    padding: 8px;
    background: var(--commercial-preview-secondary);
    color: #344054;
    font-weight: 700
}

.kunos-commercial-document-preview__total {
    align-self: flex-end;
    margin-top: auto;
    padding: 6px 16px;
    background: var(--commercial-preview-primary);
    border-radius: 5px;
    color: #fff;
    font-weight: 800
}

.kunos-commercial-document-preview__footer {
    position: absolute;
    right: 12px;
    bottom: 7px;
    left: 12px;
    width: calc(100% - 24px);
    height: 20px;
    object-fit: contain;
    opacity: .65
}

.kunos-commercial-document-preview__footer+.kunos-commercial-document-preview__total {
    margin-bottom: 20px
}

.kunos-commercial-display-groups {
    display: flex;
    flex-direction: column
}

.kunos-commercial-display-groups fieldset {
    margin: 0;
    padding: 0 0 12px;
    border: 0
}

.kunos-commercial-display-groups fieldset+fieldset {
    padding-top: 13px;
    border-top: 1px solid var(--im-color-line, #e4e7ec)
}

.kunos-commercial-display-groups legend {
    float: none;
    width: auto;
    margin: 0 0 7px;
    padding: 0;
    color: #667085;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase
}

.kunos-commercial-display-groups fieldset>div {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2px 14px
}

.kunos-commercial-display-groups .cds-toggle-row {
    align-items: flex-start;
    padding: 6px 0;
    color: #344054;
    font-size: 12.5px;
    line-height: 1.35
}

.kunos-commercial-display-groups .cds-toggle-row input {
    margin-top: 1px
}

.kunos-commercial-default-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 14px;
    padding: 4px;
    border-radius: 10px;
    background: #f2f4f7
}

.kunos-commercial-default-tabs button {
    flex: 1;
    min-height: 36px;
    padding: 7px 10px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #667085;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer
}

.kunos-commercial-default-tabs button.active {
    background: #fff;
    color: var(--im-color-primary, #4338ca);
    box-shadow: 0 1px 4px rgba(15, 23, 42, .1)
}

.kunos-commercial-default-pane {
    display: none
}

.kunos-commercial-default-pane.active {
    display: block
}

.kunos-commercial-default-pane>p {
    margin: 0 0 12px;
    color: #667085;
    font-size: 11.5px
}

.kunos-commercial-default-pane form {
    display: flex;
    flex-direction: column;
    gap: 12px
}

.kunos-commercial-default-pane textarea {
    min-height: 78px;
    resize: vertical
}

.kunos-commercial-coming-soon {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 15px 18px;
    border: 1px dashed #d0d5dd;
    border-radius: 14px;
    background: #f8fafc
}

.kunos-commercial-coming-soon>div {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #344054
}

.kunos-commercial-coming-soon p {
    margin: 0;
    color: #667085;
    font-size: 12.5px
}

@media(max-width:1199.98px) {
    .kunos-commercial-general-grid {
        grid-template-columns: 1fr
    }

    .kunos-commercial-business-info,
    .kunos-commercial-coming-soon {
        grid-column: auto
    }
}

@media(max-width:767.98px) {
    .kunos-commercial-card {
        padding: 18px
    }

    .kunos-commercial-asset-grid,
    .kunos-commercial-colour-fields {
        grid-template-columns: 1fr
    }

    .kunos-commercial-footer-upload {
        grid-column: auto
    }

    .kunos-commercial-display-groups fieldset>div {
        grid-template-columns: 1fr
    }

    .kunos-commercial-coming-soon {
        align-items: flex-start;
        flex-direction: column;
        gap: 6px
    }

    .kunos-commercial-card-actions .im-btn {
        width: 100%
    }
}

@media(max-width:420px) {
    .kunos-commercial-upload-actions {
        align-items: stretch;
        flex-direction: column
    }

    .kunos-commercial-upload-actions>span {
        width: 100%
    }

    .kunos-commercial-upload-actions .im-btn {
        width: 100%
    }
}

/* CRM Commercial Document Settings — Document Templates workspace only. */
.kunos-commercial-template-workspace {
    --commercial-template-primary: #4338ca;
    --commercial-template-secondary: #eef0ff;
    padding: 22px;
    border-radius: 16px;
}

.kunos-commercial-template-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 20px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--im-color-line, #e4e7ec)
}

.kunos-commercial-template-header h5 {
    margin: 0;
    color: #172033;
    font-size: 18px
}

.kunos-commercial-template-header p {
    max-width: 590px;
    margin: 5px 0 0;
    color: #667085;
    font-size: 13px;
    line-height: 1.5
}

.kunos-commercial-document-type-control {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 260px
}

.kunos-commercial-document-type-control>span,
.kunos-commercial-template-section-title>span {
    color: #667085;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase
}

.kunos-commercial-document-type-switcher {
    display: flex;
    gap: 4px;
    padding: 4px;
    border-radius: 11px;
    background: #f2f4f7
}

.kunos-commercial-document-type-switcher button {
    flex: 1;
    min-height: 38px;
    padding: 7px 14px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #667085;
    font-size: 13px;
    font-weight: 750;
    cursor: pointer
}

.kunos-commercial-document-type-switcher button.active {
    background: #fff;
    color: var(--commercial-template-primary);
    box-shadow: 0 1px 5px rgba(15, 23, 42, .12)
}

.kunos-commercial-document-type-switcher button:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--commercial-template-primary) 20%, transparent);
    outline-offset: 2px
}

.kunos-commercial-template-pane[hidden] {
    display: none !important;
}

.kunos-commercial-template-section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 12px
}

.kunos-commercial-template-section-title small {
    color: #667085;
    font-size: 11.5px
}

.kunos-commercial-template-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px
}

.kunos-commercial-template-card {
    position: relative;
    display: flex;
    min-width: 0;
    flex-direction: column;
    margin: 0;
    border: 1.5px solid #dfe3ec;
    border-radius: 14px;
    background: #fff;
    overflow: hidden;
    cursor: pointer;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease
}

.kunos-commercial-template-card:hover {
    border-color: #aeb7d7;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .09);
    transform: translateY(-2px)
}

.kunos-commercial-template-card:focus-within {
    outline: 3px solid color-mix(in srgb, var(--commercial-template-primary) 18%, transparent);
    outline-offset: 2px
}

.kunos-commercial-template-card.kunos-commercial-template-selected {
    border-color: var(--commercial-template-primary);
    background: color-mix(in srgb, var(--commercial-template-secondary) 42%, #fff);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--commercial-template-primary) 12%, transparent), 0 10px 25px rgba(67, 56, 202, .1)
}

.kunos-commercial-template-check {
    position: absolute;
    z-index: 2;
    top: 10px;
    right: 10px;
    display: grid;
    width: 25px;
    height: 25px;
    place-items: center;
    border: 2px solid #d0d5dd;
    border-radius: 50%;
    background: #fff;
    color: transparent;
    font-size: 13px;
    font-weight: 900;
    box-shadow: 0 2px 7px rgba(15, 23, 42, .12)
}

.kunos-commercial-template-selected .kunos-commercial-template-check {
    border-color: var(--commercial-template-primary);
    background: var(--commercial-template-primary);
    color: #fff
}

.kunos-commercial-template-preview {
    display: flex;
    height: 198px;
    flex-direction: column;
    gap: 8px;
    padding: 18px 17px 14px;
    border-bottom: 1px solid #e4e7ec;
    background: #fbfcff;
    color: #667085;
    font-size: 9px;
    overflow: hidden
}

.kunos-commercial-template-preview__masthead {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px
}

.kunos-commercial-template-preview__masthead strong {
    color: var(--commercial-template-primary);
    font-size: 14px;
    letter-spacing: .08em
}

.kunos-commercial-template-preview__document-title {
    text-align: right
}

.kunos-commercial-template-preview__document-title small {
    display: block;
    margin-top: 2px;
    color: #8a8f98;
    font-size: 8px;
    font-style: italic;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none
}

.kunos-commercial-template-preview__brand {
    max-width: 42%;
    color: #344054;
    font-size: 10px;
    font-weight: 850;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.kunos-commercial-template-preview__brand img {
    display: block;
    width: auto;
    max-width: 72px;
    height: 24px;
    object-fit: contain
}

.kunos-commercial-template-preview__meta,
.kunos-commercial-template-preview__table-head,
.kunos-commercial-template-preview__line {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 34px 54px;
    gap: 7px;
    align-items: center
}

.kunos-commercial-template-preview__meta {
    grid-template-columns: 1fr 1fr;
    color: #98a2b3
}

.kunos-commercial-template-preview__meta span:last-child {
    text-align: right
}

/* Asymmetric tinted overview strip — mirrors the real Modern template's
   42/58 customer-col/overview-col split (see modern/quotation.blade.php,
   modern/invoice.blade.php): the first span stays plain/narrow, the second
   takes the wider share and carries the one deliberate secondary-colour tint. */
.kunos-commercial-template-preview__modern-overview {
    display: flex;
    gap: 0;
    padding-bottom: 6px;
    margin-bottom: 2px
}

.kunos-commercial-template-preview__modern-overview span {
    flex: 0 0 42%;
    padding: 0;
    background: transparent;
    border-bottom: 1px solid #e5e7ec;
    color: #98a2b3;
    font-size: 7px;
    font-weight: 750;
    text-transform: uppercase
}

.kunos-commercial-template-preview__modern-overview span:last-child {
    flex: 0 0 58%;
    padding: 4px 6px;
    background: var(--commercial-template-secondary, #eef0ff);
    border-bottom: 0;
    text-align: right
}

.kunos-commercial-template-preview__rule {
    height: 2px;
    background: var(--commercial-template-primary)
}

.kunos-commercial-template-preview__table-head {
    padding: 6px 7px 5px;
    background: var(--commercial-template-secondary, #eef0ff);
    border-bottom: 2px solid var(--commercial-template-primary);
    color: #344054;
    font-weight: 800
}

.kunos-commercial-template-preview__line {
    padding: 2px 7px
}

.kunos-commercial-template-preview__line i {
    display: block;
    height: 4px;
    border-radius: 4px;
    background: #d9deea
}

.kunos-commercial-template-preview__total {
    display: flex;
    align-items: center;
    align-self: flex-end;
    justify-content: space-between;
    gap: 14px;
    min-width: 116px;
    margin-top: auto;
    padding: 7px 10px;
    border-top: 0;
    background: var(--commercial-template-secondary, #eef0ff);
    color: var(--commercial-template-primary);
    text-transform: uppercase
}

.kunos-commercial-template-preview__total strong {
    font-size: 11px
}

.kunos-commercial-template-preview--classic {
    gap: 7px;
    padding: 16px 17px 13px;
    border: 0;
    border-bottom: 1px solid #d8d9dc;
    background: #fff;
    font-family: inherit
}

.kunos-commercial-template-preview--classic .kunos-commercial-template-preview__brand {
    font-family: inherit;
    font-weight: 800;
    letter-spacing: .03em;
    text-transform: uppercase
}

.kunos-commercial-template-preview--classic .kunos-commercial-template-preview__masthead strong {
    color: var(--commercial-template-primary);
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 13px;
    letter-spacing: .11em
}

.kunos-commercial-template-preview--classic .kunos-commercial-template-preview__meta {
    padding-bottom: 5px;
    border-bottom: 1px solid #c7c9cd
}

.kunos-commercial-template-preview--classic .kunos-commercial-template-preview__rule {
    height: 1px;
    background: var(--commercial-template-primary)
}

.kunos-commercial-template-preview--classic .kunos-commercial-template-preview__table-head {
    padding: 5px 6px;
    border-top: 1px solid #555b64;
    border-bottom: 1px solid #777c84;
    background: #f4f4f3;
    color: #34373c;
    font-family: inherit
}

.kunos-commercial-template-preview--classic .kunos-commercial-template-preview__line {
    padding: 2px 6px;
    border-bottom: 1px solid #e2e3e5
}

.kunos-commercial-template-preview--classic .kunos-commercial-template-preview__total {
    padding: 5px 0;
    border-top: 2px solid #34373c;
    border-radius: 0;
    background: transparent;
    color: var(--commercial-template-primary);
    font-family: Georgia, 'Times New Roman', serif
}

.kunos-commercial-template-preview--compact {
    gap: 3px;
    padding: 9px 12px;
    background: #fff
}

.kunos-commercial-template-preview--compact .kunos-commercial-template-preview__masthead {
    padding-bottom: 3px;
    border-bottom: 1px solid var(--commercial-template-primary)
}

.kunos-commercial-template-preview--compact .kunos-commercial-template-preview__masthead strong {
    font-size: 11px
}

.kunos-commercial-template-preview--compact .kunos-commercial-template-preview__document-title small {
    margin-top: 0;
    font-size: 6px
}

.kunos-commercial-template-preview--compact .kunos-commercial-template-preview__brand img {
    height: 17px
}

.kunos-commercial-template-preview--compact .kunos-commercial-template-preview__meta {
    padding: 2px 0;
    border-bottom: 1px solid #e4e7ec;
    font-size: 7px
}

.kunos-commercial-template-preview__compact-band {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 7px;
    padding: 2px 0;
    border-bottom: 1px solid #e4e7ec;
    color: #667085;
    font-size: 6.5px
}

.kunos-commercial-template-preview__compact-band strong {
    color: #344054;
    font-size: 6.8px
}

.kunos-commercial-template-preview--compact .kunos-commercial-template-preview__rule {
    display: none
}

.kunos-commercial-template-preview--compact .kunos-commercial-template-preview__table-head {
    padding: 3px 5px;
    background: #344054;
    color: #fff;
    font-size: 7px
}

.kunos-commercial-template-preview--compact .kunos-commercial-template-preview__line {
    padding: 1px 5px;
    border-bottom: 1px solid #eef0f4
}

.kunos-commercial-template-preview--compact .kunos-commercial-template-preview__line i {
    height: 3px
}

/* padding:3px 0 here is an explicit, load-bearing override — without it,
   Compact's total row would inherit the base rule's padding:7px 10px (added
   for Modern's tinted treatment below it) instead of keeping its own tight
   rhythm. Keep this padding declaration even if other properties change. */
.kunos-commercial-template-preview--compact .kunos-commercial-template-preview__total {
    padding: 3px 0;
    border-top: 1px solid var(--commercial-template-primary);
    border-radius: 0;
    background: transparent;
    color: var(--commercial-template-primary);
    font-size: 7px
}

.kunos-commercial-template-preview__compact-signoff {
    padding-top: 2px;
    border-top: 1px solid #d9dde5;
    color: #98a2b3;
    font-size: 6px
}

/* Invoice-only "Amount Due" thumbnail treatment — an Invoice thumbnail must
   visibly show Amount Due, never just a relabelled Quotation thumbnail.
   Modern mirrors its real header: a plain eyebrow label beside a bold
   primary-coloured amount, divided by a hairline rule. __due-band stays
   text-on-white here, matching the real Modern Invoice header exactly — the
   header itself was never given a filled/tinted treatment and still isn't.
   That is a DIFFERENT area from __total below: the real Modern Invoice's
   and Modern Quotation's totals-row grand total DO now carry a pale
   secondary-colour tint (a restrained, editorial treatment — see
   modern/quotation.blade.php's ".totals .grand td"). The actual prohibition
   that still holds is narrower than the old wording here implied: no BOLD
   SATURATED-PRIMARY-COLOUR FILL with white text used as a header/hero
   metric card (the old rejected "dashboard card" look). A pale
   secondary-colour tint behind text is the allowed, different, restrained
   alternative, and is exactly what __table-head and __total below now use.
   Compact keeps its small filled primary-colour chip in the header band —
   that is Compact's own dense-badge convention, unrelated to this
   distinction, and unchanged. Classic keeps its bordered-box convention on
   __total (shared final-total row, whose LABEL text already differs between
   "Quotation Total" and "Amount Due" per the Blade template). */
.kunos-commercial-template-preview__due-band {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding-bottom: 5px;
    border-bottom: 1px solid #e5e7ec;
    background: transparent;
    color: #8a8f98;
    font-size: 6.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em
}

.kunos-commercial-template-preview__due-band strong {
    color: var(--commercial-template-primary);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: none
}

.kunos-commercial-template-preview--compact .kunos-commercial-template-preview__due-chip {
    padding: 1px 6px;
    border-radius: 8px;
    background: var(--commercial-template-primary);
    color: #fff;
    font-size: 6.5px;
    font-weight: 800
}

.kunos-commercial-template-card__body {
    display: flex;
    min-height: 112px;
    flex-direction: column;
    padding: 14px 15px
}

.kunos-commercial-template-card__title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px
}

.kunos-commercial-template-card__title strong {
    color: #172033;
    font-size: 14px
}

.kunos-commercial-template-card__title span {
    color: var(--commercial-template-primary);
    font-size: 10.5px;
    font-weight: 800;
    white-space: nowrap
}

.kunos-commercial-template-card__body p {
    margin: 6px 0;
    color: #667085;
    font-size: 11.5px;
    line-height: 1.45
}

.kunos-commercial-template-card__body small {
    margin-top: auto;
    color: #475467;
    font-size: 10.5px;
    font-weight: 650
}

.kunos-commercial-template-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-top: 18px;
    padding-top: 15px;
    border-top: 1px solid #e4e7ec
}

.kunos-commercial-template-footer>div {
    display: flex;
    align-items: baseline;
    gap: 8px;
    min-width: 0
}

.kunos-commercial-template-footer span {
    color: #667085;
    font-size: 12px
}

.kunos-commercial-template-footer strong {
    color: #172033;
    font-size: 13px
}

.kunos-commercial-template-footer em {
    padding: 3px 8px;
    border-radius: 999px;
    background: #fff7ed;
    color: #b54708;
    font-size: 10.5px;
    font-style: normal;
    font-weight: 750
}

.kunos-commercial-template-coming-soon {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: 88px;
    margin-top: 16px;
    padding: 16px 20px;
    border: 1px dashed #d0d5dd;
    border-radius: 14px;
    background: #f8fafc
}

.kunos-commercial-template-coming-soon>div {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #344054;
    font-size: 13px
}

.kunos-commercial-template-coming-soon p {
    max-width: 650px;
    margin: 0;
    color: #667085;
    font-size: 12px;
    line-height: 1.45
}

@media(max-width:991.98px) {
    .kunos-commercial-template-header {
        align-items: stretch;
        flex-direction: column;
        gap: 14px
    }

    .kunos-commercial-document-type-control {
        min-width: 0
    }

    .kunos-commercial-template-grid {
        grid-template-columns: 1fr
    }

    .kunos-commercial-template-card {
        display: grid;
        grid-template-columns: minmax(240px, .8fr) minmax(0, 1fr)
    }

    .kunos-commercial-template-preview {
        border-right: 1px solid #e4e7ec;
        border-bottom: 0
    }

    .kunos-commercial-template-coming-soon {
        align-items: flex-start;
        flex-direction: column;
        gap: 7px
    }
}

@media(max-width:640px) {
    .kunos-commercial-template-workspace {
        padding: 17px
    }

    .kunos-commercial-template-card {
        display: flex
    }

    .kunos-commercial-template-preview {
        height: 185px;
        border-right: 0;
        border-bottom: 1px solid #e4e7ec
    }

    .kunos-commercial-template-section-title {
        align-items: flex-start;
        flex-direction: column;
        gap: 4px
    }

    .kunos-commercial-template-footer {
        align-items: stretch;
        flex-direction: column
    }

    .kunos-commercial-template-footer>div {
        align-items: flex-start;
        flex-wrap: wrap
    }

    .kunos-commercial-template-footer .im-btn {
        width: 100%
    }

    .kunos-commercial-template-coming-soon {
        min-height: 0;
        padding: 15px 17px
    }
}

/* Draft template field on the Quotation/Invoice detail page (boq-summary-field) */
.kunos-template-field {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px
}

.kunos-template-frozen-note {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #98a2b3;
    font-size: 11px;
    font-weight: 600
}

.kunos-template-frozen-note i {
    color: #98a2b3;
    font-size: 11px
}

/* Per-document "Change Template" drawer — reuses the same honest mini
   preview + card CSS as the Settings picker (see _template-mini-preview.
   blade.php), but the drawer is far narrower (--im-drawer-width) than the
   Settings page, so cards stack in a single column instead of 3-up —
   otherwise each mini preview would be illegible. */
.kunos-template-drawer__help {
    margin: 0 0 16px;
    color: #667085;
    font-size: 12.5px;
    line-height: 1.5
}

.kunos-template-drawer .kunos-commercial-template-grid {
    grid-template-columns: 1fr;
    gap: 14px
}

.kunos-template-drawer .kunos-commercial-template-card {
    display: grid;
    grid-template-columns: minmax(160px, .65fr) minmax(0, 1fr)
}

.kunos-template-drawer .kunos-commercial-template-preview {
    height: auto;
    min-height: 150px;
    border-right: 1px solid #e4e7ec;
    border-bottom: 0
}

@media(max-width:520px) {
    .kunos-template-drawer .kunos-commercial-template-card {
        display: flex;
        flex-direction: column
    }

    .kunos-template-drawer .kunos-commercial-template-preview {
        border-right: 0;
        border-bottom: 1px solid #e4e7ec
    }
}

/* CRM Commercial Document Settings — Numbering, Units & Tax, Payment only. */
.kunos-commercial-settings-card {
    min-width: 0;
    padding: 20px;
    border-radius: 16px
}

.kunos-commercial-section-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px
}

.kunos-commercial-section-heading h5 {
    margin: 0;
    color: #172033;
    font-size: 17px
}

.kunos-commercial-section-heading p {
    margin: 4px 0 0;
    color: #667085;
    font-size: 12.5px;
    line-height: 1.45
}

.kunos-commercial-section-heading--secondary {
    margin-top: 22px;
    margin-bottom: 12px
}

.kunos-commercial-subheading {
    margin: 18px 0 11px;
    padding-bottom: 8px;
    border-bottom: 1px solid #eaecf0;
    color: #667085;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase
}

.kunos-commercial-subheading:first-of-type {
    margin-top: 0
}

.kunos-commercial-compact-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 13px 16px
}

.kunos-commercial-compact-form-grid .cds-field {
    gap: 5px;
    min-width: 0
}

.kunos-commercial-compact-form-grid .im-label {
    font-size: 12px
}

.kunos-commercial-coming-soon-panel {
    display: flex;
    min-width: 0;
    min-height: 112px;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    padding: 17px 19px;
    border: 1px dashed #d0d5dd;
    border-radius: 14px;
    background: #f8fafc
}

.kunos-commercial-coming-soon-panel>div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: #344054;
    font-size: 13px
}

.kunos-commercial-coming-soon-panel>p {
    margin: 0;
    color: #667085;
    font-size: 12px;
    line-height: 1.5
}

.kunos-commercial-numbering-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
    gap: 18px
}

.kunos-commercial-future-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px
}

.kunos-commercial-numbering-grid .cds-numbering-card header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 16px;
    padding-bottom: 13px;
    border-bottom: 1px solid #eaecf0
}

.kunos-commercial-numbering-grid .cds-numbering-card header h6 {
    margin: 0;
    color: #172033;
    font-size: 15px
}

.kunos-commercial-numbering-grid .cds-numbering-card header span {
    display: block;
    margin-top: 3px;
    color: #98a2b3;
    font-size: 10px;
    font-weight: 750;
    text-transform: uppercase
}

.kunos-commercial-numbering-grid .cds-numbering-preview {
    max-width: 55%;
    padding: 7px 10px;
    border: 1px solid #dfe3ec;
    border-radius: 8px;
    background: #f8fafc;
    color: #4338ca;
    font-size: 13px;
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.kunos-commercial-inline-toggle .cds-toggle-row {
    min-height: 42px;
    padding: 10px 0
}

.kunos-commercial-numbering-workspace>.kunos-commercial-card-actions,
.kunos-commercial-units-tax-workspace>.kunos-commercial-card-actions {
    margin-top: 18px
}

.kunos-commercial-numbering-soon {
    min-height: 88px;
    margin-top: 20px
}

.kunos-commercial-future-grid .kunos-commercial-invoice-numbering>strong {
    color: #4338ca;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 16px
}

.kunos-commercial-future-grid .kunos-commercial-invoice-numbering>span {
    align-self: flex-start
}

.kunos-commercial-units-tax-grid {
    display: grid;
    grid-template-columns: minmax(340px, .85fr) minmax(0, 1.15fr);
    gap: 18px;
    align-items: start
}

.kunos-commercial-unit-count {
    flex: 0 0 auto;
    padding: 5px 9px;
    border-radius: 999px;
    background: #eef0ff;
    color: #4338ca;
    font-size: 10.5px;
    font-weight: 700
}

.kunos-commercial-unit-summary {
    display: flex;
    min-height: 31px;
    flex-wrap: wrap;
    gap: 6px;
    margin: 12px 0
}

.kunos-commercial-unit-summary>span,
.kunos-commercial-unit-summary>em {
    padding: 4px 8px;
    border-radius: 999px;
    background: #f0f2ff;
    color: #4338ca;
    font-size: 10.5px;
    font-style: normal;
    font-weight: 700
}

.kunos-commercial-unit-summary small {
    opacity: .72;
    font-size: 9px;
    text-transform: uppercase
}

.kunos-commercial-unit-search {
    position: relative;
    margin-top: 4px
}

.kunos-commercial-unit-search>span {
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 13px;
    color: #98a2b3;
    font-size: 19px;
    transform: translateY(-52%);
    pointer-events: none
}

.kunos-commercial-unit-search .im-input {
    padding-left: 38px
}

.kunos-commercial-unit-list-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 14px 0 7px;
    color: #667085;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase
}

.kunos-commercial-unit-list-heading button {
    padding: 2px 0;
    border: 0;
    background: transparent;
    color: #4338ca;
    font-size: 10.5px;
    font-weight: 750;
    cursor: pointer
}

.kunos-commercial-unit-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 3px 12px;
    max-height: 322px;
    padding: 4px 8px 4px 0;
    overflow-y: auto;
    overscroll-behavior: contain
}

.kunos-commercial-unit-grid .cds-toggle-row {
    min-width: 0;
    padding: 7px 5px;
    color: #344054;
    font-size: 11.5px
}

.kunos-commercial-unit-grid .cds-toggle-row>span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.kunos-commercial-unit-grid small {
    color: #98a2b3;
    font-size: 9px;
    text-transform: uppercase
}

.kunos-commercial-unit-empty {
    margin: 18px 0;
    color: #98a2b3;
    font-size: 12px;
    text-align: center
}

.kunos-commercial-payment-workspace {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, .34fr);
    gap: 18px;
    align-items: start
}

.kunos-commercial-payment-future {
    display: flex;
    flex-direction: column;
    gap: 14px
}

.kunos-commercial-payment-textareas {
    display: grid;
    gap: 12px
}

.kunos-commercial-payment-textareas .cds-field {
    gap: 5px
}

.kunos-commercial-payment-textareas textarea {
    min-height: 66px;
    resize: vertical
}

.kunos-commercial-input-suffix {
    position: relative
}

.kunos-commercial-input-suffix .im-input {
    padding-right: 38px
}

.kunos-commercial-input-suffix>span {
    position: absolute;
    top: 50%;
    right: 14px;
    color: #667085;
    font-size: 12px;
    font-weight: 750;
    transform: translateY(-50%);
    pointer-events: none
}

.kunos-commercial-reminders-soon ul {
    display: grid;
    gap: 5px;
    margin: 2px 0 0;
    padding: 0;
    list-style: none;
    color: #475467;
    font-size: 11.5px
}

.kunos-commercial-reminders-soon li:before {
    content: '•';
    margin-right: 7px;
    color: #f79009
}

.kunos-commercial-reminders-soon>small {
    color: #98a2b3;
    font-size: 10.5px;
    line-height: 1.45
}

@media(max-width:1199.98px) {

    .kunos-commercial-units-tax-grid,
    .kunos-commercial-payment-workspace {
        grid-template-columns: 1fr
    }

    .kunos-commercial-payment-future {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }
}

@media(max-width:991.98px) {

    .kunos-commercial-numbering-grid,
    .kunos-commercial-future-grid {
        grid-template-columns: 1fr
    }

    .kunos-commercial-unit-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }
}

@media(max-width:640px) {
    .kunos-commercial-settings-card {
        padding: 17px
    }

    .kunos-commercial-compact-form-grid,
    .kunos-commercial-payment-future,
    .kunos-commercial-unit-grid {
        grid-template-columns: 1fr
    }

    .kunos-commercial-numbering-grid .cds-numbering-card header {
        align-items: stretch;
        flex-direction: column
    }

    .kunos-commercial-numbering-grid .cds-numbering-preview {
        max-width: none;
        text-align: left
    }

    .kunos-commercial-numbering-workspace>.kunos-commercial-card-actions .im-btn,
    .kunos-commercial-units-tax-workspace>.kunos-commercial-card-actions .im-btn {
        width: 100%
    }

    .kunos-commercial-unit-grid {
        max-height: 360px
    }

    .kunos-commercial-section-heading {
        align-items: flex-start;
        flex-direction: column
    }
}

/* Kunos brand logos — base class carries no sizing, every variant is explicitly capped */
.kunos-brand-logo {
    display: block;
    object-fit: contain;
    flex-shrink: 0;
}

.kunos-sidebar-brand {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    height: 40px;
    overflow: hidden;
    flex: 0 0 auto;
    margin-bottom: 8px;
}

.kunos-brand-logo--horizontal {
    width: auto;
    height: auto;
    max-width: 150px;
    max-height: 38px;
}

.kunos-brand-logo--vertical {
    width: auto;
    height: auto;
    max-width: 160px;
    max-height: 160px;
    margin: 0 auto;
}

.kunos-brand-logo--icon {
    width: 36px;
    height: 36px;
    max-width: 36px;
    max-height: 36px;
}

.kunos-brand-logo--mobile {
    width: 28px;
    height: 28px;
    max-width: 28px;
    max-height: 28px;
    display: inline-block;
    vertical-align: middle;
    margin-right: 8px;
}

.kunos-brand-logo--inline {
    width: 22px;
    height: 22px;
    max-width: 22px;
    max-height: 22px;
    display: inline-block;
    vertical-align: middle;
}

/* Sidebar shows the wordmark expanded, the icon mark collapsed — scoped to the sidebar brand slot only */
.kunos-sidebar-brand .kunos-brand-logo--icon {
    display: none;
}

html.bos-sidebar-collapsed .bos-sidebar .kunos-sidebar-brand {
    justify-content: center;
    height: auto;
    margin-bottom: 0;
}

html.bos-sidebar-collapsed .bos-sidebar .kunos-sidebar-brand .kunos-brand-logo--horizontal {
    display: none;
}

html.bos-sidebar-collapsed .bos-sidebar .kunos-sidebar-brand .kunos-brand-logo--icon {
    display: block;
    margin: 0 auto;
}

/* Collapsed desktop sidebar module flyout:
   Outer shell has 28px Kunos radius on all four corners and clips strictly (overflow: hidden).
   Inner menu container has viewport-constrained max-height and scrolls independently. */
.bos-sidebar-flyout,
#bosSidebarFlyout {
    border-radius: 28px !important;
    max-height: calc(100vh - 24px) !important;
    max-height: calc(100dvh - 24px) !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    scrollbar-gutter: auto !important;
}

.bos-sidebar-flyout > .bos-sidebar-flyout-title,
#bosSidebarFlyout > .bos-sidebar-flyout-title {
    flex: 0 0 auto !important;
}

.bos-sidebar-flyout > .bos-sidebar-flyout-menu,
.bos-sidebar-flyout > .nav-content,
#bosSidebarFlyout > .bos-sidebar-flyout-menu,
#bosSidebarFlyout > .nav-content,
html.bos-sidebar-collapsed .bos-sidebar .sidebar-nav > .nav-item > .nav-content.show {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: calc(100vh - 24px) !important;
    max-height: calc(100dvh - 24px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior-y: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.18) transparent;
}

.bos-sidebar-flyout > .bos-sidebar-flyout-menu::-webkit-scrollbar,
.bos-sidebar-flyout > .nav-content::-webkit-scrollbar,
#bosSidebarFlyout > .bos-sidebar-flyout-menu::-webkit-scrollbar,
#bosSidebarFlyout > .nav-content::-webkit-scrollbar,
html.bos-sidebar-collapsed .bos-sidebar .sidebar-nav > .nav-item > .nav-content.show::-webkit-scrollbar {
    width: 4px;
}

.bos-sidebar-flyout > .bos-sidebar-flyout-menu::-webkit-scrollbar-track,
.bos-sidebar-flyout > .nav-content::-webkit-scrollbar-track,
#bosSidebarFlyout > .bos-sidebar-flyout-menu::-webkit-scrollbar-track,
#bosSidebarFlyout > .nav-content::-webkit-scrollbar-track,
html.bos-sidebar-collapsed .bos-sidebar .sidebar-nav > .nav-item > .nav-content.show::-webkit-scrollbar-track {
    background: transparent;
}

.bos-sidebar-flyout > .bos-sidebar-flyout-menu::-webkit-scrollbar-thumb,
.bos-sidebar-flyout > .nav-content::-webkit-scrollbar-thumb,
#bosSidebarFlyout > .bos-sidebar-flyout-menu::-webkit-scrollbar-thumb,
#bosSidebarFlyout > .nav-content::-webkit-scrollbar-thumb,
html.bos-sidebar-collapsed .bos-sidebar .sidebar-nav > .nav-item > .nav-content.show::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.18);
    border-radius: 10px;
}

/* Programme structure semester select width in action column */
.progstruk-sem-select {
    min-width: 140px !important;
    width: auto !important;
    white-space: nowrap !important;
}

/* Custom select dropdowns are portaled to <body> (see bos-select.js) so `position: fixed`
   positions correctly even when the trigger lives inside a transformed ancestor (e.g. a
   sliding drawer/offcanvas), which would otherwise redefine the containing block for
   fixed-position descendants and silently mis-place the menu off-screen. */
.bos-select-custom-dropdown.bos-select-portal {
    position: fixed !important;
    display: none;
    z-index: var(--bos-layer-modal-dropdown, 1095) !important;
}

.bos-select-custom-dropdown.bos-select-portal.is-open {
    display: block !important;
}

/* ==========================================================================
   BOQ paper scanning (Scan BOQ Template)
   ========================================================================== */
.im-input-sm {
    min-height: 34px;
    padding: 6px 10px;
    font-size: .8rem;
}

.im-btn-link-secondary {
    background: none;
    border: none;
    box-shadow: none;
    color: var(--im-color-text-soft);
    text-decoration: underline;
    padding: 8px 10px;
}

.im-btn-link-secondary:hover {
    color: var(--im-color-primary);
}

.boq-scan-context {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    margin-bottom: 18px;
    border: 1px solid var(--im-color-line);
    border-radius: 16px;
    background: var(--im-color-primary-soft);
}

.boq-scan-context__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--im-color-surface);
    color: var(--im-color-primary);
    font-size: 1.2rem;
    flex: 0 0 auto;
}

.boq-scan-context__label {
    margin: 0;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--im-color-text-soft);
}

.boq-scan-context__boq {
    display: block;
    font-size: 1.1rem;
    color: var(--im-color-text);
}

.boq-scan-context__company {
    margin: 2px 0 0;
    color: var(--im-color-text-soft);
    font-size: .85rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

.boq-scan-guidance {
    padding: 0 20px 12px;
}

.boq-scan-guidance ul {
    margin: 0;
    padding-left: 18px;
    color: var(--im-color-text-soft);
    font-size: .82rem;
    line-height: 1.6;
    columns: 2;
}

.boq-scan-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 0 20px 16px;
}

.boq-scan-dropzone {
    margin: 0 20px 16px;
    padding: 28px;
    border: 2px dashed var(--im-color-line);
    border-radius: 16px;
    background: var(--im-color-surface-soft);
    text-align: center;
    transition: border-color .15s ease, background .15s ease;
}

.boq-scan-dropzone.is-dragover {
    border-color: var(--im-color-primary);
    background: var(--im-color-primary-soft);
}

.boq-scan-dropzone__empty {
    color: var(--im-color-text-soft);
}

.boq-scan-dropzone__empty i {
    font-size: 2.2rem;
    display: block;
    margin-bottom: 8px;
    color: var(--im-color-primary);
}

.boq-scan-dropzone__preview {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 14px;
}

.boq-scan-dropzone__preview img {
    max-width: 160px;
    max-height: 160px;
    border-radius: 10px;
    border: 1px solid var(--im-color-line);
    object-fit: cover;
}

.boq-scan-dropzone__file {
    display: flex;
    align-items: center;
    gap: 10px;
    text-align: left;
}

.boq-scan-dropzone__file i {
    font-size: 1.4rem;
    color: var(--im-color-primary);
}

.boq-scan-dropzone__file span {
    display: block;
    color: var(--im-color-text-soft);
    font-size: .78rem;
}

.boq-scan-progress {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 20px 16px;
    padding: 14px 16px;
    border-radius: 12px;
    background: var(--im-color-primary-soft);
    color: var(--im-color-primary-strong);
    font-weight: 650;
}

.boq-scan-progress__spinner {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2.5px solid var(--im-color-primary-border);
    border-top-color: var(--im-color-primary);
    animation: boq-scan-spin .8s linear infinite;
    flex: 0 0 auto;
}

@keyframes boq-scan-spin {
    to {
        transform: rotate(360deg);
    }
}

.boq-scan-error {
    margin: 0 20px 16px;
    padding: 12px 16px;
    border-radius: 12px;
    background: #fef2f2;
    color: #b91c1c;
    font-size: .85rem;
}

.boq-scan-error--success {
    background: var(--im-color-primary-soft);
    color: var(--im-color-primary-strong);
}

.boq-scan-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 20px;
    border-top: 1px solid var(--im-color-line);
}

.boq-scan-resume .boq-panel__footer {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 16px 20px;
}

/* Review workspace */
.boq-scan-review-layout {
    display: grid;
    grid-template-columns: 40% 60%;
    gap: 18px;
    align-items: start;
}

.boq-scan-review-doc {
    position: sticky;
    top: 18px;
    border: 1px solid var(--im-color-line);
    border-radius: 16px;
    background: var(--im-color-surface);
    overflow: hidden;
}

.boq-scan-review-doc__toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--im-color-line);
    font-weight: 700;
    font-size: .82rem;
}

.boq-scan-zoom {
    display: flex;
    gap: 6px;
}

.boq-scan-review-doc__frame {
    max-height: 78vh;
    overflow: auto;
    background: var(--im-color-surface-soft);
}

.boq-scan-review-doc__zoom {
    position: relative;
    transform-origin: top left;
    transition: transform .15s ease;
    display: inline-block;
}

.boq-scan-review-doc__zoom img {
    display: block;
    max-width: 100%;
    height: auto;
}

.boq-scan-region-highlight {
    position: absolute;
    border: 2px solid #f59e0b;
    background: rgba(245, 158, 11, .18);
    border-radius: 4px;
    pointer-events: none;
    transition: all .1s ease;
}

.boq-scan-review-rows {
    min-width: 0;
}

.boq-scan-import-mode {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    margin-bottom: 14px;
    border: 1px solid var(--im-color-line);
    border-radius: 12px;
    background: var(--im-color-surface);
    font-size: .82rem;
}

.boq-scan-import-mode label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
}

.boq-scan-rows {
    display: grid;
    gap: 14px;
}

.boq-scan-row {
    border: 1px solid var(--im-color-line);
    border-radius: 14px;
    background: var(--im-color-surface);
    padding: 14px 16px;
}

.boq-scan-row__header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.boq-scan-row__include {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .78rem;
    font-weight: 650;
    color: var(--im-color-text-soft);
}

.boq-scan-row__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 10px;
}

.boq-scan-row__grid--item {
    grid-template-columns: repeat(4, 1fr);
}

.boq-scan-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .03em;
}

.boq-scan-badge--high {
    background: #dcfce7;
    color: #15803d;
}

.boq-scan-badge--review {
    background: #fef3c7;
    color: #92400e;
}

.boq-scan-badge--unreadable {
    background: #fee2e2;
    color: #b91c1c;
}

.boq-scan-field-status {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: .64rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .02em;
    vertical-align: middle;
}

.boq-scan-field-status--detected {
    background: #dcfce7;
    color: #15803d;
}

.boq-scan-field-status--needs_review {
    background: #fef3c7;
    color: #92400e;
}

.boq-scan-field-status--unreadable {
    background: #fee2e2;
    color: #b91c1c;
}

.boq-scan-field-status--not_applicable {
    display: none;
}

.boq-scan-handwritten {
    color: var(--im-color-primary);
    margin-left: 4px;
}

.boq-scan-mismatch {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    margin-bottom: 10px;
    border-radius: 10px;
    background: #fef3c7;
    color: #92400e;
    font-size: .8rem;
    font-weight: 600;
}

.boq-scan-inventory {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    font-size: .78rem;
}

.boq-scan-chip {
    border: 1px solid var(--im-color-line);
    border-radius: 999px;
    padding: 5px 12px;
    background: var(--im-color-surface-soft);
    font-size: .74rem;
    cursor: pointer;
}

.boq-scan-chip--exact {
    border-color: var(--im-color-primary-border);
    color: var(--im-color-primary);
}

.boq-scan-chip.is-selected {
    background: var(--im-color-primary);
    color: #fff;
    border-color: var(--im-color-primary);
}

.boq-scan-sticky-actions {
    position: sticky;
    bottom: 0;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 0;
    margin-top: 18px;
    background: var(--im-color-bg, #f5f6fb);
    border-top: 1px solid var(--im-color-line);
}

@media (max-width: 1200px) {
    .boq-scan-review-layout {
        grid-template-columns: 100%;
    }

    .boq-scan-review-doc {
        position: static;
        max-height: 50vh;
    }

    .boq-scan-review-doc__frame {
        max-height: 40vh;
    }
}

@media (max-width: 768px) {
    .boq-scan-guidance ul {
        columns: 1;
    }

    .boq-scan-row__grid,
    .boq-scan-row__grid--item {
        grid-template-columns: 1fr 1fr;
    }

    .boq-scan-actions {
        flex-direction: column;
    }

    .boq-scan-actions .im-btn {
        width: 100%;
    }

    .boq-scan-sticky-actions {
        flex-wrap: wrap;
    }

    .boq-scan-sticky-actions .im-btn {
        flex: 1 1 auto;
    }
}

@media (max-width: 480px) {

    .boq-scan-row__grid,
    .boq-scan-row__grid--item {
        grid-template-columns: 1fr;
    }
}

/* -- Deal -> BOQ tab: per-row [Open][Scan Paper] actions + Scan New BOQ / manual create actions -- */
.boq-row-actions-list {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

/* -- Manual "Create BOQ" launched from inside a Deal: compact read-only context banner -- */
.boq-context-banner {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    margin-bottom: 18px;
    border: 1px solid var(--im-color-line);
    border-radius: 14px;
    background: var(--im-color-primary-soft);
}

.boq-context-banner__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--im-color-surface);
    color: var(--im-color-primary);
    font-size: 1.05rem;
    flex: 0 0 auto;
}

.boq-context-banner__label {
    display: block;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--im-color-text-soft);
}

.boq-context-banner p {
    margin: 2px 0 0;
    color: var(--im-color-text-soft);
    font-size: .85rem;
}

/* -- Scan workspace: "OCR Ready" state badge (only rendered when the feature is genuinely available) -- */
.boq-scan-ready-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--im-color-success-soft);
    color: var(--im-color-success-ink);
    font-size: .75rem;
    font-weight: 700;
    flex: 0 0 auto;
}

.boq-scan-ready-help {
    margin: -4px 20px 12px;
    color: var(--im-color-text-soft);
    font-size: .78rem;
}

@media (max-width: 768px) {
    .boq-row-actions-list {
        width: 100%;
    }

    .boq-row-actions-list .im-btn {
        flex: 1 1 auto;
    }
}

/* -- Site Visit workspace: header context bar, progress checklist, tabs reuse .crm-tabs-nav -- */
.site-visit-context {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px 20px;
    margin-bottom: 14px;
    border: 1px solid var(--im-color-line);
    border-radius: 16px;
    background: var(--im-color-surface);
}

.site-visit-context__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
}

.site-visit-context__item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--im-color-text-soft);
    font-size: .85rem;
}

.site-visit-context__address {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--im-color-text-soft);
    font-size: .85rem;
}

.site-visit-progress {
    padding: 16px 20px;
    margin-bottom: 18px;
    border: 1px solid var(--im-color-line);
    border-radius: 16px;
    background: var(--im-color-surface);
}

.site-visit-progress h2 {
    margin: 0 0 10px;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--im-color-text-soft);
}

.site-visit-progress__steps {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin: 0 0 12px;
    padding: 0;
    list-style: none;
}

.site-visit-progress__steps li {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--im-color-text-soft);
    font-size: .85rem;
}

.site-visit-progress__steps li i {
    font-size: .95rem;
}

.site-visit-progress__steps li.is-complete {
    color: var(--im-color-success-ink);
}

.site-visit-progress__steps li.is-current {
    color: var(--im-color-primary);
    font-weight: 600;
}

.site-visit-progress__action {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-top: 12px;
    border-top: 1px solid var(--im-color-line);
}

.site-visit-progress__current {
    color: var(--im-color-text-soft);
    font-size: .85rem;
}

.site-visit-overview {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 18px;
    align-items: start;
}

@media (max-width: 992px) {
    .site-visit-overview {
        grid-template-columns: 1fr;
    }
}

.site-visit-readiness__list {
    margin: 0 0 12px;
}

.site-visit-readiness__list>div {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--im-color-line);
}

.site-visit-readiness__list>div:last-child {
    border-bottom: none;
}

.site-visit-readiness__list dt {
    color: var(--im-color-text-soft);
    font-size: .82rem;
}

.site-visit-readiness__list dd {
    margin: 0;
    font-weight: 600;
}

.site-visit-report-field {
    margin-bottom: 16px;
}

.site-visit-report-field textarea::placeholder {
    color: var(--im-color-text-soft);
    opacity: .8;
}

.site-visit-assignment {
    padding: 14px 0;
    border-bottom: 1px solid var(--im-color-line);
}

.site-visit-assignment:last-child {
    border-bottom: none;
}

.site-visit-assignment__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
}

.site-visit-assignment__ineligible {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 4px;
    font-size: .76rem;
    color: var(--im-color-warning-ink, #b45309);
}

.site-visit-assignment__form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
    border-radius: 12px;
    background: var(--im-color-bg, #f5f6fb);
}

.site-visit-file {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--im-color-line);
}

.site-visit-file:last-child {
    border-bottom: none;
}

.site-visit-file__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--im-color-primary-soft);
    color: var(--im-color-primary);
    flex: 0 0 auto;
}

.site-visit-file__meta {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.site-visit-file__meta span {
    font-size: .78rem;
}

.site-visit-file__actions {
    display: flex;
    gap: 6px;
    flex: 0 0 auto;
}

.site-visit-upload-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 12px;
}

.site-visit-photo-tips {
    margin-bottom: 14px;
    font-size: .82rem;
    color: var(--im-color-text-soft);
}

.site-visit-photo-tips summary {
    cursor: pointer;
    font-weight: 600;
}

.site-visit-related__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 14px 0;
    border-bottom: 1px solid var(--im-color-line);
}

.site-visit-related__row:last-child {
    border-bottom: none;
}

.site-visit-missing-list {
    margin: 0;
    padding-left: 18px;
}

@media (max-width: 768px) {
    .site-visit-progress__steps {
        gap: 10px 16px;
    }

    .site-visit-progress__action {
        flex-direction: column;
        align-items: stretch;
    }

    .site-visit-progress__action .im-btn {
        width: 100%;
    }

    .site-visit-assignment__header {
        flex-direction: column;
    }

    .site-visit-file {
        align-items: flex-start;
    }
}

/* -- Site Visit: mobile-only sticky action bar, mirrors exactly one action at a time -- */
.site-visit-sticky-actions {
    display: none;
}

@media (max-width: 767.98px) {
    .site-visit-sticky-actions {
        display: block;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1030;
        padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
        background: var(--im-color-surface);
        border-top: 1px solid var(--im-color-line);
        box-shadow: 0 -4px 16px rgba(15, 23, 42, .08);
    }

    .site-visit-sticky-actions .im-btn {
        width: 100%;
    }
}

/* Same technique already used for Borang's sticky bar: keep the floating Kunos AI launcher/window
   clear of this page's sticky action bar on narrow screens. */
body.site-visit-sticky-active .bos-ai-launcher {
    bottom: 78px;
}

@media (max-width: 767.98px) {
    body.site-visit-sticky-active .bos-ai-launcher {
        bottom: 86px;
    }
}

/* Same technique again for the Quotation/Invoice draft sticky footer (.qt-footer): without this,
   the floating Kunos AI launcher sits directly on top of the footer's rightmost button (e.g.
   Submit for Approval / Issue Invoice), silently intercepting its clicks. */
body.qt-footer-active .bos-ai-launcher {
    bottom: 78px;
}

@media (max-width: 767.98px) {
    body.qt-footer-active .bos-ai-launcher {
        bottom: 86px;
    }
}

/* -- Deal -> BOQ tab: row [...] menu (Edit/Cancel/Delete Draft) and its Delete-blocked error box -- */
.boq-row-menu .dropdown-menu {
    min-width: 180px;
}

.boq-delete-error {
    margin-top: 12px;
    padding: 12px 16px;
    border-radius: 12px;
    background: #fef2f2;
    color: #b91c1c;
    font-size: .85rem;
}

/* ==========================================================================
   Form Builder (Modules/FormBuilder)
   Builder canvas (fb-*), preview, respondent + public form pages (rf-*)
   ========================================================================== */

/* --- Builder page --- */
.fb-builder-page {
    background: #f4f6fb;
    margin: 0 -12px;
    padding: 16px 14px 70px;
    min-height: calc(100vh - 60px);
}

.fb-builder-header {
    position: sticky;
    top: 0;
    z-index: 20;
    background: #fff;
    border: 1px solid var(--im-color-line);
    border-radius: 16px;
    padding: 14px 18px 0;
    margin-bottom: 18px;
    box-shadow: 0 4px 14px rgba(26, 38, 67, .05);
}

.fb-builder-header__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.fb-builder-header__actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.fb-builder-header__meta {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    padding: 10px 0;
    font-size: 13px;
}

.fb-builder-header__meta strong {
    font-size: 17px;
    color: var(--im-color-text, #17233b);
}

.fb-builder-header__status {
    color: #64748b;
}

.fb-builder-tabs {
    display: flex;
    gap: 4px;
    overflow-x: auto;
}

.fb-builder-tab {
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    padding: 10px 14px;
    font-weight: 750;
    color: #64748b;
    cursor: pointer;
    white-space: nowrap;
}

.fb-builder-tab[aria-selected=true] {
    color: var(--im-color-primary, #4942c7);
    border-bottom-color: var(--im-color-primary, #4942c7);
}

.fb-builder-panel[hidden] {
    display: none;
}

.fb-canvas {
    display: grid;
    gap: 16px;
}

.fb-title-card,
.fb-question-card {
    background: #fff;
    border: 1.5px solid var(--im-color-line);
    border-radius: 18px;
    padding: 18px 20px;
}

.fb-title-card {
    border-left: 6px solid var(--im-color-primary, #4942c7);
    display: grid;
    gap: 10px;
}

.fb-title-card__title {
    border: 0;
    font-size: 22px;
    font-weight: 800;
    padding: 4px;
    color: var(--im-color-text, #17233b);
}

.fb-title-card__description {
    border: 0;
    font-size: 13.5px;
    color: #64748b;
    padding: 4px;
    resize: vertical;
}

.fb-title-card__title:focus,
.fb-title-card__description:focus {
    outline: none;
    background: #f8fafc;
    border-radius: 8px;
}

.fb-question-card {
    display: flex;
    gap: 10px;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.fb-question-card:focus-within {
    border-color: var(--im-color-primary, #4942c7);
    box-shadow: 0 0 0 3px rgba(73, 66, 199, .12);
}

.fb-question-card__handle {
    flex: 0 0 20px;
    color: #cbd5e1;
    cursor: grab;
    padding-top: 6px;
}

.fb-question-card__body {
    flex: 1 1 auto;
    min-width: 0;
    display: grid;
    gap: 10px;
}

.fb-question-card__row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}

.fb-question-card__label-input {
    flex: 1 1 240px;
    border: 0;
    border-bottom: 1.5px solid var(--im-color-line);
    padding: 8px 4px;
    font-size: 15px;
    font-weight: 700;
    background: transparent;
}

.fb-question-card__section-title {
    font-size: 18px;
}

.fb-question-card__help-input {
    width: 100%;
    border: 0;
    border-bottom: 1px dashed var(--im-color-line);
    padding: 6px 4px;
    font-size: 12.5px;
    color: #64748b;
    background: transparent;
    resize: vertical;
}

.fb-question-card__label-input:focus,
.fb-question-card__help-input:focus {
    outline: none;
    border-color: var(--im-color-primary, #4942c7);
}

.fb-question-card__type-select {
    flex: 0 0 200px;
    min-height: 40px;
}

.fb-answer-preview {
    padding: 10px 12px;
    border: 1px dashed var(--im-color-line);
    border-radius: 10px;
    font-size: 12.5px;
}

.fb-option-list {
    display: grid;
    gap: 6px;
}

.fb-option-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.fb-option-row__marker {
    color: #94a3b8;
}

.fb-option-row__input {
    flex: 1 1 auto;
    border: 0;
    border-bottom: 1px solid var(--im-color-line);
    padding: 5px 2px;
    font-size: 13px;
    background: transparent;
}

.fb-option-row__input:focus {
    outline: none;
    border-color: var(--im-color-primary, #4942c7);
}

.fb-option-row__remove {
    border: 0;
    background: none;
    color: #94a3b8;
    cursor: pointer;
}

.fb-option-row__remove:hover {
    color: #dc2626;
}

.fb-add-option-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 0;
    background: none;
    color: var(--im-color-primary, #4942c7);
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    padding: 4px 2px;
    align-self: flex-start;
}

.fb-file-notice {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 10px;
    background: #fff9e9;
    color: #6f5012;
    font-size: 12px;
    margin: 0;
}

.fb-rating-preview {
    display: flex;
    gap: 10px;
    color: #94a3b8;
    font-size: 12px;
}

.fb-question-card__footer {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-top: 10px;
    border-top: 1px solid #eef0f5;
    flex-wrap: wrap;
}

.fb-divider {
    flex: 1 1 auto;
}

.fb-required-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 700;
    margin-left: auto;
}

.fb-empty-state {
    text-align: center;
    padding: 60px 20px;
    background: #fff;
    border: 1.5px dashed var(--im-color-line);
    border-radius: 18px;
}

.fb-floating-toolbar {
    position: sticky;
    top: 120px;
    float: right;
    margin-top: -120px;
    margin-right: -60px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.fb-toolbar-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--im-color-line);
    background: #fff;
    color: var(--im-color-primary, #4942c7);
    font-weight: 800;
    box-shadow: 0 6px 16px rgba(26, 38, 67, .08);
    cursor: pointer;
}

.fb-toolbar-btn:hover {
    background: var(--im-color-primary, #4942c7);
    color: #fff;
}

.fb-question-card-placeholder {
    border: 2px dashed #cbd5e1;
    border-radius: 18px;
    background: #eef0f8;
}

#fb-save-status.fb-save-status--error {
    color: #dc2626;
}

@media (max-width: 1199.98px) {
    .fb-floating-toolbar {
        position: static;
        float: none;
        margin: 12px 0 0;
        flex-direction: row;
        justify-content: center;
    }
}

@media (max-width: 575.98px) {
    .fb-builder-header__actions {
        width: 100%;
    }

    .fb-builder-header__actions .im-btn {
        flex: 1 1 auto;
    }
}

.fb-builder-page .im-input-sm {
    min-height: 36px;
    padding: 6px 10px;
    font-size: 12.5px;
}

.fb-builder-page .im-select-sm {
    min-height: 36px;
    height: auto;
    padding: 4px 10px;
    font-size: 12.5px;
}

.fb-advanced-toggle {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 0;
    background: none;
    color: var(--im-color-primary, #4942c7);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    padding: 4px 2px;
}

.fb-advanced-panel {
    display: grid;
    gap: 12px;
    padding: 14px;
    background: #f8fafc;
    border-radius: 12px;
    margin: 4px 0;
}

.fb-settings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
}

.fb-settings-field {
    display: grid;
    gap: 4px;
    font-size: 11.5px;
    color: #64748b;
    font-weight: 700;
}

.fb-settings-field__label {
    display: block;
    font-size: 11.5px;
    color: #64748b;
    font-weight: 700;
    margin-bottom: 4px;
}

.fb-settings-field--error .im-input,
.fb-settings-field--error .im-select {
    border-color: #dc2626;
}

.fb-setting-error {
    color: #dc2626;
    font-weight: 600;
}

.fb-inline-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
}

.fb-file-categories {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
}

.fb-rating-preview-labels {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    margin-top: -4px;
}

.fb-field-key {
    font-size: 11px;
    color: #64748b;
}

.fb-field-key code {
    background: #eef0f8;
    padding: 2px 6px;
    border-radius: 6px;
}

.fb-link-card {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 10px 0;
    border-top: 1px solid #eef0f5;
}

.fb-link-card--empty {
    color: #64748b;
    font-size: 12.5px;
    padding: 10px 0;
    border-top: 1px solid #eef0f5;
}

.fb-link-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    flex: 1 1 auto;
    min-width: 0;
}

.fb-link-row__label {
    font-size: 11.5px;
    font-weight: 700;
    color: #64748b;
    white-space: nowrap;
}

.fb-link-input {
    flex: 1 1 240px;
    min-width: 160px;
    font-size: 12px;
    color: #475569;
    background: #f8fafc;
}

.fb-link-card__close {
    margin-left: auto;
    color: #dc2626;
}

/* --- Shared respondent form fields (preview, in-app respondent, public) --- */
.rf-card {
    background: #fff;
    border: 1px solid var(--rf-line, var(--im-color-line));
    border-radius: 18px;
    padding: 26px 28px;
    box-shadow: 0 10px 28px rgba(26, 38, 67, .06);
    transition: border-color .15s ease, box-shadow .15s ease
}

.rf-card:has(.rf-control:focus, input:focus, textarea:focus, select:focus) {
    border-color: #c9c6f7;
    box-shadow: 0 10px 28px rgba(73, 70, 200, .12)
}

/* Width grid — .rf-form-grid wraps both the in-app/public respondent form
   (#rf-respondent-form) and the Preview form; each field's .rf-card carries
   rf-card--full/--half from the SAME settings_json['width'] value the
   Builder canvas reads (see _respondent_field.blade.php). Replaces the old
   sibling-margin stacking (.rf-card+.rf-card) with grid gap. */
.rf-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px
}

.rf-form-grid>.rf-card {
    grid-column: 1/-1
}

.rf-form-grid>.rf-card.rf-card--half {
    grid-column: span 1
}

#rf-respondent-form>.rf-card:first-child {
    position: relative;
    padding-top: 28px;
    overflow: hidden
}

#rf-respondent-form>.rf-card:first-child::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: linear-gradient(90deg, var(--rf-purple), #8b87ef)
}

.rf-title {
    font-size: 25px;
    font-weight: 800;
    color: var(--rf-ink, #17233b);
    margin: 0 0 8px;
    letter-spacing: -.01em
}

.rf-description {
    color: var(--rf-muted);
    white-space: pre-wrap;
    margin: 0;
    line-height: 1.55
}

.rf-section {
    margin: 10px 0 4px
}

.rf-section__title {
    font-size: 16px;
    font-weight: 800;
    margin: 0
}

.rf-section__help,
.rf-info__body {
    color: var(--rf-muted);
    font-size: 13px
}

.rf-info__title {
    font-size: 14px;
    font-weight: 700;
    margin: 0 0 4px
}

.rf-field {
    margin-bottom: 4px
}

.rf-field__label {
    display: flex;
    align-items: baseline;
    gap: 10px;
    font-weight: 700;
    font-size: 14.5px;
    margin-bottom: 6px;
    color: var(--rf-ink)
}

.rf-field__number {
    flex: 0 0 auto;
    display: inline-grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--rf-purple-soft);
    color: var(--rf-purple);
    font-size: 11px;
    font-weight: 800;
    transform: translateY(1px)
}

.rf-field__label-text {
    flex: 1 1 auto
}

.rf-required {
    color: #e11d48;
    margin-left: 3px
}

.rf-field__help {
    color: var(--rf-muted);
    font-size: 12px;
    margin: 0 0 8px
}

.rf-control {
    width: 100%;
    min-height: 46px;
    border: 1.5px solid var(--rf-line, var(--im-color-line));
    border-radius: 12px;
    padding: 11px 14px;
    font: inherit;
    color: var(--rf-ink);
    background: #fff;
    transition: border-color .15s ease, box-shadow .15s ease
}

.rf-control:hover {
    border-color: #c3cee2
}

.rf-control:focus {
    outline: none;
    border-color: var(--rf-purple);
    box-shadow: 0 0 0 4px var(--rf-purple-soft)
}

textarea.rf-control {
    resize: vertical
}

.rf-choice-group {
    display: grid;
    gap: 8px
}

.rf-choice {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 13.75px;
    font-weight: 600;
    color: var(--rf-ink);
    padding: 12px 15px;
    border: 1.5px solid var(--rf-line, var(--im-color-line));
    border-radius: 12px;
    background: #fff;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease
}

.rf-choice:hover {
    border-color: #c3cee2;
    background: #fafbff
}

.rf-choice:has(input:checked) {
    border-color: var(--rf-purple);
    background: var(--rf-purple-soft);
    box-shadow: 0 0 0 1px var(--rf-purple) inset
}

.rf-choice input {
    appearance: none;
    -webkit-appearance: none;
    flex: 0 0 auto;
    width: 19px;
    height: 19px;
    border: 2px solid #c7cfe0;
    background: #fff;
    margin: 0;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease
}

.rf-choice input[type=radio] {
    border-radius: 50%
}

.rf-choice input[type=radio]:checked {
    border-color: var(--rf-purple);
    background: radial-gradient(circle, var(--rf-purple) 0 40%, transparent 44%)
}

.rf-choice input[type=checkbox] {
    border-radius: 6px
}

.rf-choice input[type=checkbox]:checked {
    border-color: var(--rf-purple);
    background-color: var(--rf-purple);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-7'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 11px
}

.rf-rating {
    padding: 2px 0
}

.rf-rating__scale {
    display: flex;
    gap: 8px;
    flex-wrap: wrap
}

.rf-rating__option {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    font-size: 12px
}

.rf-rating__option input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px
}

.rf-rating__option span {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    border: 1.5px solid var(--rf-line, var(--im-color-line));
    font-weight: 700;
    color: var(--rf-ink);
    transition: border-color .15s ease, background .15s ease, color .15s ease
}

.rf-rating__option:hover span {
    border-color: #c3cee2
}

.rf-rating__option:has(input:checked) span {
    border-color: var(--rf-purple);
    background: var(--rf-purple);
    color: #fff
}

.rf-rating__labels {
    display: flex;
    justify-content: space-between;
    color: var(--rf-muted);
    font-size: 11.5px;
    margin-top: 8px
}

.rf-submit {
    margin-top: 6px;
    width: 100%;
    min-height: 50px;
    font-size: 15px;
    font-weight: 700;
    border-radius: 14px;
    box-shadow: 0 10px 22px rgba(73, 70, 200, .25);
    transition: transform .15s ease, box-shadow .15s ease
}

.rf-submit:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 12px 26px rgba(73, 70, 200, .32)
}

.rf-submit:disabled {
    opacity: .75;
    cursor: progress
}

.rf-submit:disabled::after {
    content: "";
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-left: 9px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, .5);
    border-top-color: #fff;
    vertical-align: -2px;
    animation: rf-spin .7s linear infinite
}

@keyframes rf-spin {
    to {
        transform: rotate(360deg)
    }
}

.rf-field--invalid .rf-control {
    border-color: #e11d48
}

.rf-field-error {
    color: #e11d48;
    font-size: 12px;
    margin: 6px 0 0
}

.rf-alert {
    border-radius: 12px;
    padding: 12px 14px;
    font-size: 13px;
    margin: 14px 0
}

.rf-alert--error {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #b91c1c
}

.rf-success {
    text-align: center;
    padding: 44px 26px;
    animation: rf-pop .35s ease
}

@keyframes rf-pop {
    from {
        opacity: 0;
        transform: translateY(6px) scale(.98)
    }

    to {
        opacity: 1;
        transform: none
    }
}

.rf-success__icon {
    display: inline-grid;
    place-items: center;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #e8f8ee;
    color: #1f9d55;
    font-size: 28px;
    margin-bottom: 16px
}

.rf-success h2 {
    margin: 0 0 8px;
    font-size: 20px;
    color: var(--rf-ink)
}

.rf-success__reference {
    color: var(--rf-muted);
    font-size: 12px;
    margin-top: 10px
}

.rf-file-list.attachment-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px
}

.attachment-chip {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border: 1px solid var(--rf-line, var(--im-color-line));
    border-radius: 999px;
    background: #fff;
    font-size: 11px;
    color: #364258
}

.attachment-chip__remove {
    border: 0;
    background: transparent;
    color: #94a3b8;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    padding: 0
}

.attachment-chip__remove:hover {
    color: #d43b55
}

.honeypot {
    position: absolute !important;
    left: -9999px !important
}

@media(max-width:600px) {
    .rf-card {
        padding: 18px 18px
    }

    .rf-title {
        font-size: 21px
    }

    .rf-form-grid {
        grid-template-columns: 1fr
    }

    .rf-form-grid>.rf-card.rf-card--half {
        grid-column: 1/-1
    }
}

/* --- Builder preview page --- */
.rf-preview-shell {
    max-width: 900px;
    margin: 0 auto;
}

.im-page.rf-preview-shell {
    padding-top: 0 !important;
}

.rf-preview-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

.rf-preview-devices {
    display: inline-flex;
    gap: 6px;
    padding: 4px;
    border: 1px solid var(--im-color-line);
    border-radius: 12px;
    background: #f8fafc;
}

.rf-preview-devices button {
    border: 0;
    background: transparent;
    padding: 7px 14px;
    border-radius: 9px;
    font-weight: 700;
    font-size: 12.5px;
    color: #64748b;
    cursor: pointer;
}

.rf-preview-devices button[aria-pressed=true] {
    background: #fff;
    color: var(--im-color-primary);
    box-shadow: 0 2px 6px rgba(26, 38, 67, .08);
}

.rf-preview-banner {
    padding: 10px 14px;
    border-radius: 12px;
    background: #fff9e9;
    border: 1px solid #f1d486;
    color: #6f5012;
    font-size: 12.5px;
    margin-bottom: 16px;
}

.rf-preview-frame {
    margin: 0 auto;
    transition: max-width .2s ease;
    background: #f4f6fb;
    border-radius: 20px;
    padding: 24px;
    container-type: inline-size;
}

.rf-preview-frame[data-device=desktop] {
    max-width: 900px;
}

.rf-preview-frame[data-device=tablet] {
    max-width: 620px;
}

.rf-preview-frame[data-device=mobile] {
    max-width: 375px;
}

.rf-preview-frame .rf-submit {
    width: auto;
}

/* Preview's device toggle resizes this container, not the real browser
   viewport, so the @media(max-width:600px) mobile-stack rule above would
   never fire for the simulated "mobile" device — mirror it as a container
   query so the Preview's own mobile view genuinely stacks full width too. */
@container (max-width: 420px) {
    .rf-form-grid {
        grid-template-columns: 1fr;
    }

    .rf-form-grid>.rf-card.rf-card--half {
        grid-column: 1/-1;
    }
}

/* --- In-app respondent page --- */
.rf-respondent-shell {
    max-width: 720px;
    margin: 0 auto
}

/* --- Standalone public form page (body carries .rf-public-body) --- */
:root {
    --rf-purple: #4946c8;
    --rf-purple-soft: #efefff;
    --rf-line: #dde4f0;
    --rf-muted: #69758a;
    --rf-ink: #17243b;
    --rf-bg: #f4f6fb
}

.rf-public-body {
    margin: 0;
    background: var(--rf-bg);
    color: var(--rf-ink);
    font-family: Inter, system-ui, -apple-system, sans-serif;
    min-height: 100vh
}

.rf-public-body * {
    box-sizing: border-box
}

.rf-public-body button,
.rf-public-body input,
.rf-public-body select,
.rf-public-body textarea {
    font: inherit
}

.rf-public-bg {
    position: fixed;
    inset: 0;
    z-index: -1;
    background: radial-gradient(1100px 620px at 50% -12%, var(--rf-purple-soft) 0%, var(--rf-bg) 62%)
}

.rf-public-shell {
    width: min(720px, calc(100% - 32px));
    margin: 40px auto 60px
}

.rf-public-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 26px
}

.rf-public-brand__logo {
    height: 34px;
    width: auto
}

.rf-public-footer {
    text-align: center;
    color: var(--rf-muted);
    font-size: 12px;
    margin: 28px 0 0
}

.rf-unavailable {
    text-align: center;
    color: var(--rf-muted);
    padding: 36px 22px
}

/* --- Template picker & template management (Phase F2) --- */
.fbt-hint {
    color: #69758a;
    font-size: 13px;
    margin: 0 0 18px
}

.fbt-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px
}

.fbt-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: #fff;
    border: 1px solid var(--im-color-line, #dde4f0);
    border-radius: 16px;
    padding: 18px;
    transition: box-shadow .15s ease, border-color .15s ease
}

.fbt-card:hover {
    border-color: #c7cff0;
    box-shadow: 0 6px 18px rgba(26, 38, 67, .08)
}

.fbt-card__icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: #efefff;
    color: #4946c8;
    font-size: 19px
}

.fbt-card__name {
    font-size: 15.5px;
    font-weight: 800;
    margin: 2px 0 0;
    color: #17243b
}

.fbt-card__description {
    font-size: 12.5px;
    color: #69758a;
    margin: 0;
    flex: 1
}

.fbt-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px
}

.fbt-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 6px
}

.fbt-empty {
    color: #69758a;
    font-size: 13px;
    text-align: center;
    padding: 18px 0;
    margin: 0
}

.fbt-field-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px
}

.fbt-field-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 12px;
    border: 1px solid var(--im-color-line, #dde4f0);
    border-radius: 10px;
    background: #f8fafc
}

.fbt-field-row__label {
    font-size: 13px;
    font-weight: 600;
    color: #17243b;
    min-width: 0;
    overflow-wrap: anywhere
}

.fbt-field-row__meta {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
    flex-shrink: 0
}

.fbt-selected {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 10px 14px;
    border-radius: 12px;
    background: #efefff;
    border: 1px solid #d5d4f7;
    color: #3a38a5;
    font-size: 13px;
    margin-bottom: 14px
}

.fbt-selected i {
    font-size: 15px
}

.fbt-selected a {
    font-weight: 700;
    color: #4946c8;
    text-decoration: none
}

.fbt-selected a:hover {
    text-decoration: underline
}

.fbt-table-icon {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: #efefff;
    color: #4946c8;
    font-size: 15px;
    flex-shrink: 0
}

/* Phase F4 — template picker category grouping */
.fbt-category-section {
    margin-bottom: 28px
}

.fbt-category-section__title {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #69758a;
    margin: 0 0 12px
}

/* Phase F4 — template picker search */
.fbt-search-wrap {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 420px;
    min-width: 320px;
    margin: 0 0 22px
}

.fbt-search-icon {
    position: absolute;
    top: 50%;
    left: 16px;
    transform: translateY(-50%);
    z-index: 1;
    font-size: 13px;
    line-height: 1;
    color: #94a3b8;
    pointer-events: none
}

.fbt-search-wrap .im-input {
    -webkit-appearance: none !important;
    appearance: none !important;
    box-sizing: border-box !important;
    width: 100% !important;
    height: 38px !important;
    min-height: 38px !important;
    padding: 6px 34px 6px 42px !important;
    font-size: 13px !important
}

.fbt-search-wrap .im-input::-webkit-search-decoration,
.fbt-search-wrap .im-input::-webkit-search-cancel-button {
    -webkit-appearance: none;
    display: none
}

.fbt-search-clear {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 0;
    padding: 2px;
    line-height: 1;
    color: #94a3b8;
    cursor: pointer
}

.fbt-search-clear:hover,
.fbt-search-clear:focus-visible {
    color: #475569
}

.fbt-empty-state {
    text-align: center;
    padding: 48px 20px;
    color: var(--im-color-text-soft, #64748b)
}

.fbt-empty-state i {
    font-size: 40px;
    color: #cbd5e1;
    display: block;
    margin-bottom: 12px
}

.fbt-empty-state h4 {
    margin: 0 0 4px;
    font-size: 15px;
    font-weight: 700;
    color: var(--im-color-text, #1e293b)
}

.fbt-empty-state p {
    margin: 0 0 14px;
    font-size: 13px
}

@media(max-width:600px) {
    .fbt-grid {
        grid-template-columns: 1fr
    }

    .fbt-field-row {
        flex-direction: column;
        align-items: flex-start
    }

    .fbt-search-wrap {
        max-width: none;
        min-width: 0
    }
}

/* --- Response management (Phase F3) --- */
.fbs-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px
}

.fbs-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: #fff;
    border: 1px solid var(--im-color-line, #dde4f0);
    border-radius: 14px;
    padding: 14px 16px
}

.fbs-stat__value {
    font-size: 18px;
    font-weight: 800;
    color: #17243b;
    overflow-wrap: anywhere
}

.fbs-stat__label {
    font-size: 12px;
    color: #69758a;
    font-weight: 600
}

.fbs-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center
}

.fbs-filters .im-input,
.fbs-filters .im-select {
    max-width: 190px
}

.fbs-summary-cell {
    max-width: 320px;
    font-size: 12.5px;
    color: #374357;
    overflow-wrap: anywhere
}

.fbs-detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 320px);
    gap: 16px;
    align-items: start
}

.fbs-answer {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 14px 0;
    border-bottom: 1px solid var(--im-color-line, #dde4f0);
    min-width: 0
}

.fbs-answer:first-child {
    padding-top: 0
}

.fbs-answer:last-child {
    border-bottom: 0;
    padding-bottom: 0
}

.fbs-answer__label {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 13.5px;
    font-weight: 700;
    color: #17243b
}

.fbs-answer__value {
    font-size: 13.75px;
    color: #374357;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    line-height: 1.5
}

.fbs-answer__empty {
    font-size: 13px;
    color: #98a3b8;
    font-style: italic
}

.fbs-answer__file {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--rf-purple, #4946c8);
    text-decoration: none;
    overflow-wrap: anywhere;
    padding: 6px 10px;
    border: 1px solid var(--im-color-line, #dde4f0);
    border-radius: 10px;
    background: #fafbff
}

.fbs-answer__file:hover {
    border-color: #c3cee2;
    text-decoration: none
}

.fbs-answer-section {
    font-size: 14.5px;
    font-weight: 800;
    color: #17243b;
    margin: 18px 0 6px;
    padding-top: 14px;
    border-top: 1px solid var(--im-color-line, #dde4f0)
}

.fbs-answer-section:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: 0
}

.fbs-answer-paragraph {
    font-size: 12.5px;
    color: #69758a;
    margin: 4px 0
}

.fbs-meta {
    position: sticky;
    top: 16px;
    min-width: 0
}

.fbs-meta__title {
    font-size: 13px;
    font-weight: 800;
    color: #17243b;
    margin: 0 0 14px;
    text-transform: uppercase;
    letter-spacing: .03em
}

.fbs-meta__list {
    display: grid;
    grid-template-columns: minmax(0, auto) minmax(0, 1fr);
    gap: 10px 12px;
    margin: 0;
    font-size: 12.5px
}

.fbs-meta__list dt {
    color: #69758a;
    font-weight: 600;
    min-width: 0
}

.fbs-meta__list dd {
    margin: 0;
    color: #17243b;
    overflow-wrap: anywhere;
    min-width: 0
}

.fbs-meta__list dd code {
    overflow-wrap: anywhere;
    word-break: break-all;
    font-size: 11.5px
}

@media(max-width:900px) {
    .fbs-detail-grid {
        grid-template-columns: 1fr
    }

    .fbs-meta {
        position: static
    }
}

@media(max-width:600px) {

    .fbs-filters .im-input,
    .fbs-filters .im-select {
        max-width: 100%;
        flex: 1 1 100%
    }
}

/* --- Analytics + builder Responses tab (Phase F3 §23–24) --- */
.fba-charts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 12px
}

.fba-chart {
    min-width: 0
}

.fba-chart__title {
    font-size: 14px;
    font-weight: 800;
    color: #17243b;
    margin: 0 0 10px
}

.fba-chart__canvas {
    position: relative;
    height: 220px;
    max-width: 100%
}

.fba-field {
    min-width: 0
}

.fba-field__title {
    font-size: 15px;
    font-weight: 800;
    color: #17243b;
    margin: 0
}

.fba-field__meta {
    font-size: 12.5px;
    color: #69758a;
    margin: 0 0 8px
}

.fba-bar-row {
    display: grid;
    grid-template-columns: 150px 1fr 110px;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px
}

.fba-bar-row__label {
    font-size: 12.5px;
    font-weight: 600;
    color: #17243b;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.fba-bar-row__track {
    height: 10px;
    background: #eef1f8;
    border-radius: 999px;
    overflow: hidden
}

.fba-bar-row__fill {
    height: 100%;
    background: #4c6ef5;
    border-radius: 999px
}

.fba-bar-row__value {
    font-size: 12px;
    color: #69758a;
    text-align: right;
    white-space: nowrap
}

.fba-mini-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 10px
}

.fba-mini-stat {
    background: #f7f9fd;
    border: 1px solid var(--im-color-line, #dde4f0);
    border-radius: 10px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0
}

.fba-mini-stat__value {
    font-size: 18px;
    font-weight: 800;
    color: #17243b;
    overflow-wrap: anywhere
}

.fba-mini-stat__label {
    font-size: 11.5px;
    color: #69758a;
    font-weight: 600
}

.fb-latest-responses {
    display: flex;
    flex-direction: column;
    gap: 8px
}

.fb-latest-response {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid var(--im-color-line, #dde4f0);
    border-radius: 10px;
    text-decoration: none;
    color: inherit;
    min-width: 0
}

.fb-latest-response:hover {
    background: #f7f9fd
}

.fb-latest-response__who {
    font-size: 13px;
    font-weight: 600;
    color: #17243b;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.fb-latest-response__when {
    font-size: 12px;
    color: #69758a;
    white-space: nowrap
}

/* Form Builder workspace — layout only; field and integration actions retain
   their existing endpoints and delegated event handlers.
   Questions tab: single-canvas WYSIWYG builder presented as ONE full-width
   workspace card (.fb-questions-workspace > .im-card.fb-questions-card),
   matching Responses'/Settings' content width and card language instead of
   a narrow centred preview. .fb-canvas is a plain grid inside that same
   white card — no separate grey canvas box. Question cards expand their
   settings inline (.fb-question-card--expanded), never reparented; a
   compact popover (.fb-add-chooser) replaces the old permanent "Add
   Fields" palette. */
.fb-builder-page {
    max-width: 1500px;
    margin: 0 auto;
    padding: 12px 16px 72px;
    background: #f4f6fb
}

.fb-builder-header {
    top: 68px;
    padding: 10px 16px 0;
    border-radius: 14px
}

.fb-builder-header__top {
    flex-wrap: nowrap
}

.fb-builder-header__meta {
    padding: 7px 0
}

.fb-builder-body,
.fb-builder-panel {
    min-width: 0
}

.fb-questions-workspace {
    width: 100%
}

.fb-questions-card {
    width: 100%;
    margin: 0;
    padding: 22px 24px
}

.fb-questions-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 18px;
    margin-bottom: 18px;
    border-bottom: 1px solid #edf0f5
}

.fb-questions-card__title {
    margin: 0;
    color: #17233b;
    font-size: 17px;
    font-weight: 800
}

.fb-questions-card__subtitle {
    margin: 4px 0 0;
    color: #778195;
    font-size: 12.5px
}

.fb-questions-card__header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0
}

.fb-questions-card__count {
    color: #8a94a6;
    font-size: 12px;
    font-weight: 650;
    white-space: nowrap
}

/* Canvas grid — the sole existing Width storage (settings_json['width'],
   rendered server-side as data-field-width) drives grid-column here. */
.fb-canvas {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px
}

.fb-title-card,
.fb-empty-state,
.fb-add-question-wrap {
    grid-column: 1/-1
}

.fb-title-card {
    padding: 16px 19px;
    border-radius: 14px;
    border-left-width: 4px;
    border-color: #e7eaf1
}

.fb-title-card__title {
    font-size: 19px
}

.fb-question-card {
    position: relative;
    grid-column: span 1;
    min-height: 78px;
    padding: 12px 14px;
    border-width: 1px;
    border-radius: 13px;
    box-shadow: 0 1px 4px rgba(30, 41, 59, .02)
}

.fb-question-card[data-field-width="full"] {
    grid-column: 1/-1
}

.fb-question-card:hover {
    border-color: #c9cfe0;
    box-shadow: 0 2px 8px rgba(30, 41, 59, .05)
}

.fb-question-card--expanded {
    grid-column: 1/-1;
    border-color: #8179dc;
    background: #fbfaff;
    box-shadow: 0 1px 8px rgba(73, 66, 199, .07)
}

.fb-question-card__body {
    gap: 7px
}

.fb-question-card__summary {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    width: 100%;
    border: 0;
    background: none;
    padding: 0;
    margin: 0;
    text-align: left;
    font: inherit;
    color: inherit;
    cursor: pointer
}

.fb-question-card__chevron {
    flex: 0 0 auto;
    font-size: 11px;
    color: #94a3b8;
    transition: transform .15s ease
}

.fb-question-card--expanded .fb-question-card__chevron {
    transform: rotate(90deg);
    color: var(--im-color-primary, #4942c7)
}

.fb-question-card__label-summary {
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
    color: #26334a;
    font-size: 14px;
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap
}

.fb-question-card__type-badge {
    flex: 0 0 auto;
    padding: 4px 8px;
    border-radius: 999px;
    background: #f1f3f7;
    color: #6a7486;
    font-size: 10.5px;
    font-weight: 750
}

.fb-question-card__editor {
    display: none;
    flex-direction: column;
    gap: 12px;
    padding-top: 6px
}

.fb-question-card--expanded .fb-question-card__editor {
    display: flex
}

.fb-question-card__editor-footer {
    margin-top: 2px
}

.fb-settings-field--grow,
.fb-settings-field--width {
    flex: 1 1 0;
    min-width: 200px
}

/* Advanced settings: cap column width so items form a tidy 2–4 column grid
   on a wide expanded card instead of stretching edge to edge. */
.fb-question-card .fb-settings-grid {
    grid-template-columns: repeat(auto-fit, minmax(200px, 280px))
}

.fb-advanced-toggle i {
    display: inline-block;
    transition: transform .15s ease
}

.fb-advanced-toggle[aria-expanded="true"] i {
    transform: rotate(90deg)
}

.fb-question-card__footer {
    padding-top: 7px;
    border-top: 0
}

.fb-question-card__actions {
    display: flex;
    align-items: center;
    gap: 3px;
    margin-left: auto
}

.fb-question-card__actions .im-icon-btn {
    width: 30px;
    height: 30px
}

.fb-required-toggle {
    margin-left: 0;
    color: #5e6879;
    font-size: 11.5px
}

/* Collapsed-card overflow ("More") menu — Move Up/Down/Delete live here so
   the collapsed row keeps only Required + Duplicate + one entry point at
   equal visual weight; drag-and-drop remains the primary reorder method. */
.fb-card-menu {
    position: relative
}

.fb-card-menu__panel {
    position: absolute;
    z-index: 5;
    top: calc(100% + 4px);
    right: 0;
    display: none;
    flex-direction: column;
    min-width: 168px;
    padding: 6px;
    border: 1px solid var(--im-color-line, #dde4ef);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 10px 28px rgba(30, 41, 59, .14)
}

.fb-card-menu__panel:not([hidden]) {
    display: flex
}

.fb-card-menu__item {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 8px 10px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #39465c;
    font-size: 12.5px;
    font-weight: 650;
    text-align: left;
    cursor: pointer
}

.fb-card-menu__item:hover,
.fb-card-menu__item:focus-visible {
    background: #f3f4f8;
    outline: none
}

.fb-card-menu__item i {
    width: 15px;
    color: #6a7486;
    text-align: center
}

.fb-card-menu__item--danger {
    color: #b91c1c
}

.fb-card-menu__item--danger:hover {
    background: #fef2f2
}

.fb-card-menu__item--danger i {
    color: #dc2626
}

.fb-add-question-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 46px;
    border: 1px dashed #bfc6d5;
    border-radius: 12px;
    background: #fff;
    color: #5048bf;
    font-size: 13px;
    font-weight: 750;
    cursor: pointer
}

.fb-add-question-bar:hover {
    border-color: #6259cc;
    background: #f8f7ff
}

/* Add-Question chooser popover — compact, opens on demand next to whichever
   trigger was clicked (position set inline by JS), never a permanent panel. */
.fb-add-chooser {
    position: fixed;
    z-index: 40;
    width: 300px;
    max-width: calc(100vw - 24px);
    max-height: 70vh;
    overflow-y: auto;
    padding: 14px;
    border: 1px solid var(--im-color-line, #dde4ef);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 18px 45px rgba(30, 41, 59, .18)
}

.fb-add-chooser__heading {
    margin: 0 0 10px;
    color: #17233b;
    font-size: 13px;
    font-weight: 800
}

.fb-add-chooser__groups {
    display: flex;
    flex-direction: column;
    gap: 12px
}

.fb-add-chooser__group-label {
    margin: 0 0 6px;
    color: #8a94a6;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase
}

.fb-add-chooser__item {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    min-width: 0;
    min-height: 36px;
    padding: 7px 9px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: #39465c;
    font-size: 12.5px;
    font-weight: 650;
    text-align: left;
    overflow-wrap: anywhere;
    cursor: pointer
}

.fb-add-chooser__item i {
    width: 17px;
    color: #6259cc;
    text-align: center
}

.fb-add-chooser__item:hover,
.fb-add-chooser__item:focus-visible {
    background: #f0efff;
    color: #4038ad;
    outline: none
}

.fb-responses-workspace {
    display: grid;
    gap: 16px;
    width: 100%
}

.fb-responses-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 20px;
    border: 1px solid var(--im-color-line, #dde4ef);
    border-radius: 15px;
    background: #fff
}

.fb-responses-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(180px, 1fr));
    gap: 14px
}

.fb-stat-card {
    display: grid;
    gap: 5px;
    min-height: 96px;
    padding: 16px 18px;
    border: 1px solid var(--im-color-line, #dde4ef);
    border-radius: 14px;
    background: #fff
}

.fb-stat-card__label {
    color: #778195;
    font-size: 11px;
    font-weight: 750;
    text-transform: uppercase;
    letter-spacing: .04em
}

.fb-stat-card__value {
    color: #17233b;
    font-size: 27px;
    font-weight: 800
}

.fb-stat-card__value--sm {
    font-size: 16px
}

.fb-responses-table-card {
    min-height: 220px;
    padding: 18px 20px;
    border: 1px solid var(--im-color-line, #dde4ef);
    border-radius: 15px;
    background: #fff
}

.fb-responses-empty {
    display: grid;
    place-items: center;
    min-height: 180px;
    text-align: center
}

.fb-responses-empty>i {
    font-size: 30px;
    color: #aaa5e7
}

.fb-settings-workspace {
    display: grid;
    gap: 18px;
    width: 100%;
    min-width: 0
}

.fb-settings-card,
.fb-integration-workspace {
    width: 100%;
    margin: 0;
    padding: 20px;
    border-radius: 16px
}

/* Create Form page: the card previously had an inline style="max-width:760px"
   which capped it to roughly half the page on desktop, leaving a large blank
   area to its right. There is no other width constraint on .im-card itself
   (it's a plain block-level div — see the base .im-card rule above), so the
   inline cap was the sole culprit. Removed there; this rule just makes the
   full-width intent explicit and matches the same full-width treatment
   .fb-settings-card already uses for the identical .fb-settings-fields
   content inside the Form Builder's own Settings tab. */
.fb-create-form-card {
    width: 100%;
    min-width: 0
}

.fb-settings-fields {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 18px
}

.fb-settings-group {
    min-width: 0;
    padding: 18px;
    border: 1px solid #e2e6ee;
    border-radius: 14px;
    background: #fff
}

.fb-settings-group>hr {
    display: none
}

.fb-settings-group__heading {
    margin-bottom: 17px;
    padding-bottom: 13px;
    border-bottom: 1px solid #edf0f5
}

.fb-settings-group__heading h3 {
    margin: 0;
    color: #17233b;
    font-size: 15px;
    font-weight: 800
}

.fb-settings-group__heading p {
    margin: 4px 0 0;
    color: #778195;
    font-size: 12px
}

.fb-form-code-input {
    text-transform: uppercase
}

.fb-access-option {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-bottom: 8px;
    padding: 10px;
    border: 1px solid var(--im-color-line, #dde4ef);
    border-radius: 10px;
    cursor: pointer
}

.fb-access-option:has(input:checked) {
    border-color: #827ae0;
    background: #f7f6ff
}

.fb-response-limit-input {
    max-width: 140px
}

.fb-integration-workspace {
    margin-top: 0
}

.fb-integration-mapping-wrap {
    max-width: 100%;
    border: 1px solid #e3e7ef;
    border-radius: 12px
}

#fb-integration-mapping-table {
    width: 100%;
    min-width: 1050px;
    table-layout: fixed
}

#fb-integration-mapping-table th:nth-child(1),
#fb-integration-mapping-table td:nth-child(1) {
    width: 18%
}

#fb-integration-mapping-table th:nth-child(2),
#fb-integration-mapping-table td:nth-child(2) {
    width: 22%
}

#fb-integration-mapping-table th:nth-child(3),
#fb-integration-mapping-table td:nth-child(3) {
    width: 9%
}

#fb-integration-mapping-table th:nth-child(4),
#fb-integration-mapping-table td:nth-child(4) {
    width: 8%
}

#fb-integration-mapping-table th:nth-child(5),
#fb-integration-mapping-table td:nth-child(5) {
    width: 15%
}

#fb-integration-mapping-table th:nth-child(6),
#fb-integration-mapping-table td:nth-child(6) {
    width: 17%
}

#fb-integration-mapping-table th:nth-child(7),
#fb-integration-mapping-table td:nth-child(7) {
    width: 11%
}

#fb-integration-mapping-table .im-input,
#fb-integration-mapping-table .im-select {
    width: 100%;
    min-width: 0
}

.fb-integration-form-field {
    font-weight: 700;
    color: #26334a
}

@media(max-width:899px) {
    .fb-builder-header {
        top: 58px
    }

    .fb-settings-fields {
        grid-template-columns: 1fr
    }

    .fb-responses-stats {
        grid-template-columns: 1fr 1fr
    }

    .fb-questions-card {
        padding: 18px
    }

    /* Tablet/mobile: two ~half-width columns get uncomfortably narrow below
       this width, so collapse to one column here (covers phones too, since
       the max-width:575px tier below is a subset of this one) — the stored
       width value itself is untouched, only the visual override changes. */
    .fb-canvas {
        grid-template-columns: 1fr
    }

    .fb-question-card[data-field-width="half"] {
        grid-column: 1/-1
    }
}

@media(max-width:575px) {
    .fb-builder-page {
        padding: 8px 8px 82px
    }

    .fb-builder-header {
        position: relative;
        top: auto;
        padding: 10px 11px 0
    }

    .fb-builder-header__top {
        align-items: flex-start;
        flex-direction: column
    }

    .fb-builder-header__actions {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        width: 100%
    }

    .fb-builder-header__actions .im-btn {
        justify-content: center;
        padding-inline: 8px
    }

    .fb-questions-card {
        padding: 14px
    }

    .fb-questions-card__header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px
    }

    .fb-questions-card__header-actions {
        width: 100%;
        justify-content: space-between
    }

    .fb-title-card {
        padding: 14px
    }

    .fb-question-card {
        padding: 10px;
        min-height: 72px
    }

    .fb-question-card__summary {
        align-items: flex-start;
        flex-direction: column;
        gap: 4px
    }

    .fb-question-card__footer {
        align-items: flex-start
    }

    .fb-add-chooser {
        left: 0;
        right: 0;
        bottom: 0;
        top: auto !important;
        width: 100%;
        max-width: none;
        max-height: 75vh;
        border-radius: 18px 18px 0 0
    }

    .fb-responses-header {
        align-items: flex-start;
        flex-direction: column;
        padding: 15px
    }

    .fb-responses-header>div {
        width: 100%
    }

    .fb-responses-header .im-btn {
        flex: 1 1 auto;
        justify-content: center
    }

    .fb-responses-stats {
        grid-template-columns: 1fr
    }

    .fb-settings-card,
    .fb-integration-workspace {
        padding: 13px
    }

    .fb-settings-group {
        padding: 14px
    }

    .fb-integration-mapping-wrap {
        overflow-x: auto
    }
}

@media(max-width:900px) {
    .fba-bar-row {
        grid-template-columns: 110px 1fr 90px
    }
}

@media(max-width:600px) {
    .fba-charts {
        grid-template-columns: 1fr
    }

    .fb-latest-response {
        grid-template-columns: auto 1fr;
        grid-template-rows: auto auto
    }

    .fb-latest-response__when {
        grid-column: 1/-1
    }
}

/* --- Alibaba speech-to-text test connection result (Settings > AI) --- */
.ai-alibaba-test-result {
    overflow-wrap: anywhere
}

.ai-alibaba-test-result .alert {
    border-radius: 10px;
    font-size: 13.5px
}

/* --- Provider Comparison: shared error banner truly collapses when hidden.
   The global `.alert { display: block !important; }` rule above (line 3877)
   otherwise beats the native [hidden] attribute's display:none, since
   !important always wins over a non-important declaration regardless of
   specificity — that's what rendered an empty bordered red box during
   transcription and on success. This is scoped to the comparison banner's
   own id, not a change to .alert globally. */
#comparisonSharedError[hidden] {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    height: 0 !important;
    min-height: 0 !important
}

/* --- Provider Comparison: busy button (spinner + label swap) --- */
.ai-compare-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap
}

.ai-compare-btn-spinner {
    display: none;
    width: 14px;
    height: 14px;
    flex: 0 0 14px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.55);
    border-top-color: #fff;
    animation: ai-compare-spin .7s linear infinite
}

.ai-compare-btn.im-btn-secondary .ai-compare-btn-spinner {
    border-color: rgba(63, 65, 181, 0.35);
    border-top-color: var(--im-color-primary, #3f41b5)
}

.ai-compare-btn.is-busy {
    cursor: wait
}

.ai-compare-btn.is-busy .ai-compare-btn-spinner {
    display: inline-block
}

.ai-compare-btn:disabled {
    opacity: .85
}

@keyframes ai-compare-spin {
    to {
        transform: rotate(360deg)
    }
}

/* --- Provider Comparison: progress/status panel --- */
.ai-compare-status {
    margin-top: 14px;
    padding: 12px 14px;
    border: 1px solid var(--im-color-line);
    border-radius: 12px;
    background: #f8f9fc
}

.ai-compare-status.is-success {
    background: var(--im-color-success-soft, #dcfce7);
    border-color: transparent
}

.ai-compare-status.is-error {
    background: var(--im-color-danger-soft, #ffe4e6);
    border-color: transparent
}

.ai-compare-status-row {
    display: flex;
    align-items: center;
    gap: 10px
}

.ai-compare-status-spinner {
    display: none;
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    border-radius: 50%;
    border: 2px solid rgba(63, 65, 181, 0.25);
    border-top-color: var(--im-color-primary, #3f41b5);
    animation: ai-compare-spin .7s linear infinite
}

.ai-compare-status.is-active .ai-compare-status-spinner {
    display: inline-block
}

.ai-compare-status-text {
    flex: 1 1 auto;
    font-weight: 700;
    font-size: 13.5px;
    color: var(--im-color-text, #1e293b)
}

.ai-compare-status-timer {
    flex: 0 0 auto;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    font-size: 12.5px;
    color: var(--im-color-text-soft, #64748b)
}

.ai-compare-status-note {
    margin: 8px 0 0;
    padding-top: 8px;
    border-top: 1px dashed rgba(148, 163, 184, 0.4);
    font-size: 12px;
    color: var(--im-color-text-soft, #64748b)
}

/* --- Provider Comparison: loading placeholder cards (no success/error tone) --- */
.ai-compare-loading-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border: 1px dashed var(--im-color-line);
    border-radius: 10px;
    background: #f8f9fc;
    color: var(--im-color-text-soft, #64748b);
    font-size: 13.5px
}

.ai-compare-loading-spinner {
    width: 14px;
    height: 14px;
    flex: 0 0 14px;
    border-radius: 50%;
    border: 2px solid rgba(63, 65, 181, 0.25);
    border-top-color: var(--im-color-primary, #3f41b5);
    animation: ai-compare-spin .7s linear infinite
}

/* --- Provider Comparison: transcript match banner --- */
.ai-compare-match-banner {
    padding: 10px 14px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 13.5px
}

.ai-compare-match-banner.is-match {
    background: var(--im-color-success-soft, #dcfce7);
    color: var(--im-color-success-ink, #047857)
}

.ai-compare-match-banner.is-diff {
    background: var(--im-color-warning-soft, #fef3c7);
    color: var(--im-color-warning-ink, #92400e)
}

/* --- Provider Comparison: word-level diff highlighting (neutral, no verdict) --- */
.ai-compare-transcript {
    overflow-wrap: anywhere
}

mark.ai-compare-diff-word {
    background: var(--im-color-warning-soft, #fef3c7);
    color: inherit;
    padding: 0 2px;
    border-radius: 3px
}

/* --- Provider Comparison: compact summary grid --- */
.ai-compare-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1px;
    border: 1px solid var(--im-color-line);
    border-radius: 12px;
    overflow: hidden;
    background: var(--im-color-line)
}

.ai-compare-summary-item {
    padding: 10px 12px;
    background: #fff;
    display: flex;
    flex-direction: column;
    gap: 3px
}

.ai-compare-summary-item span {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--im-color-text-soft, #64748b)
}

.ai-compare-summary-item strong {
    font-size: 13.5px;
    overflow-wrap: anywhere
}

@media(max-width:575.98px) {
    .ai-compare-status-row {
        flex-wrap: wrap
    }

    .ai-compare-status-timer {
        flex-basis: 100%
    }

    .ai-compare-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }
}

/* --- Supplier Documents (Inventory > Supplier Documents, Stage E) --- */
.sd-page {
    max-width: 1400px;
    margin: 0 auto
}

.sd-section {
    margin-bottom: 16px;
    padding: 16px
}

.sd-section h6 {
    font-weight: 700;
    color: var(--im-color-text, #17263c);
    margin-bottom: 10px
}

.sd-filter-grid {
    display: grid;
    grid-template-columns: minmax(220px, 1.6fr) repeat(3, minmax(140px, 1fr)) repeat(2, minmax(145px, .85fr));
    gap: 10px;
    align-items: end;
    padding: 16px
}

.sd-filter-grid>div {
    min-width: 0
}

.sd-filter-grid .im-input,
.sd-filter-grid .im-select {
    width: 100%
}

.sd-filter-check {
    display: flex;
    align-items: center;
    gap: 7px;
    min-height: 38px;
    margin: 0;
    padding-left: 0
}

.sd-filter-check .form-check-input {
    position: static;
    float: none;
    margin: 0
}

.sd-filter-action {
    display: flex;
    justify-content: flex-end;
    align-items: center
}

.sd-table-card {
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--im-color-line, #dbe4f3);
    border-radius: 14px
}

.sd-table-card .table-responsive {
    overflow-x: auto
}

.sd-table {
    width: 100%;
    min-width: 980px;
    table-layout: fixed;
    font-size: 14px;
    margin-bottom: 0
}

.sd-table thead th {
    height: 42px;
    background: var(--im-color-surface-soft, #f8fbff);
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: .02em;
    color: var(--im-color-text-soft, #64748b);
    white-space: nowrap;
    text-overflow: ellipsis;
    border-bottom: 1px solid var(--im-color-line, #dbe4f3)
}

#main .sd-table thead th {
    padding: 9px 10px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: .02em !important;
    background: var(--im-color-surface-soft, #f8fbff) !important;
    color: var(--im-color-text-soft, #64748b) !important
}

.sd-table td,
.sd-table th {
    padding: 9px 10px;
    vertical-align: middle;
    overflow: hidden
}

#main .sd-table tbody td,
#main .sd-table td {
    padding: 9px 10px !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    background: #fff !important
}

.sd-table tbody td {
    border-bottom: 1px solid var(--im-color-line, #e5eaf2);
    line-height: 1.35
}

.sd-table tbody tr:last-child td {
    border-bottom: 0
}

.sd-table th:nth-child(1) {
    width: 10%
}

.sd-table th:nth-child(2) {
    width: 14%
}

.sd-table th:nth-child(3) {
    width: 13%
}

.sd-table th:nth-child(4) {
    width: 12%
}

.sd-table th:nth-child(5) {
    width: 9%
}

.sd-table th:nth-child(6) {
    width: 12%
}

.sd-table th:nth-child(7) {
    width: 12%
}

.sd-table th:nth-child(8) {
    width: 11%
}

.sd-table th:nth-child(9) {
    width: 7%
}

.sd-table__document strong,
.sd-table__document small {
    display: block
}

.sd-table__document strong {
    font-weight: 700;
    color: var(--im-color-text, #17263c);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.sd-table__document small {
    margin-top: 2px;
    color: var(--im-color-text-soft, #64748b);
    font-size: 11px
}

.sd-table__supplier {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden
}

.sd-table__date,
.sd-table__total {
    white-space: nowrap;
    font-variant-numeric: tabular-nums
}

.sd-table .im-btn-sm {
    min-height: 32px;
    padding: 6px 10px
}

.sd-table td .sd-badge {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis
}

@media(max-width:1199.98px) {
    .sd-filter-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr))
    }

    .sd-filter-search {
        grid-column: span 2
    }
}

@media(max-width:767.98px) {
    .sd-filter-grid {
        grid-template-columns: 1fr 1fr
    }

    .sd-filter-search {
        grid-column: 1/-1
    }

    .sd-filter-action {
        justify-content: stretch
    }

    .sd-filter-action .im-btn {
        width: 100%
    }
}

@media(max-width:575.98px) {
    .sd-filter-grid {
        grid-template-columns: 1fr
    }

    .sd-filter-search {
        grid-column: auto
    }
}

.sd-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 700;
    white-space: nowrap;
    background: var(--im-color-surface-muted, #f1f5ff);
    color: var(--im-color-text-soft, #64748b)
}

.sd-badge-type-supplier_invoice {
    background: var(--im-color-info-soft, #dbeafe);
    color: var(--im-color-info-ink, #1d4ed8)
}

.sd-badge-type-delivery_order {
    background: var(--im-color-primary-soft, #e9edff);
    color: var(--im-color-primary-strong, #2f319d)
}

.sd-badge-type-supplier_credit_note {
    background: var(--im-color-warning-soft, #fef3c7);
    color: var(--im-color-warning-ink, #b45309)
}

.sd-badge-type-unknown {
    background: var(--im-color-surface-muted, #f1f5ff);
    color: var(--im-color-text-muted, #8b98ab)
}

.sd-badge-status-uploaded,
.sd-badge-status-extracting {
    background: var(--im-color-surface-muted, #f1f5ff);
    color: var(--im-color-text-soft, #64748b)
}

.sd-badge-status-review_required {
    background: var(--im-color-warning-soft, #fef3c7);
    color: var(--im-color-warning-ink, #b45309)
}

.sd-badge-status-reviewed {
    background: var(--im-color-info-soft, #dbeafe);
    color: var(--im-color-info-ink, #1d4ed8)
}

.sd-badge-status-ready_to_post {
    background: var(--im-color-success-soft, #dcfce7);
    color: var(--im-color-success-ink, #047857)
}

.sd-badge-status-extraction_failed,
.sd-badge-status-rejected {
    background: var(--im-color-danger-soft, #ffe4e6);
    color: var(--im-color-danger-ink, #be123c)
}

.sd-badge-status-archived {
    background: var(--im-color-surface-muted, #f1f5ff);
    color: var(--im-color-text-muted, #8b98ab)
}

.sd-badge-extraction-succeeded {
    background: var(--im-color-success-soft, #dcfce7);
    color: var(--im-color-success-ink, #047857)
}

.sd-badge-extraction-failed {
    background: var(--im-color-danger-soft, #ffe4e6);
    color: var(--im-color-danger-ink, #be123c)
}

.sd-badge-extraction-pending,
.sd-badge-extraction-processing {
    background: var(--im-color-surface-muted, #f1f5ff);
    color: var(--im-color-text-soft, #64748b)
}

.sd-badge-extraction-not_required {
    background: var(--im-color-surface-muted, #f1f5ff);
    color: var(--im-color-text-muted, #8b98ab)
}

.sd-badge-review-pending {
    background: var(--im-color-surface-muted, #f1f5ff);
    color: var(--im-color-text-soft, #64748b)
}

.sd-badge-review-reviewed {
    background: var(--im-color-success-soft, #dcfce7);
    color: var(--im-color-success-ink, #047857)
}

.sd-badge-review-requires_attention {
    background: var(--im-color-danger-soft, #ffe4e6);
    color: var(--im-color-danger-ink, #be123c)
}

.sd-badge-future {
    background: var(--im-color-surface-muted, #f1f5ff);
    color: var(--im-color-text-muted, #8b98ab)
}

.sd-future-panel {
    opacity: .85
}

/* Supplier Document detail page (show.blade.php) -- breadcrumb/header,
   65/35 main+side layout, compact kv-grid summary, status pills, and an
   icon+meta activity timeline. Values mirror the same "compact label/value
   card" and "detail-page 2fr:1fr split" language already used on Logistics
   Delivery detail (.log-kv-list / .log-detail-grid) and CRM Deal
   (.crm-summary-grid), just under this page's own existing sd- prefix. */
.sd-detail-header {
    margin-bottom: 20px
}

.sd-detail-header__row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 6px
}

.sd-detail-header__title {
    min-width: 0
}

.sd-detail-eyebrow {
    display: block;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .06em;
    color: var(--im-color-text-soft, #64748b)
}

.sd-detail-header__title-line {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 2px
}

.sd-detail-header__title-line .bos-page-title {
    font-size: 24px
}

.sd-detail-header__meta {
    margin: 6px 0 0;
    color: var(--im-color-text-soft, #64748b);
    font-size: 13.5px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap
}

.sd-detail-header__source {
    margin: 6px 0 0;
    font-size: 12.5px;
    color: var(--im-color-text-muted, #8b98ab)
}

.sd-detail-header__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    flex-shrink: 0
}

.sd-detail-header__more-btn {
    padding: 6px 10px
}

.sd-detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.86fr) minmax(300px, 1fr);
    gap: 20px;
    align-items: start
}

.sd-detail-main,
.sd-detail-side {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0
}

.sd-detail-main .im-card,
.sd-detail-side .im-card {
    margin-bottom: 0
}

.sd-kv-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 14px 20px;
    margin: 0
}

.sd-kv-grid--tight {
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 10px 16px;
    margin-bottom: 12px
}

.sd-kv-grid dt {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--im-color-text-soft, #64748b);
    margin-bottom: 3px
}

.sd-kv-grid dd {
    margin: 0;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--im-color-text, #17263c);
    overflow-wrap: anywhere
}

.sd-detail-lines-table {
    width: 100%;
    table-layout: fixed
}

.sd-detail-lines-table th:nth-child(1),
.sd-detail-lines-table td:nth-child(1) {
    width: 32%
}

.sd-detail-lines-table td:nth-child(1) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.sd-detail-lines-table th:nth-child(2),
.sd-detail-lines-table td:nth-child(2) {
    width: 13%
}

.sd-detail-lines-table th:nth-child(3),
.sd-detail-lines-table td:nth-child(3) {
    width: 13%
}

.sd-detail-lines-table th:nth-child(4),
.sd-detail-lines-table td:nth-child(4) {
    width: 14%
}

.sd-detail-lines-table td:nth-child(2),
.sd-detail-lines-table td:nth-child(3),
.sd-detail-lines-table td:nth-child(4) {
    white-space: nowrap
}

.sd-detail-lines-table th:nth-child(5),
.sd-detail-lines-table td:nth-child(5) {
    width: 28%
}

.sd-detail-lines-table td:nth-child(5) {
    overflow: hidden
}

.sd-detail-lines-table__qty {
    font-variant-numeric: tabular-nums;
    white-space: nowrap
}

.sd-detail-lines-table td strong,
.sd-detail-lines-table td small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.sd-detail-lines-table td small {
    margin-top: 2px;
    color: var(--im-color-text-soft, #64748b);
    font-size: 11px
}

.sd-detail-card-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px
}

.sd-detail-card-heading h6 {
    margin-bottom: 0
}

.sd-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    text-transform: capitalize
}

.sd-status-pill--sm {
    padding: 3px 9px;
    font-size: 11px
}

.sd-status-pill--success {
    background: var(--im-color-success-soft, #dcfce7);
    color: var(--im-color-success-ink, #047857)
}

.sd-status-pill--warning {
    background: var(--im-color-warning-soft, #fef3c7);
    color: var(--im-color-warning-ink, #b45309)
}

.sd-status-pill--neutral {
    background: var(--im-color-surface-muted, #f1f5ff);
    color: var(--im-color-text-soft, #64748b)
}

.sd-status-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px
}

.sd-status-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px
}

.sd-status-list li>span:first-child {
    font-size: 13px;
    color: var(--im-color-text, #17263c);
    font-weight: 600
}

.sd-timeline-item {
    display: grid;
    grid-template-columns: 32px 1fr;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--im-color-line, #e5eaf2)
}

.sd-timeline-item:last-child {
    border-bottom: 0;
    padding-bottom: 0
}

.sd-timeline-item:first-child {
    padding-top: 0
}

.sd-timeline-dot {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--im-color-surface-soft, #f8fbff);
    color: var(--im-color-primary, #4c50d9);
    font-size: 14px;
    flex-shrink: 0
}

.sd-timeline-meta {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px
}

.sd-timeline-meta strong {
    font-size: 13.5px;
    color: var(--im-color-text, #17263c)
}

.sd-timeline-meta time {
    font-size: 11.5px;
    color: var(--im-color-text-muted, #8b98ab);
    white-space: nowrap
}

.sd-timeline-item__detail {
    margin: 4px 0 0;
    font-size: 12.5px;
    color: var(--im-color-text-soft, #64748b)
}

@media(max-width:1199.98px) {
    .sd-detail-grid {
        grid-template-columns: minmax(0, 1.4fr) minmax(260px, 1fr)
    }
}

@media(max-width:899.98px) {
    .sd-detail-grid {
        grid-template-columns: 1fr
    }

    .sd-detail-header__actions {
        width: 100%
    }

    .sd-detail-header__actions .im-btn {
        flex: 1 1 auto;
        justify-content: center
    }
}

@media(max-width:575.98px) {

    .sd-kv-grid,
    .sd-kv-grid--tight {
        grid-template-columns: 1fr 1fr
    }
}

@media(max-width:575.98px) {
    .im-table-clean-wrap:has(.sd-detail-lines-table) {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch
    }

    .sd-detail-lines-table {
        width: auto;
        min-width: 560px;
        table-layout: auto
    }

    .sd-detail-lines-table th:nth-child(1),
    .sd-detail-lines-table td:nth-child(1) {
        width: auto;
        max-width: 160px
    }

    .sd-detail-lines-table th:nth-child(5),
    .sd-detail-lines-table td:nth-child(5) {
        width: auto;
        max-width: 150px
    }
}

/* Review workspace: preview | fields, side-by-side on desktop, stacked on mobile */
.sd-review-page {
    padding-top: 20px;
    padding-bottom: 96px
}

.sd-review-grid {
    display: grid;
    grid-template-columns: minmax(320px, 42%) 1fr;
    gap: 16px;
    align-items: start
}

.sd-preview-col {
    position: sticky;
    top: 16px
}

.sd-preview-card {
    padding: 12px
}

.sd-preview-toggle {
    width: 100%;
    text-align: left;
    background: var(--im-color-surface-soft, #f8fbff);
    border: 1px solid var(--im-color-line, #dbe4f3);
    border-radius: 10px;
    padding: 8px 12px;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 8px
}

.sd-preview-body {
    max-height: 80vh;
    overflow: auto;
    border: 1px solid var(--im-color-line, #dbe4f3);
    border-radius: 10px
}

.sd-preview-frame {
    width: 100%;
    height: 75vh;
    border: 0;
    display: block
}

.sd-preview-image {
    width: 100%;
    height: auto;
    display: block
}

.sd-lines {
    display: flex;
    flex-direction: column;
    gap: 12px
}

.sd-line-card {
    border: 1px solid var(--im-color-line, #dbe4f3);
    border-radius: 12px;
    padding: 12px;
    background: var(--im-color-surface-soft, #f8fbff)
}

.sd-line-card__header {
    display: flex;
    justify-content: space-between;
    align-items: center
}

.sd-line-match {
    border-top: 1px dashed var(--im-color-line, #dbe4f3);
    padding-top: 8px
}

.sd-line-source,
.sd-line-statuses {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap
}

.sd-line-source span {
    font-size: 12px;
    color: var(--im-color-text-soft, #64748b);
    text-transform: capitalize
}

.sd-line-warnings {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 10px 0
}

.sd-warning-chip {
    display: inline-flex;
    padding: 4px 8px;
    border-radius: 8px;
    background: var(--im-color-warning-soft, #fef3c7);
    color: var(--im-color-warning-ink, #92400e);
    font-size: 11px;
    font-weight: 700
}

.sd-warning-chip.is-acknowledged {
    background: var(--im-color-success-soft, #dcfce7);
    color: var(--im-color-success-ink, #047857);
    text-decoration: line-through
}

.sd-warning-review {
    padding: 12px;
    border: 1px solid var(--im-color-warning, #f59e0b);
    border-radius: 10px;
    background: #fffbeb
}

.sd-warning-checks {
    display: flex;
    gap: 8px 16px;
    flex-wrap: wrap;
    margin: 8px 0
}

.sd-warning-checks label {
    font-size: 12px;
    display: flex;
    gap: 6px;
    align-items: flex-start
}

.sd-line-actions {
    display: flex;
    justify-content: flex-end
}

.sd-line-tools,
.sd-add-line {
    margin-top: 10px;
    border-top: 1px dashed var(--im-color-line, #dbe4f3);
    padding-top: 8px
}

.sd-line-tools summary,
.sd-add-line summary {
    cursor: pointer;
    color: var(--im-color-primary, #4338ca);
    font-size: 13px;
    font-weight: 700
}

.sd-line-tools__body {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 8px
}

.sd-split-form {
    display: flex;
    align-items: center;
    gap: 6px
}

.sd-split-form .im-input {
    width: 160px
}

.sd-inventory-select {
    min-width: 220px
}

.sd-activity-list {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 13px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 320px;
    overflow: auto
}

.sd-activity-list li {
    border-bottom: 1px solid var(--im-color-line, #dbe4f3);
    padding-bottom: 6px
}

.sd-sticky-footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1030;
    display: flex;
    gap: 8px;
    padding: 10px 12px;
    background: var(--im-color-surface, #fff);
    border-top: 1px solid var(--im-color-line, #dbe4f3);
    box-shadow: var(--im-shadow-md, 0 12px 32px rgba(37, 42, 114, .08))
}

@media(max-width:991.98px) {
    .sd-review-grid {
        grid-template-columns: 1fr
    }

    .sd-preview-col {
        position: static
    }

    .sd-preview-body:not(.show) {
        display: none
    }

    .sd-preview-frame {
        height: 50vh
    }
}

@media(max-width:575.98px) {
    .sd-page {
        padding-left: 4px;
        padding-right: 4px
    }

    .sd-line-card .row>[class^="col-"] {
        width: 100%;
        max-width: 100%;
        flex: 0 0 100%
    }

    .sd-line-card__header {
        align-items: flex-start;
        gap: 8px
    }

    .sd-line-actions .im-btn,
    .sd-line-tools__body form,
    .sd-line-tools__body .im-btn,
    .sd-split-form .im-input,
    .sd-inventory-select {
        width: 100%;
        min-width: 0
    }

    .sd-split-form {
        width: 100%;
        flex-direction: column;
        align-items: stretch
    }
}

/* Supplier document Stage F posting workspace */
.sd-posting-page {
    padding-top: 20px;
    max-width: 1440px;
    margin-inline: auto;
}

.sd-posting-page .im-breadcrumb {
    margin-bottom: 12px;
}

.sd-posting-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
}

.sd-posting-header h4 {
    margin: 6px 0 2px;
}

.sd-posting-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.sd-posting-summary>div {
    min-width: 0;
    display: grid;
    gap: 4px;
}

.sd-posting-summary span,
.sd-posting-metrics span {
    color: #78859b;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}

.sd-posting-lines {
    display: grid;
    gap: 12px;
}

.sd-posting-line-card {
    border: 1px solid #dbe3f0;
    border-radius: 14px;
    padding: 16px;
    display: grid;
    gap: 14px;
    background: #fff;
}

.sd-posting-line-card.has-warning {
    border-color: #efb94d;
    background: #fffaf0;
}

.sd-posting-line-main {
    display: grid;
    gap: 3px;
}

.sd-posting-line-main small {
    color: #718096;
}

.sd-posting-metrics {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
}

.sd-posting-metrics>div {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.sd-return-controls {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.sd-return-controls label,
.sd-posting-line-card>label {
    display: grid;
    gap: 6px;
    font-weight: 700;
}

.sd-posting-warning {
    color: #925f00;
    font-weight: 700;
}

.sd-posting-muted {
    color: #718096;
}

.sd-posting-footer {
    position: sticky;
    bottom: 16px;
    z-index: 20;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 12px;
    margin-top: 16px;
    border: 1px solid #dbe3f0;
    border-radius: 14px;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 12px 30px rgba(30, 45, 80, .12);
}

.sd-posting-history {
    margin-bottom: 0;
    padding-left: 18px;
}

.sd-post-confirm-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 0;
}

.sd-post-confirm-summary>div {
    min-width: 0;
    padding: 12px 13px;
    border: 1px solid var(--crmcm-border, #dbe4f0);
    border-radius: 12px;
    background: #f9fbfe;
}

.sd-post-confirm-summary__wide {
    grid-column: 1/-1;
}

.sd-post-confirm-summary dt {
    margin: 0;
    color: var(--crmcm-muted, #64748b);
    font-size: .69rem;
    font-weight: 750;
    letter-spacing: .035em;
    text-transform: uppercase;
}

.sd-post-confirm-summary dd {
    margin: 4px 0 0;
    color: var(--crmcm-heading, #17233b);
    font-size: .88rem;
    font-weight: 700;
    overflow-wrap: anywhere;
}

@media (max-width: 900px) {
    .sd-posting-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sd-posting-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .sd-posting-header {
        flex-direction: column;
    }

    .sd-posting-summary,
    .sd-posting-metrics,
    .sd-return-controls {
        grid-template-columns: 1fr;
    }

    .sd-posting-footer {
        bottom: 76px;
        flex-direction: column;
    }

    .sd-posting-footer .im-btn {
        width: 100%;
    }

    .sd-post-confirm-summary {
        grid-template-columns: 1fr;
    }

    .sd-post-confirm-summary__wide {
        grid-column: auto;
    }
}

/* Supplier document → Inventory item creation (Stage E.2) */
.sd-review-page .sd-match-suggestion {
    display: grid;
    gap: 3px;
    padding: 10px 12px;
    margin-bottom: 10px;
    border: 1px solid #dfe4ff;
    border-radius: 12px;
    background: #f7f8ff;
    color: #17233d;
}

.sd-review-page .sd-match-suggestion>span {
    color: #6c7892;
    font-size: 12px;
}

.sd-create-item-form .sd-no-stock-notice {
    padding: 12px 14px;
    border: 1px solid #f1d38c;
    border-radius: 12px;
    background: #fff9e9;
    color: #73520a;
    font-size: 13px;
}

.sd-create-item-form .sd-composite-builder {
    padding: 16px;
    border: 1px solid #dce3f2;
    border-radius: 14px;
    background: #f8faff;
}

.sd-create-item-form .sd-component-rows {
    display: grid;
    gap: 10px;
}

.sd-create-item-form .sd-component-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 130px 42px;
    gap: 8px;
    align-items: center;
}

@media (max-width: 700px) {
    .sd-create-item-form .sd-component-row {
        grid-template-columns: minmax(0, 1fr) 90px 42px;
    }

    .sd-review-page .sd-line-match .im-btn {
        width: 100%;
    }
}

/* Inline "from OCR — review" badge next to a scanned-and-prefilled field
   (Create Item from Supplier Document modal). Never implies the value is
   already trusted/confirmed — purely a visual review cue. */
.inv-ocr-source {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 6px;
    padding: 1px 8px;
    border: 1px solid #f1d38c;
    border-radius: 999px;
    background: #fff9e9;
    color: #8a6215;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    vertical-align: middle;
}

/* --- Shared Product Type selector (Register New Item / Edit Inventory
   Item / Create Item from Supplier Document) --- */
.inv-item-type-selector {
    margin-bottom: 4px;
}

.inv-item-type-selector-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 6px;
}

.inv-item-type-option {
    display: grid;
    gap: 3px;
    padding: 12px 14px;
    border: 1.5px solid var(--im-color-line, #dbe4f3);
    border-radius: 12px;
    background: #ffffff;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}

.inv-item-type-option:hover {
    border-color: #b7c2e6;
}

.inv-item-type-option input[type=radio] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.inv-item-type-option.is-selected {
    border-color: var(--im-color-primary, #3f41b5);
    background: #f5f6ff;
}

.inv-item-type-option-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
    font-size: 13.5px;
    color: var(--im-color-text, #17233d);
}

.inv-item-type-option-helper {
    font-size: 12px;
    color: var(--im-color-text-soft, #64748b);
    line-height: 1.4;
}

.inv-item-type-locked-note {
    margin: 6px 0 0;
    color: #925f00;
    font-weight: 600;
}

@media (max-width: 640px) {
    .inv-item-type-selector-options {
        grid-template-columns: 1fr;
    }
}

/* The Register/Edit Item drawer renders inside its own iframe (embed=
   staff-inline), so its effective viewport IS the drawer's own width —
   .inv-item-drawer-page lives inside that iframe's document (unlike the
   outer .inv-item-drawer, which is the parent page's <aside> and can't be
   used as an ancestor selector for anything inside the iframe). Scoped
   this way, raising the stacking threshold to the requested ~860px only
   affects the drawer form — the Supplier Document modal's identical
   Product Structure cards (~800px wide, no .inv-item-drawer-page ancestor)
   keep their existing 640px threshold and stay untouched. */
@media (min-width: 641px) and (max-width: 860px) {
    .inv-item-drawer-page .inv-item-type-selector-options {
        grid-template-columns: 1fr;
    }
}

/* --- Shared Composite Product component builder (Register New Item /
   Edit Inventory Item persisted BOM / Create-from-Supplier-Document) --- */
.inv-composite-builder {
    padding: 16px;
    border: 1px solid #dce3f2;
    border-radius: 14px;
    background: #f8faff;
}

.inv-composite-builder-header {
    margin-bottom: 10px;
}

.inv-composite-builder-header h4 {
    margin: 0 0 2px;
    font-size: 14px;
    font-weight: 800;
    color: var(--im-color-text, #17233d);
}

.inv-component-rows {
    display: grid;
    gap: 10px;
    margin-bottom: 10px;
}

/* "local"/"add-persisted" mode row = 4 visible children (select search,
   meta info line, quantity input, action button — the hidden unit input
   doesn't occupy a track). Named areas keep the meta line on its own full-
   width row under the controls, using the wider drawer space for a
   readable secondary line instead of squeezing it into a fixed column. */
.inv-component-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 140px 44px;
    grid-template-areas:
        "search qty action"
        "meta   meta meta";
    column-gap: 10px;
    row-gap: 4px;
    align-items: center;
}

.inv-component-row>.inv-component-search {
    grid-area: search;
}

.inv-component-row>.inv-component-meta {
    grid-area: meta;
}

.inv-component-row>.inv-component-quantity {
    grid-area: qty;
}

.inv-component-row>button {
    grid-area: action;
}

.inv-component-row--persisted {
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-areas: "meta actions remove";
    padding: 8px 10px;
    border: 1px solid #e5e9f5;
    border-radius: 10px;
    background: #ffffff;
}

.inv-component-row--persisted>.inv-component-meta {
    grid-area: meta;
}

.inv-component-row--persisted>.inv-component-row-actions {
    grid-area: actions;
}

.inv-component-row--persisted>form:last-child {
    grid-area: remove;
}

.inv-component-row--persisted .inv-component-row-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

.inv-component-row--persisted .inv-component-quantity {
    width: 90px;
}

.inv-component-search {
    min-width: 0;
}

.inv-component-meta {
    font-size: 11.5px;
    color: var(--im-color-text-soft, #64748b);
    line-height: 1.35;
}

.inv-component-row--persisted .inv-component-meta strong {
    display: block;
    font-size: 12.5px;
    color: var(--im-color-text, #17233d);
}

.inv-component-quantity {
    width: 100%;
}

.inv-component-unit {
    display: none;
}

/* hidden input carrying inventory_item_unit_id */

/* A component row whose item could not be safely re-resolved (deleted,
   deactivated, or became a Composite Product between submissions) — flagged
   rather than silently dropped, per the validation-preservation requirement. */
.inv-component-row--invalid .inv-component-search+.select2-container .select2-selection {
    border-color: #dc3545 !important;
}

.inv-component-error {
    color: #dc3545;
    font-weight: 600;
}

@media (max-width: 700px) {
    .inv-component-row {
        grid-template-columns: minmax(0, 1fr) 90px 42px;
    }

    .inv-component-row--persisted {
        grid-template-columns: 1fr;
        grid-template-areas: "meta" "actions" "remove";
        align-items: flex-start;
        gap: 6px;
    }

    .inv-component-row--persisted .inv-component-row-actions {
        width: 100%;
    }

    .inv-component-row--persisted .inv-component-quantity {
        flex: 1 1 auto;
        width: auto;
    }
}

@media (max-width: 480px) {

    /* True mobile (e.g. 390px) — search/quantity/action each get their own
       full-width row so the search input never gets cramped to a sliver. */
    .inv-component-row {
        grid-template-columns: 1fr;
        grid-template-areas: "search" "qty" "action" "meta";
    }

    .inv-component-row>.inv-component-quantity {
        width: 100%;
    }
}

/* --- Finance: Supplier Expenses / Supplier Credits / Expense Categories (Stage G) --- */
.fe-page {
    max-width: 1400px;
    margin: 0 auto
}

.fe-section {
    margin-bottom: 16px;
    padding: 16px
}

.fe-section h6 {
    font-weight: 700;
    color: var(--im-color-text, #17263c);
    margin-bottom: 10px
}

@media(max-width:575.98px) {
    .fe-page {
        padding-left: 4px;
        padding-right: 4px
    }
}

/* ==========================================================================
   Borang (Finance Forms & Claims) design system.
   Scoped entirely to .borang-* classes — does not affect any other module.
   Compound selectors (e.g. `.borang-field .im-input`) are used deliberately
   wherever a global .im-input/.im-select rule needs overriding: the shared
   `.im-select,.im-textarea{width:100%}` and `.im-input{padding:...!important}`
   rules elsewhere in this file otherwise win the cascade on plain single-
   class selectors (same lesson as the Inventory Categories toolbar earlier
   in this file — see the .inv-cat-search-wrap comment above).
   ========================================================================== */

/* --- Directory / list page (borang.index) --- */
.borang-directory {
    max-width: 1280px;
    margin: 0 auto
}

.borang-directory-header {
    margin-bottom: 20px
}

.borang-directory-header h1 {
    margin: 0 0 2px;
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--im-color-text, #1e293b)
}

.borang-directory-header-malay {
    margin: 0 0 8px;
    font-size: 13px;
    font-weight: 700;
    color: var(--im-color-primary, #3f41b5)
}

.borang-directory-header-desc {
    margin: 0;
    font-size: 13.5px;
    color: var(--im-color-text-soft, #64748b)
}

.borang-stats-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
    margin: 16px 0 22px
}

.borang-stat-tile {
    background: #fff;
    border: 1px solid var(--im-color-line);
    border-radius: 14px;
    padding: 12px 14px
}

.borang-stat-value {
    display: block;
    font-size: 20px;
    font-weight: 800;
    color: var(--im-color-text, #1e293b);
    line-height: 1.2
}

.borang-stat-label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: var(--im-color-text-soft, #64748b);
    text-transform: uppercase;
    letter-spacing: .03em;
    margin-top: 3px
}

.borang-quick-access {
    margin-bottom: 24px
}

.borang-quick-access-heading {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 12px
}

.borang-quick-access-heading h2 {
    margin: 0;
    font-size: 15px;
    font-weight: 800;
    color: var(--im-color-text, #1e293b)
}

.borang-quick-access-heading span {
    font-size: 12px;
    color: var(--im-color-text-soft, #64748b)
}

.borang-quick-access-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 14px
}

.borang-form-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: #fff;
    border: 1px solid var(--im-color-line);
    border-radius: 18px;
    padding: 18px
}

.borang-form-card-icon {
    width: 36px;
    height: 36px;
    border-radius: 11px;
    background: #eef0fb;
    color: var(--im-color-primary, #3f41b5);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    margin-bottom: 4px
}

.borang-form-card-code {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .04em;
    color: var(--im-color-text-soft, #94a3b8);
    text-transform: uppercase
}

.borang-form-card-title {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    color: var(--im-color-text, #1e293b);
    line-height: 1.3
}

.borang-form-card-helper {
    margin: 0;
    font-size: 12px;
    font-weight: 700;
    color: var(--im-color-primary, #3f41b5)
}

.borang-form-card-desc {
    margin: 2px 0 8px;
    font-size: 12.5px;
    color: var(--im-color-text-soft, #64748b);
    line-height: 1.4;
    flex: 1 1 auto
}

.borang-form-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: auto
}

.borang-directory-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    background: #f8f9fc;
    border: 1px solid var(--im-color-line);
    border-radius: 16px;
    padding: 10px 14px;
    margin: 24px 0 10px
}

.borang-search-wrap {
    position: relative;
    display: flex;
    align-items: center;
    min-width: 0;
    flex: 1 1 220px
}

.borang-search-icon {
    position: absolute;
    top: 50%;
    left: 16px;
    transform: translateY(-50%);
    z-index: 1;
    font-size: 13px;
    color: #94a3b8;
    pointer-events: none
}

.borang-search-wrap .im-input {
    -webkit-appearance: none !important;
    appearance: none !important;
    box-sizing: border-box !important;
    width: 100% !important;
    height: 38px !important;
    min-height: 38px !important;
    padding: 6px 34px 6px 42px !important;
    font-size: 13px !important
}

.borang-search-wrap .im-input::-webkit-search-decoration,
.borang-search-wrap .im-input::-webkit-search-cancel-button {
    -webkit-appearance: none;
    display: none
}

.borang-search-clear {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    z-index: 1;
    background: none;
    border: 0;
    padding: 2px;
    line-height: 1;
    color: #94a3b8;
    cursor: pointer
}

.borang-search-clear:hover,
.borang-search-clear:focus-visible {
    color: #475569
}

.borang-toolbar-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center
}

.borang-directory-toolbar .im-select {
    height: 38px !important;
    min-height: 38px !important;
    padding: 6px 12px !important;
    font-size: 13px !important;
    width: auto !important
}

.borang-directory-toolbar .im-btn {
    height: 38px;
    white-space: nowrap
}

.borang-view-toggle {
    display: inline-flex;
    border: 1px solid var(--im-color-line);
    border-radius: 10px;
    overflow: hidden;
    height: 38px;
    flex: 0 0 auto
}

.borang-view-toggle button {
    border: 0;
    background: #fff;
    padding: 0 12px;
    color: #64748b;
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center
}

.borang-view-toggle button+button {
    border-left: 1px solid var(--im-color-line)
}

.borang-view-toggle button.is-active {
    background: var(--im-color-primary, #3f41b5);
    color: #fff
}

.borang-view-toggle button:focus-visible {
    outline: 2px solid var(--im-color-primary, #3f41b5);
    outline-offset: -2px
}

.borang-result-count {
    margin: 0 0 16px;
    font-size: 12.5px;
    color: var(--im-color-text-soft, #64748b)
}

/* Grid view mode — toggled via #borang-all-forms.borang-view-grid. Reuses
   the exact same mobile-card transform already defined for .borang-form-row
   at 767.98px (see media query below) so a form row looks correct as a
   card regardless of whether it's the mobile layout or an explicit desktop
   grid-view choice. */
.borang-view-grid .borang-form-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 12px
}

.borang-view-grid .borang-form-row {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 16px;
    align-items: start
}

.borang-view-grid .borang-form-row-desc {
    order: 2;
    display: block
}

.borang-view-grid .borang-category-badge {
    order: 1
}

.borang-view-grid .borang-form-row-actions {
    order: 3;
    justify-self: stretch;
    flex-wrap: wrap
}

.borang-view-grid .borang-form-row-actions .im-btn {
    flex: 1 1 0;
    justify-content: center
}

.borang-recent-section {
    margin-bottom: 22px
}

.borang-category-section {
    margin-bottom: 22px
}

.borang-category-heading {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding-bottom: 8px;
    margin-bottom: 10px;
    border-bottom: 1px solid rgba(219, 228, 243, .7)
}

.borang-category-heading h3 {
    margin: 0;
    font-size: 13.5px;
    font-weight: 800;
    color: var(--im-color-text, #1e293b)
}

.borang-category-heading span {
    font-size: 11.5px;
    color: var(--im-color-text-soft, #94a3b8)
}

.borang-form-list {
    display: flex;
    flex-direction: column;
    gap: 8px
}

.borang-form-row {
    display: grid;
    grid-template-columns: 2.2fr 150px 2fr auto;
    gap: 14px;
    align-items: center;
    background: #fff;
    border: 1px solid var(--im-color-line);
    border-radius: 14px;
    padding: 12px 16px
}

.borang-form-row-main {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px
}

.borang-form-row-code {
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .04em;
    color: var(--im-color-text-soft, #94a3b8);
    text-transform: uppercase
}

.borang-form-row-name {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--im-color-text, #1e293b)
}

.borang-form-row-helper {
    font-size: 12px;
    font-weight: 600;
    color: var(--im-color-primary, #3f41b5)
}

.borang-category-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 999px;
    background: #eef0fb;
    color: var(--im-color-primary, #3f41b5);
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
    width: fit-content
}

.borang-form-row-desc {
    font-size: 12.5px;
    color: var(--im-color-text-soft, #64748b);
    line-height: 1.4
}

.borang-form-row-actions {
    display: flex;
    gap: 8px;
    flex-wrap: nowrap;
    justify-self: end
}

.borang-form-row-actions .im-btn {
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 6px
}

.borang-empty-state {
    text-align: center;
    padding: 48px 20px;
    color: var(--im-color-text-soft, #64748b)
}

.borang-empty-state i {
    font-size: 40px;
    color: #cbd5e1;
    display: block;
    margin-bottom: 12px
}

.borang-empty-state h4 {
    margin: 0 0 4px;
    font-size: 15px;
    font-weight: 700;
    color: var(--im-color-text, #1e293b)
}

.borang-empty-state p {
    margin: 0 0 14px;
    font-size: 13px
}

.borang-empty-state-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center
}

@media(max-width:991.98px) {
    .borang-search-wrap {
        flex: 1 1 100%
    }
}

@media(max-width:767.98px) {
    .borang-quick-access-grid {
        grid-template-columns: 1fr
    }

    .borang-view-grid .borang-form-list {
        grid-template-columns: 1fr
    }

    .borang-form-row {
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 14px
    }

    .borang-form-row-desc {
        order: 2
    }

    .borang-form-row-actions {
        order: 3;
        justify-self: stretch
    }

    .borang-form-row-actions .im-btn {
        flex: 1 1 0;
        justify-content: center
    }

    .borang-category-badge {
        order: 1
    }
}

@media(max-width:575.98px) {
    .borang-directory-toolbar {
        padding: 10px
    }

    .borang-toolbar-controls {
        width: 100%
    }

    .borang-directory-toolbar .im-select {
        flex: 1 1 auto;
        width: 100% !important
    }

    .borang-directory-toolbar>.borang-toolbar-controls>.im-btn {
        width: 100%
    }
}

/* --- Shared individual-form page shell --- */
.borang-form-page {
    max-width: 1180px;
    margin: 0 auto
}

.borang-back-link-wrap {
    margin-bottom: 14px
}

.borang-form-header {
    margin-bottom: 18px
}

.borang-form-header-code {
    display: inline-block;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .05em;
    color: #fff;
    background: var(--im-color-primary, #3f41b5);
    padding: 3px 10px;
    border-radius: 999px;
    margin-bottom: 8px
}

.borang-form-header-title {
    margin: 0 0 2px;
    font-size: 1.375rem;
    font-weight: 800;
    color: var(--im-color-text, #1e293b)
}

.borang-form-header-helper {
    margin: 0 0 8px;
    font-size: 13px;
    font-weight: 700;
    color: var(--im-color-primary, #3f41b5)
}

.borang-form-header-desc {
    margin: 0;
    font-size: 13.5px;
    color: var(--im-color-text-soft, #64748b);
    max-width: 70ch
}

/* .borang-container is the pre-existing wrapper class already present in
   several forms' markup (B002-007/008/012) with no prior styling — it is
   now the shared main form surface everywhere it appears. */
.borang-container {
    background: transparent
}

.borang-form-surface {
    background: #fff;
    border: 1px solid var(--im-color-line);
    border-radius: 20px;
    padding: 28px
}

.borang-form-section {
    padding: 20px 0;
    border-bottom: 1px solid rgba(219, 228, 243, .7);
    scroll-margin-top: 16px
}

.borang-form-section:first-child {
    padding-top: 0
}

.borang-form-section:last-of-type {
    border-bottom: 0;
    padding-bottom: 0
}

/* Compact section-index navigation (scroll-only jump links) — used by
   longer forms like B002-012 Overseas Travel Claim that are reorganised
   into several named sections but must stay a single HTML form/page. */
.borang-section-nav {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 10px 12px;
    margin-bottom: 20px;
    background: #f8f9fc;
    border: 1px solid var(--im-color-line);
    border-radius: 14px
}

.borang-section-nav a {
    flex: 0 0 auto;
    padding: 7px 14px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid var(--im-color-line);
    color: var(--im-color-text-soft, #64748b);
    font-size: 12.5px;
    font-weight: 700;
    white-space: nowrap;
    text-decoration: none;
    transition: background .15s, color .15s
}

.borang-section-nav a:hover,
.borang-section-nav a:focus-visible {
    background: #eef0fb;
    color: var(--im-color-primary, #3f41b5)
}

.borang-form-section-header {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 16px
}

.borang-form-section-icon {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: #eef0fb;
    color: var(--im-color-primary, #3f41b5);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px
}

.borang-form-section-title {
    margin: 0;
    font-size: 14.5px;
    font-weight: 800;
    color: var(--im-color-text, #1e293b)
}

.borang-form-section-helper {
    margin: 2px 0 0;
    font-size: 12.5px;
    color: var(--im-color-text-soft, #64748b)
}

.borang-form-section-badge {
    margin-left: auto;
    flex: 0 0 auto;
    font-size: 10.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .03em;
    padding: 3px 9px;
    border-radius: 999px;
    background: #eef0fb;
    color: var(--im-color-primary, #3f41b5)
}

.borang-field-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 16px
}

.borang-field-grid--single {
    grid-template-columns: 1fr
}

.borang-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0
}

.borang-field-full {
    grid-column: 1/-1
}

.borang-field-grid-heading {
    grid-column: 1/-1;
    margin: 4px 0 -4px;
    font-size: 12px;
    font-weight: 800;
    color: var(--im-color-text, #1e293b);
    text-transform: uppercase;
    letter-spacing: .03em
}

.borang-field label {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--im-color-text, #1e293b)
}

.borang-field .im-input,
.borang-field .im-select,
.borang-field .im-textarea {
    height: 42px !important;
    min-height: 42px !important
}

.borang-field textarea.im-input,
.borang-field .im-textarea {
    height: auto !important;
    min-height: 90px !important
}

.borang-field--profile {
    position: relative
}

.borang-field--profile label::after {
    content: 'Profile';
    margin-left: 6px;
    font-size: 9.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--im-color-text-soft, #94a3b8);
    background: #f1f5f9;
    padding: 1px 6px;
    border-radius: 999px
}

.borang-repeatable-entry {
    background: #f8f9fc;
    border: 1px solid var(--im-color-line);
    border-radius: 16px;
    padding: 16px;
    margin-bottom: 12px
}

.borang-repeatable-entry-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px
}

.borang-repeatable-entry-header h4 {
    margin: 0;
    font-size: 13px;
    font-weight: 800;
    color: var(--im-color-text, #1e293b)
}

.borang-repeatable-add {
    margin-top: 6px
}

.borang-upload {
    border: 1.5px dashed #cbd5e1;
    border-radius: 14px;
    padding: 16px;
    background: #f8f9fc
}

.borang-upload-label {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--im-color-text, #1e293b);
    margin-bottom: 4px;
    display: block
}

.borang-upload-formats {
    font-size: 11.5px;
    color: var(--im-color-text-soft, #94a3b8);
    margin: 2px 0 10px
}

.borang-upload-empty {
    display: flex;
    align-items: center;
    gap: 10px
}

.borang-upload-empty i {
    font-size: 20px;
    color: #94a3b8
}

.borang-upload-selected {
    display: none;
    align-items: center;
    gap: 12px
}

.borang-upload.has-file .borang-upload-empty {
    display: none
}

.borang-upload.has-file .borang-upload-selected {
    display: flex
}

.borang-upload-thumb {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: #eef0fb;
    color: var(--im-color-primary, #3f41b5);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    overflow: hidden
}

.borang-upload-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.borang-upload-info {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px
}

.borang-upload-info strong {
    font-size: 12.5px;
    overflow-wrap: anywhere
}

.borang-upload-info span {
    font-size: 11px;
    color: var(--im-color-text-soft, #64748b)
}

.borang-upload-actions {
    display: flex;
    gap: 6px;
    flex: 0 0 auto
}

.borang-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 10px
}

.borang-summary-item {
    background: #f8f9fc;
    border: 1px solid var(--im-color-line);
    border-radius: 12px;
    padding: 12px 14px
}

.borang-summary-item span {
    display: block;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--im-color-text-soft, #64748b);
    margin-bottom: 4px
}

.borang-summary-item strong {
    font-size: 15px;
    color: var(--im-color-text, #1e293b)
}

.borang-summary-item--deduction strong {
    color: #b91c1c
}

.borang-summary-item--deduction strong::before {
    content: '\2212\00a0'
}

.borang-summary-item--final {
    grid-column: 1/-1;
    background: linear-gradient(135deg, var(--im-color-primary, #3f41b5), #5b5de0);
    border: none;
    padding: 16px 18px
}

.borang-summary-item--final span {
    color: rgba(255, 255, 255, .8)
}

.borang-summary-item--final strong {
    color: #fff;
    font-size: 24px;
    font-weight: 800
}

/* Some Claim Summary tiles hold a live (readonly-computed or editable)
   <input> instead of static text — e.g. the Domestic/Overseas Travel Claim
   totals, which JavaScript writes into via `input[name="..."]` selectors
   and must remain real form fields, not display-only text. */
.borang-summary-item input {
    width: 100%;
    border: 0;
    background: transparent;
    padding: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--im-color-text, #1e293b);
    box-shadow: none !important
}

.borang-summary-item input:focus {
    outline: none;
    box-shadow: none !important
}

.borang-summary-item--deduction input {
    color: #b91c1c
}

.borang-summary-item--final input {
    font-size: 24px;
    font-weight: 800;
    color: #fff
}

.borang-declaration {
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 14px;
    padding: 16px
}

.borang-declaration label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 12.5px;
    color: #78350f;
    line-height: 1.5;
    cursor: pointer
}

.borang-declaration input[type="checkbox"] {
    margin-top: 2px;
    flex: 0 0 auto
}

.borang-declaration-sentence {
    font-size: 13.5px;
    line-height: 1.7;
    color: var(--im-color-text, #1e293b)
}

.borang-inline-amount-field {
    display: inline-block !important;
    width: 140px !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 6px;
    vertical-align: middle;
    padding: 6px 10px !important
}

.borang-assistant-panel {
    background: #f5f6ff;
    border: 1px solid #dfe4ff;
    border-radius: 16px;
    padding: 18px;
    margin-bottom: 18px
}

.borang-assistant-panel-heading {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px
}

.borang-assistant-panel-heading h3 {
    margin: 0;
    font-size: 13.5px;
    font-weight: 800;
    color: var(--im-color-text, #1e293b)
}

.borang-assistant-badge {
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .03em;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--im-color-primary, #3f41b5);
    color: #fff
}

.borang-assistant-panel-desc {
    margin: 0 0 12px;
    font-size: 12.5px;
    color: var(--im-color-text-soft, #64748b)
}

.borang-assistant-note {
    margin: 10px 0 0;
    font-size: 11.5px;
    color: #78350f;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 10px;
    padding: 8px 10px
}

.borang-assistant-advisory-note {
    margin: 10px 0 0;
    font-size: 11.5px;
    color: #1e3a8a;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 10px;
    padding: 8px 10px
}

.borang-error-summary {
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 14px;
    padding: 14px 16px;
    margin-bottom: 18px
}

.borang-error-summary strong {
    display: block;
    font-size: 13px;
    color: #b91c1c;
    margin-bottom: 6px
}

.borang-error-summary ul {
    margin: 0;
    padding-left: 18px;
    font-size: 12.5px;
    color: #991b1b
}

.borang-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px solid rgba(219, 228, 243, .7)
}

.borang-actions .im-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px
}

@media(max-width:767.98px) {
    .borang-form-surface {
        padding: 18px
    }

    .borang-field-grid {
        grid-template-columns: 1fr
    }

    .borang-actions {
        position: sticky;
        bottom: 0;
        background: rgba(255, 255, 255, .98);
        margin: 24px -18px -18px;
        padding: 12px 18px calc(12px + env(safe-area-inset-bottom));
        flex-direction: column-reverse
    }

    .borang-actions .im-btn {
        width: 100%;
        justify-content: center
    }

    .borang-summary-item--final strong {
        font-size: 20px
    }
}

/* While a Borang form page is active (body class toggled by the shared
   sticky-actions script), keep the floating Kunos AI launcher/window clear
   of the sticky action bar on narrow screens — same technique as the
   Register New Item drawer fix earlier in this file. */
body.borang-form-active .bos-ai-launcher {
    bottom: 78px
}

@media(max-width:767.98px) {
    body.borang-form-active .bos-ai-launcher {
        bottom: 86px
    }
}

/* ==========================================================================
   B002-011 Domestic Travel Claim — relocated from this page's own inline
   <style> blocks (previously in create.blade.php) as part of the Borang
   redesign. Selectors are kept EXACTLY as they were (.claim-section,
   #perjalanan-table, .perjalanan-item, #jarak-perjalanan-table, etc.) since
   this page's JavaScript targets them directly — only the CSS's location
   changed, not its content or the markup it targets. This already
   implements the "responsive grid on desktop, stacked cards on mobile"
   entry-card pattern the redesign spec asks for, so it was preserved
   rather than rebuilt.
   ========================================================================== */
.borang-container .form-control {
    min-height: 46px;
    border: 1px solid #d9dfec;
    border-radius: 12px;
    color: #17233d;
    box-shadow: none
}

.borang-container .form-control:focus {
    border-color: #5146e5;
    box-shadow: 0 0 0 3px rgba(81, 70, 229, .12)
}

.borang-container input[readonly] {
    background: #f7f8fc;
    color: #43506a
}

.claim-section:fullscreen {
    padding: 32px;
    background: #f7f8fc;
    overflow: auto
}

.claim-section-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px
}

.claim-section-heading h4 {
    margin: 2px 0 4px;
    color: #17233d;
    font-size: 1.15rem;
    font-weight: 750
}

.claim-section-heading p {
    margin: 0;
    color: #6b7690;
    font-size: .9rem
}

.claim-section-kicker {
    color: #5146e5;
    font-size: .72rem;
    font-weight: 750;
    text-transform: uppercase;
    letter-spacing: .08em
}

.journey-table-wrap {
    overflow: visible
}

#perjalanan-table,
#perjalanan-table tbody {
    display: block;
    width: 100%;
    border: 0;
    margin: 0
}

#perjalanan-table thead {
    display: none
}

#perjalanan-container {
    counter-reset: journey
}

#perjalanan-table .perjalanan-item {
    counter-increment: journey;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 14px;
    padding: 52px 16px 16px;
    margin-bottom: 14px;
    background: #fff;
    border: 1px solid #e1e6f0;
    border-radius: 16px;
    position: relative;
    box-shadow: 0 5px 16px rgba(35, 48, 84, .04)
}

#perjalanan-table .perjalanan-item::before {
    content: 'Perjalanan ' counter(journey);
    position: absolute;
    left: 16px;
    top: 16px;
    color: #26314b;
    font-weight: 750
}

#perjalanan-table .perjalanan-item>td {
    border: 0 !important;
    padding: 0;
    display: flex;
    flex-direction: column;
    min-width: 0
}

#perjalanan-table .perjalanan-item>td::before {
    content: attr(data-label);
    display: block;
    margin: 0 0 6px;
    color: #56617a;
    font-size: .76rem;
    font-weight: 700
}

#perjalanan-table .perjalanan-item>td:nth-child(1),
#perjalanan-table .perjalanan-item>td:nth-child(2) {
    grid-column: span 3
}

#perjalanan-table .perjalanan-item>td:nth-child(3) {
    grid-column: span 6
}

#perjalanan-table .perjalanan-item>td:nth-child(4),
#perjalanan-table .perjalanan-item>td:nth-child(5) {
    grid-column: span 6
}

#perjalanan-table .perjalanan-item>td:nth-child(n+6):nth-child(-n+9) {
    grid-column: span 3
}

#perjalanan-table .perjalanan-item>td:nth-child(10) {
    position: absolute;
    right: 14px;
    top: 12px
}

.journey-remove {
    background: #fff !important;
    color: #b42318 !important;
    border: 1px solid #f1c9c5 !important;
    border-radius: 10px !important;
    padding: 7px 10px !important
}

.journey-remove:hover {
    background: #fff1f0 !important
}

.claim-section #add-perjalanan {
    border: 0;
    border-radius: 11px;
    background: #5146e5;
    color: #fff;
    padding: 10px 15px
}

.claim-supporting-files,
.mileage-card {
    margin-top: 24px;
    padding: 20px;
    background: #fff;
    border: 1px solid #e2e7f2;
    border-radius: 16px
}

.claim-subheading {
    display: flex;
    gap: 11px;
    align-items: center;
    margin-bottom: 16px;
    color: #26314b
}

.claim-subheading>i {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: #eeefff;
    color: #5146e5
}

.claim-subheading strong,
.claim-subheading span {
    display: block
}

.claim-subheading span {
    font-size: .8rem;
    color: #73809a;
    margin-top: 2px
}

.claim-summary-heading {
    margin-top: 30px
}

.claim-summary-table {
    display: block;
    border: 0 !important;
    margin: 0
}

.claim-summary-table tbody {
    display: block
}

.claim-summary-table tr:first-child {
    display: none
}

.claim-summary-table tr:last-child {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 12px
}

.claim-summary-table td {
    border: 1px solid #e1e6f0 !important;
    border-radius: 14px;
    padding: 13px !important;
    background: #fff
}

.claim-summary-table td::before {
    display: block;
    color: #68738c;
    font-size: .72rem;
    font-weight: 700;
    margin-bottom: 8px
}

.claim-summary-table td:nth-child(1)::before {
    content: 'Elaun hotel'
}

.claim-summary-table td:nth-child(2)::before {
    content: 'Elaun makan & harian'
}

.claim-summary-table td:nth-child(3)::before {
    content: 'Lain-lain'
}

.claim-summary-table td:nth-child(4)::before {
    content: 'Jumlah perjalanan'
}

.claim-summary-table td:nth-child(5)::before {
    content: 'Jumlah semua tuntutan'
}

.claim-summary-table td:nth-child(6)::before {
    content: 'Tolak pendahuluan'
}

.claim-summary-table td:nth-child(7)::before {
    content: 'Jumlah dituntut'
}

.claim-summary-table td:nth-child(-n+3) {
    grid-column: span 4
}

.claim-summary-table td:nth-child(n+4) {
    grid-column: span 3
}

.claim-summary-table td:nth-child(7) {
    background: #f0efff;
    border-color: #cbc8ff !important
}

.claim-summary-table td:nth-child(7) input {
    font-size: 1.05rem;
    font-weight: 750;
    color: #3930b8
}

.claim-summary-table .input-group-text {
    display: none
}

.vehicle-selector {
    display: inline-flex !important;
    gap: 8px;
    padding: 6px;
    background: #f1f3f8;
    border-radius: 12px
}

.vehicle-selector .form-check-inline {
    margin: 0 !important
}

.vehicle-selector label {
    margin: 0;
    padding: 8px 12px;
    border-radius: 9px;
    cursor: pointer
}

.vehicle-selector .form-check-input {
    margin: 10px 0 0 8px
}

.mileage-card {
    overflow: hidden
}

#jarak-perjalanan-table {
    margin: 0;
    border-color: #e1e6f0
}

#jarak-perjalanan-table th {
    background: #f5f6fa;
    color: #46516a;
    border-color: #e1e6f0;
    padding: 13px;
    font-size: .78rem
}

#jarak-perjalanan-table td {
    padding: 13px;
    border-color: #e1e6f0;
    vertical-align: middle
}

#jarak-perjalanan-table[data-vehicle="car"] th:nth-child(2),
#jarak-perjalanan-table[data-vehicle="car"] td:nth-child(2),
#jarak-perjalanan-table[data-vehicle="motorcycle"] th:nth-child(3),
#jarak-perjalanan-table[data-vehicle="motorcycle"] td:nth-child(3) {
    background: #f0efff
}

#jarak-perjalanan-table .input-group-text {
    border-color: #d9dfec;
    background: #f5f6fa
}

.borang-container button[type="submit"].btn-primary {
    border: 0;
    border-radius: 12px;
    padding: 11px 24px;
    background: #5146e5;
    box-shadow: 0 8px 18px rgba(81, 70, 229, .2)
}

.resizer {
    display: none
}

@media(max-width:991px) {

    #perjalanan-table .perjalanan-item>td:nth-child(1),
    #perjalanan-table .perjalanan-item>td:nth-child(2),
    #perjalanan-table .perjalanan-item>td:nth-child(4),
    #perjalanan-table .perjalanan-item>td:nth-child(5) {
        grid-column: span 6
    }

    #perjalanan-table .perjalanan-item>td:nth-child(3) {
        grid-column: span 12
    }

    #perjalanan-table .perjalanan-item>td:nth-child(n+6):nth-child(-n+9) {
        grid-column: span 6
    }

    .claim-summary-table td:nth-child(-n+3),
    .claim-summary-table td:nth-child(n+4) {
        grid-column: span 6
    }

    .mileage-card {
        overflow-x: auto
    }

    #jarak-perjalanan-table {
        min-width: 720px
    }
}

@media(max-width:575px) {
    .claim-section-heading {
        flex-direction: column
    }

    .claim-section-heading button {
        width: 100%
    }

    #perjalanan-table .perjalanan-item>td:nth-child(n) {
        grid-column: span 12
    }

    .claim-summary-table td:nth-child(n) {
        grid-column: span 12
    }

    .claim-supporting-files,
    .mileage-card {
        padding: 15px
    }

    .journey-remove span {
        display: none
    }

    .vehicle-selector {
        display: flex !important;
        width: 100%;
        justify-content: space-around
    }
}

.claim-section {
    background: #f3f5ff;
    border-color: #d7dcfb;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8)
}

.claim-section-heading {
    padding-bottom: 17px;
    border-bottom: 1px solid #dde1f5
}

.claim-section-heading #fullscreen-btn {
    background: #e9ebff;
    color: #4941c6;
    border: 0
}

#perjalanan-table .perjalanan-item {
    border-color: #dde2f1;
    box-shadow: none;
    overflow: hidden;
    padding-top: 58px
}

#perjalanan-table .perjalanan-item::after {
    content: '';
    position: absolute;
    inset: 0 0 auto;
    height: 44px;
    background: #fafbff;
    border-bottom: 1px solid #e7eaf4;
    z-index: 0
}

#perjalanan-table .perjalanan-item::before {
    z-index: 1;
    top: 13px;
    display: inline-flex;
    align-items: center;
    color: #27324d
}

#perjalanan-table .perjalanan-item>td {
    border: 0 !important;
    background: transparent !important
}

#perjalanan-table .perjalanan-item>td::before {
    color: #65718c;
    text-transform: none;
    letter-spacing: 0
}

#perjalanan-table .perjalanan-item .form-control {
    background: #fbfcff;
    border-color: #dce2ef
}

.journey-remove {
    position: relative;
    z-index: 2;
    min-width: 74px;
    background: #fff5f4 !important;
    font-size: .76rem !important;
    font-weight: 700 !important
}

#perjalanan-table .perjalanan-item>td:nth-child(10)::before {
    display: none
}

.claim-section #add-perjalanan {
    background: #5146e5;
    box-shadow: 0 7px 16px rgba(81, 70, 229, .18);
    font-weight: 700
}

.claim-supporting-files,
.mileage-card {
    border-color: #e0e4f1;
    box-shadow: none
}

.claim-summary-heading {
    margin-bottom: 12px
}

.claim-summary-table {
    background: #f5f6fc;
    border: 1px solid #e0e4f1 !important;
    border-radius: 16px;
    padding: 12px;
    border-collapse: separate !important
}

.claim-summary-table>tbody>tr>td {
    border: 1px solid #e1e5f0 !important;
    box-shadow: none
}

.claim-summary-table td:nth-child(7) {
    background: #eeefff;
    border-color: #cecffa !important
}

.claim-summary-table td .form-control {
    background: #fff
}

.vehicle-selector {
    border: 1px solid #e0e4f0;
    background: #f7f8fc;
    padding: 5px
}

.vehicle-selector .form-check-inline {
    position: relative;
    display: flex;
    align-items: center;
    border-radius: 9px;
    padding: 0 8px
}

.vehicle-selector .form-check-inline:has(input:checked) {
    background: #ebeaff;
    color: #4138bd;
    box-shadow: 0 1px 4px rgba(60, 55, 150, .08)
}

.vehicle-selector .form-check-input {
    margin: 0 3px 0 0
}

.vehicle-selector label {
    padding: 8px 7px;
    color: inherit
}

.mileage-card {
    background: #fff
}

#jarak-perjalanan-table,
#jarak-perjalanan-table tbody {
    display: block;
    border: 0 !important;
    margin: 0
}

#jarak-perjalanan-table thead {
    display: none
}

#jarak-perjalanan-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px
}

#jarak-perjalanan-table .jarak-perjalanan-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 150px;
    gap: 16px;
    align-items: center;
    padding: 16px;
    background: #f8f9fd;
    border: 1px solid #e1e5f0;
    border-radius: 14px
}

#jarak-perjalanan-table .jarak-perjalanan-item>td {
    display: none;
    border: 0 !important;
    padding: 0;
    background: transparent !important
}

#jarak-perjalanan-table .jarak-perjalanan-item>td:first-child {
    display: block;
    font-weight: 700;
    color: #27324d
}

#jarak-perjalanan-table[data-vehicle="car"] .jarak-perjalanan-item>td:nth-child(2),
#jarak-perjalanan-table[data-vehicle="motorcycle"] .jarak-perjalanan-item>td:nth-child(3) {
    display: block
}

#jarak-perjalanan-table[data-vehicle="car"] .jarak-perjalanan-item>td:nth-child(2)::before {
    content: 'Kadar kereta';
    display: block;
    color: #6e7890;
    font-size: .72rem;
    font-weight: 700;
    margin-bottom: 6px
}

#jarak-perjalanan-table[data-vehicle="motorcycle"] .jarak-perjalanan-item>td:nth-child(3)::before {
    content: 'Kadar motosikal';
    display: block;
    color: #6e7890;
    font-size: .72rem;
    font-weight: 700;
    margin-bottom: 6px
}

#jarak-perjalanan-table tbody>tr:last-child {
    grid-column: 1/-1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 15px 16px;
    background: #eeefff;
    border: 1px solid #cecffa;
    border-radius: 14px
}

#jarak-perjalanan-table tbody>tr:last-child>td {
    display: block !important;
    border: 0 !important;
    padding: 0;
    background: transparent !important
}

#jarak-perjalanan-table tbody>tr:last-child>td:first-child {
    text-align: left !important;
    color: #30299b
}

#jarak-perjalanan-table tbody>tr:last-child>td:last-child {
    width: 190px
}

#jarak-perjalanan-table .input-group-text {
    background: #fff;
    border-color: #d9dfec
}

@media(max-width:767px) {
    #jarak-perjalanan-container {
        grid-template-columns: 1fr
    }

    #jarak-perjalanan-table tbody>tr:last-child {
        grid-column: auto
    }

    .mileage-card {
        overflow: visible
    }

    #jarak-perjalanan-table {
        min-width: 0
    }
}

@media(max-width:480px) {
    #jarak-perjalanan-table .jarak-perjalanan-item {
        grid-template-columns: 1fr
    }

    #jarak-perjalanan-table tbody>tr:last-child {
        align-items: stretch;
        flex-direction: column
    }

    #jarak-perjalanan-table tbody>tr:last-child>td:last-child {
        width: 100%
    }
}

/* Receipt Auto-Fill (OCR) panel + review modal — relocated from
   partials/receipt-ocr.blade.php's own @push('styles') block. */
.receipt-ocr-panel {
    border: 1px solid var(--im-color-primary-border);
    border-radius: 16px;
}

.receipt-ocr-upload-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 16px;
}

.receipt-ocr-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.receipt-ocr-hidden-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.receipt-ocr-source-btn {
    flex: 1 1 auto;
    justify-content: center;
}

.receipt-ocr-file-name {
    margin-top: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--im-color-text-soft);
    word-break: break-all;
}

.receipt-ocr-dialog {
    width: calc(100% - 32px);
    max-width: 820px;
    margin: 16px auto;
}

.receipt-ocr-modal {
    max-height: min(85vh, 760px);
    overflow: hidden;
    border: 1px solid var(--im-color-line);
    border-radius: 16px;
    background: var(--im-color-surface);
    box-shadow: var(--im-shadow-lg);
}

.receipt-ocr-header {
    flex: 0 0 auto;
    align-items: flex-start;
    padding: 20px 24px;
    border-bottom: 1px solid var(--im-color-line);
    background: var(--im-color-surface);
}

.receipt-ocr-heading {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    min-width: 0;
    padding-right: 16px;
}

.receipt-ocr-sparkle {
    display: inline-flex;
    flex: 0 0 36px;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 12px;
    background: var(--im-color-primary-soft);
    color: var(--im-color-primary);
}

.receipt-ocr-title {
    margin: 0 0 3px;
    color: var(--im-color-text);
    font-size: 19px;
    font-weight: 700;
    line-height: 1.3;
}

.receipt-ocr-subtitle {
    color: var(--im-color-text-soft);
    font-size: 13px;
    line-height: 1.5;
}

.receipt-ocr-close {
    margin: 2px 0 0 auto !important;
}

.receipt-ocr-close:focus {
    box-shadow: 0 0 0 4px rgba(63, 65, 181, .14);
}

.receipt-ocr-body {
    overflow-y: auto;
    padding: 20px 24px;
}

.receipt-ocr-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
    padding: 11px 14px;
    border: 1px solid var(--im-color-primary-border);
    border-radius: 12px;
    background: var(--im-color-primary-soft);
}

.receipt-ocr-detected {
    display: flex;
    align-items: center;
    gap: 9px;
    color: var(--im-color-primary-strong);
    font-size: 13px;
    font-weight: 700;
}

.receipt-ocr-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #fff;
    color: #16835f;
}

.receipt-ocr-inline-warning {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    margin: 0 0 14px;
    color: #8a6418;
    font-size: 12px;
}

.receipt-ocr-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 18px;
}

.receipt-ocr-full {
    grid-column: 1 / -1;
}

.receipt-ocr-field {
    gap: 6px;
    min-width: 0;
}

.receipt-ocr-field .im-label {
    margin: 0;
    color: var(--im-color-text);
    font-size: 12px;
    font-weight: 700;
}

.receipt-ocr-field .im-input,
.receipt-ocr-field .im-select {
    min-height: 48px;
    border-radius: 12px;
}

.receipt-ocr-field.is-missing .im-input,
.receipt-ocr-field.is-missing .im-select {
    border-color: #e5c475;
    background: #fffdf7;
}

.receipt-ocr-help {
    display: none;
    align-items: center;
    gap: 5px;
    color: #946b18;
    font-size: 11px;
}

.receipt-ocr-field.is-missing .receipt-ocr-help {
    display: flex;
}

.receipt-ocr-mapping-note {
    margin-top: 14px;
    color: var(--im-color-text-soft);
    font-size: 12px;
}

.receipt-ocr-footer {
    flex: 0 0 auto;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 24px;
    border-top: 1px solid var(--im-color-line);
    background: var(--im-color-surface-soft);
}

#receipt_ocr_status.is-error {
    color: var(--bs-danger);
}

#receipt_ocr_status.is-success {
    color: var(--bs-success);
}

@media (max-width: 767.98px) {
    .receipt-ocr-upload-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 575.98px) {
    .receipt-ocr-dialog {
        width: calc(100% - 20px);
        margin: 10px auto;
    }

    .receipt-ocr-modal {
        max-height: calc(100vh - 20px);
    }

    .receipt-ocr-header,
    .receipt-ocr-body {
        padding: 16px;
    }

    .receipt-ocr-footer {
        padding: 12px 16px;
    }

    .receipt-ocr-grid {
        grid-template-columns: 1fr;
        gap: 13px;
    }

    .receipt-ocr-full {
        grid-column: auto;
    }

    .receipt-ocr-footer .im-btn {
        flex: 1 1 0;
        justify-content: center;
    }

    .receipt-ocr-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .receipt-ocr-actions .im-btn {
        width: 100%;
        justify-content: center;
    }
}

/* Suggested Approval Route (advisory routing preview) panel — relocated
   from partials/routing-suggestion.blade.php's own <style> block. */
.routing-preview-panel {
    border: 1px solid rgba(79, 70, 229, .18);
    border-radius: 16px
}

.routing-preview-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px
}

.routing-preview-grid>div {
    padding: 10px 12px;
    border-radius: 12px;
    background: #fff;
    border: 1px solid var(--im-color-line)
}

.routing-preview-grid span {
    display: block;
    color: var(--im-color-text-soft);
    font-size: 11px
}

.routing-preview-grid strong {
    display: block;
    margin-top: 3px;
    color: var(--im-color-text);
    font-size: 13px
}

.routing-result {
    padding: 10px 12px;
    border-radius: 10px;
    background: #eef2ff;
    color: #3730a3
}

.routing-result.is-warning {
    background: #fffbeb;
    color: #92400e
}

.routing-result.is-muted {
    background: #f1f5f9;
    color: #475569
}

.routing-options {
    display: grid;
    gap: 7px
}

.routing-option {
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 9px 11px;
    border: 1px solid var(--im-color-line);
    border-radius: 10px;
    background: #fff
}

@media(max-width:900px) {
    .routing-preview-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }
}

@media(max-width:575px) {
    .routing-preview-grid {
        grid-template-columns: 1fr
    }
}

/* ==========================================================================
   Borang history page design system (.borang-history-*). Scoped entirely
   to history/view-history pages — does not affect the create-form pages'
   .borang-form-* classes above, though both share the same visual language
   (18-22px radius, subtle border, restrained shadow).
   ========================================================================== */
.borang-history-page {
    max-width: 1280px;
    margin: 0 auto
}

.borang-history-header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 18px
}

.borang-history-header-copy h1 {
    margin: 0 0 2px;
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--im-color-text, #1e293b)
}

.borang-history-header-copy .borang-form-header-code {
    margin-bottom: 6px
}

.borang-history-header-helper {
    margin: 0 0 4px;
    font-size: 13px;
    font-weight: 700;
    color: var(--im-color-primary, #3f41b5)
}

.borang-history-header-desc {
    margin: 0;
    font-size: 13px;
    color: var(--im-color-text-soft, #64748b)
}

.borang-history-header-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    flex: 0 0 auto
}

.borang-history-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 10px;
    margin-bottom: 18px
}

.borang-history-summary-tile {
    background: #fff;
    border: 1px solid var(--im-color-line);
    border-radius: 14px;
    padding: 12px 14px
}

.borang-history-summary-value {
    display: block;
    font-size: 19px;
    font-weight: 800;
    color: var(--im-color-text, #1e293b);
    line-height: 1.25
}

.borang-history-summary-label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: var(--im-color-text-soft, #64748b);
    text-transform: uppercase;
    letter-spacing: .03em;
    margin-top: 3px
}

.borang-history-surface {
    background: #fff;
    border: 1px solid var(--im-color-line);
    border-radius: 20px;
    padding: 20px
}

.borang-history-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: flex-end;
    background: #f8f9fc;
    border: 1px solid var(--im-color-line);
    border-radius: 16px;
    padding: 12px 14px;
    margin-bottom: 18px
}

.borang-history-toolbar-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1 1 200px;
    min-width: 0
}

.borang-history-toolbar-field label {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--im-color-text, #1e293b)
}

.borang-history-toolbar .im-select,
.borang-history-toolbar .im-input {
    height: 38px !important;
    min-height: 38px !important;
    padding: 6px 12px !important;
    font-size: 13px !important;
    width: 100% !important
}

.borang-history-toolbar-actions {
    display: flex;
    gap: 8px;
    flex: 0 0 auto
}

.borang-history-toolbar-actions .im-btn {
    height: 38px
}

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

.borang-history-table th {
    text-align: left;
    padding: 10px 12px;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--im-color-text-soft, #94a3b8);
    border-bottom: 1px solid rgba(219, 228, 243, .7)
}

.borang-history-table td {
    padding: 12px;
    font-size: 14px;
    color: var(--im-color-text, #1e293b);
    border-bottom: 1px solid rgba(219, 228, 243, .5);
    vertical-align: middle
}

.borang-history-table tbody tr {
    transition: background .12s
}

.borang-history-table tbody tr:hover {
    background: #f8f9fc
}

.borang-history-table tbody tr:last-child td {
    border-bottom: 0
}

.borang-history-cell-primary {
    font-weight: 700
}

.borang-history-cell-secondary {
    display: block;
    font-size: 11.5px;
    color: var(--im-color-text-soft, #64748b);
    margin-top: 1px
}

.borang-history-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: flex-end
}

.borang-history-actions .im-btn {
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 5px
}

.borang-history-cards {
    display: none
}

.borang-history-card {
    background: #fff;
    border: 1px solid var(--im-color-line);
    border-radius: 16px;
    padding: 14px;
    margin-bottom: 10px
}

.borang-history-card-row {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 6px 0;
    border-bottom: 1px solid rgba(219, 228, 243, .5)
}

.borang-history-card-row:last-of-type {
    border-bottom: 0
}

.borang-history-card-row span:first-child {
    font-size: 11px;
    font-weight: 700;
    color: var(--im-color-text-soft, #94a3b8);
    text-transform: uppercase;
    letter-spacing: .03em
}

.borang-history-card-row span:last-child {
    font-size: 13px;
    color: var(--im-color-text, #1e293b);
    text-align: right;
    overflow-wrap: anywhere
}

.borang-history-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px
}

.borang-history-card-actions .im-btn {
    flex: 1 1 auto;
    justify-content: center
}

.borang-history-empty {
    text-align: center;
    padding: 48px 20px;
    color: var(--im-color-text-soft, #64748b)
}

.borang-history-empty i {
    font-size: 40px;
    color: #cbd5e1;
    display: block;
    margin-bottom: 12px
}

.borang-history-empty h4 {
    margin: 0 0 4px;
    font-size: 15px;
    font-weight: 700;
    color: var(--im-color-text, #1e293b)
}

.borang-history-empty p {
    margin: 0 0 14px;
    font-size: 13px
}

.borang-history-empty-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center
}

.borang-history-pagination {
    display: flex;
    justify-content: center;
    margin-top: 18px
}

@media(max-width:767.98px) {
    .borang-history-table-wrap {
        display: none
    }

    .borang-history-cards {
        display: block
    }

    .borang-history-toolbar-field {
        flex: 1 1 100%
    }

    .borang-history-header-actions {
        width: 100%
    }

    .borang-history-header-actions .im-btn {
        flex: 1 1 0;
        justify-content: center
    }
}

@media(max-width:575.98px) {
    .borang-history-surface {
        padding: 14px
    }
}

body.borang-history-active .bos-ai-launcher {
    bottom: 24px
}

/* ==========================================================================
   Logistics Module (Phase 1)
   Namespaced as .log-* only — built on the .im-* design tokens
   ========================================================================== */
.log-page {
    --log-gap: 18px;
}

/* Stat strip */
.log-stat-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 14px;
    margin-bottom: var(--log-gap);
}

.log-stat-card {
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.log-stat-card--warning {
    border-left: 4px solid var(--im-color-warning, #f59e0b);
}

.log-stat-card--success {
    border-left: 4px solid var(--im-color-success, #10b981);
}

.log-stat-label {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--im-color-text-soft, #667085);
}

.log-stat-value {
    margin: 0;
    font-size: 26px;
    font-weight: 700;
    color: var(--im-color-text, #172033);
}

/* Dashboard grid */
.log-dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: var(--log-gap);
    align-items: start;
}

.log-section-card {
    padding: 18px 20px;
}

.log-section-card--full {
    grid-column: 1 / -1;
}

.log-section-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

.log-section-card-header h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--im-color-text, #172033);
}

.log-empty-note {
    margin: 0;
    padding: 14px 0;
    font-size: 13px;
    color: var(--im-color-text-soft, #667085);
    text-align: center;
}

/* Logistics — Allowance Settings → Allowance Rules tab. Mirrors the
   compact, modern table language already established by the Deliveries
   Schedule table (.log-schedule-table: same header/row padding, font
   sizes, colours) rather than inventing a new system, but kept in its
   own page-scoped classes so this table's own column count/order never
   inherits that table's column-position (nth-child) width rules. */
.logistics-allowance-info {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 0 16px;
    padding: 12px 14px;
    background: var(--im-color-primary-soft, #eef0ff);
    border-radius: 12px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--im-color-text-soft, #475569);
}

.logistics-allowance-info i {
    flex: 0 0 auto;
    margin-top: 1px;
    color: var(--im-color-primary, #4141bd);
    font-size: 14px;
}

.logistics-allowance-info strong {
    display: block;
    color: var(--im-color-text, #1e293b);
    font-size: 12.5px;
    margin-bottom: 2px;
}

.logistics-allowance-card.im-card {
    padding: 0;
    overflow: hidden;
}

.logistics-allowance-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--im-color-line, #edf0f5);
}

.logistics-allowance-card__header h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--im-color-text, #172033);
}

.logistics-allowance-card__header p {
    margin: 2px 0 0;
    font-size: 12px;
    color: var(--im-color-text-soft, #667085);
}

.logistics-allowance-card__count {
    flex: 0 0 auto;
    font-size: 12px;
    font-weight: 700;
    color: var(--im-color-text-soft, #667085);
    background: var(--im-color-surface-muted, #f2f4f7);
    padding: 4px 10px;
    border-radius: 999px;
}

.logistics-allowance-table-wrap {
    width: 100%;
    overflow-x: auto;
}

.logistics-allowance-table {
    width: 100%;
    border-collapse: collapse;
}

.logistics-allowance-table th {
    padding: 12px;
    background: var(--im-color-surface-soft, #f7f8fc);
    color: var(--im-color-text-soft, #59657a);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
    border-bottom: 1px solid var(--im-color-line, #edf0f5);
    text-align: left;
}

.logistics-allowance-table td {
    padding: 12px;
    border-bottom: 1px solid var(--im-color-line, #edf0f5);
    vertical-align: middle;
    color: var(--im-color-text, #344054);
    font-size: 14px;
}

.logistics-allowance-table tbody tr:last-child td {
    border-bottom: 0;
}

.logistics-allowance-table td strong {
    font-weight: 650;
    color: var(--im-color-text, #1e293b);
}

.logistics-allowance-table .logistics-allowance-money small {
    display: block;
    color: var(--im-color-text-soft, #64748b);
    font-size: 11px;
    margin-top: 1px;
}

.logistics-allowance-table th.logistics-allowance-actions,
.logistics-allowance-table td.logistics-allowance-actions {
    text-align: center;
    width: 64px;
}

.logistics-allowance-return {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12.5px;
    font-weight: 600;
}

.logistics-allowance-return.is-included {
    color: var(--im-color-success-ink, #047857);
}

.logistics-allowance-return.is-excluded {
    color: var(--im-color-text-soft, #94a3b8);
}

.logistics-allowance-period small {
    display: block;
    color: var(--im-color-text-soft, #64748b);
    font-size: 11px;
    margin-top: 1px;
}

/* Badges */
.log-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: var(--im-radius-pill, 999px);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    background: var(--im-color-primary-soft, #e9edff);
    color: var(--im-color-primary-strong, #2f319d);
    white-space: nowrap;
}

.log-badge-status-draft {
    background: #eef0f4;
    color: #475569;
}

.log-badge-status-unassigned {
    background: var(--im-color-warning-soft, #fef3c7);
    color: var(--im-color-warning-ink, #b45309);
}

.log-badge-status-ready,
.log-badge-status-assigned {
    background: var(--im-color-info-soft, #dbeafe);
    color: var(--im-color-info-ink, #1d4ed8);
}

.log-badge-status-planned {
    background: #ece9fe;
    color: #6d28d9;
}

.log-badge-status-dispatched,
.log-badge-status-in_transit {
    background: var(--im-color-warning-soft, #fef3c7);
    color: var(--im-color-warning-ink, #b45309);
}

.log-badge-status-partially_delivered {
    background: #fef3c7;
    color: #b45309;
}

.log-badge-status-delivered {
    background: var(--im-color-success-soft, #dcfce7);
    color: var(--im-color-success-ink, #047857);
}

.log-badge-status-failed,
.log-badge-status-cancelled {
    background: var(--im-color-danger-soft, #ffe4e6);
    color: var(--im-color-danger-ink, #be123c);
}

.log-badge-status-rescheduled {
    background: #f1f0ff;
    color: #5146e5;
}

.log-badge-geo-not_geocoded {
    background: #eef0f4;
    color: #667085;
}

.log-badge-geo-verified,
.log-badge-geo-manually_confirmed {
    background: var(--im-color-success-soft, #dcfce7);
    color: var(--im-color-success-ink, #047857);
}

.log-badge-geo-needs_review {
    background: var(--im-color-warning-soft, #fef3c7);
    color: var(--im-color-warning-ink, #b45309);
}

.log-badge-geo-invalid {
    background: var(--im-color-danger-soft, #ffe4e6);
    color: var(--im-color-danger-ink, #be123c);
}

.log-badge-priority-low {
    background: #eef0f4;
    color: #667085;
}

.log-badge-priority-normal {
    background: var(--im-color-primary-soft, #e9edff);
    color: var(--im-color-primary-strong, #2f319d);
}

.log-badge-priority-high {
    background: var(--im-color-warning-soft, #fef3c7);
    color: var(--im-color-warning-ink, #b45309);
}

.log-badge-priority-urgent {
    background: var(--im-color-danger-soft, #ffe4e6);
    color: var(--im-color-danger-ink, #be123c);
}

/* Phase 7 — Stop execution status badges (separate namespace from delivery
   status badges above so a stop-level Pending doesn't collide with any
   delivery-level meaning). Uses the same .log-badge base class so the
   pill shape, font-size, and padding match. */
.log-badge-execution-pending {
    background: #eef0f4;
    color: #475569;
}

.log-badge-execution-delivered {
    background: var(--im-color-success-soft, #dcfce7);
    color: var(--im-color-success-ink, #047857);
}

.log-badge-execution-partial {
    background: #fef3c7;
    color: #b45309;
}

.log-badge-execution-failed {
    background: var(--im-color-danger-soft, #ffe4e6);
    color: var(--im-color-danger-ink, #be123c);
}

/* Phase 7 — Stop card list inside a trip card on the Route Detail page.
   Each stop is a compact row with sequence, delivery reference, planned
   quantity, and execution badge. Reuses the existing .log-route-stop
   pattern from the Confirm Trip modal. */
.log-stop-execution-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 8px 0;
}

.log-stop-execution-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: #f8f9fb;
    border-radius: 8px;
    font-size: 0.8125rem;
    flex-wrap: wrap;
}

.log-stop-execution-row__seq {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #3f41b5;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6875rem;
    font-weight: 600;
}

.log-stop-execution-row__info {
    flex: 1;
    min-width: 0;
}

.log-stop-execution-row__ref {
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.log-stop-execution-row__qty {
    color: #64748b;
    font-size: 0.75rem;
}

.log-stop-execution-row__badge {
    flex-shrink: 0;
}

.log-stop-execution-row__action {
    flex-shrink: 0;
}

.log-stop-execution-row__action .im-btn {
    min-height: 32px;
}

/* Phase 7 — Stop progress summary line above the stop list. */
.log-stop-progress-bar {
    height: 6px;
    background: #e5e8f0;
    border-radius: 3px;
    overflow: hidden;
    margin: 4px 0 8px;
}

.log-stop-progress-bar__fill {
    height: 100%;
    background: #16a34a;
    border-radius: 3px;
    transition: width 0.3s ease;
}

/* Phase 7 — Ready-to-complete info banner (Phase 8 activates the Complete
   Trip button inside it when all stops are terminal). */
.log-trip-ready-complete {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 0.8125rem;
    color: #047857;
    margin: 8px 0;
}

.log-trip-ready-complete i {
    margin-right: 4px;
}

/* Phase 8 — Pending stops hint shown when some stops still need an outcome. */
.log-trip-pending-hint {
    padding: 8px 0;
}

/* Phase 8 — Route operational completion banner: visually distinct from the
   Route Plan's APPROVED badge (spec sections 22, 42). */
.kunos-route-operational-complete {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 0.8125rem;
    color: #047857;
    margin: 8px 0;
}

/* Phase 7 — Stop outcome drawer styles. Reuses the existing drawer
   framework (.log-delivery-edit-drawer, .log-delivery-form-grid). */
.log-stop-outcome-lines {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.log-stop-outcome-line {
    padding: 10px;
    background: #f8f9fb;
    border-radius: 8px;
}

.log-stop-outcome-radios {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.log-stop-outcome-radio {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    padding: 6px 12px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    transition: border-color 0.15s;
}

.log-stop-outcome-radio:has(input:checked) {
    border-color: #3f41b5;
    background: #f5f3ff;
}

.log-stop-outcome-radio input[type="radio"] {
    margin: 0;
}

/* Vehicle chips */
.log-vehicle-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
}

.log-vehicle-chip {
    padding: 6px 12px;
    border-radius: var(--im-radius-pill, 999px);
    background: var(--im-color-primary-soft, #e9edff);
    color: var(--im-color-primary-strong, #2f319d);
    font-size: 12px;
    font-weight: 600;
}

.log-driver-count {
    text-align: left;
    padding: 8px 0 0;
    border-top: 1px solid var(--im-color-border, #e5e7eb);
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Event list */
.log-event-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.log-event-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--im-color-border, #eef0f4);
    font-size: 13px;
}

.log-event-list li:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.log-event-list li strong {
    color: var(--im-color-text, #172033);
    flex: 0 0 auto;
}

.log-event-list li span {
    flex: 1 1 auto;
    color: var(--im-color-text-soft, #667085);
    text-transform: capitalize;
}

.log-event-list li time {
    flex: 0 0 auto;
    font-size: 11px;
    color: var(--im-color-text-soft, #98a2b3);
}

/* Google Maps health panel */
.log-health-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
    margin-bottom: 8px;
}

.log-health-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 14px;
    border-radius: var(--im-radius-control, 16px);
    background: #f8f9fc;
}

.log-health-item span {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--im-color-text-soft, #667085);
}

.log-health-ok {
    color: var(--im-color-success-ink, #047857);
}

.log-health-missing {
    color: var(--im-color-danger-ink, #be123c);
}

/* Filter bar (Delivery Schedule) */
.log-filter-card {
    padding: 16px 18px;
    margin-bottom: var(--log-gap);
}

.log-filter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px 14px;
    align-items: end;
}

.log-filter-search {
    grid-column: span 2;
}

.log-filter-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.log-list-card {
    padding: 18px 20px;
}

.log-address-cell {
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

td.log-actions-cell {
    display: table-cell !important;
    vertical-align: middle !important;
    height: auto !important;
    padding-top: 14px !important;
    padding-bottom: 14px !important;
}


/* Delivery detail page */
.log-detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
    gap: var(--log-gap);
    align-items: start;
}

.log-detail-main,
.log-detail-side {
    display: flex;
    flex-direction: column;
    gap: var(--log-gap);
}

.log-detail-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.log-detail-header h2 {
    margin: 0 0 4px;
    font-size: 20px;
    font-weight: 700;
    color: var(--im-color-text, #172033);
}

.log-detail-header-meta {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

.log-kv-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px 16px;
    margin: 0;
}

.log-kv-list dt {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--im-color-text-soft, #667085);
    margin-bottom: 2px;
}

.log-kv-list dd {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--im-color-text, #172033);
}

.log-fallback-warning {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 14px;
    border-radius: var(--im-radius-control, 16px);
    background: var(--im-color-warning-soft, #fef3c7);
    color: var(--im-color-warning-ink, #b45309);
    font-size: 12px;
    margin-top: 10px;
}

.log-notes-box {
    padding: 12px 14px;
    border-radius: var(--im-radius-control, 16px);
    background: #f8f9fc;
    font-size: 13px;
    color: var(--im-color-text, #172033);
    white-space: pre-wrap;
}

/* Drawer forms (create-from-invoice / create-manual / verify-location / edit) */
.log-drawer-body {
    padding: 4px 2px 20px;
}

.log-drawer-section {
    margin-bottom: 20px;
}

.log-drawer-section-title {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--im-color-text-soft, #667085);
    margin: 0 0 10px;
}

.log-line-table-wrap {
    overflow-x: auto;
}

.log-line-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.log-line-table th,
.log-line-table td {
    padding: 8px 10px;
    border-bottom: 1px solid var(--im-color-border, #eef0f4);
    text-align: left;
    vertical-align: middle;
}

.log-line-table .im-input {
    width: 100px;
}

.log-drawer-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 20px;
    padding-top: 14px;
    border-top: 1px solid var(--im-color-border, #eef0f4);
}

/* Vehicle profiles page */
.log-vehicle-table-wrap {
    overflow-x: auto;
}

/* Verify-location map */
.log-map-canvas {
    width: 100%;
    height: 320px;
    border-radius: var(--im-radius-control, 16px);
    background: #f1f2f6;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--im-color-text-soft, #667085);
    font-size: 13px;
    overflow: hidden;
}

.log-map-disabled-note {
    padding: 12px 14px;
    border-radius: var(--im-radius-control, 16px);
    background: #f8f9fc;
    color: var(--im-color-text-soft, #667085);
    font-size: 12px;
    text-align: center;
}

.log-confidence-meter {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--im-color-text-soft, #667085);
}

@media (max-width: 991.98px) {
    .log-detail-grid {
        grid-template-columns: 1fr;
    }

    .log-filter-search {
        grid-column: span 1;
    }
}

@media (max-width: 575.98px) {
    .log-stat-strip {
        grid-template-columns: repeat(2, 1fr);
    }

    .log-section-card,
    .log-filter-card,
    .log-list-card {
        padding: 14px;
    }
}

.log-info-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 14px;
    border-radius: var(--im-radius-control, 16px);
    background: var(--im-color-info-soft, #dbeafe);
    color: var(--im-color-info-ink, #1d4ed8);
    font-size: 12px;
    margin-bottom: 10px;
}

/* Logistics operations workspace — authoritative Phase 1/2 page rules. */
.log-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap
}

.log-header-actions .im-btn {
    height: 44px;
    border-radius: 12px;
    padding: 0 18px
}

.log-dashboard-kpis {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 20px
}

.log-kpi-card {
    min-width: 0;
    min-height: 112px;
    padding: 16px;
    display: flex;
    gap: 12px;
    align-items: flex-start;
    border-top: 3px solid #dfe3f2
}

.log-kpi-card--flush {
    border-top: 0;
    min-height: auto;
    padding: 0
}

.log-kpi-card--warning {
    border-top-color: #f59e0b
}

.log-kpi-card--success {
    border-top-color: #10b981
}

.log-kpi-icon {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border-radius: 11px;
    background: #eef0ff;
    color: #4949c8;
    display: grid;
    place-items: center;
    font-size: 17px
}

.log-kpi-card>div {
    min-width: 0;
    display: flex;
    flex-direction: column
}

.log-kpi-card span:not(.log-kpi-icon) {
    font-size: 12px;
    font-weight: 700;
    color: #667085
}

.log-kpi-card strong {
    font-size: 27px;
    line-height: 1.15;
    color: #172033;
    margin: 3px 0
}

.log-kpi-card small {
    font-size: 11px;
    color: #98a2b3
}

.log-dashboard-operations {
    display: grid;
    grid-template-columns: minmax(0, 1.85fr) minmax(280px, 1fr);
    gap: 20px;
    margin-bottom: 20px;
    align-items: start
}

.log-panel {
    padding: 0;
    overflow: hidden;
    min-width: 0
}

.log-panel-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 20px;
    border-bottom: 1px solid #e8ebf2
}

.log-panel-header h2 {
    font-size: 16px;
    margin: 0 0 3px;
    color: #172033
}

.log-panel-header p {
    font-size: 12px;
    margin: 0;
    color: #7b869b
}

.log-panel-header>a {
    font-size: 12px;
    font-weight: 700;
    color: #4545c6;
    white-space: nowrap
}

/* Dashboard "Delivery Schedule — Today" grid — DELIVERY | SCHEDULE |
   READINESS | ACTIONS. Replaces the old free-text .log-operation-row
   (single run-on sentence like "Ready · Location verified · RT-2026-0001")
   with one authoritative reason line + one route-reference line, both
   sourced from LogisticsRouteStateService. */
.log-dashboard-delivery-table {
    display: flex;
    flex-direction: column
}

.log-dashboard-delivery-table__head {
    display: grid;
    grid-template-columns: minmax(180px, 1.5fr) minmax(105px, .55fr) minmax(190px, .95fr) auto;
    gap: 14px;
    padding: 10px 20px;
    background: #f7f8fc;
    border-bottom: 1px solid #e8ebf2
}

.log-dashboard-delivery-table__head span {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #8993a5
}

.log-dashboard-delivery-table__row {
    display: grid;
    grid-template-columns: minmax(180px, 1.5fr) minmax(105px, .55fr) minmax(190px, .95fr) auto;
    gap: 14px;
    align-items: center;
    padding: 14px 20px;
    border-bottom: 1px solid #edf0f5
}

.log-dashboard-delivery-table__row:last-child {
    border-bottom: 0
}

.log-dashboard-delivery-table__delivery,
.log-dashboard-delivery-table__schedule,
.log-dashboard-delivery-table__readiness {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px
}

.log-dashboard-delivery-table__ref {
    display: flex;
    align-items: center;
    gap: 7px
}

.log-dashboard-delivery-table__ref>a {
    font-size: 12px;
    font-weight: 800;
    color: #4949c8
}

.log-dashboard-delivery-table__delivery strong {
    font-size: 14px;
    color: #172033
}

.log-dashboard-delivery-table__delivery span,
.log-dashboard-delivery-table__schedule span {
    font-size: 11px;
    color: #7b869b;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.log-dashboard-delivery-table__readiness {
    align-items: flex-start
}

.log-dashboard-delivery-table__actions {
    display: flex;
    gap: 6px;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    min-width: 0
}

.log-attention-list {
    display: flex;
    flex-direction: column;
    padding: 4px 0
}

.log-attention-list>a,
.log-attention-static {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 13px 18px;
    border-bottom: 1px solid #edf0f5;
    color: #172033
}

.log-attention-list>a>span:nth-child(2),
.log-attention-static>span:nth-child(2) {
    min-width: 0;
    display: flex;
    flex: 1;
    flex-direction: column
}

.log-attention-list strong,
.log-attention-static strong {
    font-size: 13px
}

.log-attention-list small,
.log-attention-static small {
    font-size: 11px;
    color: #7b869b
}

.log-attention-icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: #fff7e6;
    color: #b66b00;
    display: grid;
    place-items: center;
    flex: 0 0 34px
}

.log-dashboard-secondary {
    display: grid;
    grid-template-columns: 1.1fr .8fr 1.1fr;
    gap: 20px;
    margin-bottom: 20px
}

.log-compact-list {
    display: flex;
    flex-direction: column
}

.log-compact-list>a {
    padding: 12px 18px;
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 10px;
    align-items: center;
    border-bottom: 1px solid #edf0f5;
    font-size: 12px
}

.log-compact-list>a>span:nth-child(2) {
    color: #667085
}

.log-fleet-metrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: #edf0f5
}

.log-fleet-metrics>div {
    background: #fff;
    padding: 20px 12px;
    display: flex;
    flex-direction: column;
    text-align: center
}

.log-fleet-metrics strong {
    font-size: 24px;
    color: #3939b6
}

.log-fleet-metrics span {
    font-size: 11px;
    color: #667085
}

.log-config-strip {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    padding: 12px 16px;
    font-size: 11px
}

.log-config-strip>strong {
    font-size: 13px;
    margin-right: auto
}

.log-config-strip>span {
    color: #667085
}

.log-config-strip b {
    display: inline-flex;
    padding: 3px 7px;
    border-radius: 999px;
    margin-left: 4px;
    background: #ffe8eb;
    color: #b4233c
}

.log-config-strip b.is-ok {
    background: #e5f8ed;
    color: #087a46
}

.log-empty-state {
    min-height: 126px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    text-align: center;
    color: #7b869b
}

.log-empty-state>i {
    font-size: 25px;
    color: #9aa6bd
}

.log-empty-state strong {
    color: #344054
}

.log-empty-state>div {
    display: flex;
    gap: 8px;
    margin-top: 5px
}

.log-empty-state--compact {
    min-height: 100px
}

.log-schedule-filters {
    padding: 16px 18px;
    margin-bottom: 18px
}

.log-filter-primary {
    display: grid;
    grid-template-columns: 1.05fr 1fr 1.4fr 1fr 1.1fr 1fr;
    gap: 12px
}

.log-filter-primary label,
.log-delivery-form-grid label,
.log-schedule-fields label,
.log-delivery-line-row label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0
}

.log-filter-primary label>span,
.log-delivery-form-grid label>span,
.log-schedule-fields label>span,
.log-delivery-line-row label>span {
    font-size: 11px;
    font-weight: 700;
    color: #59657a
}

.log-filter-primary .im-input,
.log-filter-primary .im-select {
    height: 42px
}

.log-filter-secondary {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px
}

.log-filter-search {
    position: relative;
    flex: 1;
    min-width: 220px
}

.log-filter-search i {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #8792a7
}

.log-filter-search .im-input {
    height: 42px;
    padding-left: 40px
}

.log-quick-dates {
    display: flex;
    gap: 6px
}

.log-filter-secondary .im-btn {
    height: 42px;
    border-radius: 11px
}

.log-reset-link {
    font-size: 12px;
    font-weight: 700;
    color: #667085;
    padding: 10px
}

.log-schedule-table-card.im-card {
    padding: 0 !important;
    margin: 0 0 24px 0 !important;
    background: #ffffff !important;
    border: 1px solid rgba(219, 228, 243, .9) !important;
    border-radius: 26px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, .03) !important;
    overflow: hidden !important
}

.log-schedule-table-wrap {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    overflow-x: auto !important
}

.log-schedule-table {
    width: 100% !important;
    border-collapse: collapse !important;
    table-layout: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #ffffff !important;
    border: 0 !important
}

.log-schedule-table thead {
    background: #f7f8fc
}

.log-schedule-table th {
    padding: 14px 12px;
    background: #f7f8fc !important;
    color: #59657a;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .04em;
    line-height: 1.3;
    text-transform: uppercase;
    white-space: nowrap;
    border-bottom: 1px solid #edf0f5 !important;
    border-top: 0 !important
}

.log-schedule-table tbody tr>td {
    padding: 14px 12px !important;
    border-bottom: 1px solid #edf0f5 !important;
    border-top: 0 !important;
    vertical-align: middle !important;
    color: #344054
}

.log-schedule-table tbody tr:last-child>td {
    border-bottom: 0 !important
}

.log-schedule-table td>small,
.log-schedule-table td>strong {
    display: block
}

.log-schedule-table td>small {
    font-size: 11px;
    color: #64748b;
    margin-top: 2px;
    line-height: 1.35
}

.log-schedule-table td.log-customer-cell strong,
.log-schedule-table td:nth-child(3) strong,
.log-schedule-table td.log-schedule-cell strong,
.log-schedule-table td:nth-child(5) strong,
.log-schedule-table td.log-units-cell strong,
.log-schedule-table td:nth-child(6) strong {
    font-size: 13px;
    font-weight: 650;
    line-height: 1.35;
    color: #1e293b
}

.log-schedule-table td.log-address-cell {
    font-size: 14px;
    line-height: 1.4;
    color: #475569
}

/* Deliveries table Readiness column: a generic secondary-line class (not
   a fix scoped to the literal string "Location verified") — short
   readiness sub-statuses like "Location verified"/"Location needs
   review" must read on one line under the READY badge; a genuinely
   long message is still free to wrap, this only stops short, common
   ones from breaking awkwardly. */
.log-readiness-substatus {
    display: inline-flex !important;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis
}

.log-schedule-table th.log-select-cell,
.log-schedule-table td.log-select-cell {
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    padding-left: 14px !important;
    padding-right: 6px !important;
    text-align: center !important
}

.log-schedule-table th:nth-child(2),
.log-schedule-table td:nth-child(2) {
    width: 125px !important;
    min-width: 115px !important
}

.log-schedule-table th:nth-child(3),
.log-schedule-table td:nth-child(3) {
    width: auto !important;
    min-width: 160px !important
}

.log-schedule-table th:nth-child(4),
.log-schedule-table td:nth-child(4) {
    width: auto !important;
    min-width: 160px !important
}

.log-schedule-table th:nth-child(5),
.log-schedule-table td:nth-child(5) {
    width: 110px !important;
    min-width: 105px !important;
    white-space: nowrap !important
}

.log-schedule-table th:nth-child(6),
.log-schedule-table td:nth-child(6) {
    width: 65px !important;
    min-width: 60px !important;
    text-align: right !important
}

.log-schedule-table th:nth-child(7),
.log-schedule-table td:nth-child(7) {
    width: 90px !important;
    min-width: 85px !important
}

.log-schedule-table th:nth-child(8),
.log-schedule-table td:nth-child(8) {
    width: 165px !important;
    min-width: 155px !important
}

.log-schedule-table th:nth-child(9),
.log-schedule-table td:nth-child(9) {
    width: 140px !important;
    min-width: 130px !important
}

.log-schedule-table th:last-child,
.log-schedule-table td:last-child,
.log-schedule-table td.log-actions-cell {
    display: table-cell !important;
    vertical-align: middle !important;
    height: auto !important;
    width: auto !important;
    white-space: nowrap !important;
    text-align: right !important;
    padding-left: 8px !important;
    padding-right: 16px !important
}

.log-row-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    width: 100% !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important
}


.log-ref {
    font-size: 13px;
    font-weight: 700;
    color: #3434b8;
    text-decoration: none
}

.log-route-state {
    font-size: 11px;
    line-height: 1.35;
    color: #667085;
    white-space: nowrap
}

.log-route-state--empty {
    color: #98a2b3
}

.log-schedule-cards {
    display: none
}

.log-pagination {
    padding: 14px 18px;
    border-top: 1px solid #edf0f5
}




#log-drawer.log-delivery-drawer-shell {
    width: min(1080px, 92vw);
    max-width: 1080px
}

.log-delivery-drawer-shell #log-drawer-content {
    padding: 0;
    overflow: hidden
}

.log-delivery-drawer-shell .log-drawer-shell__fragment {
    height: 100%
}

.log-delivery-drawer {
    height: 100%;
    background: #f7f8fc
}

.log-delivery-drawer>form {
    height: 100%;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto
}

.log-delivery-drawer__body {
    overflow-y: auto;
    padding: 20px 22px
}

.log-delivery-drawer__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 22px;
    background: #fff;
    border-top: 1px solid #e2e6ef
}

.log-delivery-drawer__footer .im-btn {
    height: 44px;
    min-width: 140px;
    border-radius: 12px
}

.log-delivery-section {
    background: #fff;
    border: 1px solid #e0e5ef;
    border-radius: 16px;
    padding: 18px;
    margin-bottom: 16px
}

.log-delivery-section>header {
    display: flex;
    gap: 11px;
    align-items: flex-start;
    margin-bottom: 16px
}

.log-delivery-section>header>span {
    width: 28px;
    height: 28px;
    border-radius: 9px;
    display: grid;
    place-items: center;
    background: #ededff;
    color: #4141bd;
    font-size: 12px;
    font-weight: 800
}

.log-delivery-section h3 {
    margin: 0 0 2px;
    font-size: 15px;
    color: #172033
}

.log-delivery-section p {
    margin: 0;
    font-size: 11px;
    color: #7b869b
}

.log-delivery-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px
}

.log-field-full {
    grid-column: 1/-1
}

.log-delivery-form-grid textarea {
    resize: vertical
}

.log-delivery-form-grid em {
    font-size: 10px;
    color: #7b869b;
    font-style: normal
}

.log-delivery-form-grid label>small,
.log-field-error {
    font-size: 11px;
    color: #c52a43;
    min-height: 14px
}

.log-delivery-line-builder {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 12px
}

.log-delivery-line-row {
    display: grid;
    grid-template-columns: minmax(260px, 2fr) minmax(110px, .75fr) minmax(90px, .55fr) minmax(110px, .65fr) 42px;
    gap: 10px;
    align-items: end;
    padding: 12px;
    border: 1px solid #e5e8f0;
    border-radius: 12px;
    background: #fafbfe
}

.log-delivery-line-row .im-input,
.log-delivery-line-row .im-select,
.log-delivery-line-row .select2-selection {
    height: 42px
}

.log-line-item {
    min-width: 0
}

.log-schedule-fields {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr 1fr;
    gap: 14px
}

.log-partial-toggle {
    grid-column: span 2;
    flex-direction: row !important;
    align-items: center !important;
    padding: 10px 12px;
    border: 1px solid #e4e8f1;
    border-radius: 12px
}

.log-partial-toggle>span {
    display: flex;
    flex-direction: column
}

.log-partial-toggle small {
    font-weight: 400;
    color: #7b869b
}

.log-form-errors {
    padding: 11px 13px;
    margin-bottom: 14px;
    border-radius: 11px;
    background: #fff0f2;
    color: #a91d36;
    font-size: 12px
}

@media(max-width:1399.98px) {
    .log-dashboard-kpis {
        grid-template-columns: repeat(3, 1fr)
    }

    .log-filter-primary {
        grid-template-columns: repeat(3, 1fr)
    }
}

@media(max-width:991.98px) {

    .log-dashboard-operations,
    .log-dashboard-secondary {
        grid-template-columns: 1fr
    }

    .log-dashboard-delivery-table__head {
        display: none
    }

    .log-dashboard-delivery-table__row {
        grid-template-columns: minmax(0, 1fr) auto
    }

    .log-dashboard-delivery-table__schedule,
    .log-dashboard-delivery-table__readiness {
        grid-column: 1
    }

    .log-filter-primary {
        grid-template-columns: repeat(2, 1fr)
    }

    .log-filter-secondary {
        flex-wrap: wrap
    }

    .log-filter-search {
        flex-basis: 100%
    }

    #log-drawer.log-delivery-drawer-shell {
        width: 94vw
    }

    .log-delivery-line-row {
        grid-template-columns: minmax(220px, 1.7fr) 1fr 1fr
    }

    .log-delivery-line-row .log-line-item {
        grid-column: span 2
    }

    .log-schedule-fields {
        grid-template-columns: repeat(2, 1fr)
    }
}

@media(max-width:767.98px) {
    .log-dashboard-kpis {
        grid-template-columns: repeat(2, 1fr)
    }

    .log-filter-primary {
        grid-template-columns: 1fr
    }

    .log-quick-dates {
        width: 100%;
        overflow-x: auto
    }

    .log-schedule-table-wrap {
        display: none
    }

    .log-schedule-cards {
        display: grid;
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 12px
    }

    .log-schedule-card {
        border: 1px solid #e0e5ef;
        border-radius: 14px;
        padding: 15px;
        background: #fff
    }

    .log-schedule-card header {
        display: flex;
        justify-content: space-between;
        gap: 12px
    }

    .log-schedule-card header>div {
        display: flex;
        flex-direction: column
    }

    .log-schedule-card header a {
        font-weight: 800
    }

    .log-schedule-card header span {
        font-size: 10px;
        color: #7b869b
    }

    .log-schedule-card h3 {
        font-size: 15px;
        margin: 12px 0 4px
    }

    .log-schedule-card p {
        font-size: 12px;
        color: #667085
    }

    .log-schedule-card dl {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px
    }

    .log-schedule-card dt {
        font-size: 10px;
        color: #8993a5
    }

    .log-schedule-card dd {
        margin: 0;
        font-size: 12px;
        font-weight: 700
    }

    .log-delivery-line-row {
        grid-template-columns: 1fr 1fr
    }

    .log-delivery-line-row .log-line-item {
        grid-column: 1/-1
    }

    .log-delivery-line-row .log-remove-line {
        align-self: end
    }

    .log-dashboard-delivery-table__row {
        grid-template-columns: 1fr
    }

    .log-dashboard-delivery-table__schedule,
    .log-dashboard-delivery-table__readiness {
        grid-column: auto
    }

    .log-dashboard-delivery-table__actions {
        flex-wrap: wrap;
        justify-content: flex-start
    }
}

@media(max-width:575.98px) {
    .log-dashboard-kpis {
        grid-template-columns: 1fr 1fr;
        gap: 8px
    }

    .log-kpi-card {
        min-height: 102px;
        padding: 13px
    }

    .log-kpi-icon {
        display: none
    }

    .log-filter-secondary>.im-btn,
    .log-reset-link {
        flex: 1;
        text-align: center
    }

    .log-delivery-drawer__body {
        padding: 14px
    }

    .log-delivery-section {
        padding: 14px
    }

    .log-delivery-form-grid,
    .log-schedule-fields,
    .log-delivery-line-row {
        grid-template-columns: 1fr
    }

    .log-field-full,
    .log-partial-toggle,
    .log-delivery-line-row .log-line-item {
        grid-column: auto
    }

    .log-delivery-drawer__footer {
        padding: 12px 14px;
        flex-direction: column
    }

    .log-delivery-drawer__footer .im-btn {
        width: 100%
    }

    #log-drawer.log-delivery-drawer-shell {
        width: 100vw;
        max-width: 100vw
    }
}

/* ==========================================================================
   Inventory Reports — redesigned layout (Phase: visual reorganisation only)
   Namespaced as .inv-report(s)-* only — built on the existing .im-* tokens
   ========================================================================== */
.inv-reports-page {
    --inv-report-gap: 26px;
}

/* Toolbar wrapping the existing Inventory nav pills — unchanged pill/
   container styling, just consistent spacing so it reads as one strip. */
.inv-reports-toolbar {
    margin-bottom: 22px;
}

.inv-reports-toolbar .vehicle-nav-container {
    margin-bottom: 0 !important;
}

/* Shared card shell — one consistent look for every report container. */
.inv-report-card {
    background: #ffffff;
    border: 1px solid var(--im-color-line, #e4e7ec);
    border-radius: 14px;
    box-shadow: var(--im-shadow-sm, 0 4px 10px rgba(37, 42, 114, 0.06));
    padding: 18px 20px;
}

.inv-report-section {
    margin-bottom: var(--inv-report-gap);
}

.inv-report-section:last-child {
    margin-bottom: 0;
}

.inv-report-section-heading {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 14px;
}

.inv-report-section-heading h2 {
    margin: 0;
    font-size: 16px;
    font-weight: 800;
    color: var(--im-color-text, #1e293b);
}

.inv-report-section-heading p {
    margin: 0;
    font-size: 12.5px;
    color: var(--im-color-text-soft, #64748b);
}

/* ---- KPI strip ---- */
.inv-report-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: var(--inv-report-gap);
}

.inv-report-kpi {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: #ffffff;
    border: 1px solid var(--im-color-line, #e4e7ec);
    border-radius: 14px;
    box-shadow: var(--im-shadow-sm, 0 4px 10px rgba(37, 42, 114, 0.06));
    padding: 16px 18px;
    min-height: 88px;
}

.inv-report-kpi--warning {
    border-left: 4px solid #f59e0b;
}

.inv-report-kpi--danger {
    border-left: 4px solid #dc2626;
}

.inv-report-kpi-label {
    display: block;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--im-color-text-soft, #64748b);
    margin-bottom: 6px;
}

.inv-report-kpi-value {
    margin: 0;
    font-size: 22px;
    font-weight: 800;
    color: var(--im-color-text, #1e293b);
    line-height: 1.1;
}

.inv-report-kpi-icon {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

.inv-report-kpi-icon--primary {
    background: var(--im-color-primary-soft, #e9edff);
    color: var(--im-color-primary, #3f41b5);
}

.inv-report-kpi-icon--warning {
    background: #fef3c7;
    color: #d97706;
}

.inv-report-kpi-icon--danger {
    background: #fee2e2;
    color: #dc2626;
}

.inv-report-kpi-icon--success {
    background: #dcfce7;
    color: #16a34a;
}

/* ---- Chart row ---- */
.inv-report-chart-grid {
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: 16px;
    align-items: stretch;
}

.inv-report-chart-card {
    display: flex;
    flex-direction: column;
}

.inv-report-chart-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.inv-report-chart-card-header h3 {
    margin: 0;
    font-size: 13.5px;
    font-weight: 800;
    color: var(--im-color-text, #1e293b);
}

.inv-report-chart-total {
    font-size: 12px;
    font-weight: 700;
    color: var(--im-color-primary, #3f41b5);
    background: var(--im-color-primary-soft, #e9edff);
    padding: 3px 10px;
    border-radius: 999px;
}

.inv-report-chart-canvas {
    flex: 1;
    min-height: 300px;
}

.inv-report-chart-canvas--donut {
    display: flex;
    align-items: center;
    justify-content: center;
}

.inv-report-chart-toggle {
    background: none;
    border: none;
    padding: 0;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--im-color-primary, #3f41b5);
    cursor: pointer;
    text-decoration: underline;
}

/* ---- Stock Health grid ---- */
.inv-report-stock-health-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    align-items: start;
}

@media (max-width: 1199.98px) and (min-width: 768px) {
    .inv-report-stock-health-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .inv-report-stock-health-grid> :nth-child(3) {
        grid-column: 1 / -1;
    }
}

@media (max-width: 767.98px) {
    .inv-report-stock-health-grid {
        grid-template-columns: 1fr;
    }
}

.inv-report-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.inv-report-card-header h3 {
    margin: 0;
    font-size: 13px;
    font-weight: 800;
    color: var(--im-color-text, #1e293b);
}

.inv-report-card-view-all {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--im-color-primary, #3f41b5);
    text-decoration: none;
    white-space: nowrap;
}

.inv-report-card-view-all:hover {
    text-decoration: underline;
}

/* ---- Table ---- */
.inv-report-table-wrap {
    overflow-x: auto;
}

.inv-report-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.inv-report-table thead th {
    background: #f4f6fb;
    color: var(--im-color-text-soft, #64748b);
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-align: left;
    padding: 8px 10px;
    border-bottom: 1px solid var(--im-color-line, #e4e7ec);
    white-space: nowrap;
}

.inv-report-table tbody td {
    padding: 9px 10px;
    color: var(--im-color-text, #1e293b);
    border-bottom: 1px solid rgba(228, 231, 236, 0.7);
    vertical-align: middle;
    max-width: 220px;
}

.inv-report-table tbody tr:last-child td {
    border-bottom: 0;
}

.inv-report-table td.is-numeric,
.inv-report-table th.is-numeric {
    text-align: right;
}

.inv-report-table td.is-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.inv-report-table .inv-report-sku {
    color: var(--im-color-text-soft, #64748b);
    font-size: 11.5px;
}

.inv-report-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 28px 12px;
    color: var(--im-color-text-soft, #64748b);
    font-size: 12.5px;
    text-align: center;
}

.inv-report-empty i {
    font-size: 22px;
    color: #cbd5e1;
}

/* ---- Project Inventory tabs ---- */
.inv-report-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    list-style: none;
    margin: 0 0 16px;
    padding: 4px;
    background: #f4f6fb;
    border-radius: 12px;
    width: fit-content;
    max-width: 100%;
    overflow-x: auto;
}

.inv-report-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: none;
    border-radius: 9px;
    background: transparent;
    color: var(--im-color-text-soft, #64748b);
    font-size: 12.5px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.inv-report-tab:hover {
    color: var(--im-color-primary, #3f41b5);
}

.inv-report-tab.active {
    background: #ffffff;
    color: var(--im-color-primary, #3f41b5);
    box-shadow: 0 2px 6px rgba(37, 42, 114, 0.1);
}

/* ---- Phase 1: filter toolbar, snapshot/period banner, section titles,
   CSV dropdown, percentage bar cell, help notes, valuation toolbar ----
   Reuses .im-select/.im-input/.im-btn/.im-chip — no new form-control
   system, only Reports-page-specific layout/spacing. ---- */
.inv-report-filter-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
    background: #ffffff;
    border: 1px solid var(--im-color-line, #e4e7ec);
    border-radius: 14px;
    box-shadow: var(--im-shadow-sm, 0 4px 10px rgba(37, 42, 114, 0.06));
    padding: 14px 16px;
    margin-bottom: 14px;
}

.inv-report-filter-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 150px;
}

.inv-report-filter-field span {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--im-color-text-soft, #64748b);
}

.inv-report-filter-field--period {
    min-width: 170px;
}

.inv-report-filter-field--date {
    min-width: 130px;
}

.inv-report-custom-range {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.inv-report-filter-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
}

.inv-report-filter-clear {
    font-size: 12px;
    font-weight: 700;
    color: var(--im-color-text-soft, #64748b);
    text-decoration: underline;
    white-space: nowrap;
}

.inv-report-filter-clear:hover {
    color: var(--im-color-primary, #3f41b5);
}

.inv-report-period-banner {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--im-color-primary-soft, #e9edff);
    color: var(--im-color-primary, #3f41b5);
    border-radius: 10px;
    padding: 9px 14px;
    font-size: 12.5px;
    font-weight: 600;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.inv-report-period-banner__sep {
    opacity: 0.5;
}

.inv-report-period-banner__note {
    font-weight: 500;
}

.inv-report-period-banner__info {
    margin-left: auto;
    cursor: help;
    opacity: 0.75;
}

.inv-report-section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14.5px;
    font-weight: 800;
    color: var(--im-color-text, #1e293b);
    margin: 22px 0 12px;
}

.inv-report-section-title:first-child {
    margin-top: 0;
}

.inv-report-snapshot-tag,
.inv-report-period-tag {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 3px 9px;
    border-radius: 999px;
}

.inv-report-snapshot-tag {
    background: #f1f5f9;
    color: var(--im-color-text-soft, #64748b);
}

.inv-report-period-tag {
    background: var(--im-color-primary-soft, #e9edff);
    color: var(--im-color-primary, #3f41b5);
}

.inv-report-help-note {
    font-size: 12px;
    color: var(--im-color-text-soft, #64748b);
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 6px 0 14px;
}

/* ---- Top-level report tabs — same shell as .inv-report-tabs, slightly
   taller for a primary-navigation role. ---- */
.inv-report-tabs--main {
    margin-bottom: 18px;
}

/* ---- Header actions: Preview PDF + Download CSV dropdown ---- */
.inv-report-csv-dropdown {
    position: relative;
    display: inline-block;
}

.inv-report-csv-menu {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 200px;
    max-height: 280px;
    overflow-y: auto;
    background: #ffffff;
    border: 1px solid var(--im-color-line, #e4e7ec);
    border-radius: 10px;
    box-shadow: 0 12px 28px rgba(30, 41, 59, 0.14);
    padding: 6px;
    z-index: 60;
}

.inv-report-csv-menu.is-open {
    display: block;
}

.inv-report-csv-menu::-webkit-scrollbar {
    width: 6px;
}

.inv-report-csv-menu::-webkit-scrollbar-thumb {
    background: #d8dbe4;
    border-radius: 999px;
}

.inv-report-csv-menu a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 7px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--im-color-text, #1e293b);
    text-decoration: none;
    white-space: nowrap;
}

.inv-report-csv-menu a:hover {
    background: var(--im-color-primary-soft, #e9edff);
    color: var(--im-color-primary, #3f41b5);
}

/* ---- Percentage bar cell (category value table) ---- */
.inv-report-bar-cell {
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.inv-report-bar {
    width: 70px;
    height: 6px;
    background: #eef0f6;
    border-radius: 999px;
    overflow: hidden;
}

.inv-report-bar__fill {
    height: 100%;
    background: var(--im-color-primary, #3f41b5);
    border-radius: 999px;
}

/* ---- Stock Valuation tab toolbar (search + sort) ---- */
.inv-report-valuation-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 12px;
}

.inv-report-valuation-toolbar .im-input {
    flex: 1 1 220px;
    min-width: 180px;
}

.inv-report-valuation-toolbar .im-select {
    min-width: 190px;
}

.inv-report-pagination {
    display: flex;
    justify-content: flex-end;
    margin-top: 10px;
}

/* Responsive */
@media (max-width: 1199.98px) {
    .inv-report-chart-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 991.98px) {
    .inv-report-kpi-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .inv-report-filter-actions {
        margin-left: 0;
        width: 100%;
        justify-content: flex-start;
    }
}

@media (max-width: 767.98px) {
    .inv-report-filter-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .inv-report-filter-field,
    .inv-report-filter-field--period,
    .inv-report-filter-field--date {
        min-width: 0;
        width: 100%;
    }

    .inv-report-tabs--main {
        overflow-x: auto;
        flex-wrap: nowrap;
    }

    .inv-report-csv-menu {
        right: auto;
        left: 0;
    }

    .inv-report-valuation-toolbar {
        flex-direction: column;
        align-items: stretch;
    }
}

@media (max-width: 575.98px) {
    .inv-report-kpi-grid {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    }

    .inv-report-card,
    .inv-report-kpi {
        padding: 14px 16px;
    }

    .inv-report-table td,
    .inv-report-table th {
        padding: 8px;
    }

    .inv-report-period-banner {
        flex-direction: column;
        align-items: flex-start;
    }

    .inv-report-period-banner__info {
        margin-left: 0;
    }
}

/* ==========================================================================
   Logistics — Route Planning (Phase 2)
   Namespaced as .log-route-* only and built on existing Logistics/Inventory tokens.
   ========================================================================== */

/* ---- Workspace shell (Route Planner page) ---- */
.log-route-planner {
    display: grid;
    grid-template-columns: minmax(360px, 420px) 1fr;
    gap: 18px;
    align-items: start;
}

.log-route-planner-left {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

.log-route-planner-right {
    position: sticky;
    top: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.log-route-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: #ffffff;
    border: 1px solid var(--im-color-line, #e4e7ec);
    border-radius: 14px;
    box-shadow: var(--im-shadow-sm, 0 4px 10px rgba(37, 42, 114, 0.06));
}

.log-route-toolbar-spacer {
    flex: 1 1 auto;
}

/* ---- Config form fields (date/depot/strategy/vehicles/drivers) ---- */
.log-route-config-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.log-route-config-grid .im-form-row--full {
    grid-column: 1 / -1;
}

.log-route-picker-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 160px;
    overflow-y: auto;
    padding: 8px;
    border: 1px solid var(--im-color-line, #e4e7ec);
    border-radius: 10px;
    background: #fafbfd;
}

.log-route-picker-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    color: var(--im-color-text, #1e293b);
}

/* ---- Delivery list (eligible / excluded) ---- */
.log-route-delivery-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.log-page {
    min-width: 0;
    padding-bottom: 110px !important;
}

.log-route-delivery-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid var(--im-color-line, #e4e7ec);
    border-radius: 10px;
    font-size: 12.5px;
    background: #ffffff;
}

.log-route-delivery-item-main {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.log-route-delivery-item-main strong {
    font-size: 12.5px;
    color: var(--im-color-text, #1e293b);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.log-route-delivery-item-main span {
    font-size: 11px;
    color: var(--im-color-text-soft, #64748b);
}

.log-route-delivery-item--excluded {
    background: #fff8f0;
    border-color: #fde3c4;
}

.log-route-delivery-reason {
    font-size: 11px;
    color: #b45309;
}

/* ---- Map ---- */
.log-route-map {
    width: 100%;
    min-height: 480px;
    border-radius: 14px;
    background: #f1f2f6;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--im-color-text-soft, #64748b);
    font-size: 13px;
}

.log-route-map-disabled-note {
    padding: 12px 14px;
    border-radius: 12px;
    background: #f8f9fc;
    color: var(--im-color-text-soft, #64748b);
    font-size: 12px;
    text-align: center;
    margin-top: 10px;
}

/* ---- Trip cards ---- */
.log-route-trip-grid {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.log-route-trip-card {
    background: #ffffff;
    border: 1px solid var(--im-color-line, #e4e7ec);
    border-radius: 14px;
    box-shadow: var(--im-shadow-sm, 0 4px 10px rgba(37, 42, 114, 0.06));
    padding: 16px 18px;
}

.log-route-trip-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.log-route-trip-title {
    display: flex;
    align-items: center;
    gap: 8px;
}

.log-route-trip-title h4 {
    margin: 0;
    font-size: 14px;
    font-weight: 800;
    color: var(--im-color-text, #1e293b);
}

.log-route-trip-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 8px 14px;
    margin: 10px 0;
    padding: 10px 0;
    border-top: 1px solid rgba(228, 231, 236, 0.7);
    border-bottom: 1px solid rgba(228, 231, 236, 0.7);
}

.log-route-trip-meta-item span {
    display: block;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--im-color-text-soft, #64748b);
    margin-bottom: 2px;
}

.log-route-trip-meta-item strong {
    font-size: 13px;
    color: var(--im-color-text, #1e293b);
}

.log-route-trip-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

/* ---- Capacity bar ---- */
.log-route-capacity {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.log-route-capacity-track {
    width: 100%;
    height: 8px;
    border-radius: 999px;
    background: #eef0f4;
    overflow: hidden;
}

.log-route-capacity-fill {
    height: 100%;
    background: var(--im-color-primary, #3f41b5);
    border-radius: 999px;
    transition: width 0.2s ease;
}

.log-route-capacity-fill--full {
    background: #dc2626;
}

.log-route-capacity-label {
    font-size: 11px;
    color: var(--im-color-text-soft, #64748b);
}

/* ---- Stop list ---- */
.log-route-stop-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 10px;
}

.log-route-stop {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid var(--im-color-line, #e4e7ec);
    border-radius: 10px;
    background: #fafbfd;
    font-size: 12px;
    cursor: grab;
}

.log-route-stop.is-dragging {
    opacity: 0.5;
}

.log-route-stop-sequence {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--im-color-primary-soft, #e9edff);
    color: var(--im-color-primary, #3f41b5);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 800;
}

.log-route-stop-main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.log-route-stop-main strong {
    font-size: 12.5px;
    color: var(--im-color-text, #1e293b);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.log-route-stop-main span {
    font-size: 11px;
    color: var(--im-color-text-soft, #64748b);
}

.log-route-stop-metrics {
    flex: 0 0 auto;
    text-align: right;
    font-size: 11px;
    color: var(--im-color-text-soft, #64748b);
}

.log-route-stop-actions {
    flex: 0 0 auto;
    display: flex;
    gap: 4px;
}

/* ---- Warnings ---- */
.log-route-warning[hidden],
.log-route-warning:empty,
.log-route-generation-error[hidden],
.log-route-generation-error:empty {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
}

.log-route-warning {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--im-color-warning-soft, #fef3c7);
    color: var(--im-color-warning-ink, #b45309);
    font-size: 12px;
    margin-top: 10px;
}

.log-route-warning--danger {
    background: var(--im-color-danger-soft, #ffe4e6);
    color: var(--im-color-danger-ink, #be123c);
}

.log-route-warning--info {
    background: var(--im-color-info-soft, #dbeafe);
    color: var(--im-color-info-ink, #1d4ed8);
}

.log-route-warning-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* ---- Version tabs (Route Plan detail) ---- */
.log-route-version-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 16px;
}

.log-route-version-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 999px;
    border: 1px solid var(--im-color-line, #e4e7ec);
    background: #ffffff;
    color: var(--im-color-text-soft, #64748b);
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
}

.log-route-version-tab:hover {
    border-color: var(--im-color-primary, #3f41b5);
    color: var(--im-color-primary, #3f41b5);
}

.log-route-version-tab.is-current {
    background: var(--im-color-primary, #3f41b5);
    border-color: var(--im-color-primary, #3f41b5);
    color: #ffffff;
}

.log-route-version-tab.is-approved::after {
    content: "\2713";
    margin-left: 2px;
}

/* ---- Summary stat strip (reused on detail/list pages) ---- */
.log-route-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}

.log-route-summary-item {
    padding: 12px 14px;
    border-radius: 12px;
    background: #f8f9fc;
}

.log-route-summary-item span {
    display: block;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--im-color-text-soft, #64748b);
    margin-bottom: 3px;
}

.log-route-summary-item strong {
    font-size: 16px;
    color: var(--im-color-text, #1e293b);
}

/* ---- Mobile List / Map toggle ---- */
.log-route-view-toggle {
    display: none;
    gap: 6px;
    margin-bottom: 12px;
}

.log-route-view-toggle button {
    flex: 1 1 0;
    padding: 8px;
    border-radius: 10px;
    border: 1px solid var(--im-color-line, #e4e7ec);
    background: #ffffff;
    color: var(--im-color-text-soft, #64748b);
    font-size: 12.5px;
    font-weight: 700;
}

.log-route-view-toggle button.is-active {
    background: var(--im-color-primary, #3f41b5);
    border-color: var(--im-color-primary, #3f41b5);
    color: #ffffff;
}

@media (max-width: 1199.98px) {
    .log-route-planner {
        grid-template-columns: 1fr;
    }

    .log-route-planner-left {
        max-height: none;
        overflow-y: visible;
    }

    .log-route-planner-right {
        position: static;
    }
}

@media (max-width: 767.98px) {
    .log-route-view-toggle {
        display: flex;
    }

    .log-route-planner-left.is-hidden-mobile,
    .log-route-planner-right.is-hidden-mobile {
        display: none;
    }

    .log-route-config-grid {
        grid-template-columns: 1fr;
    }

    .log-route-map {
        min-height: 320px;
    }

    .log-route-trip-meta {
        grid-template-columns: repeat(2, 1fr);
    }
}

.log-route-version-row--current {
    background: var(--im-color-primary-soft, #e9edff);
}

/* ==========================================================================
   Logistics — Route Planner workspace redesign (UI polish pass)
   ========================================================================== */
.log-planner-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
    padding: 14px 16px;
    margin-bottom: 14px
}

.log-planner-toolbar .im-form-row {
    min-width: 130px
}

.log-planner-toolbar .im-form-row--grow {
    flex: 1 1 160px
}

.log-planner-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto
}

.log-provider-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 700;
    white-space: nowrap
}

.log-provider-chip--on {
    background: var(--im-color-success-soft, #dcfce7);
    color: var(--im-color-success-ink, #047857)
}

.log-provider-chip--off {
    background: #eef0f4;
    color: #667085
}

.log-planner-disclosure {
    border: 1px solid var(--im-color-line, #e4e7ec);
    border-radius: 12px;
    margin-bottom: 14px;
    background: #fff;
    overflow: hidden
}

.log-planner-disclosure summary {
    list-style: none;
    cursor: pointer;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: 13px;
    font-weight: 700;
    color: var(--im-color-text, #1e293b)
}

.log-planner-disclosure summary::-webkit-details-marker {
    display: none
}

.log-planner-disclosure summary::after {
    content: "\f282";
    font-family: "bootstrap-icons";
    font-weight: 400;
    color: #98a2b3;
    transition: transform .15s ease
}

.log-planner-disclosure[open] summary::after {
    transform: rotate(180deg)
}

.log-planner-disclosure summary span {
    font-weight: 500;
    color: #667085;
    font-size: 12px
}

.log-planner-disclosure-body {
    padding: 0 16px 16px
}

.log-chip-toggle-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px
}

.log-chip-toggle {
    position: relative
}

.log-chip-toggle input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px
}

.log-chip-toggle span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 13px;
    border-radius: 999px;
    border: 1px solid var(--im-color-line, #e4e7ec);
    background: #fff;
    color: #475569;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all .12s ease
}

.log-chip-toggle input:checked+span {
    background: var(--im-color-primary, #3f41b5);
    border-color: var(--im-color-primary, #3f41b5);
    color: #fff
}

.log-chip-toggle input:focus-visible+span {
    outline: 2px solid var(--im-color-primary, #3f41b5);
    outline-offset: 2px
}

.log-planner-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--im-color-line, #e4e7ec);
    margin-bottom: 12px
}

.log-planner-tab {
    background: none;
    border: none;
    padding: 9px 14px;
    font-size: 12.5px;
    font-weight: 700;
    color: #667085;
    border-bottom: 2px solid transparent;
    cursor: pointer
}

.log-planner-tab.active {
    color: var(--im-color-primary, #3f41b5);
    border-bottom-color: var(--im-color-primary, #3f41b5)
}

.log-planner-tab-panel {
    display: none
}

.log-planner-tab-panel.active {
    display: block
}

.log-delivery-pick-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: 10px
}

.log-delivery-pick-row:not(:last-child) {
    border-bottom: 1px solid rgba(228, 231, 236, .6)
}

.log-delivery-pick-row-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px
}

.log-delivery-pick-row-main strong {
    font-size: 12.5px;
    color: #1e293b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.log-delivery-pick-row-main span {
    font-size: 11px;
    color: #7b869b
}

.log-delivery-pick-badges {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
    flex: 0 0 auto
}

.log-delivery-pick-row--excluded .log-delivery-pick-row-main span {
    color: #b45309
}

.log-trip-summary {
    border: none;
    padding: 0
}

.log-trip-summary summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    padding: 0
}

.log-trip-summary summary::-webkit-details-marker {
    display: none
}

.log-trip-summary summary .bi-chevron-down {
    transition: transform .15s ease;
    color: #98a2b3
}

.log-trip-summary[open] summary .bi-chevron-down {
    transform: rotate(180deg)
}

.log-trip-summary-stat {
    display: flex;
    flex-direction: column;
    gap: 1px
}

.log-trip-summary-stat span {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: #98a2b3
}

.log-trip-summary-stat strong {
    font-size: 12.5px;
    color: #1e293b
}

.log-route-trip-toggle {
    background: none;
    border: none;
    padding: 2px;
    color: #98a2b3;
    cursor: pointer;
    flex: 0 0 auto;
    display: inline-flex
}

.log-route-trip-toggle i {
    transition: transform .15s ease
}

.log-route-trip-card.is-collapsed .log-route-trip-toggle i {
    transform: rotate(-90deg)
}

.log-route-trip-card.is-collapsed .log-route-trip-collapsible-body {
    display: none
}

.log-route-trip-card-header {
    gap: 8px
}

.log-toolbar-checkbox {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 42px;
    font-size: 13px;
    color: #475569
}

/* ==========================================================================
   Logistics — Delivery Detail redesign (UI polish pass)
   ========================================================================== */
.log-delivery-summary-strip {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1px;
    background: var(--im-color-line, #e4e7ec);
    border: 1px solid var(--im-color-line, #e4e7ec);
    border-radius: 12px;
    overflow: hidden;
    margin: 16px 0
}

.log-delivery-summary-item {
    background: #fff;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 3px
}

.log-delivery-summary-item span {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: #98a2b3
}

.log-delivery-summary-item strong {
    font-size: 15px;
    color: #1e293b
}

.log-address-actions {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px
}

.log-timeline {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative
}

.log-timeline::before {
    content: "";
    position: absolute;
    left: 9px;
    top: 4px;
    bottom: 4px;
    width: 2px;
    background: var(--im-color-line, #e4e7ec)
}

.log-timeline li {
    position: relative;
    padding: 0 0 16px 30px
}

.log-timeline li:last-child {
    padding-bottom: 0
}

.log-timeline li::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 3px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--im-color-primary, #3f41b5);
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px var(--im-color-line, #e4e7ec)
}

.log-timeline strong {
    display: block;
    font-size: 12.5px;
    color: #1e293b;
    text-transform: capitalize
}

.log-timeline span {
    display: block;
    font-size: 11.5px;
    color: #7b869b;
    margin-top: 1px
}

.log-timeline time {
    display: block;
    font-size: 10.5px;
    color: #98a2b3;
    margin-top: 2px
}

@media (max-width: 767.98px) {
    .log-delivery-summary-strip {
        grid-template-columns: repeat(2, 1fr)
    }
}

@media (min-width: 768px) and (max-width: 1199.98px) {
    .log-delivery-summary-strip {
        grid-template-columns: repeat(3, 1fr)
    }
}

.log-delivery-summary-strip--4col {
    grid-template-columns: repeat(4, 1fr)
}

.log-delivery-summary-strip--flush {
    margin-top: 0
}

.log-row-warning {
    background: var(--im-color-warning-soft, #fef3c7)
}

/* =========================================================================
   Kunos Logistics — simplified workflow / route-planning UX redesign.
   Delivery Schedule multi-select, sticky selection bar, guided 3-step
   Route Planner (log-flow / log-plan-step-*), vehicle & driver choice
   cards, capacity preview, and the simplified Dashboard/Planner empty
   states. All scoped under log-*; no inline styles, no new stylesheet.
   ========================================================================= */

/* ---- Dashboard operational shortcuts ---- */
.log-dashboard-shortcuts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 10px;
    margin-bottom: 18px
}

.log-dashboard-shortcut {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    background: #fff;
    border: 1px solid #e4e8f1;
    border-radius: 12px;
    color: #344054;
    text-decoration: none
}

.log-dashboard-shortcut:hover {
    border-color: #c7cdf5;
    background: #f8f9ff
}

.log-dashboard-shortcut i {
    font-size: 16px;
    color: #4949c8;
    flex: 0 0 auto
}

.log-dashboard-shortcut span {
    flex: 1;
    font-size: 12px;
    font-weight: 700;
    color: #59657a
}

.log-dashboard-shortcut strong {
    font-size: 16px;
    color: #172033
}

/* ---- Consolidated workspace tab strip (Deliveries/Routes/Fleet/Settings) ---- */
.log-workspace-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 16px;
    padding: 4px;
    background: #f1f2f8;
    border-radius: 12px;
    overflow-x: auto
}

.log-workspace-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 16px;
    border-radius: 9px;
    font-size: 13px;
    font-weight: 700;
    color: #59657a;
    white-space: nowrap;
    text-decoration: none
}

.log-workspace-tab:hover {
    color: #3939b6
}

.log-workspace-tab.is-active {
    background: #fff;
    color: #3939b6;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .08)
}

.log-workspace-tab i {
    font-size: 13px
}

/* ---- Delivery Schedule: quick-date controls + collapsible advanced filters ---- */
.log-quick-dates--primary {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 14px
}

.log-schedule-filters--collapsed {
    display: none
}

/* ---- Delivery Schedule: row/card multi-select ---- */
.log-select-cell {
    width: 36px;
    min-width: 36px !important;
    padding-left: 14px !important;
    padding-right: 4px !important
}

.log-select-cell input[type="checkbox"],
.log-delivery-select {
    width: 17px;
    height: 17px;
    cursor: pointer;
    accent-color: var(--im-color-primary, #3f41b5)
}

.log-delivery-select:disabled {
    cursor: not-allowed;
    opacity: .5
}

.log-schedule-table tbody tr>td {
    background: inherit
}

.log-selectable-delivery,
.log-selectable-delivery--ineligible,
.log-selectable-delivery:focus,
.log-selectable-delivery:focus-visible,
.log-selectable-delivery:focus-within {
    background: #ffffff;
    cursor: pointer
}

.log-selectable-delivery:hover,
.log-selectable-delivery:hover>td {
    background: #fafbfc
}

.log-schedule-table .log-selectable-delivery.is-selected,
.log-schedule-table .log-selectable-delivery.is-selected>td,
.log-schedule-table .log-selectable-delivery[aria-selected="true"],
.log-schedule-table .log-selectable-delivery[aria-selected="true"]>td {
    background: #ffffff !important
}

.log-schedule-table .log-selectable-delivery.is-selected>td:first-child,
.log-schedule-table .log-selectable-delivery[aria-selected="true"]>td:first-child {
    box-shadow: inset 3px 0 0 #4f46e5
}

.log-selectable-delivery:focus-visible {
    outline: 2px solid rgba(79, 70, 229, .35) !important;
    outline-offset: -2px !important
}

.log-selectable-delivery--ineligible {
    color: inherit
}

.log-selectable-delivery--ineligible .log-ref {
    color: #3434b8
}

.log-ref {
    font-size: 13px;
    font-weight: 700;
    color: #3434b8;
    text-decoration: none
}

.log-ref:hover {
    text-decoration: underline
}

.log-route-link {
    font-size: 12px;
    font-weight: 700;
    color: #3f41b5;
    text-decoration: none
}

.log-route-link:hover {
    text-decoration: underline
}

.log-trip-link {
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
    text-decoration: none
}

.log-trip-link:hover {
    color: #334155;
    text-decoration: underline
}

.log-badge-status-info {
    background: #e0f2fe;
    color: #0369a1
}

.log-row-secondary {
    display: block;
    font-size: 11px;
    line-height: 1.35;
    color: #64748b;
    margin-top: 2px
}

.log-row-secondary--reason {
    color: var(--im-color-warning-ink, #b45309);
    font-weight: 600
}

.log-row-secondary--ok {
    color: #0f7a4d;
    font-weight: 600
}

.log-row-secondary--reason i,
.log-row-secondary--ok i {
    margin-right: 3px
}

.log-row-actions {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    width: max-content !important;
    max-width: none !important;
    margin-left: auto !important
}

.log-schedule-card-select {
    position: absolute;
    top: 14px;
    right: 14px
}

.log-schedule-card {
    position: relative;
    background: #fff;
    border: 1px solid #e0e5ef;
    border-radius: 14px;
    padding: 15px
}

.log-schedule-card.log-selectable-delivery--ineligible {
    opacity: 1
}



/* ---- Selection bar (Delivery Schedule bulk actions) — sits immediately
   above the delivery table/cards, sticky just beneath the page header
   while scrolling (never fixed to the viewport bottom, so it can never
   compete with the mobile bottom nav / Kunos AI / footer). Light Kunos
   card styling, not the old dark full-width block. ---- */
.log-selection-bar {
    position: sticky;
    top: 12px;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    min-height: 64px;
    margin-bottom: 14px;
    padding: 12px 20px;
    background: #fff;
    color: #1e293b;
    border: 1px solid var(--im-color-line, #e4e7ec);
    border-radius: 14px;
    box-shadow: 0 6px 18px rgba(15, 23, 42, .06)
}

.log-selection-bar__summary {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 13px;
    color: #475569
}

.log-selection-bar__summary strong {
    font-size: 15px;
    color: #1e293b
}

.log-selection-bar__sep {
    color: #c7cbe8
}

.log-selection-bar__actions {
    display: flex;
    align-items: center;
    gap: 10px
}

@media(max-width:767.98px) {
    .log-selection-bar {
        position: static;
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        padding: 14px 16px
    }

    .log-selection-bar__summary {
        justify-content: center
    }

    .log-selection-bar__actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px
    }

    .log-selection-bar__actions .im-btn {
        width: 100%
    }
}

/* ---- Route Planner — simplified entry state ("Plan a Delivery Route") ---- */
.log-planner-empty {
    max-width: 560px;
    margin: 32px auto;
    text-align: center;
    padding: 32px 24px;
    background: #fff;
    border: 1px solid var(--im-color-line, #e4e7ec);
    border-radius: 16px
}

.log-planner-empty-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 14px;
    border-radius: 50%;
    background: var(--im-color-primary-soft, #eef0ff);
    color: var(--im-color-primary, #3f41b5);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px
}

.log-planner-empty h2 {
    font-size: 20px;
    margin-bottom: 6px
}

.log-planner-empty-subtitle {
    color: #667085;
    font-size: 13px;
    margin-bottom: 20px
}

.log-planner-empty-steps {
    list-style: none;
    padding: 0;
    margin: 0 0 24px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-align: left
}

.log-planner-empty-steps li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: #344054
}

.log-planner-empty-step-num {
    flex: none;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #f2f3f9;
    color: #475569;
    font-size: 11px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center
}

/* ---- Dashboard: primary CTA ---- */
.log-dashboard-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 20px 24px;
    margin-bottom: 18px;
    background: linear-gradient(135deg, var(--im-color-primary, #3f41b5), #5f5ce0);
    color: #fff
}

.log-dashboard-cta h2 {
    font-size: 18px;
    margin-bottom: 4px;
    color: #fff
}

.log-dashboard-cta p {
    font-size: 13px;
    color: rgba(255, 255, 255, .85);
    margin: 0
}

.log-dashboard-cta .im-btn-primary {
    background: #fff;
    color: var(--im-color-primary, #3f41b5);
    border-color: #fff
}

.log-dashboard-cta .im-btn-primary:hover {
    background: #f2f3f9
}

.log-panel--link-out {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0
}

.log-view-activity-link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 20px;
    font-size: 13px;
    font-weight: 700;
    color: var(--im-color-primary, #3f41b5);
    width: 100%;
    justify-content: space-between
}

.log-detail-eyebrow {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--im-color-primary, #3f41b5);
    margin-bottom: 2px
}

/* ---- Guided planning flow (log-flow) — Step indicator ---- */
.log-flow {
    max-width: 960px;
    margin: 0 auto
}

.log-flow-steps {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 0;
    padding: 0;
    margin: 0 0 24px
}

.log-plan-step {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    color: #98a2b3;
    padding: 8px 0;
    flex: 1;
    position: relative
}

.log-plan-step:not(:last-child)::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--im-color-line, #e4e7ec);
    margin: 0 12px
}

.log-plan-step-num {
    flex: none;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #f2f3f9;
    color: #98a2b3;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center
}

.log-plan-step.is-active {
    color: var(--im-color-primary, #3f41b5)
}

.log-plan-step.is-active .log-plan-step-num {
    background: var(--im-color-primary, #3f41b5);
    color: #fff
}

.log-plan-step.is-complete {
    color: #475569
}

.log-plan-step.is-complete .log-plan-step-num {
    background: var(--im-color-success-soft, #dcfce7);
    color: var(--im-color-success-ink, #047857)
}

.log-plan-step.is-complete .log-plan-step-num::before {
    content: "\f26e";
    font-family: "bootstrap-icons"
}

@media(max-width:767.98px) {
    .log-flow-steps {
        gap: 4px
    }

    .log-plan-step span:not(.log-plan-step-num) {
        display: none
    }

    .log-plan-step:not(:last-child)::after {
        margin: 0 4px
    }
}

/* ---- Guided planning flow — step panels ---- */
.log-plan-step-panel {
    display: none
}

.log-plan-step-panel.is-active {
    display: block;
    animation: logStepFadeIn .15s ease
}

@keyframes logStepFadeIn {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

.log-plan-step-heading {
    margin-bottom: 16px
}

.log-plan-step-heading h2 {
    font-size: 18px;
    margin-bottom: 4px
}

.log-plan-step-heading p {
    font-size: 13px;
    color: #667085;
    margin: 0
}

.log-plan-step-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--im-color-line, #e4e7ec)
}

.log-plan-step-actions--inline {
    border-top: none;
    padding-top: 10px;
    margin-top: 8px;
    justify-content: flex-start
}

/* ---- Step 1 — selected deliveries list ---- */
.log-selected-delivery-list {
    display: flex;
    flex-direction: column;
    gap: 1px;
    background: var(--im-color-line, #e4e7ec);
    border: 1px solid var(--im-color-line, #e4e7ec);
    border-radius: 12px;
    overflow: hidden;
    margin-top: 12px
}

.log-selected-delivery-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    background: #fff;
    flex-wrap: wrap
}

.log-selected-delivery-main {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 180px;
    flex: 1
}

.log-selected-delivery-main strong {
    font-size: 13px;
    color: #1e293b
}

.log-selected-delivery-main span {
    font-size: 11px;
    color: #8993a5
}

.log-selected-delivery-meta {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 12px;
    color: #475569
}

/* ---- Step 2 — vehicle & driver choice cards ---- */
.log-vehicle-driver-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 12px
}

.log-vehicle-choice h3,
.log-driver-choice h3 {
    font-size: 13px;
    font-weight: 700;
    color: #59657a;
    margin-bottom: 10px
}

.log-choice-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1.5px solid var(--im-color-line, #e4e7ec);
    border-radius: 12px;
    margin-bottom: 10px;
    cursor: pointer;
    transition: all .12s ease
}

.log-choice-card:hover {
    border-color: #c7cbe8
}

.log-choice-card input {
    width: 17px;
    height: 17px;
    accent-color: var(--im-color-primary, #3f41b5)
}

.log-choice-card:has(input:checked) {
    border-color: var(--im-color-primary, #3f41b5);
    background: var(--im-color-primary-soft, #eef0ff)
}

.log-choice-card-main {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1
}

.log-choice-card-main strong {
    font-size: 13px;
    color: #1e293b
}

.log-choice-card-main small {
    font-size: 11px;
    color: #8993a5
}

@media(max-width:991.98px) {
    .log-vehicle-driver-grid {
        grid-template-columns: 1fr
    }
}

/* ---- Step 2 — capacity preview + oversized warning ---- */
.log-capacity-preview {
    margin-top: 18px;
    padding: 14px 16px;
    border: 1px solid var(--im-color-line, #e4e7ec);
    border-radius: 12px;
    background: #f7f8fc
}

.log-capacity-preview-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    color: #475569;
    padding: 3px 0
}

.log-capacity-preview-row strong {
    color: #1e293b;
    font-size: 13px
}

.log-capacity-progress {
    height: 6px;
    border-radius: 999px;
    background: #e4e7ec;
    margin-top: 8px;
    overflow: hidden
}

.log-capacity-progress-bar {
    height: 100%;
    background: var(--im-color-primary, #3f41b5);
    border-radius: 999px;
    transition: width .2s ease
}

.log-route-warning--danger {
    background: var(--im-color-danger-soft, #ffe4e6);
    color: var(--im-color-danger-ink, #be123c)
}

.log-route-warning--danger .log-plan-step-actions--inline .im-btn-danger {
    white-space: nowrap
}

/* ---- Step 3 — route method / advanced settings / empty state ---- */
.log-route-method {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    border: 1px solid var(--im-color-line, #e4e7ec);
    border-radius: 12px;
    background: #f7f8fc;
    margin-bottom: 12px
}

.log-route-method-label {
    display: block;
    font-size: 11px;
    color: #8993a5
}

.log-route-method strong {
    font-size: 13px;
    color: #1e293b
}

.log-route-review-empty {
    display: none
}

/* ---- Step 3 — Pre-Generation & Generation States ---- */
.log-route-review-ready {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 16px 20px;
    margin-top: 12px;
    margin-bottom: 16px;
    min-height: 140px;
    max-height: 200px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}

.log-route-review-ready__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid #f1f5f9;
}

.log-route-review-ready__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.log-route-review-ready__col {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.log-route-review-ready__col span {
    font-size: 12px;
    font-weight: 500;
    color: #64748b;
}

.log-route-review-ready__col strong {
    font-size: 14px;
    font-weight: 600;
    color: #0f172a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.log-route-review-ready__helper {
    font-size: 12px;
    color: #64748b;
}

.log-route-generation-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 24px;
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    border-radius: 12px;
    color: #334155;
    font-weight: 600;
    margin-top: 12px;
    margin-bottom: 16px;
}

.log-route-generated-map {
    height: 520px;
    min-height: 520px;
    border-radius: 12px;
}

.log-route-generation-error {
    border-radius: 12px;
    margin-top: 12px;
    margin-bottom: 16px;
}

.log-route-issues-list {
    background-color: rgba(255, 255, 255, 0.85) !important;
}

.log-route-issue-item {
    padding-top: 8px;
    padding-bottom: 8px;
}

.log-route-issue-item:last-child {
    border-bottom: 0 !important;
}

.fs-7 {
    font-size: 0.75rem !important;
}

@media (max-width: 767px) {
    .log-route-review-ready__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .log-route-review-ready {
        max-height: none;
        min-height: auto;
    }
}

/* ==========================================================================
   Logistics Delivery Detail Workspace Redesign
   ========================================================================== */

.log-delivery-detail-workspace {
    padding-bottom: 3rem;
}

.log-delivery-overview {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 18px 24px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.log-delivery-overview__grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 16px;
}

.log-delivery-overview__item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.log-delivery-overview__label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #64748b;
}

.log-delivery-overview__val {
    font-size: 0.9375rem;
    color: #0f172a;
}

.log-delivery-main-grid {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 24px;
    align-items: start;
}

@media (min-width: 1440px) {
    .log-delivery-main-grid {
        grid-template-columns: 1fr 360px;
    }
}

.log-delivery-action-panel-sticky {
    position: sticky;
    top: 90px;
}

.log-delivery-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.log-delivery-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid #f1f5f9;
}

.log-delivery-card__title {
    font-size: 1.0625rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.log-delivery-action-panel {
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 20px;
}

.log-delivery-action-panel__title {
    font-size: 0.8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #475569;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.log-delivery-action-panel__body {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 16px;
}

.log-delivery-item-cards {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.log-delivery-item-card {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 16px;
}

.log-delivery-activity-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.log-delivery-activity-item {
    position: relative;
    padding-left: 24px;
    padding-bottom: 16px;
    border-left: 2px solid #e2e8f0;
}

.log-delivery-activity-item:last-child {
    border-left-color: transparent;
    padding-bottom: 0;
}

.log-delivery-activity-item::before {
    content: '';
    position: absolute;
    left: -6px;
    top: 2px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #3b82f6;
    border: 2px solid #ffffff;
}

@media (max-width: 1024px) {
    .log-delivery-overview__grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .log-delivery-main-grid {
        grid-template-columns: 1fr;
    }

    .log-delivery-action-panel-sticky {
        position: static;
    }
}

@media (max-width: 390px) {
    .log-delivery-overview__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* =========================================================================
   Kunos Logistics — Delivery Edit drawer + Mark Ready quick action.
   ========================================================================= */

/* ---- Drawer width — wider than the default 560px drawer, scoped so no
   other Logistics drawer (create-manual, verify-location) is affected. ---- */
.bos-verify-drawer.log-delivery-edit-drawer-shell {
    width: min(860px, 92vw);
    max-width: min(860px, 92vw)
}

@media(min-width:1400px) {
    .bos-verify-drawer.log-delivery-edit-drawer-shell {
        width: min(920px, 92vw);
        max-width: min(920px, 92vw)
    }
}

@media(max-width:1024px) {
    .bos-verify-drawer.log-delivery-edit-drawer-shell {
        width: 94vw;
        max-width: 94vw
    }
}

@media(max-width:767.98px) {
    .bos-verify-drawer.log-delivery-edit-drawer-shell {
        width: 100vw;
        max-width: 100vw
    }
}

/* ---- Drawer body — single scrolling body, footer always visible.
   BUG FIX: .log-delivery-edit-drawer previously set display:flex directly
   on itself, but .log-delivery-drawer__body/__footer are children of the
   <form> INSIDE it, not direct children — flex sizing never reached them,
   so __body had no bounded height (overflow-y:auto did nothing) and
   __footer was pushed below the visible drawer. Fixed the same way the
   working create-manual/create-from-invoice drawer already does it: the
   <form> itself becomes the height:100% grid container with a
   [flexible body / auto footer] row split — see the shared
   .log-delivery-drawer>form rule a few thousand lines up. ---- */
.log-delivery-edit-drawer {
    height: 100%
}

.log-delivery-edit-drawer>form {
    height: 100%;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    min-height: 0
}

.log-delivery-edit-drawer .log-delivery-drawer__body {
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
    padding: 18px 22px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    overscroll-behavior: contain
}

.log-delivery-edit-drawer .log-delivery-section {
    display: flex;
    flex-direction: column;
    gap: 10px
}

.log-delivery-edit-drawer .log-delivery-section h3 {
    font-size: 13px;
    font-weight: 700;
    color: #59657a;
    margin: 0
}

/* ---- Delivery Status segmented control — only the current status plus
   (at most) one permitted forward move; never a full status matrix. ---- */
.log-delivery-status-control {
    display: flex;
    gap: 8px;
    flex-wrap: wrap
}

.log-quick-status-pill {
    border: 1.5px solid var(--im-color-line, #e4e7ec);
    background: #fff;
    color: #475569;
    padding: 8px 16px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all .12s ease
}

.log-quick-status-pill.is-current {
    background: var(--im-color-primary, #3f41b5);
    border-color: var(--im-color-primary, #3f41b5);
    color: #fff;
    cursor: default
}

.log-quick-status-pill:not(.is-current):hover {
    border-color: var(--im-color-primary, #3f41b5);
    color: var(--im-color-primary, #3f41b5)
}

.log-quick-status-pill:focus-visible {
    outline: 2px solid var(--im-color-primary, #3f41b5);
    outline-offset: 2px
}

/* ---- Schedule / Priority / Partial-delivery field grid ---- */
.log-delivery-edit-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px
}

.log-delivery-edit-grid--2col {
    grid-template-columns: 1fr 1fr;
    align-items: start
}

.log-delivery-edit-grid label,
.log-delivery-edit-drawer .log-field-full {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 12px;
    font-weight: 700;
    color: #59657a
}

.log-delivery-edit-drawer .log-field-full {
    margin: 0
}

@media(max-width:575.98px) {
    .log-delivery-edit-grid {
        grid-template-columns: 1fr
    }
}

/* ---- Read-only Delivery Items summary — compact collapsible, never a
   large dominating side panel. ---- */
.log-delivery-items-summary {
    border: 1px solid var(--im-color-line, #e4e7ec);
    border-radius: 12px;
    overflow: hidden
}

.log-delivery-items-summary summary {
    list-style: none;
    cursor: pointer;
    padding: 12px 16px;
    font-size: 13px;
    font-weight: 700;
    color: #1e293b;
    display: flex;
    align-items: center;
    justify-content: space-between
}

.log-delivery-items-summary summary::-webkit-details-marker {
    display: none
}

.log-delivery-items-summary summary::after {
    content: "\f282";
    font-family: "bootstrap-icons";
    font-weight: 400;
    color: #98a2b3;
    transition: transform .15s ease
}

.log-delivery-items-summary[open] summary::after {
    transform: rotate(180deg)
}

.log-delivery-items-summary-body {
    padding: 0 16px 14px
}

/* ---- Location warning — one compact banner, not a full Location card. ---- */
.log-delivery-location-warning {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 12px;
    background: var(--im-color-warning-soft, #fef3c7);
    color: var(--im-color-warning-ink, #b45309)
}

.log-delivery-location-warning>i {
    font-size: 18px;
    flex: none;
    margin-top: 2px
}

.log-delivery-location-warning>div {
    flex: 1
}

.log-delivery-location-warning strong {
    display: block;
    font-size: 13px;
    margin-bottom: 2px
}

.log-delivery-location-warning p {
    margin: 0;
    font-size: 12px;
    color: #92660c
}

.log-delivery-location-warning .im-btn {
    flex: none;
    align-self: center
}

/* ---- Mark Ready quick action (table icon-button variant + card/dashboard
   full-button variant already use .im-icon-btn / .im-btn-primary — this
   only covers the loading-state spinner sizing shared by both). ---- */
.log-quick-status-action .spinner-border,
[data-log-mark-ready] .spinner-border {
    width: .85rem;
    height: .85rem;
    border-width: .15em
}

/* ---- Detail page "More Actions" menu — keeps Cancel Delivery subtle and
   away from the primary Mark Ready / Edit Details actions. ---- */
.log-more-actions-menu {
    display: inline-block
}

.log-more-actions-menu .dropdown-menu {
    min-width: 180px
}

/* ---- Error-toast variant of the shared location toast. ---- */
.log-location-toast--error {
    background: var(--im-color-danger-soft, #ffe4e6);
    color: var(--im-color-danger-ink, #be123c)
}

/* =========================================================================
   Kunos Logistics — drawer dropdown/scroll/footer fixes.
   Company/Contact/Priority/Item-search are all select2, dropdownParent
   scoped to the active #log-drawer (see enhanceSelect() in
   partials/drawer.blade.php) so every popup renders inside the drawer's
   own stacking context — never document.body, never floating over the
   page behind it. These rules only match select2 instances nested under
   a Logistics drawer root; unrelated CRM/Inventory select2 usage
   elsewhere in the app is untouched.
   ========================================================================= */
.log-delivery-drawer .select2-container,
.log-delivery-edit-drawer .select2-container {
    width: 100% !important;
    margin-right: 0
}

.log-delivery-drawer .select2-container--default .select2-selection--single,
.log-delivery-edit-drawer .select2-container--default .select2-selection--single {
    min-height: 46px;
    height: 46px;
    border: 1.5px solid var(--im-color-line, #e4e7ec);
    border-radius: var(--im-radius-control, 10px);
    display: flex;
    align-items: center;
    padding: 0 6px 0 2px
}

.log-delivery-drawer .select2-container--default .select2-selection--single .select2-selection__rendered,
.log-delivery-edit-drawer .select2-container--default .select2-selection--single .select2-selection__rendered {
    padding-left: 12px;
    font-size: .9375rem;
    color: var(--im-color-text, #1e293b);
    line-height: normal
}

.log-delivery-drawer .select2-container--default .select2-selection--single .select2-selection__arrow,
.log-delivery-edit-drawer .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 44px
}

.log-delivery-drawer .select2-container--default.select2-container--focus .select2-selection--single,
.log-delivery-drawer .select2-container--default.select2-container--open .select2-selection--single,
.log-delivery-edit-drawer .select2-container--default.select2-container--focus .select2-selection--single,
.log-delivery-edit-drawer .select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--im-color-primary, #3f41b5)
}

.log-delivery-line-row .select2-container {
    margin-right: 0
}

/* Contact disabled while no Company is selected — visibly, not just functionally. */
.log-delivery-drawer .select2-container--disabled .select2-selection--single {
    background: #f3f4f8;
    color: #98a2b3;
    cursor: not-allowed
}

/* =========================================================================
   Kunos Logistics — Google Places name/address search dropdown. Appended
   to the drawer shell itself (#log-drawer), position:fixed with
   JS-measured coordinates (see positionPlacesSuggestions() in
   partials/drawer.blade.php) — never document.body, so it can never
   float over the page behind the drawer, and it inherits the drawer's
   own z-index stacking context automatically.
   ========================================================================= */
.log-places-suggestions {
    position: fixed;
    z-index: 5;
    margin: 0;
    padding: 6px;
    list-style: none;
    background: #fff;
    border: 1px solid var(--im-color-line, #e4e7ec);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(15, 23, 42, .14);
    overflow-y: auto;
    overscroll-behavior: contain
}

.log-places-suggestion {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 9px 10px;
    border-radius: 9px;
    cursor: pointer;
    font-size: 13px;
    color: var(--im-color-text, #1e293b)
}

.log-places-suggestion>i {
    flex: none;
    margin-top: 2px;
    color: #98a2b3;
    font-size: 14px
}

.log-places-suggestion__text {
    display: flex;
    flex-direction: column;
    min-width: 0
}

.log-places-suggestion__text strong {
    font-weight: 650;
    overflow-wrap: anywhere
}

.log-places-suggestion__text small {
    color: var(--im-color-text-soft, #64748b);
    font-size: 11px;
    overflow-wrap: anywhere
}

.log-places-suggestion:hover,
.log-places-suggestion.is-active {
    background: var(--im-color-primary-soft, #eef0ff)
}

.log-places-suggestions__empty {
    padding: 12px 10px;
    font-size: 12.5px;
    color: var(--im-color-text-soft, #64748b);
    text-align: center
}

/* =========================================================================
   Delivery Detail — Delivery Items table typography (regression fix).
   Scoped to .log-delivery-items-table only (an ADDITION alongside the
   existing .log-line-table class, never a rewrite of it) so every other
   table still using plain .log-line-table (Create Manual Delivery's line
   builder, Route Plan Add-Delivery lines, etc.) is completely unaffected.

   Root cause of the previous regression (kept here as a record — do not
   reintroduce):
   1) Column widths were declared with :nth-child() on <th> (thead) and
      <td> (tbody) at equal specificity across two separate row-groups.
      table-layout:fixed is only UNAMBIGUOUSLY resolved via <colgroup>/<col>
      — nth-child-only sizing is a known cross-browser inconsistency source
      (mis-sized/clipped first column, header text partially hidden).
      Fixed by driving every column width from an explicit <colgroup>.
   2) `overflow-wrap:break-word` was applied to EVERY cell, including the
      narrow Unit/Ordered/Delivered/Failed/Remaining cells, with no
      `white-space:nowrap` escape hatch. break-word explicitly permits
      breaking a word at an arbitrary character when it doesn't fit —
      exactly what produced "ream" and "0.0000" wrapping one character per
      line. Fixed by restricting break-word wrapping to the two cells that
      actually need multi-line wrapping (Item name, SKU) and forcing
      white-space:nowrap on Unit + the four numeric columns.
   ========================================================================= */
.log-delivery-items-table {
    table-layout: fixed;
    width: 100%;
    max-width: 100%;
    margin: 0
}

.log-delivery-items-table__col--item {
    width: 30%
}

.log-delivery-items-table__col--sku {
    width: 15%
}

.log-delivery-items-table__col--unit {
    width: 8%
}

.log-delivery-items-table__col--ordered,
.log-delivery-items-table__col--delivered,
.log-delivery-items-table__col--remaining {
    width: 12%
}

.log-delivery-items-table__col--failed {
    width: 11%
}

.log-delivery-items-table th {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--im-color-text-soft, #64748b);
    padding: 12px 14px;
    white-space: nowrap
}

.log-delivery-items-table td {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    padding: 14px;
    word-break: normal;
    overflow-wrap: normal;
    white-space: normal
}

.log-delivery-items-table__item {
    font-weight: 600;
    overflow-wrap: break-word;
    word-break: normal;
    white-space: normal
}

.log-delivery-items-table__sku {
    font-size: 13px;
    font-weight: 600;
    overflow-wrap: break-word;
    word-break: normal;
    white-space: normal
}

.log-delivery-items-table__unit {
    white-space: nowrap;
    word-break: normal
}

.log-delivery-items-table__number {
    white-space: nowrap;
    word-break: normal;
    overflow-wrap: normal;
    font-weight: 600;
    font-variant-numeric: tabular-nums
}

@media(max-width:767.98px) {

    .log-delivery-items-table,
    .log-delivery-items-table thead,
    .log-delivery-items-table tbody,
    .log-delivery-items-table tr,
    .log-delivery-items-table td {
        display: block;
        width: auto
    }

    .log-delivery-items-table {
        table-layout: auto
    }

    .log-delivery-items-table thead {
        display: none
    }

    .log-delivery-items-table tr {
        border: 1px solid var(--im-color-border, #eef0f4);
        border-radius: 12px;
        padding: 12px 14px;
        margin-bottom: 10px
    }

    .log-delivery-items-table tr:last-child {
        margin-bottom: 0
    }

    .log-delivery-items-table td {
        padding: 3px 0;
        border: 0;
        white-space: normal;
        font-size: 14px
    }

    .log-delivery-items-table__number,
    .log-delivery-items-table__unit {
        white-space: nowrap
    }

    .log-delivery-items-table__item {
        font-size: 14px;
        padding-top: 0;
        padding-bottom: 6px
    }

    .log-delivery-items-table td[data-label]::before {
        content: attr(data-label);
        display: block;
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .03em;
        color: var(--im-color-text-soft, #64748b);
        margin-bottom: 2px
    }

    .log-delivery-items-table td.log-delivery-items-table__item::before {
        display: none
    }
}

/* =========================================================================
   Kunos Logistics — Grab-style Route Review: summary strip, animated
   Route Preview, traffic legend, trip confirmation, allowance display.
   Route Preview is a compressed PLANNED-route animation, never the
   driver's live GPS — see the "Route Preview" label, not "Live Tracking".
   ========================================================================= */

/* ---- Route Summary strip ---- */
.log-route-summary-strip {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
    background: var(--im-color-line, #e4e7ec);
    border: 1px solid var(--im-color-line, #e4e7ec);
    border-radius: 14px;
    overflow: hidden;
    margin-bottom: 16px
}

.log-route-summary-item {
    background: #fff;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 4px
}

.log-route-summary-item span {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #8993a5
}

.log-route-summary-item strong {
    font-size: 16px;
    color: #1e293b
}

@media(max-width:1199.98px) {
    .log-route-summary-strip {
        grid-template-columns: repeat(4, 1fr)
    }
}

@media(max-width:767.98px) {
    .log-route-summary-strip {
        grid-template-columns: repeat(2, 1fr)
    }
}

/* ---- Map card: Route Preview animation controls + legend ---- */
.log-trip-map {
    padding: 0;
    overflow: hidden
}

.log-route-animation-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 12px 16px;
    border-bottom: 1px solid var(--im-color-line, #e4e7ec);
    background: #f7f8fc
}

.log-route-preview-label {
    font-size: 12px;
    font-weight: 700;
    color: #475569;
    display: flex;
    align-items: center;
    gap: 6px
}

.log-route-animation-buttons {
    display: flex;
    align-items: center;
    gap: 6px
}

.log-route-animation-buttons .im-icon-btn:disabled {
    opacity: .4;
    cursor: not-allowed
}

.log-route-animation-speed {
    display: flex;
    gap: 2px;
    border: 1px solid var(--im-color-line, #e4e7ec);
    border-radius: 8px;
    overflow: hidden;
    margin-left: 6px
}

.log-route-animation-speed button {
    border: 0;
    background: #fff;
    padding: 6px 10px;
    font-size: 12px;
    font-weight: 700;
    color: #667085;
    cursor: pointer
}

.log-route-animation-speed button.is-active {
    background: var(--im-color-primary, #3f41b5);
    color: #fff
}

.log-route-reduce-motion {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #667085
}

.log-traffic-legend {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    padding: 10px 16px;
    font-size: 12px;
    color: #475569;
    border-top: 1px solid var(--im-color-line, #e4e7ec)
}

.log-traffic-legend i {
    font-size: 9px;
    margin-right: 4px
}

.log-live-traffic-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    font-weight: 700
}

/* ---- Map popup content (Google InfoWindow innerHTML) ---- */
.log-map-popup {
    font-size: 12.5px;
    line-height: 1.5;
    max-width: 220px
}

.log-map-popup strong {
    display: block;
    font-size: 13px;
    margin-bottom: 2px
}

/* ---- Stop row: Route Preview active highlight ---- */
.log-route-stop.is-active-preview {
    background: var(--im-color-primary-soft, #eef0ff);
    border-radius: 10px;
    box-shadow: 0 0 0 2px var(--im-color-primary, #3f41b5) inset
}

.log-route-stop--depot {
    opacity: .75;
    font-style: italic
}

/* ---- Trip card: traffic/allowance meta + confirmation row ---- */
.log-trip-confirmation-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--im-color-line, #e4e7ec)
}

/* ---- Confirm Trip modal ---- */
.log-trip-confirmation .log-kv-list {
    margin-bottom: 14px
}

.log-confirm-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid var(--im-color-line, #e4e7ec);
    border-radius: 12px;
    background: #f7f8fc;
    font-size: 13px;
    color: #344054;
    margin-bottom: 10px
}

.log-confirm-checkbox input {
    margin-top: 2px;
    width: 16px;
    height: 16px;
    flex: none
}

/* ---- Estimated Trip Allowance breakdown (Route Review / Driver View) ---- */
.log-trip-allowance {
    border: 1px solid var(--im-color-line, #e4e7ec);
    border-radius: 12px;
    padding: 14px 16px
}

.log-trip-allowance-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13px;
    color: #475569;
    padding: 4px 0
}

.log-trip-allowance-row strong {
    color: #1e293b
}

.log-trip-allowance-row--total {
    border-top: 1px solid var(--im-color-line, #e4e7ec);
    margin-top: 6px;
    padding-top: 10px;
    font-size: 14px
}

.log-trip-allowance-note {
    font-size: 11.5px;
    color: #8993a5;
    margin-top: 8px
}

/* ---- Driver View (Driver Trips page) ---- */
.log-driver-trip {
    border: 1px solid var(--im-color-line, #e4e7ec);
    border-radius: 16px;
    padding: 18px;
    margin-bottom: 16px;
    background: #fff
}

.log-driver-trip-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px
}

.log-driver-trip-header h3 {
    margin: 0;
    font-size: 16px
}

.log-driver-trip-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 12px;
    margin-bottom: 14px
}

.log-driver-trip-meta span {
    display: block;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    color: #8993a5
}

.log-driver-trip-meta strong {
    font-size: 14px;
    color: #1e293b
}

.log-trip-stop-timeline {
    list-style: none;
    margin: 0 0 14px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px
}

.log-trip-stop-timeline li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--im-color-line, #e4e7ec);
    border-radius: 10px;
    font-size: 13px
}

.log-trip-stop-timeline li.is-next {
    border-color: var(--im-color-primary, #3f41b5);
    background: var(--im-color-primary-soft, #eef0ff)
}

.log-trip-stop-timeline .log-trip-stop-num {
    flex: none;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #f2f3f9;
    color: #475569;
    font-size: 11px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center
}

.log-driver-trip-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px
}

@media(max-width:575.98px) {
    .log-driver-trip-actions {
        flex-direction: column
    }

    .log-driver-trip-actions .im-btn {
        width: 100%
    }
}

/* Logistics Settings — scoped depot configuration workspace. */
.log-settings-page {
    max-width: 1440px;
    margin-inline: auto
}

.log-depot-settings {
    padding: 0;
    overflow: visible
}

.log-depot-settings__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 22px 24px;
    border-bottom: 1px solid var(--im-color-line, #e4e7ec)
}

.log-depot-settings__header>div {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0
}

.log-depot-settings__header h2 {
    margin: 0 0 3px;
    font-size: 18px;
    color: #172033
}

.log-depot-settings__header p {
    margin: 0;
    color: #667085;
    font-size: 13px
}

.log-depot-settings__icon,
.log-depot-summary__icon {
    display: grid;
    place-items: center;
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: #eef0ff;
    color: var(--im-color-primary, #4345c5);
    font-size: 20px
}

.log-depot-status {
    display: inline-flex;
    align-items: center;
    flex: none;
    min-height: 28px;
    padding: 4px 10px;
    border-radius: 999px;
    background: #f2f4f7;
    color: #475467;
    font-size: 12px;
    font-weight: 700;
    text-transform: capitalize
}

.log-depot-status--verified {
    background: #dcfae6;
    color: #067647
}

.log-depot-status--manually_confirmed {
    background: #e0f2fe;
    color: #075985
}

.log-depot-status--needs_review {
    background: #fef0c7;
    color: #92400e
}

.log-depot-settings__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(420px, .95fr);
    gap: 28px;
    padding: 24px
}

.log-depot-settings__fields {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0
}

.log-depot-settings__fields>label {
    display: flex;
    flex-direction: column;
    gap: 7px;
    color: #344054;
    font-size: 13px;
    font-weight: 650
}

.log-depot-settings__fields textarea {
    resize: vertical;
    min-height: 96px
}

.log-depot-settings__fields [data-error-for] {
    min-height: 0;
    color: #b42318;
    font-size: 12px;
    font-weight: 500
}

.log-depot-search {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 7px;
    color: #344054;
    font-size: 13px;
    font-weight: 650
}

.log-depot-search__control {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: start
}

.log-depot-search__control .im-btn {
    min-width: 128px;
    white-space: nowrap
}

/* Manual Delivery's merged single field (#cm_address) is a multi-row
   textarea, not the single-line input Depot Settings uses here — without
   this, grid's default stretch would grow Find Place to match the
   textarea's full height instead of its normal compact button size. */
.log-depot-search__control textarea.im-input {
    resize: vertical
}

/* Delivery Address auto-resize (Create Manual Delivery's #cm_address
   only — Depot Settings' own #logDepotAddress keeps its existing fixed
   3-row textarea untouched). The site-wide .im-input{height:42px
   !important} rule was squashing this multi-line address field to
   barely one visible line, forcing an inner scrollbar to read a normal
   address — hence !important here too, to actually win against that
   rule for this one field; live height is then driven by
   resizeCmAddressTextarea() in drawer.blade.php (inline style +
   'important' priority, since only that can outrank an external
   !important rule), these are just the min/max band and a safe static
   fallback if JS never runs. resize:none — manual drag-resize would
   fight the auto-resize on every keystroke/programmatic fill. */
#cm_address.im-input {
    height: auto !important;
    min-height: 76px !important;
    max-height: 172px !important;
    line-height: 1.45;
    resize: none;
    overflow-y: hidden
}

/* z-index raised to sit above the Select2 dropdown layer (--bos-layer-dropdown:
   1080, used by Company/Contact/Item Search inside the same Create Manual
   Delivery modal) so the address suggestion list is never hidden behind
   another open dropdown or the Delivery Lines section below it. */
.log-depot-search__results {
    position: absolute;
    z-index: 1090;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    max-height: 280px;
    overflow-y: auto;
    padding: 6px;
    background: #fff;
    border: 1px solid var(--im-color-line, #e4e7ec);
    border-radius: 12px;
    box-shadow: 0 16px 36px rgba(15, 23, 42, .14)
}

.log-depot-search__option {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 100%;
    padding: 10px 12px;
    border: 0;
    border-radius: 8px;
    background: #fff;
    color: #1e293b;
    text-align: left;
    font-size: 13px;
    line-height: 1.4;
    overflow-wrap: anywhere;
    cursor: pointer
}

.log-depot-search__option strong {
    font-weight: 700
}

.log-depot-search__option small {
    color: #667085;
    font-size: 11.5px;
    font-weight: 400
}

.log-depot-search__option:hover,
.log-depot-search__option:focus-visible,
.log-depot-search__option.is-active {
    background: #eef0ff;
    outline: 2px solid transparent
}

.log-depot-search__empty {
    margin: 0;
    padding: 12px;
    color: #667085;
    text-align: center;
    font-size: 12.5px;
    font-weight: 500
}

.log-depot-return {
    flex-direction: row !important;
    align-items: flex-start;
    gap: 10px !important;
    padding: 14px;
    border: 1px solid var(--im-color-line, #e4e7ec);
    border-radius: 12px;
    background: #f8f9fc
}

.log-depot-return input {
    width: 18px;
    height: 18px;
    margin-top: 2px;
    accent-color: var(--im-color-primary, #4345c5)
}

.log-depot-return span {
    display: flex;
    flex-direction: column;
    gap: 3px
}

.log-depot-return small {
    color: #667085;
    font-weight: 400
}

.log-depot-audit {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 22px;
    padding-top: 4px;
    color: #667085;
    font-size: 12px
}

.log-depot-audit strong {
    color: #344054
}

.log-depot-map-panel {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0
}

.log-depot-map {
    position: relative;
    width: 100%;
    height: 440px;
    overflow: hidden;
    border: 1px solid var(--im-color-line, #e4e7ec);
    border-radius: 16px;
    background: #f2f4f7
}

.log-depot-map__unavailable {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 30px;
    color: #667085;
    text-align: center;
    font-size: 13px
}

.log-depot-coordinates-readout {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 20px;
    padding: 2px 2px 0;
    color: #667085;
    font-size: 12px
}

.log-depot-coordinates-readout strong {
    color: #344054;
    font-weight: 650
}

.log-depot-map-panel>.im-btn {
    align-self: flex-start
}

.log-depot-feedback {
    margin: 0 24px 18px;
    padding: 11px 14px;
    border-radius: 10px;
    background: #ecfdf3;
    color: #067647;
    font-size: 13px;
    font-weight: 600
}

.log-depot-feedback.is-error {
    background: #fef3f2;
    color: #b42318
}

.log-depot-settings__footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 24px;
    border-top: 1px solid var(--im-color-line, #e4e7ec);
    background: #fbfcfe;
    border-radius: 0 0 16px 16px
}

.log-depot-summary,
.log-depot-required {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 16px;
    padding: 14px 16px;
    border: 1px solid var(--im-color-line, #e4e7ec);
    border-radius: 14px;
    background: #fff
}

.log-depot-summary>div {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1
}

.log-depot-summary small {
    color: #667085;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase
}

.log-depot-summary strong {
    color: #172033;
    font-size: 14px
}

.log-depot-summary span:not(.log-depot-status):not(.log-depot-summary__icon) {
    color: #667085;
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.log-depot-required {
    border-color: #f5d08a;
    background: #fffbeb
}

.log-depot-required>i {
    font-size: 22px;
    color: #b54708
}

.log-depot-required>div {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 2px;
    color: #7a2e0e
}

.log-depot-required>div span {
    font-size: 13px
}

@media(max-width:991.98px) {
    .log-depot-settings__grid {
        grid-template-columns: 1fr
    }

    .log-depot-map {
        height: 380px
    }
}

@media(max-width:575.98px) {
    .log-depot-settings__header {
        align-items: flex-start;
        padding: 18px;
        flex-wrap: wrap
    }

    .log-depot-settings__grid {
        padding: 18px;
        gap: 20px
    }

    .log-depot-search__control {
        grid-template-columns: 1fr
    }

    .log-depot-search__control .im-btn {
        width: 100%
    }

    .log-depot-map {
        height: 300px
    }

    .log-depot-settings__footer {
        padding: 14px 18px;
        flex-direction: column-reverse
    }

    .log-depot-settings__footer .im-btn {
        width: 100%
    }

    .log-depot-required,
    .log-depot-summary {
        align-items: flex-start;
        flex-wrap: wrap
    }

    .log-depot-required .im-btn {
        width: 100%
    }

    .log-depot-summary .log-depot-status {
        margin-left: 57px
    }
}

.log-settings-footer {
    justify-content: space-between
}

.log-settings-footer__left,
.log-settings-footer__right {
    display: flex;
    align-items: center;
    gap: 10px
}

.log-btn-highlight {
    animation: logBtnPulse 1.8s ease-in-out infinite;
    border-color: var(--im-color-primary, #4345c5) !important
}

@keyframes logBtnPulse {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(67, 69, 197, .4)
    }

    50% {
        box-shadow: 0 0 0 6px rgba(67, 69, 197, 0)
    }
}

@media(max-width:575.98px) {

    .log-settings-footer__left,
    .log-settings-footer__right {
        width: 100%;
        flex-direction: column
    }

    .log-settings-footer__left .im-btn,
    .log-settings-footer__right .im-btn {
        width: 100%;
        justify-content: center
    }
}

.log-assignment-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px
}

.log-assignment-column {
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: relative
}

.log-assignment-label {
    font-size: 14px;
    font-weight: 650;
    color: #172033;
    margin: 0
}

.log-assignment-select {
    position: relative;
    width: 100%
}

.log-assignment-select__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 10px 14px;
    background: #ffffff;
    border: 1px solid var(--im-color-line, #e4e7ec);
    border-radius: 10px;
    color: #344054;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease;
    text-align: left
}

.log-assignment-select__trigger:focus,
.log-assignment-select__trigger.is-open {
    border-color: var(--im-color-primary, #4345c5);
    box-shadow: 0 0 0 3px rgba(67, 69, 197, .12);
    outline: none
}

.log-assignment-select__trigger-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.log-assignment-select__arrow {
    font-size: 12px;
    color: #667085;
    transition: transform .2s ease
}

.log-assignment-select__trigger.is-open .log-assignment-select__arrow {
    transform: rotate(180deg)
}

.log-assignment-select__menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 1050;
    background: #ffffff;
    border: 1px solid var(--im-color-line, #e4e7ec);
    border-radius: 12px;
    box-shadow: 0 10px 25px -5px rgba(16, 24, 40, .1), 0 4px 10px -2px rgba(16, 24, 40, .05);
    padding: 8px;
    max-height: 360px;
    display: flex;
    flex-direction: column
}

.log-assignment-select__search-wrap {
    position: relative;
    margin-bottom: 8px;
    flex: none
}

.log-assignment-select__search-wrap i {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #667085;
    font-size: 13px
}

.log-assignment-select__search {
    width: 100%;
    padding: 8px 12px 8px 34px;
    border: 1px solid var(--im-color-line, #e4e7ec);
    border-radius: 8px;
    font-size: 13px;
    color: #172033;
    outline: none
}

.log-assignment-select__search:focus {
    border-color: var(--im-color-primary, #4345c5)
}

.log-assignment-select__options {
    overflow-y: auto;
    max-height: 280px;
    display: flex;
    flex-direction: column;
    gap: 4px
}

.log-assignment-select__option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: background .12s ease;
    user-select: none
}

.log-assignment-select__option:hover,
.log-assignment-select__option.is-active {
    background: #f2f4f7
}

.log-assignment-select__option.is-selected {
    background: #eef0ff
}

.log-assignment-select__option--disabled {
    opacity: .55;
    cursor: not-allowed;
    background: transparent !important
}

.log-assignment-select__option-main {
    display: flex;
    flex-direction: column;
    min-width: 0
}

.log-assignment-select__option-main strong {
    font-size: 13px;
    color: #172033
}

.log-assignment-select__option-main small {
    font-size: 12px;
    color: #667085
}

.log-assignment-selected {
    background: #ffffff;
    border: 1px solid var(--im-color-line, #e4e7ec);
    border-radius: 12px;
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 6px
}

.log-assignment-selected__header {
    display: flex;
    align-items: center;
    justify-content: space-between
}

.log-assignment-selected__tag {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: #667085;
    letter-spacing: .03em
}

.log-assignment-selected__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px
}

.log-assignment-selected__body strong {
    font-size: 14px;
    color: #172033
}

.log-assignment-selected__body span {
    font-size: 12.5px;
    color: #667085
}

@media(max-width:767.98px) {
    .log-assignment-grid {
        grid-template-columns: 1fr
    }

    .log-assignment-select__menu {
        max-height: 50vh
    }

    .log-assignment-select__options {
        max-height: calc(50vh - 50px)
    }
}

/* ---- Scoped Logistics Toast Styling & Contrast ---- */
.log-toast-container {
    position: fixed !important;
    top: 76px !important;
    right: 24px !important;
    bottom: auto !important;
    left: auto !important;
    z-index: 10050 !important;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: min(420px, calc(100vw - 32px));
    pointer-events: none;
}

@media (max-width: 767.98px) {
    .log-toast-container {
        top: 72px !important;
        left: 16px !important;
        right: 16px !important;
        width: auto !important;
    }
}

.log-toast,
.log-location-toast {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    pointer-events: auto !important;
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    padding: 14px 16px !important;
    border-radius: 12px !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.12), 0 8px 10px -6px rgba(15, 23, 42, 0.06) !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    transition: opacity 0.25s ease, transform 0.25s ease !important;
    background-clip: padding-box !important;
    backdrop-filter: none !important;
    width: 100% !important;
}

.log-toast.is-entering,
.log-location-toast.is-entering {
    opacity: 0 !important;
    transform: translateY(-8px) !important;
}

.log-toast.is-visible,
.log-location-toast.is-visible {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

.log-toast i,
.log-location-toast i,
.log-toast__icon {
    font-size: 1.25rem !important;
    line-height: 1 !important;
    margin-top: 2px !important;
    flex-shrink: 0 !important;
}

.log-toast__content {
    flex-grow: 1 !important;
    min-width: 0 !important;
}

.log-toast__title,
.log-toast strong {
    font-size: 0.875rem !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    margin-bottom: 2px !important;
    color: inherit !important;
}

.log-toast__message,
.log-toast span,
.log-location-toast span {
    font-size: 0.8125rem !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    color: inherit !important;
    opacity: 0.95 !important;
}

.log-toast__close {
    background: transparent !important;
    border: 0 !important;
    font-size: 1.25rem !important;
    line-height: 1 !important;
    color: inherit !important;
    opacity: 0.6 !important;
    cursor: pointer !important;
    padding: 0 !important;
    margin-left: 8px !important;
    flex-shrink: 0 !important;
    transition: opacity 0.15s ease !important;
}

.log-toast__close:hover {
    opacity: 1 !important;
}

/* Success Variant */
.log-toast--success,
.log-toast-success {
    background: #f0fdf4 !important;
    color: #166534 !important;
    border: 1px solid #bbf7d0 !important;
}

.log-toast--success i,
.log-toast-success i,
.log-toast--success .log-toast__icon {
    color: #15803d !important;
}

/* Error Variant */
.log-toast--error,
.log-toast-error,
.log-location-toast--error {
    background: #fef2f2 !important;
    color: #991b1b !important;
    border: 1px solid #fecaca !important;
}

.log-toast--error i,
.log-toast-error i,
.log-location-toast--error i,
.log-toast--error .log-toast__icon {
    color: #dc2626 !important;
}

/* Warning / Session Expired Variant */
.log-toast--warning,
.log-toast-warning {
    background: #fffbeb !important;
    color: #92400e !important;
    border: 1px solid #fde68a !important;
}

.log-toast--warning i,
.log-toast-warning i,
.log-toast--warning .log-toast__icon {
    color: #d97706 !important;
}

/* Info Variant */
.log-toast--info,
.log-toast-info {
    background: #eff6ff !important;
    color: #1e40af !important;
    border: 1px solid #bfdbfe !important;
}

.log-toast--info i,
.log-toast-info i,
.log-toast--info .log-toast__icon {
    color: #2563eb !important;
}

/* ---- Scoped Logistics Delivery More Actions Menu ---- */
.log-delivery-more,
.log-more-actions-menu {
    position: relative;
    display: inline-block;
}

.log-delivery-more__trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    border-radius: 8px;
}

.log-delivery-more__menu,
.log-more-actions-menu .dropdown-menu {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    left: auto;
    z-index: 1050;
    display: none;
    min-width: 180px;
    padding: 6px 0;
    margin: 0;
    background: #ffffff;
    border: 1px solid var(--im-color-line, #e4e7ec);
    border-radius: 10px;
    box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.12), 0 4px 10px -2px rgba(15, 23, 42, 0.05);
}

.log-delivery-more.is-open .log-delivery-more__menu,
.log-delivery-more.is-open .dropdown-menu,
.log-more-actions-menu.is-open .dropdown-menu,
.log-more-actions-menu .dropdown-menu.show {
    display: block !important;
}

.log-delivery-more__item,
.log-more-actions-menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 500;
    color: #1e293b;
    background: transparent;
    border: 0;
    text-align: left;
    cursor: pointer;
    transition: background 0.12s ease;
}

.log-delivery-more__item:hover,
.log-more-actions-menu .dropdown-item:hover {
    background: #f1f5f9;
}

.log-delivery-more__item--danger,
.log-more-actions-menu .dropdown-item.text-danger {
    color: #dc2626 !important;
}

.log-delivery-more__item--danger:hover,
.log-more-actions-menu .dropdown-item.text-danger:hover {
    background: #fef2f2 !important;
    color: #b91c1c !important;
}

/* ==========================================================================
   LOGISTICS MAP-FIRST ROUTE PLANNER WORKSPACE
   ========================================================================== */

.log-route-workspace {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    width: 100%;
}

.log-route-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 18px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    margin-bottom: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.log-route-toolbar-left {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
}

.log-route-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.log-route-planning-panel {
    flex: 0 0 380px;
    max-width: 420px;
    min-width: 320px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.log-route-map-panel {
    flex: 1 1 0%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: sticky;
    top: 20px;
}

.log-route-map-wrapper {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
}

.log-route-map-canvas {
    width: 100%;
    height: 520px;
    min-height: 520px;
    border-radius: 12px;
}

.log-route-map-legend {
    position: absolute;
    bottom: 16px;
    left: 16px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(4px);
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    padding: 8px 14px;
    font-size: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    z-index: 10;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.log-route-map-legend-items {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

/* Route Planner / Route Detail zero-trip empty state — used in place of
   the map canvas and trip grid when nothing has been generated yet, so
   the page never shows a misleading depot-only map or a bare "0 Trips
   Planned" as though a real route already exists. */
.log-route-empty-state {
    width: 100%;
    min-height: 480px;
    border-radius: 12px;
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 8px;
    padding: 32px;
    color: #64748b;
}

.log-route-empty-state>i {
    font-size: 32px;
    color: #94a3b8;
}

.log-route-empty-state strong {
    color: #334155;
    font-size: 15px;
}

.log-route-empty-state p {
    margin: 0;
    font-size: 13px;
    max-width: 320px;
}

.log-route-empty-state--compact {
    min-height: 160px;
    padding: 20px;
}

.log-route-empty-state--compact>i {
    font-size: 24px;
}

.log-route-map-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    color: #1e293b;
}

.log-route-map-legend-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: inline-block;
}

/* Route Sequence Timeline Panel */
.log-route-sequence-panel {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.log-route-sequence-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #f1f5f9;
}

.log-route-sequence-header h4 {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: #0f172a;
}

.log-route-sequence-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.log-route-sequence-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.log-route-sequence-item:hover,
.log-route-sequence-item.is-active {
    background: #eff6ff;
    border-color: #3b82f6;
    box-shadow: 0 2px 6px rgba(59, 130, 246, 0.12);
}

.log-route-sequence-num {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    color: #ffffff;
    flex-shrink: 0;
}

.log-route-sequence-num--depot {
    background: #1e2233;
}

/* Manual Route Drag audit — a real drag handle, shown only for delivery
   stops while Manual strategy is active (toggled via JS, never CSS-only
   cursor:grab pretending to be functional). */
.log-route-sequence-drag-handle {
    display: none;
    align-items: center;
    color: #94a3b8;
    cursor: grab;
    flex-shrink: 0;
}

.log-route-sequence-item[draggable="true"] {
    cursor: grab;
}

.log-route-sequence-item[draggable="true"] .log-route-sequence-drag-handle {
    display: flex;
}

.log-route-sequence-item.is-dragging {
    opacity: 0.5;
    cursor: grabbing;
}

.log-route-sequence-item[draggable="true"]:active {
    cursor: grabbing;
}

.log-route-sequence-info {
    flex: 1;
    min-width: 0;
}

.log-route-sequence-info strong {
    display: block;
    font-size: 13px;
    color: #0f172a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.log-route-sequence-info span {
    font-size: 12px;
    color: #64748b;
}

.log-route-sequence-meta {
    font-size: 12px;
    font-weight: 600;
    color: #334155;
    text-align: right;
    flex-shrink: 0;
}

/* Responsive workspace rules */
@media (max-width: 1024px) {
    .log-route-workspace {
        flex-direction: column;
    }

    .log-route-planning-panel {
        flex: 1 1 100%;
        max-width: 100%;
        width: 100%;
    }

    .log-route-map-panel {
        flex: 1 1 100%;
        width: 100%;
        position: relative;
        top: 0;
    }

    .log-route-map-canvas {
        height: 420px;
    }
}

@media (max-width: 767px) {
    .log-route-mobile-tabs {
        display: flex;
        gap: 4px;
        margin-bottom: 12px;
        background: #e2e8f0;
        padding: 4px;
        border-radius: 8px;
    }

    .log-route-mobile-tab {
        flex: 1;
        padding: 8px;
        font-size: 13px;
        font-weight: 600;
        text-align: center;
        background: transparent;
        border: 0;
        border-radius: 6px;
        color: #475569;
    }

    .log-route-mobile-tab.is-active {
        background: #ffffff;
        color: #0f172a;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    }

    .log-route-map-canvas {
        height: 340px;
    }
}

/* ==========================================================================
   LOGISTICS ROUTE PLAN DETAIL WORKSPACE & PROGRESSIVE DISCLOSURE
   ========================================================================== */

.log-route-review-page {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.log-route-review-header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.log-route-review-header-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.log-route-review-header-title {
    display: flex;
    align-items: center;
    gap: 12px;
}

.log-route-review-header-title h2 {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    color: #0f172a;
}

.log-route-review-header-sub {
    font-size: 13px;
    color: #64748b;
}

/* Routes list mobile card — same visual language as .log-schedule-card
   (Delivery Schedule's own mobile card), scoped separately per the
   redesign's selector list since Routes has its own primary-action
   footer button rather than a plain "View" link. */
.log-route-list-card {
    border: 1px solid #e0e5ef;
    border-radius: 14px;
    padding: 15px;
    background: #fff;
    display: flex;
    flex-direction: column;
    gap: 10px
}

.log-route-list-card header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px
}

.log-route-list-card header>div {
    display: flex;
    flex-direction: column
}

.log-route-list-card header a {
    font-weight: 800;
    color: #3434b8
}

.log-route-list-card header span {
    font-size: 11px;
    color: #7b869b;
    margin-top: 2px
}

.log-route-list-card dl {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin: 0
}

.log-route-list-card dt {
    font-size: 10px;
    color: #8993a5;
    text-transform: uppercase;
    letter-spacing: .02em
}

.log-route-list-card dd {
    margin: 0;
    font-size: 12px;
    font-weight: 700;
    color: #344054
}

.log-route-list-card>.im-btn {
    align-self: stretch;
    justify-content: center
}

/* Route action overflow menu — custom (not Bootstrap's dropdown/Popper,
   see the delegated-click init script). Positioned purely with CSS so it
   can never depend on a JS positioning library that failed to load. */
.log-route-overflow {
    position: relative;
    display: inline-block;
}

.log-route-overflow-menu {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 1050;
    min-width: 200px;
    padding: 6px;
    margin: 0;
    list-style: none;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.14);
}

.log-route-overflow-menu.is-open {
    display: block;
}

.log-route-overflow-item {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 9px 12px;
    border: 0;
    border-radius: 8px;
    background: none;
    color: #344054;
    font-size: 13px;
    text-align: left;
    text-decoration: none;
}

.log-route-overflow-item:hover {
    background: #f3f4fb;
    color: #3939b6;
}

.log-route-overflow-item--danger {
    color: #b42318;
}

.log-route-overflow-item--danger:hover {
    background: #fef3f2;
    color: #b42318;
}

.log-route-overflow-divider {
    margin: 6px 4px;
    border: 0;
    border-top: 1px solid #edf0f5;
}

/* Icon-only toggle buttons (three-dot, etc.) match the rest of the
   im-btn-ghost icon-button system — 40px square minimum, per the
   consolidated button system. */
.log-route-overflow>.im-btn-sm {
    width: 40px;
    height: 40px;
    padding: 0;
    justify-content: center;
}

.log-route-overflow--sm>.im-btn-xs {
    width: 32px;
    height: 32px;
    padding: 0;
    justify-content: center;
}

.log-route-detail-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 12px;
    padding: 16px 20px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
}

.log-route-summary-col {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.log-route-summary-col span {
    font-size: 12px;
    font-weight: 500;
    color: #64748b;
}

.log-route-summary-col strong {
    font-size: 15px;
    font-weight: 700;
    color: #0f172a;
}

.log-route-health-banner {
    padding: 12px 18px;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 10px;
    color: #1e40af;
    font-size: 13px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.log-route-health-banner--ready {
    background: #f0fdf4;
    border-color: #bbf7d0;
    color: #166534;
}

.log-route-issue-notice {
    padding: 12px 18px;
    background: #fffbeb;
    border: 1px solid #fef08a;
    border-radius: 10px;
    color: #92400e;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.log-route-trip-nav {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.log-route-trip-nav-item {
    padding: 12px 16px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.log-route-trip-nav-item:hover,
.log-route-trip-nav-item.is-active {
    background: #f8fafc;
    border-color: #3b82f6;
    box-shadow: 0 2px 6px rgba(59, 130, 246, 0.1);
}

.log-route-trip-nav-item.is-active {
    border-left: 4px solid #3b82f6;
}

.log-route-trip-panel-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 18px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

/* ==========================================================================
   Kunos Logistics — Route Plan Detail Workspace Redesign
   ========================================================================== */

.log-route-detail-page {
    padding-bottom: 3rem;
}

.log-route-detail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 20px 24px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.log-route-summary {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 18px 24px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.log-route-summary__grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 16px;
}

.log-route-summary__item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.log-route-summary__label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #64748b;
}

.log-route-summary__val {
    font-size: 0.9375rem;
    color: #0f172a;
}

.log-route-workspace {
    display: grid;
    grid-template-columns: 340px 1fr;
    gap: 24px;
    align-items: start;
}

@media (min-width: 1440px) {
    .log-route-workspace {
        grid-template-columns: 360px 1fr;
    }
}

.log-route-trip-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.log-route-trip-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 18px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.log-route-map-panel {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    overflow: hidden;
    height: 560px;
}

.log-route-timeline {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
}

.log-route-audit {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
}

@media (max-width: 1024px) {
    .log-route-summary__grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .log-route-workspace {
        grid-template-columns: 1fr;
    }

    .log-route-map-panel {
        height: 480px;
    }
}

@media (max-width: 768px) {
    .log-route-summary__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ==========================================================================
   Kunos Logistics — Routes List Three-Dot Delegated Menu & Cancel Modal
   ========================================================================== */

.log-route-menu-portal {
    position: fixed;
    min-width: 190px;
    max-width: min(260px, calc(100vw - 24px));
    z-index: 10020;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.12);
    padding: 6px 0;
}

.log-route-menu-portal[hidden] {
    display: none !important;
}

.log-route-menu {
    list-style: none;
    padding: 0;
    margin: 0;
}

.log-route-menu__item {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 44px;
    padding: 8px 16px;
    font-size: 0.875rem;
    font-weight: 500;
    color: #0f172a;
    background: transparent;
    border: 0;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.log-route-menu__item:hover,
.log-route-menu__item:focus {
    background-color: #f1f5f9;
    color: #0f172a;
    outline: none;
}

.log-route-menu__item--danger {
    color: #dc2626;
}

.log-route-menu__item--danger:hover,
.log-route-menu__item--danger:focus {
    background-color: #fef2f2;
    color: #b91c1c;
}

.log-route-menu__divider {
    margin: 4px 0;
    border: 0;
    border-top: 1px solid #e2e8f0;
}

.log-route-cancel-summary {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
}

/* ═══════════════════════════════════════════════════════════════════════
   Kunos Logistics — Route Detail  ·  Map-First Mobile Redesign
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Whole-page mobile wrapper ── */
.log-rd-mobile {
    min-height: 100vh;
    background: #f8fafc;
    padding-bottom: calc(72px + max(0px, env(safe-area-inset-bottom)));
}

/* ── Compact route header ── */
.log-rd-hdr {
    min-height: 56px;
    position: sticky;
    top: 0;
    z-index: 1030;
    box-shadow: 0 1px 6px rgba(0, 0, 0, .06);
}

.log-rd-hdr__back {
    padding: 6px 8px;
    font-size: 1.1rem;
}

/* ── Map hero ── */
.log-rd-map-hero {
    width: 100%;
    background: #e8edf2;
    overflow: hidden;
}

.log-rd-map-hero #logRdMapMobile-\*,
.log-rd-map-hero .log-route-map-container {
    width: 100% !important;
    height: 100% !important;
    border-radius: 0 !important;
}

.log-rd-map-bar {
    font-size: 0.8rem;
}

.log-rd-map-ctrl {
    transition: background .15s, border-color .15s;
}

.log-rd-map-ctrl:hover {
    background: #f1f5f9 !important;
    border-color: #c7d2e0 !important;
}

/* ── State card (attention / ready) ── */
.log-rd-state-card {
    border: 1px solid transparent;
}

.log-rd-state-card--attention {
    background: #fffbeb;
    border-color: #fde68a;
}

.log-rd-state-card--success {
    background: #f0fdf4;
    border-color: #bbf7d0;
}

/* ── Tab bar ── */
.log-rd-tabs {
    position: sticky;
    top: 56px;
    /* height of .log-rd-hdr */
    z-index: 1020;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
}

.log-rd-tab-btn {
    display: block;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 11px 4px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    transition: color .15s, border-color .15s;
    text-align: center;
    -webkit-tap-highlight-color: transparent;
}

.log-rd-tab-btn.active,
.log-rd-tab-btn:focus-visible {
    color: #3f41b5;
    border-bottom-color: #3f41b5;
    outline: none;
}

/* ── Content cards ── */
.log-rd-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 14px 16px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .04);
}

.log-rd-card--warning {
    background: #fffbeb;
    border-color: #fde68a;
}

/* ── Stat pills (2×2 and 4-col grids inside cards) ── */
.log-rd-pill {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 8px 6px;
}

/* ── Stop timeline ── */
.log-rd-timeline {
    position: relative;
    padding-bottom: 8px;
}

.log-rd-stop {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    position: relative;
    padding-bottom: 12px;
}

/* Vertical connector line between stops */
.log-rd-stop:not(.log-rd-stop--last)::before {
    content: '';
    position: absolute;
    left: 14px;
    top: 28px;
    width: 2px;
    bottom: 0;
    background: #e2e8f0;
}

.log-rd-stop__dot {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    font-weight: 700;
    z-index: 1;
    position: relative;
}

.log-rd-stop__dot--depot {
    background: #3f41b5;
    color: #fff;
}

.log-rd-stop__dot--num {
    background: #0f172a;
    color: #fff;
}

.log-rd-stop__body {
    flex: 1 1 auto;
    min-width: 0;
    padding-top: 2px;
}

.log-rd-stop__body--card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 10px 12px;
}

/* Tappable stops: give pointer & hover feedback */
.log-rd-stop--tappable {
    border: none;
    background: transparent;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    width: 100%;
    text-align: left;
}

.log-rd-stop--tappable .log-rd-stop__body--card {
    transition: background .15s, border-color .15s;
}

.log-rd-stop--tappable:hover .log-rd-stop__body--card,
.log-rd-stop--tappable:active .log-rd-stop__body--card {
    background: #f8fafc;
    border-color: #3f41b5;
}

/* ── Sticky bottom action bar ── */
.log-rd-action-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1040;
    background: #ffffff;
    border-top: 1px solid #e2e8f0;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, .10);
    padding-bottom: max(10px, env(safe-area-inset-bottom));
}

/* ── Push AI widget above action bar ── */
#gemini-chat-widget,
.bos-ai-widget,
.app-chat-widget,
.ai-assistant-widget {
    bottom: 84px !important;
}

/* ── Legacy classes (preserved for other pages) ── */
.log-mobile-sticky-action-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1040;
    padding-bottom: max(10px, env(safe-area-inset-bottom)) !important;
    background-color: #ffffff;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.12);
}

.log-mobile-workspace-tabs {
    top: 0;
    z-index: 1020;
}

.log-mobile-workspace-tabs .nav-link {
    color: #64748b;
    border-radius: 0;
    border-bottom: 2px solid transparent;
    padding: 10px 4px;
    font-size: 0.8125rem;
}

.log-mobile-workspace-tabs .nav-link.active {
    color: #3f41b5;
    border-bottom-color: #3f41b5;
    background: transparent;
}

.log-route-summary__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

@media (min-width: 768px) {
    .log-route-summary__grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.log-route-summary__item {
    background: #f8fafc;
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
}

.log-mobile-stop-item:hover {
    background-color: #f1f5f9;
}

@media (min-width: 992px) {

    /* Hide mobile layout on desktop */
    .log-rd-mobile {
        display: none !important;
    }

    /* Hide mobile-only legacy helpers on desktop */
    .log-mobile-sticky-action-bar,
    .log-mobile-workspace-tabs,
    #logMobileTabContent {
        display: none !important;
    }
}

/* ==========================================================================
   LOGISTICS RESTORE DELIVERY MODAL (SCOPED STYLING)
   ========================================================================== */
.log-cancelled-notice-box {
    background-color: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-left: 4px solid #4f46e5 !important;
}

body.log-restore-modal-open {
    overflow: hidden !important;
}

.modal-backdrop.show {
    background-color: rgba(15, 23, 42, 0.48) !important;
    backdrop-filter: blur(4px);
}

.log-restore-modal {
    z-index: 1065 !important;
}

.log-restore-modal__dialog {
    width: min(620px, calc(100vw - 32px)) !important;
    max-width: 620px !important;
    margin: 1.75rem auto;
}

.log-restore-modal__content {
    background: #ffffff !important;
    border: 1px solid #e4e9f2 !important;
    border-radius: 24px !important;
    box-shadow: 0 20px 40px -15px rgba(15, 23, 42, 0.18), 0 0 0 1px rgba(15, 23, 42, 0.05) !important;
    overflow: hidden;
    max-height: min(760px, calc(100vh - 48px));
    display: flex;
    flex-direction: column;
}

/* Header */
.log-restore-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px 16px 24px;
    background: #ffffff;
    border-bottom: 1px solid #f1f5f9;
}

.log-restore-modal__header-left {
    display: flex;
    align-items: center;
    gap: 14px;
}

.log-restore-modal__icon {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: #eef0ff;
    color: #4f46e5;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.log-restore-modal__title-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.log-restore-modal__title {
    font-size: 20px;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
    line-height: 1.25;
    white-space: nowrap;
}

.log-restore-modal__ref {
    font-size: 12.5px;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.log-restore-modal__close {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    color: #64748b;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s ease;
    padding: 0;
}

.log-restore-modal__close:hover {
    background: #f8fafc;
    color: #0f172a;
    border-color: #cbd5e1;
}

/* Body */
.log-restore-modal__body {
    padding: 20px 24px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Info Box */
.log-restore-modal__info-box {
    background: #f0f4ff;
    border: 1px solid #e0e7ff;
    border-radius: 14px;
    padding: 12px 16px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: #1e293b;
    font-size: 13.5px;
    line-height: 1.45;
}

.log-restore-modal__info-icon {
    color: #4f46e5;
    font-size: 16px;
    margin-top: 2px;
    flex-shrink: 0;
}

/* Recommendation Card */
.log-restore-modal__recommendation {
    border-radius: 16px;
    padding: 16px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    transition: all 0.2s ease;
}

.log-restore-modal__rec--ready {
    background: #f0fdf4 !important;
    border-color: #bbf7d0 !important;
}

.log-restore-modal__rec--unassigned {
    background: #fffbeb !important;
    border-color: #fde68a !important;
}

.log-restore-modal__rec--attention,
.log-restore-modal__rec--blocked {
    background: #fff7ed !important;
    border-color: #fed7aa !important;
}

.log-restore-modal__rec-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

.log-restore-modal__rec-icon {
    font-size: 22px;
    flex-shrink: 0;
}

.log-restore-modal__rec--ready .log-restore-modal__rec-icon {
    color: #16a34a;
}

.log-restore-modal__rec--unassigned .log-restore-modal__rec-icon {
    color: #d97706;
}

.log-restore-modal__rec--attention .log-restore-modal__rec-icon,
.log-restore-modal__rec--blocked .log-restore-modal__rec-icon {
    color: #ea580c;
}

.log-restore-modal__rec-titles {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.log-restore-modal__rec-label {
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.log-restore-modal__rec-status-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
}

.log-restore-modal__rec-status {
    font-size: 16px;
    font-weight: 700;
    color: #0f172a;
}

.log-restore-modal__rec-badge {
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.log-restore-modal__rec-badge--ready {
    background: #dcfce7;
    color: #15803d;
}

.log-restore-modal__rec-badge--unassigned {
    background: #fef3c7;
    color: #b45309;
}

.log-restore-modal__rec-badge--attention {
    background: #ffedd5;
    color: #c2410c;
}

.log-restore-modal__rec-summary {
    font-size: 13px;
    color: #475569;
    line-height: 1.4;
}

/* Reason Field */
.log-restore-modal__reason-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.log-restore-modal__label {
    font-size: 13.5px;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
}

.log-restore-modal__help {
    font-size: 12.5px;
    color: #64748b;
    margin: 0 0 4px 0;
}

.log-restore-modal__textarea {
    width: 100%;
    min-height: 92px;
    border-radius: 14px;
    border: 1px solid #cbd5e1;
    padding: 10px 14px;
    font-size: 14px;
    color: #0f172a;
    background: #ffffff;
    transition: all 0.15s ease;
    resize: vertical;
}

.log-restore-modal__textarea:focus {
    outline: none;
    border-color: #4f46e5;
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15);
}

/* Error container (Only displayed when active string exists) */
.log-restore-modal__error {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #dc2626;
    font-size: 13px;
    font-weight: 500;
    padding: 10px 14px;
    border-radius: 12px;
    margin-top: 4px;
}

/* Footer */
.log-restore-modal__footer {
    padding: 16px 24px;
    background: #ffffff;
    border-top: 1px solid #e4e9f2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.log-restore-modal__btn-cancel {
    height: 48px;
    padding: 0 20px;
    border-radius: 14px;
    background: #f1f5f9;
    color: #334155;
    border: 1px solid #e2e8f0;
    font-weight: 600;
    font-size: 14px;
}

.log-restore-modal__btn-cancel:hover {
    background: #e2e8f0;
    color: #0f172a;
}

.log-restore-modal__btn-submit {
    height: 48px;
    padding: 0 24px;
    border-radius: 14px;
    background: #4f46e5;
    color: #ffffff;
    border: none;
    font-weight: 600;
    font-size: 14px;
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.25);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.log-restore-modal__btn-submit:hover {
    background: #4338ca;
}

/* Mobile Bottom Sheet (<576px) */
@media (max-width: 575.98px) {
    .log-restore-modal__dialog {
        margin: 0 !important;
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .log-restore-modal__content {
        border-bottom-left-radius: 0 !important;
        border-bottom-right-radius: 0 !important;
        border-top-left-radius: 24px !important;
        border-top-right-radius: 24px !important;
        max-height: 88dvh !important;
    }

    .log-restore-modal__footer {
        flex-direction: column;
        gap: 10px;
        padding: 16px 20px calc(16px + env(safe-area-inset-bottom, 0px)) 20px;
    }

    .log-restore-modal__btn-submit {
        width: 100%;
        order: 1;
    }

    .log-restore-modal__btn-cancel {
        width: 100%;
        order: 2;
    }
}

/* ==================================================
   KUNOS ENABLE PARTIAL DELIVERY MODAL & BOTTOM SHEET
   ================================================== */
.log-kunos-modal .log-kunos-modal__dialog {
    width: 560px;
    max-width: calc(100vw - 32px);
    margin: 1.75rem auto;
}

.log-kunos-modal .log-kunos-modal__content {
    background: #ffffff;
    border: 1px solid rgba(226, 232, 240, 0.8);
    border-radius: 20px;
    box-shadow: 0 20px 25px -5px rgba(15, 23, 42, 0.1), 0 8px 10px -6px rgba(15, 23, 42, 0.05);
    overflow: hidden;
}

.log-kunos-modal__header {
    background: #ffffff;
    padding: 24px 24px 16px 24px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    border-bottom: 1px solid #F1F5F9;
}

.log-kunos-modal__header-left {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.log-kunos-modal__icon-tile {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}

.log-kunos-modal__icon-tile--indigo {
    background: #EEF2FF;
    color: #4F46E5;
}

.log-kunos-modal__icon-tile--slate {
    background: #F1F5F9;
    color: #475569;
}

/* Traffic Estimate modal audit: provider-failure state — same red already
   used by .kunos-route-traffic__condition--heavy elsewhere on this page,
   never a new hardcoded colour. */
.log-kunos-modal__icon-tile--danger {
    background: #fef2f2;
    color: #991b1b;
}

.log-kunos-modal__header-titles {
    min-width: 0;
}

.log-kunos-modal__title {
    font-size: 20px;
    font-weight: 700;
    color: #172033;
    margin: 0;
    line-height: 1.3;
}

.log-kunos-modal__subtitle {
    font-size: 13px;
    color: #667085;
    margin: 3px 0 0 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.log-kunos-modal__close-btn {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    border: 1px solid #E2E8F0;
    background: #ffffff;
    color: #64748B;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.15s ease;
    flex-shrink: 0;
}

.log-kunos-modal__close-btn:hover {
    background: #F8FAFC;
    color: #0F172A;
    border-color: #CBD5E1;
}

.log-kunos-modal__body {
    padding: 20px 24px;
    color: #475569;
}

.log-kunos-modal__explanation {
    font-size: 14px;
    line-height: 1.5;
    color: #475569;
    margin-bottom: 18px;
}

.log-kunos-modal__details-panel {
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 14px;
    padding: 14px 18px;
    margin-bottom: 16px;
}

.log-kunos-modal__details-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 0;
}

.log-kunos-modal__details-row+.log-kunos-modal__details-row {
    border-top: 1px dashed #E2E8F0;
}

.log-kunos-modal__details-label {
    font-size: 13px;
    color: #64748B;
}

.log-kunos-modal__details-value {
    font-size: 14px;
    font-weight: 600;
    color: #0F172A;
}

.log-kunos-modal__badge {
    font-size: 12px;
    font-weight: 500;
    padding: 4px 10px;
    border-radius: 6px;
}

.log-kunos-modal__badge--neutral {
    background: #F1F5F9;
    color: #475569;
    border: 1px solid #CBD5E1;
}

.log-kunos-modal__badge--indigo {
    background: #EEF2FF;
    color: #4338CA;
    border: 1px solid #C7D2FE;
}

/* Traffic Estimate modal audit: same colours as the existing
   .kunos-route-traffic__condition[--ok|--heavy] severity classes used
   elsewhere on this exact page (Operational Insights panel) — reused
   verbatim, never a new hardcoded palette, just given the compact
   .log-kunos-modal__badge chip shape instead of that class's own full-
   width banner shape. */
.log-kunos-modal__badge--traffic-ok {
    background: #f0fdf4;
    color: #15803d;
    border: 1px solid #bbf7d0;
}

.log-kunos-modal__badge--traffic-moderate {
    background: #fffbeb;
    color: #78350f;
    border: 1px solid #fde68a;
}

.log-kunos-modal__badge--traffic-heavy {
    background: #fef2f2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

/* Muted metadata row with a leading icon (e.g. "Checked at 07:21 AM") —
   same subdued weight as .log-kunos-modal__subtitle, placed below a
   details panel instead of the header. */
.log-kunos-modal__meta-row {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #64748B;
    margin: 12px 0 0;
}

/* Route Detail: compact operational result inside the shared Kunos modal. */
.log-traffic-result__metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 14px;
    overflow: hidden;
}

.log-traffic-result__metric {
    min-width: 0;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.log-traffic-result__metric:nth-child(even) {
    border-left: 1px solid #E2E8F0;
}

.log-traffic-result__metric:nth-child(n + 3) {
    border-top: 1px solid #E2E8F0;
}

.log-traffic-result__label {
    color: #64748B;
    font-size: 12px;
    line-height: 1.35;
}

.log-traffic-result__value {
    color: #172033;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
}

.log-traffic-result__delay--ok {
    color: #15803d;
}

.log-traffic-result__delay--moderate {
    color: #92400e;
}

.log-traffic-result__delay--heavy {
    color: #b91c1c;
}

.log-kunos-modal__info-note {
    background: #EEF2FF;
    border: 1px solid #C7D2FE;
    color: #3730A3;
    border-radius: 12px;
    padding: 12px 16px;
    font-size: 13px;
    line-height: 1.45;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.log-kunos-modal__info-icon {
    color: #4F46E5;
    font-size: 16px;
    margin-top: 1px;
    flex-shrink: 0;
}

/* ERROR CONTAINER - HIDDEN / EMPTY PREVENTION */
.log-partial-modal__error[hidden],
.log-partial-modal__error:empty {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
}

.log-partial-modal__error:not(:empty):not([hidden]) {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    background: #FEF2F2 !important;
    border: 1px solid #FCA5A5 !important;
    color: #991B1B !important;
    border-radius: 12px !important;
    padding: 12px 16px !important;
    font-size: 13px !important;
    line-height: 1.45 !important;
    margin-top: 14px !important;
}

.log-kunos-modal__footer {
    background: #ffffff;
    padding: 16px 24px;
    border-top: 1px solid #F1F5F9;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
}

.log-kunos-modal__btn-secondary {
    background: #F1F5F9;
    border: 1px solid #CBD5E1;
    color: #334155;
    font-size: 14px;
    font-weight: 600;
    border-radius: 10px;
    padding: 10px 20px;
    min-height: 44px;
    transition: all 0.15s ease;
}

.log-kunos-modal__btn-secondary:hover {
    background: #E2E8F0;
    color: #0F172A;
    border-color: #94A3B8;
}

.log-kunos-modal__btn-primary {
    background: #4F46E5;
    border: 1px solid #4338CA;
    color: #FFFFFF;
    font-size: 14px;
    font-weight: 600;
    border-radius: 10px;
    padding: 10px 22px;
    min-height: 44px;
    box-shadow: 0 2px 6px rgba(79, 70, 229, 0.25);
    transition: all 0.15s ease;
}

.log-kunos-modal__btn-primary:hover {
    background: #4338CA;
    color: #FFFFFF;
    box-shadow: 0 4px 10px rgba(79, 70, 229, 0.35);
}

.log-kunos-modal__btn-primary:disabled,
.log-kunos-modal__btn-secondary:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

/* MOBILE BOTTOM SHEET (< 768px) */
@media (max-width: 767.98px) {
    .log-kunos-modal .log-kunos-modal__dialog {
        margin: 0 !important;
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    .log-kunos-modal .log-kunos-modal__content {
        border-bottom-left-radius: 0 !important;
        border-bottom-right-radius: 0 !important;
        border-top-left-radius: 22px !important;
        border-top-right-radius: 22px !important;
        max-height: 88dvh !important;
        display: flex !important;
        flex-direction: column !important;
    }

    .log-kunos-modal__body {
        overflow-y: auto !important;
        padding: 16px 20px !important;
    }

    .log-kunos-modal__header {
        padding: 20px 20px 14px 20px !important;
    }

    .log-kunos-modal__title {
        font-size: 18px !important;
    }

    .log-kunos-modal__footer {
        padding: 14px 20px calc(14px + env(safe-area-inset-bottom, 0px)) 20px !important;
        flex-direction: column !important;
        gap: 10px !important;
        position: sticky !important;
        bottom: 0 !important;
    }

    .log-kunos-modal__btn-primary,
    .log-kunos-modal__btn-secondary {
        width: 100% !important;
        justify-content: center !important;
    }

    .log-traffic-result__metric {
        padding: 12px 14px;
    }

    .log-traffic-result__value {
        font-size: 15px;
    }
}

/* ==================================================
   GLOBAL KUNOS TOAST COMPONENT & HOST
   ================================================== */
.kunos-toast-host {
    position: fixed;
    top: 76px;
    right: 24px;
    z-index: 10050;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
}

.kunos-toast {
    width: min(380px, calc(100vw - 32px));
    pointer-events: auto;
    background: #F0FDF4;
    border: 1px solid #BBF7D0;
    color: #166534;
    border-radius: 14px;
    padding: 12px 16px;
    box-shadow: 0 10px 15px -3px rgba(15, 23, 42, 0.1), 0 4px 6px -4px rgba(15, 23, 42, 0.05);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 14px;
    line-height: 1.4;
    transition: all 0.2s ease;
}

.kunos-toast--error {
    background: #FEF2F2;
    border-color: #FCA5A5;
    color: #991B1B;
}

.kunos-toast__content {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.kunos-toast__icon {
    color: #15803D;
    font-size: 18px;
    flex-shrink: 0;
}

.kunos-toast--error .kunos-toast__icon {
    color: #DC2626;
}

.kunos-toast__text {
    font-weight: 500;
    word-break: break-word;
}

.kunos-toast__close {
    background: transparent;
    border: none;
    color: #15803D;
    opacity: 0.7;
    font-size: 14px;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    transition: opacity 0.15s ease;
    flex-shrink: 0;
}

.kunos-toast--error .kunos-toast__close {
    color: #991B1B;
}

.kunos-toast__close:hover {
    opacity: 1;
    background: rgba(21, 128, 61, 0.1);
}

@media (max-width: 767.98px) {
    .kunos-toast-host {
        top: calc(64px + env(safe-area-inset-top, 0px));
        left: 16px;
        right: 16px;
        width: auto;
    }

    .kunos-toast {
        width: 100%;
    }
}

/* ==========================================================================
   KUNOS ROUTE PLAN DETAIL WORKSPACE REDESIGN
   Prefix: kunos-route-
   Scope: Desktop (≥ 992 px) route show page only.
   All mobile layout remains under .log-rd-* classes (unchanged).
   ========================================================================== */

/* ── Page wrapper ── */
.kunos-route-page {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding-bottom: 40px;
}

/* ── 1. Header Card ── */
.kunos-route-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 20px 24px;
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.06);
}

.kunos-route-header__info {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.kunos-route-header__title {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.kunos-route-header__title h1 {
    margin: 0;
    font-size: 1.375rem;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.01em;
}

.kunos-route-header__sub {
    font-size: 0.8125rem;
    color: #64748b;
    font-weight: 500;
}

.kunos-route-header__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    flex-wrap: wrap;
}

/* ── Contextual notice (replaces duplicate health banner) ── */
.kunos-route-notice {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    border-radius: 12px;
    font-size: 0.875rem;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    color: #15803d;
}

.kunos-route-notice--warning {
    background: #fffbeb;
    border-color: #fde68a;
    color: #92400e;
}

.kunos-route-notice__icon {
    font-size: 1rem;
    flex-shrink: 0;
}

.kunos-route-notice__body {
    flex: 1;
    min-width: 0;
}

.kunos-route-notice__heading {
    font-weight: 700;
    color: #166534;
    display: block;
    font-size: 0.875rem;
}

.kunos-route-notice--warning .kunos-route-notice__heading {
    color: #78350f;
}

.kunos-route-notice__text {
    color: #15803d;
    font-size: 0.8125rem;
    display: block;
    margin-top: 1px;
}

.kunos-route-notice--warning .kunos-route-notice__text {
    color: #92400e;
}

/* ── 2. Summary Strip ── */
.kunos-route-summary {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 0;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
    overflow: hidden;
}

.kunos-route-summary__grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
}

.kunos-route-summary__cell {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px 18px;
    border-right: 1px solid #f1f5f9;
    min-width: 0;
}

.kunos-route-summary__cell:last-child {
    border-right: none;
}

.kunos-route-summary__label {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #94a3b8;
    white-space: nowrap;
}

.kunos-route-summary__value {
    font-size: 0.9375rem;
    font-weight: 700;
    color: #0f172a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kunos-route-summary__sub {
    font-size: 0.75rem;
    color: #64748b;
    font-weight: 400;
    margin-top: 2px;
    display: block;
}

/* Load micro-progress bar */
.kunos-route-summary__bar {
    height: 4px;
    background: #e2e8f0;
    border-radius: 2px;
    overflow: hidden;
    margin-top: 5px;
    width: 100%;
}

.kunos-route-summary__bar-fill {
    height: 100%;
    background: #4f46e5;
    border-radius: 2px;
    transition: width 0.3s ease;
}

.kunos-route-summary__bar-fill--warn {
    background: #f59e0b;
}

/* Traffic dot */
.kunos-route-summary__dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 5px;
    vertical-align: middle;
    flex-shrink: 0;
}

.kunos-route-summary__dot--ok {
    background: #22c55e;
}

.kunos-route-summary__dot--warn {
    background: #f59e0b;
}

.kunos-route-summary__dot--heavy {
    background: #ef4444;
}

.kunos-route-summary__dot--none {
    background: #cbd5e1;
}

/* ── 3. Workspace grid ── */
.kunos-route-workspace {
    display: grid;
    grid-template-columns: 340px 1fr;
    gap: 20px;
    align-items: start;
}

/* ── Trip panel (left) ── */
.kunos-route-trip-panel {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.kunos-route-trip-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 18px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.kunos-route-trip-card.is-active {
    border-color: #4f46e5;
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.08), 0 2px 8px rgba(79, 70, 229, 0.1);
}

.kunos-route-trip-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.kunos-route-trip-card__title {
    font-size: 0.9375rem;
    font-weight: 700;
    color: #0f172a;
}

.kunos-route-trip-card__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 14px;
}

.kunos-route-trip-card__field {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.kunos-route-trip-card__field-label {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #94a3b8;
}

.kunos-route-trip-card__field-val {
    font-size: 0.875rem;
    font-weight: 600;
    color: #1e293b;
}

.kunos-route-trip-card__field-val--muted {
    color: #64748b;
    font-weight: 400;
}

/* Load bar inside trip card */
.kunos-route-trip-card__load-bar {
    height: 5px;
    background: #f1f5f9;
    border-radius: 3px;
    overflow: hidden;
    margin: 4px 0 14px;
}

.kunos-route-trip-card__load-fill {
    height: 100%;
    background: #4f46e5;
    border-radius: 3px;
}

/* Phase 5 — Trip Readiness summary strip above the trip panel header
   (derived UI state only, see routes/show.blade.php's own comment) and the
   read-only "Confirmed on ... by ..." line inside an already-confirmed
   trip card. Same palette/radius as .kunos-route-trip-card above. */
.kunos-route-trip-readiness {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background: #eef2ff;
    border: 1px solid #e0e7ff;
    border-radius: 10px;
    padding: 8px 12px;
    margin-bottom: 10px;
}

.kunos-route-trip-readiness__label {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #4338ca;
}

.kunos-route-trip-readiness__value {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #312e81;
}

.kunos-route-trip-card__confirmed {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #15803d;
    background: #f0fdf4;
    border: 1px solid #dcfce7;
    border-radius: 8px;
    padding: 8px 10px;
    margin-bottom: 8px;
}

/* Traffic bug fix — per-trip freshness chip shown alongside the Confirm
   Trip / Refresh Traffic actions. Same success-green as
   .kunos-route-trip-card__confirmed above for "fresh", and the module's
   existing warning-amber for "stale" (matches the amber already used by
   the geometry-unavailable notice elsewhere on this page). */
.kunos-route-traffic-chip {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 8px;
    padding: 6px 10px;
    margin-bottom: 8px;
}

.kunos-route-traffic-chip--fresh {
    color: #15803d;
    background: #f0fdf4;
    border: 1px solid #dcfce7;
}

.kunos-route-traffic-chip--stale {
    color: #b45309;
    background: #fffbeb;
    border: 1px solid #fde68a;
}

/* ── Map card (right) ── */
.kunos-route-map-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.06);
    display: flex;
    flex-direction: column;
}

.kunos-route-map-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid #f1f5f9;
    background: #ffffff;
    flex-shrink: 0;
    gap: 12px;
}

.kunos-route-map-toolbar__left {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.kunos-route-map-toolbar__title {
    font-size: 0.875rem;
    font-weight: 700;
    color: #0f172a;
}

.kunos-route-map-toolbar__pill {
    font-size: 0.75rem;
    font-weight: 600;
    color: #475569;
    background: #f1f5f9;
    border-radius: 20px;
    padding: 3px 10px;
    white-space: nowrap;
}

.kunos-route-map-toolbar__right {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.kunos-route-map-canvas {
    flex: 1;
    width: 100%;
    height: 500px;
    min-height: 460px;
    display: block;
}

.kunos-route-map-legend {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 8px 16px;
    border-top: 1px solid #f1f5f9;
    background: #fafafa;
    flex-shrink: 0;
}

.kunos-route-map-legend__item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    color: #475569;
}

.kunos-route-map-legend__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.kunos-route-map-legend__line {
    width: 18px;
    height: 3px;
    border-radius: 2px;
    flex-shrink: 0;
}

/* ── 4. Lower operations section ── */
.kunos-route-lower {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 20px;
    align-items: start;
}

/* ── Timeline ── */
.kunos-route-timeline {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 20px 24px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}

.kunos-route-timeline__header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}

.kunos-route-timeline__header h3 {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 700;
    color: #0f172a;
}

.kunos-route-tl {
    position: relative;
    padding-left: 28px;
}

/* The continuous vertical connector line */
.kunos-route-tl::before {
    content: '';
    position: absolute;
    left: 11px;
    top: 16px;
    bottom: 16px;
    width: 2px;
    background: #e2e8f0;
    border-radius: 1px;
}

.kunos-route-tl__item {
    position: relative;
    display: flex;
    gap: 16px;
    align-items: flex-start;
    padding-bottom: 20px;
}

.kunos-route-tl__item:last-child {
    padding-bottom: 0;
}

.kunos-route-tl__dot {
    position: absolute;
    left: -28px;
    top: 0;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6875rem;
    font-weight: 800;
    flex-shrink: 0;
    z-index: 1;
    background: #1e293b;
    color: #ffffff;
}

.kunos-route-tl__dot--depot {
    background: #1e293b;
    font-size: 0.625rem;
}

.kunos-route-tl__dot--stop {
    background: #4f46e5;
}

.kunos-route-tl__dot--return {
    background: #94a3b8;
}

.kunos-route-tl__body {
    flex: 1;
    min-width: 0;
    padding-top: 2px;
}

.kunos-route-tl__ref {
    font-size: 0.875rem;
    font-weight: 700;
    color: #0f172a;
    text-decoration: none;
    display: inline-block;
}

.kunos-route-tl__ref:hover {
    color: #4f46e5;
    text-decoration: underline;
}

.kunos-route-tl__customer {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #4f46e5;
    display: block;
    margin-top: 1px;
}

.kunos-route-tl__address {
    font-size: 0.75rem;
    color: #64748b;
    display: block;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 460px;
}

.kunos-route-tl__meta {
    font-size: 0.75rem;
    color: #64748b;
    display: block;
    margin-top: 1px;
}

.kunos-route-tl__right {
    text-align: right;
    flex-shrink: 0;
    padding-top: 2px;
}

.kunos-route-tl__eta {
    font-size: 0.8125rem;
    font-weight: 700;
    color: #1e293b;
    display: block;
}

.kunos-route-tl__dist {
    font-size: 0.75rem;
    color: #94a3b8;
    display: block;
    margin-top: 1px;
}

.kunos-route-tl__actions {
    display: flex;
    gap: 6px;
    margin-top: 8px;
}

/* ── Operational Insights panel ── */
.kunos-route-insights {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.kunos-route-insights__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px 0;
}

.kunos-route-insights__title {
    font-size: 0.9375rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0;
}

/* Segmented tabs */
.kunos-route-insights__tabs {
    display: flex;
    gap: 0;
    margin: 12px 20px 0;
    background: #f1f5f9;
    border-radius: 8px;
    padding: 3px;
}

.kunos-route-insights__tab-btn {
    flex: 1;
    padding: 6px 12px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #64748b;
    background: transparent;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
    text-align: center;
}

.kunos-route-insights__tab-btn.is-active {
    background: #ffffff;
    color: #0f172a;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.1);
}

.kunos-route-insights__tab-btn:hover:not(.is-active) {
    color: #334155;
}

.kunos-route-insights__panel {
    display: none;
    padding: 16px 20px 20px;
}

.kunos-route-insights__panel.is-active {
    display: block;
}

/* ── Traffic section ── */
.kunos-route-traffic__condition {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 10px;
    font-size: 0.875rem;
    font-weight: 600;
    color: #78350f;
    margin-bottom: 14px;
}

.kunos-route-traffic__condition--ok {
    background: #f0fdf4;
    border-color: #bbf7d0;
    color: #15803d;
}

.kunos-route-traffic__condition--heavy {
    background: #fef2f2;
    border-color: #fecaca;
    color: #991b1b;
}

.kunos-route-traffic__condition--none {
    background: #f8fafc;
    border-color: #e2e8f0;
    color: #475569;
}

/* ── Allowance + Traffic shared key-value rows ── */
.kunos-route-kv {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 0;
    border-bottom: 1px solid #f8fafc;
    font-size: 0.8125rem;
}

.kunos-route-kv:last-of-type {
    border-bottom: none;
}

.kunos-route-kv__label {
    color: #64748b;
    font-weight: 500;
    flex: 1;
}

.kunos-route-kv__value {
    color: #0f172a;
    font-weight: 600;
    text-align: right;
}

.kunos-route-kv__value--muted {
    color: #94a3b8;
    font-weight: 400;
    font-style: italic;
}

.kunos-route-kv__value--warn {
    color: #d97706;
}

/* Total row */
.kunos-route-total-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 10px;
    margin-top: 12px;
    font-size: 0.875rem;
}

.kunos-route-total-row__label {
    font-weight: 700;
    color: #166534;
}

.kunos-route-total-row__amount {
    font-size: 1.125rem;
    font-weight: 800;
    color: #15803d;
}

/* ── 5. Audit Accordion ── */
.kunos-route-audit {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
    overflow: hidden;
}

.kunos-route-audit>summary {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 20px;
    cursor: pointer;
    user-select: none;
    font-size: 0.875rem;
    font-weight: 700;
    color: #334155;
    list-style: none;
    border-radius: 16px;
    transition: background 0.15s ease;
}

.kunos-route-audit>summary:hover {
    background: #f8fafc;
}

.kunos-route-audit>summary::-webkit-details-marker {
    display: none;
}

.kunos-route-audit__chevron {
    margin-left: auto;
    font-size: 0.875rem;
    color: #94a3b8;
    transition: transform 0.2s ease;
}

.kunos-route-audit[open] .kunos-route-audit__chevron {
    transform: rotate(180deg);
}

.kunos-route-audit__body {
    padding: 0 20px 20px;
    border-top: 1px solid #f1f5f9;
}

.kunos-route-audit__section-title {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: #94a3b8;
    margin: 16px 0 8px;
    display: block;
}

.kunos-route-audit__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px 24px;
}

.kunos-route-audit__field {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.kunos-route-audit__field dt {
    font-size: 0.6875rem;
    font-weight: 600;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.kunos-route-audit__field dd {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: #1e293b;
}

/* ── Responsive breakpoints ── */
@media (min-width: 1440px) {
    .kunos-route-workspace {
        grid-template-columns: 380px 1fr;
    }

    .kunos-route-lower {
        grid-template-columns: 1fr 400px;
    }
}

@media (max-width: 1280px) {
    .kunos-route-lower {
        grid-template-columns: 1fr;
    }

    .kunos-route-insights {
        max-width: 100%;
    }
}

@media (max-width: 1100px) {
    .kunos-route-workspace {
        grid-template-columns: 1fr;
    }

    .kunos-route-map-canvas {
        height: 420px;
        min-height: 380px;
    }

    .kunos-route-summary__grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .kunos-route-summary__cell:nth-child(4) {
        border-right: none;
    }
}

@media (max-width: 768px) {
    .kunos-route-summary__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .kunos-route-summary__cell:nth-child(even) {
        border-right: none;
    }

    .kunos-route-tl__address {
        max-width: 100%;
        white-space: normal;
    }

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

    .kunos-route-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .kunos-route-header__actions {
        width: 100%;
    }
}

/* ==========================================================================
   KUNOS ROUTE PLAN DETAIL WORKSPACE V2 (Sticky Map Split View)
   ========================================================================== */
.kunos-route-grid-v2 {
    display: grid;
    grid-template-columns: minmax(440px, 44%) 1fr;
    gap: 24px;
    align-items: start;
}

.kunos-route-sidebar-v2 {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
}

.kunos-route-map-sticky-v2 {
    position: sticky;
    top: 80px;
    height: calc(100vh - 110px);
    min-height: 580px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.06);
    display: flex;
    flex-direction: column;
}

.kunos-route-map-canvas-v2 {
    flex: 1;
    width: 100%;
    height: 100%;
    min-height: 480px;
}

.kunos-route-kpi-v2 {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 18px 20px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}

.kunos-route-kpi-v2__top {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    padding-bottom: 16px;
    border-bottom: 1px solid #f1f5f9;
}

.kunos-route-kpi-v2__item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.kunos-route-kpi-v2__label {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #94a3b8;
}

.kunos-route-kpi-v2__val {
    font-size: 1.125rem;
    font-weight: 800;
    color: #0f172a;
}

.kunos-route-kpi-v2__bottom {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr;
    gap: 16px;
    padding-top: 14px;
    align-items: center;
}

@media (max-width: 1280px) {
    .kunos-route-grid-v2 {
        grid-template-columns: 1fr;
    }

    .kunos-route-map-sticky-v2 {
        position: static;
        height: 520px;
    }
}

/* ── V3 Balanced Workspace Layout ── */
.kunos-route-workspace-v3 {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 20px;
    align-items: stretch;
}

.kunos-route-map-card-v3 {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.06);
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 520px;
}

.kunos-route-right-stack-v3 {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.kunos-route-lower-v3 {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 20px;
    align-items: start;
}

@media (max-width: 1100px) {
    .kunos-route-workspace-v3 {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   KUNOS ROUTE MAP TRAFFIC OVERLAY & TOOLBAR COMPONENTS
   ========================================================================== */
.kunos-route-map-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: #ffffff;
    border-bottom: 1px solid #e2e8f0;
    gap: 12px;
    flex-wrap: wrap;
}

.kunos-route-map-toolbar__left {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.kunos-route-map-toolbar__right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.kunos-route-traffic-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 10px;
    border-radius: 20px;
    background: #f1f5f9;
    font-size: 0.75rem;
    font-weight: 600;
    color: #64748b;
    border: 1px solid #e2e8f0;
    transition: all 0.2s ease;
}

.kunos-route-traffic-status__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #94a3b8;
    display: inline-block;
    transition: background 0.2s ease;
}

.kunos-route-traffic-status.is-active {
    background: #f0fdf4;
    color: #15803d;
    border-color: #bbf7d0;
}

.kunos-route-traffic-status.is-active .kunos-route-traffic-status__dot {
    background: #22c55e;
}

.kunos-route-traffic-legend {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
    font-size: 0.75rem;
}

.kunos-route-traffic-legend__item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-weight: 500;
}

.kunos-route-traffic-legend__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}

/* ==========================================================================
   KUNOS PLAN ROUTE REDESIGN & WORKSPACE STYLES
   ========================================================================== */
.kunos-plan-route-page {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.kunos-plan-route-depot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}

.kunos-plan-route-depot__left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.kunos-plan-route-depot__icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: #f0fdf4;
    color: #16a34a;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;
    flex-shrink: 0;
}

.kunos-plan-route-depot__name {
    font-weight: 700;
    color: #0f172a;
    font-size: 0.9375rem;
}

.kunos-plan-route-depot__address {
    font-size: 0.8125rem;
    color: #64748b;
    margin-left: 6px;
}

/* Plan Route — visual progress stepper. Purely a read of state the page
   already computes server-side ($step*Done / $routeStepActive in
   planner.blade.php); not a second page/wizard — nothing below it is ever
   gated or hidden by step state. */
.kunos-route-stepper {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 14px 20px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}

.kunos-route-stepper__step {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.kunos-route-stepper__num {
    position: relative;
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    border-radius: 999px;
    background: #f1f5f9;
    color: #94a3b8;
    border: 1.5px solid #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8125rem;
    font-weight: 700;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

/* Each .kunos-route-stepper__num holds three possible glyphs (check icon,
   step icon, plain number) — CSS shows exactly one per state rather than
   swapping markup, so JS only ever needs to toggle the parent's
   is-complete/is-active class. */
.kunos-route-stepper__num>i,
.kunos-route-stepper__num>span {
    display: none;
}

.kunos-route-stepper__num>span {
    font-size: 0.8125rem;
}

.kunos-route-stepper__step:not(.is-complete):not(.is-active) .kunos-route-stepper__num>span {
    display: inline;
}

.kunos-route-stepper__step.is-active .kunos-route-stepper__num>i.bi-box-seam,
.kunos-route-stepper__step.is-active .kunos-route-stepper__num>i.bi-truck,
.kunos-route-stepper__step.is-active .kunos-route-stepper__num>i.bi-signpost-split,
.kunos-route-stepper__step.is-active .kunos-route-stepper__num>i.bi-check2-circle {
    display: inline;
}

.kunos-route-stepper__step.is-complete .kunos-route-stepper__num>i.bi-check-lg {
    display: inline;
}

.kunos-route-stepper__step.is-active .kunos-route-stepper__num {
    background: var(--im-color-primary-soft, #eef2ff);
    border-color: var(--im-color-primary, #3f41b5);
    color: var(--im-color-primary, #3f41b5);
}

.kunos-route-stepper__step.is-complete .kunos-route-stepper__num {
    background: #16a34a;
    border-color: #16a34a;
    color: #ffffff;
}

.kunos-route-stepper__label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #94a3b8;
    white-space: nowrap;
    transition: color .15s ease;
}

.kunos-route-stepper__step.is-active .kunos-route-stepper__label {
    color: #0f172a;
}

.kunos-route-stepper__step.is-complete .kunos-route-stepper__label {
    color: #16a34a;
}

.kunos-route-stepper__connector {
    flex: 1 1 auto;
    min-width: 20px;
    height: 2px;
    margin: 0 12px;
    background: #e2e8f0;
    transition: background-color .15s ease;
}

.kunos-route-stepper__connector.is-complete {
    background: #16a34a;
}

@media (max-width: 767.98px) {
    .kunos-route-stepper {
        flex-wrap: wrap;
        row-gap: 10px;
    }

    .kunos-route-stepper__label {
        display: none;
    }

    .kunos-route-stepper__connector {
        min-width: 14px;
        margin: 0 6px;
    }
}

.kunos-plan-route-config {
    position: relative;
    z-index: 100;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 14px 20px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.kunos-plan-route-config__left {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.kunos-plan-route-config__field {
    display: flex;
    align-items: center;
    gap: 8px;
}

.kunos-plan-route-config__label {
    font-size: 0.75rem;
    font-weight: 700;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* Custom Kunos Strategy Dropdown */
.kunos-strategy-dropdown {
    position: relative;
    z-index: 101;
    display: inline-block;
}

.kunos-strategy-dropdown__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 14px;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 16px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #0f172a;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
    min-width: 170px;
}

.kunos-strategy-dropdown__trigger:hover {
    border-color: #3f41b5;
    background: #f8fafc;
}

.kunos-strategy-dropdown__trigger:focus-visible,
.kunos-strategy-dropdown__trigger.is-open {
    border-color: #3f41b5;
    box-shadow: 0 0 0 3px rgba(63, 65, 181, 0.15);
    outline: none;
}

.kunos-strategy-dropdown__menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 9999;
    width: 320px;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 14px;
    box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.15), 0 8px 10px -6px rgba(15, 23, 42, 0.08);
    padding: 6px;
    margin: 0;
    list-style: none;
}

.kunos-strategy-dropdown__menu[hidden] {
    display: none !important;
}

.kunos-strategy-dropdown__menu:not([hidden]),
.kunos-strategy-dropdown__menu.is-open {
    display: block !important;
}

.kunos-strategy-dropdown__option {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s ease;
    user-select: none;
}

.kunos-strategy-dropdown__option:hover,
.kunos-strategy-dropdown__option.is-active {
    background: #f1f5f9;
}

.kunos-strategy-dropdown__option.is-selected {
    background: #eef2ff;
    color: #3f41b5;
}

.kunos-strategy-dropdown__option-text {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.kunos-strategy-dropdown__option-title {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #0f172a;
}

.kunos-strategy-dropdown__option.is-selected .kunos-strategy-dropdown__option-title {
    color: #3f41b5;
}

.kunos-strategy-dropdown__option-desc {
    font-size: 0.75rem;
    color: #64748b;
    line-height: 1.3;
    margin-top: 2px;
}

.kunos-strategy-dropdown__check {
    color: #3f41b5;
    font-size: 0.9375rem;
    flex-shrink: 0;
    margin-top: 2px;
    visibility: hidden;
}

.kunos-strategy-dropdown__option.is-selected .kunos-strategy-dropdown__check {
    visibility: visible;
}

/* 12-Column Responsive Workspace Grid */
.kunos-plan-route-workspace {
    display: grid;
    grid-template-columns: 4fr 8fr;
    gap: 20px;
    align-items: start;
}

@media (max-width: 1100px) {
    .kunos-plan-route-workspace {
        grid-template-columns: 5fr 7fr;
    }
}

@media (max-width: 900px) {
    .kunos-plan-route-workspace {
        grid-template-columns: 1fr;
    }
}

.kunos-plan-route-sidebar {
    display: flex;
    flex-direction: column;
    gap: 16px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 16px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}

.kunos-plan-route-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.kunos-plan-route-section-title {
    font-size: 0.875rem;
    font-weight: 700;
    color: #0f172a;
    display: flex;
    align-items: center;
    gap: 6px;
}

.kunos-plan-route-section-badge {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 12px;
    background: #e2e8f0;
    color: #475569;
}

.kunos-plan-route-section-badge.is-selected {
    background: #eef2ff;
    color: #3f41b5;
    border: 1px solid #c7d2fe;
}

/* Resource Card (Vehicle / Driver) */
.kunos-resource-card {
    padding: 10px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #ffffff;
    cursor: pointer;
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}

.kunos-resource-card:hover {
    border-color: #cbd5e1;
    background: #f8fafc;
}

.kunos-resource-card.is-selected {
    border-color: #3f41b5;
    background: #f5f3ff;
    box-shadow: 0 0 0 1px #3f41b5;
}

.kunos-resource-card__info {
    display: flex;
    flex-direction: column;
}

.kunos-resource-card__title {
    font-size: 0.8125rem;
    font-weight: 700;
    color: #0f172a;
}

.kunos-resource-card__sub {
    font-size: 0.75rem;
    color: #64748b;
}

.kunos-resource-card__check {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1.5px solid #cbd5e1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: transparent;
    font-size: 0.75rem;
    transition: all 0.15s ease;
}

.kunos-resource-card.is-selected .kunos-resource-card__check {
    background: #3f41b5;
    border-color: #3f41b5;
    color: #ffffff;
}

/* Route Preview Container */
.kunos-plan-route-preview {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
    overflow: hidden;
}

.kunos-plan-route-preview__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
}

.kunos-plan-route-preview__title {
    font-size: 0.9375rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.kunos-plan-route-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 12px;
    padding: 16px 20px;
    background: #ffffff;
    border-bottom: 1px solid #f1f5f9;
}

.kunos-plan-route-summary__item {
    display: flex;
    flex-direction: column;
}

.kunos-plan-route-summary__label {
    font-size: 0.7rem;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.kunos-plan-route-summary__value {
    font-size: 0.875rem;
    font-weight: 700;
    color: #0f172a;
    margin-top: 2px;
}

.kunos-plan-route-sequence {
    padding: 16px 20px;
}

.kunos-plan-route-notice {
    padding: 10px 14px;
    border-radius: 10px;
    background: #fffbeb;
    border: 1px solid #fef3c7;
    color: #b45309;
    font-size: 0.8125rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
}

/* Manual Route fix: #rpStrategyNotice (the "Configuration changed,
   recalculate" dirty-state banner in planner.blade.php) carries Bootstrap's
   own .d-flex utility class, which — like every other [hidden] conflict
   already fixed elsewhere in this stylesheet (see e.g.
   .bos-select-custom-option[hidden] and #comparisonSharedError[hidden]
   above) — is itself !important and so silently defeats the browser's
   plain (non-important) native [hidden]{display:none} rule: the banner
   stayed visibly rendered on every page load, including a brand-new,
   not-yet-generated plan with nothing to recalculate. Confirmed live via
   browser (getBoundingClientRect returned a real, non-zero box) before
   this fix — not a hypothetical. Root cause of part of this task's
   reported "state contradiction" (a stale warning banner sitting above a
   correctly-blank Route Preview). Narrowly scoped to the one element that
   actually pairs alert-style classes with [hidden] toggling client-side. */
#rpStrategyNotice[hidden] {
    display: none !important;
}

/* Inventory continuous receiving workspace */
.inv-receiving-page {
    padding-top: 20px;
    padding-bottom: 110px;
    max-width: 1500px
}

.inv-receiving-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 22px 24px;
    margin-bottom: 18px;
    border: 1px solid #e4e7f3;
    border-radius: 20px;
    background: linear-gradient(135deg, #fff 58%, #f2f0ff);
    box-shadow: 0 12px 32px rgba(30, 41, 59, .06)
}

.inv-receiving-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #5b4fd6;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase
}

.inv-receiving-hero h2 {
    margin: 7px 0 4px;
    color: #172033;
    font-size: 26px;
    font-weight: 800
}

.inv-receiving-hero p,
.inv-receiving-section-heading p {
    margin: 0;
    color: #64748b
}

.inv-receiving-mode {
    display: flex;
    padding: 4px;
    border: 1px solid #dedff0;
    border-radius: 13px;
    background: #fff
}

.inv-receiving-mode button {
    min-height: 42px;
    padding: 0 18px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: #64748b;
    font-weight: 700
}

.inv-receiving-mode button.is-active {
    background: #ece9ff;
    color: #4f46c8;
    box-shadow: 0 2px 8px rgba(79, 70, 200, .12)
}

.inv-receiving-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 330px;
    gap: 18px
}

.inv-receiving-main,
.inv-receiving-side {
    display: grid;
    align-content: start;
    gap: 18px
}

.inv-receiving-scanner-card,
.inv-receiving-session-card,
.inv-receiving-reference-card,
.inv-receiving-history-card {
    border: 1px solid #e4e7ef;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(30, 41, 59, .05)
}

.inv-receiving-scanner-card,
.inv-receiving-session-card,
.inv-receiving-reference-card {
    padding: 20px
}

.inv-receiving-section-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px
}

.inv-receiving-section-heading>div>span,
.inv-receiving-reference-card h3 {
    display: block;
    margin: 0 0 4px;
    color: #1e293b;
    font-size: 15px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .045em
}

.inv-receiving-section-heading p {
    font-size: 13px
}

.inv-receiving-scan-form {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 8px;
    border: 2px solid #c9c5f5;
    border-radius: 15px;
    background: #fafaff;
    transition: .2s
}

.inv-receiving-scan-form:focus-within {
    border-color: #6658dc;
    box-shadow: 0 0 0 4px rgba(102, 88, 220, .12)
}

.inv-receiving-scan-form>i {
    padding-left: 8px;
    color: #6658dc;
    font-size: 23px
}

.inv-receiving-scan-form input {
    min-width: 0;
    height: 44px;
    border: 0;
    outline: 0;
    background: transparent;
    color: #172033;
    font-size: 17px;
    font-weight: 650
}

.inv-receiving-feedback {
    min-height: 22px;
    margin-top: 10px;
    color: #64748b;
    font-size: 13px
}

.inv-receiving-feedback.is-success {
    color: #15803d;
    font-weight: 700
}

.inv-receiving-feedback.is-error {
    color: #b42318;
    font-weight: 700
}

.inv-receiving-unknown,
.inv-receiving-bulk {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 14px;
    margin-top: 12px;
    padding: 14px;
    border: 1px solid #fed7aa;
    border-radius: 14px;
    background: #fffaf3
}

.inv-receiving-unknown>div:first-child,
.inv-receiving-bulk>div:first-child {
    display: grid;
    gap: 2px
}

.inv-receiving-unknown span,
.inv-receiving-bulk span {
    color: #7c2d12;
    font-family: ui-monospace, monospace
}

.inv-receiving-unknown>div:last-child {
    display: flex;
    gap: 8px
}

.inv-receiving-bulk {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) 150px 170px auto;
    align-items: end;
    border-color: #d9d6f7;
    background: #faf9ff
}

.inv-receiving-bulk label,
.inv-receiving-reference-card label,
.inv-receiving-line__cost {
    display: grid;
    gap: 6px;
    color: #475569;
    font-size: 12px;
    font-weight: 700
}

.inv-receiving-totals {
    display: flex !important;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 11px;
    background: #f6f5ff
}

.inv-receiving-totals strong {
    color: #4338ca
}

.inv-receiving-totals span {
    color: #475569;
    font-size: 13px
}

.inv-receiving-empty {
    display: grid;
    place-items: center;
    min-height: 180px;
    padding: 26px;
    text-align: center;
    color: #94a3b8;
    border: 1px dashed #d8dce7;
    border-radius: 14px;
    background: #fafbfc
}

.inv-receiving-empty i {
    font-size: 30px
}

.inv-receiving-empty strong {
    color: #64748b
}

.inv-receiving-lines {
    display: grid;
    gap: 12px
}

.inv-receiving-line {
    display: grid;
    grid-template-columns: minmax(220px, 1.3fr) minmax(270px, 1fr) auto;
    gap: 14px;
    align-items: center;
    padding: 15px;
    border: 1px solid #e3e6ef;
    border-radius: 14px;
    background: #fff;
    transition: .2s
}

.inv-receiving-line.is-recent {
    border-color: #8b7ff0;
    background: #fbfaff;
    box-shadow: 0 0 0 3px rgba(102, 88, 220, .08)
}

.inv-receiving-line__identity {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0
}

.inv-receiving-line__icon {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    border-radius: 11px;
    background: #eeecff;
    color: #5b4fd6
}

.inv-receiving-line__identity div {
    display: grid;
    min-width: 0
}

.inv-receiving-line__identity strong {
    overflow: hidden;
    color: #1e293b;
    text-overflow: ellipsis;
    white-space: nowrap
}

.inv-receiving-line__identity span {
    overflow: hidden;
    color: #64748b;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap
}

.inv-receiving-line__metrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 7px
}

.inv-receiving-line__metrics div {
    display: grid;
    gap: 2px
}

.inv-receiving-line__metrics span {
    color: #94a3b8;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase
}

.inv-receiving-line__metrics strong {
    color: #334155;
    font-size: 13px
}

.inv-receiving-line__metrics .is-incoming {
    color: #16a34a
}

.inv-receiving-line__controls {
    display: flex;
    align-items: center
}

.inv-receiving-line__controls button {
    width: 36px;
    height: 38px;
    border: 1px solid #dfe2eb;
    background: #f8fafc;
    color: #334155;
    font-size: 18px;
    font-weight: 700
}

.inv-receiving-line__controls input {
    width: 68px;
    height: 38px;
    border: 1px solid #dfe2eb;
    border-right: 0;
    border-left: 0;
    text-align: center;
    font-weight: 800
}

.inv-receiving-line__controls .is-remove {
    margin-left: 8px;
    border-radius: 9px;
    color: #dc2626;
    font-size: 14px
}

.inv-receiving-line__cost {
    grid-column: 1/-1;
    grid-template-columns: auto 150px;
    align-items: center;
    justify-content: end
}

.inv-receiving-line__cost input {
    height: 36px
}

.inv-receiving-reference-card {
    display: grid;
    gap: 15px
}

.inv-receiving-safety {
    display: flex;
    gap: 10px;
    padding: 12px;
    border-radius: 12px;
    background: #f0f9ff;
    color: #475569;
    font-size: 12px;
    line-height: 1.5
}

.inv-receiving-safety i {
    color: #0284c7;
    font-size: 17px
}

.inv-receiving-history-card {
    overflow: hidden
}

.inv-receiving-history-card>button {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    padding: 15px 18px;
    border: 0;
    background: #fff;
    color: #334155;
    font-weight: 750
}

.inv-receiving-history-card ol {
    display: grid;
    gap: 8px;
    max-height: 260px;
    margin: 0;
    padding: 0 18px 15px;
    overflow: auto;
    list-style: none
}

.inv-receiving-history-card li {
    display: grid;
    grid-template-columns: 70px 1fr auto;
    gap: 8px;
    color: #64748b;
    font-size: 12px
}

.inv-receiving-history-card li strong {
    color: #16a34a
}

.inv-receiving-actions {
    position: sticky;
    z-index: 20;
    bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 18px;
    padding: 13px;
    border: 1px solid #e2e5ee;
    border-radius: 16px;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 12px 35px rgba(15, 23, 42, .12);
    backdrop-filter: blur(10px)
}

.inv-receiving-modal-backdrop {
    position: fixed;
    z-index: 1050;
    inset: 0;
    background: rgba(15, 23, 42, .52);
    backdrop-filter: blur(3px)
}

.inv-receiving-modal {
    position: fixed;
    z-index: 1051;
    top: 50%;
    left: 50%;
    width: min(620px, calc(100vw - 28px));
    max-height: 86vh;
    overflow: hidden;
    transform: translate(-50%, -50%);
    border: 1px solid #e3e5ef;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 30px 80px rgba(15, 23, 42, .28)
}

.inv-receiving-modal__header,
.inv-receiving-modal__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 17px 20px
}

.inv-receiving-modal__header {
    border-bottom: 1px solid #e8eaf0
}

.inv-receiving-modal__header>div {
    display: flex;
    align-items: center;
    gap: 12px
}

.inv-receiving-modal__header>div>span {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: #eeecff;
    color: #5547d4
}

.inv-receiving-modal__header h3 {
    margin: 0;
    color: #172033;
    font-size: 18px
}

.inv-receiving-modal__header p {
    margin: 2px 0 0;
    color: #64748b;
    font-size: 13px
}

.inv-receiving-modal__body {
    display: grid;
    gap: 9px;
    max-height: 55vh;
    padding: 18px 20px;
    overflow-y: auto
}

.inv-receiving-modal__body>div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 11px 12px;
    border-radius: 10px;
    background: #f8fafc;
    color: #334155
}

.inv-receiving-modal__body>div span {
    display: grid
}

.inv-receiving-modal__body small {
    color: #16a34a
}

.inv-receiving-modal__footer {
    border-top: 1px solid #e8eaf0
}

.inv-receiving-success .inv-receiving-modal__header>div>span {
    background: #dcfce7;
    color: #15803d
}

@media(max-width:1100px) {
    .inv-receiving-grid {
        grid-template-columns: 1fr
    }

    .inv-receiving-side {
        grid-template-columns: 1fr 1fr
    }

    .inv-receiving-bulk {
        grid-template-columns: 1fr 1fr
    }

    .inv-receiving-bulk>div,
    .inv-receiving-bulk button {
        grid-column: 1/-1
    }

    .inv-receiving-line {
        grid-template-columns: 1fr auto
    }

    .inv-receiving-line__metrics {
        grid-column: 1/2
    }

    .inv-receiving-line__controls {
        grid-column: 2;
        grid-row: 1/3
    }
}

@media(max-width:767px) {
    .inv-receiving-page {
        padding-right: 12px;
        padding-left: 12px
    }

    .inv-receiving-hero {
        align-items: stretch;
        flex-direction: column;
        padding: 18px
    }

    .inv-receiving-mode button {
        flex: 1;
        padding: 0 10px
    }

    .inv-receiving-side {
        grid-template-columns: 1fr
    }

    .inv-receiving-scanner-card,
    .inv-receiving-session-card,
    .inv-receiving-reference-card {
        padding: 15px
    }

    .inv-receiving-section-heading {
        align-items: stretch;
        flex-direction: column
    }

    .inv-receiving-scan-form {
        grid-template-columns: auto minmax(0, 1fr)
    }

    .inv-receiving-scan-form button {
        grid-column: 1/-1;
        width: 100%
    }

    .inv-receiving-bulk {
        grid-template-columns: 1fr
    }

    .inv-receiving-line {
        grid-template-columns: 1fr
    }

    .inv-receiving-line__metrics,
    .inv-receiving-line__controls {
        grid-column: 1;
        grid-row: auto
    }

    .inv-receiving-line__controls input {
        flex: 1
    }

    .inv-receiving-line__cost {
        grid-template-columns: 1fr
    }

    .inv-receiving-actions {
        bottom: 70px;
        flex-direction: column
    }

    .inv-receiving-actions .im-btn {
        width: 100%;
        justify-content: center
    }

    .inv-receiving-modal__footer {
        flex-direction: column-reverse
    }

    .inv-receiving-modal__footer .im-btn {
        width: 100%;
        justify-content: center
    }
}

.inv-receiving-camera {
    position: relative;
    margin-top: 12px;
    overflow: hidden;
    border-radius: 14px;
    background: #0f172a
}

.inv-receiving-camera video {
    display: block;
    width: 100%;
    max-height: 360px;
    object-fit: cover
}

.inv-receiving-camera>span {
    position: absolute;
    inset: 20% 12%;
    border: 2px solid rgba(255, 255, 255, .8);
    border-radius: 12px;
    box-shadow: 0 0 0 999px rgba(15, 23, 42, .28)
}

.inv-receiving-camera>button {
    position: absolute;
    right: 12px;
    bottom: 12px
}

body.inv-receiving-modal-open {
    overflow: hidden
}

body.inv-receiving-modal-open .bos-ai-launcher,
body.inv-receiving-modal-open .bos-ai-window {
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important
}

.inv-receiving-grid[hidden],
.inv-receiving-actions[hidden],
.inv-receiving-document[hidden] {
    display: none !important
}

.inv-receiving-intake {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 18px
}

.inv-receiving-intake button {
    display: flex;
    align-items: center;
    gap: 13px;
    min-width: 0;
    padding: 15px 17px;
    border: 1px solid #e2e5ee;
    border-radius: 15px;
    background: #fff;
    color: #475569;
    text-align: left;
    transition: .18s
}

.inv-receiving-intake button>i {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    border-radius: 11px;
    background: #f1f3f8;
    color: #64748b;
    font-size: 19px
}

.inv-receiving-intake button span {
    display: grid;
    min-width: 0
}

.inv-receiving-intake button strong {
    color: #1e293b;
    font-size: 14px
}

.inv-receiving-intake button small {
    overflow: hidden;
    color: #64748b;
    text-overflow: ellipsis;
    white-space: nowrap
}

.inv-receiving-intake button.is-active {
    border-color: #8b7ff0;
    background: #faf9ff;
    box-shadow: 0 0 0 3px rgba(102, 88, 220, .08)
}

.inv-receiving-intake button.is-active>i {
    background: #ece9ff;
    color: #5547d4
}

.inv-receiving-history-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 12px
}

.inv-receiving-history-head>button:first-child {
    display: flex;
    min-width: 0;
    flex: 1;
    align-items: center;
    justify-content: space-between;
    padding: 5px 6px;
    border: 0;
    background: transparent;
    color: #334155;
    font-weight: 750
}

.inv-receiving-document {
    max-width: 980px;
    margin: 0 auto;
    padding: 26px;
    border: 1px solid #e2e5ee;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 12px 34px rgba(30, 41, 59, .06)
}

.inv-receiving-document__intro {
    display: flex;
    gap: 16px;
    align-items: flex-start
}

.inv-receiving-document__intro>span {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    border-radius: 14px;
    background: #ece9ff;
    color: #5547d4;
    font-size: 21px
}

.inv-receiving-document h3 {
    margin: 1px 0 6px;
    color: #172033;
    font-size: 21px
}

.inv-receiving-document p {
    max-width: 760px;
    margin: 0;
    color: #64748b;
    line-height: 1.55
}

.inv-receiving-document__steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin: 24px 0
}

.inv-receiving-document__steps>div {
    display: flex;
    gap: 10px;
    padding: 15px;
    border: 1px solid #e6e8ef;
    border-radius: 13px;
    background: #fafbfc
}

.inv-receiving-document__steps>div>strong {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
    border-radius: 50%;
    background: #5547d4;
    color: #fff;
    font-size: 12px
}

.inv-receiving-document__steps span {
    display: grid;
    gap: 4px
}

.inv-receiving-document__steps b {
    color: #263247;
    font-size: 13px
}

.inv-receiving-document__steps small {
    color: #64748b;
    line-height: 1.45
}

.inv-receiving-document__actions {
    display: flex;
    gap: 10px;
    margin-bottom: 18px
}

@media(max-width:767px) {
    .inv-receiving-intake {
        grid-template-columns: 1fr
    }

    .inv-receiving-intake button small {
        white-space: normal
    }

    .inv-receiving-document {
        padding: 18px
    }

    .inv-receiving-document__steps {
        grid-template-columns: 1fr
    }

    .inv-receiving-document__actions {
        flex-direction: column
    }

    .inv-receiving-history-head {
        align-items: stretch;
        flex-direction: column
    }

    .inv-receiving-history-head .im-btn {
        justify-content: center
    }
}

/* Supplier-document receiving: warehouse-first review, audit tools secondary. */
.sd-worker-summary {
    padding: 20px;
    border-radius: 18px
}

.sd-worker-summary__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px
}

.sd-worker-summary__top span:first-child {
    color: #5b4fd6;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase
}

.sd-worker-summary__top h5 {
    margin: 4px 0 0;
    color: #172033;
    font-size: 19px;
    font-weight: 800
}

.sd-worker-summary dl {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin: 18px 0 0;
    padding-top: 16px;
    border-top: 1px solid #e7e9f0
}

.sd-worker-summary dl div {
    min-width: 0
}

.sd-worker-summary dt,
.sd-receive-preview span {
    color: #8490a3;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase
}

.sd-worker-summary dd {
    overflow-wrap: anywhere;
    margin: 4px 0 0;
    color: #273449;
    font-size: 13px;
    font-weight: 700
}

.sd-advanced-review {
    border: 1px solid #e3e6ed;
    border-radius: 14px;
    background: #fff
}

.sd-advanced-review>summary,
.sd-secondary-section>summary {
    padding: 14px 17px;
    color: #526079;
    font-size: 13px;
    font-weight: 750;
    cursor: pointer
}

.sd-advanced-review[open]>summary,
.sd-secondary-section[open]>summary {
    border-bottom: 1px solid #e8eaf0
}

.sd-advanced-review>.sd-section {
    margin: 12px;
    border: 0;
    background: #f8fafc;
    box-shadow: none
}

.sd-items-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 15px
}

.sd-items-heading span {
    display: block;
    color: #1e293b;
    font-size: 15px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em
}

.sd-items-heading p {
    margin: 3px 0 0;
    color: #64748b;
    font-size: 12px
}

.sd-items-heading>strong {
    padding: 7px 10px;
    border-radius: 9px;
    background: #eef7f1;
    color: #15803d;
    font-size: 12px
}

.sd-receive-preview {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin: 12px 0;
    padding: 12px;
    border: 1px solid #e4e7ef;
    border-radius: 12px;
    background: #fbfcfe
}

.sd-receive-preview div {
    display: grid;
    gap: 3px
}

.sd-receive-preview strong {
    color: #273449;
    font-size: 13px
}

.sd-technical-warnings,
.sd-line-review-fields {
    margin-top: 10px
}

.sd-technical-warnings>summary,
.sd-line-review-fields>summary {
    color: #64748b;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer
}

.sd-line-review-fields[open]>summary {
    margin-bottom: 10px
}

.sd-match-success {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 11px;
    align-items: center;
    margin-top: 12px;
    padding: 13px;
    border: 1px solid #cce8d5;
    border-radius: 12px;
    background: #f5fbf7
}

.sd-match-success__icon {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: #dcfce7;
    color: #15803d
}

.sd-match-success>div {
    display: grid;
    gap: 2px
}

.sd-match-success small {
    color: #15803d;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase
}

.sd-match-success strong {
    color: #1e293b
}

.sd-match-success span,
.sd-match-success em {
    color: #64748b;
    font-size: 11px;
    font-style: normal
}

.sd-match-success details {
    text-align: right
}

.sd-match-success details summary {
    color: #5547d4;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer
}

.sd-match-success details form {
    margin-top: 8px
}

.sd-match-exception {
    display: flex;
    gap: 10px;
    margin: 12px 0;
    padding: 12px;
    border: 1px solid #fed7aa;
    border-radius: 12px;
    background: #fff8ed;
    color: #9a4c0d
}

.sd-match-exception div {
    display: grid;
    gap: 2px
}

.sd-match-exception span {
    font-size: 12px
}

.sd-more-actions {
    position: relative
}

.sd-more-actions>summary {
    padding: 9px 12px;
    color: #64748b;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer
}

.sd-more-actions>div {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 8px
}

.sd-secondary-section {
    overflow: hidden;
    padding: 0 !important
}

@media(max-width:767px) {
    .sd-review-grid {
        grid-template-columns: 1fr
    }

    .sd-preview-col {
        order: 2
    }

    .sd-fields-col {
        order: 1
    }

    .sd-worker-summary dl,
    .sd-receive-preview {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .sd-match-success {
        grid-template-columns: auto minmax(0, 1fr)
    }

    .sd-match-success details {
        grid-column: 1/-1;
        text-align: left
    }

    .sd-section:has(form[action*="mark-ready"]) {
        padding-bottom: 90px
    }

    .sd-section form[action*="mark-ready"] {
        position: sticky;
        z-index: 20;
        bottom: 76px;
        width: 100%
    }

    .sd-section form[action*="mark-ready"] .im-btn {
        width: 100%;
        justify-content: center
    }
}

/* Searchable bos-select (data-bos-select-searchable="true") — e.g. the
   Commercial Document Settings Payment & Reminders "Bank Name" selector
   and Tax & e-Invoice "MSIC Code" selector. */
.bos-select-custom-dropdown.bos-select-custom-dropdown--searchable {
    max-width: min(600px, calc(100vw - 24px)) !important;
    max-height: min(340px, calc(100vh - 120px)) !important;
    padding-top: 0 !important;
}

.bos-select-search-wrap {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 8px;
    background: var(--im-color-surface, #fff);
    border-bottom: 1px solid var(--im-color-line, #e4e7ec);
    margin-left: -6px;
    margin-right: -6px;
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
}

.bos-select-search-input {
    width: 100%;
    height: 34px;
    padding: 0 10px;
    border: 1px solid var(--im-color-line, #d0d5dd);
    border-radius: 8px;
    background: #fff;
    color: #1e293b;
    font-size: 13px;
}

.bos-select-search-input:focus {
    outline: 0;
    border-color: #4338ca;
    box-shadow: 0 0 0 3px rgba(67, 56, 202, .12);
}

.bos-select-custom-dropdown--searchable .bos-select-custom-list {
    padding-top: 2px;
}

.bos-select-custom-empty {
    padding: 14px 12px;
    color: #94a3b8;
    font-size: 12.5px;
    text-align: center;
}

/* Commercial Document Settings — Bank Name selector: custom/legacy-value hint
   and the reveal-on-"Other" manual bank-name field. */
.kunos-bank-type-hint {
    display: block;
    margin-top: 5px;
    color: #667085;
    font-size: 11px
}

.kunos-bank-type-hint[data-variant="custom"] {
    color: #b45309;
    font-weight: 600
}

.kunos-bank-manual-field {
    margin-top: 8px
}

/* Quotation Add Item drawer — Product/Service searchable combobox. Reuses
   .im-input's own look for the search field; the results panel/rows and the
   selected-item chip follow the same card/dropdown language as
   .bos-select-custom-dropdown elsewhere in Kunos, kept local to this
   component since it isn't a generic <select> enhancement. */
.boq-product-combobox {
    position: relative
}

.boq-product-combobox__chip {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    padding: 6px 8px;
    border: 1px solid var(--im-color-line, #d0d5dd);
    border-radius: 8px;
    background: #f8fafc
}

.boq-product-combobox__chip-icon {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
    border-radius: 7px;
    background: #eef0ff;
    color: #4338ca;
    font-size: 13px
}

.boq-product-combobox__chip-text {
    display: grid;
    gap: 1px;
    min-width: 0;
    flex: 1 1 auto
}

.boq-product-combobox__chip-text strong {
    overflow: hidden;
    color: #1e293b;
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap
}

.boq-product-combobox__chip-text small {
    overflow: hidden;
    color: #64748b;
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap
}

.boq-product-combobox__chip-clear {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: #94a3b8
}

.boq-product-combobox__chip-clear:hover {
    background: #eef1f6;
    color: #475569
}

.boq-product-combobox__results {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 60;
    overflow-y: auto;
    max-height: 280px;
    padding: 6px;
    border: 1px solid rgba(219, 228, 243, .8);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, .08), 0 8px 10px -6px rgba(0, 0, 0, .08)
}

.boq-product-combobox__group {
    padding: 8px 10px 4px;
    color: #94a3b8;
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase
}

.boq-product-combobox__option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 8px;
    cursor: pointer
}

.boq-product-combobox__option:hover,
.boq-product-combobox__option.is-active {
    background: #f5f6ff
}

.boq-product-combobox__option-icon {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
    border-radius: 7px;
    background: #f1f2f9;
    color: #5b5fc7;
    font-size: 12px
}

.boq-product-combobox__option-text {
    display: grid;
    gap: 1px;
    min-width: 0;
    flex: 1 1 auto
}

.boq-product-combobox__option-text strong {
    overflow: hidden;
    color: #1e293b;
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap
}

.boq-product-combobox__option-text small {
    overflow: hidden;
    color: #64748b;
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap
}

.boq-product-combobox__option-price {
    flex: 0 0 auto;
    color: #334155;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap
}

.boq-product-combobox__option--manual {
    border-top: 1px solid #eef0f5;
    margin-top: 4px;
    padding-top: 10px;
    color: #4338ca;
    font-weight: 600
}

.boq-product-combobox__option--manual .boq-product-combobox__option-icon {
    background: #eef0ff;
    color: #4338ca
}

.boq-product-combobox__empty {
    padding: 14px 10px;
    color: #94a3b8;
    font-size: 12.5px;
    text-align: center
}

.inv-receiving-bulk {
    display: grid;
    grid-template-columns: 1fr;
    align-items: stretch;
    gap: 12px
}

.inv-receiving-bulk__found {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #15803d;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em
}

.inv-receiving-bulk__found i {
    font-size: 14px
}

.inv-receiving-bulk__product {
    display: grid;
    gap: 2px
}

.inv-receiving-bulk__product strong {
    color: #1e293b;
    font-size: 16px;
    font-weight: 800;
    font-family: inherit
}

.inv-receiving-bulk__product span {
    color: #7c2d12;
    font-family: ui-monospace, monospace;
    font-size: 12px
}

.inv-receiving-bulk__current {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 13px;
    border: 1px solid #ece9ff;
    border-radius: 11px;
    background: #fff
}

.inv-receiving-bulk__current span {
    color: #64748b;
    font-family: inherit;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em
}

.inv-receiving-bulk__current strong {
    color: #334155;
    font-size: 14px
}

.inv-receiving-bulk__qty {
    display: grid;
    gap: 9px;
    padding: 14px;
    border: 2px solid #6658dc;
    border-radius: 14px;
    background: #fff
}

.inv-receiving-bulk__qty label {
    color: #1e293b;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: none
}

.inv-receiving-bulk__stepper {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px
}

.inv-receiving-bulk__stepper button {
    width: 48px;
    height: 52px;
    border: 1px solid #dfe2eb;
    border-radius: 12px;
    background: #f8fafc;
    color: #334155;
    font-size: 22px;
    font-weight: 800
}

.inv-receiving-bulk__stepper button:active {
    background: #ece9ff
}

.inv-receiving-bulk__stepper input {
    height: 56px;
    border: 1px solid #c9c5f5;
    border-radius: 12px;
    text-align: center;
    font-family: inherit;
    font-size: 28px;
    font-weight: 800;
    color: #172033
}

.inv-receiving-bulk__qty>span {
    color: #64748b;
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    text-align: center
}

.inv-receiving-bulk__preview {
    display: grid;
    gap: 6px
}

.inv-receiving-bulk__preview>div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 13px;
    border-radius: 10px;
    background: #f6f5ff
}

.inv-receiving-bulk__preview span {
    color: #475569;
    font-family: inherit;
    font-size: 12px;
    font-weight: 700
}

.inv-receiving-bulk__preview strong {
    color: #4338ca;
    font-size: 15px;
    font-weight: 800
}

.inv-receiving-bulk__optional {
    margin-top: -2px
}

.inv-receiving-bulk__optional summary {
    cursor: pointer;
    color: #64748b;
    font-size: 12px;
    font-weight: 700;
    list-style: revert
}

.inv-receiving-bulk__optional label {
    display: grid;
    gap: 6px;
    margin-top: 9px;
    color: #475569;
    font-size: 12px;
    font-weight: 700
}

.inv-receiving-bulk__optional input {
    height: 38px
}

@media(max-width:767px) {
    .inv-receiving-bulk__stepper input {
        font-size: 22px
    }
}

/* Register New Item drawer footer clipping fix: main.embedded-main carries
   a flat 24px padding on every side (meant for the simpler embedded pages
   that share that class), but items/create.blade.php and items/edit.blade.php
   render a self-contained, flush, full-height flex column
   (.inv-item-drawer-page: header-less body + sticky footer, sized with
   height:100vh) that already accounts for its own spacing internally. The
   inherited 24px padding silently ate into that 100vh box on every side,
   pushing the sticky footer/Save button below the visible viewport by
   roughly the padding amount — this cancels that inherited padding with an
   exact, viewport-size-independent negative margin (not a one-off pixel
   guess: 24px is the same fixed value the padding itself already uses at
   every breakpoint), restoring the page to the full flush box its own
   height:100vh math assumes. */
main.embedded-main .inv-item-drawer-page {
    margin: -24px;
    width: calc(100% + 48px);
    height: 100vh;
}

/* Real notched-device home-indicator clearance for the same footer, so the
   Save/Cancel row is never partially under a hardware safe area either. */
.inv-item-drawer-form .im-drawer-footer {
    padding-bottom: calc(16px + env(safe-area-inset-bottom));
}

/* Fixes a real, pre-existing app-wide size defect: an unscoped `button {
   padding: 10px 20px; ... }` rule (see the "Leave Management Css" section
   above) applies to every plain <button> in the whole app with no more
   specific competing padding declaration to beat it — .im-icon-btn never
   declared its own padding, so any <button class="im-icon-btn"> silently
   grew ~14px wider/taller than an <a class="im-icon-btn"> showing the
   identical classes right next to it (the anchor was never matched by a
   bare `button` selector). This is why, e.g., Inventory Items' View (an
   <a>) rendered visibly smaller than Edit/More (both <button>) despite
   sharing the exact same .im-icon-btn.im-icon-btn-sm classes. Declared
   after that rule in source order, so no !important is needed here.
   Fixes every .im-icon-btn <button> app-wide, not just Inventory. */
.im-icon-btn {
    padding: 0;
}

/* Compact table Action column — extra right-side breathing room so the
   button group never sits flush against the table/card edge. Reusable:
   apply to both the <th> and <td> of any compact table's trailing action
   column. Only the right side is widened (left stays at the table's normal
   14px/16px cell padding) so the group visually shifts away from the edge
   rather than just growing the whole cell symmetrically. */
.im-table-action-cell {
    padding-right: 28px !important;
}

/* CRM Deal → Audio Note / AI Summary modal: the editable summary fields
   (Discussion summary, Customer needs, Decisions, Follow-up actions,
   Responsible person, Due dates mentioned, ...) were inheriting the plain
   .im-input default of 14px/1.4 — dense for a block of prose the user is
   expected to read and edit. Scoped to #audioNoteSummaryFields only (the
   exact wrapper around this field set — see audio-note-composer.blade.php)
   so no other .im-input/textarea anywhere else in Kunos is affected.
   16px also keeps mobile Safari from auto-zooming on focus (it zooms any
   input under 16px). Labels are untouched (still the existing 13px). */
#audioNoteSummaryFields textarea.im-input {
    padding: 12px 18px !important;
    font-size: 16px !important;
    line-height: 1.55 !important;
}

/* CRM Deal Create/Edit → "Additional Deal Features" (Design & QS / BOQ
   opt-in toggles). Deliberately subdued — a quiet grouped block near the
   bottom of the form, not a prominent card, so a Basic Deal's form still
   reads as a plain general-purpose CRM form. Reuses the existing
   .cds-toggle-row checkbox-row pattern (see CommercialDocumentSettings)
   rather than inventing a new switch control. */
.crm-deal-features {
    margin-top: 6px;
    padding: 14px 16px;
    border: 1px dashed var(--im-color-line);
    border-radius: 12px;
    background: var(--im-color-surface-subtle, #f9fafb);
}

.crm-deal-features__row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 0;
    cursor: pointer;
}

.crm-deal-features__row+.crm-deal-features__row {
    border-top: 1px solid var(--im-color-line);
}

.crm-deal-features__row input[type="checkbox"] {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    margin-top: 2px;
}

.crm-deal-features__row span {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 13px;
    color: var(--im-color-text, #344054);
}

.crm-deal-features__row small {
    color: var(--im-color-text-muted, #667085);
    font-weight: 400;
}

/* CRM Meeting workflow generalisation (Create/Edit Meeting form section
   headings, Deal Meetings tab list cards + filter chips, Meeting Notes
   subheading, inline date field) -- reuses existing crm-card/crm-form-grid/
   crm-status/site-visit-* visual language, no new component system. */
.crm-form-section-title {
    margin: 22px 0 10px;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--im-color-text-soft, #6b7280);
}

.crm-form-section-title:first-of-type {
    margin-top: 4px;
}

/* Add/Edit Deal — section structure inside the single .crm-card container
   (task explicitly wants ONE main card, not a card-per-section). Reuses
   .crm-card (white/border/radius/shadow) and .crm-form-grid (2-col field
   grid) as-is; these classes only add the section dividers, header
   icon+help row, workflow-option cards, and the action row. Scoped under
   .crm-deal-form so nothing here leaks into other CRM forms. */
.crm-deal-form {
    display: block;
}

.crm-deal-form__section+.crm-deal-form__section {
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid var(--im-color-line);
}

.crm-deal-form__section-header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 16px;
}

.crm-deal-form__section-icon {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    font-size: 1rem;
    background: var(--im-color-primary-soft);
    color: var(--im-color-primary);
}

.crm-deal-form__section-header .crm-form-section-title {
    margin: 0;
}

.crm-deal-form__section-help {
    margin: 3px 0 0;
    color: var(--im-color-text-soft);
    font-size: .8125rem;
}

/* Workflow Options — replaces the old plain dashed checklist
   (.crm-deal-features) with selectable cards. Still a plain checkbox +
   label under the hood; :has() only styles the card, it never hides or
   replaces the native input, so keyboard/label click/screen-reader
   behaviour is unchanged. */
.crm-deal-workflow-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.crm-deal-workflow-option {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid var(--im-color-line);
    border-radius: 14px;
    background: var(--im-color-surface);
    cursor: pointer;
    transition: border-color .12s ease, background-color .12s ease;
}

.crm-deal-workflow-option:hover {
    border-color: var(--im-color-primary);
}

.crm-deal-workflow-option:has(input:checked) {
    border-color: var(--im-color-primary);
    background: var(--im-color-primary-soft);
}

.crm-deal-workflow-option input[type="checkbox"] {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin-top: 2px;
}

.crm-deal-workflow-option__icon {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    display: grid;
    place-items: center;
    font-size: .9rem;
    background: var(--im-color-surface-muted);
    color: var(--im-color-primary);
}

.crm-deal-workflow-option__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.crm-deal-workflow-option__body strong {
    font-size: .875rem;
    color: var(--im-color-text);
}

.crm-deal-workflow-option__body small {
    color: var(--im-color-text-soft);
    font-weight: 400;
    line-height: 1.4;
}

.crm-deal-form__actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid var(--im-color-line);
}

@media (max-width: 720px) {
    .crm-deal-workflow-grid {
        grid-template-columns: 1fr;
    }
}

.site-visit-progress--simple .site-visit-progress__action {
    padding-top: 0;
    border-top: none;
}

.site-visit-report-subheading {
    margin: 4px 0 12px;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--im-color-text-soft, #6b7280);
}

.site-visit-report-field--inline {
    max-width: 220px;
}

.crm-meeting-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}

.crm-meeting-filters__chip {
    padding: 5px 14px;
    border-radius: var(--im-radius-pill, 999px);
    border: 1px solid var(--im-color-line);
    background: var(--im-color-surface);
    color: var(--im-color-text-soft, #6b7280);
    font-size: .8rem;
    font-weight: 600;
    cursor: pointer;
}

.crm-meeting-filters__chip.is-active {
    background: var(--im-color-primary);
    border-color: var(--im-color-primary);
    color: #fff;
}

.crm-meeting-card {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding: 13px 0;
    border-bottom: 1px solid var(--im-color-line);
    text-decoration: none;
    color: inherit;
}

.crm-meeting-card:last-child {
    border-bottom: none;
}

.crm-meeting-card:hover .crm-meeting-card__subject {
    text-decoration: underline;
}

.crm-meeting-card--cancelled {
    opacity: .6;
}

.crm-meeting-card__main {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.crm-meeting-card__type {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--im-color-primary);
}

.crm-meeting-card__subject {
    font-size: .95rem;
    color: var(--im-color-text);
}

.crm-meeting-card__meta {
    font-size: .8rem;
    color: var(--im-color-text-soft, #6b7280);
}

.crm-meeting-card__outcome {
    margin-top: 2px;
    font-size: .8rem;
    color: var(--im-color-success-ink, #15803d);
}

/* Deal Overview -> Next Actions real CrmTask cards (KUNOS CRM DEAL TASK
   WORKFLOW). Same row-card language as .crm-meeting-card above, extended
   with an actions column since a task is actionable, not just a link. */
.crm-task-list {
    display: flex;
    flex-direction: column;
}

.crm-task-card {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding: 13px 0;
    border-bottom: 1px solid var(--im-color-line);
}

.crm-task-card:last-child {
    border-bottom: none;
}

.crm-task-card__main {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.crm-task-card__main>small {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--im-color-primary);
}

.crm-task-card__main>strong {
    font-size: .95rem;
    color: var(--im-color-text);
    font-weight: 600;
}

.crm-task-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    font-size: .8rem;
    color: var(--im-color-text-soft, #6b7280);
}

.crm-task-card__meta span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.crm-task-card__actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

@media (max-width: 575px) {
    .crm-task-card {
        flex-direction: column;
    }

    .crm-task-card__actions {
        width: 100%;
    }

    .crm-task-card__actions .im-btn {
        flex: 1 1 auto;
        justify-content: center;
    }
}

/* Edit Deal → "Change Pipeline" panel (deals/form.blade.php). Reuses the
   same subdued bordered-box language as .crm-deal-features -- an
   infrequent, deliberate action, not a prominent control. */
.crm-change-pipeline-panel {
    margin-top: 10px;
    padding: 14px 16px;
    border: 1px dashed var(--im-color-line);
    border-radius: 12px;
    background: var(--im-color-surface-subtle, #f9fafb);
}

/* Logistics Reports page — web preview redesign only (PDF is untouched,
   its own template/CSS lives in reports/pdf.blade.php and is never
   referenced by any of the selectors below). Reuses .log-kpi-card/
   .log-dashboard-kpis--four/.log-badge-status-x/.log-empty-state
   wholesale. Table structure itself was migrated to reuse .im-table-
   -clean-wrap/.im-table.is-compact — the SAME classes Inventory's own
   item list uses (real structure reuse: table-responsive im-table-
   -clean-wrap wraps im-table is-compact in the Blade now, not just a
   CSS patch on the old bespoke .log-report-table look) — so header
   background/typography, row padding/separators, and the outer rounded
   container all come directly from that shared system, the same way
   Routes' own table was migrated earlier. Only genuinely report-
   specific needs remain scoped under .log-report-* below: numeric
   right-alignment, the integrated Grand Total row (.im-table has no
   tfoot opinion of its own), and the dense Trip/Toll Details column
   widths. */
.log-reports-page .log-report-filters {
    padding: 16px 18px 14px;
    margin-bottom: 24px;
}

.log-report-filters__title {
    font-size: 14px;
    font-weight: 800;
    color: #1f2430;
    margin: 0 0 12px;
}

.log-report-filter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
}

.log-report-filter-grid label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.log-report-filter-grid label>span {
    font-size: 11px;
    font-weight: 700;
    color: #59657a;
}

.log-report-filter-grid .im-input,
.log-report-filter-grid .im-select {
    height: 42px;
}

.log-report-filter-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
}

/* Content rhythm after the KPI row: KPI cards -> "Showing…" context line
   -> tabs -> table, each get their own breathing room rather than
   sitting flush against each other. */
.log-report-context {
    font-size: 12.5px;
    color: #667085;
    margin: 20px 0 14px;
}

/* The site-wide "#main, .im-page { overflow-x: hidden !important }"
   containment rule (added to stop other pages' content escaping
   horizontally) has a CSS side effect: per the overflow spec, pairing
   a non-visible overflow-x with a visible overflow-y forces the
   overflow-y used value to auto too, which is what was rendering an
   unwanted vertical scrollbar next to the report tabs/table even
   though nothing on this page is genuinely taller than its content —
   the report tables already contain their own horizontal scroll via
   .table-responsive (overflow-x: auto), so this page never actually
   needs the outer horizontal clip. Scoped to the reports page only
   (via :has(), already used elsewhere in this file for the same kind
   of page-scoped override) so no other page's overflow behaviour
   changes. */
#main:has(.log-reports-page) {
    overflow-x: visible !important;
    overflow-y: visible !important;
}

.log-reports-page {
    overflow-x: visible !important;
    overflow-y: visible !important;
}

.log-report-tabs-wrap {
    margin-bottom: 0;
}

.log-report-tabs.nav-tabs {
    border-bottom: 1px solid #e6e9f2;
    gap: 4px;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 14px;
}

.log-report-tabs.nav-tabs .nav-link {
    border: 0;
    border-bottom: 2.5px solid transparent;
    border-radius: 0;
    padding: 11px 16px;
    font-size: 13px;
    font-weight: 700;
    color: #667085;
    white-space: nowrap;
}

.log-report-tabs.nav-tabs .nav-link:hover {
    color: #4545c6;
    border-color: #dcdcf7;
}

.log-report-tabs.nav-tabs .nav-link.active {
    color: #4545c6;
    border-color: #4545c6;
    background: transparent;
}

/* The old wrapping "card" (.log-report-tab-content: its own border +
   bottom-only radius) is gone — .im-table-clean-wrap is now each
   table's OWN single rounded container, sitting directly below the tab
   bar with normal spacing, never a second panel wrapping the panel. */
.log-report-tab-content {
    padding: 0;
}

.log-report-tab-content>.tab-pane {
    margin-top: 14px;
}

.log-report-tab-content>.tab-pane:first-child {
    margin-top: 0;
}

/* #main-prefixed selectors: a global "#main table td" default (ID
   selector + !important, specificity 1,0,2) otherwise silently
   overrides .im-table's own font-size/padding — confirmed this same
   rule already silently overrides .log-schedule-table on the live
   Deliveries page too, an unrelated existing condition left exactly
   as-is. Prefixing with #main (a real ancestor ID already on every page
   using this layout) matches that rule's ID term while adding the class
   term, so it wins on specificity without needing !important or
   touching the global rule or .im-table's own base styling elsewhere. */
#main .log-report-table th.text-end,
#main .log-report-table td.text-end,
#main .log-report-table tfoot th.text-end {
    text-align: right;
}

/* Grand Total: stays the table's own tfoot row (same background/width/
   structure as the body), not a separate floating block — just a
   stronger weight and a subtle accent divider on top of it. */
#main .log-report-table tfoot th {
    padding: 14px 16px;
    font-size: 14px;
    font-weight: 800;
    color: #1f2430;
    background: #f7f8fc;
    border-top: 2px solid #6d6df0;
    text-align: left;
}

/* table-layout:fixed makes every column width below authoritative
   regardless of content — without it, auto layout stretches every
   column (even short ones like Date/Toll) to fill 100% the moment ANY
   column (Driver/Route) needs more than its "fair share", which is
   exactly what pushed Status out of view. Widths below are sized from
   this table's own actual rendered content (measured directly, not
   guessed) plus a small buffer, so Trip/Date/Vehicle/Distance/Toll/
   Status never wrap or truncate. Only Driver and Route carry long,
   variable-length text — those two get a width + 2-line clamp; Route is
   left as the one flexible column so the table still reads as 100%
   wide. If a filtered result set still needs more room than the
   viewport has, .im-table-clean-wrap's own .table-responsive scrolls
   just the table, never the page. */
.log-report-nowrap {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* min-width stops the fixed-width columns above from shrinking to fit a
   narrow viewport (which is what caused overlapping/illegible text on
   mobile) — below this width the table now scrolls horizontally inside
   its own .table-responsive instead, exactly the "contained scroll" the
   responsive spec calls for. */
/* Column widths below account for the site-wide #main table tbody td
   { padding: 22px 24px !important } rule (48px of horizontal padding
   per cell, same rule Inventory's own table is subject to) — sized to
   fit real content (trip codes, dates, RM amounts) at that padding
   without truncating in normal cases; text-overflow: ellipsis on
   .log-report-nowrap remains only as a safety net for outliers. */
.log-report-table--trips {
    table-layout: fixed;
    min-width: 1260px;
}

#main .log-report-table--trips th:nth-child(1),
#main .log-report-table--trips td:nth-child(1) {
    width: 190px;
}

#main .log-report-table--trips th:nth-child(2),
#main .log-report-table--trips td:nth-child(2) {
    width: 140px;
}

#main .log-report-table--trips th:last-child,
#main .log-report-table--trips td:last-child {
    width: 140px;
}

#main .log-report-table--trips th:nth-last-child(2),
#main .log-report-table--trips td:nth-last-child(2) {
    width: 115px;
}

#main .log-report-table--trips th:nth-last-child(3),
#main .log-report-table--trips td:nth-last-child(3) {
    width: 110px;
}

/* Toll Details needs materially more room than Trip Details for the
   same driver/reference columns (longer "Reference / Transaction No."
   header, full driver names next to a full toll description) — sized
   as its own table rather than sharing --trips' narrower widths. */
.log-report-table--tolls {
    table-layout: fixed;
    min-width: 1170px;
}

#main .log-report-table--tolls th:nth-child(1),
#main .log-report-table--tolls td:nth-child(1) {
    width: 158px;
}

#main .log-report-table--tolls th:nth-child(2),
#main .log-report-table--tolls td:nth-child(2) {
    width: 125px;
}

#main .log-report-table--tolls th:nth-child(4),
#main .log-report-table--tolls td:nth-child(4) {
    width: 340px;
}

#main .log-report-table--tolls th:nth-child(5),
#main .log-report-table--tolls td:nth-child(5) {
    width: 205px;
}

#main .log-report-table--tolls th:nth-child(5) {
    white-space: normal;
    line-height: 1.3;
}

#main .log-report-table--tolls th:last-child,
#main .log-report-table--tolls td:last-child {
    width: 105px;
}

/* Compact density override: the site-wide "#main table td/th" rule
   (padding: 22px/20px, font-size: 14px, font-weight: 700/950, all
   !important) makes every table on the site fairly roomy by default —
   fine for most pages, but Toll Details needs the tighter, business-
   report density this task asks for. Padding stays overridden here;
   font-size now matches the global 14px Kunos table standard rather
   than shrinking further. Needs its own !important to outrank that
   global rule; scoped to .log-report-table--tolls only so Overview/
   Trip Details/Distance Details keep their current density unchanged. */
#main .log-report-table--tolls thead th {
    padding: 13px 16px !important;
    font-size: 14px !important;
    font-weight: 800 !important;
}

#main .log-report-table--tolls tbody td {
    padding: 11px 16px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
}

#main .log-report-table--tolls tfoot th {
    padding: 11px 16px !important;
    font-size: 14px !important;
    font-weight: 800 !important;
}

/* Single-line ellipsis truncation, not -webkit-line-clamp: setting
   display:-webkit-box directly on a td/th pulls it out of the table's
   own column layout model in Chromium (it stops behaving like a table
   cell), which was overlapping this column onto its neighbour. */
#main .log-report-vehicle-cell {
    width: 120px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#main .log-report-route-cell {
    width: 240px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#main .log-report-driver-cell {
    width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Toll Details' driver column is wider than Trip Details' (see table
   min-widths above) — override the shared 200px base for this table
   only; two-class selector outweighs the one-class rule above without
   needing !important. */
#main .log-report-table--tolls .log-report-driver-cell {
    width: 235px;
}

.log-report-empty-cell {
    text-align: center;
    color: #8792a7;
    padding: 22px 10px;
    font-size: 12.5px;
}

.log-report-empty-inline {
    color: #8792a7;
    font-size: 12.5px;
    padding: 10px 2px;
    margin: 0;
}

.log-report-driver-group {
    margin-bottom: 18px;
}

.log-report-driver-group:last-child {
    margin-bottom: 0;
}

.log-report-driver-group__header {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    padding: 4px 2px 8px;
    border-bottom: 1px solid #e6e9f2;
    margin-bottom: 8px;
}

.log-report-driver-group__header strong {
    font-size: 13px;
    color: #1f2430;
}

.log-report-driver-group__header span {
    font-size: 11.5px;
    color: #7b869b;
}

.log-report-toll-subrow td {
    padding: 5px 10px 5px 10px;
    border-bottom: 1px solid #edf0f5;
    background: #fafaff;
    font-size: 11.5px;
    color: #5a6274;
}

.log-report-toll-subrow td:nth-child(4) {
    padding-left: 24px;
}

/* Grouped toll rows (2nd+ toll for the same trip): the blank Trip/
   Date/Driver cells get only a subtle tint, no border — a border-left
   on an otherwise-empty cell rendered as a floating vertical line
   fragment with nothing else in the cell to anchor it visually. */
.log-report-toll-grouped td {
    background: #fafaff;
}

@media (max-width: 991.98px) {
    .log-reports-page .log-dashboard-kpis--four {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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

@media (max-width: 575.98px) {
    .log-report-filter-grid {
        grid-template-columns: 1fr;
    }

    .log-report-filter-actions {
        flex-wrap: wrap;
    }

    .log-report-filter-actions .im-btn,
    .log-report-filter-actions .log-reset-link {
        flex: 1;
        text-align: center;
    }

    .log-report-route-cell {
        max-width: 160px;
    }
}

/* ---- Phase 1: management workspace — outer tabs, header actions,
   integrity notice, empty states, percentage bars. Reuses .log-dashboard-
   -kpis / .log-kpi-card / .log-badge-status-x / .log-empty-state /
   .im-table wholesale; only genuinely new chrome lives below. The
   pre-existing .log-report-tabs (Distance & Toll's own inner tab set) is
   untouched — these are a separate, higher-level tab bar. ---- */
.log-mgmt-tabs.nav-tabs {
    border-bottom: 2px solid #e6e9f2;
    gap: 4px;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 20px;
}

.log-mgmt-tabs.nav-tabs .nav-link {
    border: 0;
    border-bottom: 3px solid transparent;
    border-radius: 0;
    padding: 12px 18px;
    font-size: 13.5px;
    font-weight: 800;
    color: #667085;
    white-space: nowrap;
}

.log-mgmt-tabs.nav-tabs .nav-link:hover {
    color: #4545c6;
}

.log-mgmt-tabs.nav-tabs .nav-link.active {
    color: #4545c6;
    border-color: #4545c6;
    background: transparent;
}

.log-report-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.log-report-csv-dropdown {
    position: relative;
    display: inline-block;
}

.log-report-csv-menu {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 210px;
    max-height: 280px;
    overflow-y: auto;
    background: #ffffff;
    border: 1px solid #e6e9f2;
    border-radius: 10px;
    box-shadow: 0 12px 28px rgba(30, 41, 59, 0.14);
    padding: 6px;
    z-index: 60;
}

.log-report-csv-menu.is-open {
    display: block;
}

.log-report-csv-menu a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 7px;
    font-size: 12.5px;
    font-weight: 600;
    color: #1f2430;
    text-decoration: none;
    white-space: nowrap;
}

.log-report-csv-menu a:hover {
    background: #eef0fd;
    color: #4545c6;
}

.log-integrity-notice {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    color: #92400e;
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 12.5px;
    margin-bottom: 18px;
}

.log-integrity-notice i {
    font-size: 15px;
    flex: 0 0 auto;
}

.log-report-empty-note {
    font-size: 12px;
    color: #7b869b;
    margin: 6px 0 14px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.log-report-section-title {
    font-size: 13.5px;
    font-weight: 800;
    color: #1f2430;
    margin: 22px 0 12px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.log-report-section-title:first-child {
    margin-top: 0;
}

.log-report-snapshot-tag {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 3px 9px;
    border-radius: 999px;
    background: #f1f5f9;
    color: #667085;
}

.log-bar-cell {
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.log-bar {
    width: 70px;
    height: 6px;
    background: #eef0f6;
    border-radius: 999px;
    overflow: hidden;
}

.log-bar__fill {
    height: 100%;
    background: #4545c6;
    border-radius: 999px;
}

.log-report-gateway-note {
    font-size: 12px;
    color: #7b869b;
    margin: 0 0 16px;
}

@media (max-width: 575.98px) {
    .log-mgmt-tabs.nav-tabs .nav-link {
        padding: 10px 13px;
        font-size: 12.5px;
    }

    .log-report-csv-menu {
        right: auto;
        left: 0;
    }
}

/* Logistics Dashboard redesign — reuses .log-panel/.log-panel-header/
   .log-kpi-card/.log-badge/.log-empty-state wholesale; only the four-KPI
   grid variant, the equal-width secondary row, Attention Center rows,
   Route Status / Fleet Availability stat rows, and the flat list sections
   (Trips Awaiting Confirmation / Recent Activity) are genuinely new. */
.log-dashboard-kpis--four {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.log-dashboard-secondary--equal {
    grid-template-columns: 1fr 1fr;
}

.log-attention-center {
    padding: 0;
}

.log-attention-rows {
    display: flex;
    flex-direction: column;
}

.log-attention-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    border-bottom: 1px solid #edf0f5;
    font-size: 12.5px;
    color: #344054;
    text-decoration: none;
}

.log-attention-row:last-child {
    border-bottom: none;
}

.log-attention-row i {
    color: #8993a5;
    font-size: 14px;
}

.log-attention-row span {
    flex: 1;
}

.log-attention-row strong {
    font-size: 13px;
    font-weight: 800;
}

.log-attention-row--warning strong {
    color: #b45309;
}

.log-attention-row--warning i {
    color: #f59e0b;
}

.log-status-rows {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 8px 20px 16px;
}

.log-status-rows>div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid #edf0f5;
}

.log-status-rows>div:last-child {
    border-bottom: none;
}

.log-status-rows dt {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    color: #59657a;
    font-weight: 600;
}

.log-status-rows dt i {
    color: #8993a5;
}

.log-status-rows dd {
    margin: 0;
    font-size: 14px;
    font-weight: 800;
    color: #172033;
}

.log-status-rows--compact {
    padding: 4px 0 0;
}

.log-status-rows--compact dt {
    font-size: 11.5px;
}

.log-status-rows--compact dd {
    font-size: 13px;
}

.log-fleet-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    padding: 4px 20px 16px;
}

.log-fleet-col__label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: #8993a5;
    padding-top: 12px;
}

.log-fleet-link {
    display: inline-block;
    margin-top: 8px;
    font-size: 11.5px;
    font-weight: 700;
    color: #4545c6;
    text-decoration: none;
}

.log-panel--flat {
    padding: 0;
    overflow: hidden;
    margin-bottom: 20px;
}

.log-flat-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    border-bottom: 1px solid #edf0f5;
    font-size: 12.5px;
    color: #344054;
    text-decoration: none;
}

.log-flat-row:last-child {
    border-bottom: none;
}

.log-flat-row strong {
    display: block;
    color: #172033;
}

.log-flat-row span {
    display: block;
    color: #7b869b;
    font-size: 11.5px;
}

.log-flat-row .log-badge {
    margin-left: auto;
    white-space: nowrap;
}

.log-flat-row--activity {
    gap: 10px;
}

.log-activity-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #4545c6;
    flex: 0 0 auto;
}

.log-flat-empty {
    margin: 0;
    padding: 16px 20px;
    font-size: 12.5px;
    color: #7b869b;
}

@media (max-width: 991.98px) {
    .log-dashboard-secondary--equal {
        grid-template-columns: 1fr;
    }

    .log-fleet-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }
}

@media (max-width: 767.98px) {
    .log-dashboard-kpis--four {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575.98px) {
    .log-flat-row:not(.log-flat-row--activity) {
        flex-wrap: wrap;
        align-items: flex-start;
    }

    .log-flat-row:not(.log-flat-row--activity) strong,
    .log-flat-row:not(.log-flat-row--activity) span:not(.log-badge) {
        flex: 1 1 100%;
    }

    .log-flat-row:not(.log-flat-row--activity) .log-badge {
        margin-left: 0;
    }
}

/* Create Delivery — Delivery Lines row cleanup.
   The row is an existing CSS grid (.log-delivery-line-row, defined
   earlier in this file) whose columns were bottom-aligned
   (align-items: end). That worked while every column was the same
   height, but the Quantity column later gained an extra availability
   line beneath its input that no other column has — bottom-aligning a
   taller Quantity cell against shorter Item Search/SKU/Unit cells
   pushed THEIR labels/inputs down out of alignment, which is what
   produced the reported label/control misalignment. Top-aligning
   instead keeps every label's baseline and every input's row
   consistent regardless of what optionally hangs below one column. */
.log-delivery-line-row {
    align-items: start;
}

/* The delete button is no longer a bare grid child — it's wrapped in
   .log-line-delete with an invisible spacer matching the OTHER
   columns' label height, so the button sits on the same input row as
   Item Search/SKU/Unit/Quantity rather than at the very top of the
   grid cell. */
.log-line-delete {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.log-line-delete>span {
    font-size: 11px;
    font-weight: 700;
    visibility: hidden;
}

.log-line-delete .log-remove-line {
    height: 42px;
}

.log-line-availability {
    display: block;
    margin-top: 4px;
    font-size: 11px;
    line-height: 1.3;
}

@media (max-width: 575.98px) {

    /* Single-column stacking already places Delete on its own full-width
       row here — the alignment spacer above the button is only needed
       when Delete shares a row with the other controls. */
    .log-line-delete>span {
        display: none;
    }
}

/* Routes Table — Match Existing Inventory Table Design.
   The table itself now uses .im-table.is-compact inside .im-table-clean-
   -wrap (see routes/index.blade.php), the SAME cross-module wrapper
   Inventory/FormBuilder/Projects already use — one rounded outer
   container (border/radius/shadow/clipping all live on the wrapper),
   zero border/radius/shadow of its own on the table (.im-table-clean-
   -wrap .im-table, defined earlier in this file). .log-routes-table is
   kept purely as a scoping hook for the two column-width rules below —
   it carries no base table styling of its own any more, so nothing here
   needs to "correct" a borrowed Deliveries-shaped rule the way the
   previous .log-schedule-table-based version did.
   Route column: RT-2026-0136 needs real room to stay on one line —
   given the SAME min-width Deliveries reserves for its own identifier
   column. white-space: nowrap on .log-ref is a second, explicit line of
   defence, scoped to Routes only so Deliveries' own .log-ref is
   untouched.
   Status column: a status badge like "Needs Attention" needs more than
   a narrow numeric-column width. */
/* .im-table itself has no opinion on stacking a cell's own primary/
   secondary text onto separate lines (Inventory's rows build that with
   its own bos-erp-* wrapper divs instead) — route-row.blade.php's cells
   are bare <strong>/<small> siblings and relied on the OLD
   .log-schedule-table td>small,td>strong{display:block} rule for the
   stacked look. Restored here, scoped to Routes only. */
.log-routes-table td>strong,
.log-routes-table td>small {
    display: block;
}

.log-routes-table td>small {
    font-size: 11px;
    color: #64748b;
    margin-top: 2px;
    line-height: 1.35;
}

/* Column widths: .im-table itself has no per-column width opinion
   (table-layout:auto, purely content-driven — the old .log-schedule-
   -table version incidentally kept columns sensibly sized via width
   rules that were actually written for Deliveries' own, different
   column layout). table-layout:fixed + explicit widths here instead:
   auto sizing means the table's real width is decided by whichever ROW
   across the whole page happens to have the longest content in any one
   column (a long driver name, a longer duration label on some other
   route) — capping min-width alone can't prevent that from still
   pushing the table past its container on a normal desktop viewport.
   Fixed widths guarantee the table never exceeds .im-table-clean-wrap
   regardless of content; text-overflow:ellipsis on the columns most
   likely to run long (Vehicle & Driver's driver name) truncates
   gracefully instead — explicitly sanctioned by this task's own "long
   driver names may truncate gracefully if necessary". Any real overflow
   at narrower (tablet) widths still scrolls inside .im-table-clean-
   -wrap's own .table-responsive, never the whole page. */
.log-routes-table {
    table-layout: fixed;
}

/* Fixed layout only caps a COLUMN's width — it never clips an
   individual cell's own overflowing text unless the cell says so
   itself, so "25 Aug 2026" without this was bleeding visually into the
   next cell instead of wrapping. overflow:hidden here is the general
   safety net; the columns that need their text to actually stay on one
   line (never wrap to two) add white-space:nowrap on top of it. */
.log-routes-table td {
    overflow: hidden;
}

.log-routes-table th:nth-child(1),
.log-routes-table td:nth-child(1) {
    width: 134px;
}

.log-routes-table .log-ref {
    white-space: nowrap;
}

.log-routes-table th:nth-child(2),
.log-routes-table td:nth-child(2) {
    width: 135px;
}

.log-routes-table td:nth-child(2)>strong,
.log-routes-table td:nth-child(2)>small {
    white-space: nowrap;
}

/* Route Summary: 102px was only ever wide enough for the shortest case
   ("1 planned") — anything with an excluded count ("1 planned · 1
   excluded") had nothing left but forced nowrap + overflow:hidden to
   silently clip it mid-word. Widened, and the primary line (strong) is
   now allowed to wrap onto a genuine second line only when it doesn't
   fit — the common short case still renders on one line, the longer
   case wraps instead of being cut off. The secondary line (small)
   stays single-line/compact, matching every other column's small text. */
.log-routes-table th:nth-child(3),
.log-routes-table td:nth-child(3) {
    width: 150px;
}

.log-routes-table td:nth-child(3)>strong {
    white-space: normal;
    line-height: 1.3;
}

.log-routes-table td:nth-child(3)>small {
    white-space: nowrap;
}

.log-routes-table th:nth-child(4),
.log-routes-table td:nth-child(4) {
    width: 170px;
}

.log-routes-table td:nth-child(4)>strong,
.log-routes-table td:nth-child(4)>small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.log-routes-table th:nth-child(5),
.log-routes-table td:nth-child(5) {
    width: 74px;
}

.log-routes-table td:nth-child(5)>strong,
.log-routes-table td:nth-child(5)>small {
    white-space: nowrap;
}

.log-routes-table th:nth-child(6),
.log-routes-table td:nth-child(6) {
    width: 160px;
    text-align: left;
}

.log-routes-table td:nth-child(6) .log-badge {
    overflow: visible;
    white-space: nowrap;
}

.log-routes-table th:nth-child(7),
.log-routes-table td:nth-child(7) {
    width: 112px;
}

/* Sticky Action Column / Half-Background audit: the action column is
   NOT position:sticky anywhere in this codebase (audited — no sticky
   rule targets .log-actions-cell/.log-routes-table/td:last-child) and
   no scroll fade/gradient exists here either. The real cause: this
   column was fixed at 165px while its actual content (the "Review
   Issues"/"View Route" button + the 3-dot menu button together) needs
   ~240px — combined with `overflow: visible` (added so the button
   wouldn't be CLIPPED), the 3-dot button was rendering entirely past
   this column's own painted white background, into whatever sits
   beyond the table's right edge — exactly the "half one background,
   half shows something else" symptom. Fixed at the root: the column is
   now sized to its own real content, so nothing needs to overflow past
   its own cell in the first place. */
.log-routes-table th:nth-child(8),
.log-routes-table td:nth-child(8) {
    width: 245px;
}

.log-routes-table td.log-actions-cell {
    text-align: right;
    white-space: nowrap;
}

.log-routes-table td.log-actions-cell,
.log-routes-table th:nth-child(8) {
    background: #ffffff;
}

.log-routes-table thead th:nth-child(8) {
    background: #eaf0ff;
}

/* Route Versions (View Versions page) — Match Inventory Table audit:
   this table previously used Borang's own .borang-history-table inside
   a plain .im-card (a different module's table system, not the shared
   Kunos one) — migrated to .im-table-clean-wrap/.im-table.is-compact
   in the Blade, same as Inventory/Routes/Reports. Only genuinely
   version-specific needs are scoped here: column widths (8 columns,
   same table-layout:fixed technique already proven for Routes/Reports),
   and compact density — the site-wide "#main table td/th
   {padding:22px 24px/20px 24px!important}" rule otherwise overrides
   .im-table.is-compact's own intended density on every table it
   touches (confirmed repeatedly elsewhere in this file), so this needs
   its own !important override to actually be compact, exactly like
   .log-report-table--tolls already does. */
.log-route-versions-table {
    table-layout: fixed;
    min-width: 1050px;
}

#main .log-route-versions-table thead th {
    padding: 13px 16px !important;
    font-size: 14px !important;
    font-weight: 800 !important;
}

#main .log-route-versions-table tbody td {
    padding: 11px 16px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.log-route-versions-table th:nth-child(1),
.log-route-versions-table td:nth-child(1) {
    width: 165px;
}

.log-route-versions-table th:nth-child(2),
.log-route-versions-table td:nth-child(2) {
    width: 145px;
}

.log-route-versions-table th:nth-child(3),
.log-route-versions-table td:nth-child(3) {
    width: 150px;
}

.log-route-versions-table th:nth-child(4),
.log-route-versions-table td:nth-child(4) {
    width: 90px;
}

.log-route-versions-table th:nth-child(5),
.log-route-versions-table td:nth-child(5) {
    width: 90px;
}

.log-route-versions-table th:nth-child(6),
.log-route-versions-table td:nth-child(6) {
    width: 105px;
}

.log-route-versions-table th:nth-child(7),
.log-route-versions-table td:nth-child(7) {
    width: 140px;
}

.log-route-versions-table th:nth-child(8),
.log-route-versions-table td:nth-child(8) {
    width: 175px;
}

/* Version column: "v3" + the Current pill need to sit on one line
   without either being clipped — the only cell in this table that
   isn't plain single-line text, so it opts out of the shared nowrap
   rule above instead of needing a wider column than the identifier
   itself warrants. */
.log-route-versions-table td.log-route-versions-table__version {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
}

.log-route-versions-table td.log-route-versions-table__version strong {
    margin-right: 6px;
    font-size: inherit;
}

.log-route-versions-table .log-empty-note {
    white-space: normal;
    text-align: center;
    padding: 22px 16px;
    color: #8792a7;
}

.log-routes-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

.log-routes-pagination__summary {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    font-size: 12.5px;
    color: #667085;
}

.log-routes-pagination__per-page {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    color: #667085;
}

.log-routes-pagination__per-page select {
    height: 32px;
    padding: 0 8px;
    font-size: 12.5px;
    width: auto;
}

.log-routes-pagination .pagination {
    margin: 0;
    justify-content: flex-end;
}

@media (max-width: 767.98px) {
    .log-routes-pagination {
        justify-content: center;
    }

    .log-routes-pagination__summary {
        justify-content: center;
        width: 100%;
    }

    .log-routes-pagination .pagination {
        width: 100%;
        justify-content: center;
    }
}

/* =========================================================================
   Kunos Logistics — Delivery Outcome ("Record Outcome") drawer redesign.
   Visual/layout only — business rules, routes, and field names are
   unchanged (see trips/stop-outcome-drawer.blade.php).

   Shell width: this drawer previously reused the same 1080px shell as the
   Create Manual Delivery form (.log-delivery-drawer-shell), which is why
   it read as far too wide/empty for its actual content. It now gets its
   own, much narrower shell class (~640px desktop), applied instead of
   that one in partials/drawer.blade.php's mode==='outcome' branch.
   Everything below it is scoped to either that shell class or the
   .log-outcome-drawer fragment root so no other Logistics drawer
   (Create Manual Delivery, Edit Delivery, Resolve Quantity, Verify
   Location) is affected. --------------------------------------------- */
.bos-verify-drawer.log-outcome-drawer-shell {
    width: min(640px, 100vw);
    max-width: min(640px, 100vw);
    height: 100dvh;
}

.log-outcome-drawer-shell .log-drawer-shell__header {
    padding: 20px 24px;
}

.log-outcome-drawer-shell .im-drawer-title {
    font-size: 1.25rem;
}

@media (max-width: 1024px) {
    .bos-verify-drawer.log-outcome-drawer-shell {
        width: min(600px, 94vw);
        max-width: min(600px, 94vw);
    }
}

@media (max-width: 767.98px) {
    .bos-verify-drawer.log-outcome-drawer-shell {
        width: 100vw;
        max-width: 100vw;
    }

    .log-outcome-drawer-shell .log-drawer-shell__header {
        padding: 16px 18px;
    }
}

/* ---- Fragment body: compact card stack instead of one big form section.
   Reuses .log-delivery-edit-drawer's existing form/body/footer grid
   (scroll body + sticky footer row) — only the spacing/section styling
   below is new, scoped under .log-outcome-drawer so the shared grid
   mechanics stay untouched for Edit Delivery/Resolve Quantity. ---- */
.log-outcome-drawer .log-delivery-drawer__body {
    padding: 20px;
    gap: 16px;
}

@media (max-width: 575.98px) {
    .log-outcome-drawer .log-delivery-drawer__body {
        padding: 16px;
        gap: 14px;
    }
}

.log-outcome-context {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 13px;
    font-weight: 700;
    color: #64748b;
}

.log-outcome-context__dot {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #cbd5e1;
    flex: 0 0 auto;
}

.log-outcome-card {
    background: #fff;
    border: 1px solid #e5e8f0;
    border-radius: 18px;
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.log-outcome-card__title {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #8b93a7;
}

/* ---- Delivery / customer summary — compact two-column metadata. ---- */
.log-outcome-meta {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 8px 14px;
    margin: 0;
}

.log-outcome-meta__row {
    display: contents;
}

.log-outcome-meta dt {
    font-size: 13px;
    color: #8b93a7;
    font-weight: 600;
    align-self: center;
}

.log-outcome-meta dd {
    margin: 0;
    font-size: 14px;
    color: #172033;
    font-weight: 700;
    text-align: right;
}

/* ---- Items — one compact card per delivery line, never a bare table. ---- */
.log-outcome-items {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.log-outcome-item {
    background: #f8f9fc;
    border: 1px solid #edf0f6;
    border-radius: 14px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.log-outcome-item__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.log-outcome-item__eyebrow {
    display: block;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #9aa3b5;
    margin-bottom: 2px;
}

.log-outcome-item__name {
    font-size: 14px;
    font-weight: 700;
    color: #172033;
}

.log-outcome-item__sku {
    font-size: 12px;
    color: #8b93a7;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    flex: 0 0 auto;
}

.log-outcome-item__qty {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.log-outcome-item__qty-col {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0;
}

.log-outcome-item__qty-col--remaining {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding-top: 8px;
    border-top: 1px dashed #e2e6ef;
}

.log-outcome-item__qty-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #9aa3b5;
}

.log-outcome-item__qty-value {
    font-size: 14px;
    font-weight: 700;
    color: #1e293b;
    font-variant-numeric: tabular-nums;
}

.log-outcome-item__qty-value--remaining {
    color: #b45309;
}

.log-outcome-item__qty-input-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
}

.log-outcome-item__qty-input.im-input {
    width: 100%;
    max-width: 180px;
    min-height: 40px;
    padding: 8px 12px;
    font-size: 15px;
    font-weight: 700;
}

.log-outcome-item__qty-input.im-input[readonly] {
    background: #f3f4f8;
    color: #64748b;
    cursor: not-allowed;
}

.log-outcome-item__qty-unit {
    font-size: 12px;
    color: #8b93a7;
    font-weight: 600;
    flex: 0 0 auto;
}

/* ---- Outcome selector — 3 status cards, selected state uses the same
   status colours as the rest of Kunos Logistics (success/amber/danger
   tokens already used by .log-badge-execution-*), nowhere else on the
   drawer is coloured. ---- */
.log-outcome-selector {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.log-outcome-option {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 14px 10px;
    border: 1.5px solid #e5e8f0;
    border-radius: 14px;
    background: #fff;
    cursor: pointer;
    text-align: center;
    transition: border-color .12s ease, background-color .12s ease;
}

.log-outcome-option input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}

.log-outcome-option:hover {
    border-color: #cbd5e1;
}

.log-outcome-option__icon {
    font-size: 18px;
    color: #9aa3b5;
    line-height: 1;
}

.log-outcome-option__label {
    font-size: 13px;
    font-weight: 700;
    color: #475569;
}

.log-outcome-option--delivered:has(input:checked) {
    border-color: var(--im-color-success-ink, #047857);
    background: var(--im-color-success-soft, #dcfce7);
}

.log-outcome-option--delivered:has(input:checked) .log-outcome-option__icon,
.log-outcome-option--delivered:has(input:checked) .log-outcome-option__label {
    color: var(--im-color-success-ink, #047857);
}

.log-outcome-option--partial:has(input:checked) {
    border-color: #b45309;
    background: #fef3c7;
}

.log-outcome-option--partial:has(input:checked) .log-outcome-option__icon,
.log-outcome-option--partial:has(input:checked) .log-outcome-option__label {
    color: #b45309;
}

.log-outcome-option--failed:has(input:checked) {
    border-color: var(--im-color-danger-ink, #be123c);
    background: var(--im-color-danger-soft, #ffe4e6);
}

.log-outcome-option--failed:has(input:checked) .log-outcome-option__icon,
.log-outcome-option--failed:has(input:checked) .log-outcome-option__label {
    color: var(--im-color-danger-ink, #be123c);
}

.log-outcome-note {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    margin: 0;
    border-radius: 10px;
    background: var(--im-color-success-soft, #dcfce7);
    color: var(--im-color-success-ink, #047857);
    font-size: 13px;
    font-weight: 600;
}

.log-outcome-note i {
    font-size: 14px;
    flex: 0 0 auto;
}

.log-outcome-drawer .log-outcome-failed {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
}

.log-outcome-drawer .log-outcome-failed label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 12px;
    font-weight: 700;
    color: #59657a;
}

@media (max-width: 575.98px) {
    .log-outcome-selector {
        gap: 8px;
    }

    .log-outcome-option {
        padding: 12px 6px;
    }

    .log-outcome-option__label {
        font-size: 12px;
    }

    .log-outcome-item__qty {
        grid-template-columns: 1fr 1fr;
    }

    .log-outcome-item__qty-input.im-input {
        max-width: none;
        font-size: 16px;
    }

    .log-outcome-drawer select.im-input,
    .log-outcome-drawer textarea.im-input {
        font-size: 16px;
    }

    .log-outcome-drawer .log-delivery-drawer__footer .im-btn {
        min-height: 50px;
    }
}

.log-outcome-required-mark {
    color: var(--im-color-danger-ink, #be123c);
}

/* Bug fix: Failure Reason dropdown (and any other bos-select.js-enhanced
   <select> opened from inside a Kunos Logistics/HR drawer) opened —
   arrow rotated, aria-expanded="true" — but its option list was never
   visible.

   Root cause: bos-select.js portals its custom dropdown panel to <body>
   with position:fixed specifically so it can't be clipped by a drawer's
   own overflow/scroll container, and gives it
   z-index: var(--bos-layer-modal-dropdown, 1095) [line ~36930 above].
   The shared slide-out drawer shell these forms live in
   (.bos-verify-drawer, #log-drawer) sets z-index: 1100 on itself
   [line ~18893 above] — its own stacking context, 5 ABOVE the portaled
   dropdown's, so the drawer's own painted content (the Delivery Outcome
   card) always rendered on top of the fully-populated, correctly
   positioned option list, regardless of DOM order. Confirmed live: all
   9 reasons were present and rendered at the right screen coordinates —
   only the paint order was wrong.

   Fix: raise the dropdown's z-index specifically while a drawer is
   open, scoped to the shared drawer shell (not just Logistics) so the
   same latent bug is fixed everywhere this shell is reused, and without
   touching the global --bos-layer-modal-dropdown value every other
   (non-drawer) modal/dropdown context on the site already relies on.

   Scoping note: #log-drawer itself is NOT a direct child of <body> (it
   sits deep inside <main id="main"> / #app), so a sibling combinator off
   #log-drawer can't reach the dropdown, which bos-select.js appends
   straight to <body>. showDrawer() in partials/drawer.blade.php already
   toggles a `bos-drawer-open` class on <body> itself for the exact
   duration any Kunos drawer is open — using that or the dropdown, which
   IS a genuine descendant of body.bos-drawer-open, so a normal
   descendant selector reliably reaches it regardless of where #log-drawer
   itself lives in the tree. */
body.bos-drawer-open .bos-select-custom-dropdown.bos-select-portal {
    z-index: 1150 !important;
}

/* =========================================================================
   Kunos CRM — Management Reports (crm::reports.index). Reuses
   .crm-metrics-grid/.crm-card/.crm-metric, .crm-tabs-nav/.crm-tab-panel,
   .im-select/.im-input/.im-btn, .crm-table/.crm-table-wrap, and
   .crm-empty-block wherever they already fit — everything below is only
   what those primitives don't already cover (export actions, compact
   filter toolbar, period banner, chart cards, funnel, stage % bar,
   help-note text, scope note). Phase 1.1 replaces the Phase 1 filter
   bar (three stacked full-width rows) with a single compact toolbar —
   see .crm-report-filter-toolbar below.
   ========================================================================= */

/* ---- Header export actions ---- */
.crm-report-export-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.crm-report-export-csv__caret {
    font-size: .5625rem;
    margin-left: 2px;
}

/* ---- Compact filter toolbar — ONE row on desktop instead of three
   stacked full-width selects (Phase 1's own layout). Each field is a
   label+control pair sized to its own content, not the full page
   width. ---- */
.crm-report-filter-toolbar {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 10px 14px;
}

.crm-report-filter-field {
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-size: .6875rem;
    font-weight: 700;
    color: var(--im-color-text-soft);
    text-transform: uppercase;
    letter-spacing: .02em;
}

/* Phase 1.2 fix: the PREVIOUS rules here targeted `.im-select` — the
   original native <select>, which bos-select.js (see partials/drawer's
   own use of the same component) hides at opacity:0/1x1px and replaces
   with a sibling `.bos-select-custom-trigger` button. Since that trigger
   (and its `.bos-select-custom-container` wrapper) is styled
   `width: 100% !important` by the shared component, those rules had
   ZERO visible effect — every trigger rendered at whatever width the
   flex layout happened to compute (~144px), far too narrow for a
   Pipeline name, which is what actually caused the reported "wraps into
   3-4 lines" bug (the dropdown MENU width is itself derived from the
   trigger's rendered width — see bos-select.js placeMenu()). Fixed by
   sizing the LABEL WRAPPER instead: the 100%-wide trigger/container then
   correctly inherit that width via normal cascade, no shared component
   CSS touched. data-bos-menu-min-width on each <select> (see the Blade
   view) is the belt-and-suspenders half of the same fix, using the
   mechanism bos-select.js already exposes for exactly this case. */
.crm-report-filter-field--period {
    flex: 0 0 190px;
}

.crm-report-filter-field--pipeline {
    flex: 0 0 320px;
}

.crm-report-filter-field--salesperson {
    flex: 0 0 260px;
}

.crm-report-filter-field--date .im-input {
    width: 150px;
}

.crm-report-custom-range {
    display: flex;
    gap: 10px;
}

.crm-report-filter-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
}

.crm-report-filter-actions .crm-filter-clear {
    font-size: .8125rem;
    font-weight: 700;
}

/* ---- Reporting period bar — one compact line, not a full-width
   sentence; extra explanation moves to an info-icon tooltip. ---- */
.crm-report-period-banner {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 8px 14px;
    margin-bottom: 14px;
    background: var(--im-color-primary-soft);
    color: var(--im-color-primary);
    border-radius: 10px;
    font-size: .78125rem;
    font-weight: 600;
}

.crm-report-period-banner__sep {
    color: var(--im-color-primary);
    opacity: .5;
}

.crm-report-period-banner__note {
    color: var(--im-color-text-soft);
    font-weight: 500;
}

.crm-report-period-banner__info {
    margin-left: auto;
    cursor: help;
    color: var(--im-color-primary);
    opacity: .7;
}

.crm-report-section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 20px 0 10px;
    font-size: .9375rem;
    font-weight: 800;
    color: var(--im-color-text);
}

.crm-report-section-title:first-child {
    margin-top: 0;
}

.crm-report-snapshot-tag,
.crm-report-period-tag {
    font-size: .6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .02em;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--im-color-success-soft);
    color: var(--im-color-success);
}

.crm-report-period-tag {
    background: var(--im-color-info-soft);
    color: var(--im-color-info);
    text-transform: none;
    letter-spacing: 0;
}

/* ---- Pipeline tab section hierarchy (Phase 1.1: Current Pipeline
   Summary -> Pipeline Breakdown -> Pipeline Health -> Pipeline
   Velocity) — one visible eyebrow-style group heading, then compact
   subsection headings underneath it. ---- */
.crm-report-group-title {
    margin: 28px 0 4px;
    padding-bottom: 6px;
    border-bottom: 2px solid var(--im-color-primary);
    font-size: .8125rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--im-color-primary);
}

.crm-report-group-title:first-of-type {
    margin-top: 22px;
}

.crm-report-subsection-title {
    margin: 14px 0 8px;
    font-size: .8125rem;
    font-weight: 700;
    color: var(--im-color-text);
}

/* ---- KPI grid variants — sized to their EXACT card count (2 or 5) so
   a row never leaves empty grid cells (Phase 1 used the 4-column
   variant for 2- and 5-card rows, leaving visible gaps). ---- */
.crm-metrics-grid--two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.crm-metrics-grid--two .crm-metric {
    min-height: 108px;
}

.crm-metrics-grid--five {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.crm-metrics-grid--five .crm-metric {
    min-height: 100px;
    padding: 14px;
}

.crm-metrics-grid--five .crm-metric__value {
    font-size: 1.375rem;
}

/* The Period Performance row uses the plain 6-column .crm-metrics-grid
   (deliberately — 6 cards fill it exactly, see the "sized to their
   EXACT card count" note above) — at 6 columns the base
   .crm-metric__value--money clamp (up to 1.45rem) is too wide for a
   money value like "RM921.20" and clips against the card edge. */
.crm-metrics-grid:not(.crm-metrics-grid--two):not(.crm-metrics-grid--four):not(.crm-metrics-grid--five) .crm-metric__value--money {
    font-size: 1.125rem;
    overflow-wrap: break-word;
}

/* ---- Overview charts — balanced 5/3/4 (of 12) desktop split instead
   of three equal thirds, which left the Won/Lost trend (a small
   2-series chart) as wide as the denser Pipeline by Stage chart. ---- */
.crm-report-charts-grid {
    display: grid;
    grid-template-columns: 5fr 3fr 4fr;
    gap: 14px;
    margin-bottom: 18px;
    align-items: start;
}

.crm-report-chart-card h4 {
    margin: 0 0 12px;
    font-size: .875rem;
    font-weight: 700;
}

.crm-report-chart {
    min-height: 260px;
}

.crm-report-help-note {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    font-size: .78125rem;
    color: var(--im-color-text-soft);
    margin: 0 0 18px;
}

.crm-report-help-note i {
    margin-top: 1px;
    flex: 0 0 auto;
}

.crm-report-velocity-caveat {
    color: var(--im-color-text-soft);
}

.crm-report-scope-note {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    margin-bottom: 12px;
    background: var(--im-color-info-soft);
    color: var(--im-color-info);
    border-radius: 10px;
    font-size: .8125rem;
    font-weight: 600;
}

.crm-report-help {
    cursor: help;
}

.crm-report-help i {
    font-size: .75rem;
    color: var(--im-color-text-muted);
}

/* Unassigned is valid management information, not an error state — a
   subtle neutral treatment only (Phase 1 used the warning-amber
   token, which reads as "something is wrong"). */
.crm-report-table__unassigned {
    background: #f4f5f8;
}

.crm-report-table__unassigned td {
    color: var(--im-color-text-soft);
    font-style: italic;
}

.crm-report-stage-card {
    margin-bottom: 14px;
}

.crm-report-default-tag {
    font-size: .6875rem;
    font-weight: 700;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--im-color-primary-soft);
    color: var(--im-color-primary);
    margin-left: 8px;
}

/* ---- Sales Performance table polish — sticky first column so the
   Salesperson name stays visible while scrolling a wide table
   horizontally; numeric/money columns are right-aligned via the
   standard Bootstrap .text-end utility already used across CRM. ---- */
.crm-report-table th.text-end,
.crm-report-table td.text-end {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.crm-report-table--sales {
    min-width: 980px;
}

.crm-report-sticky-col {
    position: sticky;
    left: 0;
    background: #fff;
    z-index: 1;
    box-shadow: 1px 0 0 var(--im-color-line);
}

.crm-report-table__unassigned .crm-report-sticky-col {
    background: #f4f5f8;
}

.crm-report-table thead .crm-report-sticky-col {
    background: var(--im-table-head-bg, #f7f7fb);
}

.crm-report-bar-cell {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: flex-end;
}

.crm-report-bar {
    display: inline-block;
    width: 80px;
    height: 6px;
    border-radius: 999px;
    background: var(--im-color-line);
    overflow: hidden;
    flex: 0 0 auto;
}

.crm-report-bar__fill {
    height: 100%;
    background: var(--im-color-primary);
    border-radius: 999px;
}

/* ---- Open Deal Aging — a compact horizontal strip instead of four
   large KPI cards, so a small, simple dataset doesn't consume a
   disproportionate amount of vertical space. ---- */
.crm-report-aging-strip {
    display: flex;
    gap: 10px;
    margin-bottom: 4px;
}

.crm-report-aging-bucket {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px 14px;
    background: #fff;
    border: 1px solid var(--im-color-line);
    border-radius: 12px;
    text-align: center;
}

.crm-report-aging-bucket__label {
    font-size: .6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .02em;
    color: var(--im-color-text-soft);
}

.crm-report-aging-bucket__count {
    font-size: 1.375rem;
    font-weight: 800;
    color: var(--im-color-text);
}

.crm-report-aging-bucket__value {
    font-size: .75rem;
    color: var(--im-color-text-muted);
    font-variant-numeric: tabular-nums;
}

/* ---- Commercial Funnel — horizontal management funnel on desktop
   (Phase 1 was a narrow vertical tower with large empty side margins);
   tablet keeps a 2x2 grid, mobile falls back to a vertical stack. ---- */
.crm-report-funnel {
    display: flex;
    align-items: stretch;
    gap: 10px;
    margin-bottom: 8px;
}

.crm-report-funnel__step {
    flex: 1 1 0;
    min-width: 0;
    text-align: center;
    padding: 16px 12px;
    border-radius: 14px;
    background: #fff;
    border: 1px solid var(--im-color-line);
}

.crm-report-funnel__count {
    font-size: 1.625rem;
    font-weight: 800;
    color: var(--im-color-text);
}

.crm-report-funnel__label {
    font-size: .75rem;
    font-weight: 600;
    color: var(--im-color-text-soft);
}

.crm-report-funnel__rate {
    margin-top: 4px;
    font-size: .75rem;
    font-weight: 700;
    color: var(--im-color-primary);
}

.crm-report-funnel__rate--independent {
    color: var(--im-color-text-muted);
    font-weight: 600;
}

.crm-report-funnel__arrow {
    display: flex;
    align-items: center;
    color: var(--im-color-text-muted);
    font-size: 1.125rem;
    line-height: 1;
}

@media (max-width: 1366px) {
    .crm-report-filter-field--period {
        flex-basis: 170px;
    }

    .crm-report-filter-field--pipeline {
        flex-basis: 280px;
    }

    .crm-report-filter-field--salesperson {
        flex-basis: 230px;
    }
}

@media (max-width: 991.98px) {
    .crm-report-charts-grid {
        grid-template-columns: 1fr;
    }

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

    .crm-report-funnel {
        flex-wrap: wrap;
    }

    .crm-report-funnel__step {
        flex: 1 1 calc(50% - 5px);
    }

    .crm-report-funnel__arrow {
        display: none;
    }
}

@media (max-width: 767.98px) {
    .crm-report-filter-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .crm-report-filter-field--period,
    .crm-report-filter-field--pipeline,
    .crm-report-filter-field--salesperson {
        flex-basis: auto;
        width: 100%;
    }

    .crm-report-custom-range {
        flex-direction: column;
    }

    .crm-report-filter-actions {
        margin-left: 0;
    }

    .crm-report-period-banner {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .crm-report-period-banner__info {
        margin-left: 0;
    }

    /* Stacked vertically, the middot separators would each land alone on
       their own line — just a floating "." with nothing either side. */
    .crm-report-period-banner__sep {
        display: none;
    }

    .crm-metrics-grid--two,
    .crm-metrics-grid--five {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* A 2-up money card ("RM5,000.00") is too narrow at this width for
       the base clamp's upper end — same fix already applied to the
       plain 6-column grid above, extended to --two/--five here too. */
    .crm-metrics-grid--two .crm-metric__value--money,
    .crm-metrics-grid--five .crm-metric__value--money {
        font-size: 1rem;
        overflow-wrap: break-word;
    }

    .crm-report-aging-strip {
        flex-wrap: wrap;
    }

    .crm-report-aging-bucket {
        flex: 1 1 calc(50% - 5px);
    }

    .crm-report-sticky-col {
        position: static;
        box-shadow: none;
    }

    .crm-report-export-actions {
        flex-wrap: wrap;
    }
}

/* Auth Failed Login Phase 1 — "Security > Failed Logins" page
   (Modules/Auth/resources/views/security/failed-logins.blade.php).
   Deliberately small/flat: five KPIs, two factual repeat-attempt lists,
   one filtered table. No charts, no risk-score styling. */
.fla-page {
    color: var(--im-color-text);
}

.fla-kpis {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0;
    margin-bottom: 18px;
    border: 1px solid var(--im-color-line);
    background: var(--im-color-surface);
    box-shadow: var(--im-shadow-sm);
    border-radius: 16px;
    overflow: hidden;
}

.fla-kpi {
    position: relative;
    padding: 14px 16px;
    border-right: 1px solid var(--im-color-line);
}

.fla-kpi:last-child {
    border-right: 0;
}

.fla-kpi:before {
    content: '';
    position: absolute;
    inset: 0 14px auto;
    height: 3px;
    background: var(--im-color-primary);
}

.fla-kpi-warning:before {
    background: #f59e0b;
}

.fla-kpi span {
    display: block;
    color: var(--im-color-text-soft);
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .045em;
}

.fla-kpi strong {
    display: block;
    margin-top: 5px;
    font-size: 22px;
}

.fla-repeats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}

.fla-repeat-card {
    border: 1px solid var(--im-color-line);
    background: var(--im-color-surface);
    box-shadow: var(--im-shadow-sm);
    border-radius: 16px;
    padding: 14px 16px;
}

.fla-repeat-card h2 {
    font-size: 13px;
    font-weight: 800;
    margin: 0 0 10px;
}

.fla-repeat-card ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.fla-repeat-card li {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 7px 0;
    border-bottom: 1px solid var(--im-color-line);
    font-size: 12px;
}

.fla-repeat-card li:last-child {
    border-bottom: 0;
}

.fla-repeat-card li span {
    overflow-wrap: anywhere;
}

.fla-repeat-card li strong {
    white-space: nowrap;
    color: var(--im-color-text-soft);
}

.fla-repeat-empty {
    margin: 0;
    font-size: 12px;
    color: var(--im-color-text-soft);
}

.fla-card {
    border: 1px solid var(--im-color-line);
    background: var(--im-color-surface);
    box-shadow: var(--im-shadow-sm);
    border-radius: 18px;
    padding: 16px;
}

/* Filter toolbar: a fixed 9-column grid whose minmax() minimums summed wider
   than the card (~1190px), so "Export CSV" overflowed the white card at
   1440/1600. Now a flexible flex-wrap row — fields flex and share the width
   when they fit on one line, wrap into 2+ rows on narrower desktops/tablets,
   and stack on mobile. The action buttons keep their intrinsic width and
   wrap together as a right-aligned group. Nothing can extend past the card. */
.fla-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 12px;
    align-items: center;
    width: 100%;
    min-width: 0;
}

.fla-filters > .im-input {
    flex: 1 1 112px;
    min-width: 112px;
    width: auto;
}

/* The <select>s are wrapped by the bos-select JS component into a
   .bos-select-custom-container.bos-select-global that defaults to width:100%
   (forcing its own row). Match the same compact flex behaviour the other
   filter fields use — mirrors the existing .im-filter-bar > .bos-select-global
   pattern. */
.fla-filters > .bos-select-global,
.fla-filters > .im-select {
    flex: 1 1 150px;
    min-width: 132px;
    width: auto !important;
}

.fla-filters > .im-input[type="date"] {
    flex-basis: 132px;
    min-width: 132px;
    flex-grow: 0.7;
}

/* the two free-text search fields carry the longest placeholders — let them
   take a larger share so "Search account / email" is not clipped */
.fla-filters > input[name="search"],
.fla-filters > input[name="ip"] {
    flex-grow: 2.4;
    flex-basis: 190px;
    min-width: 190px;
}

.fla-filter-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    flex: 1 1 auto;
    justify-content: flex-end;
    align-items: center;
}

.fla-filters .im-btn,
.fla-filter-actions .im-btn {
    flex: 0 0 auto;
    white-space: nowrap;
}

@media (max-width: 560px) {
    .fla-filters > .im-select,
    .fla-filters > .im-input,
    .fla-filters > .im-input[type="date"] {
        flex-basis: 100%;
        min-width: 0;
    }
    .fla-filter-actions {
        justify-content: stretch;
    }
    .fla-filter-actions .im-btn {
        flex: 1 1 auto;
    }
}

.fla-table {
    width: 100%;
    min-width: 900px;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
}

.fla-table th {
    padding: 10px 8px;
    background: var(--im-color-surface-soft);
    border-bottom: 1px solid var(--im-color-line-strong);
    color: var(--im-color-text-soft);
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: .04em;
    text-align: left;
}

.fla-table td {
    padding: 11px 8px;
    border-bottom: 1px solid var(--im-color-line);
    font-size: 14px;
    line-height: 1.35;
    vertical-align: middle;
    overflow-wrap: anywhere;
}

.fla-table tbody tr:hover {
    background: var(--im-color-surface-soft);
}

.fla-table time small {
    display: block;
    color: var(--im-color-text-soft);
    margin-top: 2px;
}

.fla-reason {
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    border-radius: 999px;
    background: var(--im-color-surface-muted);
    font-size: 9px;
    font-weight: 800;
    white-space: nowrap;
}

.fla-reason-unknown_account {
    background: #fdecec;
    color: #b42318;
}

.fla-reason-wrong_password {
    background: #fff4e5;
    color: #9a5300;
}

.fla-reason-inactive_account {
    background: #f2f4f7;
    color: #475467;
}

.fla-reason-throttled {
    background: #eaf1ff;
    color: #175cd3;
}

.fla-empty {
    text-align: center;
    padding: 45px !important;
    color: var(--im-color-text-soft);
}

.fla-pagination {
    margin-top: 14px;
}

@media (max-width: 1200px) {
    .fla-kpis {
        grid-template-columns: repeat(3, 1fr);
    }

    .fla-kpi:nth-child(3) {
        border-right: 0;
    }

    .fla-kpi:nth-child(-n+3) {
        border-bottom: 1px solid var(--im-color-line);
    }

    .fla-repeats {
        grid-template-columns: 1fr;
    }

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

@media (max-width: 768px) {
    .fla-kpis {
        grid-template-columns: 1fr 1fr;
    }

    .fla-kpi:nth-child(even) {
        border-right: 0;
    }

    .fla-kpi {
        border-bottom: 1px solid var(--im-color-line);
    }

    .fla-filters {
        grid-template-columns: 1fr;
    }

    .fla-card {
        padding: 10px;
    }
}

/* Attendance Management Reports Phase 1 — "Attendance > Reports"
   (resources/views/attendance/reports.blade.php). Small, deliberately
   flat: filters, tabs (Overview/Departments/Employees), KPI grid, a
   CSS-bar trend (no JS charting library), and plain im-table lists. */
.atr-page {
    color: var(--im-color-text);
}

.atr-filters {
    padding: 14px 16px;
    margin-bottom: 14px;
}

.atr-filter-toolbar {
    display: grid;
    grid-template-columns: minmax(150px, 1fr) repeat(2, minmax(150px, 1fr)) minmax(160px, 1.1fr) minmax(160px, 1.1fr) auto;
    gap: 10px;
    align-items: end;
}

.atr-filter-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-size: 11px;
}

.atr-filter-field span {
    color: var(--im-color-text-soft);
    font-weight: 700;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .03em;
}

.atr-custom-range {
    display: flex;
    gap: 10px;
    grid-column: span 2;
}

.atr-filter-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.atr-filter-clear {
    font-size: 11px;
    color: var(--im-color-text-soft);
    text-decoration: underline;
    white-space: nowrap;
}

.atr-csv-dropdown {
    position: relative;
    display: inline-block;
}

.atr-csv-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 4px);
    z-index: 20;
    min-width: 160px;
    background: var(--im-color-surface);
    border: 1px solid var(--im-color-line);
    border-radius: 10px;
    box-shadow: var(--im-shadow-md, 0 8px 24px rgba(0, 0, 0, .12));
    padding: 6px;
    display: flex;
    flex-direction: column;
}

.atr-csv-menu a {
    padding: 8px 10px;
    border-radius: 7px;
    font-size: 12px;
    color: var(--im-color-text);
    text-decoration: none;
}

.atr-csv-menu a:hover {
    background: var(--im-color-surface-soft);
}

.atr-period-banner {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    font-size: 12px;
    color: var(--im-color-text-soft);
}

.atr-period-banner strong {
    color: var(--im-color-text);
}

.atr-tabs-nav {
    display: flex;
    gap: 4px;
    margin-bottom: 14px;
    border-bottom: 1px solid var(--im-color-line);
}

.atr-tabs-nav__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    border: 0;
    background: transparent;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--im-color-text-soft);
    border-bottom: 2px solid transparent;
    cursor: pointer;
}

.atr-tabs-nav__link.is-active {
    color: var(--im-color-primary);
    border-bottom-color: var(--im-color-primary);
}

.atr-tab-panel {
    display: none;
}

.atr-tab-panel.is-active {
    display: block;
}

.atr-kpis {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 16px;
}

.atr-kpi {
    padding: 13px 14px;
    position: relative;
}

.atr-kpi:before {
    content: '';
    position: absolute;
    inset: 0 12px auto;
    height: 3px;
    background: var(--im-color-primary);
    border-radius: 2px;
}

.atr-kpi-warning:before {
    background: #f59e0b;
}

.atr-kpi span {
    display: block;
    color: var(--im-color-text-soft);
    font-size: 9.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.atr-kpi strong {
    display: block;
    margin-top: 5px;
    font-size: 20px;
}

.atr-kpi small {
    display: block;
    margin-top: 2px;
    color: var(--im-color-text-soft);
    font-size: 10px;
}

/* Attendance Reports Phase 2A — Roster & Coverage section */
.atr-section-heading {
    font-size: 13px;
    font-weight: 700;
    color: var(--im-color-text);
    margin: 18px 0 10px;
    padding: 0;
    border: none;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.atr-kpis--roster {
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

.atr-kpis--roster .atr-kpi:before {
    background: #10b981;
}

.atr-kpi-coverage:before {
    background: #0ea5e9 !important;
}

.atr-kpi-coverage strong {
    color: #0ea5e9;
}

.atr-nowrap {
    white-space: nowrap;
}

/* Table UX + Pagination — per-page toolbar directly above the table
   (spec section 3: 12-16px visual spacing, no extra card wrapper). */
.atr-table-toolbar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    margin: 12px 0 6px;
    padding: 0;
}

.atr-per-page {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 600;
    color: var(--im-color-text-soft);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.atr-per-page .im-select-sm {
    padding: 3px 6px;
    font-size: 12px;
    min-width: 56px;
    border-radius: 4px;
}

.atr-tab-panel>.table-responsive:first-child {
    margin-top: 0;
}

.atr-tab-panel {
    padding-top: 0;
}

.atr-card {
    padding: 16px;
    margin-bottom: 16px;
}

.atr-empty-inline {
    margin: 0;
    padding: 20px 0;
    text-align: center;
    color: var(--im-color-text-soft);
    font-size: 12px;
}

.atr-bars {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    height: 160px;
    padding-top: 10px;
    overflow-x: auto;
}

.atr-bar-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-width: 30px;
    flex: 1 0 auto;
    height: 100%;
    justify-content: flex-end;
}

.atr-bar-track {
    width: 100%;
    max-width: 26px;
    height: 110px;
    display: flex;
    align-items: flex-end;
    background: var(--im-color-surface-soft);
    border-radius: 4px;
    overflow: hidden;
}

.atr-bar-fill {
    width: 100%;
    background: var(--im-color-primary);
    border-radius: 4px 4px 0 0;
    min-height: 4px;
}

.atr-bar-value {
    font-size: 10px;
    font-weight: 700;
    color: var(--im-color-text);
}

.atr-bar-label {
    font-size: 9px;
    color: var(--im-color-text-soft);
    white-space: nowrap;
}

.atr-table {
    width: 100%;
    min-width: 760px;
}

.atr-status {
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    border-radius: 999px;
    background: var(--im-color-surface-muted);
    font-size: 9px;
    font-weight: 800;
    white-space: nowrap;
}

.atr-status-warning {
    background: #fff4e5;
    color: #9a5300;
}

@media (max-width: 1200px) {
    .atr-filter-toolbar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .atr-custom-range {
        grid-column: span 2;
    }

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

@media (max-width: 768px) {
    .atr-filter-toolbar {
        grid-template-columns: 1fr;
    }

    .atr-custom-range {
        grid-column: span 1;
        flex-direction: column;
    }

    .atr-kpis {
        grid-template-columns: 1fr 1fr;
    }

    .atr-card {
        padding: 10px;
    }

    .atr-tabs-nav {
        overflow-x: auto;
        flex-wrap: nowrap;
    }
}

/* HR Attendance Roster Phase 1 — "Attendance > Roster" grid
   (resources/views/attendance/roster.blade.php) and "Manage Shifts"
   (resources/views/attendance/roster-shifts.blade.php). Operational
   scheduling-tool feel: compact toolbar, staff rows, date columns,
   small shift chips — not a reporting dashboard.
   Phase 1.1 adds: date-nav + segmented view toggle bar, a single
   compact filter card (Search Worker/Department/Rows), staff-row
   pagination controls, a sticky staff column + sticky date header, and
   a denser cell layout so ~15 staff rows fit comfortably on screen. */
.ros-page {
    color: var(--im-color-text);
}

/* .ros-card sits on the same element as .im-card (roster.blade.php) —
   this strips the outer card's background/border/shadow/radius/padding
   so only the roster table itself (bordered via .ros-grid-scroll below)
   is visible, no second white card behind it. Equal selector specificity
   to .im-card, so declaration order (this rule comes later in the
   cascade) is what makes it win — no !important needed. */
.ros-card {
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

/* Phase 1.1 — compact date-nav + segmented Week/Month toggle, one row */
.ros-nav-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.ros-nav {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.ros-range-label {
    margin-left: 6px;
    font-size: 13px;
    color: var(--im-color-text);
}

.ros-view-toggle {
    display: inline-flex;
    border: 1px solid var(--im-color-line);
    border-radius: 999px;
    padding: 3px;
    background: var(--im-color-surface);
    gap: 2px;
}

.ros-view-toggle__opt {
    padding: 6px 16px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    color: var(--im-color-text-soft);
    text-decoration: none;
}

.ros-view-toggle__opt.is-active {
    background: var(--im-color-primary);
    color: #fff;
}

.ros-view-toggle__opt:not(.is-active):hover {
    background: var(--im-color-surface-soft);
}

/* Phase 1.1 — one compact horizontal filter card: Search Worker / Department / Rows */
.ros-filters {
    padding: 12px 14px;
    margin-bottom: 14px;
}

.ros-filter-toolbar {
    display: grid;
    grid-template-columns: minmax(180px, 1.6fr) minmax(160px, 1fr) minmax(90px, .6fr) auto;
    gap: 10px;
    align-items: end;
}

.ros-filter-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-size: 11px;
}

.ros-filter-field span {
    color: var(--im-color-text-soft);
    font-weight: 700;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .03em;
}

.ros-filter-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ros-filter-clear {
    font-size: 11px;
    color: var(--im-color-text-soft);
    text-decoration: underline;
    white-space: nowrap;
}

/* The table's own border/rounded corners, now that the outer .ros-card
   chrome is gone — overflow-x:auto already clips/scrolls both axes here
   (an unset overflow-y is computed as 'auto' per spec once overflow-x
   isn't 'visible'), so the radius clips cleanly without disturbing the
   sticky staff column/date header or horizontal scrolling below. */
.ros-grid-scroll {
    overflow-x: auto;
    border: 1px solid var(--im-color-line);
    border-radius: var(--im-radius-card);
}

.ros-grid-table {
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
    min-width: 900px;
}

.ros-grid-table th,
.ros-grid-table td {
    border-bottom: 1px solid var(--im-color-line);
    border-right: 1px solid var(--im-color-line);
    padding: 0;
}

.ros-grid-table th:last-child,
.ros-grid-table td:last-child {
    border-right: 0;
}

/* Sticky date header (vertical scroll) — top:0 is safe here since the
   global Kunos header/topbar is not itself position:fixed/sticky
   (confirmed: no such rule exists for it), matching the same proven
   sticky-header pattern already used by .crm-board-column__header. */
.ros-grid-table thead th {
    position: sticky;
    top: 0;
    z-index: 3;
    background: var(--im-color-surface-soft);
}

.ros-date-col--holiday {
    background: #fff4e5;
}

/* Sticky staff column (horizontal scroll) — stays visible while later
   dates scroll past; z-index 4 on its header cell so the sticky corner
   sits above both the sticky date header (3) and sticky body column (2). */
.ros-staff-col {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--im-color-surface);
    min-width: 160px;
    max-width: 160px;
    padding: 7px 12px !important;
    text-align: left;
    border-right: 1px solid var(--im-color-line-strong, var(--im-color-line));
    box-shadow: 2px 0 4px -2px rgba(16, 24, 40, .06);
}

thead .ros-staff-col {
    z-index: 4;
    background: var(--im-color-surface-soft);
}

.ros-date-col {
    min-width: 104px;
    padding: 6px !important;
    text-align: center;
}

.ros-date-day {
    display: block;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--im-color-text-soft);
    font-weight: 800;
}

.ros-date-num {
    display: block;
    font-size: 12px;
    font-weight: 700;
}

.ros-holiday-tag {
    display: inline-block;
    margin-top: 3px;
    padding: 2px 6px;
    border-radius: 999px;
    background: #f59e0b;
    color: #fff;
    font-size: 8px;
    font-weight: 800;
}

.ros-staff-name {
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.25;
}

.ros-staff-dept {
    font-size: 10px;
    color: var(--im-color-text-soft);
    line-height: 1.2;
}

/* Phase 1.1 — denser rows (target ~15 staff visible without excessive scroll) */
.ros-cell {
    vertical-align: middle;
}

.ros-cell-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    width: 100%;
    min-height: 46px;
    padding: 5px 4px;
    border: 0;
    background: transparent;
    cursor: pointer;
    line-height: 1.1;
}

.ros-cell-btn:hover {
    background: var(--im-color-surface-soft);
}

.ros-chip {
    display: inline-flex;
    align-items: center;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 800;
}

/* Working: the shift code is the visually dominant element in the cell. */
.ros-chip-shift {
    background: var(--im-color-primary-soft, #eef0ff);
    color: var(--im-color-primary);
    font-size: 11.5px;
}

.ros-chip-rest {
    background: #eef2f7;
    color: #475467;
}

/* Not Scheduled: deliberately low-emphasis — no chip background, muted text only. */
.ros-chip-empty {
    background: transparent;
    color: var(--im-color-text-soft);
    font-weight: 500;
    font-size: 9.5px;
    opacity: .75;
}

.ros-cell-btn small {
    font-size: 9px;
    color: var(--im-color-text-soft);
}

.ros-badge {
    display: inline-flex;
    margin-top: 2px;
    padding: 2px 7px;
    border-radius: 999px;
    font-size: 8.5px;
    font-weight: 800;
}

.ros-badge-leave {
    background: #fdecec;
    color: #b42318;
}

.ros-badge-holiday {
    background: #f59e0b;
    color: #fff;
}

.ros-empty {
    text-align: center;
    padding: 40px !important;
    color: var(--im-color-text-soft);
}

/* Phase 1.1 — staff-row pagination, directly below the table (no
   shared card background to border-separate from anymore). */
.ros-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 12px;
    padding: 0 2px;
}

.ros-pagination__summary {
    font-size: 12px;
    color: var(--im-color-text-soft);
}

.ros-pagination__links .pagination {
    margin: 0;
}

.ros-shift-table {
    width: 100%;
}

.ros-code {
    font-family: monospace;
    font-weight: 700;
    letter-spacing: .03em;
}

.ros-status {
    display: inline-flex;
    padding: 4px 9px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
}

.ros-status-active {
    background: #e8f8f0;
    color: #067647;
}

.ros-status-disabled {
    background: #f2f4f7;
    color: #667085;
}

.ros-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.ros-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.ros-form-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-size: 12px;
}

.ros-form-field span {
    color: var(--im-color-text-soft);
    font-weight: 700;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: .03em;
}

.ros-form-field--wide {
    grid-column: 1 / -1;
}

.ros-form-field--checkbox {
    flex-direction: row;
    align-items: center;
    gap: 8px;
    grid-column: 1 / -1;
}

.ros-modal-subtitle {
    font-size: 12.5px;
    color: var(--im-color-text-soft);
    margin-bottom: 12px;
}

/* Normalize modal close buttons — task: "normalize all modal close buttons".
   Scoped to .ros-modal only (Bulk Assign / Assign / Create Shift / Standard
   Shift Configure-Edit / Custom Shift Add-Edit), never touches the shared
   .bos-app-modal .modal-header/.btn-close convention used by every other
   modal in Kunos (that pattern stays exactly as it is elsewhere). Slightly
   tighter header padding here only, since the old .btn-close's double-square
   +permanent glow made the header read as having far more empty space than
   it actually did. */
.ros-modal .modal-header {
    padding: 16px 20px 14px;
    align-items: flex-start;
}

/* Compact modal title + helper text — title left-aligned, close button
   stays top-right (task: "add compact modal titles"). Deliberately its own
   .ros-modal-heading/.ros-modal-desc pair rather than the shared
   .bos-modal-heading/.bos-modal-subtitle convention used elsewhere in
   Kunos: that convention auto-injects a purple icon chip when no explicit
   icon is given, which none of these 5 modals have ever used and which
   would add visual weight the task explicitly asked to avoid ("keep
   header visually light"). */
.ros-modal-heading {
    flex: 1 1 auto;
    min-width: 0;
    padding-right: 12px;
}

.ros-modal .modal-title {
    margin: 0;
    font-size: 19px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--im-color-text);
}

.ros-modal-desc {
    display: block;
    margin-top: 3px;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--im-color-text-soft);
}

/* One clean X button, replacing Bootstrap's default .btn-close (SVG
   background-image glyph) with the same bi-x-lg icon already used for
   close controls elsewhere in Kunos (list.blade.php's #drawer-close,
   holiday/index.blade.php), for a crisp, consistently centered icon that
   never shifts on hover/focus. */
.ros-modal-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    padding: 0;
    margin: 0;
    border: 1px solid var(--im-color-line);
    border-radius: 11px;
    background: #fff;
    color: var(--im-color-text-soft);
    font-size: 21px;
    line-height: 1;
    cursor: pointer;
    outline: none;
    box-shadow: none;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.ros-modal-close i {
    display: block;
}

.ros-modal-close:hover {
    background: var(--im-color-surface-soft);
    border-color: var(--im-color-line-strong);
    color: var(--im-color-text);
}

.ros-modal-close:active {
    background: var(--im-color-surface-soft);
}

/* Mouse click must never leave a lingering ring — :focus alone (which also
   fires on a plain click, not just keyboard navigation) is deliberately
   left bare; only :focus-visible (keyboard/assistive-tech focus) gets the
   subtle accent ring, so accessibility is preserved without the "permanent
   purple glow" the old shared .btn-close:focus rule produced here. */
.ros-modal-close:focus {
    outline: none;
    box-shadow: none;
}

.ros-modal-close:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px rgba(63, 65, 181, .22);
}

/* Bulk Assign — no-active-shifts empty state (task section 3): never a
   blank/broken-looking select. */
.ros-shift-empty {
    padding: 14px;
    border: 1px dashed var(--im-color-line);
    border-radius: 12px;
    background: var(--im-color-surface-soft);
    text-align: center;
}

.ros-shift-empty__title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 0 0 10px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--im-color-text);
}

.ros-shift-empty__hint {
    margin: 0 0 10px;
    font-size: 11.5px;
    color: var(--im-color-text-soft);
}

.ros-shift-empty__secondary {
    display: inline-block;
    margin-top: 8px;
    font-size: 11px;
    color: var(--im-color-text-soft);
    text-decoration: underline;
}

/* Shift Settings — Standard Shifts section (task section 2/14): three
   compact cards, "Not configured" state never invented/pre-filled. */
.ros-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 22px 0 10px;
}

.ros-section-title {
    margin: 22px 0 10px;
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--im-color-text-soft);
}

.ros-section-header .ros-section-title {
    margin: 0;
}

.ros-standard-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 8px;
}

.ros-standard-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 14px;
    border: 1px solid var(--im-color-line);
    border-radius: 14px;
    background: var(--im-color-surface);
}

.ros-standard-card--unconfigured {
    border-style: dashed;
    background: var(--im-color-surface-soft);
}

.ros-standard-card--disabled {
    opacity: .7;
}

.ros-standard-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
}

.ros-standard-card__name {
    font-size: 13px;
    font-weight: 700;
    color: var(--im-color-text);
}

.ros-standard-card__hours {
    font-size: 18px;
    font-weight: 800;
    color: var(--im-color-text);
    font-variant-numeric: tabular-nums;
}

.ros-standard-card__hours--empty {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--im-color-text-soft);
}

.ros-standard-card__actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Bulk Assign — Assign As segmented toggle (Working Shift / Rest Day, task section 2). */
.ros-segmented {
    display: inline-flex;
    border: 1px solid var(--im-color-line);
    border-radius: 999px;
    padding: 3px;
    gap: 2px;
    background: var(--im-color-surface);
}

.ros-segmented__opt {
    padding: 7px 14px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    color: var(--im-color-text-soft);
    cursor: pointer;
}

.ros-segmented__opt input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.ros-segmented__opt.is-active {
    background: var(--im-color-primary);
    color: #fff;
}

/* Bulk Assign — existing-shift select + inline "+ Create Shift" trigger (task section 3). */
.ros-shift-select-row {
    display: flex;
    gap: 8px;
    align-items: center;
}

.ros-shift-select-row .im-select {
    flex: 1 1 auto;
}

.ros-shift-select-row .im-btn {
    flex: 0 0 auto;
    white-space: nowrap;
}

/* Bulk Assign Quick Create — inline panel, never a nested modal or a
   page navigation (task section 5/15). */
.ros-quick-shift {
    margin-top: 10px;
    padding: 12px;
    border: 1px solid var(--im-color-line);
    border-radius: 12px;
    background: var(--im-color-surface-soft);
}

.ros-quick-shift__title {
    margin: 0 0 8px;
    font-size: 11.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--im-color-text-soft);
}

.ros-quick-shift__error {
    margin: 8px 0 0;
    padding: 8px 10px;
    border-radius: 8px;
    background: #fdecec;
    color: #b42318;
    font-size: 11.5px;
}

.ros-quick-shift__actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 10px;
}

/* Bulk Assign — searchable checkbox multi-select for Staff (task
   sections 4-9, 15). Compact trigger + a scrollable panel so the modal
   itself never grows tall no matter how many staff are selected. */
.ros-staff-picker {
    position: relative;
}

.ros-staff-picker__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--im-color-line);
    border-radius: 10px;
    background: var(--im-color-surface);
    font-size: 12.5px;
    color: var(--im-color-text-soft);
    text-align: left;
    cursor: pointer;
}

.ros-staff-picker__trigger.has-selection {
    color: var(--im-color-text);
    font-weight: 700;
}

.ros-staff-picker__trigger:focus-visible {
    outline: 2px solid var(--im-color-primary);
    outline-offset: 1px;
}

.ros-staff-picker__trigger i {
    flex: 0 0 auto;
    color: var(--im-color-text-soft);
    font-size: 11px;
}

/* Deliberately in-flow (not position:absolute) — .bos-app-modal's own
   .modal-content/.modal-body both use overflow:hidden/auto, which would
   silently clip a floating overlay panel here. Expanding in place instead
   lets the modal's existing scroll handle it; the checkbox list keeps its
   OWN capped internal scroll (below) either way, so the modal still never
   grows unbounded. */
.ros-staff-picker__panel {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 6px;
    padding: 10px;
    border: 1px solid var(--im-color-line);
    border-radius: 12px;
    background: var(--im-color-surface-soft);
}

.ros-staff-picker__search {
    font-size: 12.5px;
}

.ros-staff-picker__actions {
    display: flex;
    align-items: center;
    gap: 14px;
}

.ros-staff-picker__link {
    padding: 0;
    border: 0;
    background: none;
    color: var(--im-color-primary);
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
}

.ros-staff-picker__link:hover {
    text-decoration: underline;
}

/* Internal scroll only — this is what keeps the picker (and the modal
   around it) height-bounded regardless of staff list size (task 15). */
.ros-staff-picker__list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 220px;
    overflow-y: auto;
    border-top: 1px solid var(--im-color-line);
    border-bottom: 1px solid var(--im-color-line);
}

.ros-staff-picker__item {
    border-bottom: 1px solid var(--im-color-line);
}

.ros-staff-picker__item:last-child {
    border-bottom: 0;
}

.ros-staff-picker__item label {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 6px;
    font-size: 12.5px;
    cursor: pointer;
}

.ros-staff-picker__item label:hover {
    background: var(--im-color-surface-soft);
}

.ros-staff-picker__item input[type="checkbox"] {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    accent-color: var(--im-color-primary);
}

.ros-staff-picker__no-match {
    margin: 6px 0 0;
    font-size: 11.5px;
    color: var(--im-color-text-soft);
    text-align: center;
}

@media (max-width: 900px) {
    .ros-form-grid {
        grid-template-columns: 1fr;
    }

    .ros-nav-bar {
        flex-direction: column;
        align-items: stretch;
    }

    .ros-nav {
        justify-content: center;
    }

    .ros-view-toggle {
        align-self: center;
    }

    .ros-filter-toolbar {
        grid-template-columns: 1fr 1fr;
    }

    .ros-filter-field--search {
        grid-column: 1 / -1;
    }

    .ros-standard-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 480px) {
    .ros-staff-col {
        min-width: 118px;
        max-width: 118px;
    }

    .ros-standard-grid {
        grid-template-columns: 1fr;
    }

    .ros-section-header {
        flex-direction: column;
        align-items: stretch;
    }

    /* Touch-friendlier checkbox rows on small screens (task section 16). */
    .ros-staff-picker__item label {
        padding: 10px 6px;
    }

    .ros-staff-picker__item input[type="checkbox"] {
        width: 19px;
        height: 19px;
    }

    .ros-date-col {
        min-width: 84px;
    }

    .ros-filter-toolbar {
        grid-template-columns: 1fr;
    }

    .ros-filter-actions {
        justify-content: space-between;
    }

    .ros-pagination {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }

    .ros-pagination__links .pagination {
        justify-content: center;
        flex-wrap: wrap;
    }
}

/* ==========================================================================
   Kunos Unified Settings Workspace Styles
   ========================================================================== */
.bg-gradient-primary-to-secondary {
    background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%);
}

.text-xs {
    font-size: 0.75rem !important;
}

.text-sm {
    font-size: 0.875rem !important;
}

.btn-xs {
    padding: 0.15rem 0.4rem;
    font-size: 0.72rem;
    border-radius: 0.25rem;
}

/* HR Staff Management Drawer Width & Responsive Refinements */
#verify-drawer.im-drawer-wide {
    width: min(880px, 60vw);
    max-width: 100vw;
}

@media (max-width: 768px) {
    #verify-drawer.im-drawer-wide {
        width: 100vw;
    }
}

/* Kunos Navigation Back Link */
.kunos-back-link {
    color: #6c757d;
    background-color: transparent;
    text-decoration: none;
    font-size: 0.8125rem;
    font-weight: 500;
    padding: 4px 8px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
}

.kunos-back-link:hover,
.kunos-back-link:focus,
.kunos-back-link:active {
    color: #343a40;
    background-color: #e9ecef;
    text-decoration: none;
}

/* Canonical Staff Role Management workspace. */
/* Actual Page Width Fix — this page's markup now uses the exact same
   .container-fluid.im-page class combination Inventory Items uses (no
   Role-Management-specific width/padding class at all), so its computed
   inset is guaranteed identical to Inventory's — #main's own 30px frame +
   .container-fluid's native 12px/.75rem gutter = 42px total — rather than
   an easy-to-get-wrong restatement of Bootstrap's own default in a
   second class. Two earlier attempts here (.px-4 = 54px total, then a
   bespoke hr-role-workspace 28px = 58px total) both computed to MORE
   padding than Inventory, not less; removing the extra class entirely is
   what actually fixes it. */
.hr-role-mode-tabs {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 18px;
    padding: 4px;
    border: 1px solid #dde4ef;
    border-radius: 12px;
    background: #f4f7fb
}

.hr-role-mode-tabs__item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 38px;
    padding: 0 16px;
    border-radius: 9px;
    color: #65728a;
    font-size: .78rem;
    font-weight: 700;
    text-decoration: none
}

.hr-role-mode-tabs__item:hover {
    color: #4540bd;
    background: #fff
}

.hr-role-mode-tabs__item.is-active {
    color: #fff;
    background: var(--im-color-primary, #4844c8);
    box-shadow: 0 5px 13px rgba(72, 68, 200, .2)
}

.hr-permission-workspace {
    width: 100%
}

.hr-permission-toolbar {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
    padding: 17px 18px;
    border: 1px solid #dfe5ef;
    border-radius: 15px;
    background: #fff
}

.hr-permission-role-field {
    display: grid;
    gap: 6px;
    min-width: min(280px, 100%)
}

.hr-permission-role-field label,
.hr-permission-module-filter span {
    color: #68758b;
    font-size: .69rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase
}

.hr-permission-role-field .form-select {
    min-height: 40px;
    font-weight: 700
}

.hr-permission-count {
    display: flex;
    align-items: baseline;
    gap: 5px;
    padding: 9px 12px;
    border: 1px solid #dcdcff;
    border-radius: 11px;
    background: #f5f5ff;
    color: #5752c7;
    font-size: .76rem
}

.hr-permission-count strong {
    font-size: 1rem
}

.hr-permission-protected {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #9f263d
}

.hr-permission-protected>i {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: #fff0f2
}

.hr-permission-protected span {
    display: grid;
    gap: 2px
}

.hr-permission-protected small {
    color: #7a879b;
    font-size: .7rem
}

.hr-permission-filters {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) minmax(180px, 260px);
    gap: 12px;
    margin-bottom: 15px
}

.hr-permission-module-filter {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 9px
}

.hr-permission-modules {
    display: grid;
    gap: 14px
}

.hr-permission-module {
    overflow: hidden;
    border: 1px solid #dfe5ef;
    border-radius: 15px;
    background: #fff
}

.hr-permission-module>header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 13px 16px;
    border-bottom: 1px solid #e6ebf2;
    background: #fafbfe
}

.hr-permission-module>header h2 {
    margin: 0;
    color: #1c2942;
    font-size: .9rem;
    font-weight: 750
}

.hr-permission-module>header span {
    color: #7b879b;
    font-size: .68rem
}

.hr-permission-module__actions {
    display: flex;
    align-items: center;
    gap: 5px
}

.hr-permission-module__actions .btn {
    padding: 3px 6px;
    font-size: .7rem;
    text-decoration: none
}

.hr-permission-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0
}

.hr-permission-action {
    min-width: 0;
    padding: 13px;
    border-right: 1px solid #edf0f5
}

.hr-permission-action:last-child {
    border-right: 0
}

.hr-permission-action__label {
    display: block;
    margin-bottom: 9px;
    color: #69768b;
    font-size: .65rem;
    font-weight: 800;
    letter-spacing: .035em;
    text-transform: uppercase
}

.hr-permission-check {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    margin: 0;
    padding: 7px 0;
    color: #26334b;
    cursor: pointer
}

.hr-permission-check+.hr-permission-check {
    border-top: 1px solid #f0f2f6
}

.hr-permission-check .form-check-input {
    flex: 0 0 auto;
    margin: 2px 0 0
}

.hr-permission-check span {
    min-width: 0
}

.hr-permission-check strong {
    display: block;
    font-size: .7rem;
    font-weight: 650;
    line-height: 1.35;
    overflow-wrap: anywhere
}

.hr-permission-check small {
    display: block;
    margin-top: 2px;
    color: #8993a4;
    font-size: .6rem;
    line-height: 1.3;
    overflow-wrap: anywhere
}

.hr-permission-action__empty {
    color: #a0a9b8;
    font-size: .75rem
}

.hr-permission-savebar {
    position: sticky;
    bottom: 14px;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 17px;
    padding: 12px 14px;
    border: 1px solid #dce3ee;
    border-radius: 14px;
    background: rgba(255, 255, 255, .97);
    box-shadow: 0 12px 30px rgba(30, 45, 80, .13);
    color: #6e7a8f;
    font-size: .76rem
}

.hr-permission-savebar>div {
    display: flex;
    gap: 8px
}

.hr-permission-empty {
    display: grid;
    justify-items: center;
    gap: 7px;
    padding: 46px 18px;
    border: 1px solid #dfe5ef;
    border-radius: 15px;
    background: #fff;
    color: #79869a;
    text-align: center
}

.hr-permission-empty>i {
    font-size: 1.7rem;
    color: #7772d8
}

.hr-permission-empty strong {
    color: #26334b
}

.hr-permission-empty span {
    font-size: .78rem
}

.hr-permission-empty--protected>i {
    color: #bd334a
}

@media(max-width:1100px) {
    .hr-permission-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .hr-permission-action {
        border-bottom: 1px solid #edf0f5
    }
}

@media(max-width:767.98px) {
    .hr-role-mode-tabs {
        display: flex
    }

    .hr-role-mode-tabs__item {
        flex: 1;
        justify-content: center
    }

    .hr-permission-toolbar {
        align-items: stretch;
        flex-direction: column
    }

    .hr-permission-role-field {
        width: 100%
    }

    .hr-permission-filters {
        grid-template-columns: 1fr
    }

    .hr-permission-module-filter {
        grid-template-columns: 1fr
    }

    .hr-permission-grid {
        grid-template-columns: 1fr
    }

    .hr-permission-action {
        border-right: 0
    }

    .hr-permission-savebar {
        bottom: 8px;
        align-items: stretch;
        flex-direction: column
    }

    .hr-permission-savebar>div {
        display: grid;
        grid-template-columns: 1fr 1fr
    }

    .hr-permission-savebar .im-btn {
        justify-content: center
    }
}

/* Settings pages share the main Kunos shell; tabs are for page subsections only. */
.settings-page-shell .breadcrumb {
    font-size: .8125rem;
}

/* Notifications tabs now reuse the Leave Application .im-leave-tab pill
   language; the old segmented settings-section-tab control was removed
   together with the rest of the generic Notifications styling. */
.routing-card {
    border: 1px solid var(--im-color-line);
    border-radius: 16px;
    box-shadow: none;
}

.routing-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 14px 0;
    border-top: 1px solid var(--im-color-line);
}

/* Compact Kunos empty state for Configured Rules (task section 35) —
   never an excessively tall empty card. */
.routing-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 28px 16px;
    text-align: center;
}

.routing-empty i {
    font-size: 24px;
    color: var(--im-color-text-soft);
    opacity: .5;
}

.routing-empty strong {
    font-size: 13.5px;
    color: var(--im-color-text);
}

.routing-empty span {
    font-size: 12.5px;
    color: var(--im-color-text-soft);
}

@media (max-width: 767px) {
    .routing-row {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* ==========================================================================
   Settings → Notifications — direct visual alignment with the HR → Leave
   Application page (/leave/applied-list). Everything structural comes from
   the shared Kunos system already used by that page: the layout's
   x-app-title page header, .im-leave-tab pill tabs, .im-section-heading +
   .im-card-title sections, .im-table-clean-wrap table surfaces, .im-chip
   status pills and the .im-btn family. Only Notifications-specific extras
   live below, namespaced .notif-* and scoped under .settings-notifications
   where shared components are tuned — no other page is affected.
   ========================================================================== */

/* Email channel switch — compact Kunos purple; scoped so the global
   form-switch used elsewhere is never touched. */
.settings-notifications .notif-switch {
    margin: 0;
}

.settings-notifications .notif-switch .form-check-input {
    width: 2.5em;
    height: 1.3em;
    margin: 0;
    cursor: pointer;
    border-color: #c8d4ea;
    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.settings-notifications .notif-switch .form-check-input:checked {
    background-color: var(--im-color-primary);
    border-color: var(--im-color-primary);
}

.settings-notifications .notif-switch .form-check-input:focus {
    border-color: var(--im-color-primary);
    box-shadow: 0 0 0 4px rgba(63, 65, 181, 0.15);
}

/* Channel columns visually centered (Module 50% / Email 25% / WhatsApp 25%
   colgroup lives in the Blade). */
.notif-table th.notif-col-channel,
.notif-table td.notif-col-channel {
    text-align: center;
}

/* Module column hierarchy — semibold Kunos navy title over a smaller muted
   grey-blue description (the Leave Category row rhythm). */
.notif-module strong {
    display: block;
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--im-color-text);
}

.notif-module small {
    display: block;
    margin-top: 2px;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--im-color-text-soft);
}

/* Save footer — attached directly under the matrix inside the
   .im-table-clean-wrap surface so the table radius clips it too. */
.notif-table-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 20px;
    border-top: 1px solid rgba(232, 237, 245, 0.95);
    background: var(--im-color-surface-soft);
}

.notif-table-footer__hint {
    font-family: var(--im-font-sans);
    font-size: 0.8125rem;
    color: var(--im-color-text-soft);
}

/* Recipient Rules — routing logic note (subtle, not a card). */
.notif-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 12px 16px;
    margin-bottom: 16px;
    border: 1px solid var(--im-color-info-soft);
    border-left: 3px solid var(--im-color-info);
    border-radius: 12px;
    background: #f8fbff;
    font-family: var(--im-font-sans);
    font-size: 0.8125rem;
    line-height: 1.55;
    color: var(--im-color-text-soft);
}

.notif-note i {
    margin-top: 2px;
    color: var(--im-color-info);
}

/* Recipient Rules — filter toolbar (module select + event search), sized
   to sit alongside .im-select-sm controls. */
.notif-routing-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.notif-routing-toolbar .im-select-sm {
    width: auto;
    min-width: 190px;
}

.notif-routing-search {
    position: relative;
    flex: 1;
    min-width: 220px;
    max-width: 420px;
}

.notif-routing-search i {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--im-color-text-soft);
    font-size: 0.875rem;
    pointer-events: none;
}

.notif-routing-search input {
    width: 100%;
    height: 38px;
    padding: 6px 14px 6px 38px;
    border: 1.5px solid var(--im-color-line);
    border-radius: var(--im-radius-control);
    background: #ffffff;
    font-family: var(--im-font-sans);
    font-size: 0.875rem;
    color: var(--im-color-text);
}

.notif-routing-search input::placeholder {
    color: var(--im-color-text-muted);
}

.notif-routing-search input:focus {
    outline: none;
    border-color: var(--im-color-primary);
    box-shadow: 0 0 0 4px rgba(63, 65, 181, 0.12);
}

.notif-routing-clear {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 8px;
    font-family: var(--im-font-sans);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--im-color-text-soft);
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.notif-routing-clear:hover {
    background: #eef2f7;
    color: var(--im-color-text);
    text-decoration: none;
}

/* Recipient Rules — recipient cells inside the event tables (name row over
   a muted meta row). */
.notif-recipient {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--im-font-sans);
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--im-color-text);
}

.notif-recipient i {
    color: var(--im-color-primary);
}

.notif-muted-inline {
    display: block;
    font-family: var(--im-font-sans);
    font-size: 0.75rem;
    color: var(--im-color-text-soft);
}

.notif-warning-inline {
    display: block;
    font-family: var(--im-font-sans);
    font-size: 0.75rem;
    color: var(--im-color-warning-ink);
}

/* Empty / not-yet-functional rows inside a rules table. */
.notif-empty-cell {
    text-align: center;
    color: var(--im-color-text-soft);
    font-size: 0.8125rem;
}

/* Compact action buttons inside rule rows — still the .im-btn family, just
   smaller so rows keep the Leave Application table rhythm. */
.settings-notifications .notif-btn-mini {
    min-height: 30px;
    padding: 0 12px;
    font-size: 0.75rem;
    gap: 5px;
}

/* Recipient Rules — compact single-table workspace (Settings UI/UX
   Consolidation, task section 12/13/14) replacing the old one-large-
   section-per-event structure. .notif-rules-table's own columns get a
   little breathing room; the expandable "Manage" panel is a second <tr>
   toggled by JS, styled as one continuous card-less surface (no card
   inside the table's own card). */
.notif-rules-table td {
    vertical-align: middle;
}

.notif-rules-row td code {
    font-size: 11px;
}

.notif-manage-panel td {
    background: var(--im-color-surface-soft, #f8fafc);
    padding: 0 !important;
}

.notif-manage-body {
    padding: 16px 20px;
}

.notif-manage-default {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    margin-bottom: 14px;
    border: 1px solid var(--im-color-line);
    border-radius: 10px;
    background: #ffffff;
}

.notif-manage-default i {
    color: var(--im-color-primary);
    font-size: 15px;
}

.notif-manage-default strong {
    display: block;
    font-size: 13px;
}

.notif-manage-default small {
    display: block;
    color: var(--im-color-text-soft);
    font-size: 11.5px;
}

.notif-manage-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}

/* Notifications — explicit "never a card" reset on the outer section
   wrapping the table on both My Preferences and Recipient Rules (task:
   "remove outer white wrapper behind table"). Audited both tabs' rendered
   HTML directly — .im-table-clean-wrap was already the only surface, no
   .im-card or equivalent background/border/shadow wrapped it — but this
   makes it explicit and unconditional rather than merely "never styled as
   one", so no future rule added elsewhere could accidentally give this
   section a card look again. */
.notif-preferences-section {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
    border-radius: 0;
}

/* Responsive — follow the existing Kunos behaviour: the preferences matrix
   stacks per module on phones (Email [ON] / WhatsApp Not available rows),
   the rules tables keep normal layout and scroll inside their own
   .table-responsive, and the body never overflows horizontally. */
@media (max-width: 767.98px) {
    .notif-routing-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .notif-routing-toolbar .im-select-sm {
        width: 100%;
    }

    .notif-routing-search {
        max-width: none;
    }

    .notif-table-footer {
        align-items: stretch;
        flex-direction: column-reverse;
        text-align: center;
    }

    .notif-table-footer .im-btn {
        width: 100%;
    }

    /* Preferences matrix: one stacked block per module row. Only the table
       inside .notif-matrix is affected — the recipient rules tables keep
       normal layout and scroll inside their rounded surface. */
    .notif-matrix .notif-table thead {
        display: none;
    }

    .notif-matrix .notif-table,
    .notif-matrix .notif-table tbody,
    .notif-matrix .notif-table tr,
    .notif-matrix .notif-table td {
        display: block;
        width: 100%;
    }

    .notif-matrix .notif-table tr {
        padding: 12px 16px;
        border-bottom: 1px solid var(--im-color-line);
    }

    .notif-matrix .notif-table tr:last-child {
        border-bottom: 0;
    }

    .notif-matrix .notif-table td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 6px 0;
        border-bottom: 0;
        background: transparent;
    }

    .notif-matrix .notif-table td[data-label]::before {
        content: attr(data-label);
        font-family: var(--im-font-sans);
        font-size: 0.65rem;
        font-weight: 800;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        color: var(--im-color-text-soft);
    }

    .notif-matrix .notif-module {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
        padding-bottom: 8px;
    }

    /* Rules tables scroll horizontally inside their rounded surface. */
    .notif-rule-table {
        min-width: 640px;
    }
}

/* Finance → Bookkeeping → Chart of Accounts — Kunos UI Alignment. Reuses
   established Kunos primitives throughout (.im-table-wrap/.im-table.is-
   compact for the single table surface, .im-chip for status, .im-btn for
   actions) — this block only supplies the page's own compact filter
   toolbar, section heading, code/hierarchy/type-pill helpers and empty
   state, mirroring the same compact-toolbar-plus-single-table-surface
   pattern already established for Attendance Reports (.atr-*) and the
   Roster (.ros-*) — never a new, independent design system. */
.gl-filters {
    padding: 14px 16px;
    margin-bottom: 16px;
}

.gl-filter-toolbar {
    display: grid;
    grid-template-columns: minmax(200px, 1.6fr) minmax(150px, 1fr) minmax(120px, .7fr) minmax(90px, .6fr) auto;
    gap: 10px;
    align-items: end;
}

.gl-filter-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-size: 11px;
}

.gl-filter-field span {
    color: var(--im-color-text-soft);
    font-weight: 700;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .03em;
}

.gl-filter-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Table surface cleanup — an older, broadly-scoped "#main .table-responsive,
   .table-responsive { border/border-radius:30px/background:#fff/margin-top:
   24px !important }" rule (written for a different table pattern elsewhere,
   see its own comment further up this file) was double-styling THIS page's
   .table-responsive from the inside: .im-table-wrap is already the one
   intended white rounded surface (border+radius+shadow, task section 1/2),
   so its child .table-responsive picking up a SECOND white background/
   border/30px-radius plus a 24px top margin read as a white card nested
   inside a white card, with the margin as the visible gap between them.
   Scoped to .gl-coa-page only (this page's own body class) — the shared
   .table-responsive rule itself is untouched for every page still using
   it. Needs #main in the selector purely to match/beat that rule's own
   specificity (it uses !important); nothing else on the page is affected. */
#main .gl-coa-page .table-responsive {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    margin-top: 0 !important;
}

.gl-section-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin: 4px 2px 10px;
}

.gl-section-title {
    margin: 0;
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--im-color-text-soft);
}

.gl-section-count {
    font-size: 12px;
    color: var(--im-color-text-soft);
    font-weight: 600;
}

.gl-code {
    font-family: var(--im-font-mono, monospace);
    font-weight: 700;
    letter-spacing: .02em;
}

/* Child rows show a subtle "corner" glyph + indent instead of raw padding
   alone (task: "readable but restrained", not a full tree UI). */
.gl-account-name {
    display: flex;
    align-items: center;
    gap: 6px;
}

.gl-account-name .bi-arrow-return-right {
    font-size: 12px;
    color: var(--im-color-text-soft);
}

.gl-type-pill {
    display: inline-flex;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    background: var(--im-color-surface-muted, #f1f5ff);
    color: var(--im-color-text-soft);
    white-space: nowrap;
}

.gl-actions-cell {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* Subtle helper note directly under the table surface (task section 27) —
   never floating body text far below. */
.gl-helper-note {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 10px 2px 0;
    font-size: 12px;
    color: var(--im-color-text-soft);
}

.gl-helper-note i {
    font-size: 13px;
}

.gl-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 56px 20px;
    text-align: center;
}

.gl-empty i {
    font-size: 30px;
    color: var(--im-color-text-soft);
    opacity: .5;
}

.gl-empty h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 800;
    color: var(--im-color-text);
}

.gl-empty p {
    margin: 0;
    font-size: 13px;
    color: var(--im-color-text-soft);
    max-width: 380px;
}

.gl-empty-actions {
    display: flex;
    gap: 10px;
    margin-top: 6px;
    flex-wrap: wrap;
    justify-content: center;
}

/* Column proportions (desktop, task section 13) — applied via <colgroup>. */
.gl-col-code {
    width: 14%;
}

.gl-col-account {
    width: 28%;
}

.gl-col-type {
    width: 18%;
}

.gl-col-parent {
    width: 22%;
}

.gl-col-status {
    width: 10%;
}

.gl-col-actions {
    width: 8%;
}

@media (max-width: 900px) {
    .gl-filter-toolbar {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 480px) {
    .gl-filter-toolbar {
        grid-template-columns: 1fr;
    }

    .gl-section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }
}

/* Settings — AI Settings → Integrations tab (Settings UI/UX Consolidation).
   Compact 2-column card grid replacing the old standalone Integrations
   page's tall, inconsistent Bootstrap .card markup — reuses .im-card/
   .im-chip/.im-btn/.im-input throughout, this block only supplies the
   grid/card-internal layout. */
.ai-integration-group {
    margin-bottom: 22px;
}

.ai-integration-group:last-child {
    margin-bottom: 0;
}

.ai-integration-group__title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 10px;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--im-color-text-soft);
}

/* System Settings Card Workspace (task): compact Form-Builder-template-style
   overview grid — 3 columns where content width allows, 2 at narrower
   desktop/tablet, 1 on mobile (task's own suggested concept), reusing this
   page's existing .ai-integration-card/.im-card.ai-card visual language
   (already matches Form Builder's .fbt-card look: white surface, subtle
   border, 16px radius, no heavy shadow — see the .ai-card rule in this
   file's own <style> block) rather than importing a second, duplicate card
   system. Content-driven height only — no forced equal-height stretching
   beyond CSS Grid's normal row-alignment. */
.ai-integration-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

@media (max-width: 1100px) {
    .ai-integration-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .ai-integration-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Compact 1–2 line overview summary (Credential Source / Environment / Last
   Test / etc.) — never the full configuration form. Deliberately plain
   text, not another form control, so nothing here can be mistaken for an
   editable field on the overview card (task section 5: no secrets, no long
   helper text, no full forms on the overview). */
.ai-integration-card__summary {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 2px 0 0;
}

.ai-integration-card__summary div {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    font-size: 11.5px;
}

.ai-integration-card__summary dt {
    color: var(--im-color-text-soft);
    font-weight: 600;
}

.ai-integration-card__summary dd {
    margin: 0;
    color: var(--im-color-text);
    font-weight: 700;
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Card-Based Workspace — the overview card itself is the click target (task
   section 9: "clicking Configure or clicking the safe main body of the card
   should open the drawer"), not just the button. A real <button> stays the
   keyboard/screen-reader path (task section 36); the wrapping click is a
   progressive-enhancement convenience on top of it, wired in JS by
   forwarding a click anywhere on [data-ss-card] to its own Configure
   button, never by making the card div itself the only actionable element. */
.ai-integration-card[data-ss-card] {
    cursor: pointer;
}

/* System Settings > AI Providers: one compact Form Builder-style overview
   grid. Provider configuration remains in the existing drawers. */
.ai-provider-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    align-items: stretch
}

.ai-provider-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 20px;
    gap: 18px;
    transition: border-color .15s ease, box-shadow .15s ease
}

.ai-provider-card[data-ss-card] {
    cursor: pointer
}

.ai-provider-card:hover {
    border-color: #c7cff0;
    box-shadow: 0 6px 18px rgba(26, 38, 67, .08)
}

.ai-provider-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    min-width: 0
}

.ai-provider-card__head>.im-chip {
    flex: 0 0 auto;
    max-width: 46%;
    text-align: center;
    white-space: normal
}

.ai-provider-card__identity {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
    flex: 1
}

.ai-provider-card__icon {
    display: inline-grid;
    place-items: center;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: #efefff;
    color: #4946c8;
    font-size: 18px
}

.ai-provider-card__identity h5 {
    margin: 0;
    color: var(--im-color-text, #17243b);
    font-size: 15px;
    font-weight: 800;
    line-height: 1.3
}

.ai-provider-card__identity small {
    display: block;
    margin-top: 3px;
    color: var(--im-color-text-soft, #69758a);
    font-size: 12px;
    line-height: 1.35
}

.ai-provider-card__meta {
    display: grid;
    gap: 9px;
    margin: 0
}

.ai-provider-card__meta>div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 12px;
    align-items: baseline
}

.ai-provider-card__meta dt {
    color: var(--im-color-text-soft, #69758a);
    font-size: 11.5px;
    font-weight: 600
}

.ai-provider-card__meta dd {
    margin: 0;
    color: var(--im-color-text, #17243b);
    font-size: 12px;
    font-weight: 750;
    text-align: right;
    overflow-wrap: anywhere
}

.ai-provider-card__actions {
    display: flex;
    justify-content: flex-start;
    margin-top: auto;
    padding-top: 2px
}

.ai-privacy-panel {
    margin-top: 20px;
    padding: 18px 20px;
    border: 1px solid var(--im-color-line, #dde4f0);
    border-radius: 14px;
    background: var(--im-color-surface-soft, #f8faff)
}

.ai-privacy-panel__heading {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 16px
}

.ai-privacy-panel__heading h6 {
    margin: 0;
    color: var(--im-color-text, #17243b);
    font-size: 14px;
    font-weight: 800
}

.ai-privacy-panel__heading p {
    margin: 2px 0 0;
    color: var(--im-color-text-soft, #69758a);
    font-size: 12px
}

.ai-privacy-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin: 0
}

.ai-privacy-grid>div {
    min-width: 0;
    padding: 11px 12px;
    border: 1px solid var(--im-color-line, #dde4f0);
    border-radius: 10px;
    background: #fff
}

.ai-privacy-grid dt {
    color: var(--im-color-text-soft, #69758a);
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1.35
}

.ai-privacy-grid dd {
    margin: 4px 0 0;
    color: var(--im-color-text, #17243b);
    font-size: 12.5px;
    font-weight: 800
}

@media (max-width: 1100px) {
    .ai-provider-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .ai-privacy-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }
}

@media (max-width: 640px) {
    .ai-provider-grid,
    .ai-privacy-grid {
        grid-template-columns: minmax(0, 1fr)
    }

    .ai-provider-card {
        padding: 16px
    }

    .ai-provider-card__head {
        flex-wrap: wrap
    }

    .ai-provider-card__head>.im-chip {
        max-width: 100%
    }
}

/* One right-side slide drawer positioning pattern, reused for every System
   Settings configuration drawer (task section 9/10: "use an existing Kunos
   drawer component/pattern... do not create a completely new drawer
   system"). Positioning here mirrors the established CRM drawer recipe
   (Modules/CRM .crm-drawer/.crm-drawer-overlay: fixed right-side panel,
   translateX slide, matching overlay) exactly, at the shared, page-neutral
   --im-drawer-width token (already min(560px,100%) — inside the task's
   520–680px target) rather than the CRM module's own narrower override, so
   this stays a generic System Settings drawer and not a borrowed CRM one.
   The internal layout (header/title/subtitle/body/footer) reuses the
   existing, already page-neutral .im-drawer-* classes verbatim — see
   attendance/holiday's own drawers — so no new internal layout CSS was
   needed at all. */
.ss-drawer-overlay {
    position: fixed;
    inset: 0;
    z-index: 1040;
    background: rgba(15, 23, 42, .45);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .2s ease, visibility .2s ease;
}

.ss-drawer-overlay.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* System Settings Right-Edge Gradient Fix (task): box-shadow used to sit
   unconditionally on the base .ss-drawer rule. transform moves the drawer's
   painted box (shadow included) by only its OWN width (translateX(100%) =
   560px here), but the shadow's own reach (-20px offset + 40px blur ≈ 60px)
   is a fixed pixel value that doesn't scale with that translation — so
   ~60px of blurred shadow still landed back inside the viewport at the
   right edge even fully closed, which is exactly the dark gradient bug.
   Moving the shadow to .is-open only (task's own preferred pattern) means
   the closed drawer paints zero pixels — no shadow, no overflow, nothing
   to bleed — while the open drawer keeps its intended soft separation. */
.ss-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: var(--im-drawer-width);
    max-width: 100%;
    z-index: 1045;
    transform: translateX(100%);
    transition: transform .25s ease, box-shadow .25s ease;
    box-shadow: none;
}

.ss-drawer.is-open {
    transform: translateX(0);
    box-shadow: var(--im-shadow-lg, -20px 0 40px rgba(15, 23, 42, .12));
}

.ss-drawer .im-drawer {
    height: 100%;
    width: 100%;
    border-left: 0;
    /* .im-drawer's own base rule (public/assets/css/style.css ~L25124)
       carries its own unconditional box-shadow, independent of .ss-drawer's.
       As a nested child here, it moves with the same parent transform and
       reproduces the identical right-edge bleed even after gating
       .ss-drawer's own shadow to .is-open — the outer .ss-drawer.is-open
       shadow already supplies the one intended separation, so this inner
       duplicate is dropped entirely rather than also state-gated. */
    box-shadow: none;
}

/* One footer contract for every System Settings configuration drawer:
   secondary Cancel first, primary Save immediately after it, both left
   aligned. The footer remains outside the scrollable body and sticky at the
   bottom through the shared .im-drawer-footer foundation. */
.ss-drawer-footer {
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 16px 20px calc(16px + env(safe-area-inset-bottom, 0px));
    background: #fff
}

body.ss-settings-drawer-open .bos-ai-launcher,
body.ss-settings-drawer-open .bos-ai-window {
    display: none !important
}

@media (max-width: 575.98px) {
    .ss-drawer {
        width: 100%;
    }
}

.ai-integration-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ai-integration-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.ai-integration-card__id {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ai-integration-card__id i {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: var(--im-color-surface-muted, #f1f5ff);
    color: var(--im-color-primary);
    font-size: 16px;
}

.ai-integration-card__id h5 {
    margin: 0;
    font-size: 14px;
    font-weight: 800;
}

.ai-integration-card__id small {
    display: block;
    color: var(--im-color-text-soft);
    font-size: 11.5px;
}

.ai-integration-card p.im-text-caption {
    margin: 0;
}

.ai-integration-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 2px;
}

.ai-integration-switch {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--im-color-text-soft);
}

.ai-integration-switch input {
    width: 16px;
    height: 16px;
}

.ai-integration-notice {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    padding: 8px 10px;
    border-radius: 10px;
    background: var(--im-color-surface-muted, #f8fafc);
    font-size: 11.5px;
    color: var(--im-color-text-soft);
}

.ai-integration-notice code {
    font-size: 11px;
}

.ai-segmented {
    display: inline-flex;
    border: 1px solid var(--im-color-line);
    border-radius: 8px;
    padding: 2px;
    gap: 2px;
    background: var(--im-color-surface-soft, #f8faff);
}

.ai-segmented__opt {
    padding: 4px 14px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--im-color-text-soft);
    cursor: pointer;
    user-select: none;
    transition: all 0.15s ease;
    margin-bottom: 0;
}

.ai-segmented__opt input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.ai-segmented__opt.is-active {
    background: var(--im-color-primary, #0d6efd);
    color: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

.myinvois-warning-inline {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 6px;
    background: #fff8e6;
    border: 1px solid #ffd591;
    color: #d46b08;
    font-size: 11.5px;
    font-weight: 500;
}

@media (max-width: 900px) {
    .ai-integration-grid {
        grid-template-columns: 1fr;
    }
}

/* System Settings UI Polish (task): CSS Grid items stretch to the tallest
   item in their row by default, so a 2-column pair with mismatched content
   (e.g. Google Maps' longer form next to a shorter card) was forced to
   equal height, producing large blank areas in the shorter card — task
   section 6: "Do NOT force equal heights if it creates large blank areas.
   Use align-items: start". */
.ai-integration-grid {
    align-items: start;
}

/* System Settings tab navigation — previously bare Bootstrap .nav-tabs
   with no Kunos styling (task section 3: "no tab looks like a random
   standalone button"). Mirrors the established compact underline-tab
   recipe already used elsewhere in Kunos (Logistics .log-mgmt-tabs) —
   quiet inactive tabs, Kunos-purple active underline.

   System Settings Final UI Polish (task): the previous rule applied
   `overflow-x: auto` unconditionally, which shows a visible grey
   scrollbar under the tab strip on desktop even though all five tabs
   fit the available width — this was the root selector for that bug
   (audited: no other selector — .nav, .tab-content, an inner wrapper,
   or an explicit height/max-height — was involved). Desktop now uses
   plain `flex-wrap: nowrap; overflow: visible` (task's own preferred
   concept) so the strip never scrolls when everything fits; horizontal
   scroll is reintroduced only inside the narrow-screen media query
   below, with its native scrollbar hidden (still swipe/trackpad
   scrollable — scrolling itself is never disabled). Label gap dropped
   from 4px to 0 — each .nav-link already carries 16px of its own
   horizontal padding, so adjacent labels sit 32px apart (task's
   24–32px target) without adding a redundant explicit gap on top. */
.ai-settings .nav-tabs {
    display: flex;
    border-bottom: 2px solid var(--im-color-line);
    gap: 0;
    flex-wrap: nowrap;
    overflow: visible;
    margin-bottom: 4px;
}

.ai-settings .nav-tabs .nav-link {
    border: 0;
    border-bottom: 3px solid transparent;
    border-radius: 0;
    padding: 10px 16px;
    font-size: 13.5px;
    font-weight: 800;
    color: var(--im-color-text-soft);
    white-space: nowrap;
}

.ai-settings .nav-tabs .nav-link:hover {
    color: var(--im-color-primary);
}

.ai-settings .nav-tabs .nav-link.active {
    color: var(--im-color-primary);
    border-color: var(--im-color-primary);
    background: transparent;
}

/* Only genuinely narrow screens (where five tabs cannot fit) get the
   scroll back — swipe/trackpad-scrollable, never disabled — with its
   native scrollbar hidden using cross-browser-safe scrollbar hiding, so
   the desktop-only bug this task fixes never returns on mobile. */
@media (max-width: 575.98px) {
    .ai-settings .nav-tabs {
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .ai-settings .nav-tabs::-webkit-scrollbar {
        display: none;
    }
}

.gl-import-page .table-responsive,
.gl-import-section .table-responsive {
    margin-bottom: 18px
}

.gl-import-page .im-table thead th:first-child {
    border-top-left-radius: 8px
}

.gl-import-page .im-table thead th:last-child {
    border-top-right-radius: 8px
}

.gl-import-page .im-table tbody tr:hover td {
    background: var(--im-color-surface-muted, #f8faff)
}

.gl-import-page {
    min-width: 0
}

.gl-import-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 18px;
    border-bottom: 1px solid var(--im-color-line)
}

.gl-import-tabs a {
    padding: 11px 16px;
    border-bottom: 3px solid transparent;
    color: var(--im-color-text-soft);
    font-weight: 700;
    text-decoration: none
}

.gl-import-tabs a.active {
    border-color: var(--im-color-primary);
    color: var(--im-color-primary)
}

.gl-import-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin: 0 0 18px;
    padding: 0;
    list-style: none
}

.gl-import-steps li {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--im-color-text-soft);
    font-size: 12px;
    font-weight: 700
}

.gl-import-steps li:after {
    content: '';
    height: 1px;
    flex: 1;
    background: var(--im-color-line)
}

.gl-import-steps li:last-child:after {
    display: none
}

.gl-import-steps span {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border: 1px solid var(--im-color-line);
    border-radius: 50%;
    background: #fff
}

.gl-import-steps .active,
.gl-import-steps .done {
    color: var(--im-color-primary)
}

.gl-import-steps .active span,
.gl-import-steps .done span {
    border-color: var(--im-color-primary);
    background: var(--im-color-primary);
    color: #fff
}

.gl-import-section,
.gl-import-complete {
    padding: 22px;
    border: 1px solid var(--im-color-line);
    border-radius: 16px;
    background: var(--im-color-surface);
    box-shadow: var(--im-shadow-sm)
}

.gl-import-section-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 18px
}

.gl-import-section-head h2,
.gl-import-complete h2 {
    margin: 0;
    font-size: 18px
}

.gl-import-section-head p {
    margin: 4px 0 0;
    color: var(--im-color-text-soft);
    font-size: 13px
}

.gl-import-section-head>span {
    color: var(--im-color-text-soft);
    font-size: 12px
}

.gl-batch-name {
    display: grid;
    gap: 6px;
    max-width: 520px;
    margin-bottom: 16px;
    font-size: 12px;
    font-weight: 700
}

.gl-batch-name small {
    color: var(--im-color-text-soft);
    font-weight: 500
}

.gl-upload-zone {
    display: flex;
    min-height: 220px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 6px;
    border: 1.5px dashed var(--im-color-line-strong);
    border-radius: 15px;
    background: var(--im-color-surface-soft);
    text-align: center;
    cursor: pointer
}

.gl-upload-zone input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0
}

.gl-upload-zone i {
    font-size: 34px;
    color: var(--im-color-primary)
}

.gl-upload-zone span,
.gl-upload-zone small {
    color: var(--im-color-text-soft)
}

.gl-mapping-scroll {
    max-width: 100%;
    overflow-x: auto
}

.gl-mapping-grid {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(210px, 1fr);
    gap: 10px;
    min-width: max-content;
    padding-bottom: 8px
}

.gl-mapping-column {
    width: 220px;
    padding: 12px;
    border: 1px solid var(--im-color-line);
    border-radius: 12px;
    background: var(--im-color-surface-soft)
}

.gl-mapping-column .im-select {
    width: 100%
}

.gl-mapping-column h3 {
    margin: 12px 0 7px;
    font-size: 12px
}

.gl-mapping-column ul {
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--im-color-text-soft);
    font-size: 11px
}

.gl-mapping-column li {
    padding: 3px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.gl-mapping-footer,
.gl-confirm-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 16px
}

.gl-mapping-footer>[data-mapping-error] {
    margin-left: auto;
    font-size: 12px
}

.gl-import-summary {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    margin: 0 0 18px;
    border: 1px solid var(--im-color-line);
    border-radius: 12px;
    overflow: hidden
}

.gl-import-summary span,
.gl-import-meta span {
    padding: 12px;
    color: var(--im-color-text-soft);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase
}

.gl-import-summary span+span {
    border-left: 1px solid var(--im-color-line)
}

.gl-import-summary strong,
.gl-import-meta strong {
    display: block;
    margin-top: 3px;
    color: var(--im-color-text);
    font-size: 18px;
    text-transform: none
}

/* Bukku GL Sync Preview UI/UX Redesign (task) — every rule below is scoped
   under .gl-sync-* so the shared .gl-import-summary/.gl-import-section/
   .im-table-pagination/.im-chip primitives stay unaffected on the two other
   pages that already use them (import.blade.php, import-history-show.
   blade.php). Presentation only — no rule here reflects or alters batch
   readiness/mapping/matching logic. */

/* One purple chip variant added — New/Suggested/Blocked already had a chip
   (info/warning), Unchanged reuses muted; Update had no distinct color. */
.im-chip-primary {
    background: var(--im-color-primary-soft, #f0efff);
    color: var(--im-color-primary-strong, #3f41b5);
}

.gl-sync-context {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    padding: 14px 18px;
    margin-bottom: 16px;
    border: 1px solid var(--im-color-line);
    border-radius: 14px;
    background: var(--im-color-surface);
}

.gl-sync-context__id {
    display: flex;
    align-items: center;
    gap: 12px;
}

.gl-sync-context__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: var(--im-color-primary-soft, #efefff);
    color: var(--im-color-primary);
    font-size: 1.05rem;
    flex: 0 0 auto;
}

.gl-sync-context__id strong {
    display: block;
    font-size: 14px;
}

.gl-sync-context__id small {
    display: block;
    color: var(--im-color-text-soft);
    font-size: 11.5px;
}

.gl-sync-context__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
}

.gl-sync-context__meta>div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.gl-sync-context__meta span {
    color: var(--im-color-text-soft);
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.gl-sync-context__meta strong {
    font-size: 13px;
    font-weight: 700;
}

/* Summary cards as real, keyboard-accessible filter buttons — the grid/
   divider look is inherited from .gl-import-summary (kept on the same
   element); only the button-reset + responsive breakpoints + active/amber
   states are added here. */
.gl-sync-summary {
    margin-bottom: 14px;
}

.gl-sync-summary__cell {
    display: block;
    width: 100%;
    border: 0;
    background: transparent;
    text-align: left;
    cursor: pointer;
    border-radius: 0;
}

.gl-sync-summary__cell+.gl-sync-summary__cell {
    border-left: 1px solid var(--im-color-line);
}

.gl-sync-summary__cell:hover {
    background: var(--im-color-surface-soft, #f8faff);
}

.gl-sync-summary__cell[aria-pressed="true"] {
    background: var(--im-color-primary-soft, #efefff);
}

.gl-sync-summary__cell.is-amber strong {
    color: var(--im-color-warning-ink);
}

@media (max-width: 900px) {
    .gl-sync-summary.gl-import-summary {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .gl-sync-summary__cell:nth-child(3n+1) {
        border-left: 0;
    }

    .gl-sync-summary__cell:nth-child(n+4) {
        border-top: 1px solid var(--im-color-line);
    }
}

@media (max-width: 520px) {
    .gl-sync-summary.gl-import-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .gl-sync-summary__cell:nth-child(3n+1) {
        border-left: 1px solid var(--im-color-line);
    }

    .gl-sync-summary__cell:nth-child(2n+1) {
        border-left: 0;
    }

    .gl-sync-summary__cell:nth-child(n+3) {
        border-top: 1px solid var(--im-color-line);
    }
}

/* Readiness banner — compact, not a full-width heavy strip. */
.gl-sync-readiness {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding: 12px 16px;
    margin-bottom: 16px;
    border-radius: 12px;
    border: 1px solid transparent;
}

.gl-sync-readiness--amber {
    background: var(--im-color-warning-soft);
    border-color: color-mix(in srgb, var(--im-color-warning-ink) 25%, transparent);
}

.gl-sync-readiness--amber>div:first-child {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.gl-sync-readiness--amber>div:first-child>i {
    color: var(--im-color-warning-ink);
    font-size: 1.05rem;
    margin-top: 2px;
}

.gl-sync-readiness strong {
    display: block;
    font-size: 13.5px;
}

.gl-sync-readiness span {
    display: block;
    font-size: 12.5px;
    color: var(--im-color-text-soft);
    max-width: 60ch;
}

.gl-sync-readiness--green {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--im-color-success-soft);
    border-color: color-mix(in srgb, var(--im-color-success-ink) 25%, transparent);
}

.gl-sync-readiness--green>i {
    color: var(--im-color-success-ink);
    font-size: 1.1rem;
}

.gl-sync-readiness__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    position: relative;
}

.gl-sync-reason-popover {
    position: relative;
}

.gl-sync-reason-popover__panel {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 20;
    min-width: 220px;
    padding: 10px 12px;
    border: 1px solid var(--im-color-line);
    border-radius: 12px;
    background: var(--im-color-surface);
    box-shadow: var(--im-shadow-lg, 0 20px 48px rgba(37, 42, 114, .12));
}

.gl-sync-reason-popover__panel>div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 4px 0;
    font-size: 12px;
}

.gl-sync-reason-popover__panel strong {
    color: var(--im-color-warning-ink);
}

/* Review toolbar */
.gl-sync-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 14px;
}

.gl-sync-toolbar__filters {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    flex: 1 1 auto;
    min-width: 0;
}

/* Compact desktop toolbar (task): search ~40%, each select a fixed 220px —
   width set explicitly alongside flex-basis (redundant on purpose) so
   .im-select's own base `width: 100%` can never win the sizing decision.
   flex-shrink: 0 on the selects means they hold their 220px until the
   @media stack breakpoint below, rather than being squeezed by the search
   box first. */
.gl-sync-toolbar__filters #glSyncSearch {
    flex: 1 1 40%;
    width: 40%;
    min-width: 200px;
    min-height: 40px;
    border-radius: 12px;
}

.gl-sync-toolbar__filters select {
    flex: 0 0 220px;
    width: 220px;
    min-height: 40px;
    border-radius: 12px;
}

@media (max-width: 640px) {
    .gl-sync-toolbar__filters #glSyncSearch,
    .gl-sync-toolbar__filters select {
        flex: 1 1 100%;
        width: 100%;
    }
}

.gl-sync-toolbar__count {
    color: var(--im-color-text-soft);
    font-size: 12.5px;
    font-weight: 700;
    white-space: nowrap;
}

.gl-sync-toolbar__count span {
    color: var(--im-color-text);
    font-size: 14px;
}

/* Table surface */
.gl-sync-table-wrap {
    margin-bottom: 90px;
}

/* Kept as the overflow *safety net* only (task: "do not hide overflowing
   content as a workaround") — a genuinely narrow viewport can still
   scroll internally rather than breaking the page, but table-layout:fixed
   + percentage columns below mean normal desktop widths never need to. */
.gl-sync-table-scroll {
    max-width: 100%;
    overflow-x: auto;
}

/* Fit-to-card table (task): width:100% + table-layout:fixed makes the
   percentage column widths below actually authoritative, instead of the
   browser sizing columns from content (which is what was forcing the
   table wider than .im-table-wrap and triggering the horizontal
   scrollbar). Percentages sum to 100 and mirror the task's own proportions. */
.gl-sync-table {
    width: 100%;
    table-layout: fixed;
}

.gl-sync-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #f8fbff;
}

/* Global "#main table td/th" (BATCH 4) padding (20-24px/22-24px) is what
   made every column wider than it needed to be on top of the min-widths
   below — same class of fix already applied to Usage Logs/.gl-coa-page
   elsewhere in this file, scoped to this table only. */
#main .gl-sync-table thead th,
#main .gl-sync-table tbody td {
    padding: 12px 14px !important;
}

.gl-sync-col-code {
    width: 9%;
}

.gl-sync-col-account {
    width: 17%;
}

.gl-sync-col-type {
    width: 15%;
}

.gl-sync-col-parent {
    width: 11%;
}

.gl-sync-col-remote {
    width: 14%;
}

.gl-sync-col-status {
    width: 10%;
}

.gl-sync-col-action {
    width: 24%;
}

/* Code/Status stay compact and unwrapped; Account/Type/Parent/Bukku
   Account clip long values with an ellipsis rather than forcing column
   growth (title attribute already present on the Parent cell for the
   full value); Issue/Action is the one column allowed to wrap (task). */
.gl-sync-col-code,
.gl-sync-col-status,
.gl-sync-table tbody td:nth-child(1),
.gl-sync-table tbody td:nth-child(6) {
    white-space: nowrap;
}

.gl-sync-table tbody td:nth-child(2),
.gl-sync-table tbody td:nth-child(3),
.gl-sync-table tbody td:nth-child(4),
.gl-sync-table tbody td:nth-child(5) {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Issue/Action: the reason text+icon and the Resolve/Edit Mapping button
   are sibling inline elements in this one cell — laying the cell out as a
   tight-gapped flex row (wrapping to its own line only if genuinely
   needed) keeps them close together and guarantees the button is never
   clipped, instead of relying on each element's own margin (task). */
.gl-sync-table tbody td:nth-child(7) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    white-space: normal;
    overflow-wrap: anywhere;
}

.gl-sync-resolve-link,
.gl-sync-override-note .gl-sync-resolve-link {
    margin-top: 0;
    flex: 0 0 auto;
}

.gl-sync-code {
    padding: 2px 6px;
    border-radius: 6px;
    background: var(--im-color-surface-soft, #f1f5f9);
    font-family: var(--im-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    font-size: 12.5px;
    font-weight: 700;
    color: var(--im-color-text);
}

.gl-sync-code--muted {
    background: transparent;
    padding-left: 0;
    color: var(--im-color-text-soft);
}

.gl-sync-remote {
    font-size: 13px;
}

.gl-sync-issue {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    color: var(--im-color-warning-ink);
}

.gl-sync-issue__tip {
    color: var(--im-color-text-soft);
    cursor: help;
}

/* Blocked row emphasis — a quiet left accent, never a saturated background. */
.gl-sync-row--blocked {
    border-left: 3px solid var(--im-color-warning-ink);
    background: color-mix(in srgb, var(--im-color-warning-soft) 45%, transparent);
}

.gl-sync-row--blocked td:first-child {
    padding-left: calc(1rem - 3px);
}

.gl-sync-empty {
    padding: 32px 0;
    text-align: center;
}

.gl-sync-pagesize {
    display: flex;
    align-items: center;
    gap: 6px;
}

.gl-sync-pagesize select {
    width: 68px;
}

/* Sticky bottom action bar (task section 20-22: simplified, no longer a
   giant rounded card) — a slim in-content bar: top border only, no
   surrounding border/radius, a very light shadow, compact padding.
   Page-level (not a drawer footer), so right-aligned actions are
   acceptable per the task's own explicit exception for this page. */
.gl-sync-actionbar {
    position: sticky;
    bottom: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding: 12px 4px;
    margin-top: 8px;
    border: 0;
    border-top: 1px solid var(--im-color-line);
    border-radius: 0;
    background: rgba(255, 255, 255, .97);
    backdrop-filter: blur(8px);
    box-shadow: 0 -4px 10px rgba(15, 23, 42, .04);
}

.gl-sync-actionbar__summary {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 13px;
    font-weight: 700;
}

.gl-sync-actionbar__summary i {
    color: var(--im-color-warning-ink);
}

.gl-sync-actionbar__summary.is-ready i {
    color: var(--im-color-success-ink);
}

.gl-sync-actionbar__actions {
    display: flex;
    gap: 10px;
}

.gl-sync-actionbar__helper {
    flex-basis: 100%;
    margin: 0;
    text-align: right;
}

@media (max-width: 700px) {
    .gl-sync-actionbar {
        flex-direction: column;
        align-items: stretch;
    }

    .gl-sync-actionbar__actions {
        justify-content: stretch;
    }

    .gl-sync-actionbar__actions .im-btn {
        flex: 1 1 auto;
    }

    .gl-sync-actionbar__helper {
        text-align: left;
    }
}

/* Bukku Mapping Resolution UX (task) — the table's outer .im-table-wrap is
   already the one intended white rounded surface (task section 16); the
   older, broadly-scoped "#main .table-responsive, .table-responsive
   {border/border-radius:30px/background:#fff/margin-top:24px !important}"
   rule (see the identical .gl-coa-page fix elsewhere in this file) was
   still double-styling this page's own .table-responsive from the inside,
   reading as a white card nested inside a white card. Scoped to
   .gl-sync-page only — every other page still using the shared rule is
   untouched. */
#main .gl-sync-page .table-responsive {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    margin-top: 0 !important;
}

/* "Resolve Mapping" / "Edit Mapping" — soft lavender secondary link, never
   primary purple (task section 2). */
.gl-sync-resolve-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 2px;
    padding: 3px 10px;
    border: 0;
    border-radius: 999px;
    background: var(--im-color-primary-soft, #efefff);
    color: var(--im-color-primary-strong, #3f41b5);
    font-size: 11.5px;
    font-weight: 700;
    cursor: pointer;
}

.gl-sync-resolve-link:hover {
    background: color-mix(in srgb, var(--im-color-primary-soft, #efefff) 70%, var(--im-color-primary) 15%);
}

/* Subtle "Bukku Type: X (manual)" note shown once an override is active —
   never makes the row look like an unexplained exception (task section 13). */
.gl-sync-override-note {
    display: block;
    margin-top: 2px;
    font-size: 11px;
    color: var(--im-color-text-soft);
}

.gl-sync-override-note strong {
    color: var(--im-color-primary-strong, #3f41b5);
    font-weight: 700;
}

.gl-result {
    display: inline-flex;
    padding: 4px 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800
}

.gl-result-new {
    background: var(--im-color-success-soft);
    color: var(--im-color-success-ink)
}

.gl-result-update {
    background: var(--im-color-info-soft);
    color: var(--im-color-info-ink)
}

.gl-result-unchanged {
    background: var(--im-color-surface-muted);
    color: var(--im-color-text-soft)
}

.gl-result-rejected {
    background: var(--im-color-danger-soft);
    color: var(--im-color-danger-ink)
}

.gl-confirm-bar>div,
.gl-confirm-bar>div:last-child {
    display: flex;
    align-items: center;
    gap: 10px
}

.gl-confirm-bar strong,
.gl-confirm-bar span {
    display: block
}

.gl-confirm-bar span {
    color: var(--im-color-text-soft);
    font-size: 12px
}

.gl-import-complete {
    text-align: center
}

.gl-complete-icon {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    margin: 0 auto 12px;
    border-radius: 50%;
    background: var(--im-color-success-soft);
    color: var(--im-color-success-ink);
    font-size: 24px
}

.gl-import-complete>p {
    color: var(--im-color-text-soft)
}

.gl-import-meta {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin: 18px 0
}

.gl-import-meta strong {
    font-size: 13px
}

.gl-history-filter {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) 120px auto auto;
    gap: 8px;
    margin-bottom: 14px
}

.gl-import-empty {
    display: flex;
    min-height: 180px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
    color: var(--im-color-text-soft)
}

.gl-import-empty i {
    font-size: 28px
}

.gl-history-detail {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-bottom: 18px;
    border: 1px solid var(--im-color-line);
    border-radius: 12px;
    overflow: hidden
}

.gl-history-detail div {
    padding: 12px;
    border-bottom: 1px solid var(--im-color-line)
}

.gl-history-detail div:nth-child(odd) {
    border-right: 1px solid var(--im-color-line)
}

.gl-history-detail .wide {
    grid-column: 1/-1;
    border-right: 0
}

.gl-history-detail dt {
    color: var(--im-color-text-soft);
    font-size: 10px;
    text-transform: uppercase
}

.gl-history-detail dd {
    margin: 4px 0 0;
    overflow-wrap: anywhere;
    font-size: 13px;
    font-weight: 650
}

@media(max-width:767.98px) {
    .gl-import-steps {
        grid-template-columns: 1fr 1fr;
        gap: 10px
    }

    .gl-import-steps li:after {
        display: none
    }

    .gl-import-section,
    .gl-import-complete {
        padding: 15px
    }

    .gl-import-summary {
        grid-template-columns: repeat(2, 1fr)
    }

    .gl-import-summary span+span {
        border-left: 0;
        border-top: 1px solid var(--im-color-line)
    }

    .gl-history-filter {
        grid-template-columns: 1fr
    }

    .gl-confirm-bar,
    .gl-mapping-footer {
        align-items: stretch;
        flex-direction: column
    }

    .gl-confirm-bar>div:last-child {
        width: 100%;
        flex-wrap: wrap
    }

    .gl-confirm-bar .im-btn {
        flex: 1
    }

    .gl-history-detail {
        grid-template-columns: 1fr
    }

    .gl-history-detail div:nth-child(odd) {
        border-right: 0
    }

    .gl-history-detail .wide {
        grid-column: auto
    }

    .gl-import-meta {
        align-items: center;
        flex-direction: column;
        gap: 8px
    }
}

/* Finance Bookkeeping Phase 1B-1 — Manual Expense + Dual Currency workspace
   (.fex-*). Reuses .im-card/.im-table-wrap/.im-table/.im-chip/.im-icon-btn/
   .gl-filters/.gl-section-header/.gl-empty/.gl-helper-note/.gl-actions-cell
   throughout — this block only supplies what those shared classes don't
   already cover: the filter grid, the source badge, the currency/amount
   cells, and the create/edit form layout. Never a page-specific CSS file —
   all rules live in this one stylesheet per Kunos convention.

   Filter grid — named grid-template-areas, one area per field
   (.fex-filter-search/-status/-method/-origin/-dates/-rows/-actions), fixed
   after a real regression: an earlier grid-template-columns list only ever
   defined 6 tracks for what had grown to 7 DOM items (Search/Status/
   Method/Origin/Payment-Date/Rows/Filter), relying purely on source order.
   Method's track ended up sized for Payment Date, Payment Date was forced
   into a track barely wide enough for one input (let alone the two-input
   date range), and Filter had no track left at all — it fell to an
   implicit new row, alone, at the far left. Named areas make every field's
   position explicit regardless of DOM order, so adding a field again can
   never silently misplace another one this way. */
.fex-filter-toolbar {
    display: grid;
    grid-template-columns: minmax(260px, 1.6fr) minmax(150px, .7fr) minmax(180px, .9fr) minmax(220px, 1fr);
    grid-template-areas:
        "search status method origin"
        "dates  dates  rows   actions";
    gap: 14px 10px;
    align-items: end;
    min-width: 0;
}

.fex-filter-toolbar>* {
    min-width: 0;
}

.fex-filter-search {
    grid-area: search;
}

.fex-filter-status {
    grid-area: status;
}

.fex-filter-method {
    grid-area: method;
}

.fex-filter-origin {
    grid-area: origin;
}

.fex-filter-dates {
    grid-area: dates;
}

.fex-filter-rows {
    grid-area: rows;
}

.fex-filter-actions {
    grid-area: actions;
}

/* Payment Date — one logical group, never split by another field. The two
   inputs divide the group's own width via their own inner grid (never the
   outer toolbar's tracks), so they can't be squeezed by a neighboring
   field's track the way the regression above did. */
.fex-date-range {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 8px;
    align-items: center;
    min-width: 0;
}

.fex-date-range .im-input {
    width: 100%;
    min-width: 0;
}

.fex-date-range-sep {
    color: var(--im-color-text-soft);
    font-size: 12px;
    white-space: nowrap;
}

/* Rows — its own compact field, capped so it can never stretch to fill its
   grid cell the way Search/Origin are meant to (task: 90–110px). */
.fex-filter-rows .im-select {
    width: auto;
    max-width: 110px;
    min-width: 90px;
}

.fex-filter-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.fex-source-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.fex-source-badge.is-manual {
    background: var(--im-color-info-soft, #eef2ff);
    color: var(--im-color-info-ink, #3730a3);
}

.fex-source-badge.is-document {
    background: var(--im-color-surface-muted, #f1f5ff);
    color: var(--im-color-text-soft);
}

.fex-amount {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.fex-amount-base {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: var(--im-color-text-soft);
    font-size: 12px;
}

.fex-col-number {
    width: 12%;
}

.fex-col-date {
    width: 10%;
}

.fex-col-desc {
    width: 22%;
}

.fex-col-category {
    width: 13%;
}

.fex-col-gl {
    width: 13%;
}

.fex-col-amount {
    width: 11%;
}

.fex-col-source {
    width: 9%;
}

.fex-col-status {
    width: 8%;
}

.fex-col-actions {
    width: 6%;
}

/* Create/Edit form — single centered card, mirrors Chart of Accounts'
   _form.blade.php layout rather than inventing a new form pattern. */
.fex-form-card {
    max-width: 760px;
}

.fex-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.fex-form-grid .full {
    grid-column: 1 / -1;
}

.fex-fx-row {
    display: none;
}

.fex-fx-row.is-visible {
    display: block;
}

.fex-base-readout {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--im-color-surface-muted, #f8fafc);
}

.fex-base-readout span {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--im-color-text-soft);
}

.fex-base-readout strong {
    font-size: 16px;
    font-variant-numeric: tabular-nums;
}

/* Posted, read-only summary — financial fields shown as static facts, never
   as editable inputs once posted (spec section 6/13). */
.fex-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border: 1px solid var(--im-color-line);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 18px;
}

.fex-summary div {
    padding: 12px;
    border-bottom: 1px solid var(--im-color-line);
}

.fex-summary div:nth-child(odd) {
    border-right: 1px solid var(--im-color-line);
}

.fex-summary dt {
    color: var(--im-color-text-soft);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .03em;
}

.fex-summary dd {
    margin: 4px 0 0;
    font-size: 14px;
    font-weight: 650;
    overflow-wrap: anywhere;
}

/* Medium desktop/tablet — 2 columns, named areas keep every field in its
   own labeled cell (task section 7's example) instead of relying on
   grid-column spans layered on top of implicit auto-placement. */
@media (max-width: 1199px) {
    .fex-filter-toolbar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-areas:
            "search  status"
            "method  origin"
            "dates   rows"
            "actions actions";
    }
}

@media (max-width: 900px) {
    .fex-form-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 700px) {
    .fex-summary {
        grid-template-columns: 1fr;
    }

    .fex-summary div:nth-child(odd) {
        border-right: 0;
    }
}

/* Mobile — single column, Payment Date's from/to stack too (§7's "Payment
   Date From" / "Payment Date To" as separate rows); Filter/Reset may run
   full width rather than staying pinned to one corner. */
@media (max-width: 600px) {
    .fex-filter-toolbar {
        grid-template-columns: 1fr;
        grid-template-areas:
            "search"
            "status"
            "method"
            "origin"
            "dates"
            "rows"
            "actions";
    }

    .fex-date-range {
        grid-template-columns: 1fr;
    }

    .fex-date-range-sep {
        justify-self: center;
    }

    .fex-filter-actions {
        flex-wrap: wrap;
    }

    .fex-filter-actions .im-btn {
        flex: 1;
    }

    .fex-filter-rows .im-select {
        max-width: none;
        width: 100%;
    }
}

/* Finance Bookkeeping Phase 1B-2B — Receipt/PDF OCR draft prefill (.fex-ocr-*).
   Reuses .im-card/.im-btn/.im-chip throughout; this block only supplies the
   New Expense entry-choice cards, the upload dropzone, the scanning state,
   and the small "Extracted/Suggested" badges shown on the reused Manual
   Expense form (_form.blade.php) — never a second form, never a new CSS
   file (all rules stay in this one stylesheet). */
.fex-entry-choice {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}

.fex-entry-choice-btn {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    border: 1.5px solid var(--im-color-line);
    border-radius: 14px;
    background: var(--im-color-surface, #fff);
    text-align: left;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}

.fex-entry-choice-btn:hover {
    border-color: var(--im-color-primary);
    background: var(--im-color-surface-muted, #f8fafc);
}

.fex-entry-choice-btn.is-active {
    border-color: var(--im-color-primary);
    background: color-mix(in srgb, var(--im-color-primary) 6%, #fff);
}

.fex-entry-choice-btn i {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: var(--im-color-surface-muted, #f1f5ff);
    color: var(--im-color-primary);
    font-size: 17px;
}

.fex-entry-choice-btn strong {
    display: block;
    font-size: 13.5px;
}

.fex-entry-choice-btn span {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    color: var(--im-color-text-soft);
}

.fex-ocr-panel {
    display: none;
}

.fex-ocr-panel.is-visible {
    display: block;
}

.fex-ocr-upload-zone {
    display: flex;
    min-height: 180px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 6px;
    border: 1.5px dashed var(--im-color-line-strong);
    border-radius: 15px;
    background: var(--im-color-surface-soft, #f8fafc);
    text-align: center;
    cursor: pointer;
    position: relative;
    padding: 20px;
}

.fex-ocr-upload-zone input[type="file"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.fex-ocr-upload-zone i {
    font-size: 30px;
    color: var(--im-color-primary);
}

.fex-ocr-upload-zone span {
    color: var(--im-color-text);
    font-weight: 600;
    font-size: 13px;
}

.fex-ocr-upload-zone small {
    color: var(--im-color-text-soft);
    font-size: 11.5px;
}

.fex-ocr-scanning {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 40px 20px;
    text-align: center;
}

.fex-ocr-spinner {
    width: 30px;
    height: 30px;
    border: 3px solid var(--im-color-line);
    border-top-color: var(--im-color-primary);
    border-radius: 50%;
    animation: fexOcrSpin .8s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
    .fex-ocr-spinner {
        animation-duration: 2s;
    }
}

@keyframes fexOcrSpin {
    to {
        transform: rotate(360deg);
    }
}

.fex-ocr-scanning strong {
    font-size: 13.5px;
}

.fex-ocr-scanning span {
    font-size: 12px;
    color: var(--im-color-text-soft);
}

.fex-ocr-error {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
    margin-top: 12px;
    border-radius: 10px;
    background: var(--im-color-danger-soft, #fef2f2);
    color: var(--im-color-danger-ink, #991b1b);
    font-size: 12.5px;
}

.fex-ocr-error i {
    flex: 0 0 auto;
    margin-top: 1px;
}

.fex-ocr-review-banner {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    margin-bottom: 14px;
    border-radius: 10px;
    background: var(--im-color-info-soft, #eef2ff);
    color: var(--im-color-info-ink, #3730a3);
    font-size: 12.5px;
}

.fex-badge {
    display: inline-flex;
    align-items: center;
    padding: 1px 8px;
    margin-left: 4px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    text-transform: none;
    background: var(--im-color-info-soft, #eef2ff);
    color: var(--im-color-info-ink, #3730a3);
    vertical-align: middle;
}

@media (max-width: 700px) {
    .fex-entry-choice {
        grid-template-columns: 1fr;
    }
}

/* Settings — AI Settings → Usage Logs tab (UI refinement). The filters and
   the table used to share ONE .im-card wrapper, producing a double white
   border/background behind the table. Split into a compact filter card
   (unchanged behavior/content) plus the standard single-surface
   .im-table-wrap for the table — same pattern already used by Chart of
   Accounts/Expenses. Pagination now uses the project's existing shared
   .im-table-pagination + vendor.pagination.custom-pagination component
   (already proven elsewhere, e.g. Staff Management) instead of Bootstrap's
   unstyled default pagination markup. */
.ai-logs-filters {
    margin-bottom: 16px;
}

/* System Settings UI Polish (task, IMPORTANT): the structural split above
   left one gap unfixed — the older, broadly-scoped "#main .table-responsive,
   .table-responsive { border/border-radius:30px/background:#fff/margin-top:
   24px !important }" rule (written for a different table pattern; see the
   .gl-coa-page fix elsewhere in this file for the identical issue) was
   STILL double-styling this table's own .table-responsive from the inside:
   .im-table-wrap is already the one intended white rounded surface, so a
   second white background/border/30px-radius/24px-top-margin on its child
   read as a white card nested inside a white card. Neutralized here,
   scoped to #ai-logs only — every other page still using the original
   global rule is untouched. */
#main #ai-logs .table-responsive {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    margin-top: 0 !important;
}

/* System Settings Final UI Polish (task section 16/17): the global Kunos
   table typography standard ("#main table thead th"/"#main table td" —
   see "BATCH 4 — TABLE & BUTTON DESIGN STANDARDIZATION" above) now
   already sets every table inside #main, including this one, to 14px —
   so the font-size override this rule used to carry was a redundant
   duplicate of the same value, not a distinct Usage-Logs typography
   system. Removed rather than left in place, per the task's explicit
   "do NOT add a Usage Logs-specific font-size override" once a global
   14px rule exists. The padding/font-weight below are a genuine,
   deliberate density choice (Usage Logs is a dense log table, unrelated
   to font-size) and stay scoped to #ai-logs only. */
#main #ai-logs .table thead th {
    font-weight: 800 !important;
    padding: 12px 16px !important;
}

#main #ai-logs .table tbody td {
    line-height: 1.45 !important;
    padding: 12px 16px !important;
}

/* Finance Accounting Exchange — GL Import "Upload File" selected-file state
   (Phase 1: import bug fix). The .gl-selected-file/.gl-change-file markup
   already existed in import.blade.php but had no CSS at all, so it never
   visibly appeared even once the JS was fixed to toggle it. Mirrors the
   established .has-file empty/selected toggle pattern already used by
   .borang-upload elsewhere in this codebase. */
.gl-upload-zone.is-dragover {
    border-color: var(--im-color-primary);
    background: color-mix(in srgb, var(--im-color-primary) 6%, var(--im-color-surface-soft, #f8fafc));
}

.gl-upload-zone.has-file>i,
.gl-upload-zone.has-file>strong,
.gl-upload-zone.has-file>span:not(.gl-selected-file),
.gl-upload-zone.has-file>small {
    display: none;
}

.gl-selected-file {
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.gl-upload-zone.has-file .gl-selected-file {
    display: flex;
}

.gl-selected-file i {
    font-size: 28px;
    color: var(--im-color-success, #16a34a);
}

.gl-selected-file strong {
    font-size: 14px;
    word-break: break-all;
    max-width: 90%;
}

.gl-selected-file small {
    color: var(--im-color-text-soft);
}

.gl-change-file {
    margin-top: 6px;
    padding: 4px 12px;
    border: 1px solid var(--im-color-line);
    border-radius: 8px;
    background: #ffffff;
    font-size: 12px;
    font-weight: 700;
    color: var(--im-color-primary);
    cursor: pointer;
}

.gl-change-file:hover {
    background: var(--im-color-surface-muted, #f1f5ff);
}

/* GL Export — format selector (Accounting Exchange Phase 1, section 18). */
.gl-export-format-options {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.gl-export-format-option {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 12px 14px;
    border: 1.5px solid var(--im-color-line);
    border-radius: 12px;
    cursor: pointer;
    flex: 1;
    min-width: 220px;
}

.gl-export-format-option:has(input:checked) {
    border-color: var(--im-color-primary);
    background: color-mix(in srgb, var(--im-color-primary) 6%, #fff);
}

.gl-export-format-option input {
    margin-top: 3px;
}

.gl-export-format-option span {
    display: block;
    font-weight: 700;
    font-size: 13px;
}

.gl-export-format-option small {
    display: block;
    margin-top: 2px;
    font-weight: 500;
    color: var(--im-color-text-soft);
}

/* MyInvois Phase 3B — Finance Expense Self-Billed e-Invoice section on the
   Expense detail page + the Prepare Self-Billed review form. One clean
   .im-card surface, no nested white-card-on-white-card. */
.fex-einvoice-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.fex-einvoice-head h3 {
    margin: 0;
    font-size: 14px;
    font-weight: 800;
}

.fex-einvoice-valid {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--im-color-success-soft, #ecfdf3);
}

.fex-einvoice-valid i {
    font-size: 22px;
    color: var(--im-color-success, #16a34a);
    margin-top: 2px;
}

.fex-einvoice-valid strong {
    display: block;
    font-size: 13.5px;
    color: var(--im-color-success-ink, #166534);
}

.fex-sb-section {
    margin-bottom: 20px;
}

.fex-sb-section h3 {
    font-size: 12.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--im-color-text-soft);
    margin: 0 0 10px;
}

.fex-sb-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.fex-sb-grid .full {
    grid-column: 1 / -1;
}

.fex-sb-prefill {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

.fex-sb-prefill select {
    min-width: 220px;
}

.fex-sb-missing {
    padding: 10px 12px;
    margin-bottom: 14px;
    border-radius: 10px;
    background: var(--im-color-danger-soft, #fef2f2);
    color: var(--im-color-danger-ink, #991b1b);
    font-size: 12.5px;
}

.fex-sb-missing ul {
    margin: 4px 0 0;
    padding-left: 18px;
}

/* MyInvois Phase 3F — Self-Billed scenario-first Prepare form: reason/
   counterparty radios, availability checkboxes, and the conditional
   sections JS shows/hides via [hidden] as the user progresses (§22). */
.fex-sb-radio-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.fex-sb-radio-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border: 1.5px solid var(--im-color-line);
    border-radius: 999px;
    font-size: 12.5px;
    cursor: pointer;
    background: var(--im-color-surface, #fff);
    transition: border-color .15s ease, background-color .15s ease;
}

.fex-sb-radio-btn:has(input:checked) {
    border-color: var(--im-color-primary);
    background: color-mix(in srgb, var(--im-color-primary) 8%, #fff);
    font-weight: 650;
}

.fex-sb-radio-btn input {
    margin: 0;
}

.fex-sb-checkbox {
    display: inline-flex;
    align-items: flex-start;
    gap: 7px;
    font-size: 12.5px;
    cursor: pointer;
}

.fex-sb-checkbox input {
    margin-top: 2px;
}

.fex-sb-checkbox small {
    color: var(--im-color-text-soft);
}

.fex-sb-conditional {
    padding: 12px 14px;
    margin-top: 10px;
    border-radius: 10px;
    background: var(--im-color-surface-muted, #f8fafc);
    border: 1px dashed var(--im-color-line);
}

.fex-sb-why-link {
    border: 0;
    background: none;
    padding: 0;
    color: var(--im-color-primary, #4345c5);
    font-weight: 650;
    font-size: 12.5px;
    cursor: pointer;
    text-decoration: underline;
}

.fex-sb-explanation {
    padding: 6px 8px;
    margin-top: 4px;
    border-radius: 8px;
    background: var(--im-color-info-soft, #eef2ff);
    color: var(--im-color-info-ink, #3730a3);
}

@media (max-width: 700px) {
    .fex-sb-grid {
        grid-template-columns: 1fr;
    }
}

/* MyInvois Phase 3D — organisation readiness checklist/progress in the
   Commercial Documents -> e-Invoice settings tab. Reuses .im-card/.im-chip
   throughout; this block only supplies the progress bar and compact
   checklist rows, matching the existing .cds-einvoice-* rules above. */
.cds-einvoice-readiness-summary strong {
    display: block;
    font-size: 12.5px;
    font-weight: 700;
    color: #172033;
    margin-bottom: 5px;
}

.cds-einvoice-progress {
    height: 6px;
    border-radius: 999px;
    background: var(--im-color-surface-muted, #f1f5ff);
    overflow: hidden;
}

.cds-einvoice-progress-bar {
    height: 100%;
    background: var(--im-color-primary, #3f41b5);
    border-radius: 999px;
    transition: width .2s ease;
}

.cds-einvoice-checklist {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px 16px;
}

.cds-einvoice-checklist-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
}

.cds-einvoice-checklist-item i {
    font-size: 13px;
    flex: none;
}

.cds-einvoice-checklist-item.is-complete i {
    color: var(--im-color-success, #16a34a);
}

.cds-einvoice-checklist-item.is-conditional i {
    color: var(--im-color-muted, #94a3b8);
}

.cds-einvoice-checklist-item.is-missing i,
.cds-einvoice-checklist-item.is-invalid i {
    color: var(--im-color-danger, #dc2626);
}

.cds-einvoice-checklist-item small {
    color: var(--im-color-text-soft);
    font-size: 10.5px;
}

@media (max-width: 700px) {
    .cds-einvoice-checklist {
        grid-template-columns: 1fr;
    }
}

/* Finance Expenses Phase 4A/4B — 2-Column Responsive Workspace Grid */
.fex-workspace {
    width: 100%;
    max-width: 1380px;
    margin: 0 auto;
}

.fex-workspace-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
    gap: 20px;
    align-items: start;
    width: 100%;
}

.fex-workspace-main {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
}

.fex-workspace-side {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
}

.fex-workspace-actions {
    grid-column: 1 / -1;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    padding-top: 14px;
    padding-bottom: 24px;
}

.fex-section-card {
    padding: 20px;
    border: 1px solid var(--im-color-line);
    border-radius: 12px;
    background: var(--im-color-surface, #fff);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

.fex-section-head {
    margin-bottom: 16px;
    border-bottom: 1px solid var(--im-color-line-soft, #edf2f7);
    padding-bottom: 10px;
}

.fex-section-head h3 {
    font-size: 14.5px;
    font-weight: 700;
    margin: 0;
    color: var(--im-color-text-main, #1e293b);
}

.fex-section-head p {
    margin: 4px 0 0;
    font-size: 11.5px;
    color: var(--im-color-text-soft, #64748b);
}

.fex-sec-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background: var(--im-color-surface-muted, #eef2ff);
    color: var(--im-color-primary, #3f41b5);
    font-size: 11.5px;
    font-weight: 700;
    flex: none;
}

.fex-toggle-group {
    display: inline-flex;
    border: 1.5px solid var(--im-color-line);
    border-radius: 10px;
    padding: 3px;
    background: var(--im-color-surface-muted, #f8fafc);
    gap: 2px;
}

.fex-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 7px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--im-color-text-soft, #64748b);
    cursor: pointer;
    border: none;
    background: transparent;
    transition: all .15s ease;
}

.fex-toggle-btn:hover {
    color: var(--im-color-text-main, #1e293b);
}

.fex-toggle-btn.is-active {
    background: #fff;
    color: var(--im-color-primary, #3f41b5);
    font-weight: 700;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.fex-suggestion-box {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--im-color-primary, #3f41b5) 6%, #fff);
    border: 1px dashed color-mix(in srgb, var(--im-color-primary, #3f41b5) 30%, #fff);
    margin-top: 6px;
}

.fex-suggestion-box.is-review {
    background: #fffbeb;
    border-color: #fde68a;
}

.fex-suggestion-content strong {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: var(--im-color-text-main, #1e293b);
}

.fex-suggestion-content p {
    margin: 3px 0 0;
    font-size: 11.5px;
    color: var(--im-color-text-soft, #64748b);
    line-height: 1.4;
}

.fex-tax-readouts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 14px;
}

.fex-tax-readout-item {
    padding: 10px 14px;
    border-radius: 10px;
    background: var(--im-color-surface-muted, #f8fafc);
    border: 1px solid var(--im-color-line-soft, #edf2f7);
}

.fex-tax-readout-item span {
    display: block;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--im-color-text-soft, #64748b);
}

.fex-tax-readout-item strong {
    display: block;
    margin-top: 3px;
    font-size: 16px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.fex-tax-readout-item.is-deductible strong {
    color: var(--im-color-success, #16a34a);
}

.fex-tax-readout-item.is-non-deductible strong {
    color: var(--im-color-warning-ink, #b45309);
}

.fex-attachment-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border: 1px solid var(--im-color-line);
    border-radius: 10px;
    background: var(--im-color-surface, #fff);
    margin-bottom: 8px;
}

.fex-attachment-info {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.fex-attachment-icon {
    flex: none;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: var(--im-color-surface-muted, #f1f5ff);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    color: var(--im-color-primary, #3f41b5);
}

.fex-attachment-name {
    font-size: 13px;
    font-weight: 650;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fex-attachment-meta {
    font-size: 11px;
    color: var(--im-color-text-soft, #64748b);
}

.fex-foreign-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 7px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    background: #fef3c7;
    color: #92400e;
}

.fex-tax-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 7px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
}

.fex-tax-badge.is-100 {
    background: #dcfce7;
    color: #166534;
}

.fex-tax-badge.is-part {
    background: #fef9c3;
    color: #854d0e;
}

.fex-tax-badge.is-0 {
    background: #f1f5f9;
    color: #475569;
}

.fex-tax-badge.is-review {
    background: #fee2e2;
    color: #991b1b;
}

.fex-doc-type-select {
    width: 160px;
    flex: none;
}

@media (max-width: 991px) {
    .fex-workspace-grid {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .fex-workspace-main,
    .fex-workspace-side {
        display: contents;
    }

    .fex-grid-sec-1 {
        order: 1;
    }

    .fex-grid-sec-2 {
        order: 2;
    }

    .fex-grid-sec-3 {
        order: 3;
    }

    .fex-grid-sec-4 {
        order: 4;
    }

    .fex-grid-sec-5 {
        order: 5;
    }

    .fex-grid-actions {
        order: 6;
        width: 100%;
        justify-content: stretch;
    }

    .fex-workspace-actions .im-btn {
        flex: 1 1 50%;
        text-align: center;
        justify-content: center;
    }

    .fex-doc-type-select {
        width: 130px;
    }
}

/* ==========================================================================
   EDUCATION CLIENT — Student Recruitment CRM polish
   (Recruitment Pipeline / Campus Visits / Programme Offers / Invoices)
   Two things:
     A. Primary CTA label + icon must stay white in every state.
     B. List tables must fit the content area at 1366px+ with no horizontal
        scroll, and stack to the existing .crm-table.responsive cards on
        mobile.
   Everything below is scoped to .crm-page / .crm-recruitment-table so no
   other Kunos page or table is affected.
   ========================================================================== */

/* --- A. Primary CTA text/icon = white in every interaction state ----------
   A global `a { color: var(--primary-color) }` / `a:hover { color:#717ff5 }`
   and `.crm-table a` / `.crm-table a:hover` were more specific than
   `.im-btn-primary` and turned CTA labels + their <i> icons dark or
   light-purple — most visibly on hover and for the empty-state CTAs that
   render *inside* a table cell. */
.crm-page a.im-btn-primary,
.crm-page a.im-btn-primary:link,
.crm-page a.im-btn-primary:visited,
.crm-page a.im-btn-primary:hover,
.crm-page a.im-btn-primary:focus,
.crm-page a.im-btn-primary:focus-visible,
.crm-page a.im-btn-primary:active,
.crm-page button.im-btn-primary,
.crm-page button.im-btn-primary:hover,
.crm-page button.im-btn-primary:focus,
.crm-page button.im-btn-primary:active,
.crm-page .crm-table a.im-btn-primary,
.crm-page .crm-table a.im-btn-primary:hover,
.crm-page .crm-table a.im-btn-primary:focus,
.crm-page .crm-empty-block a.im-btn-primary,
.crm-page .crm-empty-block a.im-btn-primary:hover,
.crm-page .crm-empty-block a.im-btn-primary:focus {
    color: #ffffff;
}

.crm-page .im-btn-primary i,
.crm-page .im-btn-primary .bi,
.crm-page .crm-table a.im-btn-primary i {
    color: inherit;
}

/* --- B. Recruitment list tables: fit within the content area --------------
   Note: the global `#main table thead th` / `#main table td` rules set
   padding / font-size / weight / text-transform with `!important`, so the
   scoped overrides below must also use `!important` to win. Kept as tight
   as possible to .crm-recruitment-table — no other table is affected. */
.crm-recruitment-table {
    table-layout: fixed;
    width: 100%;
    min-width: 0;
}

#main .crm-recruitment-table th,
#main .crm-recruitment-table td,
.crm-recruitment-table th,
.crm-recruitment-table td {
    padding: 10px !important;
    white-space: normal !important;
    overflow-wrap: break-word;
    word-break: normal;
    hyphens: none;
    max-width: none;
    min-width: 0;
    vertical-align: top !important;
    line-height: 1.3 !important;
}

/* Headers: the global rule forces uppercase / 14px / 950-weight /
   letter-spacing, which makes headings far too wide for these fitted
   columns (they broke mid-word). Compact sentence-case, wrap at spaces. */
#main .crm-recruitment-table thead th,
.crm-recruitment-table thead th {
    font-size: 0.75rem !important;      /* 12px */
    font-weight: 700 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    line-height: 1.25 !important;
    overflow-wrap: normal;
    word-break: keep-all;
    height: auto !important;
    vertical-align: bottom !important;
    color: var(--im-color-text-soft) !important;
    background: var(--im-color-surface-soft) !important;
}

#main .crm-recruitment-table tbody td,
.crm-recruitment-table tbody td {
    font-size: 0.8125rem !important;    /* 13px body */
    font-weight: 600 !important;
    color: var(--im-color-text) !important;
}

.crm-recruitment-table tbody td strong,
.crm-recruitment-table tbody td a,
.crm-recruitment-table tbody td .crm-invoice-source-cell {
    font-size: 0.875rem;               /* 14px for the primary line */
    overflow-wrap: anywhere;           /* long spaceless names/refs still break to fit */
}

.crm-recruitment-table tbody td small,
.crm-recruitment-table tbody td .text-muted {
    font-size: 0.75rem !important;
    font-weight: 500 !important;
}

.crm-recruitment-table .crm-status {
    white-space: normal;
    display: inline-block;
    line-height: 1.15;
}

/* Column widths are set per table as <col style="width:N%"> in the Blade
   (they must sum to ~100% — with table-layout:fixed a shortfall leaves the
   table visually under-filled). The Action column is the one fixed-px col. */
.crm-recruitment-table col.crm-rt-action { width: 68px; }

/* Compact, right-aligned Action column */
#main .crm-recruitment-table th:last-child,
#main .crm-recruitment-table td:last-child,
.crm-recruitment-table th:last-child,
.crm-recruitment-table td:last-child {
    text-align: right !important;
    padding-inline: 6px !important;
    white-space: normal !important;
}

/* Invoice sub-cells: previously ellipsis/nowrap tuned for a wider table —
   inside the now fixed-width columns, let them wrap instead of clipping. */
.crm-recruitment-table .crm-invoice-source-cell {
    white-space: normal !important;
    overflow: visible;
    text-overflow: clip;
}
.crm-recruitment-table .crm-invoice-cell-nowrap { white-space: nowrap !important; }
.crm-recruitment-table .crm-invoice-amount-cell { white-space: normal !important; }

/* Mobile: hand straight back to the existing .crm-table.responsive stacked
   card pattern (@media max-width:700px) — drop the fixed layout so nothing
   forces a horizontal scrollbar; the <colgroup> widths become irrelevant. */
@media (max-width: 700px) {
    .crm-recruitment-table {
        table-layout: auto;
        min-width: 0;
    }
    .crm-recruitment-table colgroup {
        display: none;
    }
    .crm-recruitment-table th:last-child,
    .crm-recruitment-table td:last-child {
        text-align: left;
        white-space: normal;
    }
}

/* ==========================================================================
   Budget Department Setup (Finance Module)
   Enable Budget Management action buttons — ensure crisp white text on
   Kunos purple primary button styling in both department table and modal.
   ========================================================================== */
.bds-table .im-btn.im-btn-primary,
.bds-table button.im-btn-primary,
.bos-app-modal .modal-footer .im-btn.im-btn-primary,
.bos-app-modal .modal-footer button.im-btn-primary {
    background-color: var(--im-color-primary, #3f41b5) !important;
    border-color: var(--im-color-primary, #3f41b5) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    border-radius: var(--im-radius-pill, 999px) !important;
    text-decoration: none !important;
    box-shadow: 0 4px 14px rgba(63, 65, 181, 0.22) !important;
    transition: transform 0.16s ease, filter 0.16s ease, background-color 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, color 0.16s ease !important;
}

.bds-table .im-btn.im-btn-primary:hover,
.bds-table button.im-btn-primary:hover,
.bos-app-modal .modal-footer .im-btn.im-btn-primary:hover,
.bos-app-modal .modal-footer button.im-btn-primary:hover {
    background-color: var(--im-color-primary-strong, #2f319d) !important;
    border-color: var(--im-color-primary-strong, #2f319d) !important;
    color: #ffffff !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(63, 65, 181, 0.32) !important;
}

.bds-table .im-btn.im-btn-primary:focus,
.bds-table .im-btn.im-btn-primary:focus-visible,
.bos-app-modal .modal-footer .im-btn.im-btn-primary:focus,
.bos-app-modal .modal-footer .im-btn.im-btn-primary:focus-visible {
    color: #ffffff !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(63, 65, 181, 0.35) !important;
}

.bds-table .im-btn.im-btn-primary:active,
.bos-app-modal .modal-footer .im-btn.im-btn-primary:active {
    background-color: #262880 !important;
    color: #ffffff !important;
    transform: translateY(0);
}

.bds-table .im-btn.im-btn-xs {
    min-height: 32px;
    padding: 0 14px;
    font-size: 0.8125rem;
    line-height: 1;
}

/* ==========================================================================
   Finance + Document Centre Standardized UI
   Row action buttons & table spacing
   ========================================================================== */
.im-btn.im-btn-xs {
    min-height: 30px;
    padding: 0 12px;
    font-size: 0.8125rem;
    line-height: 1;
    font-weight: 600;
}

#categoriesTable .im-btn.im-btn-primary {
    background-color: var(--im-color-primary, #3f41b5) !important;
    border-color: var(--im-color-primary, #3f41b5) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    border-radius: var(--im-radius-pill, 999px) !important;
    text-decoration: none !important;
    box-shadow: 0 4px 12px rgba(63, 65, 181, 0.18) !important;
    transition: transform 0.16s ease, filter 0.16s ease, background-color 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, color 0.16s ease !important;
}

#categoriesTable .im-btn.im-btn-primary:hover {
    background-color: var(--im-color-primary-strong, #2f319d) !important;
    border-color: var(--im-color-primary-strong, #2f319d) !important;
    color: #ffffff !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(63, 65, 181, 0.28) !important;
}

#categoriesTable .im-btn.im-btn-primary i {
    color: #ffffff !important;
}

#categoriesTable .im-btn.im-btn-secondary {
    background-color: #e9efff !important;
    border-color: #e9efff !important;
    color: var(--im-color-text, #17263c) !important;
    font-weight: 600 !important;
    border-radius: var(--im-radius-pill, 999px) !important;
    text-decoration: none !important;
    transition: transform 0.16s ease, filter 0.16s ease, background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease !important;
}

#categoriesTable .im-btn.im-btn-secondary:hover {
    background-color: #dce6fd !important;
    border-color: #dce6fd !important;
    color: var(--im-color-text, #17263c) !important;
    transform: translateY(-1px);
}

#categoriesTable .im-btn.im-btn-soft {
    background-color: var(--im-color-primary-soft, #f0f2fe) !important;
    border-color: var(--im-color-primary-soft, #f0f2fe) !important;
    color: var(--im-color-primary-strong, #2f319d) !important;
    font-weight: 600 !important;
    border-radius: var(--im-radius-pill, 999px) !important;
    text-decoration: none !important;
    transition: transform 0.16s ease, filter 0.16s ease, background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease !important;
}

#categoriesTable .im-btn.im-btn-soft:hover {
    background-color: #e4e8fd !important;
    border-color: #e4e8fd !important;
    color: var(--im-color-primary-strong, #2f319d) !important;
    transform: translateY(-1px);
}

#categoriesTable td:last-child {
    white-space: nowrap;
}

#main .im-page .gl-filters + .table-responsive,
#main .fe-page .fe-section + .table-responsive {
    margin-top: 16px !important;
}



/* ==========================================================================
   Finance: Student Finance — Fee Structure & Schedules (fee-structure/index)
   UI/UX polish pass. Scoped entirely to .fe-card / .fe-* classes used only
   on this page — does not affect .fe-page/.fe-section (shared Finance
   wrapper classes from the Supplier Expenses stage, reused as-is above).
   ========================================================================== */

/* Single-column stack: Fee Catalogue above Applicable Fee Schedules, both
   full width, at every breakpoint — replaces the old col-lg-4/col-lg-8
   Bootstrap grid, which is what forced the schedule table into a cramped
   65%-width column and gave it its own horizontal scrollbar. */
.fe-stack {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.fe-card-header {
    padding: 14px 18px;
}

.fe-card-title {
    font-size: 1rem;
}

.fe-catalogue-table th,
.fe-catalogue-table td,
.fe-schedule-table th,
.fe-schedule-table td {
    padding: 10px 14px;
    vertical-align: middle;
}

.fe-catalogue-table thead th,
.fe-schedule-table thead th {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--im-color-text-soft, #64748b);
    background: rgba(248, 251, 255, 0.9);
    border-bottom: 1px solid rgba(219, 228, 243, 0.9);
    font-weight: 700;
}

.fe-catalogue-table tbody tr,
.fe-schedule-table tbody tr {
    border-bottom: 1px solid rgba(226, 232, 240, 0.6);
}

.fe-catalogue-table tbody tr:last-child,
.fe-schedule-table tbody tr:last-child {
    border-bottom: none;
}

.fe-code-badge {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 7px;
    background: rgba(63, 65, 181, 0.1);
    color: var(--im-color-primary, #3f41b5);
    font-weight: 700;
    font-size: 12px;
    font-family: var(--im-font-mono, ui-monospace, monospace);
}

.fe-item-desc {
    color: var(--im-color-text-soft, #64748b);
    font-size: 12px;
    margin-top: 2px;
}

.fe-status-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
}

.fe-status-active {
    background: rgba(16, 185, 129, 0.14);
    color: #067a55;
}

.fe-status-inactive {
    background: rgba(100, 116, 139, 0.14);
    color: #64748b;
}

.fe-charge-count {
    font-weight: 700;
    color: var(--im-color-text, #17233b);
}

.fe-programme-name {
    /* No max-width now that the card is full width — "Bachelor of Business
       Administration (Hons)" gets room to sit on one comfortable line
       instead of being force-wrapped inside a narrow 65%-width column. */
    color: var(--im-color-text-soft, #64748b);
    font-size: 13px;
    margin-top: 3px;
    white-space: nowrap;
}

.fe-meta-line {
    color: var(--im-color-text-soft, #64748b);
    font-size: 12px;
    margin-top: 2px;
}

.fe-schedule-name {
    font-weight: 600;
    color: var(--im-color-text, #17233b);
}

.fe-breakdown {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 230px;
}

.fe-breakdown-row {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    font-size: 12.5px;
}

.fe-breakdown-label {
    color: var(--im-color-text-soft, #64748b);
}

.fe-breakdown-amount {
    color: var(--im-color-text, #17233b);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.fe-total-amount {
    font-weight: 800;
    font-size: 14px;
    color: var(--im-color-text, #17233b);
    white-space: nowrap;
}

/* Modal form structure (Fee Item / Fee Schedule) */
.fe-modal-section-title {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 800;
    color: var(--im-color-primary, #3f41b5);
    border-bottom: 1px solid rgba(219, 228, 243, 0.9);
    padding-bottom: 8px;
    margin-bottom: 14px;
}

.fe-fee-rows {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.fe-fee-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid rgba(219, 228, 243, 0.9);
    border-radius: 10px;
    background: rgba(248, 251, 255, 0.6);
}

.fe-fee-row-info {
    min-width: 0;
}

.fe-fee-row-name {
    font-weight: 700;
    font-size: 13px;
    color: var(--im-color-text, #17233b);
}

.fe-fee-row-code {
    font-size: 11px;
    color: var(--im-color-text-soft, #64748b);
}

.fe-fee-row-input {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 150px;
}

.fe-fee-row-currency {
    font-weight: 700;
    font-size: 12px;
    color: var(--im-color-text-soft, #64748b);
}

.fe-fee-row-input .im-input {
    text-align: right;
}

.fe-submit-btn:disabled {
    opacity: 0.75;
    cursor: progress;
}

@media (max-width: 767.98px) {
    .fe-fee-row {
        flex-wrap: wrap;
    }

    .fe-fee-row-input {
        flex: 1 1 100%;
    }
}

/* ==========================================================================
   Staff Management — New Staff Credentials modal (#newStaffCredentialsModal)
   Viewport-safety + contrast fix, mirroring the app's own existing
   #bosAiConfirmModal pattern (same root causes, same established solution):

   1. Root cause of the clipping bug: .modal-dialog-centered (style.css,
      "Merged Rows" section above) makes .modal-dialog a flex container with
      align-items:center but no min-height/max-height bound on its content.
      When the dialog's own content (header + warning notice + name/email/
      password fields + footer) is taller than the viewport, pure flex
      centering keeps the *midpoint* of the dialog centered and lets it
      overflow equally above and below that midpoint — which is exactly why
      the bottom Close button stayed visible while the header/title were
      pushed above the top of the viewport. Fixed here by bounding
      .modal-content's own height and giving only .modal-body internal
      scroll, so the dialog itself never exceeds the viewport regardless of
      underlying page scroll position (the outer .modal is Bootstrap's own
      position:fixed layer, so page scroll never affects it either way).
   2. Root cause of the AI widget/modal z-index conflict: .bos-ai-launcher
      (z-index 1090) and .bos-ai-window (z-index 1085) both sit above
      Bootstrap's default .modal z-index (1050). #bosAiConfirmModal already
      solves this exact problem with z-index:1120 / backdrop z-index:1110 —
      reused verbatim here instead of inventing a new arbitrary value.
   3. Root cause of the white-on-white title: the same legacy global
      ".modal-header .modal-title { color:#FFFFFF !important }" rule fixed
      for .bos-app-modal elsewhere in this file. Same fix, scoped by ID.
   ========================================================================== */
#newStaffCredentialsModal {
    z-index: 1120;
}

body:has(#newStaffCredentialsModal.show) .modal-backdrop {
    z-index: 1110;
}

#newStaffCredentialsModal .modal-dialog {
    width: min(560px, calc(100vw - 24px));
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
}

#newStaffCredentialsModal .modal-content {
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 56px);
    overflow: hidden;
}

#newStaffCredentialsModal .modal-body {
    overflow-y: auto;
}

#newStaffCredentialsModal .modal-title {
    margin: 0 !important;
    color: var(--im-color-text, #17233b) !important;
    text-align: left !important;
}

#newStaffCredentialsModal .modal-header-subtitle {
    margin-top: 2px;
    color: var(--im-color-text-soft, #667085);
    font-size: 0.82rem;
    line-height: 1.4;
}

#newStaffCredentialsModal #credStaffEmail {
    overflow-wrap: anywhere;
    word-break: break-word;
}

@media (max-width: 575.98px) {
    #newStaffCredentialsModal .modal-content {
        max-height: calc(100vh - 24px);
    }
}