/* * AKWAN Brand — Filament 5 CSS Overrides * * Colors: page-bg=#0A1428 card=#101B33 elevated=#111C35 * table-header=#0F1A32 accent=#F1B52E text=#FFFFFF * Fonts: Montserrat (brand word "AKWAN") Cairo (Arabic UI) * * Loading: injected via AdminPanelProvider ->renderHook('panels::head.end') * after all Filament/Tailwind CSS, so these rules win the cascade. * * Dark mode is FORCED (->darkMode(isForced: true)) — .dark is always on . * All .dark-prefixed selectors below are therefore always active. */ /* ══════════════════════════════════════════════════════════════════ SECTION 1 — FIX TAILWIND v4 GRAY VARIABLE CHAIN ───────────────────────────────────────────────────────────────── dark:bg-gray-900 resolves through TWO hops in Tailwind v4 + Filament: background-color: var(--color-gray-900) --color-gray-900: var(--gray-900) ← defined in :root, :host We override BOTH levels so no matter which hop is the live reference, the result is AKWAN navy instead of the default near-black (#111827). ══════════════════════════════════════════════════════════════════ */ .dark { /* Level 1 — base Tailwind v4 named tokens */ --gray-950: #080F20; --gray-900: #101B33; --gray-800: #111C35; --gray-700: #1A2845; --gray-600: #2A3B5E; /* Level 2 — Filament theme-layer aliases that map to Level 1 */ --color-gray-950: #080F20; --color-gray-900: #101B33; --color-gray-800: #111C35; --color-gray-700: #1A2845; --color-gray-600: #2A3B5E; } /* ══════════════════════════════════════════════════════════════════ SECTION 2 — EXPLICIT SURFACE OVERRIDES ───────────────────────────────────────────────────────────────── Belt-and-suspenders: direct background-color on every confirmed Filament component class. These bypass the variable chain entirely. Sources: vendor/filament/tables/resources/css/container.css vendor/filament/support/resources/css/components/section.css vendor/filament/support/resources/css/components/modal.css ══════════════════════════════════════════════════════════════════ */ /* ── 2a. Tables ─────────────────────────────────────────────────── */ /* Outer table card container (dark:bg-gray-900 confirmed line 2) */ .dark .fi-ta-ctn { background-color: #101B33 !important; } /* Inline filter panels inside table (dark:bg-gray-900 confirmed line 206) */ .dark .fi-ta-ctn .fi-ta-filters-before-content-ctn, .dark .fi-ta-ctn .fi-ta-filters-after-content-ctn { background-color: #111C35 !important; } /* Dividing lines inside table header / toolbar */ .dark .fi-ta-header, .dark .fi-ta-header-toolbar { border-bottom-color: rgba(255, 255, 255, 0.08) !important; } /* HTML table — header rows */ .dark .fi-ta-ctn thead tr, .dark .fi-ta-ctn thead th { background-color: #0F1A32 !important; } /* HTML table — body rows (transparent → inherits container navy) */ .dark .fi-ta-ctn tbody tr { background-color: transparent; } /* Striped / hover row tint */ .dark .fi-ta-ctn tbody tr:hover { background-color: rgba(241, 181, 46, 0.04) !important; } /* ── 2b. Sections / Cards ───────────────────────────────────────── */ /* Standard contained section (dark:bg-gray-900 confirmed section.css:22) */ .dark .fi-section:not(.fi-section-not-contained):not(.fi-aside) { background-color: #101B33 !important; } /* Aside-layout section content pane (dark:bg-gray-900 confirmed section.css:45) */ .dark .fi-section.fi-aside > .fi-section-content-ctn { background-color: #101B33 !important; } /* Section divider line */ .dark .fi-section-content-ctn { border-top-color: rgba(255, 255, 255, 0.07) !important; } /* Section footer divider */ .dark .fi-section > .fi-section-content-ctn > .fi-section-footer { border-top-color: rgba(255, 255, 255, 0.07) !important; } /* ── 2c. Modals / Dialogs ───────────────────────────────────────── */ /* Modal window panel (dark:bg-gray-900 confirmed modal.css:162) */ .dark .fi-modal-window { background-color: #111C35 !important; } /* Modal overlay — keep semi-transparent navy instead of near-black */ .dark .fi-modal-close-overlay { background-color: rgba(8, 15, 32, 0.75) !important; } /* ── 2d. Dropdowns ──────────────────────────────────────────────── */ .dark .fi-dropdown-panel { background-color: #111C35 !important; } /* ── 2e. Form inputs ────────────────────────────────────────────── */ .dark .fi-input-wrp { background-color: #0F1A32 !important; border-color: rgba(255, 255, 255, 0.12) !important; } .dark .fi-fo-field-wrp, .dark .fi-fo-ctn { background-color: transparent; } /* ── 2f. Empty state inside table ───────────────────────────────── */ .dark .fi-ta-empty-state-ctn { background-color: #101B33 !important; } /* ══════════════════════════════════════════════════════════════════ SECTION 3 — BASE FONT Cairo for all Arabic UI text ══════════════════════════════════════════════════════════════════ */ body, .fi-sidebar, .fi-main-ctn, .fi-main { font-family: 'Cairo', 'Noto Sans Arabic', system-ui, sans-serif; } /* ══════════════════════════════════════════════════════════════════ SECTION 4 — BRAND / LOGO "AKWAN" in Montserrat, gold ══════════════════════════════════════════════════════════════════ */ .fi-logo, .fi-logo span, .fi-logo-light, .fi-logo-dark { font-family: 'Montserrat', system-ui, sans-serif !important; font-weight: 700; letter-spacing: 0.14em; color: #F1B52E !important; text-transform: uppercase; } /* ══════════════════════════════════════════════════════════════════ SECTION 5 — SIDEBAR ══════════════════════════════════════════════════════════════════ */ .fi-sidebar { background-color: #0A1428 !important; border-inline-end-color: rgba(255, 255, 255, 0.06) !important; } .fi-sidebar-header, .fi-sidebar-header-logo-ctn { background-color: #0A1428 !important; border-bottom-color: rgba(241, 181, 46, 0.14) !important; } /* ══════════════════════════════════════════════════════════════════ SECTION 6 — TOP BAR ══════════════════════════════════════════════════════════════════ */ .fi-topbar, .fi-topbar-ctn { background-color: #0C1730 !important; border-bottom-color: rgba(255, 255, 255, 0.07) !important; } /* ══════════════════════════════════════════════════════════════════ SECTION 7 — MAIN CONTENT WRAPPER ══════════════════════════════════════════════════════════════════ */ .fi-main-ctn, .fi-main { background-color: #0A1428 !important; } /* ══════════════════════════════════════════════════════════════════ SECTION 8 — SIDEBAR NAVIGATION ITEMS ══════════════════════════════════════════════════════════════════ */ .fi-sidebar-item-btn { color: rgba(255, 255, 255, 0.78) !important; font-family: 'Cairo', sans-serif; } .fi-sidebar-item-btn:hover { background-color: rgba(241, 181, 46, 0.10) !important; color: #F1B52E !important; } .fi-sidebar-item-btn[aria-current="page"], .fi-sidebar-item-btn.fi-active { background-color: rgba(241, 181, 46, 0.15) !important; color: #F1B52E !important; } .fi-sidebar-item-btn svg { color: inherit; } /* ══════════════════════════════════════════════════════════════════ SECTION 9 — SIDEBAR GROUP LABELS ══════════════════════════════════════════════════════════════════ */ .fi-sidebar-group-label { color: rgba(241, 181, 46, 0.55) !important; font-family: 'Montserrat', sans-serif; font-size: 0.6875rem; letter-spacing: 0.10em; text-transform: uppercase; } /* ══════════════════════════════════════════════════════════════════ SECTION 10 — PAGE & SECTION HEADINGS ══════════════════════════════════════════════════════════════════ */ .fi-header-heading { color: #F1B52E !important; font-family: 'Cairo', sans-serif; } .fi-section-header-heading { color: #F1B52E !important; } /* ══════════════════════════════════════════════════════════════════ SECTION 11 — BREADCRUMBS ══════════════════════════════════════════════════════════════════ */ .fi-breadcrumbs-item-label { color: rgba(255, 255, 255, 0.60) !important; } /* ══════════════════════════════════════════════════════════════════ SECTION 12 — LOGIN PAGE ══════════════════════════════════════════════════════════════════ */ .fi-simple-main, .fi-simple-layout { background-color: #0A1428 !important; } .fi-simple-page { background-color: #101B33 !important; border-color: rgba(241, 181, 46, 0.12) !important; padding: 2rem 2rem !important; } /* ══════════════════════════════════════════════════════════════════ SECTION 13 — REPORT PAGE METRIC CARDS Used exclusively in reports-page.blade.php. These replace the raw dark:bg-gray-900 Tailwind approach with purpose-built AKWAN navy card components. ══════════════════════════════════════════════════════════════════ */ /* Base metric card — elevated navy surface */ .akwan-stat { background-color: #111C35; border-radius: 0.75rem; border: 1px solid rgba(255, 255, 255, 0.07); padding: 1.125rem 1.375rem; display: flex; flex-direction: column; gap: 0.625rem; min-height: 5.75rem; } /* Highlight card — gold start-border for totals/summaries */ .akwan-stat-highlight { background-color: #111C35; border-radius: 0.75rem; border: 1px solid rgba(241, 181, 46, 0.18); border-inline-start: 3px solid #F1B52E; padding: 1.125rem 1.375rem; display: flex; flex-direction: column; gap: 0.625rem; min-height: 5.75rem; } /* Card label — small muted text at top */ .akwan-stat-label { font-size: 0.8125rem; font-weight: 500; color: rgba(255, 255, 255, 0.50); font-family: 'Cairo', sans-serif; line-height: 1.4; } /* Count value — large bold number */ .akwan-stat-number { font-size: 2rem; font-weight: 700; line-height: 1.0; letter-spacing: -0.01em; font-family: 'Cairo', sans-serif; margin-top: auto; } /* Financial value row — number + currency inline */ .akwan-stat-money { font-size: 1.5rem; font-weight: 700; line-height: 1.15; font-family: 'Cairo', sans-serif; display: flex; align-items: baseline; gap: 0.3125rem; flex-wrap: wrap; margin-top: auto; } /* Currency suffix ج.م — smaller and muted */ .akwan-currency { font-size: 0.8125rem; font-weight: 400; color: rgba(255, 255, 255, 0.36); flex-shrink: 0; } /* Sub-section heading inside a section (e.g. "الإجماليات المالية") */ .akwan-sub-heading { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: rgba(241, 181, 46, 0.60); font-family: 'Montserrat', sans-serif; padding-bottom: 0.625rem; border-bottom: 1px solid rgba(255, 255, 255, 0.06); margin-bottom: 1rem; } /* Thin divider between sub-sections */ .akwan-divider { border: none; border-top: 1px solid rgba(255, 255, 255, 0.06); margin-top: 1.5rem; margin-bottom: 1.25rem; } /* ══════════════════════════════════════════════════════════════════ SECTION 14 — COMPACT METRIC TILES (reports-page.blade.php) ───────────────────────────────────────────────────────────────── Tiles sit inside a fi-section card (bg #101B33). Tile bg #14203B is visibly lighter, creating an inset-grid feel. Much smaller than .akwan-stat — no min-height, tight padding. ══════════════════════════════════════════════════════════════════ */ /* Standard tile */ .akwan-tile { background-color: #14203B; border-radius: 0.5rem; border: 1px solid rgba(255, 255, 255, 0.07); padding: 0.625rem 0.875rem; display: flex; flex-direction: column; gap: 0.25rem; } /* Highlight tile — gold inline-start accent for section totals */ .akwan-tile-highlight { background-color: #14203B; border-radius: 0.5rem; border: 1px solid rgba(241, 181, 46, 0.22); border-inline-start: 2px solid #F1B52E; padding: 0.625rem 0.875rem; display: flex; flex-direction: column; gap: 0.25rem; } /* Tile label — very small, muted */ .akwan-tile-label { font-size: 0.6875rem; font-weight: 500; color: rgba(255, 255, 255, 0.44); font-family: 'Cairo', sans-serif; line-height: 1.35; } /* Tile count value */ .akwan-tile-value { font-size: 1.5rem; font-weight: 700; line-height: 1.0; letter-spacing: -0.01em; font-family: 'Cairo', sans-serif; } /* Tile financial value — number + ج.م inline */ .akwan-tile-money { font-size: 1.125rem; font-weight: 700; line-height: 1.1; font-family: 'Cairo', sans-serif; display: flex; align-items: baseline; gap: 0.25rem; flex-wrap: wrap; } /* Currency suffix ج.م */ .akwan-tile-currency { font-size: 0.6875rem; font-weight: 400; color: rgba(255, 255, 255, 0.30); flex-shrink: 0; } /* ══════════════════════════════════════════════════════════════════ SECTION 15 — REPORT METRIC GRID CONTAINERS ───────────────────────────────────────────────────────────────── WHY custom classes instead of Tailwind utilities: Filament ships a pre-compiled app.css that only includes utilities from its own source files. Custom blade views are NOT scanned, so grid-cols-2, sm:grid-cols-4, lg:grid-cols-5 etc. may be absent. These classes use plain CSS grid — guaranteed to load via our render hook regardless of Filament's compiled output. ══════════════════════════════════════════════════════════════════ */ /* Shared base */ .akwan-grid-2, .akwan-grid-3, .akwan-grid-4, .akwan-grid-5, .akwan-grid-6 { display: grid; gap: 0.75rem; } /* Mobile defaults */ .akwan-grid-2 { grid-template-columns: repeat(2, 1fr); } .akwan-grid-3 { grid-template-columns: 1fr; } /* 1 col — financial values need room */ .akwan-grid-4 { grid-template-columns: repeat(2, 1fr); } .akwan-grid-5 { grid-template-columns: repeat(2, 1fr); } .akwan-grid-6 { grid-template-columns: repeat(2, 1fr); } /* ≥ 640 px (sm) */ @media (min-width: 640px) { .akwan-grid-3 { grid-template-columns: repeat(3, 1fr); } .akwan-grid-4 { grid-template-columns: repeat(4, 1fr); } .akwan-grid-5 { grid-template-columns: repeat(3, 1fr); } .akwan-grid-6 { grid-template-columns: repeat(3, 1fr); } } /* ≥ 1024 px (lg) */ @media (min-width: 1024px) { .akwan-grid-5 { grid-template-columns: repeat(5, 1fr); } } /* ══════════════════════════════════════════════════════════════════ SECTION 16 — REPORT CHARTS (Phase 9B) ───────────────────────────────────────────────────────────────── Pure CSS/HTML horizontal bar charts — zero JavaScript. RTL-compatible: flex justify-content:space-between places the Arabic label on the inline-start (right in RTL) and the count on the inline-end (left in RTL). Bar fill uses standard CSS width — left-to-right growth is the universal bar-chart convention and is direction-agnostic / RTL-safe. ══════════════════════════════════════════════════════════════════ */ /* Wrapper — stacks rows with consistent spacing */ .akwan-chart { display: flex; flex-direction: column; gap: 0.625rem; } /* Single bar row: label + count header above the track */ .akwan-chart-row { display: flex; flex-direction: column; gap: 0.25rem; } /* Label (inline-start / RTL-right) ↔ Count (inline-end / RTL-left) */ .akwan-chart-row-header { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; } /* Arabic status label — small, muted */ .akwan-chart-row-label { font-size: 0.75rem; font-weight: 500; color: rgba(255, 255, 255, 0.65); font-family: 'Cairo', sans-serif; line-height: 1.3; } /* Numeric count — slightly brighter than label */ .akwan-chart-row-count { font-size: 0.75rem; font-weight: 700; color: rgba(255, 255, 255, 0.90); font-family: 'Cairo', sans-serif; white-space: nowrap; min-width: 1.25rem; text-align: end; } /* The full-width grey track behind the bar */ .akwan-chart-bar-track { height: 6px; background-color: rgba(255, 255, 255, 0.07); border-radius: 3px; overflow: hidden; } /* Coloured fill — width set via inline style from Blade */ .akwan-chart-bar { height: 100%; border-radius: 3px; } /* ── Commission money stacked bar ────────────────────────────────── */ /* Track that holds paid (green) + remaining (amber) segments */ .akwan-money-bar-wrap { height: 12px; background-color: rgba(255, 255, 255, 0.07); border-radius: 4px; overflow: hidden; display: flex; } /* Paid segment — success green */ .akwan-money-bar-paid { height: 100%; background-color: #22C55E; flex-shrink: 0; } /* Remaining segment — warning amber */ .akwan-money-bar-remaining { height: 100%; background-color: #F59E0B; flex-shrink: 0; } /* Legend row below the stacked bar */ .akwan-money-legend { display: flex; gap: 1.25rem; flex-wrap: wrap; margin-top: 0.5rem; } /* Individual legend item: dot + label */ .akwan-money-legend-item { display: flex; align-items: center; gap: 0.375rem; font-size: 0.75rem; color: rgba(255, 255, 255, 0.70); font-family: 'Cairo', sans-serif; } /* Coloured dot — background set via inline style from Blade */ .akwan-money-legend-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } /* ══════════════════════════════════════════════════════════════════ SECTION 17 — EXPORT BUTTON (Phase 9C) ───────────────────────────────────────────────────────────────── Gold-outlined download button placed in the reports page header. RTL-compatible: text-align:start = right in RTL context. ══════════════════════════════════════════════════════════════════ */ /* Container — aligns button to the inline-start (right in RTL) */ .akwan-export-bar { display: flex; justify-content: flex-start; /* flex-start = right in RTL */ gap: 0.625rem; margin-bottom: 0.75rem; } /* The download link styled as a bordered button */ .akwan-export-btn { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.4375rem 1rem; background-color: transparent; border: 1px solid rgba(241, 181, 46, 0.45); border-radius: 0.5rem; color: #F1B52E; font-family: 'Cairo', sans-serif; font-size: 0.875rem; font-weight: 600; text-decoration: none; cursor: pointer; line-height: 1.4; transition: background-color 0.15s ease, border-color 0.15s ease; } .akwan-export-btn:hover { background-color: rgba(241, 181, 46, 0.10); border-color: #F1B52E; color: #F1B52E; text-decoration: none; } /* ══════════════════════════════════════════════════════════════════ SECTION 18 — QUICK LINKS (Phase 10A) ───────────────────────────────────────────────────────────────── Gold pill-shaped link buttons used in the owner dashboard quick actions section and the sales-agent welcome card. RTL-compatible: flex-wrap + direction:rtl flows pills right-to-left. ══════════════════════════════════════════════════════════════════ */ .akwan-quick-links { display: flex; flex-wrap: wrap; gap: 0.625rem; direction: rtl; } .akwan-quick-link { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.4375rem 1.125rem; background-color: rgba(241, 181, 46, 0.06); border: 1px solid rgba(241, 181, 46, 0.28); border-radius: 0.5rem; color: #F1B52E; font-family: 'Cairo', sans-serif; font-size: 0.875rem; font-weight: 600; text-decoration: none; transition: background-color 0.15s ease, border-color 0.15s ease; } .akwan-quick-link:hover { background-color: rgba(241, 181, 46, 0.14); border-color: rgba(241, 181, 46, 0.65); color: #F1B52E; text-decoration: none; } /* ══════════════════════════════════════════════════════════════════ SECTION 19 — OPERATIONS SUMMARY CARDS (Phase 10A refactor) ───────────────────────────────────────────────────────────────── Compact multi-metric cards for the ملخص العمليات section. Each card holds a heading + a row of small metric cells. Lighter navy (#14203B) on section bg (#101B33) creates depth. ══════════════════════════════════════════════════════════════════ */ /* Card container */ .akwan-ops-card { background-color: #14203B; border-radius: 0.5rem; border: 1px solid rgba(255, 255, 255, 0.07); padding: 0.875rem 1rem; display: flex; flex-direction: column; gap: 0.75rem; } /* Section heading inside the card (e.g. "العملاء المحتملون") */ .akwan-ops-card-heading { font-size: 0.75rem; font-weight: 600; color: rgba(241, 181, 46, 0.80); font-family: 'Cairo', sans-serif; line-height: 1.4; padding-bottom: 0.5rem; border-bottom: 1px solid rgba(255, 255, 255, 0.06); } /* Row that holds the individual metric cells */ .akwan-ops-metrics { display: flex; gap: 0.75rem; flex-wrap: wrap; } /* Individual metric cell: label above, value below */ .akwan-ops-metric { display: flex; flex-direction: column; gap: 0.125rem; flex: 1; min-width: 3.5rem; } /* Micro-label — very small muted Arabic text */ .akwan-ops-metric-label { font-size: 0.625rem; font-weight: 500; color: rgba(255, 255, 255, 0.40); font-family: 'Cairo', sans-serif; line-height: 1.3; } /* Metric value — bold, mid-size number */ .akwan-ops-metric-value { font-size: 1.375rem; font-weight: 700; line-height: 1.0; letter-spacing: -0.01em; font-family: 'Cairo', sans-serif; color: rgba(255, 255, 255, 0.90); } /* ══════════════════════════════════════════════════════════════════ SECTION 18 — DASHBOARD QUICK LINKS (Phase 10A) ───────────────────────────────────────────────────────────────── Compact pill-style navigation buttons shown at the bottom of the Owner Dashboard. RTL-compatible via flex-wrap row layout. Also used in the Sales Agent welcome card (subset of links). ══════════════════════════════════════════════════════════════════ */ /* Flex container — wraps links into RTL rows */ .akwan-quick-links { display: flex; flex-wrap: wrap; gap: 0.625rem; direction: rtl; } /* Individual quick-link pill */ .akwan-quick-link { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.4375rem 1.125rem; background-color: rgba(241, 181, 46, 0.06); border: 1px solid rgba(241, 181, 46, 0.28); border-radius: 0.5rem; color: #F1B52E; font-family: 'Cairo', sans-serif; font-size: 0.875rem; font-weight: 600; text-decoration: none; cursor: pointer; line-height: 1.4; transition: background-color 0.15s ease, border-color 0.15s ease; white-space: nowrap; } .akwan-quick-link:hover { background-color: rgba(241, 181, 46, 0.14); border-color: rgba(241, 181, 46, 0.65); text-decoration: none; } .akwan-quick-link svg { flex-shrink: 0; opacity: 0.80; } /* ══════════════════════════════════════════════════════════════════ SECTION 20 — FINANCIAL PRIVACY TOGGLE (Phase 10A) ───────────────────────────────────────────────────────────────── Alpine.js controls visibility; CSS styles the button and masked placeholder. Values are hidden by default (x-data.revealed=false). [x-cloak] ensures elements with x-cloak attribute stay invisible until Alpine removes the attribute on initialization. ══════════════════════════════════════════════════════════════════ */ /* Hide Alpine-cloaked elements until JS initializes */ [x-cloak] { display: none !important; } /* Ghost button — default (hidden) state */ .akwan-reveal-btn { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.3125rem 0.875rem; background-color: transparent; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 0.375rem; color: rgba(255, 255, 255, 0.48); font-family: 'Cairo', sans-serif; font-size: 0.75rem; font-weight: 600; cursor: pointer; line-height: 1.4; transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease; white-space: nowrap; } .akwan-reveal-btn:hover { background-color: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.30); color: rgba(255, 255, 255, 0.75); } /* Active state — shown when values are revealed */ .akwan-reveal-btn--active { border-color: rgba(241, 181, 46, 0.28); color: rgba(241, 181, 46, 0.70); } .akwan-reveal-btn--active:hover { background-color: rgba(241, 181, 46, 0.06); border-color: rgba(241, 181, 46, 0.55); color: rgba(241, 181, 46, 0.90); } .akwan-reveal-btn svg { flex-shrink: 0; } /* Masked placeholder — matches akwan-tile-money sizing, strongly muted */ .akwan-masked { display: inline-flex; align-items: baseline; gap: 0.25rem; font-size: 1.125rem; font-weight: 700; line-height: 1.1; font-family: 'Cairo', sans-serif; letter-spacing: 0.12em; color: rgba(255, 255, 255, 0.18); }