@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Space+Grotesk:wght@400;500;600;700&family=Noto+Kufi+Arabic:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap'); /* ===================================================================== Sayaratech Carstore — Redesign skin (visual layer only) Loaded LAST in . Every color comes from a token so dark mode and RTL work automatically. Do not hard-code hex outside this file. ===================================================================== */ :root { /* surfaces */ --bg:#eef0f4; --surface:#ffffff; --surface-2:#f4f5f9; --surface-3:#eceef4; --border:#e6e9f0; --border-2:#dde1ea; /* text */ --text:#14161c; --text-2:#4a515f; --text-3:#7a8190; --text-4:#aab0bd; /* brand + status */ --accent:#3b6df7; --accent-2:#5b86ff; --accent-weak:#eaf0ff; --accent-text:#244ed0; --positive:#1e9e6a; --positive-weak:#e6f7ef; --warn:#eab308; --warn-text:#b07d12; --warn-weak:#fbf1d9; --danger:#d6453c; --danger-weak:#fdecea; --info:#0ea5e9; --info-weak:#e3f4fd; --purple:#7c5cff; --purple-weak:#efeaff; --pink:#e84e8a; --pink-weak:#fde7f0; /* feature / dark KPI card */ --feature-bg:#14161c; --feature-text:#ffffff; --feature-muted:#9aa1b0; --grad-hero:linear-gradient(110deg,#5b6df0,#8a5cf0); --shadow-sm:0 1px 2px rgba(20,22,28,.05); --shadow-md:0 10px 26px -14px rgba(20,22,28,.22); /* fonts */ --font-ui:'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --font-display:'Space Grotesk', var(--font-ui); --font-num:'Space Grotesk', var(--font-ui); --font-ar:'Noto Kufi Arabic', var(--font-ui); --font-mono:'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; /* metrics */ --r-card:16px; --r-control:10px; --r-sm:8px; --r-pill:999px; --sidebar-w:258px; --topbar-h:66px; --page-pad:26px; } [data-theme="dark"] { --bg:#070a10; --surface:#11151e; --surface-2:#161b26; --surface-3:#1b2230; --border:#212836; --border-2:#2a3242; /* brighter text tiers for clearer reading on dark surfaces (was too pale) */ --text:#eef1f8; --text-2:#cdd5e3; --text-3:#aab4c6; --text-4:#8893a8; --accent:#4f8bff; --accent-2:#6fa0ff; --accent-weak:#15203a; --accent-text:#9cc0ff; --positive:#34d399; --positive-weak:#0e2a20; --warn:#eab308; --warn-text:#e8b84a; --warn-weak:#2a2410; --danger:#f87171; --danger-weak:#2a1413; --info:#38bdf8; --info-weak:#06283b; --purple:#a78bfa; --purple-weak:#1e1a3a; --pink:#f472b6; --pink-weak:#2c1322; --feature-bg:#15203a; --feature-text:#e9edf4; --feature-muted:#9cc0ff; --grad-hero:linear-gradient(110deg,#3a3f8f,#5b3f9e); --shadow-sm:0 1px 2px rgba(0,0,0,.4); --shadow-md:0 12px 28px -14px rgba(0,0,0,.6); } /* ===================== BASE ===================== */ html, body { font-family: var(--font-ui); background: var(--bg) !important; color: var(--text); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } [dir="rtl"] body, html[lang="ar"] body { font-family: var(--font-ar); } .num, .tnum { font-family: var(--font-num); font-variant-numeric: tabular-nums; } .mono { font-family: var(--font-mono); } ::selection { background: var(--accent-weak); color: var(--accent-text); } /* Scrollbars */ * { scrollbar-width: thin; scrollbar-color: var(--border-2) transparent; } *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; } *::-webkit-scrollbar-thumb:hover { background: var(--text-4); } /* ===================== SHELL / CHROME ===================== */ .app-container, .app-theme-white.app-container { background: var(--bg) !important; } /* Topbar */ .app-header { height: var(--topbar-h) !important; background: var(--surface) !important; border-bottom: 1px solid var(--border) !important; box-shadow: none !important; position: fixed !important; top: 0 !important; inset-inline-start: var(--sidebar-w) !important; inset-inline-end: 0 !important; width: auto !important; margin: 0 !important; z-index: 20 !important; } .app-header .app-header__logo, .app-header .app-header__menu, .app-header .app-header__mobile-menu { display: none !important; } .app-header .app-header__content { height: var(--topbar-h) !important; padding: 0 22px !important; width: 100%; display: flex; align-items: center; gap: 14px; } .app-header .app-header-right { margin-inline-start: auto; } /* Sidebar */ .app-sidebar, .app-theme-white .app-sidebar { position: fixed !important; top: 0 !important; bottom: 0 !important; inset-inline-start: 0 !important; width: var(--sidebar-w) !important; min-width: var(--sidebar-w) !important; flex: 0 0 var(--sidebar-w) !important; height: 100vh !important; margin: 0 !important; padding: 0 !important; background: var(--surface) !important; border-inline-end: 1px solid var(--border) !important; box-shadow: none !important; overflow: hidden !important; display: flex !important; flex-direction: column !important; z-index: 30 !important; } .app-sidebar .app-header__logo, .app-sidebar .app-header__menu, .app-sidebar .app-header__mobile-menu { display: none !important; } .app-sidebar .scrollbar-sidebar { flex: 1 1 auto; height: auto !important; overflow-y: auto; overflow-x: hidden; width: 100%; } .app-sidebar .app-sidebar__inner { padding: 0 !important; } /* Main content */ .app-main { padding-top: 0 !important; } .app-main .app-main__outer, .fixed-sidebar .app-main .app-main__outer { padding-top: var(--topbar-h) !important; padding-left: var(--sidebar-w) !important; padding-right: 0 !important; } [dir="rtl"] .app-main .app-main__outer, [dir="rtl"] .fixed-sidebar .app-main .app-main__outer { padding-left: 0 !important; padding-right: var(--sidebar-w) !important; } .app-main .app-main__inner { max-width: 1560px; margin-inline: auto; padding: 24px 32px 48px !important; width: 100%; } /* Let the content flex chain shrink to the viewport. Without this, a wide grid's intrinsic min-content leaks up through these flex items (min-width:auto) and pushes the whole page sideways; min-width:0 keeps the overflow inside the grid's own scroll area so only the table scrolls, never the page. */ .app-main__outer, .app-main .app-main__inner, .card, .card-body { min-width: 0 !important; } /* ===================== SIDEBAR NAV ===================== */ .side-nav { display: flex; flex-direction: column; min-height: 100%; } .side-nav__brand { display: flex; align-items: center; gap: 12px; height: var(--topbar-h); flex: none; padding-inline: 22px; border-bottom: 1px solid var(--border); text-decoration: none; position: sticky; top: 0; background: var(--surface); z-index: 2; } .side-nav__brand-mark { width: 38px; height: 38px; border-radius: 11px; background: var(--accent); color: #fff; display: grid; place-items: center; font-size: 20px; flex: none; box-shadow: 0 6px 14px -6px var(--accent); } .side-nav__brand-text { font-size: 19px; font-weight: 800; color: var(--text); letter-spacing: -.01em; } .side-nav__scroll { padding: 14px 14px 18px; flex: 1; } .side-nav__group { font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--text-4); padding: 16px 12px 7px; margin: 0; } .side-nav__link { display: flex; align-items: center; gap: 12px; padding: 10px 12px; margin-bottom: 2px; border-radius: var(--r-control); color: var(--text-2); text-decoration: none; font-size: 14px; font-weight: 500; transition: background .12s ease, color .12s ease; cursor: pointer; border: 0; background: transparent; width: 100%; text-align: start; } .side-nav__link .side-nav__icon { font-size: 18px; color: var(--text-3); width: 20px; text-align: center; flex: none; transition: color .12s ease; } .side-nav__link:hover { background: var(--surface-2); color: var(--text); } .side-nav__link:hover .side-nav__icon { color: var(--text-2); } .side-nav__link.active { background: var(--accent-weak); color: var(--accent-text); font-weight: 600; } .side-nav__link.active .side-nav__icon { color: var(--accent); } .side-nav__badge { margin-inline-start: auto; background: var(--accent); color: #fff; font-family: var(--font-num); font-size: 11px; font-weight: 700; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; display: inline-grid; place-items: center; } .side-nav__divider { height: 1px; background: var(--border); margin: 12px 12px; } .side-nav__user { display: flex; align-items: center; gap: 11px; padding: 12px 14px; margin: 6px 12px 14px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface-2); } .side-nav__avatar { width: 38px; height: 38px; border-radius: 11px; flex: none; background: var(--accent-weak); color: var(--accent-text); display: grid; place-items: center; font-size: 16px; font-weight: 700; font-family: var(--font-display); } .side-nav__user-name { font-size: 13.5px; font-weight: 700; color: var(--text); line-height: 1.2; } .side-nav__user-role { font-size: 11.5px; color: var(--text-3); } /* ===================== TOPBAR PIECES ===================== */ .topbar-crumb { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text-3); font-weight: 500; min-width: 0; } .topbar-crumb__home { color: var(--accent); font-weight: 600; text-decoration: none; } .topbar-crumb__home:hover { text-decoration: underline; } .topbar-crumb__sep { color: var(--text-4); font-size: 13px; } .topbar-crumb__current { color: var(--text); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .topbar-actions { display: flex; align-items: center; gap: 8px; margin-inline-start: auto; } .icon-btn { width: 40px; height: 40px; border-radius: 11px; border: 1px solid var(--border); background: var(--surface); color: var(--text-2); display: grid; place-items: center; cursor: pointer; font-size: 17px; transition: background .12s, border-color .12s, color .12s; text-decoration: none; padding: 0; } .icon-btn:hover { background: var(--surface-2); color: var(--text); border-color: var(--border-2); } .lang-btn { width: auto; padding: 0 14px; font-weight: 700; font-size: 13px; letter-spacing: .02em; } .theme-toggle .bi-sun { display: none; } [data-theme="dark"] .theme-toggle .bi-moon { display: none; } [data-theme="dark"] .theme-toggle .bi-sun { display: inline; } /* Topbar user identity (UserProfileMenu) */ .topbar-user { display: flex; align-items: center; gap: 12px; } .topbar-user__info { display: flex; flex-direction: column; align-items: flex-end; text-decoration: none; line-height: 1.25; } [dir="rtl"] .topbar-user__info { align-items: flex-start; } .topbar-user__name { font-size: 13.5px; font-weight: 700; color: var(--accent) !important; } .topbar-user__info:hover .topbar-user__name { text-decoration: underline; } .topbar-user__role { font-size: 11.5px; color: var(--text-3) !important; } .topbar-user .topbar-user__avatar.rz-button { border-radius: 11px !important; width: 42px; height: 42px; padding: 0 !important; background: var(--accent) !important; color: #fff !important; box-shadow: 0 6px 14px -6px var(--accent) !important; } @media (max-width: 575.98px) { .topbar-user__info { display: none; } } /* Hide per-page Radzen breadcrumbs (mirrored into the topbar instead) */ .rz-breadcrumb { display: none !important; } /* ===================== CARDS ===================== */ .card, .main-card, .modern-card { background: var(--surface) !important; border: 1px solid var(--border) !important; border-radius: var(--r-card) !important; box-shadow: var(--shadow-sm) !important; color: var(--text); } .card-header { background: transparent !important; border-bottom: 1px solid var(--border) !important; padding: 16px 20px !important; color: var(--text) !important; font-weight: 700; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .card-title, .card-header h4, .card-header .card-title { color: var(--text) !important; font-weight: 700 !important; font-size: 18px; letter-spacing: .01em; margin: 0; } .card-body { background: transparent !important; color: var(--text); } .card-footer { background: transparent !important; border-top: 1px solid var(--border) !important; color: var(--text); } /* Accent header bar variant */ .card-header--accent, .rental-header-bar { background: var(--accent) !important; color: #fff !important; border: none !important; border-radius: var(--r-card) var(--r-card) 0 0 !important; } .card-header--accent .card-title, .rental-header-bar span { color: #fff !important; } /* Count pill */ .count-pill { font-family: var(--font-num); font-weight: 700; font-size: 12px; background: var(--accent-weak); color: var(--accent-text); border-radius: var(--r-pill); padding: 2px 10px; line-height: 1.6; } /* Icon tile before page titles — each page renders the SAME Bootstrap icon as its sidebar menu item, e.g.

… */ .title-icon { width: 36px; height: 36px; border-radius: 10px; flex: none; background: var(--accent-weak); color: var(--accent); display: inline-flex; align-items: center; justify-content: center; font-size: 19px; line-height: 1; } /* align the tile next to the title text, whatever element holds them */ :is(.card-title, h1, h2, h3, h4, h5, .rental-header-bar > span):has(.title-icon) { display: inline-flex !important; align-items: center; gap: 11px; } /* on accent header bars the tile goes white-on-translucent to stay readable */ .card-header--accent .title-icon, .rental-header-bar .title-icon { background: rgba(255,255,255,.2); color: #fff; } /* ===================== KPI CARDS ===================== */ .kpi-card { display: flex; align-items: center; gap: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); padding: 20px 22px; box-shadow: var(--shadow-sm); min-height: 104px; height: 100%; } .kpi-card__icon { width: 54px; height: 54px; border-radius: 14px; flex: none; display: grid; place-items: center; font-size: 24px; } .kpi-card__label { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); line-height: 1.25; } .kpi-card__value { font-family: var(--font-num); font-size: 32px; font-weight: 700; color: var(--text); line-height: 1.05; margin-top: 3px; } .kpi-card__sub { font-size: 12px; color: var(--text-3); margin-top: 2px; } /* tint helpers (icon tiles, dots) */ .tint-accent { background: var(--accent-weak); color: var(--accent); } .tint-positive { background: var(--positive-weak); color: var(--positive); } .tint-warn { background: var(--warn-weak); color: var(--warn-text); } .tint-danger { background: var(--danger-weak); color: var(--danger); } .tint-info { background: var(--info-weak); color: var(--info); } .tint-purple { background: var(--purple-weak); color: var(--purple); } .tint-pink { background: var(--pink-weak); color: var(--pink); } /* Compact stat card (label + dot + number) */ .stat-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); padding: 16px 18px; box-shadow: var(--shadow-sm); height: 100%; } .stat-card__label { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--text-2); } .stat-card__dot { width: 9px; height: 9px; border-radius: 999px; flex: none; } .stat-card__value { font-family: var(--font-num); font-size: 28px; font-weight: 700; color: var(--text); margin-top: 6px; } .dot-accent { background: var(--accent); } .dot-positive { background: var(--positive); } .dot-warn { background: var(--warn); } .dot-danger { background: var(--danger); } .dot-info { background: var(--info); } /* ===================== HERO BANNER ===================== */ .hero-banner { background: var(--grad-hero); border-radius: 18px; padding: 28px 32px; color: #fff; display: flex; align-items: center; justify-content: space-between; gap: 18px; box-shadow: var(--shadow-md); flex-wrap: wrap; } .hero-banner__main { display: flex; align-items: center; gap: 18px; } .hero-banner__icon { width: 60px; height: 60px; border-radius: 16px; background: rgba(255,255,255,.18); display: grid; place-items: center; font-size: 28px; flex: none; color: #fff; } .hero-banner__title { font-family: var(--font-display); font-size: 29px; font-weight: 700; letter-spacing: -.02em; margin: 0; color: #fff; } .hero-banner__subtitle { color: rgba(255,255,255,.85); font-size: 14px; margin-top: 4px; } .hero-banner__action { background: rgba(255,255,255,.18); color: #fff; border: 1px solid rgba(255,255,255,.25); border-radius: var(--r-pill); padding: 10px 18px; font-weight: 600; font-size: 14px; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; text-decoration: none; } .hero-banner__action:hover { background: rgba(255,255,255,.28); color: #fff; } /* ===================== STATUS CHIPS ===================== */ .status-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 11px; border-radius: var(--r-pill); font-size: 12px; font-weight: 600; line-height: 1.7; white-space: nowrap; } .status-chip.is-positive { background: var(--positive-weak); color: var(--positive); } .status-chip.is-warn { background: var(--warn-weak); color: var(--warn-text); } .status-chip.is-accent { background: var(--accent-weak); color: var(--accent-text); } .status-chip.is-danger { background: var(--danger-weak); color: var(--danger); } .status-chip.is-neutral { background: var(--surface-3); color: var(--text-2); } .status-chip.is-info { background: var(--info-weak); color: var(--info); } /* ===================== EMPTY STATE ===================== */ .empty-state { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 52px 24px; gap: 6px; } .empty-state__icon { width: 66px; height: 66px; border-radius: 18px; background: var(--surface-2); color: var(--text-3); display: grid; place-items: center; font-size: 30px; margin-bottom: 10px; } .empty-state__title { font-size: 16px; font-weight: 700; color: var(--text); } .empty-state__desc { font-size: 13.5px; color: var(--text-3); max-width: 340px; } /* ===================== SKELETON ===================== */ .skeleton { background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 37%, var(--surface-2) 63%); background-size: 400% 100%; animation: shimmer 1.4s ease infinite; border-radius: var(--r-sm); display: block; } .skeleton-row { height: 16px; margin: 14px 0; } @keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } } .cs-skeleton { padding: 8px 2px; } .cs-skeleton__toolbar { display: flex; gap: 10px; align-items: center; padding: 6px 4px 18px; } .cs-skeleton__pill { height: 34px; width: 120px; border-radius: var(--r-control); } .cs-skeleton__pill--sm { width: 80px; } .cs-skeleton__row { display: flex; align-items: center; gap: 16px; padding: 14px 4px; border-bottom: 1px solid var(--border); } .cs-skeleton__cell { height: 14px; border-radius: var(--r-sm); } /* ===================================================================== RADZEN RESTYLE — map Material theme onto the tokens ===================================================================== */ /* Buttons */ .rz-button { border-radius: var(--r-control) !important; font-family: var(--font-ui) !important; font-weight: 600 !important; text-transform: none !important; box-shadow: none !important; letter-spacing: 0 !important; } .rz-button.rz-primary { background: var(--accent) !important; color: #fff !important; } .rz-button.rz-primary:hover { background: var(--accent-2) !important; } .rz-button.rz-light, .rz-button.rz-base, .rz-button.rz-secondary { background: var(--surface) !important; color: var(--text-2) !important; border: 1px solid var(--border-2) !important; } .rz-button.rz-light:hover, .rz-button.rz-base:hover, .rz-button.rz-secondary:hover { background: var(--surface-2) !important; color: var(--text) !important; } .rz-button.rz-danger { background: var(--danger) !important; color: #fff !important; } .rz-button.rz-success { background: var(--positive) !important; color: #fff !important; } .rz-button.rz-info { background: var(--info) !important; color: #fff !important; } .rz-button.rz-warning { background: var(--warn) !important; color: #fff !important; } /* Inputs — outlined only (transparent fill, just the border). NOTE: only border real input controls — NOT every .rz-inputtext, because the dropdown's value span also carries .rz-inputtext and would get an inner box. */ .rz-textbox, .rz-textarea, .rz-dropdown, .rz-numeric, .rz-datepicker, .rz-password, .rz-autocomplete, .rz-spinner, .rz-multiselect, input.rz-inputtext { background: transparent !important; border: 1px solid var(--border-2) !important; border-radius: var(--r-control) !important; color: var(--text) !important; } /* the dropdown value/placeholder span must never have its own border (sub-border) */ .rz-dropdown .rz-dropdown-label, .rz-dropdown .rz-inputtext { border: none !important; box-shadow: none !important; } .rz-textbox:focus, input.rz-inputtext:focus, .rz-textarea:focus, .rz-dropdown.rz-state-focused, .rz-state-focused .rz-inputtext { border-color: var(--accent) !important; box-shadow: 0 0 0 3px var(--accent-weak) !important; outline: none !important; } .rz-dropdown, .rz-dropdown .rz-dropdown-trigger, .rz-dropdown .rz-dropdown-label { background: transparent !important; color: var(--text) !important; } .rz-dropdown-panel, .rz-multiselect-panel, .rz-autocomplete-panel { background: var(--surface) !important; border: 1px solid var(--border) !important; border-radius: var(--r-control) !important; box-shadow: var(--shadow-md) !important; color: var(--text) !important; } .rz-dropdown-item, .rz-multiselect-item { color: var(--text) !important; } .rz-dropdown-item.rz-state-highlight, .rz-dropdown-item:hover, .rz-multiselect-item:hover { background: var(--accent-weak) !important; color: var(--accent-text) !important; } .rz-placeholder, ::placeholder { color: var(--text-4) !important; } /* Dropdown polish — full width, value padding, clean caret, placeholder color. Dropdowns fill their container; text follows the page direction (LTR en / RTL ar) via logical `start` alignment. */ /* block-level flex => form dropdowns fill their container; toolbar/pager dropdowns are flex ITEMS so they stay content-sized automatically (no width override). force row direction (Radzen defaults to column, which made align-items:center center the VALUE horizontally instead of letting the label fill + start-align). */ .rz-dropdown, .rz-multiselect { display: flex !important; flex-direction: row !important; align-items: center; } /* form-field dropdowns/multiselects always span the field (covers flex content too) */ .rz-form-field .rz-dropdown, .rz-form-field-content > .rz-dropdown, .rz-form-field .rz-multiselect, .rz-form-field-content > .rz-multiselect { width: 100% !important; } /* keep the a11y helper input out of the flex flow so the value/placeholder fills the field (it was rendering as a ~169px empty box inside multi-selects) */ .rz-dropdown .rz-helper-hidden-accessible, .rz-multiselect .rz-helper-hidden-accessible { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; border: 0 !important; } .rz-dropdown .rz-dropdown-label, .rz-multiselect .rz-multiselect-label { padding-inline: 12px !important; display: flex; align-items: center; line-height: 1.4; justify-content: flex-start; text-align: start !important; flex: 1 1 auto; min-width: 0; } /* Items in the open panel + the search box also follow the page direction */ .rz-dropdown-item, .rz-multiselect-item, .rz-dropdown-panel .rz-dropdown-filter, .rz-dropdown-panel input, .rz-multiselect-panel input { text-align: start !important; } .rz-dropdown .rz-dropdown-trigger { width: 38px !important; display: flex !important; align-items: center; justify-content: center; border: none !important; background: transparent !important; } .rz-dropdown .rz-dropdown-trigger-icon { color: var(--text-3) !important; font-size: 22px !important; transition: transform .15s ease; } .rz-dropdown.rz-state-open .rz-dropdown-trigger-icon { transform: rotate(180deg); } .rz-dropdown.rz-state-empty .rz-dropdown-label { color: var(--text-4) !important; } .rz-dropdown.rz-state-focused .rz-dropdown-trigger-icon { color: var(--accent) !important; } /* Date picker — single border + clean, properly-sized calendar icon */ .rz-datepicker { display: inline-flex !important; align-items: center; } .rz-datepicker .rz-inputtext { border: none !important; background: transparent !important; padding-inline: 12px !important; box-shadow: none !important; } .rz-datepicker .rz-datepicker-trigger { width: 40px !important; min-width: 40px !important; height: auto !important; display: inline-flex !important; align-items: center; justify-content: center; background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important; color: var(--text-3) !important; } .rz-datepicker .rz-datepicker-trigger .rzi { font-size: 20px !important; color: var(--text-3) !important; line-height: 1 !important; width: auto !important; height: auto !important; overflow: visible !important; display: inline-flex; align-items: center; justify-content: center; } .rz-datepicker.rz-state-focused .rz-datepicker-trigger .rzi { color: var(--accent) !important; } /* Form fields (floating-label) — single clean control. Radzen draws an outlined border on .rz-form-field-content AND we border the inner control; that produced a muddy double border. Strip Radzen's outline so only our token control border shows. */ .rz-form-field { background: transparent !important; } .rz-form-field .rz-form-field-content { border: none !important; background: transparent !important; padding: 0 !important; overflow: visible !important; color: var(--text) !important; } .rz-form-field .rz-form-field-content > .rz-textbox, .rz-form-field .rz-form-field-content > .rz-textarea, .rz-form-field .rz-form-field-content > .rz-dropdown, .rz-form-field .rz-form-field-content > .rz-numeric, .rz-form-field .rz-form-field-content > .rz-datepicker, .rz-form-field .rz-form-field-content > .rz-multiselect, .rz-form-field .rz-form-field-content > .rz-autocomplete, .rz-form-field .rz-form-field-content > input.rz-inputtext { border: 1px solid var(--border-2) !important; background: transparent !important; border-radius: var(--r-control) !important; min-height: 46px; } /* Floated label: blend into the card so it reads as a clean "notch" in the border (no gray chip). bg = card surface masks the border line behind it. */ .rz-form-field-label, label.rz-form-field-label { color: var(--text-3) !important; font-weight: 600 !important; background: var(--surface) !important; padding-inline: 4px !important; border-radius: 0 !important; } /* before it floats, the label sits inside the field over the fill — keep it clear */ .rz-form-field.rz-state-empty:not(.rz-state-focused) .rz-form-field-label { background: transparent !important; } .rz-form-field.rz-state-focused .rz-form-field-content > .rz-textbox, .rz-form-field.rz-state-focused .rz-form-field-content > .rz-dropdown, .rz-form-field.rz-state-focused .rz-form-field-content > input.rz-inputtext { border-color: var(--accent) !important; box-shadow: 0 0 0 3px var(--accent-weak) !important; } /* DataGrid */ .rz-datatable, .rz-data-grid, .rz-grid-table { background: transparent !important; border: none !important; color: var(--text); } .rz-datatable .rz-datatable-thead > tr > th, .rz-grid-table thead th, .rz-datatable thead th { background: transparent !important; border: none !important; border-bottom: 1px solid var(--border) !important; color: var(--text-4) !important; font-size: 11px !important; font-weight: 700 !important; letter-spacing: .04em; text-transform: uppercase; padding: 12px 14px !important; } .rz-datatable .rz-column-title, .rz-column-title-content { color: var(--text-4) !important; font-weight: 700 !important; font-size: 11px !important; text-transform: uppercase; letter-spacing: .04em; } .rz-datatable tbody > tr > td, .rz-grid-table tbody td { background: var(--surface) !important; border: none !important; border-bottom: 1px solid var(--border) !important; color: var(--text) !important; font-size: 13.5px !important; padding: 13px 14px !important; height: 52px; } /* inner cell wrapper: no extra padding, and inherit our text color (Radzen hard-codes #424242 here, which looked pale/invisible in dark mode) */ .rz-datatable .rz-cell-data, .rz-grid-table .rz-cell-data { padding: 0 !important; background: transparent !important; color: var(--text) !important; } .rz-datatable tbody > tr:hover > td, .rz-grid-table tbody tr:hover td, .rz-datatable .rz-datatable-even:hover td, .rz-datatable tr.rz-data-row:hover td { background: var(--surface-2) !important; } .rz-datatable .rz-datatable-even td, .rz-datatable .rz-datatable-odd td { background: var(--surface) !important; } .rz-grid-table { border-collapse: collapse !important; } .rz-sortable-column-icon, .rz-cell-filter, .rz-cell-filter-trigger { color: var(--text-4) !important; } /* Dense grids scroll horizontally inside the table area (not the whole page), so every column header + cell stays readable instead of being squeezed. Radzen renders the table as table-layout:fixed pinned to the container width, so many columns collapse and the existing overflow-x:auto wrapper never scrolls. Sizing the table to its content makes it overflow the wrapper and scroll; min-width:100% keeps sparse grids filling the card (no needless bar). */ .rz-data-grid-data { overflow-x: auto !important; -webkit-overflow-scrolling: touch; } .rz-data-grid-data > table.rz-grid-table { table-layout: auto !important; width: max-content !important; min-width: 100% !important; } /* keep each column title on one line so the full header label is always visible */ .rz-data-grid-data > table.rz-grid-table thead .rz-column-title, .rz-data-grid-data > table.rz-grid-table thead .rz-column-title-content { white-space: nowrap; } /* Pager */ .rz-paginator, .rz-pager { background: transparent !important; border: none !important; border-top: 1px solid var(--border) !important; color: var(--text-2) !important; padding: 12px 8px !important; } .rz-paginator .rz-paginator-element, .rz-paginator .rz-paginator-page { background: transparent !important; color: var(--text-2) !important; border-radius: var(--r-sm) !important; border: none !important; min-width: 32px; } .rz-paginator .rz-paginator-page.rz-state-active { background: var(--accent) !important; color: #fff !important; } .rz-paginator .rz-paginator-element:hover { background: var(--surface-2) !important; } /* Badges -> status chips */ .rz-badge { border-radius: var(--r-pill) !important; font-weight: 600 !important; font-size: 12px !important; padding: 3px 11px !important; box-shadow: none !important; letter-spacing: 0 !important; } .rz-badge.rz-success, .rz-badge-success { background: var(--positive-weak) !important; color: var(--positive) !important; } .rz-badge.rz-warning, .rz-badge-warning { background: var(--warn-weak) !important; color: var(--warn-text) !important; } .rz-badge.rz-danger, .rz-badge-danger { background: var(--danger-weak) !important; color: var(--danger) !important; } .rz-badge.rz-info, .rz-badge-info { background: var(--info-weak) !important; color: var(--info) !important; } .rz-badge.rz-light, .rz-badge-light, .rz-badge.rz-secondary { background: var(--surface-3) !important; color: var(--text-2) !important; } /* Rich text editor (RadzenHtmlEditor) — themed surfaces so it matches inputs in light AND dark (it was hard-coded white, leaving light text invisible in dark). */ .rz-html-editor { border: 1px solid var(--border-2) !important; border-radius: var(--r-control) !important; overflow: hidden; background: var(--surface) !important; } .rz-html-editor-toolbar { background: var(--surface-2) !important; border-bottom: 1px solid var(--border) !important; } .rz-html-editor-content { background: var(--surface) !important; color: var(--text) !important; } .rz-html-editor-content a { color: var(--accent) !important; } /* toolbar buttons */ .rz-html-editor-button { background: transparent !important; color: var(--text-2) !important; border-radius: var(--r-sm) !important; } .rz-html-editor-button:hover { background: var(--surface-3) !important; color: var(--text) !important; } .rz-html-editor-button .rzi, .rz-html-editor-button .notranslate { color: inherit !important; } .rz-html-editor-button[disabled] { color: var(--text-4) !important; opacity: .6; } .rz-html-editor-separator { background: var(--border) !important; border: none !important; } /* font / size / format-block dropdowns */ .rz-html-editor-dropdown-value, .rz-html-editor-dropdown-trigger { color: var(--text-2) !important; background: transparent !important; } .rz-html-editor-dropdown-items { background: var(--surface) !important; border: 1px solid var(--border) !important; box-shadow: var(--shadow-md) !important; } .rz-html-editor-dropdown-item { color: var(--text) !important; } .rz-html-editor-dropdown-item:hover { background: var(--surface-2) !important; } /* color-picker triggers (keep the colored value bar untouched) */ .rz-html-editor-color, .rz-html-editor-colorpicker { color: var(--text-2) !important; } /* Dialogs */ .rz-dialog-mask, .rz-dialog-wrapper { background: rgba(8,10,16,.55) !important; } .rz-dialog { background: var(--surface) !important; color: var(--text) !important; border-radius: 18px !important; box-shadow: var(--shadow-md) !important; border: 1px solid var(--border) !important; overflow: hidden; } .rz-dialog-titlebar { background: transparent !important; border-bottom: 1px solid var(--border) !important; color: var(--text) !important; padding: 18px 22px !important; } .rz-dialog-title { color: var(--text) !important; font-weight: 700 !important; font-size: 18px !important; } .rz-dialog-content { background: var(--surface) !important; color: var(--text) !important; padding: 20px 22px !important; } /* Tabs — clean underline style (rounded accent bar, hover, uppercase) */ .rz-tabview, .rz-tabview-nav { background: transparent !important; border: none !important; } .rz-tabview-nav { border-bottom: 1px solid var(--border) !important; gap: 2px; padding-inline: 2px; } .rz-tabview-nav li { background: transparent !important; border: none !important; margin: 0 !important; } .rz-tabview-nav li a { position: relative; display: inline-flex; align-items: center; padding: 14px 18px !important; background: transparent !important; border: none !important; cursor: pointer; } .rz-tabview-nav li a .rz-tabview-title { color: var(--text-3) !important; font-weight: 600 !important; font-size: 13px !important; letter-spacing: .03em; text-transform: uppercase; transition: color .15s ease; border: none !important; } .rz-tabview-nav li:hover a .rz-tabview-title { color: var(--text) !important; } .rz-tabview-nav li a::after { content: ""; position: absolute; inset-inline: 12px; bottom: -1px; height: 3px; background: transparent; border-radius: 3px 3px 0 0; transition: background .15s ease; } .rz-tabview-nav li.rz-tabview-selected a .rz-tabview-title, .rz-tabview-nav li.rz-state-active a .rz-tabview-title { color: var(--accent-text) !important; font-weight: 700 !important; } .rz-tabview-nav li.rz-tabview-selected a::after, .rz-tabview-nav li.rz-state-active a::after { background: var(--accent) !important; } /* Switch */ .rz-switch.rz-switch-checked .rz-switch-circle { background: #fff !important; } .rz-switch.rz-switch-checked { background: var(--accent) !important; } /* Render RadzenCheckBox as a standard toggle switch across the whole system. NOTE: Radzen Material uses .rz-chkbox-box::after for a hover RIPPLE (grows to 2.5rem, tints to primary), so we disable that and build the knob on ::before. */ .rz-chkbox { display: inline-flex !important; align-items: center; vertical-align: middle; cursor: pointer; width: 44px !important; height: 24px !important; min-width: 44px !important; padding: 0 !important; margin-inline-end: 14px !important; } .rz-chkbox + .rz-label, .rz-chkbox + label { margin-inline-start: 6px !important; } .rz-chkbox .rz-chkbox-box { position: relative !important; width: 44px !important; height: 24px !important; flex: none; border-radius: 999px !important; background: var(--surface-3) !important; border: 1px solid var(--border-2) !important; box-shadow: none !important; transition: background .15s ease, border-color .15s ease; } /* kill Radzen's ripple pseudo so it can't fight the knob */ .rz-chkbox .rz-chkbox-box::after { display: none !important; content: none !important; } /* the sliding knob */ .rz-chkbox .rz-chkbox-box::before { content: "" !important; position: absolute !important; top: 50% !important; left: 3px !important; width: 18px !important; height: 18px !important; border-radius: 50% !important; background: #fff !important; transform: translateY(-50%) !important; transition: transform .15s ease !important; box-shadow: 0 1px 3px rgba(0,0,0,.4) !important; z-index: 1 !important; } .rz-chkbox .rz-chkbox-box.rz-state-active { background: var(--accent) !important; border-color: var(--accent) !important; } .rz-chkbox .rz-chkbox-box.rz-state-active::before { transform: translateY(-50%) translateX(20px) !important; } .rz-chkbox .rz-chkbox-icon { display: none !important; } .rz-chkbox.rz-state-focused .rz-chkbox-box, .rz-chkbox:focus .rz-chkbox-box { box-shadow: 0 0 0 3px var(--accent-weak) !important; } /* RTL: knob starts on the right, slides left */ [dir="rtl"] .rz-chkbox .rz-chkbox-box::before { left: auto !important; right: 3px !important; } [dir="rtl"] .rz-chkbox .rz-chkbox-box.rz-state-active::before { transform: translateY(-50%) translateX(-20px) !important; } /* Notifications / toasts */ .rz-notification-item-wrapper { background: var(--surface) !important; color: var(--text) !important; border: 1px solid var(--border) !important; border-radius: 14px !important; box-shadow: var(--shadow-md) !important; overflow: hidden; } .rz-notification-item { background: transparent !important; border: none !important; box-shadow: none !important; color: var(--text) !important; padding: 14px 16px !important; border-inline-start: 3px solid var(--border-2) !important; } .rz-notification-title { color: var(--text) !important; font-weight: 700 !important; font-size: 14px !important; } .rz-notification-message { color: var(--text-2) !important; font-size: 13px !important; } .rz-notification-close { color: var(--text-3) !important; opacity: .8; } .rz-notification-close:hover { color: var(--text) !important; opacity: 1; } .rz-notification-icon { font-size: 20px !important; } /* status icon + left accent */ .rz-notification-success .rz-notification-icon { color: var(--positive) !important; } .rz-notification-error .rz-notification-icon { color: var(--danger) !important; } .rz-notification-warn .rz-notification-icon { color: var(--warn-text) !important; } .rz-notification-info .rz-notification-icon { color: var(--info) !important; } .rz-notification-success .rz-notification-item { border-inline-start-color: var(--positive) !important; } .rz-notification-error .rz-notification-item { border-inline-start-color: var(--danger) !important; } .rz-notification-warn .rz-notification-item { border-inline-start-color: var(--warn) !important; } .rz-notification-info .rz-notification-item { border-inline-start-color: var(--info) !important; } /* progress bar */ .rz-notification-item-wrapper > .rz-progressbar { height: 3px !important; background: var(--surface-3) !important; border-radius: 0 !important; } .rz-notification-item-wrapper > .rz-progressbar .rz-progressbar-value { background: var(--accent) !important; } .rz-notification-success .rz-progressbar-value { background: var(--positive) !important; } .rz-notification-error .rz-progressbar-value { background: var(--danger) !important; } .rz-notification-warn .rz-progressbar-value { background: var(--warn) !important; } .rz-notification-info .rz-progressbar-value { background: var(--info) !important; } /* Progress */ .rz-progressbar-circular-path { stroke: var(--accent) !important; } /* Icons that should follow text color */ .rz-icon, .rz-button .rz-button-icon { color: inherit; } /* ===================== GRIDTOOLBAR ===================== */ /* Toolbar must not add its own box padding/height — that overflowed the card header downward and overlapped the grid. Keep it inline with the title row. */ .pro-grid-toolbar { width: auto; margin: 0 !important; } .pro-grid-toolbar__surface { padding: 0 !important; justify-content: flex-start !important; gap: .5rem !important; align-items: center; } .pro-grid-toolbar__actions { gap: .25rem !important; align-items: center; } .pro-grid-toolbar__left { gap: .4rem !important; } .card-header { min-height: 62px; row-gap: 10px; } /* Ghost buttons (transparent) — override the global rz-light box treatment */ .rz-button.pro-grid-toolbar__btn { background: transparent !important; color: var(--text-2) !important; border: 1px solid transparent !important; box-shadow: none !important; } .rz-button.pro-grid-toolbar__btn:hover { background: var(--surface-2) !important; color: var(--text) !important; } .pro-grid-toolbar__label, .pro-grid-toolbar__label-icon { color: var(--text-3) !important; } .pro-grid-toolbar__page-size.rz-dropdown { background: var(--surface-2) !important; border: 1px solid var(--border-2) !important; } .pro-grid-toolbar__page-size.rz-dropdown .rz-dropdown-label, .pro-grid-toolbar__page-size.rz-dropdown .rz-dropdown-trigger, .pro-grid-toolbar__page-size.rz-dropdown .rz-dropdown-trigger-icon { color: var(--text-2) !important; } /* Primary "Add" — accent on plain cards */ .rz-button.pro-grid-toolbar__btn.pro-grid-toolbar__btn--primary { background: var(--accent) !important; color: #fff !important; border-color: var(--accent) !important; box-shadow: none !important; } .rz-button.pro-grid-toolbar__btn.pro-grid-toolbar__btn--primary:hover { background: var(--accent-2) !important; } /* On accent header bars: ghost buttons turn white text; Add becomes a white pill */ .card-header--accent .rz-button.pro-grid-toolbar__btn, .rental-header-bar .rz-button.pro-grid-toolbar__btn { color: #fff !important; background: transparent !important; } .card-header--accent .rz-button.pro-grid-toolbar__btn:hover, .rental-header-bar .rz-button.pro-grid-toolbar__btn:hover { background: rgba(255,255,255,.18) !important; color: #fff !important; } .card-header--accent .rz-button.pro-grid-toolbar__btn--primary, .rental-header-bar .rz-button.pro-grid-toolbar__btn--primary { background: #fff !important; color: var(--accent-text) !important; border-color: #fff !important; } .card-header--accent .rz-button.pro-grid-toolbar__btn--primary:hover, .rental-header-bar .rz-button.pro-grid-toolbar__btn--primary:hover { background: rgba(255,255,255,.9) !important; color: var(--accent-text) !important; } /* the inner text/icon of the white "Add" pill must be accent (Radzen forces them white) */ .card-header--accent .rz-button.pro-grid-toolbar__btn--primary .rz-button-text, .card-header--accent .rz-button.pro-grid-toolbar__btn--primary .rz-button-icon, .card-header--accent .rz-button.pro-grid-toolbar__btn--primary .rzi, .rental-header-bar .rz-button.pro-grid-toolbar__btn--primary .rz-button-text, .rental-header-bar .rz-button.pro-grid-toolbar__btn--primary .rz-button-icon, .rental-header-bar .rz-button.pro-grid-toolbar__btn--primary .rzi { color: var(--accent-text) !important; } .card-header--accent .pro-grid-toolbar__label, .rental-header-bar .pro-grid-toolbar__label, .card-header--accent .pro-grid-toolbar__label-icon, .rental-header-bar .pro-grid-toolbar__label-icon { color: rgba(255,255,255,.85) !important; } .card-header--accent .pro-grid-toolbar__page-size.rz-dropdown, .rental-header-bar .pro-grid-toolbar__page-size.rz-dropdown { background: rgba(255,255,255,.16) !important; border-color: rgba(255,255,255,.35) !important; } .card-header--accent .pro-grid-toolbar__page-size .rz-dropdown-label, .card-header--accent .pro-grid-toolbar__page-size .rz-dropdown-trigger-icon, .rental-header-bar .pro-grid-toolbar__page-size .rz-dropdown-label, .rental-header-bar .pro-grid-toolbar__page-size .rz-dropdown-trigger-icon { color: #fff !important; } /* ===================== BOOTSTRAP UTILITY TOKEN-MAP ===================== Keep pages we only styled globally (detail/tab pages) dark-mode safe. */ .bg-white { background-color: var(--surface) !important; } .bg-light { background-color: var(--surface-2) !important; } .text-dark { color: var(--text) !important; } .text-muted { color: var(--text-3) !important; } .text-secondary { color: var(--text-2) !important; } .border, .border-top, .border-bottom, .border-start, .border-end { border-color: var(--border) !important; } .table { color: var(--text); --bs-table-bg: transparent; --bs-table-color: var(--text); border-color: var(--border); } .table > :not(caption) > * > * { background-color: var(--surface); color: var(--text); border-bottom-color: var(--border); } .table-light, .table > thead { background-color: var(--surface-2); color: var(--text-3); } .list-group-item { background: var(--surface); color: var(--text); border-color: var(--border); } .form-control, .form-select { background: var(--surface-2); color: var(--text); border-color: var(--border-2); } .form-control:focus, .form-select:focus { background: var(--surface-2); color: var(--text); border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-weak); } .form-label { color: var(--text-3); } .alert { border-radius: var(--r-control); } /* Radzen color utilities — map to tokens so zebra-striped detail rows (e.g. View Order) stay readable in dark mode instead of light-on-light. */ .rz-background-color-base-50 { background-color: var(--surface-2) !important; } .rz-background-color-base-100 { background-color: var(--surface-3) !important; } .rz-background-color-base-200 { background-color: var(--surface-3) !important; } .rz-color-on-base-light, .rz-text-color { color: var(--text) !important; } /* ===================== ROW-ACTION SPLIT BUTTON ===================== Keep only the "⋮" dots; drop the redundant dropdown caret (AlwaysOpenPopup). */ .rz-splitbutton { box-shadow: none !important; background: transparent !important; } .rz-splitbutton .rz-splitbutton-menubutton, .rz-splitbutton > button:last-child:not(:first-child) { display: none !important; } .rz-splitbutton .rz-splitbutton-button, .rz-splitbutton > button:first-child { border-radius: var(--r-sm) !important; } /* Popup menu (row-action Edit/Delete, context menus) — token surface, dark-safe */ .rz-splitbutton-menu, .rz-menu { background: var(--surface) !important; border: 1px solid var(--border) !important; border-radius: 10px !important; box-shadow: var(--shadow-md) !important; overflow: hidden; padding: 0 !important; min-width: 140px !important; } .rz-menu-list { background: transparent !important; padding: 4px !important; margin: 0 !important; } .rz-menuitem { background: transparent !important; } .rz-menuitem-link { color: var(--text) !important; background: transparent !important; border-radius: 7px !important; padding: 6px 10px !important; font-size: 13px !important; display: flex; align-items: center; gap: 8px; min-height: 0 !important; } .rz-menuitem-link:hover, .rz-menuitem-link.rz-state-focus, .rz-menuitem-link:focus { background: var(--surface-2) !important; color: var(--text) !important; } .rz-menuitem-icon { color: var(--text-3) !important; font-size: 16px !important; width: auto !important; min-width: 0 !important; margin: 0 !important; } .rz-menuitem-text { color: inherit !important; } /* ===================== NAV PROGRESS BAR ===================== */ .cs-navprogress { position: fixed; top: 0; inset-inline-start: 0; height: 3px; width: 0; background: linear-gradient(90deg, var(--accent), var(--accent-2)); z-index: 9999; opacity: 0; pointer-events: none; transition: width .35s ease, opacity .25s ease; box-shadow: 0 0 8px var(--accent); } .cs-navprogress--active { opacity: 1; } .cs-navprogress--done { transition: width .15s ease, opacity .25s ease .1s; } /* ===================== RESPONSIVE ===================== */ @media (max-width: 991.98px) { /* Sidebar slides off-canvas and opens over the content */ .app-sidebar, .app-theme-white .app-sidebar { transform: translateX(-100%); transition: transform .25s ease; box-shadow: var(--shadow-md) !important; z-index: 1050 !important; } [dir="rtl"] .app-sidebar, [dir="rtl"] .app-theme-white .app-sidebar { transform: translateX(100%); } .sidebar-mobile-open .app-sidebar, .sidebar-mobile-open .app-theme-white .app-sidebar { transform: translateX(0) !important; } /* Dim backdrop while the sidebar is open. It MUST live inside .app-main so it shares the sidebar's stacking context (app-main creates one at z-index:8); otherwise it renders above the sidebar and blocks the nav clicks. */ .app-container.sidebar-mobile-open .app-main::after { content: ""; position: fixed; inset: 0; background: rgba(8, 10, 16, .5); z-index: 1000; } /* Topbar: full width, show hamburger, hide breadcrumb + user text to save room */ .app-header { inset-inline-start: 0 !important; z-index: 1045 !important; } /* content flows in the flex row and fills the space after the hamburger (base.css makes it position:absolute, which broke flex sizing on mobile) */ .app-header .app-header__content { position: static !important; flex: 1 1 auto !important; width: auto !important; min-width: 0; padding: 0 12px !important; gap: 8px; visibility: visible !important; /* ArchitectUI hides this on mobile behind a "…" toggle */ } .app-header .app-header__mobile-menu { display: flex !important; padding: 0 6px !important; align-items: center; order: -1 !important; /* hamburger on the left (matches the left drawer) */ } .topbar-crumb { display: none !important; } .topbar-actions { margin-inline-start: auto; gap: 6px; } .topbar-user__info { display: none !important; } /* Hamburger lines must be visible on the light topbar */ .hamburger-inner, .hamburger-inner::before, .hamburger-inner::after { background-color: var(--text) !important; } /* Content uses the full width */ .app-main .app-main__outer, .fixed-sidebar .app-main .app-main__outer { padding-inline-start: 0 !important; padding-inline-end: 0 !important; } .app-main .app-main__inner { padding: 16px !important; max-width: 100%; } /* Cards / toolbars stack and wrap gracefully */ .card-header { gap: 10px; } .pro-grid-toolbar__surface { flex-wrap: wrap; row-gap: 6px; } .hero-banner { padding: 20px; } .hero-banner__title { font-size: 23px; } /* (Horizontal grid scroll is handled globally in the DataGrid section.) */ } @media (max-width: 575.98px) { .app-main .app-main__inner { padding: 12px !important; } .hero-banner { flex-direction: column; align-items: flex-start; } .pro-grid-toolbar__btn .rz-button-text { display: none; } /* icons-only toolbar on tiny screens */ }