/* =============================================================
   JLI ATTENDANCE + HOLIDAY + PAYROLL PREMIUM UI
   Shared polish layer for operational pages. No business logic.
   ============================================================= */
:root {
    --jli-navy: #0f2747;
    --jli-blue: #2563eb;
    --jli-indigo: #4f46e5;
    --jli-cyan: #0891b2;
    --jli-green: #059669;
    --jli-amber: #d97706;
    --jli-red: #dc2626;
    --jli-slate-50: #f8fafc;
    --jli-slate-100: #f1f5f9;
    --jli-slate-200: #e2e8f0;
    --jli-slate-500: #64748b;
    --jli-slate-700: #334155;
    --jli-slate-900: #0f172a;
    --jli-radius-lg: 18px;
    --jli-radius-md: 13px;
    --jli-shadow: 0 18px 50px rgba(15, 39, 71, .08);
    --jli-shadow-sm: 0 8px 22px rgba(15, 39, 71, .06);
}

/* Page canvas */
.att-page,
.payhead-page,
.adj-page,
.disb-page,
.sheet-page,
.full-page,
.jli-device-page,
.font-kalpurush.fade-in.mt-0.w-full.text-lg {
    background:
        radial-gradient(circle at 0% 0%, rgba(37, 99, 235, .08), transparent 30%),
        radial-gradient(circle at 100% 0%, rgba(8, 145, 178, .06), transparent 28%),
        linear-gradient(180deg, #f8fbff 0%, #f6f8fc 100%) !important;
}

/* Main shells and operational cards */
.att-page .section-shell,
.payhead-page .section-shell,
.adj-page .section-shell,
.disb-page .disb-shell,
.sheet-page .section-shell,
.full-page .section-shell,
.jli-device-page .section-shell,
.att-page .display-card,
.att-page .setup-card,
.att-page .config-card,
.att-page .list-card,
.payhead-page .config-card,
.payhead-page .list-card,
.adj-page .display-card,
.sheet-page .sheet-report-card,
.jli-device-page .premium-card {
    border-color: rgba(148, 163, 184, .28) !important;
    border-radius: var(--jli-radius-lg) !important;
    box-shadow: var(--jli-shadow) !important;
}

/* Premium header */
.att-page .section-banner,
.payhead-page .section-banner,
.adj-page .section-banner,
.disb-page .section-banner,
.sheet-page .section-banner,
.full-page .section-banner,
.jli-device-page .section-banner,
.font-kalpurush.fade-in.mt-0.w-full.text-lg .section-banner {
    position: relative;
    background:
        linear-gradient(115deg, rgba(255,255,255,.96) 0%, rgba(239,246,255,.96) 42%, rgba(238,242,255,.96) 72%, rgba(240,253,250,.96) 100%) !important;
    border-bottom: 1px solid rgba(148, 163, 184, .25) !important;
    box-shadow: inset 0 -1px 0 rgba(255,255,255,.7);
}

.att-page .section-banner::before,
.payhead-page .section-banner::before,
.adj-page .section-banner::before,
.disb-page .section-banner::before,
.sheet-page .section-banner::before,
.full-page .section-banner::before,
.jli-device-page .section-banner::before,
.font-kalpurush.fade-in.mt-0.w-full.text-lg .section-banner::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, var(--jli-blue), var(--jli-indigo), var(--jli-cyan));
}

.section-banner-icon,
.jli-device-page .hero-icon {
    background: linear-gradient(135deg, var(--jli-blue), var(--jli-indigo)) !important;
    box-shadow: 0 10px 24px rgba(37, 99, 235, .24) !important;
}

.section-banner-title,
.display-title,
.list-title,
.jli-device-page .card-title {
    letter-spacing: -.25px;
}

/* Inputs */
.att-page input:not([type="checkbox"]):not([type="radio"]),
.att-page textarea,
.att-page .rz-dropdown,
.att-page .rz-spinner,
.payhead-page input:not([type="checkbox"]):not([type="radio"]),
.payhead-page textarea,
.payhead-page .rz-dropdown,
.adj-page input:not([type="checkbox"]):not([type="radio"]),
.adj-page textarea,
.adj-page .rz-dropdown,
.disb-page input:not([type="checkbox"]):not([type="radio"]),
.disb-page textarea,
.disb-page .rz-dropdown,
.sheet-page input:not([type="checkbox"]):not([type="radio"]),
.sheet-page textarea,
.sheet-page .rz-dropdown,
.full-page input:not([type="checkbox"]):not([type="radio"]),
.full-page textarea,
.full-page .rz-dropdown,
.jli-device-page input:not([type="checkbox"]):not([type="radio"]),
.jli-device-page textarea,
.jli-device-page .rz-dropdown,
.font-kalpurush.fade-in.mt-0.w-full.text-lg input:not([type="checkbox"]):not([type="radio"]),
.font-kalpurush.fade-in.mt-0.w-full.text-lg textarea,
.font-kalpurush.fade-in.mt-0.w-full.text-lg .rz-dropdown {
    border-radius: 11px !important;
    border-color: #d5deea !important;
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease !important;
}

.att-page input:focus,
.att-page textarea:focus,
.payhead-page input:focus,
.payhead-page textarea:focus,
.adj-page input:focus,
.adj-page textarea:focus,
.disb-page input:focus,
.disb-page textarea:focus,
.sheet-page input:focus,
.sheet-page textarea:focus,
.full-page input:focus,
.full-page textarea:focus,
.jli-device-page input:focus,
.jli-device-page textarea:focus {
    border-color: #60a5fa !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .10) !important;
    outline: none !important;
}

.rz-dropdown:not(.rz-state-disabled):hover,
.rz-spinner:not(.rz-state-disabled):hover {
    border-color: #93c5fd !important;
}

/* Buttons */
.att-page button,
.payhead-page button,
.adj-page button,
.disb-page button,
.sheet-page button,
.full-page button,
.jli-device-page button,
.font-kalpurush.fade-in.mt-0.w-full.text-lg button {
    transition: transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease !important;
}

.att-page button:not(:disabled):hover,
.payhead-page button:not(:disabled):hover,
.adj-page button:not(:disabled):hover,
.disb-page button:not(:disabled):hover,
.sheet-page button:not(:disabled):hover,
.full-page button:not(:disabled):hover,
.jli-device-page button:not(:disabled):hover,
.font-kalpurush.fade-in.mt-0.w-full.text-lg button:not(:disabled):hover {
    transform: translateY(-1px);
}

.btn-save,
.save-btn,
.btn-success-action,
.jli-device-page .primary-btn {
    box-shadow: 0 8px 18px rgba(37,99,235,.18) !important;
}

/* Radzen grids */
.att-page .rz-data-grid,
.payhead-page .rz-data-grid,
.adj-page .rz-data-grid,
.disb-page .rz-data-grid,
.sheet-page .rz-data-grid,
.full-page .rz-data-grid,
.jli-device-page .rz-data-grid,
.font-kalpurush.fade-in.mt-0.w-full.text-lg .rz-data-grid {
    border-radius: 14px !important;
    border: 1px solid var(--jli-slate-200) !important;
    overflow: hidden;
    background: #fff;
}

.att-page .rz-grid-table thead th,
.payhead-page .rz-grid-table thead th,
.adj-page .rz-grid-table thead th,
.disb-page .rz-grid-table thead th,
.sheet-page .rz-grid-table thead th,
.full-page .rz-grid-table thead th,
.jli-device-page .rz-grid-table thead th,
.font-kalpurush.fade-in.mt-0.w-full.text-lg .rz-grid-table thead th {
    background: linear-gradient(180deg, #174a78 0%, #123c64 100%) !important;
    color: #fff !important;
    border-color: rgba(255,255,255,.12) !important;
    font-weight: 800 !important;
    letter-spacing: .18px;
}

.att-page .rz-grid-table thead th .rz-column-title,
.payhead-page .rz-grid-table thead th .rz-column-title,
.adj-page .rz-grid-table thead th .rz-column-title,
.disb-page .rz-grid-table thead th .rz-column-title,
.sheet-page .rz-grid-table thead th .rz-column-title,
.full-page .rz-grid-table thead th .rz-column-title,
.jli-device-page .rz-grid-table thead th .rz-column-title,
.font-kalpurush.fade-in.mt-0.w-full.text-lg .rz-grid-table thead th .rz-column-title {
    color: #fff !important;
}

.rz-grid-table tbody tr:nth-child(even) td {
    background: #fbfdff;
}

.rz-grid-table tbody tr:hover td {
    background: #eff6ff !important;
}

.rz-paginator {
    background: #fbfdff !important;
    border-top: 1px solid var(--jli-slate-200) !important;
}

/* Status / summary polish */
.mini-summary-item,
.cycle-chip,
.status-badge,
.status-pill,
.system-badge,
.badge-status,
.jli-device-page .status-chip,
.jli-device-page .metric-chip {
    box-shadow: 0 3px 10px rgba(15,23,42,.04);
}

.metric-card,
.summary-card,
.sheet-summary-card,
.detail-card,
.jli-device-page .metric-card {
    background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%) !important;
    border-color: rgba(148, 163, 184, .28) !important;
}

/* Loaders */
.local-loading-overlay,
.local-loader,
.loading-overlay,
.loader-overlay {
    backdrop-filter: blur(4px);
    background: rgba(248, 250, 252, .86) !important;
}

.spinner,
.spinner-border {
    filter: drop-shadow(0 5px 12px rgba(37, 99, 235, .18));
}

/* Modal polish */
.modal-content,
.popup-card,
.punch-modal,
.jli-device-page .modal-card {
    border-radius: 18px !important;
    border: 1px solid rgba(148, 163, 184, .26) !important;
    box-shadow: 0 28px 80px rgba(15, 23, 42, .22) !important;
}

/* Small section headings */
.field-label,
.soft-label,
.sheet-label,
.disb-label,
.jli-device-page .field-label {
    color: #50627b !important;
    font-weight: 800 !important;
}

/* Better scrollbars for dense tables */
.att-page *::-webkit-scrollbar,
.payhead-page *::-webkit-scrollbar,
.adj-page *::-webkit-scrollbar,
.disb-page *::-webkit-scrollbar,
.sheet-page *::-webkit-scrollbar,
.full-page *::-webkit-scrollbar,
.jli-device-page *::-webkit-scrollbar {
    width: 9px;
    height: 9px;
}

.att-page *::-webkit-scrollbar-thumb,
.payhead-page *::-webkit-scrollbar-thumb,
.adj-page *::-webkit-scrollbar-thumb,
.disb-page *::-webkit-scrollbar-thumb,
.sheet-page *::-webkit-scrollbar-thumb,
.full-page *::-webkit-scrollbar-thumb,
.jli-device-page *::-webkit-scrollbar-thumb {
    background: #c5d1df;
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: padding-box;
}

.att-page *::-webkit-scrollbar-track,
.payhead-page *::-webkit-scrollbar-track,
.adj-page *::-webkit-scrollbar-track,
.disb-page *::-webkit-scrollbar-track,
.sheet-page *::-webkit-scrollbar-track,
.full-page *::-webkit-scrollbar-track,
.jli-device-page *::-webkit-scrollbar-track {
    background: transparent;
}

@media (max-width: 768px) {
    .att-page,
    .payhead-page,
    .adj-page,
    .disb-page,
    .sheet-page,
    .full-page,
    .jli-device-page {
        padding: 8px !important;
    }

    .section-banner {
        border-radius: 0 !important;
    }
}