:root {
    --sidebar-width: 200px;
    --dash-ink: #1C1640;
    --dash-muted: #6B6683;
    --dash-line: #ECEAF3;
    --dash-brand: #2B00CE;
    --dash-focus: rgba(43, 0, 206, .7);
    --bs-primary-rgb: 43, 0, 206;
    --bs-link-color: #2B00CE;
    --gradient: linear-gradient(89.18deg, #2B00CE 5.47%, #BA46A8 50.53%, #FF9F22 94.7%);
}

/* Ensure all table cells have centered content */
#componentTable td {
    vertical-align: middle;
}

/* Ensure order_number cell has correct structure */
.order-number-cell {
    white-space: nowrap;
}

/* Stack up/down arrows vertically */
.order-controls {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px; /* Adjust spacing between icons */
}

/* Ensure icons are clickable and properly spaced */
.order-controls a {
    display: flex;
    justify-content: center;
    align-items: center;
}

.alert-wrapper {
    position: fixed;
    right: 15px;
    bottom: 15px;
    z-index: 3;
}

.gradient {
    background: var(--gradient);
}

.text-gradient {
    background: var(--gradient);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
}

.pt-3-px {
    padding-top: 3px;
}

.pt-6-px {
    padding-top: 6px;
}

/* Buttons */

.btn-80 {
    width: 80%;
    display: block;
    margin: 0 auto;
}

.btn-100 {
    width: 100%;
    display: block;
    margin: 0 auto;
}

.btn-bold {
    font-weight: bold;   /* Bolder text */
}

.btn-primary {
    --bs-btn-color: #FFF;
    --bs-btn-bg: #2B00CE;
    --bs-btn-border-color: #2B00CE;
    --bs-btn-hover-color: #FFF;
    --bs-btn-hover-bg: #B5A6ED;
    --bs-btn-hover-border-color: #B5A6ED;
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    --bs-btn-active-color: #FFF;
    --bs-btn-active-bg: #B5A6ED;
    --bs-btn-active-border-color: #B5A6ED;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #FFF;
    --bs-btn-disabled-bg: #E5EAF0;
    --bs-btn-disabled-border-color: #E5EAF0;
}

.btn-secondary {
    --bs-btn-color: #2B00CE;
    --bs-btn-bg: #F7F5FF;
    --bs-btn-border-color: #F7F5FF;
    --bs-btn-hover-color: #FFF;
    --bs-btn-hover-bg: #2B00CE;
    --bs-btn-hover-border-color: #2B00CE;
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    --bs-btn-active-color: #2B00CE;
    --bs-btn-active-bg: #B5A6ED;
    --bs-btn-active-border-color: #B5A6ED;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #FFF;
    --bs-btn-disabled-bg: #E5EAF0;
    --bs-btn-disabled-border-color: #E5EAF0;
}

.btn-white {
    --bs-btn-bg: #ffffff;
    --bs-btn-border-color: #ffffff;
}

.btn-circle {
    color: #28093B;
    background-color: #FFFFFF;
    box-shadow: 0px 0px 5px 0px #00000026;
    --bs-btn-focus-shadow-rgb: 43, 0, 206;
    --bs-btn-focus-box-shadow: 0 0 0 .25rem rgba(43, 0, 206, .35);
    --bs-btn-hover-color: #FFF;
    --bs-btn-hover-bg: #2B00CE;
    --bs-btn-hover-border-color: #2B00CE;
    border-radius: 50%;
}

.btn-outline-primary {
    position: relative;
    will-change: transform;
    padding: 12px 32px; /* Increase horizontal and vertical padding */
    border-radius: 2rem;
    z-index: 0;
    --bs-btn-border-color: #FFF;
    --bs-btn-hover-bg: var(--gradient);
    --bs-btn-hover-border-color: none;
    --bs-btn-focus-shadow-rgb: 13, 110, 253;
    --bs-btn-active-bg: #2B00CE;
    --bs-btn-active-border-color: #2B00CE;
    --bs-btn-disabled-color: #2B00CE;
    --bs-btn-disabled-border-color: #2B00CE;
    /* border: 4px solid transparent;
    border-radius: 1em;
    background: linear-gradient(90deg, #2B00CE 0%, #BA46A8 55%, #FF9F22 100%); 
    background-clip: padding-box, border-box;
    background-origin: padding-box, border-box; */
}

.btn-outline-primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, #2B00CE 0%, #BA46A8 55%, #FF9F22 100%);
    border-radius: 2rem;
    z-index: 0;
    transition: .5s ease-in-out;
}

.btn-outline-primary::after {
    content: '';
    position: absolute;
    top: var(--bs-border-width);
    left: var(--bs-border-width);
    right: var(--bs-border-width);
    bottom: var(--bs-border-width);
    background: #FFF;
    border-radius: 2rem;
    z-index: 1;
}

.btn-outline-primary .text-gradient {
    position: relative;
    z-index: 2; /* Ensure text stays visible */
    background: linear-gradient(90deg, #2B00CE, #BA46A8, #FF9F22);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.btn-outline-primary:hover::after {
    background: var(--gradient);
}

.btn-outline-primary:hover .text-gradient {
    -webkit-text-fill-color: white;
}

/* Input */

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

/* Table */

th {
    font-weight: 400;
}

/* pagination */
.pagination {
    --bs-pagination-active-bg: #2B00CE;
}

/* Layout */

#header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 62px;
    z-index: 1000;
    background: white;
}

.content {
    min-height: 100vh;
    padding-top: 62px;
}

/* Sidebar */

.app-shell {
    display: flex;
    min-height: calc(100vh - 62px);
}

.content-sidebar {
    position: fixed;
    top: 62px;
    bottom: 0;
    left: 0;
    width: var(--sidebar-width);
    padding: .5rem 0;
    background: #FFFFFF;
    border-right: 1px solid #DCD7E2;
    overflow-y: auto;
    overscroll-behavior: contain;
    z-index: 1045;
}

.sidebar {
    min-height: 100%;
    display: flex;
    flex-shrink: 0;
    flex-direction: column;
}

.sidebar .nav-pills {
    flex-direction: column;
}

.sidebar-toggle {
    display: none;
    position: fixed;
    top: 11px;
    left: 10px;
    z-index: 1035;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid #DCD7E2;
    border-radius: 10px;
    background: #FFFFFF;
    color: #2B00CE;
    font-size: 1.35rem;
    line-height: 1;
}

.sidebar-toggle:hover {
    border-color: rgba(43, 0, 206, .45);
}

@media (min-width: 992px) {
    .content-sidebar {
        z-index: 1030;
    }
}

.sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 62px 0 0 0;
    background: rgba(20, 16, 40, .45);
    z-index: 1040;
}

.sidebar-backdrop.is-visible {
    display: block;
}

.nav-pills .nav-link {
    position: relative;
    display: flex;
    align-items: center;
    gap: .625rem;
    margin: 1px .5rem;
    padding: .5625rem .75rem;
    color: #2A2540;
    font-size: .9375rem;
    line-height: 1.3;
    border-radius: .625rem;
}

.nav-pills .nav-link .bi {
    flex: 0 0 1.125rem;
    font-size: 1.0625rem;
    text-align: center;
    color: var(--dash-muted);
}

.nav-pills .nav-link:hover {
    color: #1C1258;
    background: #F7F5FF;
}

.nav-pills .nav-link.active {
    color: #2B00CE;
    font-weight: 600;
    background: #F1EEFF;
}

.nav-pills .nav-link.active .bi {
    color: #2B00CE;
}

.nav-pills .nav-link.active::before {
    content: '';
    position: absolute;
    top: 20%;
    bottom: 20%;
    left: -.5rem;
    width: 4px;
    background: linear-gradient(0deg, #2B00CE 0%, #BA46A8 55%, #FF9F22 100%);
    border-radius: 0 4px 4px 0;
}

.nav-badge {
    display: inline-block;
    margin-inline-start: auto;
    min-width: 1.5em;
    padding: 0 .45em;
    border-radius: 1em;
    background: #2B00CE;
    color: #FFFFFF;
    font-size: .75rem;
    font-weight: 600;
    line-height: 1.5em;
    text-align: center;
    vertical-align: middle;
}

@media (max-width: 991.98px) {
    .sidebar-toggle {
        display: flex;
        top: 9px;
        width: 44px;
        height: 44px;
    }

    .content-sidebar {
        width: min(240px, 78vw);
        transform: translateX(-100%);
        transition: transform .25s ease;
    }

    .content-sidebar.is-open {
        transform: none;
        box-shadow: 16px 0 32px -16px rgba(20, 16, 40, .25);
    }

    .nav-pills .nav-link {
        padding: .8rem .75rem;
    }

    body:has(.sidebar-toggle) .brand-block {
        margin-left: 62px !important;
    }

    body.sidebar-open {
        overflow: hidden;
    }

}

@media (prefers-reduced-motion: reduce) {
    .content-sidebar {
        transition: none;
    }
}

.content-section {
    padding: 1rem 2rem;
    background-color: #FFFFFF;
    border-radius: 1rem;
}

.border-purple {
    border-color: #6f42c1 !important; /* Bootstrap's purple */
}

.text-purple {
    color: #6f42c1 !important;
}

.badge-fixed-width {
    width: 120px;  /* Adjust as needed */
    display: inline-block;
    text-align: center;
    padding: 0.7em 0.5em;
    font-size: 0.75rem; /* Smaller text */
    border-radius: 0.5rem; /* Rounded corners */
    white-space: nowrap; /* Prevent text wrapping */
}

@media screen and (max-width: 768px) {
    .content-section {
        overflow-x: auto;
    }
}

#header .navbar {
    height: 100%;
    padding-top: 0;
    padding-bottom: 0;
}

#header .navbar > .container-fluid {
    height: 100%;
}

/* Main Content */

.content-main {
    flex: 1 1 auto;
    min-width: 0;
    margin-left: var(--sidebar-width);
    padding: 1.5rem 2rem 100px;
    background-color: #F0F2F5;
}

.page-title {
    margin: 0 0 1.25rem;
    font-size: clamp(1.35rem, 2.4vw, 1.75rem);
    font-weight: 700;
}

@media (max-width: 991.98px) {
    .content-main {
        margin-left: 0;
        padding: 1rem 1rem 90px;
    }
}

@media (max-width: 575.98px) {
    .content-main {
        padding: .75rem .75rem 80px;
    }
}

.card {
    border: none;
    border-radius: 1rem;
}

/* /Main Content */

.circle-done {
    width: 100px;
    height: 100px;
    background-image: url('../images/icon-done.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 30px;
    background-color: #F7F5FF;
    border-radius: 50%;
}

.circle-cancel {
    width: 100px;
    height: 100px;
    background-image: url('../images/icon-cancel.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 40px;
    background-color: #F7F5FF;
    border-radius: 50%;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

.rounded-row td:nth-child(odd) {
    border-radius: 40px 0px 0px 40px;
}

.rounded-row td:nth-child(even) {
    border-radius: 0px 40px 40px 0px;
}

#togglePassword {
    cursor: pointer;
}

#togglePassword i {
    color: black;
    font-size: 1.2rem;
}

#togglePassword:focus {
    outline: none;
    box-shadow: none;
}

.brand-block img {
    display: block;
    height: auto;
}

/* /Sidebar */

.powered-by-block {
    margin: 1rem;
    color: #c5c5c5;
}

/* Responsive for larger screens */
@media (min-width: 768px) {
    .queue-logo img {
        width: 300px;
    }

    .superqr-logo img {
        width: 100px;
        padding-top: 0px;
    }

    .powered-text {
        font-size: 14px;
    }

    .powered-by {
        margin-top: 5px;
    }
}

.table-wrap {
    position: relative;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    background: #FFFFFF;
    border: 1px solid #E7E4EE;
    border-radius: .9rem;
    -webkit-overflow-scrolling: touch;
}

.table-wrap::-webkit-scrollbar {
    height: 8px;
}

.table-wrap::-webkit-scrollbar-thumb {
    background: #D6D1E0;
    border-radius: 999px;
}

.table-wrap::-webkit-scrollbar-track {
    background: transparent;
}

.data-table {
    margin-bottom: 0;
    min-width: 720px;
    --bs-table-bg: transparent;
}

.data-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: .85rem 1rem;
    background: #F7F6FA;
    color: #6B6B76;
    font-size: .82rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .02em;
    white-space: nowrap;
    border-bottom: 1px solid #E7E4EE;
}

.data-table tbody td {
    padding: .85rem 1rem;
    vertical-align: middle;
    border-bottom: 1px solid #F1EFF6;
}

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

.data-table tbody tr:hover td {
    background: #FAF9FD;
}

.data-table tbody td.table-empty {
    padding: 2rem 1rem;
    color: #6B6B76;
    text-align: center;
}

@media (max-width: 767.98px) {
    body.modal-open .sidebar-toggle {
        display: none !important;
    }

    .data-table th.table-actions-head,
    .data-table td.table-actions-cell {
        position: sticky;
        right: 0;
        padding-left: 1.25rem;
        background: linear-gradient(to right, rgba(255, 255, 255, 0), #FFFFFF .9rem);
    }

    .data-table:not(:has(td.table-actions-cell:not(.is-empty))) th.table-actions-head,
    .data-table td.table-actions-cell.is-empty {
        position: static;
        background: transparent;
    }

    .data-table td.cell-human_reason {
        min-width: 13rem;
    }

    .data-table thead th.table-actions-head {
        background: linear-gradient(to right, rgba(247, 246, 250, 0), #F7F6FA .9rem);
        z-index: 2;
    }

    .data-table tbody tr:hover td.table-actions-cell {
        background: linear-gradient(to right, rgba(250, 249, 253, 0), #FAF9FD .9rem);
    }

    .table-actions-cell .btn-circle {
        padding: .3rem .5rem;
    }
}

@media (max-width: 767.98px) {
    .data-table tbody td.table-empty {
        text-align: left;
    }

    .data-table-cards {
        min-width: 0;
    }

    .data-table-cards thead {
        display: none;
    }

    .data-table-cards tbody,
    .data-table-cards tr {
        display: block;
    }

    .data-table-cards tbody tr {
        padding: .65rem 0;
        border-bottom: 1px solid #F1EFF6;
    }

    .data-table-cards tbody tr:last-child {
        border-bottom: 0;
    }

    .data-table-cards tbody td,
    .data-table-cards tbody tr:hover td {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: .75rem;
        min-width: 0;
        padding: .2rem 0;
        text-align: end;
        background: transparent;
        border: 0;
    }

    .data-table-cards tbody td::before {
        content: attr(data-label);
        flex: 0 0 auto;
        max-width: 45%;
        color: #6B6B76;
        font-size: .82rem;
        text-align: start;
    }

    .data-table-cards tbody td.cell-human_reason {
        min-width: 0;
        font-weight: 600;
    }

    .data-table-cards tbody td.table-actions-cell,
    .data-table-cards tbody tr:hover td.table-actions-cell {
        position: static;
        width: auto;
        justify-content: flex-end;
        padding-top: .4rem;
        background: transparent;
    }

    .data-table-cards tbody td.table-actions-cell::before,
    .data-table-cards tbody td.table-empty::before {
        content: none;
    }

    .data-table-cards tbody td.table-actions-cell.is-empty {
        display: none;
    }

    .data-table-cards tbody td.table-empty {
        display: block;
        text-align: start;
    }
}

.data-table td.cell-phone_number,
.data-table td.cell-employee_phone,
.data-table td.cell-human_date_time,
.data-table td.cell-human_hours {
    white-space: nowrap;
}

.table-actions-cell {
    white-space: nowrap;
    width: 1%;
}

.table-actions-cell .btn-circle + .btn-circle {
    margin-left: .25rem;
}

@media (max-width: 767.98px) {
    .data-table thead th,
.data-table tbody td {
        padding: .7rem .75rem;
        font-size: .92rem;
    }

    .content-section {
        padding: .85rem 1rem;
        overflow-x: visible;
    }
}

.content-section > .table-wrap,
.content-section .table-wrap {
    border: 0;
    border-radius: 0;
    background: transparent;
}

.content-section .data-table thead th {
    background: #F7F6FA;
}

.table-pagination {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid #F1EFF6;
}

.table-pagination .pagination {
    --bs-pagination-padding-x: .85rem;
    --bs-pagination-padding-y: .45rem;
    --bs-pagination-color: #6B6B76;
    --bs-pagination-bg: transparent;
    --bs-pagination-border-width: 1px;
    --bs-pagination-border-color: #E7E4EE;
    --bs-pagination-border-radius: .6rem;
    --bs-pagination-hover-color: #2B00CE;
    --bs-pagination-hover-bg: #F7F5FF;
    --bs-pagination-hover-border-color: #D6CCFA;
    --bs-pagination-focus-color: #2B00CE;
    --bs-pagination-focus-bg: #F7F5FF;
    --bs-pagination-focus-box-shadow: 0 0 0 .2rem rgba(43, 0, 206, .12);
    --bs-pagination-active-color: #FFFFFF;
    --bs-pagination-active-bg: #2B00CE;
    --bs-pagination-active-border-color: #2B00CE;
    --bs-pagination-disabled-color: #C3BFCE;
    --bs-pagination-disabled-bg: transparent;
    --bs-pagination-disabled-border-color: #F1EFF6;
    gap: .35rem;
    margin-bottom: 0;
}

.table-pagination .page-link {
    min-width: 2.5rem;
    text-align: center;
    font-weight: 600;
    line-height: 1.4;
}

.table-pagination .page-item.active .page-link {
    box-shadow: 0 4px 12px rgba(43, 0, 206, .22);
}

@media (max-width: 575.98px) {
    .table-pagination {
        margin-top: 1rem;
        padding-top: .85rem;
    }
}

.form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: 1.25rem;
}

.form-actions .btn {
    flex: 1 1 100%;
}

.form-actions-danger {
    margin-left: 0;
}

@media (min-width: 576px) {
    .form-actions .btn {
        flex: 0 0 auto;
    }

    .form-actions-danger {
        margin-left: auto;
    }
}

.page-hint {
    margin: -.35rem 0 1rem;
    color: #6B6B76;
    font-size: .95rem;
    max-width: 60ch;
}

.page-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: 1rem;
}

.page-actions .btn {
    flex: 1 1 100%;
}

.page-actions .action-count {
    position: relative;
    z-index: 2;
    margin-inline-start: .35rem;
    vertical-align: .1em;
}

.journal-marks-switch {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0;
    padding-inline-start: 0;
}

.journal-marks-switch .form-check-input {
    float: none;
    margin: 0;
}

@media (min-width: 576px) {
    .journal-marks-switch {
        margin-inline-start: auto;
    }
}

.modal-content {
    border: 0;
    border-radius: 1rem;
}

.modal-header,
.modal-footer {
    border-color: #F1EFF6;
}

.modal-footer .btn {
    flex: 1 1 auto;
}

@media (min-width: 576px) {
    .page-actions .btn {
        flex: 0 0 auto;
    }

    .modal-footer .btn {
        flex: 0 0 auto;
    }
}

.form-grid > [class*="col-"] {
    display: flex;
}

.form-grid > [class*="col-"] > .mb-3:not(.form-check) {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 0;
    margin-bottom: 0 !important;
}

.form-grid > [class*="col-"] > .mb-3:not(.form-check) > .form-label {
    flex: 1 0 auto;
    margin-bottom: .4rem;
}

.form-grid > [class*="col-"] > .mb-3:not(.form-check) > .form-text {
    margin-top: .35rem;
}

.form-grid > [class*="col-"] > .form-check,
.form-grid > [class*="col-"] > .form-check.mb-3 {
    display: flex;
    align-items: center;
    gap: .5rem;
    width: 100%;
    min-height: 2.5rem;
    margin: 0;
    padding-left: 0;
    align-self: flex-end;
}

.form-grid > [class*="col-"] > .form-check .form-check-input {
    flex: 0 0 auto;
    margin: 0;
    float: none;
}

.form-grid > [class*="col-"] > .form-check .form-check-label {
    margin: 0;
}

.form-grid .form-control,
.form-grid .form-select {
    width: 100%;
}

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

.input-group-hm .form-control,
.input-group-hm .input-group-text {
    padding-right: .5rem;
    padding-left: .5rem;
}

.confirm-modal-text {
    margin-bottom: 0;
    color: #4A4A55;
}

.confirm-modal-subject {
    margin-top: .85rem;
    padding: .7rem .9rem;
    background: #F7F6FA;
    border: 1px solid #E7E4EE;
    border-left: 3px solid #C6303A;
    border-radius: .6rem;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.error-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: calc(100vh - 62px);
    padding: 2rem 1rem;
    text-align: center;
}

.error-code {
    font-size: clamp(4rem, 18vw, 7rem);
    font-weight: 700;
    line-height: 1;
    background: var(--gradient);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ===== SuperCheck ===== */

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

.circle-done {
    width: 100px;
    height: 100px;
    background-image: url('../images/icon-done.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 30px;
    background-color: #F7F5FF;
    border-radius: 50%;
}

.circle-cancel {
    width: 100px;
    height: 100px;
    background-image: url('../images/icon-cancel.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 40px;
    background-color: #F7F5FF;
    border-radius: 50%;
}

.schedule-item {
    display: flex;
    align-items: stretch;
    gap: .5em;
    margin: 0 0 1em;
    border-radius: var(--bs-border-radius);
}

.schedule-item .schedule-title {
    flex: auto;
    padding: 0 1em;
    border: 1px solid #DDDDDD;
    border-radius: var(--bs-border-radius);
}

.schedule-item .btn-group-vertical .btn {
    --bs-btn-padding-y: .125rem;
    --bs-btn-padding-x: .5rem;
    --bs-btn-font-size: .75rem;
}

.home-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    max-width: 680px;
    min-height: calc(100vh - 62px);
    margin: 0 auto;
    padding: 1.5rem 0 3rem;
    text-align: center;
}

.home-hero h1 {
    font-size: clamp(1.6rem, 5vw, 2.4rem);
    font-weight: 700;
    margin-bottom: 1rem;
}

.home-lead {
    color: #5A5A72;
    font-size: clamp(1rem, 2.5vw, 1.125rem);
    line-height: 1.6;
    margin-bottom: 2rem;
}

.home-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .75rem;
}

.home-actions .btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .65rem 1.4rem;
}

.navbar-logo {
    width: 300px;
    max-width: 100%;
    height: auto;
}

.error-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: 60vh;
    padding: 2rem 1rem;
    text-align: center;
}

.error-code {
    font-size: clamp(4rem, 18vw, 7rem);
    font-weight: 700;
    line-height: 1;
    background: linear-gradient(135deg, #2B00CE 0%, #BA46A8 55%, #FF9F22 100%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
}

.error-title {
    font-size: clamp(1.2rem, 4vw, 1.6rem);
    font-weight: 600;
}

.error-text {
    color: #5A5A72;
    margin-bottom: 1rem;
}

.auth-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    min-height: calc(100vh - 62px);
    padding: 1.5rem 1rem 3rem;
}

.auth-card {
    width: 100%;
    max-width: 420px;
    padding: clamp(1.25rem, 4vw, 2rem);
    background: #FFFFFF;
    border: 1px solid #ECEAF4;
    border-radius: 1rem;
    box-shadow: 0 12px 32px rgba(20, 16, 40, .06);
}

.auth-title {
    font-size: clamp(1.25rem, 4vw, 1.6rem);
    font-weight: 700;
    margin-bottom: 1.25rem;
}

.check-in-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 62px);
    padding: 1.5rem 1rem 3rem;
}

.check-in-card {
    width: 100%;
    max-width: 420px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    padding: clamp(1.5rem, 5vw, 2.5rem);
    background: #FFFFFF;
    border: 1px solid #ECEAF4;
    border-radius: 1.25rem;
    box-shadow: 0 12px 32px rgba(20, 16, 40, .06);
    text-align: center;
}

.check-in-clock {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    color: #2B00CE;
}

.check-in-clock .live-time {
    font-size: clamp(2rem, 10vw, 3rem);
    font-weight: 700;
    line-height: 1;
}

.check-in-body {
    width: 100%;
}

.check-in-footer {
    width: 100%;
}

.back-to-superqr {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .4rem .85rem;
    border: 1px solid rgba(43, 0, 206, .25);
    border-radius: 999px;
    background: rgba(43, 0, 206, .06);
    color: #2B00CE;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    transition: background .15s ease, border-color .15s ease;
}

.back-to-superqr:hover {
    background: rgba(43, 0, 206, .12);
    border-color: rgba(43, 0, 206, .45);
    color: #2B00CE;
}

.back-to-superqr i {
    font-size: 1rem;
}
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.navbar-logo {
    width: 220px;
    max-width: 100%;
    height: auto;
}

.navbar-product {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    max-width: 18rem;
}

.navbar-product-mark {
    flex: none;
    width: 26px;
    height: 26px;
}

.navbar-product-name {
    overflow: hidden;
    color: #171725;
    font-size: 1rem;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 991.98px) {
    .navbar-logo {
        width: 180px;
    }
}

@media (max-width: 575.98px) {
    .back-to-superqr span {
        display: none;
    }

    .back-to-superqr {
        width: 44px;
        height: 44px;
        padding: 0;
        justify-content: center;
        border-radius: 10px;
    }
}

.qr-tile {
    margin: 0 0 1.25rem;
    padding: 1.25rem;
    background: #F7F6FA;
    border: 1px solid #E7E4EE;
    border-radius: .9rem;
    text-align: center;
}

.qr-tile img {
    display: block;
    width: 220px;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    padding: .75rem;
    background: #FFF;
    border-radius: .6rem;
}

.qr-tile figcaption {
    margin-top: .85rem;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.qr-link .form-control {
    font-size: .875rem;
}

.qr-link .btn {
    --bs-btn-border-color: #DEE2E6;
    --bs-btn-hover-border-color: #2B00CE;
    --bs-btn-active-border-color: #B5A6ED;
    font-weight: 600;
}

.qr-hint {
    margin-bottom: 0;
    color: #4A4A55;
    font-size: .875rem;
}

.check-in-clock.is-compact {
    order: -1;
    flex-direction: row;
    align-items: baseline;
    gap: .5rem;
    color: #4A4A55;
}

.check-in-clock.is-compact .live-time {
    font-size: 1.125rem;
    font-weight: 600;
    color: #2B00CE;
}

.punch-object {
    margin: .35rem 0 0;
    color: #1B1B25;
    font-size: 1.0625rem;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.punch-rail {
    margin-top: 1.25rem;
}

.punch-rail-track {
    position: relative;
    height: 6px;
    background: #ECEAF4;
    border-radius: 999px;
}

.punch-rail-fill {
    position: absolute;
    inset: 0 auto 0 0;
    background: var(--gradient);
    border-radius: 999px;
}

.punch-rail-now {
    position: absolute;
    top: 50%;
    width: 14px;
    height: 14px;
    margin-left: -7px;
    background: #FFFFFF;
    border: 3px solid #2B00CE;
    border-radius: 50%;
    transform: translateY(-50%);
}

.punch-rail-ends {
    display: flex;
    justify-content: space-between;
    margin-top: .45rem;
    color: #4A4A55;
    font-size: .8125rem;
    font-variant-numeric: tabular-nums;
}

.punch-timing {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin: 1.25rem 0 0;
    padding: .35rem .8rem;
    border-radius: 999px;
    font-size: .875rem;
    font-weight: 600;
}

.punch-timing.is-ontime {
    background: #E9F7EF;
    color: #1B7A45;
}

.punch-timing.is-off {
    background: #FDF3E3;
    color: #8A5A00;
}

.cell-badges {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
}

.cell-badges .badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.central-staff-notice {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    cursor: help;
}

.nav-tools {
    gap: .5rem;
}

.sqr-account {
    position: relative;
    display: inline-flex;
}

.sqr-account > summary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #FFFFFF;
    border: 1px solid #E2E2EA;
    color: #5A5A72;
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
    list-style: none;
    transition: border-color .15s ease, color .15s ease;
    user-select: none;
}

.sqr-account > summary::-webkit-details-marker {
    display: none;
}

.sqr-account > summary:hover,
.sqr-account[open] > summary {
    border-color: #5B3FF3;
    color: #171725;
}

.sqr-account-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    z-index: 1050;
    min-width: 230px;
    margin: 0;
    padding: 6px;
    list-style: none;
    background: #FFFFFF;
    border: 1px solid #ECEAF4;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(23, 23, 37, .12);
    text-align: left;
}

.sqr-account-name {
    padding: 8px 10px 6px;
    font-size: 14px;
    font-weight: 600;
    color: #171725;
}

.sqr-account-name small {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    font-weight: 500;
    color: #9A9AB0;
}

.sqr-account-menu a {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    padding: 0 10px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    color: #171725;
    text-decoration: none;
}

.sqr-account-menu a:hover {
    background: #F6F6F9;
    color: #171725;
}

.sqr-account-menu a.active {
    background: #F3F1FE;
    color: #5B3FF3;
}

.sqr-account-sep {
    height: 1px;
    margin: 6px 4px;
    background: #ECEAF4;
}

@media (max-width: 480px) {
    .sqr-account > summary {
        width: 36px;
        height: 36px;
        font-size: 1.15rem;
    }
}

.punch-state {
    width: 100%;
    text-align: center;
}

.punch-state-line {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    margin: .4rem 0 0;
    color: #1B1B25;
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1.25;
}

.punch-dot {
    flex: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #C3BFCE;
}

.punch-state-line.is-on .punch-dot {
    background: #26BA35;
    animation: punch-pulse 2s ease-out infinite;
}

.punch-state-line.is-done .punch-dot {
    background: #2B00CE;
}

.punch-state-line.is-alert {
    color: #C6303A;
}

.punch-state-line.is-alert .punch-dot {
    background: #C6303A;
}

.punch-state-sub {
    margin: .4rem 0 0;
    color: #4A4A55;
    font-size: .9375rem;
}

.punch-state-today {
    margin: .85rem 0 0;
    color: #6B6B76;
    font-size: .875rem;
}

.punch-form {
    margin-top: 1.5rem;
}

.punch-norm {
    margin: 1rem 0 0;
    padding: .75rem .875rem;
    text-align: start;
    background: #F6F5FB;
    border-radius: .875rem;
}

.punch-norm-line {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: .25rem .75rem;
    margin: 0;
    color: #4A4A55;
    font-size: .875rem;
}

.punch-norm-line strong {
    color: #1B1B25;
    font-variant-numeric: tabular-nums;
}

.punch-norm-bar {
    height: 6px;
    margin-top: .5rem;
    overflow: hidden;
    background: #E4E1EE;
    border-radius: 999px;
}

.punch-norm-bar > span {
    display: block;
    height: 100%;
    background: var(--gradient);
    border-radius: inherit;
}

.punch-norm-note {
    display: flex;
    gap: .4rem;
    margin: .625rem 0 0;
    color: #4A4A55;
    font-size: .8125rem;
}

.punch-norm-note .bi {
    flex: none;
    margin-top: .1rem;
}

.punch-norm.is-warn {
    background: #FDF3E3;
}

.punch-norm.is-warn .punch-norm-note {
    color: #8A5A00;
    font-weight: 600;
}

.punch-norm.is-warn .punch-norm-bar > span {
    background: #D48A00;
}

.punch-handover-lead {
    margin: 0 0 .75rem;
    color: #4A4A55;
    font-size: .9375rem;
}

.punch-choice {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .2rem;
    padding: .75rem 1rem;
    white-space: normal;
}

.punch-choice + .punch-choice {
    margin-top: .625rem;
}

.punch-choice small {
    position: relative;
    z-index: 2;
    color: #4A4A55;
    font-size: .8125rem;
    font-weight: 400;
}

.punch-choice:hover small {
    color: #FFFFFF;
}

.punch-choice-plain {
    display: block;
    min-height: 2.75rem;
    margin: .5rem auto 0;
    font-size: .875rem;
}

.punch-handover-note {
    margin: -.25rem 0 .75rem;
    font-size: .875rem;
}

@keyframes punch-pulse {
    0% { box-shadow: 0 0 0 0 rgba(38, 186, 53, .45); }
    100% { box-shadow: 0 0 0 10px rgba(38, 186, 53, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .punch-state-line.is-on .punch-dot {
        animation: none;
    }
}

.hub {
    width: 100%;
    max-width: 420px;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.hub-head {
    padding: .5rem 0 0;
    text-align: center;
}

.hub-eyebrow {
    margin: 0;
    color: #6B6B76;
    font-size: .8125rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.hub-name {
    margin: .15rem 0 0;
    font-size: clamp(1.35rem, 5vw, 1.75rem);
    font-weight: 700;
}

.hub-date {
    justify-content: center;
    margin: .35rem 0 0;
}

.hub-card {
    gap: 0;
    padding: clamp(1.25rem, 4vw, 1.75rem);
}

.hub-hint {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    margin: 0;
    padding: .85rem 1rem;
    background: #F7F5FF;
    border-radius: .9rem;
    color: #4A4A55;
    font-size: .875rem;
    text-align: left;
}

.hub-hint .bi {
    flex: none;
    color: #2B00CE;
    font-size: 1.15rem;
}

.hub-orgs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem .9rem;
    margin: 0;
    color: #6B6B76;
    font-size: .8125rem;
}

.hub-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem 1.25rem;
    margin: 0;
    font-size: .9375rem;
}

.hub-links a {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    color: #2B00CE;
    text-decoration: none;
}

.hub-links a:hover {
    text-decoration: underline;
}

[dir="rtl"] .alert-wrapper {
    right: auto;
    left: 15px;
}

[dir="rtl"] .content-sidebar {
    left: auto;
    right: 0;
    border-right: 0;
    border-left: 1px solid #DCD7E2;
}

[dir="rtl"] .sidebar-toggle {
    left: auto;
    right: 10px;
}

[dir="rtl"] .nav-pills .nav-link.active::before {
    left: auto;
    right: -.5rem;
    border-radius: 4px 0 0 4px;
}

[dir="rtl"] .content-main {
    margin-left: 0;
    margin-right: var(--sidebar-width);
}

[dir="rtl"] .table-actions-cell .btn-circle + .btn-circle {
    margin-left: 0;
    margin-right: .25rem;
}

[dir="rtl"] .form-grid > [class*="col-"] > .form-check.mb-3 {
    padding-right: 0;
}

[dir="rtl"] .confirm-modal-subject {
    border-left: 1px solid #E7E4EE;
    border-right: 3px solid #C6303A;
}

[dir="rtl"] .punch-rail-fill {
    inset: 0 0 0 auto;
}

[dir="rtl"] .punch-rail-now {
    margin-left: 0;
    margin-right: -7px;
}

[dir="rtl"] .sqr-account-menu {
    right: auto;
    left: 0;
    text-align: right;
}

[dir="rtl"] .hub-hint {
    text-align: right;
}

[dir="rtl"] .data-table td.cell-phone_number,
[dir="rtl"] .data-table td.cell-employee_phone {
    direction: ltr;
    text-align: right;
}

[dir="rtl"] .bi-arrow-left::before,
[dir="rtl"] .bi-arrow-right::before,
[dir="rtl"] .bi-box-arrow-left::before,
[dir="rtl"] .bi-box-arrow-right::before,
[dir="rtl"] .bi-box-arrow-in-right::before,
[dir="rtl"] .bi-chevron-left::before,
[dir="rtl"] .bi-chevron-right::before {
    transform: scaleX(-1);
}

[dir="rtl"] .select2-container--bootstrap-5 .select2-selection--single {
    padding-right: .75rem;
    padding-left: 2.25rem;
    background-position: left .75rem center;
}

[dir="rtl"] .select2-container--bootstrap-5 .select2-selection__clear {
    right: auto;
    left: 2.25rem;
}

[dir="rtl"] .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__clear {
    right: auto;
    left: .75rem;
}

[dir="rtl"] .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered .select2-selection__choice {
    margin-right: 0;
    margin-left: .375rem;
}

[dir="rtl"] .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered .select2-selection__choice .select2-selection__choice__remove {
    margin-right: 0;
    margin-left: .25rem;
}

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

    [dir="rtl"] .content-sidebar.is-open {
        transform: none;
    }

    [dir="rtl"] .content-sidebar.is-open {
        box-shadow: -16px 0 32px -16px rgba(20, 16, 40, .25);
    }

    [dir="rtl"] body:has(.sidebar-toggle) .brand-block {
        margin-left: 0 !important;
        margin-right: 62px !important;
    }

    [dir="rtl"] .content-main {
        margin-right: 0;
    }
}

@media (min-width: 576px) {
    [dir="rtl"] .form-actions-danger {
        margin-left: 0;
        margin-right: auto;
    }
}

@media (max-width: 767.98px) {
    [dir="rtl"] .data-table th.table-actions-head,
    [dir="rtl"] .data-table td.table-actions-cell {
        right: auto;
        left: 0;
        padding-left: 1rem;
        padding-right: 1.25rem;
        background: linear-gradient(to left, rgba(255, 255, 255, 0), #FFFFFF .9rem);
    }

    [dir="rtl"] .data-table td.table-actions-cell.is-empty {
        background: transparent;
    }

    [dir="rtl"] .data-table thead th.table-actions-head {
        background: linear-gradient(to left, rgba(247, 246, 250, 0), #F7F6FA .9rem);
    }

    [dir="rtl"] .data-table tbody tr:hover td.table-actions-cell {
        background: linear-gradient(to left, rgba(250, 249, 253, 0), #FAF9FD .9rem);
    }

    [dir="rtl"] .data-table tbody td.table-empty {
        text-align: right;
    }

    [dir="rtl"] .data-table-cards tbody td.table-actions-cell,
    [dir="rtl"] .data-table-cards tbody tr:hover td.table-actions-cell {
        padding-left: 0;
        padding-right: 0;
        background: transparent;
    }
}

.dash {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

[dir="rtl"] .dash-grid td[dir],
[dir="rtl"] .dash-rank-name,
[dir="rtl"] .dash-detail-list [dir] {
    text-align: right;
}

.dash,
.dash-detail {
    --bs-dropdown-link-active-bg: var(--dash-brand);
    --bs-pagination-focus-box-shadow: 0 0 0 .2rem var(--dash-focus);
    --bs-pagination-active-bg: var(--dash-brand);
    --bs-pagination-active-border-color: var(--dash-brand);
}

.dash .form-control:focus,
.dash .form-select:focus,
.dash-detail .form-control:focus {
    border-color: var(--dash-brand);
    box-shadow: 0 0 0 .2rem rgba(43, 0, 206, .25);
}

.dash .btn:focus-visible,
.dash-detail .btn:focus-visible,
.dash-chip:focus-visible,
.dash-clear:focus-visible,
.dash-sort:focus-visible {
    outline: 3px solid var(--dash-focus);
    outline-offset: 2px;
    box-shadow: none;
}

.dash .btn-primary,
.dash-detail .btn-primary {
    --bs-btn-hover-bg: #2400AD;
    --bs-btn-hover-border-color: #2400AD;
    --bs-btn-active-bg: #1E0091;
    --bs-btn-active-border-color: #1E0091;
}

.dash-filters,
.dash-table {
    scroll-margin-top: calc(62px + 1rem);
}

.dash-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem 1rem;
}

.dash-head .page-title {
    margin: 0;
}

.dash-period,
.dash-periods {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
}

.dash-range,
.dash-periods > .btn,
.dash-periods > .dropdown > .btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    min-height: 2.5rem;
    padding: .4rem .875rem;
    font-size: .875rem;
    font-weight: 600;
    color: var(--dash-ink);
    background: #FFFFFF;
    border: 1px solid #E3E0EE;
    border-radius: .75rem;
}

.dash-range:hover,
.dash-periods > .btn:hover,
.dash-periods > .dropdown > .btn:hover {
    border-color: #B5A6ED;
    color: var(--dash-ink);
}

.dash-periods > .btn.is-active,
.dash-periods > .dropdown > .btn.is-active {
    color: #FFFFFF;
    background: var(--dash-brand);
    border-color: var(--dash-brand);
}

.dash-range-form {
    min-width: 260px;
    padding: 1rem;
    border-radius: 1rem;
}

.dash-stats {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: .75rem;
}

.dash-stat {
    display: flex;
    align-items: flex-start;
    gap: .625rem;
    min-width: 0;
    padding: .75rem;
    text-align: start;
    color: var(--dash-ink);
    background: var(--tone-bg);
    border: 1px solid var(--tone-line);
    border-radius: 1rem;
    cursor: pointer;
    transition: box-shadow .15s ease, transform .15s ease;
}

@media (hover: hover) {
    .dash-stat:hover {
        box-shadow: 0 6px 18px rgba(28, 22, 64, .08);
        transform: translateY(-1px);
    }
}

.dash-stat:focus-visible {
    outline: 3px solid rgba(43, 0, 206, .45);
    outline-offset: 2px;
}

.dash-stat-icon {
    flex: 0 0 2.25rem;
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    font-size: 1.05rem;
    color: var(--tone-ink);
    background: var(--tone-tile);
    border-radius: .75rem;
}

.dash-stat-body {
    display: flex;
    flex-direction: column;
    align-self: stretch;
    min-width: 0;
}

.dash-stat-title {
    min-height: 2.5em;
    overflow-wrap: break-word;
    hyphens: auto;
    font-size: .75rem;
    line-height: 1.25;
    color: var(--dash-muted);
}

.dash-stat-value {
    margin-top: .125rem;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.2;
    color: #1C1258;
    white-space: nowrap;
}

.dash-stat-value.is-long {
    font-size: clamp(.9375rem, 1.15vw, 1.25rem);
    line-height: 1.35;
    white-space: normal;
}

.dash-delta,
.dash-status {
    display: inline-flex;
    align-items: baseline;
    gap: .25rem;
    margin-top: .25rem;
    font-size: .75rem;
    font-weight: 600;
}

.dash-delta.is-good {
    color: #0E7040;
}

.dash-delta.is-bad {
    color: #B8233A;
}

.dash-delta.is-neutral,
.dash-status.is-idle {
    color: var(--dash-muted);
}

.dash-status.is-live {
    color: #0E7040;
}

.dash-status.is-warn {
    color: #8F5700;
}

.dash-dot {
    display: inline-block;
    width: .45rem;
    height: .45rem;
    border-radius: 50%;
    background: currentColor;
}

.dash-status .dash-dot {
    flex: 0 0 auto;
    align-self: flex-start;
    margin-top: .3em;
}

.dash-status.is-live .dash-dot {
    box-shadow: 0 0 0 3px rgba(18, 129, 75, .18);
}

.tone-violet { --tone-bg: #F7F5FF; --tone-line: #ECE7FF; --tone-tile: #E8E1FF; --tone-ink: #5B3DF5; }
.tone-blue { --tone-bg: #F3F7FF; --tone-line: #E2ECFF; --tone-tile: #DDE8FF; --tone-ink: #2F62E8; }
.tone-green { --tone-bg: #F1FAF4; --tone-line: #DDF2E5; --tone-tile: #D6F1E0; --tone-ink: #16894F; }
.tone-orange { --tone-bg: #FFF7EE; --tone-line: #FDE9D2; --tone-tile: #FFE4C7; --tone-ink: #DB7410; }
.tone-rose { --tone-bg: #FFF4F6; --tone-line: #FDE2E8; --tone-tile: #FFDCE4; --tone-ink: #D93A63; }
.tone-lime { --tone-bg: #F6FBEC; --tone-line: #E7F3CF; --tone-tile: #E3F2C2; --tone-ink: #5F8F12; }
.tone-red { --tone-bg: #FFF3F3; --tone-line: #FCDEDE; --tone-tile: #FFD9D9; --tone-ink: #D6334A; }

.dash-card {
    padding: 1rem;
    background: #FFFFFF;
    border: 1px solid var(--dash-line);
    border-radius: 1rem;
}

.dash-filter-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: .75rem;
}

.dash-search {
    position: relative;
    flex: 2 1 220px;
}

.dash-search .bi {
    position: absolute;
    top: 50%;
    inset-inline-start: .875rem;
    transform: translateY(-50%);
    color: #8A86A0;
    pointer-events: none;
}

.dash-search .form-control {
    height: 2.75rem;
    padding-inline-start: 2.375rem;
    font-size: .875rem;
    border-radius: .75rem;
}

.dash-field {
    flex: 1 1 130px;
    min-width: 0;
}

.dash-field .form-label {
    margin-bottom: .25rem;
    font-size: .75rem;
    color: var(--dash-muted);
}

.dash-field .form-select {
    height: 2.75rem;
    font-size: .875rem;
    border-radius: .75rem;
}

.dash-filter-actions {
    display: flex;
    gap: .5rem;
    margin-inline-start: auto;
}

.dash-filter-actions .btn {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    height: 2.75rem;
    padding: 0 1rem;
    font-weight: 600;
    border-radius: .75rem;
}

.dash-count {
    display: inline-grid;
    place-items: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 .3rem;
    font-size: .75rem;
    color: var(--dash-brand);
    background: #FFFFFF;
    border-radius: 999px;
}

.dash-btn-outline {
    color: var(--dash-brand);
    background: #FFFFFF;
    border: 1px solid var(--dash-brand);
}

.dash-btn-outline:hover,
.dash-btn-outline:focus-visible {
    color: var(--dash-brand);
    background: #F7F5FF;
    border-color: var(--dash-brand);
}

.dash-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin-top: .75rem;
    font-size: .8125rem;
}

.dash-chips-label {
    color: var(--dash-muted);
}

.dash-chip {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    max-width: 100%;
    overflow-wrap: anywhere;
    padding: .25rem .625rem;
    color: var(--dash-brand);
    text-decoration: none;
    background: #EFEBFF;
    border-radius: 999px;
}

.dash-chip:hover {
    color: var(--dash-brand);
    background: #E2DBFF;
}

.dash-clear {
    color: var(--dash-brand);
}

.dash-toolbar,
.dash-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
}

.dash-toolbar {
    margin-bottom: .75rem;
}

.dash-toolbar-start,
.dash-footer-info,
.dash-footer-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem 1rem;
}

.dash-toolbar .btn-sm {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    padding: .375rem .75rem;
    font-weight: 600;
    border-radius: .625rem;
}

.dash-toolbar .btn-sm:disabled {
    color: #6F6A86;
    background: #EEEDF3;
    border-color: #EEEDF3;
    opacity: 1;
}

.dash-selected,
.dash-footer {
    font-size: .8125rem;
    color: var(--dash-muted);
}

.dash-footer {
    margin-top: .75rem;
}

.dash-footer strong {
    color: var(--dash-ink);
}

.dash-grid {
    margin: 0;
    font-size: .8125rem;
    color: var(--dash-ink);
}

.dash-grid thead th {
    padding: .625rem .375rem;
    font-size: .6875rem;
    font-weight: 700;
    color: #3E3A55;
    white-space: nowrap;
    background: #F5F4FA;
    border-bottom: 0;
}

.dash-grid thead th:first-child {
    border-start-start-radius: .625rem;
    border-end-start-radius: .625rem;
}

.dash-grid thead th:last-child {
    border-start-end-radius: .625rem;
    border-end-end-radius: .625rem;
}

.dash-grid td {
    padding: .5rem .375rem;
    white-space: nowrap;
    vertical-align: middle;
    border-color: #F0EEF6;
}

.dash-grid tbody tr:hover > * {
    background: #FAF9FE;
}

.dash-grid tbody tr.is-selected > * {
    background: #F4F1FF;
}

.dash-sort {
    display: inline-flex;
    align-items: center;
    gap: .125rem;
    color: inherit;
    text-decoration: none;
}

.dash-sort .bi {
    font-size: .6875rem;
    color: #7C7894;
}

.dash-sort.is-active .bi {
    color: var(--dash-brand);
}

.dash-check {
    width: 2rem;
}

.dash-id {
    color: var(--dash-muted);
}

.dash-name {
    font-weight: 600;
}

.dash-muted {
    color: var(--dash-muted);
}

.dash-status-text {
    white-space: nowrap;
}

.dash-pill {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .125rem .5rem;
    font-size: .75rem;
    font-weight: 600;
    white-space: nowrap;
    border-radius: 999px;
}

.dash-pill + .dash-pill,
.dash-status-text + .dash-pill {
    margin-inline-start: .25rem;
}

.dash-pill.is-green { color: #0E7040; background: #E6F7EE; }
.dash-pill.is-grey { color: #4A4660; background: #EEEDF3; }
.dash-pill.is-red { color: #C62A41; background: #FDECEE; }
.dash-pill.is-amber { color: #8F6200; background: #FFF4D6; }
.dash-pill.is-violet { color: #4A2BD9; background: #EFEBFF; }

.dash-grid .dash-menu {
    position: sticky;
    inset-inline-end: 0;
    z-index: 1;
    width: 2.25rem;
    background: #FFFFFF;
}

.dash-grid .dash-menu.is-open {
    z-index: 3;
}

.table-responsive.is-scrollable .dash-grid .dash-menu {
    box-shadow: inset 8px 0 8px -8px rgba(20, 16, 40, .2);
}

[dir="rtl"] .table-responsive.is-scrollable .dash-grid .dash-menu {
    box-shadow: inset -8px 0 8px -8px rgba(20, 16, 40, .2);
}

.dash-grid .form-check-input:checked,
.dash-grid .form-check-input:indeterminate {
    background-color: var(--dash-brand);
    border-color: var(--dash-brand);
}

.dash-hit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: -.375rem;
    padding: .375rem;
    cursor: pointer;
}

.dash-sort-mobile {
    display: none;
}

.dash-detail-time {
    font-size: .8125rem;
    color: var(--dash-muted);
    white-space: nowrap;
}

.dash-chart-max {
    margin: -.25rem 0 .375rem;
    font-size: .75rem;
    color: var(--dash-muted);
}

.dash-chart-col.is-zero::after {
    content: "";
    width: 100%;
    height: 2px;
    background: #DCD8EA;
    border-radius: 1px;
}

.dash-grid thead .dash-menu {
    background: #F5F4FA;
}

.dash-select-all {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin: 0;
    cursor: pointer;
}

.dash-select-all span {
    display: none;
}

.dash-kebab {
    padding: .25rem .5rem;
    color: var(--dash-muted);
    border: 0;
}

.dash-kebab:hover,
.dash-kebab:focus-visible {
    background: #F0EEF6;
}

.dash-empty {
    padding: 2rem !important;
    text-align: center;
    color: var(--dash-muted);
}

.dash-per-page {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin: 0;
}

.dash-per-page .form-select {
    width: auto;
    border-radius: .5rem;
}

.dash-pagination .page-link {
    min-width: 2rem;
    margin: 0 .125rem;
    text-align: center;
    color: var(--dash-ink);
    border-color: #E3E0EE;
    border-radius: .5rem !important;
}

.dash-pagination .active .page-link {
    color: #FFFFFF;
    background: var(--dash-brand);
    border-color: var(--dash-brand);
}

.dash-detail {
    --bs-offcanvas-width: 460px;
}

.dash-detail .offcanvas-title {
    font-size: 1.125rem;
    font-weight: 700;
}

.dash-detail-period {
    font-size: .875rem;
    color: var(--dash-muted);
}

.dash-detail-pills {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: 1rem;
}

.dash-detail-pills span {
    padding: .25rem .625rem;
    font-size: .8125rem;
    font-weight: 600;
    background: #F5F4FA;
    border-radius: 999px;
}

.dash-detail-section {
    margin-bottom: 1.25rem;
}

.dash-detail-section h3 {
    margin-bottom: .5rem;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--dash-muted);
}

.dash-chart {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 120px;
    padding: .5rem;
    background: #F8F7FC;
    border-radius: .75rem;
}

.dash-chart-col {
    display: flex;
    align-items: flex-end;
    flex: 1 1 0;
    height: 100%;
}

.dash-chart-bar {
    width: 100%;
    background: linear-gradient(180deg, #5B3DF5, #2B00CE);
    border-radius: 3px 3px 0 0;
}

.dash-chart-axis {
    display: flex;
    justify-content: space-between;
    margin-top: .25rem;
    font-size: .75rem;
    color: var(--dash-muted);
}

.dash-rank {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.dash-rank li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .125rem .75rem;
    font-size: .875rem;
}

.dash-rank-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dash-rank-value {
    font-weight: 700;
}

.dash-rank-bar {
    grid-column: 1 / -1;
    height: .375rem;
    overflow: hidden;
    background: #F0EEF6;
    border-radius: 999px;
}

.dash-rank-bar span {
    display: block;
    height: 100%;
    background: #5B3DF5;
    border-radius: 999px;
}

.dash-detail-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.dash-detail-list li {
    padding: .625rem 0;
    border-bottom: 1px solid #F0EEF6;
}

.dash-detail-line {
    display: flex;
    justify-content: space-between;
    gap: .5rem;
    font-size: .875rem;
}

.dash-detail-sub {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem .75rem;
    font-size: .8125rem;
    color: var(--dash-muted);
}

.dash-detail-empty,
.dash-detail-loading {
    padding: 2rem 0;
    text-align: center;
    color: var(--dash-muted);
}

.dash-detail-link {
    position: sticky;
    bottom: .75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: 2.75rem;
    margin-top: 1rem;
    box-shadow: 0 1.25rem 0 1.25rem #FFFFFF, 0 -.5rem 1rem .25rem rgba(255, 255, 255, .9);
}

@media (max-width: 1279.98px) {
    .dash-stats {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 991.98px) {
    .dash-stats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .dash-grid,
    .dash-grid tbody {
        display: block;
    }

    .dash-grid thead {
        display: block;
    }

    .dash-grid thead tr {
        display: flex;
    }

    .dash-grid thead th {
        display: none;
    }

    .dash-grid thead th.dash-check {
        display: block;
        flex: 1 1 auto;
        width: auto;
        padding: 0 .75rem;
        border-radius: .625rem;
    }

    .dash-select-all span {
        display: inline;
        font-size: .8125rem;
        font-weight: 600;
    }

    .dash-grid tbody tr {
        position: relative;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: .375rem .5rem;
        padding: .75rem 2.75rem;
        border-bottom: 1px solid #F0EEF6;
    }

    .dash-grid tbody tr::before,
    .dash-grid tbody tr::after {
        content: "";
        order: 3;
        flex: 1 0 100%;
    }

    .dash-grid tbody tr::after {
        order: 9;
    }

    .dash-grid tbody tr > * {
        display: block;
        padding: 0;
        white-space: normal;
        border: 0;
    }

    .dash-grid tbody tr > *,
    .dash-grid tbody tr:hover > *,
    .dash-grid tbody tr.is-selected > * {
        background: transparent;
    }

    .dash-grid tbody tr.is-selected {
        background: #F4F1FF;
    }

    .dash-grid tbody .dash-check {
        position: absolute;
        top: .25rem;
        inset-inline-start: 0;
        width: auto;
    }

    .dash-grid tbody .dash-menu {
        position: absolute;
        top: .25rem;
        inset-inline-end: 0;
        width: auto;
        box-shadow: none;
    }

    .dash-hit {
        width: 2.75rem;
        height: 2.75rem;
        margin: 0;
        padding: 0;
    }

    .dash-select-all {
        min-height: 2.75rem;
    }

    .dash-kebab {
        width: 2.75rem;
        height: 2.75rem;
    }

    .dash-pagination .page-link {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 2.75rem;
        min-height: 2.75rem;
    }

    .dash-per-page .form-select,
    .dash-sort-mobile .form-select {
        min-height: 2.75rem;
    }

    .dash-chip,
    .dash-clear {
        display: inline-flex;
        align-items: center;
        min-height: 2.75rem;
    }

    .dash-toolbar .btn-sm,
    .dash .dropdown-item,
    .dash-table .dropdown-item {
        min-height: 2.75rem;
    }

    .dash .dropdown-item {
        display: flex;
        align-items: center;
        gap: .5rem;
    }

    .dash-sort-mobile {
        display: inline-flex;
        align-items: center;
        gap: .5rem;
        font-size: .8125rem;
        color: var(--dash-muted);
    }

    .dash-grid tbody .dash-name {
        order: 1;
        flex: 1 1 auto;
        font-size: .9375rem;
    }

    .dash-grid tbody .dash-c-date {
        order: 2;
        color: var(--dash-muted);
    }

    .dash-grid tbody .dash-c-object {
        order: 4;
        color: var(--dash-muted);
    }

    .dash-grid tbody .dash-c-phone {
        order: 5;
        color: var(--dash-muted);
    }

    .dash-grid tbody .dash-id {
        order: 6;
        flex: 1 0 100%;
        height: 0;
        overflow: hidden;
        font-size: 0;
    }

    .dash-grid tbody .dash-c-state {
        order: 7;
    }

    .dash-grid tbody .dash-c-status {
        order: 8;
    }

    .dash-grid tbody .dash-c-start {
        order: 10;
    }

    .dash-grid tbody .dash-c-end {
        order: 11;
    }

    .dash-grid tbody .dash-c-end,
    .dash-grid tbody .dash-c-duration {
        margin-inline-start: -.25rem;
    }

    .dash-grid tbody .dash-c-end::before {
        content: "– ";
    }

    .dash-grid tbody .dash-c-duration {
        order: 12;
        color: var(--dash-muted);
    }

    .dash-grid tbody .dash-c-duration::before {
        content: "· ";
    }

    .dash-grid tbody tr > .is-empty {
        display: none;
    }

    .dash-grid tbody .dash-empty {
        flex: 1 0 100%;
        text-align: center;
    }
}

@media (max-width: 575.98px) {
    .dash {
        gap: .75rem;
    }

    .dash-period,
    .dash-period > .dropdown,
    .dash-range {
        width: 100%;
    }

    .dash-range {
        justify-content: space-between;
    }

    .dash-periods {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        align-items: stretch;
        width: 100%;
    }

    .dash-periods > .btn,
    .dash-periods > .dropdown {
        min-width: 0;
    }

    .dash-periods > .dropdown > .btn {
        gap: .25rem;
        white-space: nowrap;
    }

    .dash-periods > .btn,
    .dash-periods > .dropdown > .btn {
        justify-content: center;
        padding-inline: .5rem;
    }

    .dash-periods > .dropdown > .btn {
        width: 100%;
        height: 100%;
    }

    .dash-range,
    .dash-periods > .btn,
    .dash-periods > .dropdown > .btn {
        min-height: 2.75rem;
    }

    .dash-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .5rem;
    }

    .dash-stat {
        gap: .5rem;
        padding: .75rem;
    }

    .dash-stat-icon {
        flex-basis: 2rem;
        width: 2rem;
        height: 2rem;
        font-size: 1rem;
        border-radius: .625rem;
    }

    .dash-stat-value {
        font-size: 1.125rem;
    }

    .dash-stat-value.is-long {
        font-size: .9375rem;
    }

    .dash-card {
        padding: .75rem;
    }

    .dash-search {
        flex-basis: 100%;
    }

    .dash-field {
        flex: 1 1 calc(50% - .75rem);
    }

    .dash-filter-actions {
        width: 100%;
    }

    .dash-filter-actions .btn {
        flex: 1 1 0;
        justify-content: center;
        min-width: 0;
        height: auto;
        min-height: 2.75rem;
        white-space: normal;
    }

    .dash-footer,
    .dash-footer-nav {
        justify-content: center;
    }

    .dash-detail {
        --bs-offcanvas-width: 100%;
    }
}

@media (max-width: 359.98px) {
    .dash-stat {
        gap: .375rem;
        padding: .625rem;
    }

    .dash-stat-icon {
        flex-basis: 1.75rem;
        width: 1.75rem;
        height: 1.75rem;
        font-size: .875rem;
    }

    .dash-filter-actions {
        flex-direction: column;
    }

    .dash-periods > .btn,
    .dash-periods > .dropdown > .btn {
        padding-inline: .25rem;
        font-size: .8125rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .dash-stat {
        transition: none;
    }

    .dash-stat:hover {
        transform: none;
    }
}

.pay-subtitle {
    margin: .25rem 0 0;
    font-size: .875rem;
    color: var(--dash-muted);
}

.pay-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
}

.pay-range {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .25rem;
    background: #FFFFFF;
    border: 1px solid var(--dash-line);
    border-radius: .75rem;
}

.pay-range-label {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: 0 .5rem;
    font-size: .875rem;
    font-weight: 600;
    color: var(--dash-ink);
    white-space: nowrap;
}

.pay-arrow {
    display: inline-grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    color: var(--dash-ink);
    border-radius: .5rem;
}

.pay-arrow:hover {
    background: #F4F1FF;
}

.pay-rules-btn {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    height: 2.75rem;
    font-weight: 600;
    border-radius: .75rem;
}

.pay-rules-hint {
    font-size: .8125rem;
    color: var(--dash-muted);
}

.pay-stats {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: .75rem;
}

.pay-stats .dash-stat {
    cursor: default;
}

.pay-stat-note {
    margin-top: .25rem;
    font-size: .75rem;
    color: var(--dash-muted);
}

.pay-card-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: .75rem;
}

.pay-card-title {
    display: flex;
    align-items: center;
    gap: .625rem;
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--dash-ink);
}

.pay-card-icon {
    display: inline-grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    color: var(--dash-brand);
    background: #EFEBFF;
    border-radius: .625rem;
}

.pay-card-tools {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.pay-card-tools .btn-primary:disabled {
    color: #6B6782;
    background: #ECEAF3;
    border-color: #ECEAF3;
    opacity: 1;
}

.pay-card-tools .btn {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    font-weight: 600;
    border-radius: .625rem;
}

.pay-columns-menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: .5rem;
    cursor: pointer;
}

.pay-grid thead th {
    vertical-align: bottom;
}

.pay-grid thead th small {
    white-space: normal;
}

.pay-grid td.dash-name {
    min-width: 12rem;
    white-space: normal;
}

.pay-grid .pay-person > span[dir] {
    min-width: 0;
}

.pay-grid td.pay-org,
.pay-grid td[data-col="group"],
.pay-grid td[data-col="object"] {
    min-width: 6rem;
    max-width: 10rem;
    white-space: normal;
}

.pay-grid thead th small {
    display: block;
    font-size: .6875rem;
    font-weight: 500;
    color: var(--dash-muted);
}

.pay-num {
    text-align: end;
    font-variant-numeric: tabular-nums;
}

.pay-strong {
    font-weight: 700;
}

.pay-positive {
    color: #0E7040;
}

.pay-negative {
    color: #B8233A;
}

.pay-muted {
    color: var(--dash-muted);
}

.pay-warn {
    font-size: .75rem;
    font-weight: 600;
    color: #8F5700;
}

.pay-person {
    position: relative;
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: .5rem;
    row-gap: .125rem;
    min-height: 2rem;
    padding: 0;
    padding-inline-start: 2.625rem;
    font: inherit;
    font-weight: 600;
    color: var(--dash-ink);
    text-align: start;
    background: none;
    border: 0;
}

.pay-person:hover span[dir] {
    color: var(--dash-brand);
    text-decoration: underline;
}

.pay-person:focus-visible {
    outline: 3px solid var(--dash-focus);
    outline-offset: 2px;
    border-radius: .375rem;
}

.pay-person .pay-avatar {
    position: absolute;
    top: 50%;
    inset-inline-start: 0;
    transform: translateY(-50%);
}

.pay-avatar {
    display: inline-grid;
    flex: 0 0 2rem;
    place-items: center;
    width: 2rem;
    height: 2rem;
    font-size: .75rem;
    font-weight: 700;
    color: var(--tone-ink);
    background: var(--tone-tile);
    border-radius: 50%;
}

.pay-unpaid {
    display: block;
    max-width: 5.5rem;
    margin-inline-start: auto;
    font-size: .6875rem;
    font-weight: 600;
    line-height: 1.2;
    color: #B8233A;
    white-space: normal;
    text-wrap: balance;
}

.pay-flag {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    margin-top: .25rem;
    padding: .0625rem .5rem;
    font-size: .6875rem;
    font-weight: 600;
    color: #8F5700;
    text-decoration: none;
    background: #FFF4DB;
    border-radius: 999px;
}

.dash-name .pay-flag {
    display: flex;
    width: fit-content;
    margin-inline-start: 2.625rem;
}

.pay-flag:hover {
    color: #6B4100;
    text-decoration: underline;
}

.pay-tag {
    display: inline-block;
    padding: .0625rem .5rem;
    font-size: .6875rem;
    font-weight: 600;
    color: #4A4660;
    background: #EEEDF3;
    border-radius: 999px;
}

.pay-tag.is-unpaid {
    color: #B8233A;
    background: #FDECEF;
}

.pay-grid td[data-col="status"] .pay-tag {
    display: table;
    margin-top: .25rem;
    white-space: normal;
    border-radius: .5rem;
}

.pay-status {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    padding: .25rem .625rem;
    font-size: .75rem;
    font-weight: 600;
    white-space: nowrap;
    border-radius: .5rem;
}

.pay-status.is-paid { color: #0E7040; background: #E6F7EE; }
.pay-status.is-partial { color: #8F5700; background: #FFF4DB; }
.pay-status.is-pending { color: #B2470A; background: #FFEEDF; }
.pay-status.is-idle { color: #4A4660; background: #EEEDF3; }

.pay-hide-group [data-col="group"],
.pay-hide-object [data-col="object"],
.pay-hide-rate [data-col="rate"],
.pay-hide-norm [data-col="norm"],
.pay-hide-worked [data-col="worked"],
.pay-hide-overtime [data-col="overtime"],
.pay-hide-extras [data-col="extras"],
.pay-hide-adjust [data-col="adjust"],
.pay-hide-due [data-col="due"],
.pay-hide-paid [data-col="paid"],
.pay-hide-status [data-col="status"] {
    display: none;
}

.pay-bottom {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 1rem;
}

.pay-summary {
    margin: .5rem 0 0;
    font-size: .8125rem;
}

.pay-summary thead th {
    padding: .5rem .375rem;
    font-size: .6875rem;
    font-weight: 700;
    color: #3E3A55;
    white-space: nowrap;
    background: #F5F4FA;
    border-bottom: 0;
}

.pay-summary td,
.pay-summary tfoot th {
    padding: .5rem .375rem;
    white-space: nowrap;
    vertical-align: middle;
    border-color: #F0EEF6;
}

.pay-summary tfoot th,
.pay-summary tfoot td {
    font-weight: 700;
    color: var(--dash-brand);
    background: #F7F5FF;
    border-bottom: 0;
}

.pay-bar {
    display: block;
    width: 100%;
    min-width: 5rem;
    height: .5rem;
    overflow: hidden;
    background: #ECEAF3;
    border-radius: 999px;
}

.pay-bar > span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #5B3DF5, #2B00CE);
    border-radius: inherit;
}

.pay-bar.is-full > span {
    background: linear-gradient(90deg, #12A59A, #16894F);
}

.pay-lines {
    display: grid;
    gap: .625rem;
    margin: 1rem 0;
}

.pay-lines > div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    font-size: .875rem;
}

.pay-lines dt {
    font-weight: 400;
    color: var(--dash-muted);
}

.pay-lines dd {
    margin: 0;
    font-weight: 600;
    color: var(--dash-ink);
    white-space: nowrap;
}

.pay-lines.is-compact {
    gap: .375rem;
    margin: .75rem 0;
}

.pay-grand {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .875rem 1rem;
    color: var(--dash-brand);
    background: #F1EEFF;
    border-radius: .75rem;
}

.pay-grand span {
    font-weight: 700;
}

.pay-grand strong {
    font-size: 1.375rem;
    white-space: nowrap;
}

.pay-detail .offcanvas-body > .pay-note {
    margin-bottom: 1rem;
}

.pay-detail .pay-status {
    align-self: center;
}

.pay-inline-form {
    display: inline;
    margin-inline-start: auto;
}

.pay-link-danger {
    padding: 0;
    font-size: .75rem;
    color: #B8233A;
}

.pay-cancelled .dash-detail-line strong {
    color: var(--dash-muted);
}

.pay-adjust-form {
    margin-top: .75rem;
    padding: .75rem;
    background: #F8F7FC;
    border-radius: .75rem;
}

.pay-note {
    display: flex;
    gap: .5rem;
    margin: .75rem 0 0;
    padding: .75rem;
    font-size: .8125rem;
    color: #33406B;
    background: #EEF2FF;
    border-radius: .75rem;
}

.pay-note.is-plain {
    color: var(--dash-muted);
    background: transparent;
    padding: .25rem .75rem;
}

.pay-note.is-warn {
    color: #8F5700;
    background: #FFF4DB;
}

.pay-rules .modal-dialog {
    max-width: 1240px;
}

.pay-rules .modal-content {
    border: 0;
    border-radius: 1.25rem;
}

.pay-rules-head {
    gap: .875rem;
    align-items: flex-start;
}

.pay-rules-head .btn-close {
    margin-inline-start: auto;
}

.pay-rules-icon {
    display: inline-grid;
    flex: 0 0 3rem;
    place-items: center;
    width: 3rem;
    height: 3rem;
    font-size: 1.375rem;
    color: var(--dash-brand);
    background: #EFEBFF;
    border-radius: .875rem;
}

.pay-rules-head .modal-title {
    font-size: 1.375rem;
    font-weight: 700;
}

.pay-rules-subtitle {
    margin: .125rem 0 0;
    font-size: .875rem;
    color: var(--dash-muted);
}

.pay-rules-body {
    display: grid;
    grid-template-columns: 13rem minmax(0, 1fr) 22rem;
    align-items: start;
    gap: 1rem;
    background: #FBFAFE;
}

.pay-rules-nav {
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

.pay-rules-nav button {
    display: flex;
    align-items: center;
    gap: .625rem;
    min-height: 2.75rem;
    padding: .5rem .75rem;
    font-size: .875rem;
    color: var(--dash-ink);
    text-align: start;
    background: none;
    border: 0;
    border-radius: .625rem;
}

.pay-rules-nav button:hover {
    background: #F4F1FF;
}

.pay-rules-nav button.is-active {
    font-weight: 600;
    color: var(--dash-brand);
    background: #EFEBFF;
}

.pay-rules-nav button:focus-visible {
    outline: 3px solid var(--dash-focus);
    outline-offset: 2px;
}

.pay-rules-main,
.pay-rules-side {
    display: grid;
    gap: 1rem;
}

.pay-rules-section {
    padding: 1rem;
    background: #FFFFFF;
    border: 1px solid var(--dash-line);
    border-radius: 1rem;
    scroll-margin-top: 1rem;
}

.pay-rules-section h3,
.pay-example h3,
.pay-history-head h3 {
    margin: 0 0 .75rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--dash-ink);
}

.pay-rules-lead {
    margin: -.5rem 0 .75rem;
    font-size: .8125rem;
    color: var(--dash-muted);
}

.pay-rules-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 1fr);
    gap: .75rem;
}

.pay-rules-grid.is-two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.pay-rules-section small,
.pay-extra > small,
.pay-example small {
    display: block;
    margin-top: .25rem;
    font-size: .75rem;
    color: var(--dash-muted);
}

.pay-rules-section .form-label {
    font-size: .8125rem;
    color: #3E3A55;
}

.pay-rules-output {
    display: flex;
    align-items: center;
    min-height: 2.375rem;
    padding: .375rem .75rem;
    font-weight: 600;
    color: var(--dash-ink);
    background: #F5F4FA;
    border-radius: .5rem;
}

.pay-segment {
    display: grid;
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
    gap: .25rem;
    margin-bottom: .75rem;
    padding: .25rem;
    background: #F5F4FA;
    border-radius: .75rem;
}

.pay-segment label {
    position: relative;
    margin: 0;
}

.pay-segment input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.pay-segment span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 2.5rem;
    padding: .375rem .5rem;
    font-size: .875rem;
    color: var(--dash-ink);
    border: 1px solid transparent;
    border-radius: .5rem;
    cursor: pointer;
}

.pay-segment input:checked + span {
    font-weight: 600;
    color: var(--dash-brand);
    background: #EFEBFF;
    border-color: #7A62F5;
}

.pay-segment input:focus-visible + span {
    outline: 3px solid var(--dash-focus);
    outline-offset: 2px;
}

.pay-segment.is-small span {
    min-height: 2.25rem;
}

.pay-extra {
    padding: .75rem 0;
    border-bottom: 1px solid #F0EEF6;
}

.pay-extra:last-child {
    border-bottom: 0;
}

.pay-extra .form-switch {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-height: 2rem;
    margin: 0;
    padding-inline-start: 0;
}

.pay-extra .form-switch .form-check-input {
    width: 2.5rem;
    height: 1.375rem;
    margin: 0;
}

.pay-extra .form-check-input:checked {
    background-color: var(--dash-brand);
    border-color: var(--dash-brand);
}

.pay-extra .form-check-label {
    font-weight: 600;
    color: var(--dash-ink);
}

.pay-extra-fields {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin-top: .5rem;
}

.pay-extra-fields.is-disabled,
[data-rule-group].is-disabled {
    opacity: .5;
}

[data-confirm-text].is-armed {
    color: #FFFFFF;
    background: #B8233A;
    border-color: #B8233A;
}

[data-confirm-text].is-armed:hover,
[data-confirm-text].is-armed:focus-visible {
    color: #FFFFFF;
    background: #9C1C30;
}

.pay-inline {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    margin: 0;
    font-size: .8125rem;
    color: var(--dash-muted);
}

.pay-inline .form-control {
    width: auto;
}

.pay-coef {
    max-width: 5.5rem;
}

.pay-holidays {
    margin-top: .75rem;
    padding: .75rem;
    background: #F8F7FC;
    border-radius: .75rem;
}

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

.pay-holidays-tools {
    display: grid;
    gap: .5rem;
    margin-bottom: .75rem;
}

.pay-holidays-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(13.5rem, 1fr));
    gap: .375rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pay-holidays-list li {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .25rem .25rem .25rem .625rem;
    font-size: .8125rem;
    background: #FFFFFF;
    border: 1px solid var(--dash-line);
    border-radius: .5rem;
}

.pay-holidays-list li > .dash-muted {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pay-holiday-remove {
    flex: none;
    margin-inline-start: auto;
    padding: .125rem .375rem;
    color: var(--dash-muted);
}

.pay-holiday-remove:hover {
    color: #B8233A;
}

.pay-example {
    padding: 1rem;
    background: #F7F5FF;
    border: 1px solid #ECE7FF;
    border-radius: 1rem;
}

.pay-example h3 {
    color: var(--dash-brand);
}

.pay-example dl {
    display: grid;
    gap: .5rem;
    margin: 0 0 .75rem;
}

.pay-example dl > div {
    display: flex;
    justify-content: space-between;
    gap: .75rem;
    font-size: .8125rem;
}

.pay-example dt {
    font-weight: 400;
    color: #3E3A55;
}

.pay-example dt span {
    margin-inline-start: .375rem;
    color: var(--dash-muted);
}

.pay-example dd {
    margin: 0;
    font-weight: 600;
    white-space: nowrap;
}

.pay-example .is-sub {
    padding-inline-start: .75rem;
}

.pay-example .is-gap {
    padding-top: .5rem;
    border-top: 1px solid #E6E1F7;
}

.pay-scope {
    display: flex;
    align-items: flex-start;
    gap: .625rem;
    margin: .5rem 0;
    cursor: pointer;
}

.pay-scope .form-check-input {
    flex: 0 0 auto;
    margin-top: .25rem;
}

.pay-scope .form-check-input:checked {
    background-color: var(--dash-brand);
    border-color: var(--dash-brand);
}

.pay-scope strong {
    display: block;
    font-size: .875rem;
    color: var(--dash-ink);
}

.pay-scope small {
    margin-top: 0;
}

.pay-rules-section > .form-select {
    margin: 0 0 .5rem;
    margin-inline-start: 1.75rem;
    width: calc(100% - 1.75rem);
}

.pay-rules-history {
    grid-column: 2 / -1;
}

.pay-history-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: .75rem;
}

.pay-history {
    display: grid;
    gap: .5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pay-history li {
    padding: .75rem;
    background: #FFFFFF;
    border: 1px solid var(--dash-line);
    border-radius: .75rem;
}

.pay-history-line {
    display: flex;
    align-items: center;
    gap: .75rem;
}

.pay-history-scope {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    font-size: .8125rem;
    color: #3E3A55;
}

.pay-history-delete {
    margin-inline-start: auto;
}

.pay-history-facts {
    display: flex;
    flex-wrap: wrap;
    gap: .375rem;
    margin: .5rem 0 .25rem;
}

.pay-history-facts span {
    padding: .125rem .5rem;
    font-size: .75rem;
    background: #F5F4FA;
    border-radius: 999px;
}

.pay-overview-block {
    margin-bottom: 1rem;
    padding: .75rem;
    background: #FFFFFF;
    border: 1px solid var(--dash-line);
    border-radius: .75rem;
}

.pay-overview-block.is-warn {
    background: #FFF9EC;
    border-color: #F3DFAE;
}

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

.pay-overview-head h4 {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0;
    font-size: .9375rem;
    font-weight: 700;
    color: var(--dash-ink);
}

.pay-overview-item {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: .625rem 0;
    border-top: 1px solid #F0EEF6;
}

.pay-overview-head + .pay-overview-item {
    border-top: 0;
}

.pay-overview-main {
    flex: 1 1 auto;
    min-width: 0;
    font-size: .875rem;
}

.pay-overview-item > .btn {
    flex: none;
}

.pay-overview-members {
    margin-inline-start: .5rem;
    font-size: .8125rem;
}

.pay-rules-target {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .25rem .5rem;
    width: 100%;
    padding: .625rem .875rem;
    font-size: .875rem;
    color: var(--dash-ink);
    text-align: start;
    background: #F5F4FA;
    border: 1px solid var(--dash-line);
    border-radius: .75rem;
}

.pay-rules-target strong {
    font-weight: 700;
}

.pay-rules-target-link {
    margin-inline-start: auto;
    font-weight: 600;
    color: var(--dash-brand);
}

.pay-source {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .375rem .5rem;
    margin: .75rem 0 0;
    padding: .625rem .75rem;
    font-size: .8125rem;
    color: #3E3A55;
    background: #F5F4FA;
    border-radius: .75rem;
}

.pay-source > span {
    flex: 1 1 12rem;
}

.pay-source-link {
    margin-inline-start: auto;
    font-weight: 600;
    text-decoration: none;
}

.pay-rate-change {
    white-space: nowrap;
    text-decoration: underline dotted;
    text-underline-offset: .2em;
    cursor: help;
}

.pay-rate-mark {
    font-size: .75rem;
    color: var(--dash-brand);
}

.pay-rate-mark.is-warn {
    color: #8F5700;
}

.pay-history-comment {
    margin: .25rem 0;
    font-size: .8125rem;
}

@media (max-width: 1599.98px) {
    .pay-bottom {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 1279.98px) {
    .pay-stats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .pay-rules-body {
        grid-template-columns: minmax(0, 1fr) 20rem;
        grid-auto-rows: max-content;
    }

    .pay-rules-nav {
        position: static;
        flex-direction: row;
        grid-column: 1 / -1;
        overflow-x: auto;
    }

    .pay-rules-nav button {
        flex: 0 0 auto;
    }

    .pay-rules-history {
        grid-column: 1 / -1;
    }
}

@media (max-width: 991.98px) {
    .pay-rules-body {
        grid-template-columns: minmax(0, 1fr);
    }

    .pay-rules-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 767.98px) {
    .pay-controls,
    .pay-range,
    .pay-rules-btn {
        width: 100%;
    }

    .pay-range {
        justify-content: space-between;
    }

    .pay-rules-btn {
        justify-content: center;
    }

    .pay-modes {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        width: 100%;
    }

    .pay-modes > .btn,
    .pay-modes > .dropdown > .btn {
        width: 100%;
        min-height: 2.75rem;
        justify-content: center;
    }

    .pay-card-tools,
    .pay-card-tools > .dropdown,
    .pay-card-tools .btn {
        width: 100%;
    }

    .pay-card-tools .btn {
        justify-content: center;
        min-height: 2.75rem;
    }

    .pay-grid tbody .dash-name {
        order: 1;
        flex: 1 1 auto;
    }

    .pay-grid tbody [data-col="due"] {
        order: 2;
        font-size: .9375rem;
    }

    .pay-grid tbody [data-col="group"],
    .pay-grid tbody [data-col="object"] {
        order: 4;
        color: var(--dash-muted);
    }

    .pay-grid tbody [data-col="rate"],
    .pay-grid tbody [data-col="norm"],
    .pay-grid tbody [data-col="worked"],
    .pay-grid tbody [data-col="overtime"],
    .pay-grid tbody [data-col="extras"],
    .pay-grid tbody [data-col="adjust"],
    .pay-grid tbody [data-col="paid"] {
        order: 7;
        font-size: .8125rem;
        text-align: start;
    }

    .pay-grid tbody [data-label]::before {
        content: attr(data-label) ": ";
        color: var(--dash-muted);
    }

    .pay-grid tbody [data-col="status"] {
        order: 10;
    }

    .pay-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .5rem;
    }

    .pay-stats > :last-child {
        grid-column: 1 / -1;
    }

    .pay-rules-grid.is-two {
        grid-template-columns: minmax(0, 1fr);
    }

    .pay-rules .modal-dialog {
        margin: 0;
        max-width: none;
        min-height: 100%;
    }

    .pay-rules .modal-content {
        min-height: 100vh;
        border-radius: 0;
    }

    .pay-arrow,
    .pay-holiday-remove,
    .pay-history-delete,
    .pay-holidays-head .btn {
        min-width: 2.75rem;
        min-height: 2.75rem;
    }

    [data-holidays-toggle],
    .pay-holidays-tools .btn,
    .pay-holidays-tools .form-control,
    .pay-holidays-tools .form-select,
    .pay-holidays-tools .input-group-text {
        min-height: 2.75rem;
    }

    .pay-link-danger {
        min-height: 2.75rem;
        padding: 0 .5rem;
    }

    .pay-source-link,
    .pay-overview-members {
        display: inline-flex;
        align-items: center;
        min-height: 2.75rem;
    }

    .pay-overview-item {
        flex-wrap: wrap;
    }
}

.list-filter-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
}

.list-search {
    position: relative;
    flex: 2 1 260px;
    max-width: 32rem;
}

.list-search .bi {
    position: absolute;
    top: 50%;
    inset-inline-start: .875rem;
    transform: translateY(-50%);
    color: #8A86A0;
    pointer-events: none;
}

.list-search .form-control {
    height: 2.75rem;
    padding-inline: 2.375rem;
    font-size: .875rem;
    border-radius: .75rem;
}

.list-filter-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
}

.list-filter-actions .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .375rem;
    min-height: 2.75rem;
    border-radius: .75rem;
}

.list-btn-outline {
    color: var(--dash-brand);
    background: #FFFFFF;
    border: 1px solid var(--dash-brand);
}

.list-btn-outline:hover,
.list-btn-outline:focus-visible,
.list-btn-outline.show {
    color: var(--dash-brand);
    background: #F7F5FF;
    border-color: var(--dash-brand);
}

.list-count {
    display: inline-grid;
    place-items: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 .3rem;
    font-size: .75rem;
    color: #FFFFFF;
    background: var(--dash-brand);
    border-radius: 999px;
}

.list-filter-panel {
    width: min(22rem, calc(100vw - 2rem));
    padding: 1rem;
}

.list-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem 1rem;
    margin-top: .75rem;
    font-size: .8125rem;
}

.list-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
}

.list-chips-label,
.list-total {
    color: var(--dash-muted);
}

.list-total {
    margin-inline-start: auto;
}

.list-chip {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    max-width: 100%;
    overflow-wrap: anywhere;
    padding: .25rem .625rem;
    color: var(--dash-brand);
    text-decoration: none;
    background: #EFEBFF;
    border-radius: 999px;
}

.list-chip:hover {
    color: var(--dash-brand);
    background: #E2DBFF;
}

.list-chip:focus-visible,
.list-btn-outline:focus-visible {
    outline: 3px solid var(--dash-focus);
    outline-offset: 2px;
    box-shadow: none;
}

@media (max-width: 575.98px) {
    .list-search {
        flex-basis: 100%;
        max-width: none;
    }

    .list-filter-actions {
        width: 100%;
    }

    .list-filter-actions > .btn,
    .list-filter-menu {
        flex: 1 1 auto;
    }

    .list-filter-menu > .btn {
        width: 100%;
    }

    .list-chip {
        min-height: 2.75rem;
    }

    .list-total {
        margin-inline-start: 0;
    }
}