/* ========================================================================== Alfa Modern — Dashboard design layer Loaded last. Overrides the legacy Bootstrap 4/5 theme without replacing it. Bidirectional: uses CSS logical properties so ar (RTL) and en (LTR) match. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Design tokens -------------------------------------------------------------------------- */ :root { /* Accent — inherits --primary-color from settings, with a safe fallback */ --alfa-accent: var(--primary-color, #2563eb); --alfa-accent-contrast: var(--primary-text-color, #ffffff); /* Neutral surfaces */ --alfa-bg: #f6f7f9; --alfa-surface: #ffffff; --alfa-surface-2: #fafbfc; --alfa-sidebar-bg: #0f172a; --alfa-sidebar-fg: #94a3b8; --alfa-sidebar-fg-strong: #f1f5f9; --alfa-sidebar-hover: rgba(255, 255, 255, .06); /* Text */ --alfa-text: #0f172a; --alfa-text-muted: #64748b; --alfa-text-subtle: #94a3b8; /* Lines */ --alfa-border: #e5e7eb; --alfa-border-strong: #d1d5db; /* Semantic */ --alfa-success: #059669; --alfa-success-bg: #ecfdf5; --alfa-danger: #dc2626; --alfa-danger-bg: #fef2f2; --alfa-warning: #d97706; --alfa-warning-bg: #fffbeb; --alfa-info: #0284c7; --alfa-info-bg: #f0f9ff; /* Elevation — subtle, never heavy */ --alfa-shadow-sm: 0 1px 2px rgba(16, 24, 40, .05); --alfa-shadow: 0 1px 3px rgba(16, 24, 40, .08), 0 1px 2px rgba(16, 24, 40, .04); --alfa-shadow-lg: 0 8px 24px rgba(16, 24, 40, .10), 0 2px 6px rgba(16, 24, 40, .05); /* Geometry */ --alfa-radius-sm: 8px; --alfa-radius: 12px; --alfa-radius-lg: 16px; /* Rhythm */ --alfa-gap: 20px; /* Matches the 264px the legacy stylesheet already reserves via .main-content's margin and .footer's, so the rail lines up with them. */ --alfa-sidebar-w: 264px; --alfa-topbar-h: 68px; --alfa-font: "Inter", "IBM Plex Sans Arabic", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } /* Dark theme — applied by alfa-theme.js on */ [data-alfa-theme="dark"] { --alfa-bg: #0b0f17; --alfa-surface: #131823; --alfa-surface-2: #171d2a; --alfa-sidebar-bg: #0b0f17; --alfa-sidebar-fg: #8b97ab; --alfa-sidebar-fg-strong: #e8edf5; --alfa-sidebar-hover: rgba(255, 255, 255, .05); --alfa-text: #e8edf5; --alfa-text-muted: #93a0b4; --alfa-text-subtle: #6b7a90; --alfa-border: #232b3a; --alfa-border-strong: #2f3a4d; --alfa-success-bg: #06251c; --alfa-danger-bg: #2a1113; --alfa-warning-bg: #2a1f08; --alfa-info-bg: #08202e; --alfa-shadow-sm: 0 1px 2px rgba(0, 0, 0, .35); --alfa-shadow: 0 1px 3px rgba(0, 0, 0, .45), 0 1px 2px rgba(0, 0, 0, .3); --alfa-shadow-lg: 0 8px 24px rgba(0, 0, 0, .5), 0 2px 6px rgba(0, 0, 0, .35); color-scheme: dark; } /* -------------------------------------------------------------------------- 2. Base -------------------------------------------------------------------------- */ /* The legacy theme styles but never , so the browser's own white shows through at the edges when the page overscrolls. */ html { background: var(--alfa-bg); } body { background: var(--alfa-bg) !important; color: var(--alfa-text); font-family: var(--alfa-font); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; letter-spacing: -0.006em; } [dir="rtl"] body { letter-spacing: 0; } h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { color: var(--alfa-text); font-weight: 600; letter-spacing: -0.018em; } [dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4, [dir="rtl"] h5, [dir="rtl"] h6 { letter-spacing: 0; } a { color: var(--alfa-accent); text-decoration: none; } a:hover { color: var(--alfa-accent); filter: brightness(.9); } ::selection { background: color-mix(in srgb, var(--alfa-accent) 22%, transparent); } /* Tabular figures keep metric columns from jittering as values change */ .alfa-num, .alfa-stat__value, .alfa-fin__amount { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; } /* -------------------------------------------------------------------------- 3. Layout shell -------------------------------------------------------------------------- */ /* Smooth scrolling for in-page jumps (anchors, .scrollIntoView, the sidebar's own menu scroll). scroll-padding-top keeps a target from landing underneath the fixed topbar and any sticky bar pinned below it. Guarded on the OS setting: `scroll-behavior: smooth` applied unconditionally is a common accessibility miss, since it also animates focus jumps for keyboard and screen-reader users who asked for no motion. */ @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } html { scroll-padding-top: calc(var(--alfa-topbar-h) + 16px); } .main-content, .dashboard-content { background: transparent !important; } .dashboard-content { padding-block: 28px 40px !important; } /* -------------------------------------------------------------------------- 4. Page header -------------------------------------------------------------------------- */ .alfa-pagehead { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; margin-block-end: 24px; } .alfa-pagehead__title { margin: 0; font-size: 1.5rem; font-weight: 650; line-height: 1.25; } .alfa-pagehead__sub { margin: 4px 0 0; font-size: .875rem; color: var(--alfa-text-muted); } .alfa-pagehead__actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } /* Legacy breadcrumb, de-emphasised */ .page-header .breadcrumb { background: transparent !important; padding: 0 !important; margin: 0 !important; font-size: .8125rem; } .page-header .breadcrumb-item, .page-header .breadcrumb-item a { color: var(--alfa-text-muted) !important; } .page-header .breadcrumb-item.active { color: var(--alfa-text) !important; } /* -------------------------------------------------------------------------- 5. Cards -------------------------------------------------------------------------- */ .card { background: var(--alfa-surface) !important; border: 1px solid var(--alfa-border) !important; border-radius: var(--alfa-radius) !important; box-shadow: var(--alfa-shadow-sm) !important; overflow: hidden; } .card-header { background: transparent !important; border-block-end: 1px solid var(--alfa-border) !important; padding: 16px 20px !important; font-weight: 600; color: var(--alfa-text); } .card-body { padding: 20px !important; } .card-footer { background: var(--alfa-surface-2) !important; border-block-start: 1px solid var(--alfa-border) !important; padding: 14px 20px !important; } /* The legacy theme paints a coloured top border on every dashboard card. Modern cards carry weight through spacing instead. */ .header-summery .card.border-top-primary, .header-summery .card.border-3 { border-block-start-width: 1px !important; border-block-start-color: var(--alfa-border) !important; } /* -------------------------------------------------------------------------- 6. Stat cards -------------------------------------------------------------------------- */ .alfa-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--alfa-gap); margin-block-end: 28px; } .alfa-stat { position: relative; display: flex; flex-direction: column; gap: 14px; min-height: 132px; padding: 20px; background: var(--alfa-surface); border: 1px solid var(--alfa-border); border-radius: var(--alfa-radius); box-shadow: var(--alfa-shadow-sm); color: inherit; transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease; } a.alfa-stat:hover, .alfa-stat:hover { color: inherit; text-decoration: none; box-shadow: var(--alfa-shadow-lg); border-color: var(--alfa-border-strong); transform: translateY(-2px); } .alfa-stat:focus-visible { outline: 2px solid var(--alfa-accent); outline-offset: 2px; } .alfa-stat__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .alfa-stat__label { margin: 0; font-size: .8125rem; font-weight: 500; line-height: 1.4; color: var(--alfa-text-muted); } .alfa-stat__icon { display: grid; place-items: center; flex: 0 0 auto; width: 38px; height: 38px; border-radius: 10px; font-size: .95rem; /* Fallback first — browsers without color-mix keep a visible tint */ background: var(--alfa-surface-2); background: color-mix(in srgb, var(--alfa-accent) 10%, transparent); color: var(--alfa-accent); } .alfa-stat__icon i { line-height: 1; } /* Per-card accents — used sparingly so the row still reads as one system */ .alfa-stat--success .alfa-stat__icon { background: var(--alfa-success-bg); color: var(--alfa-success); } .alfa-stat--warning .alfa-stat__icon { background: var(--alfa-warning-bg); color: var(--alfa-warning); } .alfa-stat--danger .alfa-stat__icon { background: var(--alfa-danger-bg); color: var(--alfa-danger); } .alfa-stat--info .alfa-stat__icon { background: var(--alfa-info-bg); color: var(--alfa-info); } .alfa-stat__value { margin: 0; font-size: 2rem; font-weight: 650; line-height: 1.1; letter-spacing: -0.03em; color: var(--alfa-text); } [dir="rtl"] .alfa-stat__value { letter-spacing: 0; } .alfa-stat__foot { display: flex; align-items: center; gap: 8px; margin-block-start: auto; font-size: .78rem; color: var(--alfa-text-subtle); } .alfa-stat__delta { display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; border-radius: 999px; font-weight: 600; font-size: .74rem; } .alfa-stat__delta--up { background: var(--alfa-success-bg); color: var(--alfa-success); } .alfa-stat__delta--down { background: var(--alfa-danger-bg); color: var(--alfa-danger); } .alfa-stat__delta--flat { background: var(--alfa-surface-2); color: var(--alfa-text-muted); } /* Arrow glyphs are directional, not linguistic — keep them LTR in RTL pages */ .alfa-stat__delta i { font-size: .68rem; } /* -------------------------------------------------------------------------- 7. Financial summary cards -------------------------------------------------------------------------- */ .alfa-fins { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--alfa-gap); margin-block-end: 28px; } .alfa-fin { display: flex; flex-direction: column; background: var(--alfa-surface); border: 1px solid var(--alfa-border); border-radius: var(--alfa-radius); box-shadow: var(--alfa-shadow-sm); overflow: hidden; } .alfa-fin__head { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-block-end: 1px solid var(--alfa-border); font-size: .875rem; font-weight: 600; color: var(--alfa-text); } .alfa-fin__head i { color: var(--alfa-text-subtle); font-size: .85rem; } .alfa-fin__rows { padding: 6px 18px 14px; } .alfa-fin__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-block: 11px; font-size: .875rem; border-block-end: 1px solid var(--alfa-border); } .alfa-fin__row:last-child { border-block-end: 0; padding-block-end: 4px; } .alfa-fin__row--total { margin-block-start: 4px; padding-block-start: 13px; border-block-start: 1px solid var(--alfa-border); font-weight: 650; } .alfa-fin__key { display: inline-flex; align-items: center; gap: 8px; color: var(--alfa-text-muted); } .alfa-fin__dot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; } .alfa-fin__dot--in { background: var(--alfa-success); } .alfa-fin__dot--out { background: var(--alfa-danger); } .alfa-fin__amount { font-weight: 600; color: var(--alfa-text); /* Amounts stay LTR even in Arabic: "1,240.00 ج.م" not "م.ج 00.240,1" */ direction: ltr; unicode-bidi: isolate; } .alfa-fin__amount--in { color: var(--alfa-success); } .alfa-fin__amount--out { color: var(--alfa-danger); } /* Income-vs-expense proportion bar */ .alfa-fin__bar { display: flex; height: 5px; margin: 0 18px 16px; border-radius: 999px; overflow: hidden; background: var(--alfa-border); } .alfa-fin__bar span { display: block; height: 100%; } .alfa-fin__bar .in { background: var(--alfa-success); } .alfa-fin__bar .out { background: var(--alfa-danger); } /* -------------------------------------------------------------------------- 8. Section headings + chart panels -------------------------------------------------------------------------- */ .alfa-section-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-block: 4px 16px; font-size: .9375rem; font-weight: 650; color: var(--alfa-text); } .alfa-panel { display: flex; flex-direction: column; /* Natural height, not 100%. Bootstrap's .row is a flex container, so its columns stretch to the tallest one; `height: 100%` then inflated every panel to fill that stretched column. A Driver card holding a name and a phone number ended up as ~500px of empty white beside a tall map, and the footer was pushed into the middle of the page. Panels that genuinely need to fill their column opt in with .alfa-panel--fill below. */ height: auto; background: var(--alfa-surface); border: 1px solid var(--alfa-border); border-radius: var(--alfa-radius); box-shadow: var(--alfa-shadow-sm); overflow: hidden; } /* Opt in where a panel should match the height of a taller sibling column. */ .alfa-panel--fill { height: 100%; } .alfa-panel__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-block-end: 1px solid var(--alfa-border); } .alfa-panel__title { margin: 0; font-size: .9375rem; font-weight: 600; color: var(--alfa-text); } .alfa-panel__hint { font-size: .78rem; color: var(--alfa-text-subtle); } .alfa-panel__body { padding: 12px 8px 4px; flex: 1 1 auto; min-height: 0; } .alfa-panel__foot { display: flex; flex-wrap: wrap; gap: 20px; padding: 14px 20px; border-block-start: 1px solid var(--alfa-border); background: var(--alfa-surface-2); } .alfa-legend { display: inline-flex; align-items: center; gap: 8px; font-size: .8125rem; color: var(--alfa-text-muted); } .alfa-legend__swatch { width: 9px; height: 9px; border-radius: 3px; flex: 0 0 auto; } .alfa-legend__value { font-weight: 650; color: var(--alfa-text); font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; } /* -------------------------------------------------------------------------- 9. Filter bar -------------------------------------------------------------------------- */ .alfa-filter { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .alfa-filter__field { position: relative; display: flex; align-items: center; } .alfa-filter__field i { position: absolute; inset-inline-start: 12px; font-size: .8rem; color: var(--alfa-text-subtle); pointer-events: none; } .alfa-filter__input { min-width: 230px; height: 38px; padding-inline: 34px 12px; background: var(--alfa-surface); border: 1px solid var(--alfa-border); border-radius: var(--alfa-radius-sm); color: var(--alfa-text); font-size: .875rem; transition: border-color .15s ease, box-shadow .15s ease; } .alfa-filter__input::placeholder { color: var(--alfa-text-subtle); } .alfa-filter__input:focus { outline: 0; border-color: var(--alfa-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--alfa-accent) 15%, transparent); } /* -------------------------------------------------------------------------- 10. Buttons -------------------------------------------------------------------------- */ .btn { border-radius: var(--alfa-radius-sm) !important; font-weight: 550; font-size: .875rem; padding: 8px 16px; transition: filter .15s ease, box-shadow .15s ease, background-color .15s ease; } .btn-sm { padding: 6px 12px; font-size: .8125rem; } .btn-primary { background-color: var(--alfa-accent) !important; border-color: var(--alfa-accent) !important; color: var(--alfa-accent-contrast) !important; box-shadow: var(--alfa-shadow-sm); } .btn-primary:hover, .btn-primary:focus { filter: brightness(.92); } .btn:focus-visible { outline: 2px solid var(--alfa-accent); outline-offset: 2px; box-shadow: none !important; } .alfa-btn-ghost { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 38px; padding-inline: 14px; background: var(--alfa-surface); border: 1px solid var(--alfa-border); border-radius: var(--alfa-radius-sm); color: var(--alfa-text-muted); font-size: .875rem; font-weight: 550; cursor: pointer; transition: background-color .15s ease, color .15s ease, border-color .15s ease; } .alfa-btn-ghost:hover { background: var(--alfa-surface-2); color: var(--alfa-text); border-color: var(--alfa-border-strong); } /* -------------------------------------------------------------------------- 11. Forms -------------------------------------------------------------------------- */ /* select2 gets its own treatment in section 23 — it does not inherit these */ .form-control, .custom-select { background-color: var(--alfa-surface) !important; border: 1px solid var(--alfa-border) !important; border-radius: var(--alfa-radius-sm) !important; color: var(--alfa-text) !important; font-size: .875rem; transition: border-color .15s ease, box-shadow .15s ease; } /* Match the height of the select2 boxes sitting beside them */ input.form-control:not([type="checkbox"]):not([type="radio"]), select.form-control { height: 38px; } textarea.form-control { height: auto; } .form-control:focus, .custom-select:focus { border-color: var(--alfa-accent) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--alfa-accent) 15%, transparent) !important; } .form-control::placeholder { color: var(--alfa-text-subtle) !important; } label { font-size: .8125rem; font-weight: 550; color: var(--alfa-text-muted); } /* -------------------------------------------------------------------------- 12. Tables -------------------------------------------------------------------------- */ .table { color: var(--alfa-text); font-size: .875rem; margin-block-end: 0; } .table > thead > tr > th, .table thead th { background: var(--alfa-surface-2) !important; border-block-end: 1px solid var(--alfa-border) !important; border-block-start: 0 !important; padding: 12px 16px !important; font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--alfa-text-muted) !important; white-space: nowrap; } [dir="rtl"] .table > thead > tr > th, [dir="rtl"] .table thead th { text-transform: none; letter-spacing: 0; font-size: .8125rem; } .table > tbody > tr > td, .table tbody td { padding: 13px 16px !important; border-block-end: 1px solid var(--alfa-border) !important; border-block-start: 0 !important; vertical-align: middle; color: var(--alfa-text); } .table > tbody > tr:last-child > td { border-block-end: 0 !important; } .table-hover > tbody > tr:hover, .table-hover > tbody > tr:hover > td { background-color: var(--alfa-surface-2) !important; color: var(--alfa-text); } .table-striped > tbody > tr:nth-of-type(odd) > * { background-color: transparent !important; } /* -------------------------------------------------------------------------- 13. Badges -------------------------------------------------------------------------- */ .badge { padding: 4px 9px; border-radius: 999px; font-size: .72rem; font-weight: 600; letter-spacing: 0; } .alfa-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; font-size: .74rem; font-weight: 600; } .alfa-badge--success { background: var(--alfa-success-bg); color: var(--alfa-success); } .alfa-badge--danger { background: var(--alfa-danger-bg); color: var(--alfa-danger); } .alfa-badge--warning { background: var(--alfa-warning-bg); color: var(--alfa-warning); } .alfa-badge--info { background: var(--alfa-info-bg); color: var(--alfa-info); } .alfa-badge--muted { background: var(--alfa-surface-2); color: var(--alfa-text-muted); } /* -------------------------------------------------------------------------- 14. Sidebar -------------------------------------------------------------------------- */ .offcanvas-nav, .nav-left-sidebar, .nav-left-sidebar.sidebar-dark { background: var(--alfa-sidebar-bg) !important; } .offcanvas-nav { border-inline-end: 1px solid rgba(255, 255, 255, .06); } .offcanvas-header { padding: 18px 20px !important; border-block-end: 1px solid rgba(255, 255, 255, .07); } .nav-left-sidebar .navbar-nav { padding: 12px 12px 32px; gap: 1px; } /* Section label between menu groups */ .nav-left-sidebar .nav-divider { padding: 18px 12px 8px; /* style.css's .sidebar-dark .nav-divider adds its own 20px margin-top, sized for when the divider sat right under the old fixed topbar. Now that alfa-theme.js inserts the quick-filter box directly above the menu, that margin doubled up with this rule's own top padding and the navsearch's bottom padding into one large gap before the first label. */ margin-block-start: 0 !important; font-size: .69rem; font-weight: 600; text-transform: uppercase; letter-spacing: .09em; color: rgba(255, 255, 255, .32); } /* --- sidebar count badge ------------------------------------------------- Sits at the end of the link. `margin-inline-start: auto` rather than a float so it lands on the correct edge in RTL without a second rule. */ .alfa-nav-badge { display: inline-grid; place-items: center; min-width: 20px; height: 20px; margin-inline-start: auto; padding: 0 6px; font-size: .6875rem; font-weight: 650; font-variant-numeric: tabular-nums; line-height: 1; color: #fff; background: var(--alfa-accent); border-radius: 10px; } /* The link is the flex row the badge pushes itself to the end of. */ .nav-left-sidebar .nav-link:has(.alfa-nav-badge) { display: flex; align-items: center; } [dir="rtl"] .nav-left-sidebar .nav-divider { text-transform: none; letter-spacing: 0; font-size: .75rem; } .nav-left-sidebar .navbar-nav > .nav-item > .nav-link, .nav-left-sidebar .nav-link { display: flex; align-items: center; gap: 11px; padding: 10px 12px !important; margin-block: 1px; border-radius: var(--alfa-radius-sm); color: var(--alfa-sidebar-fg) !important; font-size: .875rem; font-weight: 500; line-height: 1.3; transition: background-color .15s ease, color .15s ease; } .nav-left-sidebar .nav-link i { flex: 0 0 auto; width: 18px; font-size: .95rem; text-align: center; /* Legacy theme spaces icons with margin-right; logical prop handles RTL */ margin-inline-end: 0 !important; margin-right: 0 !important; margin-left: 0 !important; opacity: .85; } .nav-left-sidebar .nav-link:hover { background: var(--alfa-sidebar-hover); color: var(--alfa-sidebar-fg-strong) !important; } .nav-left-sidebar .nav-link.active { /* Fallback first — see note on .alfa-stat__icon */ background: rgba(255, 255, 255, .10); background: color-mix(in srgb, var(--alfa-accent) 20%, transparent); color: #fff !important; font-weight: 600; } .nav-left-sidebar .nav-link.active i { opacity: 1; color: #fff; } /* Collapsible parent gets a chevron that rotates when open */ .nav-left-sidebar .nav-link[data-toggle="collapse"], .nav-left-sidebar .nav-link[data-bs-toggle="collapse"] { position: relative; padding-inline-end: 34px !important; } .nav-left-sidebar .nav-link[data-toggle="collapse"]::after, .nav-left-sidebar .nav-link[data-bs-toggle="collapse"]::after { content: ""; position: absolute; inset-inline-end: 12px; top: 50%; width: 6px; height: 6px; border-inline-end: 1.6px solid currentColor; border-block-end: 1.6px solid currentColor; opacity: .5; transform: translateY(-70%) rotate(45deg); transition: transform .2s ease; } .nav-left-sidebar .nav-link[data-toggle="collapse"][aria-expanded="true"]::after, .nav-left-sidebar .nav-link[data-bs-toggle="collapse"][aria-expanded="true"]::after { transform: translateY(-30%) rotate(-135deg); opacity: .8; } /* Submenu — indented with a guide rail */ .nav-left-sidebar .submenu { position: relative; margin: 2px 0 4px; padding-inline-start: 26px; } .nav-left-sidebar .submenu::before { content: ""; position: absolute; inset-inline-start: 21px; top: 4px; bottom: 4px; width: 1px; background: rgba(255, 255, 255, .10); } .nav-left-sidebar .submenu .nav-link { padding: 8px 12px !important; font-size: .8125rem; font-weight: 450; color: rgba(255, 255, 255, .55) !important; } .nav-left-sidebar .submenu .nav-link:hover { color: var(--alfa-sidebar-fg-strong) !important; background: var(--alfa-sidebar-hover); } .nav-left-sidebar .submenu .nav-link.active { background: transparent; color: #fff !important; font-weight: 600; } .nav-left-sidebar .submenu .nav-link.active::before { content: ""; position: absolute; inset-inline-start: 21px; width: 1px; height: 17px; background: var(--alfa-accent); } /* Scrollbar inside the sidebar */ .offcanvas-nav ::-webkit-scrollbar, .nav-left-sidebar ::-webkit-scrollbar { width: 6px; } .offcanvas-nav ::-webkit-scrollbar-thumb, .nav-left-sidebar ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .13); border-radius: 3px; } /* Sidebar quick-filter, injected by alfa-theme.js */ .alfa-navsearch { position: relative; padding: 12px 12px 4px; } .alfa-navsearch i { position: absolute; inset-inline-start: 24px; top: 50%; transform: translateY(-30%); font-size: .78rem; color: rgba(255, 255, 255, .35); pointer-events: none; } .alfa-navsearch input { width: 100%; height: 36px; padding-inline: 32px 12px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .09); border-radius: var(--alfa-radius-sm); color: #fff; font-size: .8125rem; transition: border-color .15s ease, background-color .15s ease; } .alfa-navsearch input::placeholder { color: rgba(255, 255, 255, .35); } .alfa-navsearch input:focus { outline: 0; background: rgba(255, 255, 255, .09); border-color: color-mix(in srgb, var(--alfa-accent) 55%, transparent); } .alfa-nav-hidden { display: none !important; } .alfa-navsearch__empty { display: none; padding: 14px 16px; font-size: .8125rem; color: rgba(255, 255, 255, .4); } .alfa-navsearch__empty.is-shown { display: block; } /* -------------------------------------------------------------------------- 15. Topbar -------------------------------------------------------------------------- The legacy markup nests three navbars inside each other. Rather than replace it, restyle every layer that paints a background so the bar reads as one surface in both themes. */ nav.navbar.center-nav, nav.navbar.center-nav.transparent, .dashboard-header, .dashboard-header .navbar, .navbar-light, nav.navbar.fixed-top:not(.sidebarNavigation) { background: var(--alfa-surface) !important; border-color: var(--alfa-border) !important; box-shadow: none !important; } /* Only the outermost bar carries the divider and elevation */ nav.navbar.center-nav.transparent { border-block-end: 1px solid var(--alfa-border) !important; box-shadow: var(--alfa-shadow-sm) !important; padding: 0 !important; } .dashboard-header .navbar { padding: 0 20px !important; min-height: var(--alfa-topbar-h) !important; border-block-end: 0 !important; } .dashboard-main-wrapper, main.dashboard-ecommerce { background: var(--alfa-bg) !important; } /* --- Action cluster ---------------------------------------------------- The legacy theme gives every .nav-item a `border-right` divider, which lands on the wrong side in RTL and chops the row into uneven cells. Drop the dividers and treat the controls as one evenly-spaced group. */ .navbar-right-top, .navbar-other .navbar-nav { display: flex; align-items: center; gap: 4px; } .navbar-right-top .nav-item, .navbar-other .nav-item { display: flex; align-items: center; border: 0 !important; margin: 0 !important; padding: 0 !important; } /* Every control lands on the same 40px square, so the row reads as a set */ .navbar-right-top .nav-item .nav-link, .navbar-right-top .nav-link.nav-icons, .navbar-globe, .navbar-other .nav-link.nav-icons { display: inline-grid !important; place-items: center; width: 40px; height: 40px; padding: 0 !important; margin: 0 !important; border-radius: var(--alfa-radius-sm); font-size: 1rem !important; line-height: 1 !important; color: var(--alfa-text-muted) !important; transition: background-color .15s ease, color .15s ease; } .navbar-right-top .nav-item .nav-link:hover, .navbar-right-top .nav-link.nav-icons:hover, .navbar-globe:hover, .navbar-other .nav-link.nav-icons:hover { background: var(--alfa-surface-2); color: var(--alfa-text) !important; } .navbar-right-top .nav-link:focus-visible, .navbar-globe:focus-visible { outline: 2px solid var(--alfa-accent); outline-offset: 2px; } /* The globe sits in a bare , not a .nav-link — normalise it too */ .navbar-right-top .notification > a:not(.nav-link), .navbar-other .notification > a:not(.nav-link) { display: inline-grid; place-items: center; width: 40px; height: 40px; margin: 0 !important; border-radius: var(--alfa-radius-sm); color: var(--alfa-text-muted); font-size: 1rem; transition: background-color .15s ease, color .15s ease; } .navbar-right-top .notification > a:not(.nav-link):hover, .navbar-other .notification > a:not(.nav-link):hover { background: var(--alfa-surface-2); color: var(--alfa-text); } /* A single hairline separates the icon cluster from the identity cluster */ .navbar-right-top .nav-item.nav-user { margin-inline-start: 6px !important; padding-inline-start: 10px !important; border-inline-start: 1px solid var(--alfa-border) !important; } /* Notification dot — anchored to the icon square, not the old line-height */ .navbar-right-top .nav-link.nav-icons, .navbar-other .nav-link.nav-icons { position: relative; } .navbar-right-top .indicator, .navbar-other .indicator, .admin-panel.notification .nav-link.nav-icons .indicator, .merchant-panel.notification .nav-link.nav-icons .indicator { position: absolute !important; top: 8px !important; inset-inline-end: 9px !important; left: auto !important; right: auto !important; width: 7px !important; height: 7px !important; border-radius: 50% !important; background: var(--alfa-danger) !important; border: 2px solid var(--alfa-surface) !important; box-sizing: content-box; } [dir="rtl"] .navbar-right-top .indicator, [dir="rtl"] .navbar-other .indicator, [dir="rtl"] .admin-panel.notification .nav-link.nav-icons .indicator { inset-inline-end: 9px !important; } /* To-Do button — a quiet action, not the loudest thing on the bar */ .navbar-right-top .connection .btn, .navbar-other .connection .btn, #todoModal1 { display: inline-flex !important; align-items: center; gap: 7px; height: 38px; margin: 0 4px !important; padding: 0 14px !important; border-radius: var(--alfa-radius-sm) !important; font-size: .875rem; font-weight: 550; white-space: nowrap; box-shadow: none !important; } /* Avatar — sized to match the icon squares */ .nav-user-img { padding: 0 !important; width: auto !important; height: auto !important; } .user-avatar-md { width: 36px !important; height: 36px !important; object-fit: cover; border: 1px solid var(--alfa-border); transition: border-color .15s ease; } .nav-user-img:hover .user-avatar-md { border-color: var(--alfa-accent); } /* Language switcher — same footprint as the icon buttons */ .lang-dropdown .btn, .changeLocale .btn { display: inline-flex !important; align-items: center; gap: 7px; height: 40px; padding: 0 10px !important; white-space: nowrap; } .lang-dropdown .btn .flag-icon, .lang-dropdown .dropdown-item .flag-icon { width: 20px; height: 14px; border-radius: 2px; flex: 0 0 auto; } /* Bootstrap draws a caret on these toggles; the language button already reads as a menu, and the avatar does not need one. */ .nav-user .dropdown-toggle::after, .notification .dropdown-toggle::after { display: none !important; } /* The wrapper Blade puts around the language dropdown adds stray gutters */ .navbar-right-top .nav-item.lang .form-group { margin: 0 !important; padding: 0 !important; } /* User dropdown header — the legacy rule hard-codes white text */ .nav-user-dropdown .nav-user-info { padding: 12px 16px; border-block-end: 1px solid var(--alfa-border); background: var(--alfa-surface-2); } .nav-user-dropdown .nav-user-name, .nav-user-info .nav-user-name.text-white { color: var(--alfa-text) !important; font-size: .875rem; font-weight: 600; } /* Mobile: the same cluster, tightened */ @media (max-width: 991.98px) { .navbar-other .navbar-nav { gap: 2px; } .navbar-right-top .connection .btn, .navbar-other .connection .btn, #todoModal1 { padding: 0 10px !important; } .offcanvas-nav-btn { display: inline-grid; place-items: center; width: 40px; height: 40px; margin-inline-start: 4px; padding: 0; background: transparent; border: 0; border-radius: var(--alfa-radius-sm); color: var(--alfa-text-muted); } .offcanvas-nav-btn:hover { background: var(--alfa-surface-2); } } /* Anything the topbar renders as plain text/links follows the theme */ .dashboard-header .navbar a:not(.btn), .navbar-right-top .nav-link, .navbar-other .nav-link { color: var(--alfa-text-muted) !important; } .dashboard-header .navbar a:not(.btn):hover, .navbar-right-top .nav-link:hover, .navbar-other .nav-link:hover { color: var(--alfa-text) !important; } /* --- Language switcher ------------------------------------------------- custom.css hard-codes `color: #212529 !important` on this button, which renders black-on-dark. Re-assert it against the theme token. */ .lang-dropdown .btn, .lang-dropdown .btn.dropdown-toggle, .lang-dropdown #dropdownMenuButton, .changeLocale .btn { color: var(--alfa-text) !important; background: transparent !important; border: 1px solid transparent !important; border-radius: var(--alfa-radius-sm) !important; font-size: .875rem; font-weight: 500; } .lang-dropdown .btn:hover, .changeLocale .btn:hover { background: var(--alfa-surface-2) !important; color: var(--alfa-text) !important; } .lang-dropdown .btn:focus-visible { outline: 2px solid var(--alfa-accent); outline-offset: 2px; } .lang-dropdown .dropdown-item, .changeLocale .dropdown-item { color: var(--alfa-text) !important; display: flex; align-items: center; gap: 9px; /* custom.css pads with padding-left, which lands on the wrong side in RTL */ padding-inline: 12px !important; padding-left: 12px !important; } .lang-dropdown .dropdown-item:hover, .changeLocale .dropdown-item:hover { background: var(--alfa-surface-2) !important; color: var(--alfa-text) !important; } /* --- Footer ------------------------------------------------------------ style.css sets `.footer { background-color: #fff }`. The `fixed-bottom` class was also dropped from the markup so the footer sits at the end of the page instead of floating over the sidebar and content. */ .footer, .footer.fixed-bottom { position: static !important; background-color: var(--alfa-surface) !important; border-top: 1px solid var(--alfa-border) !important; color: var(--alfa-text-muted) !important; /* Clear the sidebar's column rather than overlapping it */ margin-block-start: auto; /* custom.css gives .footer its own `margin-left: 264px` to clear the sidebar, but the markup sits *inside* .main-content, which is already offset by that much. Keeping both pushed the footer a full sidebar width past the right edge and put a horizontal scrollbar on every page. */ margin-inline: 0 !important; z-index: auto !important; } /* Push the footer to the viewport bottom on short pages without pinning it. The footer markup lives *inside* .main-content, so that is the flex column and .dashboard-content is the element that grows. */ main.dashboard-ecommerce { /* style.css reserves 50px for the old fixed footer — no longer needed */ margin-bottom: 0 !important; } main.dashboard-ecommerce > .main-content { display: flex; flex-direction: column; /* Subtract the fixed topbar, otherwise the page is always taller than the viewport and shows a scrollbar even when there is nothing to scroll. */ min-height: calc(100vh - var(--alfa-topbar-h)); /* Contain any child that measures wider than the column (wide tables, the Places autocomplete dropdown, third-party widgets) instead of letting it put a horizontal scrollbar on the whole window. `clip` rather than `hidden`: hidden would make this a scroll container, which reparents every `position: sticky` descendant to it — and since the column has no bounded height, the sticky .alfa-form-actions Save bar would stop pinning to the viewport on long forms. `clip` contains the overflow without creating a scrollport, so sticky keeps working. `hidden` stays as the fallback for engines without `clip` (pre-2022 Safari). */ overflow-x: hidden; overflow-x: clip; } /* Every direct child except the footer grows, so pages that use a different wrapper than .dashboard-content still push the footer down. */ main.dashboard-ecommerce > .main-content > *:not(.footer) { flex: 0 0 auto; } main.dashboard-ecommerce > .main-content > .dashboard-content, main.dashboard-ecommerce > .main-content > .container-fluid { flex: 1 0 auto; } .footer-text, .footer .footer-text, .footer a { color: var(--alfa-text-muted) !important; } .footer a:hover { color: var(--alfa-text) !important; } .navbar-right-top { align-items: center; gap: 4px; } .navbar-right-top .nav-link.nav-icons, .navbar-globe { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: var(--alfa-radius-sm); color: var(--alfa-text-muted) !important; font-size: 1rem; transition: background-color .15s ease, color .15s ease; } .navbar-right-top .nav-link.nav-icons:hover, .navbar-globe:hover { background: var(--alfa-surface-2); color: var(--alfa-text) !important; } /* Theme toggle, injected by alfa-theme.js */ .alfa-theme-toggle { display: inline-grid; place-items: center; /* Matches the 40px square shared by every other control on the bar */ width: 40px; height: 40px; border: 0; border-radius: var(--alfa-radius-sm); background: transparent; color: var(--alfa-text-muted); font-size: 1rem; cursor: pointer; transition: background-color .15s ease, color .15s ease; } .alfa-theme-toggle:hover { background: var(--alfa-surface-2); color: var(--alfa-text); } .alfa-theme-toggle:focus-visible { outline: 2px solid var(--alfa-accent); outline-offset: 2px; } .alfa-theme-toggle .alfa-icon-sun { display: none; } [data-alfa-theme="dark"] .alfa-theme-toggle .alfa-icon-sun { display: block; } [data-alfa-theme="dark"] .alfa-theme-toggle .alfa-icon-moon { display: none; } /* Notification dot */ .navbar-right-top .indicator, .notification .indicator { width: 7px !important; height: 7px !important; border-radius: 50% !important; background: var(--alfa-danger) !important; border: 2px solid var(--alfa-surface) !important; box-sizing: content-box; } .dropdown-menu { background: var(--alfa-surface) !important; border: 1px solid var(--alfa-border) !important; border-radius: var(--alfa-radius) !important; box-shadow: var(--alfa-shadow-lg) !important; padding: 6px !important; } .dropdown-item { border-radius: var(--alfa-radius-sm) !important; padding: 8px 12px !important; font-size: .875rem; color: var(--alfa-text) !important; } .dropdown-item:hover, .dropdown-item:focus { background: var(--alfa-surface-2) !important; color: var(--alfa-text) !important; } .dropdown-divider { border-color: var(--alfa-border) !important; } .notification-dropdown { width: min(360px, calc(100vw - 32px)); padding: 0 !important; } .notification-title { padding: 13px 16px; border-block-end: 1px solid var(--alfa-border); font-size: .875rem; font-weight: 600; color: var(--alfa-text); } .notification-list { max-height: 340px; overflow-y: auto; } .notification-list .list-group-item { background: transparent !important; border: 0 !important; border-block-end: 1px solid var(--alfa-border) !important; padding: 12px 16px !important; font-size: .8125rem; color: var(--alfa-text); } .notification-list .list-group-item:hover { background: var(--alfa-surface-2) !important; } /* -------------------------------------------------------------------------- 16. Legacy list-group (used by statement panels elsewhere) -------------------------------------------------------------------------- */ .list-group-item, .profile-list-group-item { background: var(--alfa-surface) !important; border-color: var(--alfa-border) !important; color: var(--alfa-text) !important; font-size: .875rem; padding: 12px 16px !important; } .list-group-item:first-child { border-start-start-radius: var(--alfa-radius) !important; border-start-end-radius: var(--alfa-radius) !important; } .list-group-item:last-child { border-end-start-radius: var(--alfa-radius) !important; border-end-end-radius: var(--alfa-radius) !important; } /* -------------------------------------------------------------------------- 17. Third-party surfaces -------------------------------------------------------------------------- */ .apexcharts-tooltip { background: var(--alfa-surface) !important; border: 1px solid var(--alfa-border) !important; border-radius: var(--alfa-radius-sm) !important; box-shadow: var(--alfa-shadow-lg) !important; color: var(--alfa-text) !important; } .apexcharts-tooltip-title { background: var(--alfa-surface-2) !important; border-block-end: 1px solid var(--alfa-border) !important; font-weight: 600; } .apexcharts-text tspan, .apexcharts-legend-text { fill: var(--alfa-text-muted) !important; color: var(--alfa-text-muted) !important; font-family: var(--alfa-font) !important; } .apexcharts-gridline { stroke: var(--alfa-border) !important; } .dataTables_wrapper .dataTables_filter input, .dataTables_wrapper .dataTables_length select { background: var(--alfa-surface) !important; border: 1px solid var(--alfa-border) !important; border-radius: var(--alfa-radius-sm) !important; color: var(--alfa-text) !important; padding: 6px 10px !important; } .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter { color: var(--alfa-text-muted) !important; font-size: .8125rem; } .page-link { background: var(--alfa-surface) !important; border-color: var(--alfa-border) !important; color: var(--alfa-text-muted) !important; font-size: .875rem; } .page-item.active .page-link { background: var(--alfa-accent) !important; border-color: var(--alfa-accent) !important; color: var(--alfa-accent-contrast) !important; } /* select2 is fully themed in section 23 */ .modal-content { background: var(--alfa-surface) !important; border: 1px solid var(--alfa-border) !important; border-radius: var(--alfa-radius-lg) !important; box-shadow: var(--alfa-shadow-lg) !important; } .modal-header, .modal-footer { border-color: var(--alfa-border) !important; padding: 16px 20px !important; } /* -------------------------------------------------------------------------- 18. Calendar panel -------------------------------------------------------------------------- */ .bootstrap-datetimepicker-widget { background: var(--alfa-surface) !important; color: var(--alfa-text) !important; } .bootstrap-datetimepicker-widget table td, .bootstrap-datetimepicker-widget table th { color: var(--alfa-text); } .bootstrap-datetimepicker-widget table td.day:hover { background: var(--alfa-surface-2) !important; } .bootstrap-datetimepicker-widget table td.active, .bootstrap-datetimepicker-widget table td.active:hover { background: var(--alfa-accent) !important; color: var(--alfa-accent-contrast) !important; } .bootstrap-datetimepicker-widget table td.today::before { border-block-end-color: var(--alfa-accent) !important; } /* -------------------------------------------------------------------------- 19. Motion & responsive -------------------------------------------------------------------------- */ @media (max-width: 991.98px) { .alfa-stats { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; } .alfa-stat { min-height: 118px; padding: 16px; } .alfa-stat__value { font-size: 1.6rem; } .dashboard-content { padding-block: 18px 32px !important; } } @media (max-width: 575.98px) { .alfa-stats { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } .alfa-filter__input { min-width: 0; width: 100%; } .alfa-filter { width: 100%; } .alfa-filter__field { flex: 1 1 auto; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } .alfa-stat:hover { transform: none; } } @media print { .alfa-theme-toggle, .alfa-navsearch, .alfa-filter { display: none !important; } .alfa-stat, .card, .alfa-panel, .alfa-fin { box-shadow: none !important; border: 1px solid #ddd !important; break-inside: avoid; } } /* -------------------------------------------------------------------------- 20. Maintenance mode page -------------------------------------------------------------------------- */ .alfa-mm-status { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding: 22px 24px; margin-block-end: 24px; background: var(--alfa-surface); border: 1px solid var(--alfa-border); border-radius: var(--alfa-radius); box-shadow: var(--alfa-shadow-sm); } /* A coloured rail on the inline-start edge reads correctly in both directions */ .alfa-mm-status--live { border-inline-start: 4px solid var(--alfa-success); } .alfa-mm-status--down { border-inline-start: 4px solid var(--alfa-warning); } .alfa-mm-status__icon { display: grid; place-items: center; flex: 0 0 auto; width: 48px; height: 48px; border-radius: 50%; font-size: 1.25rem; } .alfa-mm-status--live .alfa-mm-status__icon { background: var(--alfa-success-bg); color: var(--alfa-success); } .alfa-mm-status--down .alfa-mm-status__icon { background: var(--alfa-warning-bg); color: var(--alfa-warning); } .alfa-mm-status__body { flex: 1 1 240px; min-width: 0; } .alfa-mm-status__title { margin: 0 0 4px; font-size: 1.05rem; font-weight: 650; } .alfa-mm-status__hint { margin: 0; font-size: .875rem; line-height: 1.6; color: var(--alfa-text-muted); } .alfa-mm-status__meta { margin: 8px 0 0; font-size: .8125rem; color: var(--alfa-text-subtle); } .alfa-mm-status__action { flex: 0 0 auto; } .alfa-mm-status__action .btn { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; } /* Bypass link block */ .alfa-mm-bypass { padding: 20px 24px; margin-block-end: 24px; background: var(--alfa-warning-bg); border: 1px solid color-mix(in srgb, var(--alfa-warning) 30%, transparent); border-radius: var(--alfa-radius); } .alfa-mm-bypass__head { display: flex; align-items: center; gap: 9px; margin-block-end: 12px; font-size: .9375rem; font-weight: 650; color: var(--alfa-warning); } .alfa-mm-bypass__row { display: flex; gap: 8px; flex-wrap: wrap; } .alfa-mm-bypass__input { flex: 1 1 280px; min-width: 0; height: 38px; padding-inline: 12px; background: var(--alfa-surface); border: 1px solid var(--alfa-border); border-radius: var(--alfa-radius-sm); color: var(--alfa-text); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .8125rem; /* URLs are always LTR, even on an Arabic page */ direction: ltr; } .alfa-mm-bypass__hint { margin: 12px 0 0; font-size: .8125rem; line-height: 1.6; color: var(--alfa-text-muted); } .alfa-mm-help { display: block; margin-block-start: 6px; font-size: .78rem; color: var(--alfa-text-subtle); } .alfa-mm-check { display: flex; align-items: center; gap: 9px; margin-block-end: 10px; font-size: .875rem; color: var(--alfa-text); cursor: pointer; } .alfa-mm-check input { width: 16px; height: 16px; accent-color: var(--alfa-accent); cursor: pointer; flex: 0 0 auto; } /* -------------------------------------------------------------------------- 21. Permission picker (roles + user permissions) -------------------------------------------------------------------------- */ .alfa-perm__toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 14px 18px; border-block-end: 1px solid var(--alfa-border); background: var(--alfa-surface-2); } .alfa-perm__toolbar-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .alfa-perm__search { position: relative; display: flex; align-items: center; flex: 1 1 240px; max-width: 340px; } .alfa-perm__search i { position: absolute; inset-inline-start: 12px; font-size: .8rem; color: var(--alfa-text-subtle); pointer-events: none; } .alfa-perm__search input { width: 100%; height: 38px; padding-inline: 34px 12px; background: var(--alfa-surface); border: 1px solid var(--alfa-border); border-radius: var(--alfa-radius-sm); color: var(--alfa-text); font-size: .875rem; transition: border-color .15s ease, box-shadow .15s ease; } .alfa-perm__search input::placeholder { color: var(--alfa-text-subtle); } .alfa-perm__search input:focus { outline: 0; border-color: var(--alfa-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--alfa-accent) 15%, transparent); } .alfa-perm__counter { padding: 5px 11px; border-radius: 999px; background: var(--alfa-surface); border: 1px solid var(--alfa-border); font-size: .8125rem; font-weight: 600; color: var(--alfa-text-muted); font-variant-numeric: tabular-nums; /* Counts read left-to-right even on an Arabic page */ direction: ltr; unicode-bidi: isolate; } /* Modules laid out as cards instead of one tall column */ .alfa-perm__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; padding: 18px; max-height: 620px; overflow-y: auto; } .alfa-perm__module { display: flex; flex-direction: column; background: var(--alfa-surface); border: 1px solid var(--alfa-border); border-radius: var(--alfa-radius); overflow: hidden; transition: border-color .15s ease, box-shadow .15s ease; } .alfa-perm__module.is-active { border-color: color-mix(in srgb, var(--alfa-accent) 45%, var(--alfa-border)); box-shadow: var(--alfa-shadow-sm); } .alfa-perm__module.is-hidden, .alfa-perm__option.is-hidden { display: none !important; } .alfa-perm__module-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 14px; border-block-end: 1px solid var(--alfa-border); background: var(--alfa-surface-2); } .alfa-perm__module-toggle { display: flex; align-items: center; gap: 9px; margin: 0; min-width: 0; cursor: pointer; } .alfa-perm__module-name { font-size: .875rem; font-weight: 600; color: var(--alfa-text); /* Long module names wrap instead of being clipped */ overflow-wrap: anywhere; } .alfa-perm__module-count { flex: 0 0 auto; font-size: .72rem; font-weight: 600; color: var(--alfa-text-subtle); font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; } .alfa-perm__options { padding: 6px; } .alfa-perm__option { display: flex; align-items: flex-start; gap: 9px; margin: 0; padding: 8px 9px; border-radius: var(--alfa-radius-sm); cursor: pointer; transition: background-color .12s ease; } .alfa-perm__option:hover { background: var(--alfa-surface-2); } .alfa-perm__option-text { font-size: .8125rem; line-height: 1.45; color: var(--alfa-text-muted); /* The legacy rule clipped labels to 90% width; let them wrap instead */ overflow-wrap: anywhere; } .alfa-perm__option input:checked ~ .alfa-perm__option-text { color: var(--alfa-text); font-weight: 500; } /* One checkbox style for the whole picker. The legacy `.permission-check-box` rules set a physical margin-right, which lands on the wrong side in RTL. */ .alfa-perm__option input[type="checkbox"], .alfa-perm__module-toggle input[type="checkbox"] { flex: 0 0 auto; width: 17px !important; height: 17px !important; margin: 1px 0 0 !important; accent-color: var(--alfa-accent); cursor: pointer; } .alfa-perm__module-toggle input[type="checkbox"] { margin-top: 0 !important; } .alfa-perm__option input:focus-visible, .alfa-perm__module-toggle input:focus-visible { outline: 2px solid var(--alfa-accent); outline-offset: 2px; } .alfa-perm__empty { display: none; margin: 0; padding: 28px 18px; text-align: center; font-size: .875rem; color: var(--alfa-text-subtle); } .alfa-perm__empty.is-shown { display: block; } /* Sticky action bar so Save stays reachable on long forms */ .alfa-form-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; position: sticky; bottom: 0; z-index: 5; padding: 14px 18px; margin-block-start: 4px; background: var(--alfa-surface); border: 1px solid var(--alfa-border); border-radius: var(--alfa-radius); box-shadow: var(--alfa-shadow); } .alfa-form-actions .btn { display: inline-flex; align-items: center; gap: 8px; } @media (max-width: 575.98px) { .alfa-perm__grid { grid-template-columns: 1fr; padding: 12px; max-height: none; } .alfa-perm__toolbar { padding: 12px; } .alfa-perm__search { max-width: none; } } /* -------------------------------------------------------------------------- 22. List pages (filters, table toolbar, data cells) -------------------------------------------------------------------------- */ /* --- Filter block --- */ .alfa-panel__title-icon { margin-inline-end: 7px; font-size: .82rem; color: var(--alfa-text-subtle); } .alfa-link-reset { display: inline-flex; align-items: center; gap: 6px; color: var(--alfa-text-muted) !important; font-size: .8125rem; } .alfa-link-reset:hover { color: var(--alfa-danger) !important; } .alfa-filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; } .alfa-filters__field { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .alfa-filters__field label { margin: 0; font-size: .78rem; font-weight: 600; color: var(--alfa-text-muted); } .alfa-filters__actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-block-start: 16px; padding-block-start: 16px; border-block-start: 1px solid var(--alfa-border); } .alfa-btn-ghost--sm { height: 32px; padding-inline: 11px; font-size: .8125rem; } /* --- Table toolbar --- */ .alfa-tablebar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 14px 18px; border-block-end: 1px solid var(--alfa-border); background: var(--alfa-surface-2); } .alfa-tablebar__search { display: flex; align-items: center; gap: 8px; flex: 1 1 260px; max-width: 420px; margin: 0; } .alfa-tablebar__searchfield { position: relative; display: flex; align-items: center; flex: 1 1 auto; min-width: 0; } .alfa-tablebar__searchfield i { position: absolute; inset-inline-start: 12px; font-size: .8rem; color: var(--alfa-text-subtle); pointer-events: none; } .alfa-tablebar__searchfield input { width: 100%; height: 38px; padding-inline: 34px 12px; background: var(--alfa-surface); border: 1px solid var(--alfa-border); border-radius: var(--alfa-radius-sm); color: var(--alfa-text); font-size: .875rem; transition: border-color .15s ease, box-shadow .15s ease; } .alfa-tablebar__searchfield input::placeholder { color: var(--alfa-text-subtle); } .alfa-tablebar__searchfield input:focus { outline: 0; border-color: var(--alfa-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--alfa-accent) 15%, transparent); } .alfa-tablebar__bulk { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .alfa-tablebar__bulk form { margin: 0; } /* select2 renders its own box; match it to the other controls */ .alfa-tablebar__bulk .select2-container .select2-selection--single, .alfa-tablebar__bulk select { height: 38px !important; min-width: 190px; border-radius: var(--alfa-radius-sm) !important; } .alfa-tablebar__bulk .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 36px !important; } .alfa-tablebar__bulk .select2-container--default .select2-selection--single .select2-selection__arrow { height: 36px !important; } /* --- Row action menu --- */ .alfa-rowmenu { position: relative; } .alfa-rowmenu__btn { display: inline-grid; place-items: center; width: 32px; height: 32px; padding: 0; background: transparent; border: 1px solid transparent; border-radius: var(--alfa-radius-sm); color: var(--alfa-text-muted); font-size: .9rem; cursor: pointer; transition: background-color .15s ease, color .15s ease, border-color .15s ease; } .alfa-rowmenu__btn:hover { background: var(--alfa-surface-2); border-color: var(--alfa-border); color: var(--alfa-text); } .alfa-rowmenu__btn--accent { background: color-mix(in srgb, var(--alfa-accent) 12%, transparent); color: var(--alfa-accent); } .alfa-rowmenu__btn--accent:hover { background: var(--alfa-accent); color: var(--alfa-accent-contrast); border-color: var(--alfa-accent); } .alfa-rowmenu .dropdown-item { display: flex; align-items: center; gap: 9px; width: 100%; border: 0; background: transparent; text-align: start; } .alfa-rowmenu .dropdown-item i { width: 15px; font-size: .8rem; color: var(--alfa-text-subtle); flex: 0 0 auto; } .alfa-dropdown-item--danger, .alfa-dropdown-item--danger i { color: var(--alfa-danger) !important; } .alfa-dropdown-item--danger:hover { background: var(--alfa-danger-bg) !important; color: var(--alfa-danger) !important; } .alfa-rowmenu form { margin: 0; } /* --- Cell content --- */ .alfa-track { display: inline-flex; flex-direction: column; gap: 2px; color: inherit !important; } .alfa-track__label { font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; color: var(--alfa-text-subtle); } [dir="rtl"] .alfa-track__label { text-transform: none; letter-spacing: 0; font-size: .72rem; } .alfa-track__id { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .82rem; font-weight: 600; color: var(--alfa-accent); /* Tracking ids are identifiers, always left-to-right */ direction: ltr; unicode-bidi: isolate; } .alfa-track:hover .alfa-track__id { text-decoration: underline; } .alfa-contact { display: flex; flex-direction: column; gap: 3px; min-width: 150px; max-width: 230px; } .alfa-contact__row { display: flex; align-items: flex-start; gap: 7px; font-size: .8rem; line-height: 1.45; color: var(--alfa-text-muted); overflow-wrap: anywhere; } .alfa-contact__row i { width: 12px; margin-block-start: 3px; font-size: .7rem; color: var(--alfa-text-subtle); flex: 0 0 auto; } .alfa-contact__row--name { font-weight: 600; color: var(--alfa-text); } .alfa-money { display: flex; flex-direction: column; gap: 3px; min-width: 170px; } .alfa-money__row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: .8rem; } .alfa-money__key { color: var(--alfa-text-muted); } .alfa-money__val { font-weight: 600; color: var(--alfa-text); font-variant-numeric: tabular-nums; white-space: nowrap; /* Amounts keep their own direction inside Arabic text */ direction: ltr; unicode-bidi: isolate; } .alfa-money__row--total { margin-block-start: 3px; padding-block-start: 5px; border-block-start: 1px solid var(--alfa-border); } .alfa-money__row--total .alfa-money__key { font-weight: 600; color: var(--alfa-text); } .alfa-money__row--total .alfa-money__val { color: var(--alfa-accent); } .alfa-statuscell { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; min-width: 130px; } .alfa-statuscell__time { font-size: .7rem; color: var(--alfa-text-subtle); } .alfa-invoice { display: flex; flex-direction: column; gap: 2px; font-size: .78rem; } .alfa-invoice__status { font-weight: 600; color: var(--alfa-text); } .alfa-invoice__id { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .74rem; color: var(--alfa-text-muted); direction: ltr; unicode-bidi: isolate; } .alfa-invoice__paid { font-size: .7rem; color: var(--alfa-success); } .alfa-muted { color: var(--alfa-text-subtle); } /* --- Empty state --- */ .alfa-empty { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 52px 20px; color: var(--alfa-text-subtle); } .alfa-empty i { font-size: 2rem; opacity: .45; } .alfa-empty p { margin: 0; font-size: .9rem; } /* --- Table footer --- */ .alfa-tablefoot { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 14px 18px; border-block-start: 1px solid var(--alfa-border); background: var(--alfa-surface-2); } .alfa-tablefoot__count { margin: 0; font-size: .8125rem; color: var(--alfa-text-muted); } .alfa-tablefoot__count strong { color: var(--alfa-text); font-variant-numeric: tabular-nums; } .alfa-tablefoot__pager .pagination { margin: 0; } /* The default Laravel pager repeats the result count on small screens */ .alfa-tablefoot__pager nav > div:first-child { display: none; } /* Vertical rhythm inside data cells */ .alfa-table > tbody > tr > td { vertical-align: top; } .alfa-table .form-switch { margin: 0; } @media (max-width: 767.98px) { .alfa-tablebar, .alfa-tablefoot { padding: 12px; } .alfa-tablebar__search { max-width: none; } .alfa-tablebar__bulk { width: 100%; } .alfa-tablebar__bulk .select2-container, .alfa-tablebar__bulk select { width: 100% !important; } } /* -------------------------------------------------------------------------- 23. Select2 -------------------------------------------------------------------------- select2 replaces a , used on forms that collect photos/documents (deliveryman create/edit, and available for reuse elsewhere). Markup: .alfa-upload > input[type=file] (visually hidden) + .alfa-upload__dropzone, with an optional .alfa-upload__preview image. */ .alfa-upload { position: relative; /* The widget is a