/* ═══════════════════════════════════════════ Digital Corner RE — Refined Minimal Sidebar ═══════════════════════════════════════════ */ /* Define .sr-only globally — Filament's CSS build purges unused utilities, so screen-reader-only labels (e.g. the bulk-select "تحديد كافة العناصر…" text) were rendering as visible text. This hides them visually everywhere while keeping them available to screen readers. */ .sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } /* Info-cards (HTML infolist entries) must span the FULL section width. Filament wraps a text entry's value in `.fi-in-text-item.inline-flex`, which shrink-wraps to its content — so the cards clustered to one side with empty space beside them. Force the entry wrapper AND every intermediate ancestor of the cards to block / full width, so the flex cards stretch across the whole section regardless of how deep Filament nests the value. */ /* `.fi-in-text` is the full-width root; below it Filament nests several shrink-wrapping wrappers (flex / max-w-max / inline-flex). Force every ANCESTOR of the cards to block / full width — but NOT the .dc-info-cards row itself, which must keep display:flex so the cards sit side by side. */ .fi-in-text:has(.dc-info-cards) *:has(.dc-info-cards) { display: block !important; width: 100% !important; max-width: none !important; flex: 1 1 100% !important; } /* the cards row: full width but keep its flex (side-by-side) layout */ .dc-info-cards { width: 100% !important; max-width: none !important; } /* phones: the desktop per-row count (4–5) is too cramped → 2 per row */ @media (max-width: 640px) { .dc-info-cards > .dc-stat-card { flex: 1 1 calc(50% - 5px) !important; } } /* Expenses widget metric grids: responsive like the Contracts cards (3 per row → 2 on tablets/phones → 1 on very small screens). */ @media (max-width: 760px) { .efc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } @media (max-width: 420px) { .efc-grid { grid-template-columns: 1fr !important; } } /* ═══════════════════════════════════════════ Dashboard Stat Cards ═══════════════════════════════════════════ */ /* Unified stat card — themed background + coloured TOP accent (matches the Contracts stat cards). Uses the global --db-* tokens so dark mode is reliable. */ .dc-stat-card { border-radius: 14px; padding: 16px; display: flex; align-items: center; gap: 14px; background: var(--db-card, #fff); border: 1px solid var(--db-border2, #eef0f3); box-shadow: var(--db-shadow, 0 1px 4px rgba(0,0,0,.06)); transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease; } /* Interactive feedback — every card deep-links to its filtered list */ .dc-stat-card:hover { box-shadow: 0 6px 18px rgba(0,0,0,.10); border-color: var(--db-border, rgba(0,0,0,.12)); } .dark .dc-stat-card:hover { box-shadow: 0 6px 20px rgba(0,0,0,.45); } @media (prefers-reduced-motion: no-preference) { .dc-stat-card:hover { transform: translateY(-3px); } } .dc-stat-icon { width: 44px; height: 44px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .dc-stat-label { font-size: 11px; color: var(--db-muted, #9ca3af); margin-bottom: 2px; } .dc-stat-value { font-size: 28px; font-weight: 800; line-height: 1; color: var(--db-text, #0f172a); font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; } /* Currency values are wider than plain counts — size them down so they never overflow the card, while staying aligned via tabular figures. */ .dc-stat-value--money { font-size: 19px; letter-spacing: -.3px; } @media (max-width: 480px) { .dc-stat-value--money { font-size: 17px; } } .dc-stat-sub { font-size: 11px; color: var(--db-muted, #6b7280); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Top accent bar per severity */ .dc-stat-overdue { border-top: 3px solid #ef4444; } .dc-stat-due { border-top: 3px solid #f59e0b; } .dc-stat-warning { border-top: 3px solid #eab308; } .dc-stat-collected { border-top: 3px solid #22c55e; } .dc-stat-postponed { border-top: 3px solid #8b5cf6; } .dc-stat-pending { border-top: 3px solid #3b82f6; } .dc-stat-remaining { border-top: 3px solid #0ea5e9; } /* ═══════════════════════════════════════════════════════════ Shared dashboard / reports design system (.dc-themed) Reliable CSS-driven dark mode (no JS). Wrap a page in class="dc-themed" then use the --db-* tokens + .dc-* helpers. ═══════════════════════════════════════════════════════════ */ /* Tokens are defined GLOBALLY (:root + html.dark) so every stat card / page in the panel gets the same palette — not only pages wrapped in .dc-themed. */ :root, .dc-themed { --db-card:#fff; --db-pill:#f3f4f6; --db-border:rgba(0,0,0,.06); --db-border2:#eef0f3; --db-shadow:0 1px 4px rgba(0,0,0,.06); --db-text:#0f172a; --db-text2:#374151; --db-muted:#64748b; --db-neutral:#475569; --db-warning:#b45309; --db-hover:#f8fafc; --db-brand:#6366f1; --db-red:#dc2626; --db-amber:#d97706; --db-green:#16a34a; --db-sky:#0ea5e9; --db-bg:#f9fafb; } html.dark, .dark .dc-themed { --db-card:#131620; --db-pill:#1a1d27; --db-border:#1e2130; --db-border2:#252836; --db-shadow:0 1px 6px rgba(0,0,0,.35); --db-text:#f1f5f9; --db-text2:#cbd5e1; --db-muted:#94a3b8; --db-neutral:#64748b; --db-warning:#fbbf24; --db-hover:#1e2233; --db-bg:#1a1d27; } .dc-themed .dc-card { background:var(--db-card); border-radius:14px; padding:16px; box-shadow:var(--db-shadow); } .dc-themed .dc-stat { border-top:4px solid var(--db-neutral); } .dc-themed .dc-grid { display:grid; gap:16px; } .dc-themed .dc-g3 { grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); } .dc-themed .dc-g4 { grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); } .dc-themed .dc-g5 { grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); } .dc-themed .dc-label { font-size:11px; color:var(--db-muted); font-weight:500; } .dc-themed .dc-num { font-weight:700; color:var(--db-text); line-height:1.1; letter-spacing:-.5px; } .dc-themed .dc-title { font-size:14px; font-weight:600; color:var(--db-text); margin:0; } .dc-themed .dc-muted { color:var(--db-muted); } .dc-themed .dc-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; } .dc-themed table th { color:var(--db-muted); } .dc-themed table td { color:var(--db-text2); } /* Generic: map Tailwind gray utilities + light row tints inside a themed page onto the tokens, so custom HTML tables read correctly in dark mode. */ .dc-themed .bg-gray-50, .dc-themed thead.bg-gray-50, .dc-themed tr.bg-gray-50 { background:var(--db-pill) !important; } .dc-themed .text-gray-900, .dc-themed .text-gray-800, .dc-themed .text-gray-700 { color:var(--db-text) !important; } .dc-themed .text-gray-600, .dc-themed .text-gray-500 { color:var(--db-text2) !important; } .dc-themed .text-gray-400, .dc-themed .text-gray-300 { color:var(--db-muted) !important; } .dc-themed .border-b, .dc-themed table tr { border-color:var(--db-border2) !important; } .dc-themed tbody tr:hover { background:var(--db-hover) !important; } .dc-themed tr.bg-red-50 { background:color-mix(in srgb,#ef4444 9%,var(--db-card)) !important; } .dc-themed tr.bg-orange-50 { background:color-mix(in srgb,#f97316 9%,var(--db-card)) !important; } .dc-themed tr.bg-yellow-50 { background:color-mix(in srgb,#eab308 9%,var(--db-card)) !important; } .dc-themed tr.bg-green-50 { background:color-mix(in srgb,#22c55e 9%,var(--db-card)) !important; } /* Filter bar */ .dc-filter-bar { display: inline-flex; align-items: center; gap: 8px; background: rgba(0,0,0,.03); border: 1px solid rgba(0,0,0,.07); border-radius: 12px; padding: 8px 12px; flex-wrap: wrap; } .dark .dc-filter-bar { background: rgba(255,255,255,.04) !important; border-color: rgba(255,255,255,.08) !important; } .dc-filter-label { font-size: 11px; color: #9ca3af; font-weight: 600; margin-left: 4px; white-space: nowrap; } .dc-filter-btn { display: inline-flex; align-items: center; gap: 7px; border-radius: 8px; font-size: 12px; cursor: pointer; outline: none; transition: all .15s; white-space: nowrap; } .dc-filter-btn:not(.dc-filter-active) { color: #6b7280; } .dark .dc-filter-btn:not(.dc-filter-active) { color: #9ca3af !important; } @media (prefers-reduced-motion: no-preference) { .dc-filter-btn:hover { transform: translateY(-1px); } } .dc-filter-btn:hover { box-shadow: 0 2px 6px rgba(0,0,0,.08); } .dc-filter-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 18px; padding: 0 5px; border-radius: 999px; font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; } /* ── Hide logo from sidebar ──────────────── */ .fi-sidebar-header { display: none !important; } /* ── Sidebar container ───────────────────── */ .fi-sidebar { background: #FFFFFF !important; border-right: 1px solid #EEEFF1 !important; border-left: none !important; box-shadow: none !important; } /* ── Nav scroll area ─────────────────────── */ .fi-sidebar-nav { padding: 4px 8px 12px !important; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #EEEFF1 transparent; } .fi-sidebar-nav::-webkit-scrollbar { width: 3px; } .fi-sidebar-nav::-webkit-scrollbar-thumb { background: #EEEFF1; border-radius: 4px; } /* ── Navigation Groups ───────────────────── */ .fi-sidebar-group { margin-bottom: 0 !important; padding: 0 !important; } /* Remove all internal spacing from group wrappers */ .fi-sidebar-group > div, .fi-sidebar-group > ul, .fi-sidebar-group-items, .fi-sidebar-group [x-show], .fi-sidebar-group [x-collapse], .fi-sidebar-nav > ul, .fi-sidebar-nav > div, .fi-sidebar-nav ul, .fi-sidebar-nav > * > li { margin: 0 !important; padding: 0 !important; gap: 0 !important; } /* Group label */ .fi-sidebar-group-label { display: flex !important; align-items: center !important; gap: 6px !important; padding: 4px 8px !important; margin: 2px 0 1px !important; font-size: 11px !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: .1em !important; color: #374151 !important; background: #F3F4F6 !important; border: none !important; border-radius: 5px !important; cursor: pointer; transition: background .15s, color .15s; user-select: none; } .fi-sidebar-group-label:hover { color: #111827 !important; background: #E5E7EB !important; } .fi-sidebar-group-label svg { width: 12px !important; height: 12px !important; flex-shrink: 0; opacity: .5; stroke-width: 1.4 !important; } /* ── Dashboard item — sidebar header ─────── */ .fi-sidebar-nav > ul > li:first-child .fi-sidebar-item-button, .fi-sidebar-nav > div > ul > li:first-child .fi-sidebar-item-button { font-size: 17px !important; font-weight: 700 !important; color: #111827 !important; padding: 14px 12px 12px !important; margin-bottom: 8px !important; border-bottom: 1px solid #EEEFF1 !important; border-radius: 0 !important; letter-spacing: -.02em !important; background: transparent !important; cursor: default; } .fi-sidebar-nav > ul > li:first-child .fi-sidebar-item-button:hover, .fi-sidebar-nav > div > ul > li:first-child .fi-sidebar-item-button:hover { background: transparent !important; color: #111827 !important; } .fi-sidebar-nav > ul > li:first-child .fi-sidebar-item-button svg, .fi-sidebar-nav > div > ul > li:first-child .fi-sidebar-item-button svg { width: 20px !important; height: 20px !important; opacity: 1 !important; color: #111827 !important; } /* ── Navigation Items ────────────────────── */ .fi-sidebar-item { margin: 0 !important; } .fi-sidebar-item-button { display: flex !important; align-items: center !important; gap: 8px !important; width: 100% !important; padding: 6px 10px !important; border-radius: 6px !important; font-size: 13px !important; font-weight: 400 !important; color: #6B7280 !important; text-decoration: none !important; transition: all .15s !important; position: relative; border: none !important; background: transparent !important; letter-spacing: .01em; } .fi-sidebar-item-button:hover { background: #F3F4F6 !important; color: #111827 !important; border: none !important; box-shadow: none !important; } /* ── Parent items that contain a SUB-MENU (e.g. التقارير المالية، تقارير إدارة الأملاك) ── Coloured distinctly (indigo) from single/leaf items so it's obvious at a glance which entries expand into a sub-list. Marker class added in the sidebar item override (resources/views/vendor/filament-panels/components/sidebar/item.blade.php). */ .fi-sidebar-item-has-children > .fi-sidebar-item-button { color: #4f46e5 !important; /* indigo-600 */ font-weight: 700 !important; background: rgba(99, 102, 241, .07) !important; } .fi-sidebar-item-has-children > .fi-sidebar-item-button:hover { background: rgba(99, 102, 241, .14) !important; color: #4338ca !important; /* indigo-700 */ } .fi-sidebar-item-has-children > .fi-sidebar-item-button .fi-sidebar-item-label { color: inherit !important; font-weight: 700 !important; } /* ▾ chevron after the label signals an expandable sub-menu */ .fi-sidebar-item-has-children > .fi-sidebar-item-button .fi-sidebar-item-label::after { content: '▾'; margin-inline-start: 6px; font-size: 10px; color: #6366f1; opacity: .85; vertical-align: middle; } /* tint the grouped connector dot indigo too */ .fi-sidebar-item-has-children > .fi-sidebar-item-button .fi-sidebar-item-grouped-border > div:last-child { background: #6366f1 !important; height: .45rem !important; width: .45rem !important; } html.dark .fi-sidebar-item-has-children > .fi-sidebar-item-button { color: #a5b4fc !important; /* indigo-300 */ background: rgba(99, 102, 241, .15) !important; } html.dark .fi-sidebar-item-has-children > .fi-sidebar-item-button:hover { background: rgba(99, 102, 241, .24) !important; color: #c7d2fe !important; } /* ── Active item ─────────────────────────── */ .fi-sidebar-item-button.fi-active, .fi-sidebar-item-button[aria-current="page"], .fi-active .fi-sidebar-item-button { background: #F3F4F6 !important; color: #111827 !important; font-weight: 600 !important; border: none !important; box-shadow: none !important; } /* Left accent line on active */ .fi-sidebar-item-button.fi-active::before, .fi-active .fi-sidebar-item-button::before { content: ''; position: absolute; right: 0; top: 25%; bottom: 25%; width: 3px; background: #080808; border-radius: 2px 0 0 2px; } .fi-sidebar-item-button.fi-active::after, .fi-active .fi-sidebar-item-button::after { display: none !important; } /* ── Icons — badge style (colored bg + white icon) ── */ .fi-sidebar-item-button svg { width: 26px !important; height: 26px !important; flex-shrink: 0; transition: all .15s; stroke-width: 1.5 !important; padding: 5px !important; border-radius: 7px !important; } /* Dashboard icon — no badge */ .fi-sidebar-nav > ul > li:first-child .fi-sidebar-item-button svg, .fi-sidebar-nav > div > ul > li:first-child .fi-sidebar-item-button svg { background: none !important; box-shadow: none !important; padding: 0 !important; width: 20px !important; height: 20px !important; color: #111827 !important; opacity: 1 !important; } /* contracts — بنفسجي */ .fi-sidebar-group:nth-child(1) .fi-sidebar-item-button svg, .fi-sidebar-group:nth-child(2) .fi-sidebar-item-button svg { color: #fff !important; background: #6366f1 !important; box-shadow: 0 2px 5px rgba(99,102,241,.35) !important; } /* finance — أخضر */ .fi-sidebar-group:nth-child(3) .fi-sidebar-item-button svg { color: #fff !important; background: #059669 !important; box-shadow: 0 2px 5px rgba(5,150,105,.35) !important; } /* properties — أزرق */ .fi-sidebar-group:nth-child(4) .fi-sidebar-item-button svg { color: #fff !important; background: #2563eb !important; box-shadow: 0 2px 5px rgba(37,99,235,.35) !important; } /* clients — فيولت */ .fi-sidebar-group:nth-child(5) .fi-sidebar-item-button svg { color: #fff !important; background: #7c3aed !important; box-shadow: 0 2px 5px rgba(124,58,237,.35) !important; } /* maintenance — برتقالي */ .fi-sidebar-group:nth-child(6) .fi-sidebar-item-button svg { color: #fff !important; background: #d97706 !important; box-shadow: 0 2px 5px rgba(217,119,6,.35) !important; } /* reports — سماوي */ .fi-sidebar-group:nth-child(7) .fi-sidebar-item-button svg { color: #fff !important; background: #0891b2 !important; box-shadow: 0 2px 5px rgba(8,145,178,.35) !important; } /* marketing — وردي */ .fi-sidebar-group:nth-child(8) .fi-sidebar-item-button svg { color: #fff !important; background: #db2777 !important; box-shadow: 0 2px 5px rgba(219,39,119,.35) !important; } /* support — أحمر */ .fi-sidebar-group:nth-child(9) .fi-sidebar-item-button svg { color: #fff !important; background: #dc2626 !important; box-shadow: 0 2px 5px rgba(220,38,38,.35) !important; } /* content — تيل */ .fi-sidebar-group:nth-child(10) .fi-sidebar-item-button svg { color: #fff !important; background: #0d9488 !important; box-shadow: 0 2px 5px rgba(13,148,136,.35) !important; } /* settings — رمادي غامق */ .fi-sidebar-group:nth-child(11) .fi-sidebar-item-button svg, .fi-sidebar-group:nth-child(12) .fi-sidebar-item-button svg { color: #fff !important; background: #475569 !important; box-shadow: 0 2px 5px rgba(71,85,105,.35) !important; } /* Active item — slightly brighter badge */ .fi-sidebar-item-button.fi-active svg, .fi-active .fi-sidebar-item-button svg { filter: brightness(1.1) !important; opacity: 1 !important; } /* ── Badges ──────────────────────────────── */ .fi-sidebar-item-badge { margin-right: auto !important; margin-left: 0 !important; font-size: 10px !important; font-weight: 600 !important; padding: 1px 6px !important; border-radius: 999px !important; background: #A8202C !important; color: #ffffff !important; border: none !important; } /* ── Divider between groups ──────────────── */ .fi-sidebar-group + .fi-sidebar-group::before { display: none !important; } /* ── Collapse button ─────────────────────── */ .fi-sidebar-close-overlay-btn, .fi-sidebar-collapse-btn { color: #9CA3AF !important; } .fi-sidebar-collapse-btn:hover { color: #111827 !important; } /* ── Account widget at bottom ────────────── */ .fi-sidebar footer, .fi-sidebar .fi-account-widget { background: #FFFFFF !important; border-top: 1px solid #F3F4F6 !important; padding: 8px 10px !important; } /* ── Canvas (page background) ────────────── */ .fi-main { background: #F8F9FB !important; } /* ── Topbar ──────────────────────────────── */ .fi-topbar { background: #FFFFFF !important; border-bottom: 1px solid #EEEFF1 !important; box-shadow: none !important; } .fi-topbar nav { position: relative !important; } /* ── Quick Nav ──────────────────────────── */ .dc-quick-nav { display: flex; align-items: center; gap: 2px; } .dc-qn-item { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 5px 6px; border-radius: 8px; text-decoration: none; transition: background .15s; cursor: pointer; border: none; width: 72px; min-width: 72px; max-width: 72px; } .dc-qn-item:hover { background: rgba(0,0,0,.05); } .dc-qn-icon { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .dc-qn-label { font-size: 10px; font-weight: 500; color: #6b7280; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1; width: 100%; text-align: center; } .dc-qn-item:hover .dc-qn-label { color: #111827; } /* dark mode quick nav */ .dark .dc-qn-item:hover { background: rgba(255,255,255,.07) !important; } .dark .dc-qn-label { color: #6b7280 !important; } .dark .dc-qn-item:hover .dc-qn-label { color: #e5e7eb !important; } /* ── Brand link in topbar (house glyph + company name) ── */ .dc-brand-link { display: flex; align-items: center; gap: 10px; padding: 0 24px 0 20px; text-decoration: none; white-space: nowrap; border-left: 1px solid #EEEFF1; height: 100%; flex-shrink: 0; } .dc-brand-icon { width: 32px; height: 32px; border-radius: 8px; background: #080808; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } /* When a company logo is uploaded, the brand box becomes a clean white "plate" that hugs the logo's aspect ratio (square or wide) instead of the dark glyph square. The white background keeps any logo readable in both light & dark mode. */ .dc-brand-icon--logo { width: auto; min-width: 48px; height: 50px; max-width: 224px; background: #ffffff; border: 1px solid #EEEFF1; border-radius: 8px; padding: 3px 8px; overflow: hidden; } .dc-brand-logo-img { height: 100%; width: auto; max-width: 205px; object-fit: contain; display: block; } .dc-brand-name { font-size: 13px; font-weight: 700; color: #111827; letter-spacing: -.01em; line-height: 1.2; } .dc-brand-sub { font-size: 10px; font-weight: 400; color: #9CA3AF; letter-spacing: .04em; line-height: 1.2; } /* ── Company LOGO pinned & CENTRED at the top of the sidebar (above the menu) ── Lives at the start of the scrollable nav but stays fixed: it does NOT scroll away with the menu items. */ .fi-sidebar-nav { padding-top: 0 !important; } /* sit flush at the very top */ .dc-sidebar-brand { position: sticky; top: 0; z-index: 20; margin: 0 -8px 6px; /* span the full sidebar width (cancel nav side padding) */ height: 64px; /* = topbar height; aligns the logo with the house icon */ flex-shrink: 0; /* CRITICAL: the sidebar nav is a flex column whose overflowing content was SQUASHING this box (~35px) and lifting the logo up. Don't let it shrink. */ padding: 0 16px; background: #FFFFFF; border-bottom: 1px solid #EEEFF1; display: flex; align-items: center; /* vertically centre → same level as the topbar icon */ justify-content: center; /* centre the logo horizontally */ } .dc-sidebar-logo-link { display: flex; align-items: center; justify-content: center; max-width: 100%; text-decoration: none; } .dc-sidebar-brand .dc-brand-logo-img { height: auto; width: auto; max-height: 28px; /* smaller — sits in harmony with the page */ max-width: 100%; object-fit: contain; } /* Collapsed sidebar (desktop icon rail): shrink the logo to fit the narrow rail. */ .fi-sidebar:not(.fi-sidebar-open) .dc-sidebar-brand { padding-left: 6px; padding-right: 6px; } .fi-sidebar:not(.fi-sidebar-open) .dc-sidebar-brand .dc-brand-logo-img { max-height: 24px; } /* ═══════════════════════════════════════════ DARK MODE ═══════════════════════════════════════════ */ /* ── Sidebar ── */ .dark .fi-sidebar { background: #0f1117 !important; border-right: 1px solid #1e2130 !important; } /* ── Nav scroll ── */ .dark .fi-sidebar-nav { scrollbar-color: #2a2d3a transparent; } .dark .fi-sidebar-nav::-webkit-scrollbar-thumb { background: #2a2d3a; } /* ── Group label ── */ .dark .fi-sidebar-group-label { color: #9ca3af !important; background: #1a1d27 !important; } .dark .fi-sidebar-group-label:hover { color: #e5e7eb !important; background: #252836 !important; } /* ── Dashboard item ── */ .dark .fi-sidebar-nav > ul > li:first-child .fi-sidebar-item-button, .dark .fi-sidebar-nav > div > ul > li:first-child .fi-sidebar-item-button { color: #f9fafb !important; border-bottom-color: #1e2130 !important; } .dark .fi-sidebar-nav > ul > li:first-child .fi-sidebar-item-button:hover, .dark .fi-sidebar-nav > div > ul > li:first-child .fi-sidebar-item-button:hover { color: #f9fafb !important; } .dark .fi-sidebar-nav > ul > li:first-child .fi-sidebar-item-button svg, .dark .fi-sidebar-nav > div > ul > li:first-child .fi-sidebar-item-button svg { color: #f9fafb !important; } /* ── Nav items ── */ .dark .fi-sidebar-item-button { color: #9ca3af !important; } .dark .fi-sidebar-item-button:hover { background: #1a1d27 !important; color: #f9fafb !important; } /* ── Active item ── */ .dark .fi-sidebar-item-button.fi-active, .dark .fi-sidebar-item-button[aria-current="page"], .dark .fi-active .fi-sidebar-item-button { background: #1a1d27 !important; color: #f9fafb !important; } .dark .fi-sidebar-item-button.fi-active::before, .dark .fi-active .fi-sidebar-item-button::before { background: #6366f1 !important; } /* ── Account widget ── */ .dark .fi-sidebar footer, .dark .fi-sidebar .fi-account-widget { background: #0f1117 !important; border-top-color: #1e2130 !important; } /* ── Collapse btn ── */ .dark .fi-sidebar-close-overlay-btn, .dark .fi-sidebar-collapse-btn { color: #4b5563 !important; } .dark .fi-sidebar-collapse-btn:hover { color: #e5e7eb !important; } /* ── Topbar ── */ .dark .fi-topbar { background: #0f1117 !important; border-bottom-color: #1e2130 !important; } /* ── Brand link dark mode ── */ .dark .dc-brand-link { border-left-color: #1e2130 !important; } .dark .dc-brand-name { color: #f1f5f9 !important; } .dark .dc-brand-sub { color: #6b7280 !important; } /* Keep the logo plate white in dark mode (so light/coloured logos stay visible), just soften the border to match the dark topbar. */ .dark .dc-brand-icon--logo { border-color: #2a2e3f !important; } /* Pinned sidebar brand: match the dark sidebar so it blends while pinned. */ .dark .dc-sidebar-brand { background: #0f1117 !important; border-bottom-color: #1e2130 !important; } /* Dark mode: render the company logo as a solid white silhouette so it stays legible against the dark sidebar (اللوجو يتحوّل كله لأبيض في الوضع الليلي). brightness(0) flattens every pixel to black, invert(1) flips it to pure white, while the image's transparency (the logo shape) is preserved. */ .dark .dc-sidebar-brand .dc-brand-logo-img { filter: brightness(0) invert(1); } /* ── Page background ── */ .dark .fi-main { background: #0d0f18 !important; } /* ── Force dark on ALL white backgrounds ── */ .dark .bg-white { background-color: #131620 !important; } .dark .dark\:bg-gray-900 { background-color: #131620 !important; } .dark .dark\:bg-gray-800 { background-color: #1a1d27 !important; } /* ── Ring/border colors ── */ .dark .ring-gray-950\/5, .dark .dark\:ring-white\/10 { --tw-ring-color: rgba(255,255,255,0.06) !important; } /* ── Text colors in dark ── */ .dark .dark\:text-white { color: #f1f5f9 !important; } .dark .dark\:text-gray-400 { color: #9ca3af !important; } .dark .text-gray-950 { color: #f1f5f9 !important; } .dark .text-gray-500 { color: #9ca3af !important; } /* ── Page header / breadcrumbs ── */ .dark .fi-header, .dark .fi-simple-header { background: transparent !important; } .dark .fi-breadcrumbs ol li a, .dark .fi-breadcrumbs ol li span { color: #6b7280 !important; } .dark .fi-breadcrumbs ol li:last-child span { color: #d1d5db !important; } /* ── Sections / Cards ── */ .dark .fi-section { background: #131620 !important; border-color: #1e2130 !important; } .dark .fi-section-header { background: #131620 !important; border-bottom-color: #1e2130 !important; } .dark .fi-section-content { background: #131620 !important; } /* ── Widgets ── */ .dark .fi-wi-stats-overview-stat { background: #131620 !important; border-color: #1e2130 !important; } .dark [class*="fi-wi-"] { background: #131620 !important; border-color: #1e2130 !important; } /* ── Tables ── */ .dark .fi-ta-table { background: #131620 !important; } .dark .fi-ta-header-cell { background: #0f1117 !important; color: #9ca3af !important; border-bottom-color: #1e2130 !important; } .dark .fi-ta-row { border-bottom-color: #1a1d27 !important; } .dark .fi-ta-row:hover td { background: #1a1d27 !important; } .dark .fi-ta-cell { color: #d1d5db !important; } .dark .fi-ta-empty-state { background: #131620 !important; color: #6b7280 !important; } .dark .fi-ta-filters-form { background: #0f1117 !important; border-color: #1e2130 !important; } /* ── Table wrapper / content ── */ .dark .fi-ta-content { background: #131620 !important; border-color: #1e2130 !important; } .dark .fi-ta-header { background: #0f1117 !important; border-bottom-color: #1e2130 !important; } .dark .fi-ta-footer { background: #0f1117 !important; border-top-color: #1e2130 !important; color: #6b7280 !important; } /* ── Form inputs ── */ .dark .fi-input, .dark .fi-select-input, .dark input[type="text"], .dark input[type="email"], .dark input[type="number"], .dark select, .dark textarea { background: #1a1d27 !important; border-color: #2a2d3a !important; color: #e5e7eb !important; } .dark .fi-input-wrapper { background: #1a1d27 !important; border-color: #2a2d3a !important; } /* ── Modals ── */ .dark .fi-modal-window { background: #131620 !important; border-color: #1e2130 !important; } .dark .fi-modal-header { background: #131620 !important; border-bottom-color: #1e2130 !important; } .dark .fi-modal-footer { background: #131620 !important; border-top-color: #1e2130 !important; } /* ── Dropdown menus ── */ .dark .fi-dropdown-panel { background: #131620 !important; border-color: #1e2130 !important; box-shadow: 0 10px 30px rgba(0,0,0,.5) !important; } .dark .fi-dropdown-list-item-label { color: #d1d5db !important; } .dark .fi-dropdown-list-item:hover { background: #1a1d27 !important; } /* ── Topbar elements ── */ .dark .fi-topbar-breadcrumbs { color: #6b7280 !important; } .dark .fi-icon-btn { color: #9ca3af !important; } .dark .fi-icon-btn:hover { background: #1a1d27 !important; color: #e5e7eb !important; } /* ── Notifications / Alert banners ── */ .dark .fi-notification { background: #131620 !important; border-color: #1e2130 !important; } /* ── Pagination ── */ .dark .fi-pagination { background: #0f1117 !important; border-color: #1e2130 !important; color: #9ca3af !important; } .dark .fi-pagination-item-btn { color: #9ca3af !important; } .dark .fi-pagination-item-btn:hover { background: #1a1d27 !important; color: #e5e7eb !important; } .dark .fi-pagination-item-btn.fi-active { background: #6366f1 !important; color: #fff !important; } /* ── Action buttons ── */ .dark .fi-btn-color-gray { background: #1a1d27 !important; border-color: #2a2d3a !important; color: #d1d5db !important; } .dark .fi-btn-color-gray:hover { background: #252836 !important; } /* ── Tabs ── */ .dark .fi-tabs-tab { color: #6b7280 !important; } .dark .fi-tabs-tab:hover { color: #d1d5db !important; } .dark .fi-tabs-tab[aria-selected="true"] { color: #818cf8 !important; border-color: #818cf8 !important; } /* ── HR dividers ── */ .dark hr, .dark .fi-hr { border-color: #1e2130 !important; } /* ── Scrollbars in content ── */ .dark * { scrollbar-color: #2a2d3a transparent; } .dark *::-webkit-scrollbar-thumb { background: #2a2d3a !important; border-radius: 4px; } .dark *::-webkit-scrollbar { width: 4px; height: 4px; } /* ═══════════════════════════════════════════ 📱 Mobile / Tablet Responsive Fixes Ensures Filament's hamburger menu is reachable ═══════════════════════════════════════════ */ /* ── Tablet & below (≤ 1024px) ── */ @media (max-width: 1024px) { /* Hide the centered custom quick-nav — it overlaps the hamburger button */ .dc-qn-wrap { display: none !important; } /* Make sure Filament's sidebar toggle (hamburger) is always visible & on top */ .fi-topbar button[x-on\:click*="sidebar"], .fi-topbar .fi-icon-btn, .fi-sidebar-open-btn, .fi-sidebar-close-btn { display: inline-flex !important; z-index: 50 !important; } } /* ── Phones (≤ 640px) ── */ @media (max-width: 640px) { /* Hide the clock to save space */ .dc-clock { display: none !important; } /* Topbar brand: keep the house icon, hide the long company name text. (The sidebar logo is unaffected — it has no name text.) */ .dc-brand-name, .dc-brand-sub { display: none !important; } .dc-brand-link { padding: 0 10px !important; } /* Topbar: prevent horizontal overflow */ .fi-topbar { overflow-x: hidden !important; } .fi-topbar > * { min-width: 0 !important; } /* Dashboard welcome banner: stack vertically on small screens */ .dc-stat-card { padding: 14px 12px !important; } /* Make tables horizontally scrollable instead of breaking layout */ .fi-ta-content { overflow-x: auto !important; } } /* ── Small phones (≤ 400px) ── */ @media (max-width: 400px) { .dc-brand-link { padding: 0 6px !important; } .dc-brand-icon { width: 28px !important; height: 28px !important; } /* Logo plate: shrink height and cap width so it never crowds the topbar on phones. */ .dc-brand-icon--logo { height: 42px !important; max-width: 168px !important; padding: 2px 6px !important; } .dc-brand-logo-img { max-width: 151px !important; } } /* ═══════════════════════════════════════════ 📱 Dashboard Mobile Layout ═══════════════════════════════════════════ */ /* Tablet: collapse 4/5-column grids to 2 columns */ @media (max-width: 1024px) { .dc-dashboard [style*="grid-template-columns:repeat(4"], .dc-dashboard [style*="grid-template-columns:repeat(5"], .dc-dashboard [style*="grid-template-columns: repeat(4"], .dc-dashboard [style*="grid-template-columns: repeat(5"] { grid-template-columns: repeat(2, 1fr) !important; } } /* Phone: everything becomes a single column */ @media (max-width: 640px) { .dc-dashboard [style*="grid-template-columns"] { grid-template-columns: 1fr !important; } /* Welcome banner: stack greeting above the stat pills */ .dc-welcome-banner { flex-direction: column !important; align-items: flex-start !important; gap: 18px !important; padding: 22px 20px !important; } .dc-welcome-banner > div:last-child { width: 100% !important; justify-content: space-between !important; } .dc-welcome-banner > div:last-child > div { flex: 1 !important; min-width: 0 !important; } } /* ============================================================ COMPACT RESOURCE TABLES — fit every column without h-scroll. IMPORTANT: in Filament the .fi-ta-cell is `p-0`; the real padding lives on the inner wrapper `.fi-ta-text` (px-3 py-4). Headers carry their padding on `.fi-ta-header-cell` (px-3 py-3.5). So we shrink the INNER body wrapper and the header cell directly. ============================================================ */ .fi-ta-table, .fi-ta-text, .fi-ta-cell, .fi-ta-header-cell { font-size: 0.78rem !important; line-height: 1.2 !important; } /* BODY: shrink the inner content wrapper (where px-3 py-4 actually is) */ .fi-ta-cell > * { padding-inline: 0.5rem !important; padding-block: 0.3rem !important; } .fi-ta-cell:first-of-type > * { padding-inline-start: 0.5rem !important; } .fi-ta-cell:last-of-type > * { padding-inline-end: 0.5rem !important; } /* HEADER: padding is on the cell itself (+ ps-6/pe-6 edge overrides) */ .fi-ta-header-cell { padding-inline: 0.5rem !important; padding-block: 0.4rem !important; } .fi-ta-header-cell-label { font-size: 0.72rem !important; } /* smaller status / type badges */ .fi-ta-table .fi-badge { font-size: 0.68rem !important; padding-block: 0.05rem !important; padding-inline: 0.4rem !important; } /* secondary description line (e.g. contract number under the client) */ .fi-ta-text .text-sm, .fi-ta-text small { font-size: 0.66rem !important; } /* tighter row-action icon buttons */ .fi-ta-actions { gap: 0.15rem !important; } .fi-ta-actions .fi-icon-btn { padding: 0.3rem !important; } /* Quick-action inline icons are a mobile convenience (shown beside the ⋮ in the card footer). Hide them on desktop so the actions column stays narrow — the full set is still in the ⋮ dropdown. */ @media (min-width: 641px) { .fi-ta-actions .dc-quick-action { display: none !important; } } /* Keep wide resource tables INSIDE the page instead of widening the whole layout. Flex/grid items default to min-width:auto, so a wide table expands the main column and forces a page-wide horizontal scroll (sidebar drifts, right columns get cut off). Letting the main column + every table wrapper shrink (min-width:0) means the table's own overflow-x:auto scrolls it inside its card, while it still fills the available width. */ .fi-main-ctn, .fi-main, .fi-page, .fi-page > *, .fi-ta, .fi-ta-ctn { min-width: 0 !important; } .fi-ta-content { width: 100% !important; max-width: 100% !important; overflow-x: auto !important; } .fi-ta-content table { width: 100% !important; } /* tabular numerals for value/days columns → clean number alignment */ .fi-ta-cell .fi-ta-text { font-variant-numeric: tabular-nums; } /* ────────────────────────────────────────────────────────────── CONTRACTS — signatures column (shape + colour, dark-mode aware, colour-blind safe: ●=signed ○=pending –=not required). ────────────────────────────────────────────────────────────── */ .dc-sig-stack { display: inline-flex; flex-direction: column; gap: 2px; font-size: 0.72rem; line-height: 1.25; text-align: start; } .dc-sig { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; font-weight: 600; } .dc-sig__dot { font-size: 0.85em; line-height: 1; } .dc-sig--signed { color: #15803d; } /* filled ● */ .dc-sig--pending { color: #b45309; } /* hollow ○ (amber = waiting, not error) */ .dc-sig--na { color: #6b7280; font-weight: 400; } /* dash – */ .dark .dc-sig--signed { color: #4ade80; } .dark .dc-sig--pending { color: #fbbf24; } .dark .dc-sig--na { color: #94a3b8; } /* ────────────────────────────────────────────────────────────── MAINTENANCE REQUESTS — UI/UX Pro Max polish (scoped to .dc-maint-row). Smooth hover, keyboard focus accent, tabular data numerals, and an "action-needed" wash on overdue rows. Trust-teal accent · WCAG-safe. ────────────────────────────────────────────────────────────── */ .dc-maint-row { transition: background-color .18s ease; } .dc-maint-row:hover { background: rgba(15, 118, 110, .05) !important; } /* teal trust tint */ .dark .dc-maint-row:hover { background: rgba(20, 184, 166, .09) !important; } .dc-maint-row:focus-within { box-shadow: inset 0 0 0 2px rgba(3, 105, 161, .45); } /* keyboard focus */ .dc-maint-row .fi-ta-text { font-variant-numeric: tabular-nums; } /* aligned numerals */ .dc-maint-row .fi-badge { font-weight: 600; letter-spacing: .1px; } /* crisper badges */ /* overdue rows: subtle full-row red wash so they pop at a glance (RTL-safe) */ .dc-maint-row--overdue { background: rgba(220, 38, 38, .045) !important; } .dark .dc-maint-row--overdue { background: rgba(220, 38, 38, .12) !important; } .dc-maint-row--overdue:hover { background: rgba(220, 38, 38, .08) !important; } .dark .dc-maint-row--overdue:hover { background: rgba(220, 38, 38, .16) !important; } @media (prefers-reduced-motion: reduce) { .dc-maint-row { transition: none; } } /* ════════════════════════════════════════════════════════════════ 📱 MOBILE: compact 2-up CARD grid for resource tables (≤ 640px) Two small cards per row, fields stacked tight (tiny coloured label on top, value beneath — no wasted gaps), zebra-tinted fields, a teal top accent, and the action buttons as a footer bar. Column names come from /js/mobile-cards.js (data-label). RTL + dark-mode aware. ════════════════════════════════════════════════════════════════ */ @media (max-width: 640px) { /* No sideways scrolling — lay the rows out as a 2-column card grid. */ .fi-ta-content { overflow-x: visible !important; } .fi-ta-content, .fi-ta-content table { width: 100% !important; } .fi-ta-table { display: block !important; width: 100% !important; } .fi-ta-table > thead { display: none !important; } /* One card per row, stacked vertically (full width). */ .fi-ta-table > tbody { display: block !important; padding: 6px 4px !important; width: 100% !important; } /* Each row → a card whose FIELDS sit in a 2-column grid inside it. The 1px grid gap reveals the card-bg colour as clean divider lines. */ .fi-ta-table > tbody > tr.fi-ta-row { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 0 !important; position: relative !important; /* anchor the corner checkbox */ width: 100% !important; min-width: 0 !important; margin: 0 0 9px 0 !important; padding: 0 !important; border: 1px solid rgba(0,0,0,.07) !important; border-radius: 16px !important; background: var(--db-card, #fff) !important; box-shadow: 0 1px 4px rgba(0,0,0,.06), 0 4px 16px rgba(0,0,0,.04) !important; overflow: hidden !important; transition: transform .18s, box-shadow .18s !important; } .fi-ta-table > tbody > tr.fi-ta-row:hover { transform: translateY(-2px) !important; box-shadow: 0 6px 24px rgba(0,0,0,.10) !important; } /* Each cell → a stacked "label over value" field (two per row via the grid) */ .fi-ta-table > tbody > tr.fi-ta-row > td.fi-ta-cell { display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: flex-start !important; gap: 0 !important; min-width: 0 !important; max-width: 100% !important; border: 0 !important; border-bottom: 1px solid var(--db-border2, rgba(0,0,0,.055)) !important; padding: 4px 14px !important; /* balanced: half above label, half below value → even gap between rows */ background: var(--db-card, #fff) !important; } /* TITLE — coloured, uppercase-spaced, consistent */ .fi-ta-table > tbody > tr.fi-ta-row > td.fi-ta-cell[data-label]::before { content: attr(data-label); display: block; width: 100%; font-size: 0.66rem !important; font-weight: 700; letter-spacing: .3px; line-height: 1.0; color: #6366f1; /* indigo title */ text-align: start; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* VALUE — one consistent dark colour (badges/links keep their own) */ .fi-ta-table > tbody > tr.fi-ta-row > td.fi-ta-cell > * { padding: 0 !important; margin: -2px 0 0 0 !important; /* pull the value up snug under its label */ text-align: start !important; min-width: 0 !important; max-width: 100% !important; font-size: 1.02rem !important; /* bigger value (e.g. the contract number) */ font-weight: 600 !important; line-height: 1.0 !important; word-break: break-word !important; } .fi-ta-table > tbody > tr.fi-ta-row > td.fi-ta-cell > *:not(.fi-badge):not(a) { color: var(--db-text, #1e293b); /* tokenised so dark mode adapts (was hardcoded slate) */ } .fi-ta-table > tbody > tr.fi-ta-row .fi-badge { font-size: 0.66rem !important; } /* ── CARD HEADER ────────────────────────────────────────────────── The row's selection cell becomes the thick purple top bar: a small checkbox (no text) on the start side and the client name (injected by mobile-cards.js as .dc-head-name) centred in white. */ .fi-ta-table > tbody > tr.fi-ta-row > td.fi-ta-selection-cell { grid-column: 1 / -1 !important; order: -1 !important; /* the bar sits at the very top */ display: flex !important; flex-direction: row !important; align-items: center !important; gap: 10px !important; width: auto !important; max-width: none !important; min-height: 24px !important; margin: 0 !important; padding: 9px 16px !important; /* header bar */ border: 0 !important; background: linear-gradient(180deg, #6366f1, #4f46e5) !important; } .fi-ta-table > tbody > tr.fi-ta-row > td.fi-ta-selection-cell > div { flex: 0 0 auto !important; padding: 0 !important; margin: 0 !important; } .fi-ta-table > tbody > tr.fi-ta-row > td.fi-ta-selection-cell input[type="checkbox"] { width: 17px !important; height: 17px !important; accent-color: #4f46e5 !important; border-color: #fff !important; background-color: rgba(255,255,255,.25) !important; } .fi-ta-table > tbody > tr.fi-ta-row > td.fi-ta-selection-cell .dc-head-name { flex: 0 1 auto !important; max-width: 75% !important; /* show the full name, but never wider than 75% of the bar */ margin-inline: auto !important; /* centre the name in the leftover space, balancing the checkbox */ text-align: center !important; color: #fff !important; font-size: 1rem !important; font-weight: 800 !important; line-height: 1.3 !important; white-space: nowrap !important; /* single line … */ overflow: hidden !important; text-overflow: ellipsis !important; /* … so the ellipsis appears ONLY past 75% width */ } /* the original name cell is now shown in the header → hide the duplicate. Must out-specify the `tr.fi-ta-row > td.fi-ta-cell { display:flex }` card rule above, otherwise the duplicate name stays visible in the card body. */ .fi-ta-table .dc-head-source-hidden, .fi-ta-table > tbody > tr.fi-ta-row > td.dc-head-source-hidden { display: none !important; } /* Hide the checkbox's text label inside the header (the leaked "تحديد/إلغاء تحديد كافة العناصر" text) — keep only the client name. */ .fi-ta-table > tbody > tr.fi-ta-row > td.fi-ta-selection-cell span:not(.dc-head-name) { display: none !important; } /* The select-all header cell stays hidden (thead is hidden anyway); the per-row checkbox is repositioned into the coloured card header below. */ .fi-ta-table .fi-ta-selection-header-cell { display: none !important; } /* Kill the mobile "select all on page / group" checkbox + its leaked label (the "تحديد/إلغاء تحديد كافة العناصر…" text) — pure clutter on phones. */ .fi-ta-page-checkbox, .fi-ta-group-checkbox, label:has(> .fi-ta-page-checkbox), label:has(> .fi-ta-group-checkbox) { display: none !important; } /* Re-assert sr-only inside tables (so no checkbox label leaks into view) */ .fi-ta .sr-only, .fi-ta-table .sr-only, .fi-ta-selection-cell label > span { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; } /* Actions cell → full-width footer bar across the card (exclude the selection cell, which is the header, not the footer). */ .fi-ta-table > tbody > tr.fi-ta-row > td.fi-ta-cell:not([data-label]):not(.fi-ta-selection-cell) { grid-column: 1 / -1 !important; border-bottom: 0 !important; background: rgba(99, 102, 241, .06) !important; /* faint indigo footer */ } .fi-ta-table .fi-ta-actions { flex-direction: row !important; justify-content: center !important; gap: 0.5rem !important; flex-wrap: wrap !important; width: 100% !important; } .fi-ta-table .fi-ta-actions .fi-icon-btn { padding: 0.35rem !important; } /* ── dark mode ── */ .dark .fi-ta-table > tbody > tr.fi-ta-row { background: var(--db-card, #1e293b) !important; border-color: rgba(255,255,255,.08) !important; border-top-color: #818cf8 !important; } .dark .fi-ta-table > tbody > tr.fi-ta-row > td.fi-ta-cell:not(.fi-ta-selection-cell) { background: var(--db-card, #1e293b) !important; border-bottom-color: rgba(255,255,255,.07) !important; } .dark .fi-ta-table > tbody > tr.fi-ta-row > td.fi-ta-cell[data-label]::before { color: #818cf8; } .dark .fi-ta-table > tbody > tr.fi-ta-row > td.fi-ta-cell > *:not(.fi-badge):not(a) { color: #e2e8f0; } .dark .fi-ta-table > tbody > tr.fi-ta-row > td.fi-ta-cell:not([data-label]):not(.fi-ta-selection-cell) { background: rgba(129, 140, 248, .12) !important; } } /* ── UI/UX Pro Max — mobile polish for data view pages (cards/widgets/tables) ── */ @media (max-width: 640px) { /* Comfortable, readable info cards */ .dc-stat-card { padding: 13px 12px !important; } .dc-stat-label { font-size: 11px !important; line-height: 1.3; } /* Wide custom widget tables (financial ledgers) already sit inside an overflow-x:auto box, so the scroll is contained — not a whole-page scroll. On phones, tighten them so most fit WITHOUT scrolling, and keep the box for the very widest. */ [style*="overflow-x:auto"] > table, [style*="overflow-x: auto"] > table { font-size: 12px; } table[style*="min-width:520px"] { min-width: 440px !important; } table[style*="min-width:520px"] th, table[style*="min-width:520px"] td { padding: 6px 8px !important; } } /* ── Topbar item order: clock → profile → bell → phone (RTL: right→left) ── */ .fi-topbar nav .ms-auto { align-items: center; } .fi-topbar nav .ms-auto .fi-user-menu { order: 3; } /* profile circle */ .fi-topbar nav .ms-auto > div:has(.fi-topbar-database-notifications-btn) { order: 2; } /* bell */ .fi-topbar nav .ms-auto .fi-global-search { order: 0; } /* search out of the way */ /* Keep focused inputs DARK in dark mode. The login-page inline