/* * Examaura Admin — admin.css * Structural layout CSS for the Metor-based admin shell. * No SCSS / no build step — loaded alongside Bootstrap 5 CDN. * Bootstrap handles all component styling; this file owns layout only. * * Theming via data-* attributes on : * data-bs-theme = "light" | "dark" * data-topbar-color= "light" | "dark" * data-menu-color = "light" | "dark" * data-menu-size = "sm-hover" | "sm-hover-active" | "condensed" | "full" | "hidden" */ /* ── Reset & global ────────────────────────────────────────────────────────── */ :root { --umj-primary: #604ae3; --umj-primary-rgb: 96, 74, 227; --umj-sidebar-width: 260px; --umj-sidebar-sm: 70px; --umj-topbar-height: 70px; --umj-sidebar-bg: #ffffff; --umj-sidebar-color: #6c757d; --umj-topbar-bg: #604ae3; --umj-topbar-color: #ffffff; --umj-body-bg: #f5f5f5; --umj-shadow: 0 0.5rem 1rem rgba(0,0,0,.05); --umj-transition: all .2s ease-in-out; } [data-bs-theme="dark"] { --umj-sidebar-bg: #1a1c2e; --umj-sidebar-color:#a0a7b7; --umj-body-bg: #141625; --umj-shadow: 0 0.5rem 1rem rgba(0,0,0,.2); } [data-menu-color="dark"] { --umj-sidebar-bg: #1a1c2e; --umj-sidebar-color:#a0a7b7; } [data-topbar-color="light"] { --umj-topbar-bg: #ffffff; --umj-topbar-color: #6c757d; } html, body { height: 100%; } body { background-color: var(--umj-body-bg); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size: 0.875rem; } /* Alpine x-cloak: hide until Alpine initialises */ [x-cloak] { display: none !important; } /* ── Page wrapper ──────────────────────────────────────────────────────────── */ .wrapper { display: flex; min-height: 100vh; overflow-x: hidden; } /* ── Sidebar / main-nav ────────────────────────────────────────────────────── */ .main-nav { position: fixed; top: 0; left: 0; bottom: 0; width: var(--umj-sidebar-width); background-color: var(--umj-sidebar-bg); box-shadow: var(--umj-shadow); z-index: 1000; transition: var(--umj-transition); display: flex; flex-direction: column; overflow: hidden; } /* Logo area */ .main-nav .logo-box { display: flex; align-items: center; padding: 0 1.25rem; height: var(--umj-topbar-height); border-bottom: 1px solid rgba(0,0,0,.06); flex-shrink: 0; } [data-bs-theme="dark"] .main-nav .logo-box, [data-menu-color="dark"] .main-nav .logo-box { border-bottom-color: rgba(255,255,255,.07); } .logo-dark { display: block; } .logo-light { display: none; } [data-bs-theme="dark"] .logo-dark { display: none; } [data-bs-theme="dark"] .logo-light { display: block; } [data-menu-color="dark"] .logo-dark { display: none; } [data-menu-color="dark"] .logo-light { display: block; } .logo-box .logo-sm { width: 30px; display: none; } .logo-box .logo-lg { height: 28px; } /* Scrollable nav area */ .main-nav > div[data-simplebar], .main-nav > .h-100 { flex: 1; overflow: hidden; padding: .5rem 0; } /* ── Navbar list ────────────────────────────────────────────────────────────── */ .navbar-nav { list-style: none; padding: 0; margin: 0; } .menu-title { font-size: .65rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #adb5bd; padding: 1rem 1.25rem .25rem; white-space: nowrap; overflow: hidden; } .menu-item { position: relative; } .menu-link { display: flex; align-items: center; gap: .75rem; padding: .55rem 1.25rem; color: var(--umj-sidebar-color); text-decoration: none; border-radius: 0; font-weight: 500; font-size: .84rem; transition: var(--umj-transition); white-space: nowrap; overflow: hidden; } .menu-link:hover, .menu-link.active { color: var(--umj-primary); background: rgba(var(--umj-primary-rgb),.07); } .menu-link.active { font-weight: 600; } .nav-icon { font-size: 1.15rem; flex-shrink: 0; width: 1.4rem; text-align: center; } .nav-text { flex: 1; } /* Collapse arrow */ .menu-arrow::after { content: '\ea64'; /* remixicon arrow-right */ font-family: remixicon; font-size: .8rem; margin-left: auto; transition: transform .2s; } .menu-arrow[aria-expanded="true"]::after { transform: rotate(90deg); } /* Sub-menu */ .sub-menu-nav { list-style: none; padding: .25rem 0 .25rem 3rem; margin: 0; } .sub-menu-link { display: block; padding: .35rem .75rem; color: var(--umj-sidebar-color); text-decoration: none; font-size: .82rem; border-radius: 4px; transition: var(--umj-transition); } .sub-menu-link:hover, .sub-menu-link.active { color: var(--umj-primary); background: rgba(var(--umj-primary-rgb),.06); } /* ── Page container (shifts right of sidebar) ──────────────────────────────── */ .page-container { flex: 1; margin-left: var(--umj-sidebar-width); min-width: 0; transition: margin-left .2s ease-in-out; display: flex; flex-direction: column; min-height: 100vh; } .page-content { flex: 1; padding: calc(var(--umj-topbar-height) + 1.5rem) 1.5rem 1.5rem; } /* ── Topbar ────────────────────────────────────────────────────────────────── */ .topbar { position: fixed; top: 0; right: 0; left: var(--umj-sidebar-width); height: var(--umj-topbar-height); background: var(--umj-topbar-bg); z-index: 999; box-shadow: var(--umj-shadow); transition: left .2s ease-in-out; } /* Topbar logo-box (hidden by default; shows on mobile) */ .topbar .logo-box { display: none; } .topbar .container { max-width: 100%; padding: 0 1.25rem; } .navbar-header { display: flex; align-items: center; height: var(--umj-topbar-height); gap: .5rem; } /* Topbar button style */ .topbar-button { background: transparent; border: none; color: var(--umj-topbar-color); padding: .4rem; border-radius: 6px; line-height: 1; opacity: .85; transition: var(--umj-transition); position: relative; } .topbar-button:hover { opacity: 1; background: rgba(255,255,255,.12); } [data-topbar-color="light"] .topbar-button { color: #6c757d; } [data-topbar-color="light"] .topbar-button:hover { background: rgba(0,0,0,.06); } .topbar-item { display: flex; align-items: center; } .topbar-badge { position: absolute; top: 0; right: 0; font-size: .65rem; padding: 2px 5px; min-width: 18px; text-align: center; } /* App search */ .app-search .form-control { background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.2); color: #fff; padding-left: 2.25rem; font-size: .84rem; height: 38px; min-width: 220px; border-radius: 6px; } .app-search .form-control::placeholder { color: rgba(255,255,255,.6); } .app-search .form-control:focus { background: rgba(255,255,255,.25); border-color: rgba(255,255,255,.4); color: #fff; box-shadow: none; } [data-topbar-color="light"] .app-search .form-control { background: #f5f6fa; border-color: #e9ecef; color: #495057; } [data-topbar-color="light"] .app-search .form-control::placeholder { color: #adb5bd; } .search-widget-icon { position: absolute; left: .6rem; top: 50%; transform: translateY(-50%); color: rgba(255,255,255,.6); font-size: 1rem; } [data-topbar-color="light"] .search-widget-icon { color: #adb5bd; } /* ── Dark/light mode icon switching ─────────────────────────────────────────── */ [data-bs-theme="light"] .dark-mode { display: none; } [data-bs-theme="dark"] .light-mode { display: none; } /* ── Sidebar size modes ────────────────────────────────────────────────────── */ /* sm-hover: sidebar starts narrow, expands on hover */ [data-menu-size="sm-hover"] .main-nav { width: var(--umj-sidebar-sm); } [data-menu-size="sm-hover"] .main-nav .logo-box .logo-sm { display: block; } [data-menu-size="sm-hover"] .main-nav .logo-box .logo-lg { display: none; } [data-menu-size="sm-hover"] .main-nav .nav-text, [data-menu-size="sm-hover"] .main-nav .menu-title, [data-menu-size="sm-hover"] .main-nav .menu-arrow::after, [data-menu-size="sm-hover"] .main-nav .badge { opacity: 0; pointer-events: none; } [data-menu-size="sm-hover"] .page-container, [data-menu-size="sm-hover"] .topbar { left: var(--umj-sidebar-sm); margin-left: var(--umj-sidebar-sm); } [data-menu-size="sm-hover"] .main-nav:hover { width: var(--umj-sidebar-width); } [data-menu-size="sm-hover"] .main-nav:hover .logo-box .logo-sm { display: none; } [data-menu-size="sm-hover"] .main-nav:hover .logo-box .logo-lg { display: block; } [data-menu-size="sm-hover"] .main-nav:hover .nav-text, [data-menu-size="sm-hover"] .main-nav:hover .menu-title, [data-menu-size="sm-hover"] .main-nav:hover .menu-arrow::after, [data-menu-size="sm-hover"] .main-nav:hover .badge { opacity: 1; pointer-events: auto; } /* sm-hover-active: fully expanded */ [data-menu-size="sm-hover-active"] .main-nav { width: var(--umj-sidebar-width); } [data-menu-size="sm-hover-active"] .page-container, [data-menu-size="sm-hover-active"] .topbar { left: var(--umj-sidebar-width); margin-left: var(--umj-sidebar-width); } /* condensed: always narrow */ [data-menu-size="condensed"] .main-nav { width: var(--umj-sidebar-sm); } [data-menu-size="condensed"] .nav-text, [data-menu-size="condensed"] .menu-title, [data-menu-size="condensed"] .menu-arrow::after { display: none; } [data-menu-size="condensed"] .main-nav .logo-box .logo-sm { display: block; } [data-menu-size="condensed"] .main-nav .logo-box .logo-lg { display: none; } [data-menu-size="condensed"] .page-container, [data-menu-size="condensed"] .topbar { left: var(--umj-sidebar-sm); margin-left: var(--umj-sidebar-sm); } /* hidden: sidebar off-canvas (mobile toggle) */ [data-menu-size="hidden"] .main-nav { left: calc(-1 * var(--umj-sidebar-width)); } [data-menu-size="hidden"] .page-container, [data-menu-size="hidden"] .topbar { left: 0; margin-left: 0; } /* sidebar-enable: toggle class added on mobile by layout.js */ .sidebar-enable [data-menu-size="hidden"] .main-nav { left: 0; } .sidebar-enable [data-menu-size="hidden"] .topbar { left: 0; } /* ── Page title ──────────────────────────────────────────────────────────────── */ .page-title-box { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.5rem; } .page-title { font-size: 1.15rem; font-weight: 600; margin: 0; } [data-bs-theme="dark"] .page-title { color: #e4e6ed; } /* ── Card overrides ──────────────────────────────────────────────────────────── */ .card-title { font-size: .85rem; font-weight: 600; color: #6c757d; margin-bottom: 0; text-transform: uppercase; letter-spacing: .04em; } [data-bs-theme="dark"] .card { background: #1e2035; border-color: rgba(255,255,255,.07); } [data-bs-theme="dark"] .card-header { border-bottom-color: rgba(255,255,255,.07); } [data-bs-theme="dark"] .table { --bs-table-bg: transparent; color: #c0c5d0; } [data-bs-theme="dark"] .table-light { --bs-table-bg: rgba(255,255,255,.04); } /* ── Button xs (used in table action columns) ─────────────────────────────── */ .btn-xs { padding: .2rem .45rem; font-size: .75rem; border-radius: 4px; line-height: 1.4; } /* ── Topbar dropdown ─────────────────────────────────────────────────────────── */ .dropdown-lg { min-width: 300px; } [data-bs-theme="dark"] .dropdown-menu { background: #262842; border-color: rgba(255,255,255,.1); color: #c0c5d0; } [data-bs-theme="dark"] .dropdown-item { color: #c0c5d0; } [data-bs-theme="dark"] .dropdown-item:hover { background: rgba(255,255,255,.06); } /* ── Footer ───────────────────────────────────────────────────────────────── */ footer.footer { padding: .9rem 1.5rem; font-size: .8rem; color: #6c757d; border-top: 1px solid var(--bs-border-color); } [data-bs-theme="dark"] footer.footer { border-top-color: rgba(255,255,255,.07); } /* ── Auth page ─────────────────────────────────────────────────────────────── */ .auth-page-content { min-height: 100vh; display: flex; align-items: center; background: var(--umj-body-bg); padding: 2rem 0; } /* ── Responsive ──────────────────────────────────────────────────────────────── */ @media (max-width: 1139.98px) { .main-nav { left: calc(-1 * var(--umj-sidebar-width)); } .topbar, .page-container { left: 0 !important; margin-left: 0 !important; } .topbar .logo-box { display: flex; margin-right: .5rem; } .sidebar-enable .main-nav { left: 0; } } @media (max-width: 767.98px) { .page-content { padding: calc(var(--umj-topbar-height) + 1rem) 1rem 1rem; } .app-search { display: none !important; } } /* ── RTL (Arabic) ────────────────────────────────────────────────────────────── */ [dir="rtl"] .main-nav { left: auto; right: 0; } [dir="rtl"] .topbar, [dir="rtl"] .page-container { left: 0; right: var(--umj-sidebar-width); } [dir="rtl"][data-menu-size="sm-hover"] .topbar, [dir="rtl"][data-menu-size="sm-hover"] .page-container { right: var(--umj-sidebar-sm); } [dir="rtl"][data-menu-size="sm-hover-active"] .topbar, [dir="rtl"][data-menu-size="sm-hover-active"] .page-container { right: var(--umj-sidebar-width); } [dir="rtl"][data-menu-size="hidden"] .main-nav { right: calc(-1 * var(--umj-sidebar-width)); } [dir="rtl"][data-menu-size="hidden"] .topbar, [dir="rtl"][data-menu-size="hidden"] .page-container { right: 0; } [dir="rtl"] .sub-menu-nav { padding-right: 3rem; padding-left: 0; } [dir="rtl"] .menu-arrow::after { transform: rotate(180deg); } [dir="rtl"] .menu-arrow[aria-expanded="true"]::after { transform: rotate(90deg); } [dir="rtl"] .ms-auto { margin-left: unset !important; margin-right: auto !important; } /* ── SimplBar custom width ───────────────────────────────────────────────────── */ .simplebar-scrollbar::before { background: rgba(0,0,0,.15); } [data-bs-theme="dark"] .simplebar-scrollbar::before { background: rgba(255,255,255,.15); } /* ── Page shimmer placeholder ────────────────────────────────────────────────── */ .placeholder { background-color: currentColor; opacity: .12; } /* ── Toastify colour overrides ───────────────────────────────────────────────── */ .toastify-success { background: linear-gradient(135deg,#28a745,#20c75a) !important; color:#fff !important; } .toastify-error { background: linear-gradient(135deg,#dc3545,#e05260) !important; color:#fff !important; } .toastify-warning { background: linear-gradient(135deg,#fd7e14,#ffc107) !important; color:#212529 !important; } .toastify-info { background: linear-gradient(135deg,#17a2b8,#0dcaf0) !important; color:#212529 !important; } .toastify { border-radius: 6px !important; box-shadow: 0 4px 12px rgba(0,0,0,.15) !important; } /* ── Phase 6: Performance ──────────────────────────────────────────────────── * Images in tables use loading="lazy" in HTML — browsers start fetching only * when the row scrolls near the viewport. CSS cannot control this but the * attributes are applied directly in the Blade templates: * users/index → user avatar imgs * companies/index → company logo imgs * * Optional libraries (Flatpickr, Choices.js) removed from global load. * Use @push('page-css') + per view. * ─────────────────────────────────────────────────────────────────────────── */ /* Prevent CLS (Cumulative Layout Shift) for lazy-loaded images with known dimensions */ img[loading="lazy"] { background: rgba(0,0,0,.04); } /* ════════════════════════════════════════════════════════════════════════════ PHASE 7 — RESPONSIVENESS, UX & RTL Added: locale switcher topbar slot, additional RTL fixes, mobile layout improvements, UX transitions, accessibility focus styles. ═══════════════════════════════════════════════════════════════════════════ */ /* ── UX: smooth transitions ──────────────────────────────────────────────── */ .card { transition: box-shadow .15s ease; } .table-hover tbody tr { transition: background-color .1s ease; } .btn { transition: all .15s ease; } .menu-link { transition: color .15s ease, background-color .15s ease; } .topbar-button { transition: opacity .15s ease, background-color .15s ease; } /* Sidebar expand/collapse smooth on all size modes */ .main-nav, .page-container, .topbar { transition: left .2s ease-in-out, right .2s ease-in-out, width .2s ease-in-out, margin-left .2s ease-in-out, margin-right .2s ease-in-out; } /* ── UX: table action cells — prevent button wrapping ────────────────────── */ .table td:last-child .d-flex, .table td .d-flex { flex-wrap: nowrap; } /* ── UX: card hover shadow (subtle depth cue) ────────────────────────────── */ .card:hover { box-shadow: 0 .5rem 1.5rem rgba(0,0,0,.08); } [data-bs-theme="dark"] .card:hover { box-shadow: 0 .5rem 1.5rem rgba(0,0,0,.3); } /* ── UX: skip-to-content (accessibility) ────────────────────────────────── */ .skip-to-content { position: absolute; top: -100%; left: 1rem; z-index: 9999; padding: .5rem 1rem; background: var(--umj-primary); color: #fff; border-radius: 0 0 6px 6px; text-decoration: none; font-weight: 600; transition: top .15s; } .skip-to-content:focus { top: 0; } /* ── Accessibility: visible focus rings ─────────────────────────────────── */ :focus-visible { outline: 2px solid var(--umj-primary); outline-offset: 2px; } .btn:focus-visible, .form-control:focus-visible, .form-select:focus-visible { outline: 2px solid var(--umj-primary); outline-offset: 0; box-shadow: 0 0 0 .25rem rgba(var(--umj-primary-rgb), .25); } /* Remove default outline when Bootstrap handles it */ .dropdown-item:focus-visible { outline: none; background: rgba(var(--umj-primary-rgb),.08); } /* ── Mobile: filter toolbar search full-width on xs ─────────────────────── */ @media (max-width: 575.98px) { /* Smart toolbar: search stretches full width, other controls wrap */ .smart-toolbar-row { flex-direction: column; align-items: stretch !important; } .smart-toolbar-search { max-width: 100% !important; width: 100%; min-width: 0 !important; } /* Bulk action bar stacks on mobile */ .bulk-action-bar { flex-direction: column; align-items: flex-start !important; } /* Page title stacks on mobile */ .page-title-box { flex-direction: column; align-items: flex-start !important; } /* Table action columns: more compact on mobile */ .table .btn-xs { padding: .15rem .35rem; } /* Hide per-page selector on xs (keep other filter controls) */ .topbar-perpage { display: none !important; } } /* ── Mobile: topbar adjustments ──────────────────────────────────────────── */ @media (max-width: 575.98px) { /* Compact gap in topbar on very small screens */ .navbar-header { gap: .25rem !important; } /* Hide locale label on xs, show icon only */ .locale-label { display: none !important; } } /* ── Tablet (md): sidebar toggle behaviour ───────────────────────────────── */ @media (min-width: 576px) and (max-width: 1139.98px) { .page-content { padding-top: calc(var(--umj-topbar-height) + 1.25rem); } } /* ── UX: loading overlay — fade in smoothly ──────────────────────────────── */ [x-show][class*="bg-white"] { transition: opacity .2s ease; } /* ═══════════════════════════════════════════════════════════════════════════ ADDITIONAL RTL FIXES (Phase 7) These complement the base RTL rules already in the file above. All rules scoped to [dir="rtl"] to avoid affecting LTR layouts. ═══════════════════════════════════════════════════════════════════════════ */ /* ── RTL: search bar icon position ──────────────────────────────────────── */ [dir="rtl"] .app-search .form-control { padding-left: .75rem; padding-right: 2.25rem; /* space for search icon on the right */ } [dir="rtl"] .app-search .search-widget-icon { left: auto; right: .6rem; } /* ── RTL: topbar ms-auto → me-auto (flex direction) ─────────────────────── */ [dir="rtl"] .navbar-header .ms-auto { margin-left: unset !important; margin-right: auto !important; } /* ── RTL: dropdown menus open on correct side ────────────────────────────── */ [dir="rtl"] .dropdown-menu-end { right: auto; left: 0; } /* ── RTL: card-header actions ─────────────────────────────────────────────── */ [dir="rtl"] .card-header .ms-auto { margin-left: unset !important; margin-right: auto !important; } [dir="rtl"] .card-header .me-auto { margin-right: unset !important; margin-left: auto !important; } /* ── RTL: table sort icons margin ────────────────────────────────────────── */ [dir="rtl"] th i[class*="ri-sort"], [dir="rtl"] th i[class*="ri-expand"] { margin-left: 0; margin-right: .2rem; } /* ── RTL: pagination arrows flip ────────────────────────────────────────── */ /* Swap chevron direction when in RTL mode */ [dir="rtl"] .ri-arrow-left-s-line::before { content: '\ea64'; } /* ri-arrow-right */ [dir="rtl"] .ri-arrow-right-s-line::before { content: '\ea60'; } /* ri-arrow-left */ /* ── RTL: alert / bulk-bar text alignment ────────────────────────────────── */ [dir="rtl"] .alert { text-align: right; } [dir="rtl"] .alert .ms-auto { margin-left: unset !important; margin-right: auto !important; } /* ── RTL: filter chip close button ──────────────────────────────────────── */ [dir="rtl"] .badge button[type="button"] { margin-left: 0; margin-right: .25rem; } /* ── RTL: form labels ────────────────────────────────────────────────────── */ [dir="rtl"] .form-label, [dir="rtl"] .form-check-label { text-align: right; } /* ── RTL: input-group prepend/append swap ────────────────────────────────── */ [dir="rtl"] .input-group > .input-group-text:first-child { border-radius: 0 var(--bs-border-radius) var(--bs-border-radius) 0; } [dir="rtl"] .input-group > .input-group-text:last-child { border-radius: var(--bs-border-radius) 0 0 var(--bs-border-radius); } [dir="rtl"] .input-group > .form-control:first-child { border-radius: 0 var(--bs-border-radius) var(--bs-border-radius) 0; } [dir="rtl"] .input-group > .form-control:last-child { border-radius: var(--bs-border-radius) 0 0 var(--bs-border-radius); } /* ── RTL: sub-menu collapse arrow direction ──────────────────────────────── */ /* Already handled: menu-arrow::after rotated in base RTL block above */ /* ── RTL: badge pill in nav sidebar ─────────────────────────────────────── */ [dir="rtl"] .navbar-nav .badge { margin-left: 0; margin-right: auto; } /* ── RTL: table action column buttons ────────────────────────────────────── */ [dir="rtl"] .table td:last-child { text-align: left; } /* ── RTL: breadcrumb separator ────────────────────────────────────────────── */ [dir="rtl"] .breadcrumb-item + .breadcrumb-item::before { content: '\\'; /* reverse slash for RTL */ float: right; padding-right: 0; padding-left: var(--bs-breadcrumb-item-padding-x); } /* ── RTL: modal close button position ────────────────────────────────────── */ /* Bootstrap RTL CSS handles .btn-close — no override needed here */ /* ── RTL: spinner border direction (cosmetic) ────────────────────────────── */ [dir="rtl"] .spinner-border { animation-direction: reverse; } /* ── Dark mode: additional contrast fixes ────────────────────────────────── */ [data-bs-theme="dark"] .table-light { --bs-table-bg: rgba(255,255,255,.05); --bs-table-color: #c4cad6; } [data-bs-theme="dark"] .form-control, [data-bs-theme="dark"] .form-select { background-color: #262842; border-color: rgba(255,255,255,.15); color: #c4cad6; } [data-bs-theme="dark"] .form-control::placeholder { color: #6c757d; } [data-bs-theme="dark"] .input-group-text { background-color: #2e3155; border-color: rgba(255,255,255,.15); color: #c4cad6; } [data-bs-theme="dark"] .alert-info { background-color: rgba(13,202,240,.1); border-color: rgba(13,202,240,.2); color: #0dcaf0; }