/* =============================================================================
   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;
}

.fi-sidebar-item-button {
    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 {
    background-color: rgba(255, 255, 255, 0.06) !important;
}

.fi-sidebar-item.fi-active > .fi-sidebar-item-button,
.fi-sidebar-item-button.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;
}

.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: 1px solid var(--ent-border);
    border-radius: 0.75rem; /* 12px */
    padding: 0.75rem;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--ent-ink);
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

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

.ent-quick-action svg {
    width: 1.5rem;
    height: 1.5rem;
    flex-shrink: 0;
}

.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: 17.5rem;
    position: relative;
}

.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;
}