/* Jawwal panel theme — loaded after Filament's CSS (no build step). */

:root {
    --jw-radius: 14px;
    --jw-border: rgb(15 23 42 / .08);
    --jw-shadow: 0 1px 2px rgb(15 23 42 / .04), 0 4px 16px -6px rgb(15 23 42 / .08);
    --jw-bg: #f4f6f8;
}
.dark {
    --jw-border: rgb(255 255 255 / .07);
    --jw-shadow: 0 1px 2px rgb(0 0 0 / .3);
    --jw-bg: #0b1220;
}

html.fi, .fi-body { font-feature-settings: "kern"; letter-spacing: 0; }
.fi-body { background: var(--jw-bg); }

/* ---------- Brand ---------- */
.jw-brand { display: flex; align-items: center; gap: .65rem; color: var(--primary-600); }
.jw-brand-mark { display: inline-flex; filter: drop-shadow(0 4px 10px rgb(11 143 90 / .25)); }
.jw-brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.jw-brand-title { font-weight: 800; font-size: 1.05rem; color: rgb(15 23 42); }
.dark .jw-brand-title { color: #fff; }
.jw-brand-sub { font-size: .7rem; font-weight: 500; color: rgb(100 116 139); }
.fi-sidebar.fi-sidebar-collapsed .jw-brand-text { display: none; }

/* ---------- Sidebar ---------- */
.fi-sidebar { background: #fff; border-inline-end: 1px solid var(--jw-border); }
.dark .fi-sidebar { background: #0f172a; }
.fi-sidebar-header { border-bottom: 1px solid var(--jw-border); box-shadow: none !important; }
.fi-sidebar-group-label { font-size: .72rem; font-weight: 700; letter-spacing: .02em; color: rgb(100 116 139); }
.fi-sidebar-item-btn { border-radius: 10px; padding-block: .5rem; transition: background .15s ease; }
.fi-sidebar-item-btn:hover { background: rgb(11 143 90 / .06); }
.fi-sidebar-item.fi-active .fi-sidebar-item-btn {
    background: linear-gradient(90deg, rgb(11 143 90 / .14), rgb(11 143 90 / .06));
    box-shadow: inset -3px 0 0 var(--primary-600);
}
[dir="ltr"] .fi-sidebar-item.fi-active .fi-sidebar-item-btn { box-shadow: inset 3px 0 0 var(--primary-600); }
.fi-sidebar-item.fi-active .fi-sidebar-item-label { font-weight: 700; }

/* ---------- Topbar ---------- */
.fi-topbar nav, .fi-topbar { background: rgb(255 255 255 / .85); backdrop-filter: saturate(1.4) blur(10px); }
.dark .fi-topbar nav, .dark .fi-topbar { background: rgb(15 23 42 / .85); }
.fi-topbar nav { border-bottom: 1px solid var(--jw-border); box-shadow: none !important; }

/* ---------- Page header ---------- */
.fi-header-heading { font-weight: 800; letter-spacing: -.01em; }
.fi-header-subheading { color: rgb(100 116 139); }

/* ---------- Cards / sections / tables ---------- */
.fi-section, .fi-ta-ctn, .fi-wi-stats-overview-stat, .fi-wi-chart, .fi-in-repeatable-item, .fi-fo-repeater-item {
    border-radius: var(--jw-radius) !important;
    box-shadow: var(--jw-shadow) !important;
    border: 1px solid var(--jw-border);
    --tw-ring-shadow: 0 0 #0000 !important;
}
.fi-section-header-heading { font-weight: 700; }
.fi-ta-header-cell { background: rgb(248 250 252); font-weight: 700; font-size: .78rem; color: rgb(71 85 105); }
.dark .fi-ta-header-cell { background: rgb(255 255 255 / .03); color: rgb(148 163 184); }
.fi-ta-row:hover { background: rgb(11 143 90 / .035); }
.fi-ta-text-item-label { font-variant-numeric: tabular-nums; }

/* ---------- Stats ---------- */
.fi-wi-stats-overview-stat { position: relative; overflow: hidden; padding-block: 1.1rem !important; }
.fi-wi-stats-overview-stat::before {
    content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 4px; background: var(--primary-500); opacity: .85;
}
.fi-wi-stats-overview-stat-value { font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.fi-wi-stats-overview-stat-label { font-weight: 600; }

/* ---------- Inputs & buttons ---------- */
.fi-input-wrp { border-radius: 10px; }
.fi-btn { border-radius: 10px; font-weight: 700; }
.fi-badge { border-radius: 999px; font-weight: 700; }
.fi-modal-window { border-radius: 18px; }

/* ---------- Login (simple pages) ---------- */
.fi-simple-layout {
    background:
        radial-gradient(1200px 500px at 100% -10%, rgb(11 143 90 / .16), transparent 60%),
        radial-gradient(900px 500px at -10% 110%, rgb(14 116 144 / .14), transparent 60%),
        var(--jw-bg);
}
.fi-simple-main {
    border-radius: 20px !important;
    box-shadow: 0 20px 50px -20px rgb(15 23 42 / .25) !important;
    border: 1px solid var(--jw-border);
}
.fi-simple-header .jw-brand { justify-content: center; }
.fi-simple-header .jw-brand-mark svg { width: 44px; height: 44px; }
.fi-simple-header .jw-brand-title { font-size: 1.35rem; }
.jw-login-note { text-align: center; font-size: .8rem; color: rgb(100 116 139); margin-top: -.5rem; }

/* ---------- Footer ---------- */
.jw-footer { text-align: center; font-size: .75rem; color: rgb(148 163 184); padding: 1.25rem 0 .5rem; }

/* ======================================================================
   Skeleton screens
   ====================================================================== */
:root { --jw-sk-base: rgb(15 23 42 / .07); --jw-sk-shine: rgb(255 255 255 / .65); }
.dark { --jw-sk-base: rgb(255 255 255 / .06); --jw-sk-shine: rgb(255 255 255 / .07); }

@keyframes jw-shimmer { 0% { background-position: 150% 0; } 100% { background-position: -50% 0; } }

.jw-sk {
    background: linear-gradient(90deg, var(--jw-sk-base) 0%, var(--jw-sk-base) 35%, var(--jw-sk-shine) 50%, var(--jw-sk-base) 65%, var(--jw-sk-base) 100%);
    background-size: 300% 100%;
    animation: jw-shimmer 1.4s ease-in-out infinite;
    border-radius: 6px;
}
@media (prefers-reduced-motion: reduce) { .jw-sk { animation: none; } }

.jw-sk-line { height: 12px; }
.jw-sk-value { height: 28px; width: 55%; margin: 12px 0; border-radius: 8px; }
.jw-sk-btn { height: 36px; width: 120px; border-radius: 10px; }
.jw-sk-card {
    background: #fff; border: 1px solid var(--jw-border); border-radius: var(--jw-radius);
    box-shadow: var(--jw-shadow); padding: 1.1rem 1.25rem;
}
.dark .jw-sk-card { background: rgb(255 255 255 / .03); }
.jw-sk-stats { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.jw-sk-bars { display: flex; align-items: flex-end; gap: 8px; height: 220px; margin-top: 18px; }
.jw-sk-bar { flex: 1; border-radius: 6px 6px 2px 2px; }
.jw-sk-table-head { padding: 14px 18px; border-bottom: 1px solid var(--jw-border); }
.jw-sk-row { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 18px; padding: 15px 18px; border-bottom: 1px solid var(--jw-border); }
.jw-sk-row:last-child { border-bottom: 0; }

/* Full-page skeleton while navigating */
.fi-main { position: relative; }
.jw-sk-page {
    /* z-index stays below the sidebar (20/30), its overlay (30) and the topbar (30) */
    position: absolute; inset: 0; z-index: 1; padding: inherit;
    background: var(--jw-bg); animation: jw-fade .15s ease-out;
}
.jw-sk-page-head { display: flex; justify-content: space-between; align-items: center; margin: 8px 0 24px; }
@keyframes jw-fade { from { opacity: 0; } to { opacity: 1; } }

/* Tables: turn rows into skeleton bars while Livewire reloads them (search, filters, pagination) */
.fi-ta-content-loading .fi-ta-row { pointer-events: none; }
.fi-ta-content-loading .fi-ta-cell > * {
    color: transparent !important; position: relative;
}
.fi-ta-content-loading .fi-ta-cell > *::after {
    content: ""; position: absolute; inset: 30% 0; border-radius: 6px;
    background: linear-gradient(90deg, var(--jw-sk-base) 0%, var(--jw-sk-base) 35%, var(--jw-sk-shine) 50%, var(--jw-sk-base) 65%, var(--jw-sk-base) 100%);
    background-size: 300% 100%; animation: jw-shimmer 1.4s ease-in-out infinite;
}
.fi-ta-content-loading .fi-ta-cell img, .fi-ta-content-loading .fi-ta-cell svg, .fi-ta-content-loading .fi-badge { visibility: hidden; }
/* hide Filament's default spinner overlay, the skeleton replaces it */
.fi-ta-content-loading ~ .fi-ta-loading-indicator { display: none; }

/* Inline Heroicons used in custom views */
.jw-ico { width: 1.15em; height: 1.15em; display: inline-block; vertical-align: -0.2em; flex-shrink: 0; }
.jw-ico-lg { width: 3.25rem; height: 3.25rem; }
.jw-ico-ok { color: rgb(5 150 105); }
.jw-ico-no { color: rgb(220 38 38); }
.jw-ico-warn { color: rgb(217 119 6); }