body {
    margin: 0;
}

.app-loader-overlay {
    z-index: 999999;
}

.app-topbar {
    z-index: 99999;
}

.app-topbar-toggle {
    z-index: 99999;
}

@media (max-width: 1023px) {
    .app-sidebar-overlay {
        z-index: 100000;
    }

    .sidebar {
        z-index: 100001;
    }

    .sidebar .sidebar-header {
        display: none !important;
    }

    .sidebar > .no-scrollbar {
        padding-top: 1.5rem;
    }
}

.sidebar-brand-logo {
    max-width: 150px;
    height: auto;
}

.login-side-logo {
    width: 250px;
    max-width: 100%;
    height: auto;
}

.login-page {
    box-sizing: border-box;
    display: flex;
    height: 100vh;
    height: 100dvh;
    min-height: 100vh;
    min-height: 100dvh;
}

.login-shell {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
}

.login-form-pane {
    box-sizing: border-box;
}

@media (max-width: 1023px) {
    .login-page {
        padding: 1.5rem;
    }

    .login-shell {
        min-height: 0;
    }

    .login-form-pane {
        padding: 0;
    }
}

[x-cloak] {
    display: none !important;
}

@media (min-width: 640px) {
    .sm\:hidden {
        display: none !important;
    }
}

.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: rgba(156, 163, 175, 0.45);
    border-radius: 999px;
}

.alert {
    border-radius: 0.75rem;
    border: 1px solid transparent;
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.5;
}

.alert-error {
    border-color: rgb(254, 205, 211);
    background: rgb(255, 241, 242);
    color: rgb(190, 24, 93);
}

.dark .alert-error {
    border-color: rgba(244, 63, 94, 0.35);
    background: rgba(127, 29, 29, 0.55);
    color: rgb(254, 205, 211);
}

.alert-success {
    border-color: rgb(167, 243, 208);
    background: rgb(236, 253, 245);
    color: rgb(4, 120, 87);
}

.dark .alert-success {
    border-color: rgba(16, 185, 129, 0.35);
    background: rgba(6, 78, 59, 0.6);
    color: rgb(167, 243, 208);
}

.alert-neutral {
    border-color: rgb(226, 232, 240);
    background: rgb(248, 250, 252);
    color: rgb(51, 65, 85);
}

.dark .alert-neutral {
    border-color: rgba(71, 85, 105, 0.7);
    background: rgba(15, 23, 42, 0.72);
    color: rgb(226, 232, 240);
}

.compliance-percent-danger {
    color: rgb(225, 29, 72);
}

.dark .compliance-percent-danger {
    color: rgb(251, 113, 133);
}

.compliance-percent-warning {
    color: rgb(217, 119, 6);
}

.dark .compliance-percent-warning {
    color: rgb(251, 191, 36);
}

.compliance-percent-success {
    color: rgb(5, 150, 105);
}

.dark .compliance-percent-success {
    color: rgb(52, 211, 153);
}

.compliance-percent-neutral {
    color: rgb(75, 85, 99);
}

.dark .compliance-percent-neutral {
    color: rgb(209, 213, 219);
}

.trend-value-danger {
    color: rgb(225, 29, 72);
}

.dark .trend-value-danger {
    color: rgb(251, 113, 133);
}

.trend-value-success {
    color: rgb(5, 150, 105);
}

.dark .trend-value-success {
    color: rgb(52, 211, 153);
}

.trend-value-neutral {
    color: rgb(2, 132, 199);
}

.dark .trend-value-neutral {
    color: rgb(56, 189, 248);
}

.trend-badge-neutral-info {
    background: rgb(240, 249, 255);
    color: rgb(2, 132, 199);
}

.dark .trend-badge-neutral-info {
    background: rgba(14, 165, 233, 0.15);
    color: rgb(56, 189, 248);
}

.task-title-link {
    color: rgb(31, 41, 55);
}

.task-title-link:hover {
    color: var(--color-brand-500);
}

.dark .task-title-link {
    color: rgba(255, 255, 255, 0.9);
}

.dark .task-title-link:hover {
    color: var(--color-brand-400);
}

.task-mobile-hidden {
    display: none;
}

.tasks-status-chart {
    position: relative;
    width: 100%;
    overflow: visible;
}

.tasks-status-chart svg {
    display: block;
    max-width: 100%;
}

.tasks-status-chart-tooltip {
    position: absolute;
    z-index: 20;
    min-width: 170px;
    border: 1px solid rgb(229, 231, 235);
    border-radius: 0.75rem;
    background: rgb(255, 255, 255);
    box-shadow: 0 10px 25px rgba(16, 24, 40, 0.14);
    color: rgb(31, 41, 55);
    font-size: 0.75rem;
    line-height: 1.4;
    padding: 0.75rem;
    pointer-events: none;
}

.tasks-status-chart-tooltip[hidden] {
    display: none;
}

.dark .tasks-status-chart-tooltip {
    border-color: rgb(55, 65, 81);
    background: rgb(17, 24, 39);
    color: rgba(255, 255, 255, 0.9);
}

@media (min-width: 768px) {
    .task-mobile-hidden {
        display: block;
    }
}

.task-modal-layer {
    z-index: 100010;
}

.task-modal-layer[hidden] {
    display: none;
}

.task-modal-backdrop {
    background: rgba(17, 24, 39, 0.7);
}

.task-modal-card {
    max-width: 420px;
}

.task-modal-icon {
    background: var(--color-gray-50);
    color: var(--color-gray-500);
}

.task-modal-info {
    background: var(--color-blue-light-50);
    color: var(--color-blue-light-500);
}

.task-modal-success {
    background: var(--color-success-50);
    color: var(--color-success-600);
}

.task-modal-danger {
    background: var(--color-error-50);
    color: var(--color-error-600);
}

.dark .task-modal-icon,
.dark .task-modal-info,
.dark .task-modal-success,
.dark .task-modal-danger {
    background: rgba(255, 255, 255, 0.06);
}

.flatpickr-calendar.open {
    z-index: 1000000 !important;
}

.filter-dropdown-panel {
    width: min(420px, calc(100vw - 2.5rem));
}

.sap-results-card {
    overflow: visible !important;
}

.sap-document-row:hover {
    background: rgb(249, 250, 251);
}

.dark .sap-document-row:hover {
    background: rgba(255, 255, 255, 0.04);
}

.attendance-status-badge {
    align-items: center;
    border-radius: 9999px;
    display: inline-flex;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1rem;
    padding: 0.25rem 0.75rem;
}

.attendance-status-badge--entry {
    background: #dcfce7 !important;
    color: #047857 !important;
}

.attendance-status-badge--exit {
    background: #e0f2fe !important;
    color: #0369a1 !important;
}

.attendance-status-badge--warning {
    background: #fef3c7 !important;
    color: #b45309 !important;
}

.attendance-status-badge--absence {
    background: #ffe4e6 !important;
    color: #be123c !important;
}

.dark .attendance-status-badge--entry {
    background: rgba(16, 185, 129, 0.18) !important;
    color: #86efac !important;
}

.dark .attendance-status-badge--exit {
    background: rgba(14, 165, 233, 0.18) !important;
    color: #7dd3fc !important;
}

.dark .attendance-status-badge--warning {
    background: rgba(245, 158, 11, 0.18) !important;
    color: #fcd34d !important;
}

.dark .attendance-status-badge--absence {
    background: rgba(244, 63, 94, 0.18) !important;
    color: #fda4af !important;
}

.sap-document-summary {
    max-width: 22rem;
}

.price-list-details-grid {
    grid-template-columns: minmax(0, 1fr);
}

.price-list-search-grid {
    grid-template-columns: minmax(0, 1fr);
}

.price-list-selected-count {
    color: var(--accent-red-500);
    margin-right: 5px;
}

.price-list-new-button {
    flex-shrink: 0;
    min-width: 132px;
    white-space: nowrap;
}

.dark .price-list-selected-count {
    color: var(--accent-red-dark-text);
}

/* TailAdmin compiled bundle does not include every grid span used in app partials. */
.col-span-6 {
    grid-column: span 6 / span 6;
}

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

.mt-\[15px\] {
    margin-top: 15px;
}

.w-\[100px\] {
    width: 100px;
}

/* TailAdmin compatibility aliases for older style-guide utility names. */
.gap-7\.5 {
    gap: 1.875rem;
}

.border-stroke {
    border-color: var(--color-gray-200);
}

.shadow-default {
    box-shadow:
        0px 1px 3px 0px rgba(16, 24, 40, 0.1),
        0px 1px 2px 0px rgba(16, 24, 40, 0.06);
}

.dark .border-stroke {
    border-color: var(--color-gray-800);
}

@media (min-width: 768px) {
    .price-list-details-grid {
        grid-template-columns: repeat(12, minmax(0, 1fr));
    }

    .price-list-detail-description {
        grid-column: span 6 / span 6;
    }

    .price-list-detail-field {
        grid-column: span 2 / span 2;
    }

    .price-list-search-grid {
        grid-template-columns: repeat(12, minmax(0, 1fr));
    }

    .price-list-search-code,
    .price-list-search-field {
        grid-column: span 2 / span 2;
    }

    .price-list-search-description {
        grid-column: span 4 / span 4;
    }

    .price-list-search-actions {
        grid-column: 1 / -1;
    }
}

@media (min-width: 1280px) {
    .users-filter-grid .users-filter-search {
        grid-column: span 4 / span 4;
    }

    .users-filter-grid .users-filter-unit {
        grid-column: span 3 / span 3;
    }

    .users-filter-grid .users-filter-department {
        grid-column: span 3 / span 3;
    }

    .users-filter-grid .users-filter-status {
        grid-column: span 2 / span 2;
    }

    .attendance-filter-grid .attendance-filter-start,
    .attendance-filter-grid .attendance-filter-end,
    .attendance-filter-grid .attendance-filter-unit,
    .attendance-filter-grid .attendance-filter-department {
        grid-column: span 2 / span 2;
    }

    .attendance-filter-grid .attendance-filter-search {
        grid-column: span 4 / span 4;
    }

    .tasks-filter-grid .tasks-filter-start,
    .tasks-filter-grid .tasks-filter-end,
    .tasks-filter-grid .tasks-filter-status,
    .tasks-filter-grid .tasks-filter-impact {
        grid-column: span 2 / span 2;
    }

    .tasks-filter-grid .tasks-filter-search {
        grid-column: span 4 / span 4;
    }

    .tasks-filter-grid .tasks-filter-unit,
    .tasks-filter-grid .tasks-filter-user {
        grid-column: span 3 / span 3;
    }

    .tasks-performance-filter-grid .tasks-performance-start,
    .tasks-performance-filter-grid .tasks-performance-end {
        grid-column: span 2 / span 2;
    }

    .tasks-performance-filter-grid .tasks-performance-search {
        grid-column: span 5 / span 5;
    }

    .tasks-performance-filter-grid .tasks-performance-unit {
        grid-column: span 3 / span 3;
    }

}