#module-tiempos {
    height: calc(100vh - 120px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    gap: .75rem;
    font-family: var(--vx-font, 'Inter', system-ui, sans-serif);
}

@media (max-width: 640px) {
    #module-tiempos {
        overflow-y: auto;
        overflow-x: hidden;
    }

    #module-tiempos .vx-attendance-filters {
        flex-shrink: 0;
    }

    #module-tiempos #gridContainer {
        flex-shrink: 0;
        min-height: 60vh;
    }

    #gridContainer .dx-toolbar {
        height: auto !important;
    }

    #gridContainer .dx-toolbar-items-container {
        position: static !important;
        display: block !important;
        height: auto !important;
    }

    #gridContainer .dx-toolbar-before,
    #gridContainer .dx-toolbar-after,
    #gridContainer .dx-toolbar-center {
        position: static !important;
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        max-width: 100% !important;
        float: none !important;
        margin: 0 !important;
        gap: .5rem;
    }

    #gridContainer .dx-toolbar .dx-toolbar-item {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #gridContainer .dx-toolbar .dx-toolbar-item .dx-button,
    #gridContainer .dx-toolbar .dx-toolbar-item .dx-dropdownbutton {
        width: 100% !important;
    }
}

.module-container {
    max-width: 100%;
}

.dx-inkripple {
    display: none !important;
}

#gridContainer .dx-toolbar .dx-button,
#attendanceLockActions .dx-button {
    border-radius: var(--vx-radius, .75rem) !important;
    font-family: var(--vx-font, 'Inter', system-ui, sans-serif);
}

#gridContainer .dx-toolbar .dx-button.vx-btn,
#attendanceLockActions .dx-button.vx-btn {
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    transition: background-color .2s ease, color .2s ease, transform .1s ease;
}

    #gridContainer .dx-toolbar .dx-button.vx-btn:active,
    #attendanceLockActions .dx-button.vx-btn:active {
        transform: scale(.96);
    }

#gridContainer .dx-toolbar .dx-button.vx-btn .dx-button-content,
#attendanceLockActions .dx-button.vx-btn .dx-button-content {
    padding: .5rem 1rem !important;
    background: none !important;
    font-size: .875rem;
    font-weight: 500;
    gap: .375rem;
}

#gridContainer .dx-toolbar .dx-button.vx-btn .dx-button-text,
#gridContainer .dx-toolbar .dx-dropdownbutton.vx-btn .dx-button-text,
#attendanceLockActions .dx-button.vx-btn .dx-button-text {
    text-transform: none !important;
    letter-spacing: normal !important;
}

#gridContainer .dx-toolbar .dx-button.vx-btn .vx-btn-icon,
#gridContainer .dx-toolbar .dx-dropdownbutton.vx-btn .vx-btn-icon,
#attendanceLockActions .dx-button.vx-btn .vx-btn-icon {
    flex-shrink: 0;
}

#gridContainer .dx-toolbar .dx-button.vx-btn--primary,
#attendanceLockActions .dx-button.vx-btn--primary {
    background-color: var(--vx-orange, #fc6821) !important;
    color: #fff !important;
    box-shadow: var(--vx-glow-orange, 0 4px 24px 0 rgba(252,104,33,.25)) !important;
}

    #gridContainer .dx-toolbar .dx-button.vx-btn--primary:not(.dx-state-disabled):hover,
    #attendanceLockActions .dx-button.vx-btn--primary:not(.dx-state-disabled):hover {
        background-color: var(--vx-orange-dark, #d9531a) !important;
    }

#gridContainer .dx-toolbar .dx-button.vx-btn--secondary,
#attendanceLockActions .dx-button.vx-btn--secondary {
    background: rgba(255, 255, 255, .7) !important;
    border: 1px solid rgba(0, 0, 0, .08) !important;
    color: var(--vx-purple, #552863) !important;
}

    #gridContainer .dx-toolbar .dx-button.vx-btn--secondary:not(.dx-state-disabled):hover,
    #attendanceLockActions .dx-button.vx-btn--secondary:not(.dx-state-disabled):hover {
        background: rgba(255, 255, 255, .95) !important;
    }

#gridContainer .dx-toolbar .dx-button.dx-state-disabled,
#attendanceLockActions .dx-button.dx-state-disabled {
    background: rgba(0, 0, 0, .04) !important;
    border-color: transparent !important;
    color: #d1d5db !important;
    box-shadow: none !important;
}

#gridContainer .dx-toolbar .dx-dropdownbutton.vx-btn {
    border-radius: var(--vx-radius, .75rem) !important;
    font-family: var(--vx-font, 'Inter', system-ui, sans-serif);
    transition: background-color .2s ease, color .2s ease;
}

#gridContainer .dx-toolbar .dx-dropdownbutton.vx-btn .dx-button {
    border: none !important;
    box-shadow: none !important;
    background: none !important;
}

#gridContainer .dx-toolbar .dx-dropdownbutton.vx-btn .dx-button-content {
    padding: .5rem 1rem !important;
    font-size: .875rem;
    font-weight: 500;
    gap: .375rem;
}

#gridContainer .dx-toolbar .dx-dropdownbutton.vx-btn--secondary {
    background: rgba(255, 255, 255, .7) !important;
    border: 1px solid rgba(0, 0, 0, .08) !important;
    color: var(--vx-purple, #552863) !important;
}

    #gridContainer .dx-toolbar .dx-dropdownbutton.vx-btn--secondary:not(.dx-state-disabled):hover {
        background: rgba(255, 255, 255, .95) !important;
    }

#gridContainer .dx-toolbar .dx-dropdownbutton.dx-state-disabled {
    background: rgba(0, 0, 0, .04) !important;
    border-color: transparent !important;
    color: #d1d5db !important;
}

.dx-list-item-content {
    display: flex;
    align-items: center;
    gap: .625rem;
}

.ctx-menu-item-icon {
    flex-shrink: 0;
}

.ctx-menu-item-icon--extra { color: #10b981; }
.ctx-menu-item-icon--late { color: #f59e0b; }
.ctx-menu-item-icon--danger { color: #ef4444; }
.ctx-menu-item-icon--neutral { color: #6b7280; }

.ctx-menu-item-text--extra { color: #047857; }
.ctx-menu-item-text--late { color: #b45309; }
.ctx-menu-item-text--danger { color: #b91c1c; }
.ctx-menu-item-text--neutral { color: var(--vx-text, #374151); }

.dx-list-item.dx-state-disabled .ctx-menu-item-icon,
.dx-list-item.dx-state-disabled .ctx-menu-item-text,
.dx-context-menu .dx-state-disabled .ctx-menu-item-icon,
.dx-context-menu .dx-state-disabled .ctx-menu-item-text {
    color: #d1d5db !important;
}

#attendanceLockActions .dx-button.vx-btn--unlock-all,
#attendanceLockActions .dx-button.vx-btn--lock-all {
    border: .8px solid !important;
}

#attendanceLockActions .dx-button.vx-btn--unlock-all .dx-button-content,
#attendanceLockActions .dx-button.vx-btn--lock-all .dx-button-content {
    padding: .5rem .75rem !important;
    gap: .375rem;
}

#attendanceLockActions .dx-button.vx-btn--unlock-all .vx-btn-icon,
#attendanceLockActions .dx-button.vx-btn--lock-all .vx-btn-icon {
    flex-shrink: 0;
}

#attendanceLockActions .dx-button.vx-btn--unlock-all .dx-button-text,
#attendanceLockActions .dx-button.vx-btn--lock-all .dx-button-text {
    font-size: .75rem !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}

#attendanceLockActions .dx-button.vx-btn--unlock-all {
    background: #f0fdfa !important;
    border-color: #99f6e4 !important;
    color: #0f766e !important;
}

    #attendanceLockActions .dx-button.vx-btn--unlock-all:not(.dx-state-disabled):hover {
        background: #ccfbf1 !important;
    }

#attendanceLockActions .dx-button.vx-btn--lock-all {
    background: #fff !important;
    border-color: #e5e7eb !important;
    color: #6b7280 !important;
}

    #attendanceLockActions .dx-button.vx-btn--lock-all:not(.dx-state-disabled):hover {
        border-color: #fed7aa !important;
        color: #6b7280 !important;
    }

#gridContainer {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    background: #fff;
    border: 1px solid #f3f4f6;
    border-radius: var(--vx-radius-lg, 1rem);
    overflow: hidden;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);
}

#gridContainer .dx-scrollable-scrollbar.dx-scrollbar-horizontal {
    height: .5rem !important;
}

#gridContainer .dx-scrollable-scrollbar.dx-scrollbar-horizontal .dx-scrollable-scroll {
    height: .5rem !important;
}

#gridContainer .dx-scrollable-scrollbar.dx-scrollbar-horizontal .dx-scrollable-scroll-content {
    height: .5rem !important;
    background-color: rgba(85, 40, 99, .35) !important;
    border-radius: 9999px;
}

#gridContainer .dx-scrollable-scrollbar.dx-scrollbar-horizontal:hover .dx-scrollable-scroll-content,
#gridContainer .dx-scrollable-scrollbar.dx-scrollbar-horizontal.dx-state-active .dx-scrollable-scroll-content {
    background-color: rgba(85, 40, 99, .55) !important;
}

#gridContainer .dx-datagrid,
#gridContainer .dx-datagrid-headers,
#gridContainer .dx-datagrid-rowsview {
    font-family: var(--vx-font, 'Inter', system-ui, sans-serif);
    background: transparent;
}

#gridContainer .dx-datagrid-borders > .dx-datagrid-headers,
#gridContainer .dx-datagrid-headers {
    border-top: none !important;
    border-bottom: 1px solid #f3f4f6 !important;
    border-left: none !important;
    border-right: none !important;
}

#gridContainer .dx-datagrid-headers::before,
#gridContainer .dx-datagrid-headers::after {
    border-bottom-color: #f3f4f6 !important;
    border-top-color: transparent !important;
    border-left-color: transparent !important;
    border-right-color: transparent !important;
}

#gridContainer .dx-datagrid-headers {
    background: #f9fafb;
}

#gridContainer .dx-datagrid-headers .dx-header-row > td {
    padding: .5rem .25rem;
    text-align: center;
    border-right: none !important;
    border-bottom: none !important;
}

#gridContainer .dx-datagrid-table.dx-datagrid-table-fixed {
    border-bottom: none !important;
}

#gridContainer .dx-datagrid-rowsview {
    border: none !important;
}

#gridContainer .dx-datagrid-rowsview .dx-row.dx-data-row > td {
    border-bottom: 1px solid #f9fafb !important;
    border-right: none !important;
}

#gridContainer .dx-datagrid-rowsview .dx-row.dx-freespace-row > td {
    border-bottom: none !important;
    border-right: none !important;
}

#gridContainer .dx-datagrid-headers .dx-header-row > td.dx-datagrid-first-header,
#gridContainer .dx-datagrid-rowsview .dx-row > td.dx-datagrid-first-header {
    border-right: 1px solid #f3f4f6 !important;
}

#gridContainer .dx-datagrid-headers .dx-header-row > td.dx-datagrid-first-header {
    background: #f9fafb !important;
}

#gridContainer .dx-datagrid-headers .dx-header-row > td.dx-datagrid-first-header .dx-datagrid-text-content {
    font-family: var(--vx-font, 'Inter', system-ui, sans-serif);
    font-size: .75rem;
    font-weight: 600;
    color: #374151;
    text-transform: none;
    text-align: center;
    width: 100%;
}

#gridContainer .dx-datagrid-headers .dx-header-row .dx-datagrid-text-content {
    white-space: normal;
}

.dx-header-dayname {
    margin: 0;
    font-size: .5625rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #9ca3af;
    font-family: var(--vx-font, 'Inter', system-ui, sans-serif);
}

.dx-header-daynum {
    margin: .125rem 0 0;
    font-size: .75rem;
    font-weight: 600;
    color: #374151;
    font-family: var(--vx-font, 'Inter', system-ui, sans-serif);
}

td.dx-header-weekend .dx-header-dayname,
td.dx-header-weekend .dx-header-daynum {
    color: #d1d5db;
}

td.dx-header-weekend {
    background-color: #f9fafb;
}

td.dx-header-today .dx-header-dayname,
td.dx-header-today .dx-header-daynum {
    color: var(--vx-purple, #552863) !important;
}

#gridContainer .dx-datagrid-toolbar,
#gridContainer .dx-toolbar {
    background: #fff;
    border-bottom: 1px solid #f3f4f6;
    padding: .5rem .75rem;
}

#gridContainer .dx-toolbar .dx-button-content {
    font-size: .75rem;
    font-weight: 500;
}

#gridContainer .dx-datagrid-rowsview .dx-row:not(.dx-header-row):hover > td:not(.dx-datagrid-first-header) {
    background-color: rgba(252, 104, 33, .04);
}

#gridContainer .dx-datagrid-rowsview .dx-row:not(.dx-header-row):hover > td.dx-datagrid-first-header {
    background-color: #fffaf7;
}

.employee-cell {
    display: flex;
    align-items: center;
    gap: .625rem;
    cursor: pointer;
    text-align: left;
    padding-left: .25rem;
    font-family: var(--vx-font, 'Inter', system-ui, sans-serif);
}

.employee-cell .employee-avatar {
    font-size: .625rem;
}

.employee-cell-text {
    min-width: 0;
}

.employee-cell-name {
    font-size: .75rem;
    font-weight: 600;
    color: #1f2937;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.employee-cell-id {
    font-size: .625rem;
    color: var(--vx-text-soft, #9ca3af);
    margin-top: .125rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.employee-shift-badges {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: .25rem;
    margin-top: .25rem;
    min-width: 0;
    overflow: hidden;
}

.employee-shift-badge {
    display: inline-block;
    flex-shrink: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: .0625rem .375rem;
    border-radius: .375rem;
    background: rgba(85, 40, 99, .1);
    color: var(--vx-purple, #552863);
    font-size: .5625rem;
    font-weight: 500;
    font-family: var(--vx-font, 'Inter', system-ui, sans-serif);
}

.employee-shift-badge--more {
    flex-shrink: 0;
    background: rgba(85, 40, 99, .18);
    font-weight: 600;
    cursor: default;
}

.attendance-cell {
    position: relative;
    padding: 0 !important;
    line-height: 1.2;
    min-height: 128px;
    cursor: pointer;
    text-align: center;
    user-select: none;
    /* Prevent text selection during drag */
    transition: background-color .15s ease;
    font-family: var(--vx-font, 'Inter', system-ui, sans-serif);
}

.attendance-cell-spacer {
    min-height: 128px;
    visibility: hidden;
    pointer-events: none;
}

.attendance-cell-flow {
    position: absolute;
    inset: .25rem;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    padding: .5rem .5rem;
    gap: .375rem;
    border-radius: var(--vx-radius, .75rem);
    border: .8px solid rgba(0, 0, 0, .08);
    transition: background-color .15s ease, border-color .15s ease;
}

.attendance-badge-row {
    display: flex;
    justify-content: space-between;
    gap: .25rem;
    flex-shrink: 0;
    min-height: 17px;
}

.attendance-badge-row--top {
    align-items: flex-start;
}

.attendance-badge-row--bottom {
    align-items: flex-end;
}

.attendance-badge-group {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .3125rem;
    min-width: 0;
}

.attendance-badge-row--top .attendance-badge-group {
    align-items: flex-start;
}

.attendance-badge-row--bottom .attendance-badge-group {
    align-items: flex-end;
}

.attendance-badge-group--end {
    justify-content: flex-end;
    margin-left: auto;
}

.attendance-cell-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1 1 auto;
    min-height: 0;
    gap: .1875rem;
}

    .attendance-cell:not(.locked):not(.readonly-cell):hover .attendance-cell-flow {
        background-color: rgba(85, 40, 99, .05);
        border-color: rgba(85, 40, 99, .1);
    }

    .attendance-cell.locked {
        color: #9ca3af;
        opacity: .85;
    }

        .attendance-cell.locked .attendance-cell-flow {
            background-color: #f9fafb;
        }

    .attendance-cell.readonly-cell {
        cursor: not-allowed;
        opacity: .85;
    }

        .attendance-cell.readonly-cell .attendance-cell-flow {
            background-color: #f9fafb;
        }

        .attendance-cell.readonly-cell:hover .attendance-cell-flow {
            background-color: #f3f4f6;
        }

    .attendance-cell.cell-selected .attendance-cell-flow {
        box-shadow: inset 0 0 0 2px var(--vx-orange, #fc6821);
        background-color: rgba(252, 104, 33, .06);
        border-color: transparent;
    }

.attendance-time-row {
    display: flex;
    align-items: center;
    gap: .125rem;
}

.attendance-cell .time-in,
.attendance-cell .time-out {
    font-size: .75rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    color: #1f2937;
}

.attendance-cell .time-in--late {
    color: #d97706;
}

.attendance-cell .time-in--incapacity {
    color: #f43f5e;
}

.attendance-time-dash {
    font-size: .5625rem;
    color: #d1d5db;
}

.attendance-time-empty {
    font-size: .625rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    color: #d1d5db;
}

.attendance-cell .total-time {
    font-size: .625rem;
    color: #9ca3af;
}

.attendance-shift-name {
    font-size: .5625rem;
    font-weight: 500;
    color: var(--vx-text-soft, #6b7280);
    font-family: var(--vx-font, 'Inter', system-ui, sans-serif);
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex-shrink: 0;
}

.attendance-cell.attendance-cell--holiday {
    background-color: rgba(245, 158, 11, .06);
}

.attendance-cell.attendance-cell--rest {
    background-color: #f9fafb;
}

.attendance-cell.attendance-cell--swap-rest {
    background-color: rgba(139, 92, 246, .06);
}

.holiday-worked-icon {
    flex-shrink: 0;
    color: #f59e0b;
}

.attendance-cell.attendance-cell--today:not(.attendance-cell--holiday):not(.attendance-cell--rest):not(.attendance-cell--swap-rest) {
    background-color: rgba(85, 40, 99, .025);
}

.attendance-cell.attendance-cell--swap-working {
    background-color: rgba(139, 92, 246, .035);
}

.daykind-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .125rem;
    flex: 1 1 auto;
    min-height: 0;
}

.daykind-icon {
    flex-shrink: 0;
}

.daykind-icon--holiday {
    color: #f59e0b;
}

.daykind-icon--swap {
    color: #8b5cf6;
}

.daykind-label {
    font-size: .5625rem;
    font-weight: 500;
    font-family: var(--vx-font, 'Inter', system-ui, sans-serif);
}

.attendance-cell--holiday .daykind-label {
    color: #d97706;
}

.attendance-cell--rest .daykind-label {
    color: #9ca3af;
}

.attendance-cell--swap-rest .daykind-label {
    color: #8b5cf6;
}

.daykind-sublabel {
    font-size: .5rem;
    color: #a78bfa;
}

.swap-working-icon {
    flex-shrink: 0;
    color: #8b5cf6;
}

.attendance-status-icon {
    flex-shrink: 0;
}

.attendance-status-icon--locked {
    color: var(--vx-text-soft, #6b7280);
}

.attendance-status-icon--normal {
    color: #10b981;
}

.attendance-status-icon--late {
    color: #f59e0b;
}

.attendance-status-icon--absent {
    color: #f87171;
}

.attendance-status-icon--permission {
    color: #3b82f6;
}

.attendance-status-icon--incapacity {
    color: #f43f5e;
}

.attendance-perm-label {
    display: block;
    font-size: .5rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #3b82f6;
    margin-bottom: .125rem;
    font-family: var(--vx-font, 'Inter', system-ui, sans-serif);
}

.attendance-perm-label--incapacity {
    color: #f43f5e;
}

.attendance-bar-wrap {
    width: 100%;
    padding: 0 1.25rem;
    margin-bottom: .125rem;
}

.attendance-bar-track {
    position: relative;
    width: 100%;
    height: .375rem;
    background: #f3f4f6;
    border-radius: 9999px;
    overflow: hidden;
}

.attendance-bar-tick {
    position: absolute;
    top: 0;
    height: 100%;
    width: 1px;
    background: #e5e7eb;
}

.attendance-bar-segment {
    position: absolute;
    top: 0;
    height: 100%;
    border-radius: 9999px;
}

.attendance-bar-segment--normal {
    background: #34d399;
}

.attendance-bar-segment--late {
    background: #fbbf24;
}

.attendance-bar-segment--absent {
    background: #fca5a5;
}

.attendance-bar-segment--permission {
    background: #60a5fa;
}

.attendance-bar-segment--incapacity {
    background: #fb7185;
}

td.dx-header-today {
    color: var(--vx-purple, #552863) !important;
    font-weight: 600 !important;
    background-color: rgba(85, 40, 99, .05) !important;
}

.extra-time-badge {
    display: flex;
    align-items: flex-end;
    flex-shrink: 0;
    gap: .0625rem;
    color: #10b981;
}

.extra-time-badge-icon {
    width: .875rem;
    height: .875rem;
    flex-shrink: 0;
    color: #10b981;
}

.extra-time-badge-text {
    font-size: .5625rem;
    line-height: 1;
    font-weight: 500;
    font-family: var(--vx-font, 'Inter', system-ui, sans-serif);
}

.incident-icon {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    opacity: .95;
}

.icon-extra-time {
    color: #10b981;
}

.icon-tardy {
    color: #f59e0b;
}

.icon-absence {
    color: #f87171;
}

.icon-vacation {
    color: #3b82f6;
}

.icon-permit {
    color: #8b5cf6;
}

.icon-incapacity {
    color: #f43f5e;
}

.locked-icon {
    flex-shrink: 0;
    color: var(--vx-text-soft, #6b7280);
}

.manual-entry-icon {
    flex-shrink: 0;
    color: var(--vx-text-soft, #6b7280);
}

.readonly-icon {
    flex-shrink: 0;
    color: var(--vx-text-soft, #6b7280);
}

.pending-vacation-icon,
.pending-permission-icon {
    position: relative;
    flex-shrink: 0;
    color: #f59e0b;
}

    .pending-vacation-icon::after,
    .pending-permission-icon::after {
        content: "";
        position: absolute;
        top: -.125rem;
        right: -.25rem;
        width: .3125rem;
        height: .3125rem;
        border-radius: 50%;
        background: #f59e0b;
        box-shadow: 0 0 0 rgba(245, 158, 11, .55);
        animation: vxPingDot 1.6s cubic-bezier(0, 0, .2, 1) infinite;
    }

@keyframes vxPingDot {
    0% {
        box-shadow: 0 0 0 0 rgba(245, 158, 11, .55);
    }

    75%, 100% {
        box-shadow: 0 0 0 .25rem rgba(245, 158, 11, 0);
    }
}

.attendance-detail,
.action-details-content {
    font-family: var(--vx-font, 'Inter', system-ui, sans-serif);
    font-size: .875rem;
}

.detail-title {
    font-weight: 700;
    font-size: 1rem;
    color: var(--vx-text, #111827);
    margin-bottom: .25rem;
}

.detail-subtitle {
    color: var(--vx-text-soft, #6b7280);
    font-size: .8125rem;
    margin-bottom: .625rem;
}

.detail-row {
    display: flex;
    justify-content: space-between;
    padding: .375rem 0;
    border-bottom: 1px solid #f3f4f6;
    font-size: .8125rem;
}

.incident-list {
    margin-top: .5rem;
}

.incident-item {
    display: flex;
    gap: .5rem;
    align-items: center;
    padding: .25rem 0;
    font-size: .8125rem;
}

.incident-item-icon {
    flex-shrink: 0;
    color: var(--vx-text-soft, #6b7280);
}

.empty-detail {
    color: var(--vx-text-soft, #9ca3af);
}

.detail-comment {
    margin-top: .625rem;
    padding: .625rem;
    background: #f9fafb;
    border-radius: var(--vx-radius, .75rem);
    border: 1px solid #f3f4f6;
}

.detail-comment-title {
    font-weight: 600;
    margin-bottom: .375rem;
    font-size: .8125rem;
}

.detail-comment-text {
    max-height: 5.625rem;
    overflow-y: auto;
    white-space: pre-wrap;
    word-break: break-word;
    line-height: 1.4;
    font-size: .8125rem;
    color: var(--vx-text-soft, #4b5563);
}

.action-details-content {
    max-height: 60vh;
    overflow-y: auto;
}

.dx-overlay-shader {
    background: rgba(0, 0, 0, .4) !important;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.dx-popup-wrapper .dx-overlay-content {
    border-radius: var(--vx-radius-lg, 1rem) !important;
    border: .8px solid rgba(255, 255, 255, .6);
    box-shadow: var(--vx-shadow-glass-lg, 0 16px 48px 0 rgba(85,40,99,.18)) !important;
    background: rgba(255, 255, 255, .75);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    overflow: hidden;
}

.dx-popup-wrapper .dx-popup-title {
    padding: .875rem 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, .40);
    background: transparent;
}

.dx-popup-wrapper .dx-popup-title .dx-toolbar-label {
    font-family: var(--vx-font, 'Inter', system-ui, sans-serif);
    font-size: 1rem;
    font-weight: 700;
    color: var(--vx-text, #111827);
}

.dx-popup-wrapper .dx-popup-title .dx-closebutton {
    border-radius: var(--vx-radius, .75rem);
    color: var(--vx-text-soft, #9ca3af);
}

    .dx-popup-wrapper .dx-popup-title .dx-closebutton:hover {
        background: #f3f4f6;
        color: var(--vx-text, #374151);
    }

.dx-popup-wrapper .dx-popup-content {
    padding: 1.25rem 1.5rem;
    font-family: var(--vx-font, 'Inter', system-ui, sans-serif);
}

.dx-popup-wrapper .dx-popup-bottom {
    padding: 1rem 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, .40);
    background: transparent;
}

.dx-popup-wrapper .dx-field-item-label-text {
    font-size: .6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--vx-text-soft, #6b7280);
    font-family: var(--vx-font, 'Inter', system-ui, sans-serif);
}

.dx-popup-wrapper .dx-field-item-required-mark {
    color: var(--vx-orange, #fc6821);
}

.dx-popup-wrapper .dx-texteditor.dx-editor-outlined,
.dx-popup-wrapper .dx-texteditor.dx-editor-filled {
    border: 1px solid var(--vx-border, rgba(0,0,0,.08)) !important;
    background: #fff !important;
    border-radius: var(--vx-radius, .75rem) !important;
    box-shadow: none !important;
}

.dx-popup-wrapper .dx-texteditor.dx-editor-outlined .dx-texteditor-input,
.dx-popup-wrapper .dx-texteditor.dx-editor-filled .dx-texteditor-input {
    padding: .625rem .75rem !important;
    line-height: 1.25rem;
    box-sizing: border-box;
}

    .dx-popup-wrapper .dx-texteditor.dx-editor-filled::after {
        border-bottom: none !important;
    }

    .dx-popup-wrapper .dx-texteditor.dx-state-focused {
        border-color: rgba(252, 104, 33, .5) !important;
        box-shadow: 0 0 0 2px rgba(252, 104, 33, .4) !important;
    }

.dx-popup-wrapper .dx-texteditor-input {
    font-family: var(--vx-font, 'Inter', system-ui, sans-serif);
    color: var(--vx-text, #111827) !important;
}

.dx-popup-wrapper .dx-datebox .dx-texteditor-input {
    font-family: 'SF Mono', 'Menlo', 'Consolas', monospace;
}

.dx-popup-wrapper .dx-radiobutton-icon {
    border-color: #d1d5db;
}

.dx-popup-wrapper .dx-radiobutton-checked .dx-radiobutton-icon {
    border-color: var(--vx-purple, #552863);
}

.dx-popup-wrapper .dx-radiobutton-checked .dx-radiobutton-icon-dot {
    background-color: var(--vx-purple, #552863);
}

.dx-popup-wrapper .dx-radiogroup .dx-item-content {
    font-family: var(--vx-font, 'Inter', system-ui, sans-serif);
    font-size: .8125rem;
    font-weight: 500;
    color: var(--vx-text, #374151);
}

.dx-popup-wrapper .dx-button {
    border-radius: var(--vx-radius, .75rem) !important;
    font-family: var(--vx-font, 'Inter', system-ui, sans-serif);
}

.dx-popup-wrapper .dx-button.vx-btn {
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

.dx-popup-wrapper .dx-button.vx-btn .dx-button-content {
    padding: .5rem 1rem !important;
    background: none !important;
    box-shadow: none !important;
    font-size: .875rem;
    font-weight: 500;
}

.dx-popup-wrapper .dx-button.vx-btn .dx-button-text {
    background: none !important;
    box-shadow: none !important;
}

.dx-popup-wrapper .dx-button.vx-btn--primary {
    background-color: var(--vx-orange, #fc6821) !important;
    color: #fff !important;
    box-shadow: var(--vx-glow-orange, 0 4px 24px 0 rgba(252,104,33,.25)) !important;
}

    .dx-popup-wrapper .dx-button.vx-btn--primary:hover {
        background-color: var(--vx-orange-dark, #d9531a) !important;
    }

.dx-popup-wrapper .dx-button.vx-btn--secondary {
    background: rgba(255, 255, 255, .70) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, .50) !important;
    color: var(--vx-purple, #552863) !important;
    box-shadow: var(--vx-shadow-glass-sm, 0 4px 16px 0 rgba(85,40,99,.08)) !important;
}

    .dx-popup-wrapper .dx-button.vx-btn--secondary:hover {
        background: rgba(255, 255, 255, .92) !important;
    }

.dx-popup-wrapper .dx-popup-done.dx-button:not(.vx-btn) {
    background: var(--vx-orange, #fc6821) !important;
    color: #fff !important;
    border: none !important;
    border-radius: var(--vx-radius, .75rem) !important;
    box-shadow: var(--vx-glow-orange, 0 4px 24px 0 rgba(252,104,33,.25)) !important;
}

    .dx-popup-wrapper .dx-popup-done.dx-button:not(.vx-btn):hover {
        background: var(--vx-orange-dark, #d9531a) !important;
    }

.dx-popup-wrapper .dx-popup-cancel.dx-button:not(.vx-btn) {
    background: rgba(255, 255, 255, .70) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    color: var(--vx-purple, #552863) !important;
    border: 1px solid rgba(255, 255, 255, .50) !important;
    border-radius: var(--vx-radius, .75rem) !important;
    box-shadow: var(--vx-shadow-glass-sm, 0 4px 16px 0 rgba(85,40,99,.08)) !important;
}

    .dx-popup-wrapper .dx-popup-cancel.dx-button:not(.vx-btn):hover {
        background: rgba(255, 255, 255, .92) !important;
    }

.dx-popup-wrapper .dx-popup-done.dx-button:not(.vx-btn) .dx-button-content,
.dx-popup-wrapper .dx-popup-cancel.dx-button:not(.vx-btn) .dx-button-content {
    padding: .5rem 1rem !important;
}

.dx-popup-wrapper .dx-popup-done.dx-button:not(.vx-btn) .dx-button-text,
.dx-popup-wrapper .dx-popup-cancel.dx-button:not(.vx-btn) .dx-button-text {
    font-size: .875rem;
    font-weight: 500;
    text-transform: none !important;
    letter-spacing: normal !important;
}

.dx-datebox-wrapper-rollers .dx-dateview-item-selected {
    color: var(--vx-purple, #552863) !important;
}

.dx-datebox-wrapper-rollers .dx-dateview-item-selected-frame::before,
.dx-datebox-wrapper-rollers .dx-dateview-item-selected-frame::after {
    background: transparent !important;
}

.dx-popup-wrapper .dx-datagrid {
    font-family: var(--vx-font, 'Inter', system-ui, sans-serif);
    border: none !important;
}

.dx-popup-wrapper .dx-datagrid-rowsview,
.dx-popup-wrapper .dx-datagrid-headers {
    border: none !important;
    background: transparent !important;
}

.dx-popup-wrapper .dx-datagrid-headers {
    background: rgba(0, 0, 0, .015);
}

.dx-popup-wrapper .dx-datagrid-headers td {
    padding: .625rem .75rem !important;
    border-bottom-color: rgba(255, 255, 255, .40) !important;
}

.dx-popup-wrapper .dx-datagrid-headers .dx-datagrid-text-content {
    font-size: .625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #9ca3af;
}

.dx-popup-wrapper .dx-datagrid .dx-row-lines > td {
    border-top: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, .40) !important;
    padding: .625rem .75rem !important;
}

.dx-popup-wrapper .dx-datagrid .dx-row.dx-data-row:hover > td {
    background-color: rgba(252, 104, 33, .04);
}

.dx-popup-wrapper .dx-datagrid .dx-selection > td {
    background-color: rgba(85, 40, 99, .06) !important;
}

.dx-popup-wrapper .dx-datagrid-header-panel {
    padding: 0 !important;
}

.dx-popup-wrapper .dx-datagrid-header-panel .dx-toolbar-items-container {
    display: block !important;
}

.dx-popup-wrapper .dx-datagrid-header-panel .dx-toolbar-before,
.dx-popup-wrapper .dx-datagrid-header-panel .dx-toolbar-center {
    display: none !important;
}

.dx-popup-wrapper .dx-datagrid-header-panel .dx-toolbar-after {
    float: none !important;
    width: 100% !important;
    padding: 0 !important;
}

.dx-popup-wrapper .dx-datagrid-header-panel .dx-item.dx-toolbar-item {
    width: 100% !important;
    max-width: 100% !important;
}

.dx-popup-wrapper .dx-datagrid .dx-searchbox {
    width: 100% !important;
    margin: 0 !important;
    border: 1px solid var(--vx-border, rgba(0, 0, 0, .08)) !important;
    background: rgba(255, 255, 255, .70) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-radius: var(--vx-radius, .75rem) !important;
    box-shadow: none !important;
}

    .dx-popup-wrapper .dx-datagrid .dx-searchbox.dx-state-focused {
        border-color: rgba(252, 104, 33, .5) !important;
        box-shadow: 0 0 0 2px rgba(252, 104, 33, .4) !important;
    }

.dx-popup-wrapper .dx-datagrid .dx-searchbox .dx-texteditor-input {
    font-size: .8125rem;
    font-family: var(--vx-font, 'Inter', system-ui, sans-serif);
}

.dx-submenu {
    border-radius: var(--vx-radius-lg, 1rem) !important;
    box-shadow: var(--vx-shadow-glass, 0 8px 32px 0 rgba(85,40,99,.10)) !important;
    border: 1px solid rgba(0, 0, 0, .06);
    padding: .375rem;
    font-family: var(--vx-font, 'Inter', system-ui, sans-serif);
}

.vx-ctx-menu .dx-submenu {
    background: rgba(255, 255, 255, .75);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    width: 240px;
    padding: .5rem .375rem;
}

@media (prefers-color-scheme: dark) {
    .vx-ctx-menu .dx-submenu {
        background: rgba(255, 255, 255, .97);
    }
}

.vx-ctx-menu .dx-overlay-content {
    background: rgba(255, 255, 255, .75);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: var(--vx-radius-lg, 1rem) !important;
    box-shadow: var(--vx-shadow-glass, 0 8px 32px 0 rgba(85,40,99,.10)) !important;
    border: 1px solid rgba(0, 0, 0, .06);
    font-family: var(--vx-font, 'Inter', system-ui, sans-serif);
}

@media (prefers-color-scheme: dark) {
    .vx-ctx-menu .dx-overlay-content {
        background: rgba(255, 255, 255, .97);
    }
}

.vx-ctx-menu .dx-popup-content {
    padding: 0 !important;
}

.vx-ctx-menu .dx-list {
    padding: .375rem;
}

.vx-ctx-menu .dx-list-item {
    border-radius: var(--vx-radius, .75rem);
    margin: .0625rem 0;
}

.vx-ctx-menu .dx-list-item-content {
    padding: .5rem .75rem !important;
}

.dx-context-menu .dx-menu-item {
    border-radius: var(--vx-radius, .75rem);
    margin: .0625rem 0;
}

.dx-context-menu .dx-menu-item-content {
    padding: .5rem .75rem;
    display: flex;
    align-items: center;
    gap: .625rem;
}

.dx-context-menu .dx-menu-item-text {
    font-size: .8125rem;
    font-weight: 500;
    color: var(--vx-text, #374151);
    font-family: var(--vx-font, 'Inter', system-ui, sans-serif);
}

.dx-context-menu .dx-menu-item:not(.dx-state-disabled):hover {
    background: rgba(85, 40, 99, .06);
}

.dx-context-menu .dx-state-disabled .dx-menu-item-text,
.dx-context-menu .dx-state-disabled .dx-icon {
    color: #d1d5db;
}

.dx-dropdowneditor-overlay .dx-overlay-content,
.dx-selectbox-popup-wrapper .dx-overlay-content {
    border-radius: var(--vx-radius-lg, 1rem) !important;
    box-shadow: var(--vx-shadow-glass, 0 8px 32px 0 rgba(85,40,99,.10)) !important;
    border: 1px solid rgba(0, 0, 0, .06);
    overflow: hidden;
}

.dx-dropdowneditor-overlay .dx-popup-content,
.dx-selectbox-popup-wrapper .dx-popup-content {
    padding: .375rem !important;
}

.dx-popup-wrapper .dx-calendar,
.dx-popup-wrapper .dx-list {
    background: transparent !important;
}

.dx-list-item {
    font-family: var(--vx-font, 'Inter', system-ui, sans-serif);
    font-size: .8125rem;
    color: var(--vx-text, #374151);
}

.dx-list-item.dx-state-hover:not(.dx-state-disabled) {
    background: rgba(85, 40, 99, .06);
}

.dx-list-item-selected {
    background: rgba(252, 104, 33, .08) !important;
    color: var(--vx-text, #111827) !important;
}

.dx-checkbox-icon {
    border-radius: .25rem !important;
    border: 2px solid #d1d5db !important;
}

.dx-checkbox-checked .dx-checkbox-icon,
.dx-checkbox-indeterminate .dx-checkbox-icon {
    background-color: var(--vx-orange, #fc6821) !important;
    border-color: var(--vx-orange, #fc6821) !important;
    color: #fff !important;
}

.dx-dropdowneditor-overlay .dx-button-mode-text.dx-button-default,
.dx-selectbox-popup-wrapper .dx-button-mode-text.dx-button-default {
    color: var(--vx-orange, #fc6821) !important;
    font-family: var(--vx-font, 'Inter', system-ui, sans-serif);
}

.dx-dropdowneditor-overlay .dx-button-mode-text.dx-button-default:hover,
.dx-selectbox-popup-wrapper .dx-button-mode-text.dx-button-default:hover {
    background-color: rgba(252, 104, 33, .08) !important;
}

.dx-loadpanel-content {
    border-radius: var(--vx-radius-lg, 1rem) !important;
    box-shadow: var(--vx-shadow-glass, 0 8px 32px 0 rgba(85,40,99,.10)) !important;
    background: rgba(255, 255, 255, .75) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: .8px solid rgba(255, 255, 255, .6);
}

@media (prefers-color-scheme: dark) {
    .dx-loadpanel-content {
        background: rgba(255, 255, 255, .97) !important;
    }
}

.dx-loadpanel-message {
    color: var(--vx-text, #374151);
    font-size: .8125rem;
    font-family: var(--vx-font, 'Inter', system-ui, sans-serif);
}

.dx-loadindicator-segment-inner {
    border-color: var(--vx-orange, #fc6821) transparent transparent var(--vx-orange, #fc6821) !important;
}

.dx-dropdowneditor-overlay .dx-calendar {
    border: none !important;
    box-shadow: none !important;
    font-family: var(--vx-font, 'Inter', system-ui, sans-serif);
    padding: .5rem;
}

.dx-calendar-navigator {
    background: transparent !important;
}

.dx-calendar-navigator .dx-button.dx-button-mode-text.dx-button-default {
    border-radius: 9999px !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--vx-text-soft, #6b7280) !important;
}

    .dx-calendar-navigator .dx-button.dx-button-mode-text.dx-button-default .dx-icon {
        color: var(--vx-text-soft, #6b7280) !important;
    }

    .dx-calendar-navigator .dx-button.dx-button-mode-text.dx-button-default:not(.dx-state-disabled):hover {
        background: rgba(252, 104, 33, .10) !important;
        color: var(--vx-orange, #fc6821) !important;
    }

        .dx-calendar-navigator .dx-button.dx-button-mode-text.dx-button-default:not(.dx-state-disabled):hover .dx-icon {
            color: var(--vx-orange, #fc6821) !important;
        }

.dx-calendar-caption-button .dx-button-content {
    font-weight: 600;
    font-size: .8125rem;
    color: var(--vx-text, #111827);
}

.dx-calendar-caption-button.dx-button-mode-text.dx-button-default {
    background: transparent !important;
    box-shadow: none !important;
    color: var(--vx-text, #111827) !important;
}

    .dx-calendar-caption-button.dx-button-mode-text.dx-button-default:not(.dx-state-disabled):hover {
        background: rgba(0, 0, 0, .04) !important;
        color: var(--vx-text, #111827) !important;
    }

.dx-calendar-week-day {
    font-size: .625rem;
    font-weight: 600;
    color: var(--vx-text-soft, #6b7280);
    text-transform: uppercase;
}

.dx-calendar-cell {
    padding: 1px !important;
}

    .dx-calendar-cell span {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 1.75rem !important;
        height: 1.75rem !important;
        margin: 1px auto;
        border-radius: .5rem !important;
        font-size: .6875rem;
        font-weight: 700;
        color: var(--vx-text, #374151) !important;
        border: 1px solid transparent !important;
        transition: transform .1s ease, background-color .15s ease;
    }

    .dx-calendar-cell:not(.dx-calendar-empty-cell):hover span {
        background: rgba(85, 40, 99, .08) !important;
        transform: scale(1.08);
    }

    .dx-calendar-cell.dx-calendar-other-view span {
        color: #d1d5db !important;
    }

    .dx-calendar-cell.dx-calendar-today span {
        border: 1px solid var(--vx-purple, #552863) !important;
    }

    .dx-calendar-cell.dx-calendar-selected-date span {
        background: var(--vx-purple, #552863) !important;
        color: #fff !important;
        border: 1px solid var(--vx-purple, #552863) !important;
    }

    .dx-calendar-cell span,
    .dx-calendar-cell.dx-calendar-contoured-date span,
    .dx-calendar-cell.dx-state-focused span {
        box-shadow: none !important;
        outline: none !important;
    }

.dx-calendar-week-number-cell {
    color: #d1d5db;
    font-size: .625rem;
}

#attendanceReadOnlyTooltip .dx-popup-content,
#attendanceReadOnlyTooltip.dx-tooltip-wrapper .dx-overlay-content {
    border-radius: var(--vx-radius, .75rem) !important;
    font-family: var(--vx-font, 'Inter', system-ui, sans-serif);
    font-size: .75rem;
}

@media (max-width: 640px) {
    .dx-popup-wrapper .dx-overlay-content.dx-popup-normal {
        width: calc(100vw - 2rem) !important;
        max-width: calc(100vw - 2rem) !important;
    }
}