/* ==========================================================
   JLI PREMIUM UI POLISH - AH7
   Calm enterprise visual pass for the complete application.
   Loaded last so it can safely normalize older page styles.
   ========================================================== */

:root {
    --jli-primary: #0f766e;
    --jli-primary-dark: #115e59;
    --jli-primary-deep: #134e4a;
    --jli-primary-soft: #f0fdfa;
    --jli-button-accent: #0369a1;
    --jli-button-accent-dark: #075985;
    --jli-button-accent-soft: #eff6ff;
    --jli-accent: #be123c;
    --jli-accent-dark: #9f1239;
    --jli-accent-soft: #fff1f2;
    --jli-bg: #f5f8fa;
    --jli-surface: #ffffff;
    --jli-surface-soft: #f8fafc;
    --jli-border: #dfe7ec;
    --jli-text: #172033;
    --jli-muted: #64748b;
    --jli-shadow-xs: 0 1px 2px rgba(15,23,42,.035);
    --jli-shadow-sm: 0 8px 22px rgba(15,23,42,.055);
    --jli-shadow-md: 0 16px 38px rgba(15,23,42,.08);
}

/* All selectable themes keep the same calm corporate base. */
.theme-sakura,
.theme-ocean,
.theme-emerald,
.theme-royal,
.theme-sunset {
    --jli-primary: #0f766e !important;
    --jli-secondary: #0369a1 !important;
    --jli-soft: #f0fdfa !important;
    --primary: #0f766e !important;
    --secondary: #0369a1 !important;
    --soft: #f0fdfa !important;
}

html { background: var(--jli-bg); }
body {
    background: var(--jli-bg);
    color: var(--jli-text);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.jli-shell {
    background:
        radial-gradient(circle at 8% 0%, rgba(15,118,110,.055), transparent 28rem),
        radial-gradient(circle at 96% 2%, rgba(3,105,161,.045), transparent 30rem),
        linear-gradient(180deg,#f8fafc 0%,#f4f8fa 55%,#f7fafb 100%) !important;
}

/* ---------- Topbar ---------- */
.jli-topbar.jli-topbar-clean {
    min-height: 62px !important;
    height: 62px !important;
    padding: 0 14px !important;
    gap: 12px !important;
    background:
        linear-gradient(90deg,rgba(255,255,255,.985),rgba(248,252,252,.965) 55%,rgba(248,251,253,.985)) !important;
    border-bottom: 1px solid rgba(203,213,225,.78) !important;
    box-shadow: 0 8px 28px rgba(15,23,42,.055), inset 0 1px 0 rgba(255,255,255,.95) !important;
    backdrop-filter: blur(18px) saturate(1.06) !important;
    -webkit-backdrop-filter: blur(18px) saturate(1.06) !important;
}

.dark .jli-topbar.jli-topbar-clean {
    background: rgba(15,23,42,.96) !important;
    border-bottom-color: #334155 !important;
    box-shadow: 0 10px 28px rgba(0,0,0,.20) !important;
}

.clean-topbar-left { gap: 10px !important; }
.clean-topbar-title {
    min-width: 0;
    position: relative;
    padding-left: 12px;
}
.clean-topbar-title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 3px;
    bottom: 3px;
    width: 3px;
    border-radius: 999px;
    background: linear-gradient(180deg,#0f766e,#0369a1);
}
.clean-topbar-title h1 {
    margin: 0 !important;
    max-width: min(34vw, 430px);
    overflow: hidden;
    color: #172033 !important;
    font-size: .88rem !important;
    line-height: 1.12 !important;
    font-weight: 900 !important;
    letter-spacing: -.018em;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.clean-topbar-title span {
    display: block;
    margin-top: 3px;
    color: #78909c !important;
    font-size: .56rem !important;
    line-height: 1;
    font-weight: 850 !important;
    letter-spacing: .105em !important;
    text-transform: uppercase;
}
.dark .clean-topbar-title h1 { color: #f8fafc !important; }
.dark .clean-topbar-title span { color: #94a3b8 !important; }

.clean-nav-toggle {
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;
    display: inline-grid !important;
    place-items: center;
    padding: 0 !important;
    border: 1px solid #d8e3e8 !important;
    border-radius: 12px !important;
    background: linear-gradient(180deg,#fff,#f8fbfc) !important;
    color: #0f766e !important;
    box-shadow: 0 5px 14px rgba(15,23,42,.055), inset 0 1px 0 #fff !important;
    transition: transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease !important;
}
.clean-nav-toggle:hover {
    transform: translateY(-1px);
    border-color: #99d5d0 !important;
    background: #f0fdfa !important;
    box-shadow: 0 8px 18px rgba(15,118,110,.10) !important;
}
.clean-nav-toggle:active { transform: translateY(0); }

.clean-topbar-actions { gap: 7px !important; }
.clean-date,
.clean-session-id {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0 10px;
    border: 1px solid #e0e7eb;
    border-radius: 11px;
    background: rgba(255,255,255,.86);
    color: #475569;
    font-size: .68rem;
    font-weight: 800;
    white-space: nowrap;
    box-shadow: var(--jli-shadow-xs);
}
.clean-date i,
.clean-session-id i { color: #0f766e; }
.clean-session-id b {
    max-width: 105px;
    overflow: hidden;
    color: #334155;
    font-size: .66rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.clean-session-label { color: #7c8b9b; font-size: .61rem; font-weight: 800; }
.dark .clean-date,.dark .clean-session-id { background:rgba(2,6,23,.42);border-color:#334155;color:#cbd5e1; }
.dark .clean-session-id b { color:#e2e8f0; }

.jli-topbar .icon-btn {
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;
    border: 1px solid #dde6eb !important;
    border-radius: 12px !important;
    background: rgba(255,255,255,.92) !important;
    color: #475569 !important;
    box-shadow: 0 4px 12px rgba(15,23,42,.045) !important;
}
.jli-topbar .icon-btn:hover {
    transform: translateY(-1px) !important;
    border-color: #a9d8d4 !important;
    background: #f0fdfa !important;
    color: #0f766e !important;
    box-shadow: 0 8px 18px rgba(15,118,110,.09) !important;
}
.jli-topbar .notify-btn em {
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border: 2px solid #fff;
    background: #be123c !important;
    box-shadow: 0 2px 5px rgba(190,18,60,.22);
    font-size: .53rem;
}

.jli-topbar .user-btn {
    min-height: 40px !important;
    padding: 3px 8px 3px 5px !important;
    gap: 7px !important;
    border: 1px solid #dde6eb !important;
    border-radius: 13px !important;
    background: rgba(255,255,255,.94) !important;
    box-shadow: 0 4px 13px rgba(15,23,42,.045) !important;
}
.jli-topbar .user-btn:hover {
    border-color: #acd9d5 !important;
    background: #f7fffe !important;
    color: #0f766e !important;
    box-shadow: 0 8px 20px rgba(15,118,110,.08) !important;
}
.jli-topbar .user-avatar-shell { width:31px !important;height:31px !important; }
.jli-topbar .user-avatar-photo { width:31px !important;height:31px !important;border-radius:10px !important; }
.jli-topbar .user-btn b { color:#243244 !important;font-size:.69rem !important; }
.jli-topbar .user-btn small { color:#8795a5 !important;font-size:.58rem !important; }
.dark .jli-topbar .user-btn,.dark .jli-topbar .icon-btn { background:rgba(2,6,23,.42) !important;border-color:#334155 !important;color:#cbd5e1 !important; }
.dark .jli-topbar .user-btn b { color:#f1f5f9 !important; }

/* Dropdowns feel connected to the topbar without looking heavy. */
.jli-topbar .dropdown-panel {
    margin-top: 2px;
    border-color: #dfe7ec !important;
    border-radius: 14px !important;
    box-shadow: 0 22px 54px rgba(15,23,42,.15), 0 2px 8px rgba(15,23,42,.04) !important;
}

/* ---------- Sidebar ---------- */
.jli-sidebar {
    border-right-color: #dfe7ec !important;
    background: rgba(255,255,255,.975) !important;
    box-shadow: 12px 0 34px rgba(15,23,42,.045) !important;
}
.jli-brand { border-bottom-color:#e6edf1 !important; }
.jli-brand img { box-shadow:0 8px 18px rgba(15,118,110,.13) !important; }
.nav-parent { color:#526173 !important; }
.nav-parent:hover,.nav-parent.active {
    background: linear-gradient(90deg,#f0fdfa,#f6fbfd) !important;
    color:#0f766e !important;
    box-shadow: inset 3px 0 0 rgba(15,118,110,.55);
}
.nav-children a:hover,.nav-children a.active { background:#f0fdfa !important;color:#0f766e !important; }
.jli-sidebar.collapsed .nav-parent:hover i:first-child,
.jli-sidebar.collapsed .nav-parent.active i:first-child { box-shadow:0 8px 18px rgba(15,118,110,.11) !important; }

/* ---------- Page surfaces ---------- */
.jli-content { padding: .55rem !important; }
.jli-content :is(.section-shell,.display-card,.panel-card,.premium-card,.jli-card) {
    border-color: #e1e8ed !important;
    box-shadow: 0 10px 28px rgba(15,23,42,.045);
}
.jli-content :is(.section-banner,.display-header) {
    background: linear-gradient(110deg,#f0fdfa 0%,#ffffff 58%,#f4f9fc 100%) !important;
    border-color:#dfe8ec !important;
}

/* Form controls: consistent, quieter, clearer focus. */
.jli-content :is(input:not([type="checkbox"]):not([type="radio"]),select,textarea) {
    border-color: #d8e2e8;
}
.jli-content :is(input:not([type="checkbox"]):not([type="radio"]),select,textarea):focus {
    border-color: #5bb4ad !important;
    box-shadow: 0 0 0 3px rgba(15,118,110,.10) !important;
    outline: none !important;
}

/* Common primary actions stay calm, with reduced glare. */
.jli-calm-primary,
.btn-primary,
.jli-primary-btn,
.hero-primary-action,
:is(button,a).bg-blue-500,
:is(button,a).bg-blue-600,
:is(button,a).bg-blue-700,
:is(button,a).bg-sky-500,
:is(button,a).bg-sky-600,
:is(button,a).bg-sky-700,
:is(button,a).bg-cyan-500,
:is(button,a).bg-cyan-600,
:is(button,a).bg-cyan-700,
:is(button,a).bg-indigo-500,
:is(button,a).bg-indigo-600,
:is(button,a).bg-indigo-700,
:is(button,a).bg-purple-500,
:is(button,a).bg-purple-600,
:is(button,a).bg-purple-700,
:is(button,a).bg-violet-500,
:is(button,a).bg-violet-600,
:is(button,a).bg-violet-700 {
    background-color:#0f766e !important;
    background-image:linear-gradient(135deg,#0f766e 0%,#0e7490 58%,#0369a1 100%) !important;
    border-color:rgba(15,118,110,.24) !important;
    box-shadow:0 6px 14px rgba(15,118,110,.14),inset 0 1px 0 rgba(255,255,255,.15) !important;
}

/* Table polish without changing page structure. */
.jli-content table { border-color:#e4ebef; }
.jli-content thead th { color:#536273; }
.jli-content tbody tr { transition:background-color .13s ease, box-shadow .13s ease; }
.jli-content tbody tr:hover { background-color:rgba(240,253,250,.52); }

/* More refined scrollbars on dense admin pages. */
.jli-nav,
.dropdown-panel,
.jli-content,
[class*="overflow-y-auto"],
[class*="overflow-auto"] {
    scrollbar-width: thin;
    scrollbar-color: #c7d6dc transparent;
}
.jli-nav::-webkit-scrollbar,
.dropdown-panel::-webkit-scrollbar,
.jli-content::-webkit-scrollbar { width:7px;height:7px; }
.jli-nav::-webkit-scrollbar-thumb,
.dropdown-panel::-webkit-scrollbar-thumb,
.jli-content::-webkit-scrollbar-thumb { background:#c7d6dc;border-radius:999px;border:2px solid transparent;background-clip:padding-box; }

/* Footer stays visually quiet so the work area remains dominant. */
.jli-app-footer {
    border-top-color:#e4ebef !important;
    background:rgba(250,252,253,.94) !important;
    box-shadow:0 -5px 18px rgba(15,23,42,.025) !important;
}
.footer-security span { background:#fff !important;border-color:#e2e9ed !important; }
.footer-security i,.footer-copy a { color:#0f766e !important; }

/* Accessibility / motion hygiene. */
:focus-visible { outline-color:rgba(15,118,110,.5); }
@media (prefers-reduced-motion: reduce) {
    *,*::before,*::after {
        scroll-behavior:auto !important;
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;
        transition-duration:.01ms !important;
    }
}

@media (max-width: 1180px) {
    .clean-session-label { display:none; }
    .clean-session-id b { max-width:74px; }
    .clean-date { padding-inline:8px; }
}

@media (max-width: 900px) {
    .jli-topbar.jli-topbar-clean { min-height:56px !important;height:56px !important;padding-inline:8px !important; }
    .clean-date,.clean-session-id { display:none !important; }
    .clean-topbar-title h1 { max-width:42vw; }
    .jli-topbar .user-btn > span:not(.user-avatar-shell),
    .jli-topbar .user-btn > i { display:none !important; }
    .jli-topbar .user-btn { width:40px !important;min-width:40px !important;padding:4px !important;justify-content:center !important; }
}

@media (max-width: 560px) {
    .clean-topbar-title span { display:none; }
    .clean-topbar-title h1 { max-width:32vw;font-size:.75rem !important; }
    .clean-nav-toggle { width:36px !important;min-width:36px !important;height:36px !important; }
    .jli-topbar .icon-btn { width:36px !important;min-width:36px !important;height:36px !important; }
    .jli-content { padding:.35rem !important; }
}

/* ==========================================================
   JLI GLOBAL DATA TABLE + ACTION BUTTON READABILITY - AH8
   Loaded last. Applies consistently across old/new pages.
   ========================================================== */
:root {
    --jli-grid-head-1: #0b5f86;
    --jli-grid-head-2: #084b6d;
    --jli-grid-head-border: rgba(255,255,255,.24);
    --jli-grid-head-text: #ffffff;
    --jli-grid-body-text: #334155;
    --jli-grid-row-alt: #f8fbfd;
    --jli-grid-row-hover: #eef8fb;
    --jli-btn-primary-1: #0f766e;
    --jli-btn-primary-2: #0369a1;
    --jli-btn-success-1: #07855d;
    --jli-btn-success-2: #0f9f6e;
    --jli-btn-warning-1: #c97408;
    --jli-btn-warning-2: #e59b16;
    --jli-btn-danger-1: #b4233c;
    --jli-btn-danger-2: #cf3551;
    --jli-btn-info-1: #1565a8;
    --jli-btn-info-2: #2680c2;
}

/* ---------- ALL TABLE HEADERS: make column names clearly readable ---------- */
.jli-content .rz-data-grid,
.jli-content .rz-datatable,
.jli-content .rz-grid-table,
.jli-content table {
    --rz-grid-header-background-color: var(--jli-grid-head-1);
    --rz-grid-header-color: #fff;
}

/* Radzen current/legacy markup */
.jli-content .rz-grid-table thead th,
.jli-content .rz-datatable-thead > tr > th,
.jli-content .rz-datatable-thead th,
.jli-content .rz-data-grid thead th,
.jli-content .rz-grid-header th,
/* Generic Bootstrap/Tailwind/hand-written tables */
.jli-content table thead th,
.jli-content table thead td,
.jli-content .table thead th {
    background: linear-gradient(180deg, var(--jli-grid-head-1) 0%, var(--jli-grid-head-2) 100%) !important;
    color: var(--jli-grid-head-text) !important;
    border-color: var(--jli-grid-head-border) !important;
    font-weight: 850 !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
    letter-spacing: .025em !important;
    text-transform: uppercase !important;
    text-shadow: 0 1px 1px rgba(0,0,0,.12) !important;
    opacity: 1 !important;
}

/* Header children sometimes carry their own gray text classes/colors. */
.jli-content .rz-grid-table thead th *,
.jli-content .rz-datatable-thead th *,
.jli-content .rz-data-grid thead th *,
.jli-content .rz-grid-header th *,
.jli-content table thead th *,
.jli-content .table thead th * {
    color: #fff !important;
    fill: #fff !important;
    opacity: 1 !important;
}

.jli-content .rz-grid-table thead th .rz-column-title,
.jli-content .rz-datatable-thead th .rz-column-title,
.jli-content .rz-sortable-column .rz-column-title,
.jli-content .rz-sortable-column-icon,
.jli-content .rz-sort-icon,
.jli-content .rz-column-title-content {
    color: #fff !important;
    font-weight: 850 !important;
    opacity: 1 !important;
}

/* Dense data stays readable without making rows visually heavy. */
.jli-content .rz-grid-table tbody td,
.jli-content .rz-datatable-data td,
.jli-content .rz-data-grid tbody td,
.jli-content table tbody td {
    color: var(--jli-grid-body-text) !important;
    border-color: #dfe7ec !important;
}
.jli-content .rz-grid-table tbody tr:nth-child(even) td,
.jli-content .rz-datatable-data tr:nth-child(even) td,
.jli-content table tbody tr:nth-child(even) td {
    background: var(--jli-grid-row-alt);
}
.jli-content .rz-grid-table tbody tr:hover td,
.jli-content .rz-datatable-data tr:hover td,
.jli-content table tbody tr:hover td {
    background: var(--jli-grid-row-hover) !important;
}

/* Frozen headers/cells must retain contrast. */
.jli-content thead .rz-frozen-cell,
.jli-content .rz-grid-table thead .rz-frozen-cell {
    background: linear-gradient(180deg, var(--jli-grid-head-1), var(--jli-grid-head-2)) !important;
    color: #fff !important;
}
.jli-content tbody .rz-frozen-cell { background:#fff; }
.jli-content tbody tr:nth-child(even) .rz-frozen-cell { background:var(--jli-grid-row-alt); }
.jli-content tbody tr:hover .rz-frozen-cell { background:var(--jli-grid-row-hover) !important; }

/* ---------- PREMIUM BUTTON SYSTEM ---------- */
.jli-content :is(button,.btn,.rz-button,a.btn) {
    font-weight: 800;
    transition: transform .16s ease, box-shadow .16s ease, filter .16s ease, border-color .16s ease !important;
}
.jli-content :is(button,.btn,.rz-button,a.btn):not(:disabled):hover {
    transform: translateY(-1px);
}
.jli-content :is(button,.btn,.rz-button,a.btn):not(:disabled):active {
    transform: translateY(0);
}

/* Primary / Save / Receive / Submit / Add */
.jli-content :is(.btn-primary,.rz-button-primary,.jli-primary-btn,.jli-calm-primary,.save-btn,.btn-save,.primary-btn,.salary-pay-submit,.disb-detail-footer-btn),
.jli-content button[data-permission-actiontype="SAVE"] {
    background: linear-gradient(135deg,var(--jli-btn-primary-1),var(--jli-btn-primary-2)) !important;
    border-color: #0b6f76 !important;
    color: #fff !important;
    box-shadow: 0 7px 17px rgba(15,118,110,.18) !important;
}

/* Success / Approve / Receive Payment */
.jli-content :is(.btn-success,.rz-button-success,.btn-success-action,.success-btn),
.jli-content button[data-permission-actiontype="APPROVE"] {
    background: linear-gradient(135deg,var(--jli-btn-success-1),var(--jli-btn-success-2)) !important;
    border-color: #087858 !important;
    color: #fff !important;
    box-shadow: 0 7px 17px rgba(7,133,93,.18) !important;
}

/* Information / View / Print */
.jli-content :is(.btn-info,.rz-button-info,.info-btn),
.jli-content button[data-permission-actiontype="PRINT"],
.jli-content button[data-permission-actiontype="VIEW"] {
    background: linear-gradient(135deg,var(--jli-btn-info-1),var(--jli-btn-info-2)) !important;
    border-color: #125d96 !important;
    color: #fff !important;
    box-shadow: 0 7px 16px rgba(21,101,168,.16) !important;
}

/* Warning / pending-type actions */
.jli-content :is(.btn-warning,.rz-button-warning,.warning-btn) {
    background: linear-gradient(135deg,var(--jli-btn-warning-1),var(--jli-btn-warning-2)) !important;
    border-color: #b96908 !important;
    color: #fff !important;
    box-shadow: 0 7px 16px rgba(201,116,8,.16) !important;
}

/* Danger / Delete / Cancel stays unmistakably semantic. */
.jli-content :is(.btn-danger,.rz-button-danger,.danger-btn,.action-icon-btn.danger),
.jli-content button[data-permission-actiontype="DELETE"],
.jli-content button[data-permission-actiontype="CANCEL"] {
    background: linear-gradient(135deg,var(--jli-btn-danger-1),var(--jli-btn-danger-2)) !important;
    border-color: #a61f36 !important;
    color: #fff !important;
    box-shadow: 0 7px 16px rgba(180,35,60,.16) !important;
}

/* Secondary/light actions: premium neutral rather than washed-out gray. */
.jli-content :is(.btn-light,.btn-secondary,.btn-outline-secondary,.rz-button-light,.rz-button-secondary):not(.danger) {
    background: linear-gradient(180deg,#ffffff,#f3f7f9) !important;
    border: 1px solid #cddbe2 !important;
    color: #334155 !important;
    box-shadow: 0 4px 11px rgba(15,23,42,.06) !important;
}
.jli-content :is(.btn-light,.btn-secondary,.btn-outline-secondary,.rz-button-light,.rz-button-secondary):not(.danger):not(:disabled):hover {
    border-color: #8fc7c2 !important;
    background: #f0fdfa !important;
    color: #0f766e !important;
    box-shadow: 0 7px 15px rgba(15,118,110,.10) !important;
}

/* Icon-only action buttons should still look intentional. */
.jli-content :is(.action-icon-btn,.icon-action-btn,.table-action-btn) {
    border-color:#cfdce3 !important;
    background:linear-gradient(180deg,#fff,#f5f8fa) !important;
    color:#0b6685 !important;
    box-shadow:0 3px 8px rgba(15,23,42,.055) !important;
}
.jli-content :is(.action-icon-btn,.icon-action-btn,.table-action-btn):not(.danger):not(:disabled):hover {
    background:#eaf8f7 !important;
    border-color:#87c7c1 !important;
    color:#0f766e !important;
}

/* Disabled state: clearly disabled but text stays readable. */
.jli-content :is(button,.btn,.rz-button):disabled,
.jli-content :is(button,.btn,.rz-button)[aria-disabled="true"] {
    opacity:.52 !important;
    filter:saturate(.55) !important;
    cursor:not-allowed !important;
    transform:none !important;
    box-shadow:none !important;
}

/* Dark theme table header keeps the same readable identity. */
.dark .jli-content .rz-grid-table thead th,
.dark .jli-content .rz-datatable-thead th,
.dark .jli-content table thead th {
    background: linear-gradient(180deg,#155e75,#164e63) !important;
    color:#fff !important;
}

/* AH6 Unicode/Bangla input compatibility */
input, textarea, select, .rz-inputtext, .rz-dropdown-label, .rz-textarea {
    font-family: Inter, "Hind Siliguri", "Noto Sans Bengali", "Noto Sans JP", system-ui, sans-serif !important;
    unicode-bidi: plaintext;
}