/* =============================================================================
   Entshaar panel theme — pixel-faithful implementation of the Figma design
   file XfUq6yEBeFIPqpJqK97NLN ("Entshaar", canvases 47:1326 + 47:2072).

   Design tokens (from the extracted specs):
   - Font: Cairo (self-hosted woff2 — the vhost CSP forbids external fonts)
   - Sidebar #141B34 (the file's "Dark" token), active item #3B82F6, radius 12
   - Content canvas #F8FAFC; cards white, 1px #E2E8F0 borders, NO shadows
   - Text: #0F172A primary / #64748B secondary
   - Status pills: amber #F59E0B on #FFFBEB, red #EF4444 on #FEF2F2,
     green #10B981 on #ECFDF5; blue chip #EFF6FF
   - Radii: cards 16-20, inputs 8, buttons 10 (submit 14), tabs 8, pills 6
   - Primary submit gradient: 123.2deg #2563EB 11.5% → #3B82F6 78% → #1E3A8A 119%

   Registered as a Filament asset (SupportServiceProvider) — published to
   public/ by `php artisan filament:assets`, which every deploy already runs.
   ========================================================================== */

@font-face {
    font-family: 'Cairo';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/fonts/cairo/cairo-400.woff2') format('woff2');
}

@font-face {
    font-family: 'Cairo';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/fonts/cairo/cairo-600.woff2') format('woff2');
}

@font-face {
    font-family: 'Cairo';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/fonts/cairo/cairo-700.woff2') format('woff2');
}

@font-face {
    font-family: 'Cairo';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url('/fonts/cairo/cairo-800.woff2') format('woff2');
}

:root {
    --ent-navy: #141B34;
    --ent-blue: #3B82F6;
    --ent-blue-dark: #2563EB;
    --ent-ink: #0F172A;
    --ent-muted: #64748B;
    --ent-border: #E2E8F0;
    --ent-canvas: #F8FAFC;
    --ent-chip-blue: #EFF6FF;
    --ent-amber: #F59E0B;
    --ent-amber-bg: #FFFBEB;
    --ent-red: #EF4444;
    --ent-red-bg: #FEF2F2;
    --ent-green: #10B981;
    --ent-green-bg: #ECFDF5;
    --ent-gradient: linear-gradient(123.2deg, #2563EB 11.48%, #3B82F6 78.06%, #1E3A8A 118.83%);
}

/* ── 1. Base ────────────────────────────────────────────────────────────── */

body {
    font-family: 'Cairo', ui-sans-serif, system-ui, sans-serif !important;
    background-color: var(--ent-canvas);
    color: var(--ent-ink);
}

.fi-main-ctn {
    background-color: var(--ent-canvas);
}

/* Full-width canvas with a consistent, responsive gutter so cards never
   touch the screen edges. The header band breaks out of this padding to
   stay full-bleed (see .ent-page-header). */
.fi-main {
    max-width: none !important;
    padding: 0 1.25rem 1.25rem 1.25rem !important;
}

@media (min-width: 768px) {
    .fi-main {
        padding: 0 1.5rem 1.5rem 1.5rem !important;
    }
}

@media (min-width: 1024px) {
    .fi-main {
        padding: 0 2rem 2rem 2rem !important;
    }
}

.fi-page > section {
    width: 100%;
    padding-top: 0 !important; /* header band touches the top of the page */
}

.fi-page > div {
    width: 100%;
}

/* ── 2. Sidebar (260px navy, right in RTL) ─────────────────────────────── */

.fi-sidebar {
    width: 16.25rem !important; /* 260px */
    background-color: var(--ent-navy) !important;
    border-inline-end: none !important;
    padding: 0 1rem;
    row-gap: 0;
}

.fi-sidebar-header {
    background-color: var(--ent-navy) !important;
    box-shadow: none !important;
    border: none;
    height: 5.5rem;
    padding: 1.5rem 0 0 0 !important;
}

.fi-sidebar-header > div {
    padding: 0;
}

/* Hide the desktop collapse button — the design sidebar is fixed */
.fi-sidebar-header .fi-icon-btn {
    display: none;
}

.fi-sidebar-nav {
    padding: 2rem 0 1.5rem 0 !important;
    gap: 0.5rem !important;
    /* leave room for the fixed bottom profile card */
    padding-bottom: 6.5rem !important;
}

/* Flat menu — no group labels, no group chevrons (design has a flat list) */
.fi-sidebar-group-label,
.fi-sidebar-group-collapse-button {
    display: none !important;
}

.fi-sidebar-group-items {
    gap: 0.5rem !important;
}

.fi-sidebar-nav-groups {
    gap: 0.5rem !important;
}

/* v5 renamed .fi-sidebar-item-button → .fi-sidebar-item-btn; target both so
   the navy sidebar styling holds across the upgrade. */
.fi-sidebar-item-button,
.fi-sidebar-item-btn {
    border-radius: 0.75rem !important; /* 12px */
    padding: 0.75rem !important;
    gap: 0.75rem !important;
}

.fi-sidebar-item-label {
    color: #FFFFFF !important;
    font-size: 0.875rem; /* 14px */
    font-weight: 500;
}

.fi-sidebar-item-icon {
    color: #FFFFFF !important;
    width: 1.5rem !important;
    height: 1.5rem !important;
    opacity: 0.92;
}

.fi-sidebar-item-button:hover,
.fi-sidebar-item-btn:hover {
    background-color: rgba(255, 255, 255, 0.06) !important;
}

.fi-sidebar-item.fi-active > .fi-sidebar-item-button,
.fi-sidebar-item-button.fi-active,
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn,
.fi-sidebar-item-btn.fi-active {
    background-color: var(--ent-blue) !important;
}

.fi-sidebar-item.fi-active .fi-sidebar-item-label {
    font-weight: 700;
}

.fi-sidebar-item.fi-active .fi-sidebar-item-icon {
    opacity: 1;
}

/* Badges on sidebar items (counts) — keep readable on navy */
.fi-sidebar-item-badge-ctn .fi-badge {
    background: rgba(255, 255, 255, 0.12) !important;
    color: #fff !important;
}

/* Brand row (custom blade: logo box + wordmark) */
.ent-brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
}

.ent-brand-logo {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.5rem;
    background: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}

.ent-brand-logo img {
    width: 2rem;
    height: 2rem;
    object-fit: contain;
}

.ent-brand-text {
    color: #FFFFFF;
    font-size: 1.125rem; /* 18px */
    font-weight: 800;
    white-space: nowrap;
}

/* Bottom profile card (SIDEBAR_FOOTER render hook) */
.ent-sidebar-profile {
    position: absolute;
    bottom: 1.5rem;
    inset-inline: 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.ent-sidebar-profile-avatar {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 9999px;
    background: var(--ent-blue);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    font-weight: 700;
    flex-shrink: 0;
}

.ent-sidebar-profile-name {
    color: #FFFFFF;
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1.4;
}

.ent-sidebar-profile-role {
    color: var(--ent-muted);
    font-size: 0.6875rem; /* 11px */
    line-height: 1.4;
}

/* ── 3. Header band (replaces the topbar on desktop) ───────────────────── */

@media (min-width: 1024px) {
    .fi-topbar {
        display: none !important;
    }
}

/* Mobile topbar (kept for the hamburger) — white, design border */
.fi-topbar > nav {
    background-color: #FFFFFF !important;
    border-bottom: 1px solid var(--ent-border);
    box-shadow: none !important;
}

.ent-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    height: 4.5rem; /* 72px */
    background: #FFFFFF;
    border-bottom: 1px solid var(--ent-border);
    padding-inline: 1.25rem;
    /* full-bleed horizontally; touch the top (the .fi-main top padding is 0) */
    margin: 0 -1.25rem 0 -1.25rem;
}

@media (min-width: 768px) {
    .ent-page-header {
        gap: 1.5rem;
        padding-inline: 2rem;
        margin: 0 -1.5rem 0 -1.5rem;
    }
}

@media (min-width: 1024px) {
    .ent-page-header {
        margin: 0 -2rem 0 -2rem;
    }
}

/* Compact header on phones: the title + user menu stay; the search hides
   and the gateway button collapses to its icon. */
@media (max-width: 767px) {
    .ent-page-header .fi-global-search {
        display: none;
    }

    .ent-gateway-btn span {
        display: none;
    }

    .ent-gateway-btn {
        padding: 0.5rem;
    }

    .ent-page-title {
        font-size: 1.125rem;
    }
}

.ent-page-header-start {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    min-width: 0;
}

.ent-page-title {
    font-size: 1.375rem; /* 22px */
    font-weight: 800;
    color: var(--ent-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0; /* let it truncate instead of forcing horizontal overflow */
}

.ent-page-header-end {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-shrink: 0;
}

.ent-header-divider {
    width: 1px;
    height: 1.25rem;
    background: var(--ent-border);
}

.ent-header-bell {
    position: relative;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.625rem;
    background: var(--ent-chip-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ent-ink);
}

.ent-header-bell svg {
    width: 1.5rem;
    height: 1.5rem;
}

.ent-header-bell-dot {
    position: absolute;
    top: 0.5rem;
    inset-inline-start: 0.5rem;
    width: 0.375rem;
    height: 0.375rem;
    border-radius: 9999px;
    background: var(--ent-red);
}

/* User menu inside the band: 36px round avatar + chevron */
.ent-page-header .fi-user-menu .fi-avatar {
    width: 2.25rem !important;
    height: 2.25rem !important;
}

.ent-header-chevron {
    width: 1.5rem;
    height: 1.5rem;
    color: var(--ent-ink);
}

/* Global search styled as the design's 260x40 field */
.ent-page-header .fi-global-search {
    width: 16.25rem;
}

.ent-page-header .fi-global-search-field .fi-input-wrp {
    border-radius: 0.625rem !important;
    background: #FFFFFF !important;
    box-shadow: none !important;
    --tw-ring-color: var(--ent-border) !important;
}

.ent-page-header .fi-global-search-field input {
    height: 2.375rem;
    font-size: 0.8125rem; /* 13px */
}

.ent-page-header .fi-global-search-field input::placeholder {
    color: var(--ent-muted);
}

/* Gateway shortcut in the header band */
.ent-gateway-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.875rem;
    border-radius: 0.625rem;
    border: 1px solid var(--ent-border);
    background: #FFFFFF;
    color: var(--ent-ink);
    font-size: 0.8125rem;
    font-weight: 700;
    white-space: nowrap;
    transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}

.ent-gateway-btn:hover {
    border-color: var(--ent-blue);
    color: var(--ent-blue);
    background: var(--ent-chip-blue);
}

.ent-gateway-btn svg {
    width: 1.125rem;
    height: 1.125rem;
}

/* Toolbar row under the band: tabs (start) + page actions (end) */
.ent-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.ent-toolbar-tabs {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* The header-action cluster (e.g. the "إضافة" CTA). Sits at the RTL start
   of the toolbar row — the visual top-right — and never stretches. */
.ent-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.ent-tab {
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--ent-muted);
    background: #FFFFFF;
    border: 1px solid var(--ent-border);
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.ent-tab:hover {
    color: var(--ent-ink);
}

.ent-tab.ent-tab-active {
    background: var(--ent-blue);
    border-color: var(--ent-blue);
    color: #FFFFFF;
}

.ent-tab .ent-tab-badge {
    margin-inline-start: 0.375rem;
    font-size: 0.6875rem;
    opacity: 0.85;
}

/* The default Filament tabs are re-rendered inside .ent-toolbar — hide the
   stock strip so tabs never appear twice. */
.fi-page .fi-tabs {
    display: none !important;
}

/* Default page header replaced by the band — hide leftovers (breadcrumbs) */
.fi-breadcrumbs {
    display: none !important;
}

/* ── 4. Cards / sections / widgets ─────────────────────────────────────── */

/* Filament draws card/input borders as ring box-shadows; the design wants
   flat 1px #E2E8F0 borders — swap the ring for a real border everywhere. */
.fi-section {
    border-radius: 1rem !important; /* 16px */
    box-shadow: none !important;
    border: 1px solid var(--ent-border);
    background: #FFFFFF;
}

.fi-section-header-heading {
    font-size: 1rem !important; /* 16px */
    font-weight: 800 !important;
    color: var(--ent-ink) !important;
}

.fi-section-header-description {
    color: var(--ent-muted) !important;
    font-size: 0.8125rem;
}

.fi-wi-stats-overview-stat {
    border-radius: 1rem !important;
    box-shadow: none !important;
    border: 1px solid var(--ent-border);
}

/* Widgets grid gap = design 24px (Filament default gap-6 already matches) */

/* ── 5. Tables ─────────────────────────────────────────────────────────── */

.fi-ta-ctn {
    border-radius: 1rem !important; /* 16px card */
    box-shadow: none !important;
    border: 1px solid var(--ent-border);
    background: #FFFFFF;
}

.fi-ta-header-ctn {
    border-color: var(--ent-border) !important;
}

.fi-ta-header-cell {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}

.fi-ta-header-cell,
.fi-ta-header-cell .fi-ta-header-cell-label {
    font-size: 0.8125rem !important; /* 13px */
    font-weight: 700 !important;
    color: var(--ent-muted) !important;
    background: transparent;
}

.fi-ta-table thead {
    background: transparent !important;
}

.fi-ta-row {
    border-color: var(--ent-border);
}

.fi-ta-row:hover {
    background: var(--ent-canvas) !important;
}

.fi-ta-cell {
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
}

.fi-ta-text {
    font-size: 0.8125rem !important; /* 13px */
    color: var(--ent-ink);
}

.fi-ta-text .fi-ta-text-item-label {
    font-size: 0.8125rem !important;
}

/* Secondary columns (descriptions, "muted" text) */
.fi-ta-text-item-description,
.fi-ta-cell .text-gray-500 {
    color: var(--ent-muted) !important;
}

/* Table toolbar (search / filters) sits inside the card */
.fi-ta-header-toolbar {
    border-color: var(--ent-border) !important;
}

.fi-ta-content {
    border-color: var(--ent-border) !important;
}

.fi-ta-empty-state-icon-ctn {
    background: var(--ent-canvas) !important;
}

/* Pagination */
.fi-pagination-item-button,
.fi-pagination-items {
    font-size: 0.8125rem;
}

/* ── 6. Badges → design pills ──────────────────────────────────────────── */

.fi-badge {
    border-radius: 0.375rem !important; /* 6px */
    padding: 0.25rem 0.75rem !important; /* 4px 12px */
    font-size: 0.75rem !important; /* 12px */
    font-weight: 700 !important;
    --tw-ring-shadow: none !important;
    box-shadow: none !important;
    border: none;
}

.fi-badge.fi-color-warning {
    background: var(--ent-amber-bg) !important;
    color: var(--ent-amber) !important;
}

.fi-badge.fi-color-danger {
    background: var(--ent-red-bg) !important;
    color: var(--ent-red) !important;
}

.fi-badge.fi-color-success {
    background: var(--ent-green-bg) !important;
    color: var(--ent-green) !important;
}

.fi-badge.fi-color-info,
.fi-badge.fi-color-primary {
    background: var(--ent-chip-blue) !important;
    color: var(--ent-blue) !important;
}

.fi-badge.fi-color-gray {
    background: #EEF2F6 !important;
    color: var(--ent-muted) !important;
}

/* ── 7. Buttons ────────────────────────────────────────────────────────── */

.fi-btn {
    border-radius: 0.625rem !important; /* 10px */
    font-weight: 700 !important;
    box-shadow: none !important;
}

.fi-btn-size-md {
    font-size: 0.875rem; /* 14px */
    padding: 0.625rem 1rem; /* 10px 16px */
}

.fi-btn.fi-color-primary {
    background: var(--ent-blue) !important;
}

.fi-btn.fi-color-primary:hover {
    background: var(--ent-blue-dark) !important;
}

/* Form submit buttons — the design's gradient primary (radius 14) */
.fi-form-actions .fi-btn.fi-color-primary,
.fi-modal-footer-actions .fi-btn.fi-color-primary {
    background-image: var(--ent-gradient) !important;
    border-radius: 0.875rem !important; /* 14px */
    padding: 0.75rem 1.5rem;
    font-size: 0.9375rem; /* 15px */
}

/* Secondary / cancel buttons */
.fi-btn.fi-color-gray {
    background: #FFFFFF !important;
    color: var(--ent-muted) !important;
    --tw-ring-color: var(--ent-border) !important;
    box-shadow: none !important;
}

.fi-btn.fi-color-gray:hover {
    color: var(--ent-ink) !important;
    background: var(--ent-canvas) !important;
}

.fi-icon-btn {
    border-radius: 0.625rem;
}

/* ── 8. Forms ──────────────────────────────────────────────────────────── */

.fi-fo-field-wrp-label .fi-fo-field-wrp-label-text,
.fi-fo-field-wrp-label label {
    font-size: 0.8125rem !important; /* 13px */
    font-weight: 600 !important;
    color: var(--ent-muted) !important;
}

.fi-input-wrp {
    border-radius: 0.5rem !important; /* 8px */
    box-shadow: none !important;
    border: 1px solid var(--ent-border);
    background: #FFFFFF;
}

.fi-input-wrp:focus-within {
    border-color: var(--ent-blue);
}

.fi-input {
    font-size: 0.875rem !important;
    color: var(--ent-ink) !important;
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
}

.fi-input::placeholder {
    color: var(--ent-muted) !important;
    font-size: 0.8125rem;
}

.fi-select-input {
    font-size: 0.875rem !important;
}

.fi-checkbox-input,
.fi-radio-input {
    border-color: var(--ent-border);
}

.fi-checkbox-input:checked,
.fi-radio-input:checked {
    background-color: var(--ent-blue) !important;
    border-color: var(--ent-blue) !important;
}

.fi-fo-file-upload .filepond--panel-root {
    border: 1px dashed var(--ent-border) !important;
    border-radius: 0.75rem !important;
    background: #FFFFFF;
}

.fi-fo-file-upload .filepond--drop-label {
    color: var(--ent-blue);
    font-size: 0.8125rem;
}

/* Form sections = design form cards (radius 20, padding 24) */
.fi-fo-section > .fi-section {
    border-radius: 1.25rem !important; /* 20px */
}

.fi-fo-section .fi-section-content {
    padding: 1.5rem;
}

/* ── 9. Dropdowns, modals, notifications ───────────────────────────────── */

.fi-dropdown-panel {
    border-radius: 0.75rem !important;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.10) !important;
    --tw-ring-color: var(--ent-border) !important;
}

.fi-dropdown-list-item {
    font-size: 0.8125rem;
    border-radius: 0.5rem;
}

.fi-modal-window {
    border-radius: 1.25rem !important;
}

.fi-modal-heading {
    font-weight: 800 !important;
    color: var(--ent-ink) !important;
}

.fi-no-notification {
    border-radius: 0.75rem !important;
    --tw-ring-color: var(--ent-border) !important;
}

/* ── 10. Login page ────────────────────────────────────────────────────── */

.fi-simple-layout {
    background: var(--ent-canvas);
}

.fi-simple-main {
    border-radius: 1.25rem !important;
    box-shadow: none !important;
    border: 1px solid var(--ent-border);
}

.fi-simple-main .fi-header-heading {
    font-size: 1.375rem;
    font-weight: 800;
    color: var(--ent-ink);
}

/* Brand on the login card renders on white — flip the wordmark color */
.fi-simple-header .ent-brand-text {
    color: var(--ent-ink);
}

.fi-simple-header .ent-brand-logo {
    border: 1px solid var(--ent-border);
}

/* ── 11. Entshaar dashboard components (widget blades) ─────────────────── */

.ent-kpi-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.25rem; /* 20px */
}

@media (max-width: 1023px) {
    .ent-kpi-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 639px) {
    .ent-kpi-row {
        grid-template-columns: 1fr;
    }
}

.ent-kpi-card {
    background: #FFFFFF;
    border: 1px solid var(--ent-border);
    border-radius: 1rem; /* 16px */
    padding: 1.25rem; /* 20px */
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.ent-kpi-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.ent-kpi-chip {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ent-kpi-chip svg {
    width: 1.5rem;
    height: 1.5rem;
}

.ent-kpi-label {
    flex: 1;
    min-width: 0;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--ent-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ent-kpi-value {
    font-size: 1.75rem; /* 28px */
    font-weight: 800;
    color: var(--ent-ink);
    line-height: 1.4;
}

.ent-chip-slate { background: #EEF2F6; color: var(--ent-ink); }
.ent-chip-green { background: var(--ent-green-bg); color: var(--ent-green); }
.ent-chip-blue { background: var(--ent-chip-blue); color: var(--ent-blue); }
.ent-chip-amber { background: #FEF3C7; color: var(--ent-amber); }
.ent-chip-red { background: var(--ent-red-bg); color: var(--ent-red); }

/* Middle grid: quick actions + activity (400px col) and the gauge card */
.ent-overview-grid {
    display: grid;
    grid-template-columns: 25rem minmax(0, 1fr); /* 400px | flex */
    gap: 1.5rem;
    align-items: stretch;
}

@media (max-width: 1023px) {
    .ent-overview-grid {
        grid-template-columns: 1fr;
    }
}

.ent-overview-side {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.ent-panel {
    background: #FFFFFF;
    border: 1px solid var(--ent-border);
    border-radius: 1.25rem; /* 20px */
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.ent-panel-title {
    font-size: 1rem;
    font-weight: 800;
    color: var(--ent-ink);
}

.ent-quick-action {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    border: none;
    border-radius: 0.625rem; /* 10px */
    padding: 0.8rem 1rem;
    font-size: 0.875rem;
    font-weight: 700;
    color: #FFFFFF;
    background: var(--ent-blue);
    box-shadow: 0 6px 16px -8px rgba(37, 99, 235, 0.55);
    transition: background-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.ent-quick-action:hover {
    background: var(--ent-blue-dark);
    transform: translateY(-1px);
    box-shadow: 0 10px 20px -8px rgba(37, 99, 235, 0.6);
}

.ent-quick-action svg {
    width: 1.4rem;
    height: 1.4rem;
    flex-shrink: 0;
    color: #FFFFFF;
}

.ent-activity-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.ent-activity-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 9999px;
    flex-shrink: 0;
}

.ent-activity-text {
    flex: 1;
    min-width: 0;
    font-size: 0.8125rem;
    color: var(--ent-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ent-activity-time {
    font-size: 0.75rem;
    color: var(--ent-muted);
    white-space: nowrap;
}

/* SLA gauge card */
.ent-gauge-card {
    justify-content: flex-start;
    padding: 1.5rem;
}

.ent-gauge-card .ent-panel-title {
    font-size: 1.125rem; /* 18px */
}

.ent-gauge-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 14rem;
    position: relative;
}

/* Quick operational read below the gauge (2×2 mini stat cards) */
.ent-insights {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    margin-top: 0.5rem;
}

.ent-insight {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem;
    border: 1px solid var(--ent-border);
    border-radius: 0.875rem;
    background: #FFFFFF;
}

.ent-insight-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.ent-insight-value {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--ent-ink);
    line-height: 1.2;
}

.ent-insight-label {
    font-size: 0.72rem;
    color: var(--ent-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 520px) {
    .ent-insights { grid-template-columns: 1fr; }
}

.ent-gauge {
    position: relative;
    width: 11.25rem;
    height: 11.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ent-gauge-center {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.125rem;
}

.ent-gauge-value {
    font-size: 2rem; /* 32px */
    font-weight: 800;
    color: var(--ent-ink);
    line-height: 1.3;
}

.ent-gauge-caption {
    font-size: 0.75rem;
    color: var(--ent-muted);
}

/* Attention feed (alerts-screen list design) */
.ent-feed {
    background: #FFFFFF;
    border: 1px solid var(--ent-border);
    border-radius: 1rem;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.ent-feed-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.ent-feed-title {
    font-size: 1.125rem;
    font-weight: 800;
    color: var(--ent-ink);
}

.ent-feed-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.ent-feed-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Notification row (Figma 47:2124): radius 12, bordered, 84px-ish */
.ent-feed-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    border: 1px solid var(--ent-border);
    border-radius: 0.75rem;
    background: #FFFFFF;
}

.ent-feed-item.ent-feed-item-unread {
    background: var(--ent-chip-blue);
}

.ent-feed-unread-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 9999px;
    background: var(--ent-blue);
    flex-shrink: 0;
}

.ent-feed-icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.5rem;
    background: #FFFFFF;
    border: 1px solid var(--ent-border);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ent-feed-icon svg {
    width: 1.5rem;
    height: 1.5rem;
}

.ent-feed-body {
    flex: 1;
    min-width: 0;
}

.ent-feed-item-title {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--ent-ink);
}

.ent-feed-item-desc {
    font-size: 0.75rem;
    color: var(--ent-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ent-feed-meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
}

.ent-feed-date {
    font-size: 0.75rem;
    color: var(--ent-muted);
    white-space: nowrap;
}

.ent-feed-empty {
    padding: 2rem 0;
    text-align: center;
    font-size: 0.875rem;
    color: var(--ent-muted);
}

/* Pills reused outside tables (feed statuses) */
.ent-pill {
    display: inline-flex;
    align-items: center;
    border-radius: 0.375rem;
    padding: 0.25rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 700;
    white-space: nowrap;
}

.ent-pill-amber { background: var(--ent-amber-bg); color: var(--ent-amber); }
.ent-pill-red { background: var(--ent-red-bg); color: var(--ent-red); }
.ent-pill-green { background: var(--ent-green-bg); color: var(--ent-green); }
.ent-pill-blue { background: var(--ent-chip-blue); color: var(--ent-blue); }
.ent-pill-gray { background: #EEF2F6; color: var(--ent-muted); }

/* ── 12. Responsive safety ─────────────────────────────────────────────── */
.fi-main-ctn,
.fi-main {
    min-width: 0;
    max-width: 100%;
}

/* Wide content (tables) keeps its own inner scroll; the page itself never
   scrolls sideways on phones/tablets. Left unscoped on desktop so sticky
   headers and popovers behave normally. */
@media (max-width: 1023px) {
    .fi-main {
        overflow-x: hidden;
    }
}

/* ── 13. Sidebar spacing + scrollbar (nav labels/icons must never clip) ──── */
.fi-sidebar-nav {
    scrollbar-width: none; /* hide the drawer scroll wheel */
}

.fi-sidebar-nav::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}

/* Filament gives nav groups/items a -mx-2, which pushes items past the
   sidebar's right padding and clips the icons in RTL. Neutralise it so items
   sit inside the 16px sidebar gutter. */
.fi-sidebar-nav-groups,
.fi-sidebar-group-items,
.fi-sidebar-nav-groups > li,
.fi-sidebar-group {
    margin-inline: 0 !important;
}

/* ── 14. Hide the page scroll wheel (RTL left gutter) ──────────────────── */
html {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

html::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}

/* ── 15. "الحقول" interactive guide ─────────────────────────────────────
   The scrubbable walkthrough that sits under the fields table. Uses the
   same tokens as the rest of the panel (navy #0C1634, blue #2A76F9,
   canvas #F8FAFC, 1px #E2E8F0 borders, no shadows).
   ---------------------------------------------------------------------- */
.ent-guide {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 1.5rem;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    color: #0f172a;
}

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

.ent-guide__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.ent-guide__title { font-size: 1.25rem; font-weight: 700; margin: 0 0 .35rem; }
.ent-guide__subtitle { margin: 0; color: #64748b; font-size: .875rem; line-height: 1.9; max-width: 62ch; }

.ent-guide__badge {
    background: #eff6ff; color: #2563eb; border: 1px solid #bfdbfe;
    border-radius: 6px; padding: .25rem .6rem; font-size: .75rem; font-weight: 600; white-space: nowrap;
}

/* ---- stage ---- */
.ent-guide__player { display: flex; flex-direction: column; gap: .75rem; }

.ent-stage {
    position: relative;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    overflow: hidden;
    min-height: 26rem;
}

.ent-stage__bar {
    display: flex; align-items: center; gap: .4rem;
    padding: .55rem .85rem; background: #0c1634; color: #cbd5e1;
}
.ent-dot { width: .6rem; height: .6rem; border-radius: 50%; display: inline-block; }
.ent-dot--r { background: #ef4444; } .ent-dot--y { background: #f59e0b; } .ent-dot--g { background: #10b981; }
.ent-stage__url {
    margin-inline-start: .75rem; font-size: .72rem; background: #1e293b;
    padding: .2rem .7rem; border-radius: 6px; flex: 1; text-align: center;
}

.ent-screen { padding: 1rem; display: flex; flex-direction: column; gap: .75rem; }

.ent-row {
    display: flex; align-items: center; gap: .75rem;
    background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; padding: .6rem .85rem; font-size: .8rem;
}
.ent-row--head { background: transparent; border: 0; justify-content: space-between; padding-inline: 0; font-weight: 700; }
.ent-row > span:first-child { flex: 1; }

.ent-tag { font-size: .68rem; background: #f1f5f9; color: #475569; border-radius: 6px; padding: .15rem .5rem; }
.ent-tag--lock { background: #fffbeb; color: #b45309; }
.ent-tag--new { background: #ecfdf5; color: #047857; }

.ent-btn {
    border-radius: 10px; padding: .45rem .95rem; font-size: .8rem; font-weight: 600;
    border: 1px solid #e2e8f0; background: #fff; color: #0f172a; transition: all .2s;
}
.ent-btn--primary { background: #2a76f9; border-color: #2a76f9; color: #fff; }
.ent-btn--primary.is-saved { background: #10b981; border-color: #10b981; }

.ent-fieldset { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: .85rem; }
.ent-fieldset__title { font-size: .8rem; font-weight: 700; color: #0c1634; margin-bottom: .7rem; }

.ent-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
.ent-field { display: flex; flex-direction: column; gap: .25rem; font-size: .72rem; color: #64748b; }
.ent-field--wide { grid-column: 1 / -1; }
.ent-field small { color: #94a3b8; font-size: .66rem; }
.ent-field .ent-req { color: #ef4444; font-style: normal; }

.ent-input {
    display: flex; align-items: center; gap: .2rem; min-height: 2.1rem;
    background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px;
    padding: .3rem .6rem; font-size: .78rem; color: #0f172a; transition: border-color .25s, background .25s;
}
.ent-field.is-filled .ent-input { background: #fff; border-color: #93c5fd; }
.ent-input--ltr { direction: ltr; justify-content: flex-end; }
.ent-input--select::after { content: '⌄'; margin-inline-start: auto; color: #94a3b8; }

.ent-caret { width: 1px; height: 1rem; background: #2a76f9; animation: ent-blink 1s steps(2) infinite; }
@keyframes ent-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

.ent-field--toggle { flex-direction: row; align-items: center; justify-content: space-between; }
.ent-toggle { width: 2.2rem; height: 1.2rem; border-radius: 999px; background: #e2e8f0; position: relative; transition: background .25s; }
.ent-toggle i { position: absolute; inset-block: 2px; inset-inline-start: 2px; width: .95rem; border-radius: 50%; background: #fff; transition: inset-inline-start .25s; }
.ent-toggle.is-on { background: #2a76f9; }
.ent-toggle.is-on i { inset-inline-start: calc(100% - 1.1rem); }

.ent-options { display: flex; flex-direction: column; gap: .5rem; margin-top: .6rem; }
.ent-option {
    display: grid; grid-template-columns: auto 1fr auto 1fr auto 1fr; gap: .4rem .5rem; align-items: center;
    border: 1px dashed #cbd5e1; border-radius: 10px; padding: .5rem .7rem; font-size: .72rem;
    opacity: .5; transition: opacity .3s, border-color .3s, background .3s;
}
.ent-option.is-filled { opacity: 1; border-style: solid; border-color: #93c5fd; background: #f8fbff; }
.ent-option__k { color: #94a3b8; }
.ent-option b { color: #0f172a; }
.ent-ltr { direction: ltr; }

.ent-formbar { display: flex; justify-content: flex-start; }

.ent-hintbox {
    margin-top: .7rem; background: #eff6ff; border: 1px solid #bfdbfe; color: #1e40af;
    border-radius: 10px; padding: .6rem .8rem; font-size: .75rem; line-height: 1.8;
}

/* ---- the fake mouse ---- */
.ent-cursor { position: absolute; top: 0; inset-inline-start: 0; pointer-events: none; z-index: 5; transition: transform .06s linear; }
.ent-cursor__ring {
    position: absolute; top: -.35rem; inset-inline-start: -.35rem;
    width: 1.9rem; height: 1.9rem; border-radius: 50%;
    border: 2px solid #2a76f9; opacity: 0; transform: scale(.4); transition: all .18s ease-out;
}
.ent-cursor.is-clicking .ent-cursor__ring { opacity: 1; transform: scale(1); }

/* ---- caption + transport ---- */
.ent-caption {
    margin: 0; min-height: 2.4rem; background: #0c1634; color: #f1f5f9;
    border-radius: 10px; padding: .6rem .9rem; font-size: .82rem; line-height: 1.8;
}

.ent-controls { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.ent-ctl {
    width: 2.1rem; height: 2.1rem; border-radius: 8px; border: 1px solid #e2e8f0;
    background: #fff; color: #0f172a; font-size: .8rem; line-height: 1; flex: none;
}
.ent-ctl--play { background: #2a76f9; border-color: #2a76f9; color: #fff; }
.ent-time { font-size: .72rem; color: #64748b; font-variant-numeric: tabular-nums; min-width: 2.4rem; text-align: center; }
.ent-seek { flex: 1; min-width: 8rem; accent-color: #2a76f9; }
.ent-speed { display: flex; align-items: center; gap: .35rem; font-size: .72rem; color: #64748b; }
.ent-speed select { border: 1px solid #e2e8f0; border-radius: 8px; padding: .2rem .45rem; font-size: .72rem; background: #fff; }

.ent-chapters { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: .35rem; }
.ent-chapters button {
    display: flex; align-items: center; gap: .5rem; width: 100%; text-align: start;
    border: 1px solid transparent; border-radius: 8px; padding: .35rem .5rem;
    font-size: .74rem; color: #475569; background: transparent;
}
.ent-chapters button:hover { background: #f8fafc; }
.ent-chapters button.is-active { background: #eff6ff; border-color: #bfdbfe; color: #1e40af; font-weight: 600; }
.ent-chapters__n { width: 1.3rem; height: 1.3rem; border-radius: 50%; background: #e2e8f0; color: #475569; font-size: .66rem; display: grid; place-items: center; flex: none; }
.ent-chapters button.is-active .ent-chapters__n { background: #2a76f9; color: #fff; }
.ent-chapters__t { margin-inline-start: auto; color: #94a3b8; font-variant-numeric: tabular-nums; }

/* ---- written reference ---- */
.ent-guide__section { border-top: 1px solid #e2e8f0; padding-top: 1.25rem; }
.ent-guide__section h3 { font-size: 1rem; font-weight: 700; margin: 0 0 .75rem; }
.ent-guide__group { font-size: .8rem; font-weight: 700; color: #2a76f9; margin: 1rem 0 .5rem; }
.ent-guide__note { color: #64748b; font-size: .8rem; margin: 0 0 .75rem; }

.ent-steps { margin: 0; padding-inline-start: 1.1rem; display: flex; flex-direction: column; gap: .5rem; font-size: .84rem; line-height: 1.9; color: #334155; }

.ent-tablewrap { overflow-x: auto; border: 1px solid #e2e8f0; border-radius: 12px; }
.ent-table { width: 100%; border-collapse: collapse; font-size: .78rem; min-width: 44rem; }
.ent-table th { background: #f8fafc; text-align: start; padding: .55rem .7rem; font-weight: 700; color: #0c1634; border-bottom: 1px solid #e2e8f0; white-space: nowrap; }
.ent-table td { padding: .55rem .7rem; border-bottom: 1px solid #f1f5f9; vertical-align: top; line-height: 1.8; }
.ent-table tr:last-child td { border-bottom: 0; }
.ent-table__sec { color: #94a3b8; white-space: nowrap; font-size: .72rem; }
.ent-table__ex { color: #1e40af; background: #f8fbff; }

.ent-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: .6rem; }
.ent-card { border: 1px solid #e2e8f0; border-radius: 12px; padding: .75rem; background: #fff; }
.ent-card header { display: flex; align-items: center; gap: .45rem; margin-bottom: .4rem; font-size: .82rem; }
.ent-card__icon { width: 1.1rem; height: 1.1rem; color: #2a76f9; flex: none; }
.ent-card p { margin: 0; font-size: .75rem; line-height: 1.8; color: #475569; }
.ent-card__ex { margin-top: .4rem !important; color: #1e40af !important; background: #f8fbff; border-radius: 8px; padding: .35rem .5rem; }

.ent-guide__section--tips dl { margin: 0; display: flex; flex-direction: column; gap: .7rem; }
.ent-guide__section--tips dt { font-weight: 700; font-size: .82rem; color: #0c1634; }
.ent-guide__section--tips dd { margin: .2rem 0 0; font-size: .78rem; line-height: 1.9; color: #475569; }

@media (max-width: 48rem) {
    .ent-grid { grid-template-columns: 1fr; }
    .ent-option { grid-template-columns: auto 1fr; }
    .ent-stage { min-height: 32rem; }
}

@media (prefers-reduced-motion: reduce) {
    .ent-cursor, .ent-toggle, .ent-toggle i, .ent-input { transition: none; }
    .ent-caret { animation: none; }
}