/* ========================================================================= ⚖️ Mr.Lawyer — Unified Theme (RTL / Arabic) Design language ported from the ERP gold theme, mirrored for RTL. Direction-sensitive rules use logical properties (inline-start/end) so a future LTR mode is a one-line dir="ltr" switch, not a stylesheet fork. ========================================================================= */ :root { /* === Brand palette — the gold of the existing Mr.Lawyer UI === */ --gold-dark: #9a7b4f; --gold: #b9975b; --gold-light: #d5b96b; --gold-soft: #e4c98a; --gold-highlight: #d4af37; --gold-glow: rgba(212, 175, 55, 0.45); /* === Surfaces === */ --bg-page: #f2f4f7; --bg-card: #ffffff; --bg-cream: #fff8e1; --bg-cream-soft: #fffaf0; --bg-cream-warm: #f6ecd4; --bg-row-alt: #faf6ee; --bg-sidebar: #ffffff; /* === Borders === */ --border-soft: #e6d4a8; --border-line: #e8eaee; --border-gold: #d4af37; --border-gold-2: #e0b94d; /* === Text === */ --text-primary: #2a2a2a; --text-muted: #6b7280; --text-gold: #a57b2f; --text-on-gold: #ffffff; --text-danger: #8b0000; /* === Status === */ --success: #198754; --success-bg: #d1e7dd; --danger: #c9302c; --danger-bg: #f8d7da; --warning: #e0a800; --warning-bg: #fff3cd; --info: #0d8ecf; --info-bg: #cff4fc; /* === KPI accents (dashboard tiles) === */ --kpi-green: #8bc34a; --kpi-amber: #f0ad4e; --kpi-red: #e05a5a; /* === Effects === */ --radius-sm: 8px; --radius: 12px; --radius-lg: 16px; --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.06); --shadow: 0 4px 14px rgba(154, 123, 79, 0.16); --shadow-gold: 0 0 14px rgba(212, 175, 55, 0.32); --transition: all 0.22s ease-in-out; /* === Layout === */ --sidebar-width: 250px; --sidebar-collapsed: 66px; --header-height: 62px; } /* ========================================================================= 🧱 Base ========================================================================= */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; font-family: 'Tajawal', 'Cairo', 'Segoe UI', system-ui, -apple-system, sans-serif; background: var(--bg-page); color: var(--text-primary); font-size: 14.5px; line-height: 1.6; } /* Latin digits inside an Arabic page read better with a tabular font and an explicit LTR run, otherwise phone numbers and dates flip apart. */ .num, .data-table td.num, .money, time, .ltr { direction: ltr; unicode-bidi: isolate; font-variant-numeric: tabular-nums; } a { color: var(--gold-dark); text-decoration: none; transition: var(--transition); } a:hover { color: var(--gold); } h1, h2, h3, h4, h5 { margin: 0 0 8px; font-weight: 700; line-height: 1.35; } h1 { font-size: 22px; } h2 { font-size: 19px; } h3 { font-size: 17px; } h4 { font-size: 15px; } /* ========================================================================= 📦 App layout — header + sidebar + main The sidebar sits on the RIGHT in RTL; the grid columns are declared in visual order and the browser mirrors them because . ========================================================================= */ .app-shell { display: grid; grid-template-columns: var(--sidebar-width) 1fr; grid-template-rows: var(--header-height) 1fr; grid-template-areas: "sidebar header" "sidebar main"; min-height: 100vh; } .app-shell.sidebar-collapsed { grid-template-columns: var(--sidebar-collapsed) 1fr; } .app-header { grid-area: header; } .app-sidebar { grid-area: sidebar; } .app-main { grid-area: main; padding: 20px 24px 40px; min-width: 0; } /* ---- Header ---- */ .app-header { display: flex; align-items: center; gap: 12px; padding: 0 20px; background: linear-gradient(90deg, var(--gold-dark), var(--gold)); color: var(--text-on-gold); box-shadow: var(--shadow-sm); position: sticky; top: 0; z-index: 40; } .app-header .page-title { font-size: 16px; font-weight: 700; margin: 0; } .app-header .spacer { flex: 1; } .header-btn { background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.24); color: #fff; border-radius: var(--radius-sm); padding: 7px 11px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; font-size: 14px; transition: var(--transition); } .header-btn:hover { background: rgba(255,255,255,.28); color: #fff; } .header-pill { display: inline-flex; align-items: center; gap: 7px; background: rgba(255,255,255,.16); border-radius: 999px; padding: 5px 12px 5px 6px; font-size: 13px; } .header-pill img, .header-pill .avatar-dot { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; background: rgba(255,255,255,.3); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; } /* Notification bell counter */ .badge-count { position: absolute; top: -5px; inset-inline-end: -5px; background: var(--danger); color: #fff; border-radius: 999px; font-size: 10px; min-width: 17px; height: 17px; padding: 0 4px; display: flex; align-items: center; justify-content: center; font-weight: 700; } /* ---- Sidebar ---- */ .app-sidebar { background: var(--bg-sidebar); border-inline-start: 1px solid var(--border-line); overflow-y: auto; overflow-x: hidden; position: sticky; top: 0; height: 100vh; z-index: 50; scrollbar-width: thin; } .app-sidebar::-webkit-scrollbar { width: 6px; } .app-sidebar::-webkit-scrollbar-thumb { background: var(--border-soft); border-radius: 3px; } .sidebar-brand { height: var(--header-height); display: flex; align-items: center; gap: 10px; padding: 0 16px; border-bottom: 1px solid var(--border-line); font-weight: 800; color: var(--gold-dark); font-size: 17px; letter-spacing: .5px; } .sidebar-brand .brand-mark { width: 34px; height: 34px; border-radius: 9px; background: linear-gradient(135deg, var(--gold), var(--gold-highlight)); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; } .sidebar-nav { padding: 10px 8px 40px; } .sidebar-link { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: var(--radius-sm); color: var(--text-primary); font-size: 14px; margin-bottom: 2px; white-space: nowrap; transition: var(--transition); border-inline-start: 3px solid transparent; } .sidebar-link:hover { background: var(--bg-cream-soft); color: var(--gold-dark); } .sidebar-link.active { background: linear-gradient(90deg, var(--gold-dark), var(--gold)); color: #fff; font-weight: 700; box-shadow: var(--shadow-sm); } .sidebar-link.active:hover { color: #fff; } .sidebar-icon { width: 22px; text-align: center; font-size: 16px; flex-shrink: 0; color: var(--grp-c, inherit); } .sidebar-link.active .sidebar-icon { color: #fff; } /* Collapsible group */ .sidebar-group { margin-bottom: 4px; } .sidebar-group > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: var(--radius-sm); font-size: 14px; font-weight: 600; color: var(--text-primary); transition: var(--transition); } .sidebar-group > summary::-webkit-details-marker { display: none; } .sidebar-group > summary:hover { background: var(--bg-cream-soft); } .sidebar-group > summary .chev { margin-inline-start: auto; font-size: 11px; transition: transform .2s; color: var(--text-muted); } .sidebar-group[open] > summary .chev { transform: rotate(-90deg); } .sidebar-group[open] > summary { color: var(--gold-dark); } .sidebar-group .group-items { padding-inline-start: 14px; margin-top: 2px; } .sidebar-group .group-items .sidebar-link { font-size: 13.5px; padding: 7px 10px; } /* Collapsed mode hides labels and centres the icons. */ .sidebar-collapsed .sidebar-label, .sidebar-collapsed .sidebar-group > summary .chev { display: none; } .sidebar-collapsed .sidebar-link, .sidebar-collapsed .sidebar-group > summary { justify-content: center; padding: 11px 4px; } .sidebar-collapsed .sidebar-group .group-items { padding-inline-start: 0; } .sidebar-collapsed .sidebar-brand { justify-content: center; padding: 0; } /* ========================================================================= 🧭 Page head + breadcrumb ========================================================================= */ .page-head { display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; } .page-head .titles { flex: 1; min-width: 200px; } .page-head h1 { margin: 0; color: var(--gold-dark); } .page-head .subtitle { color: var(--text-muted); font-size: 13px; margin-top: 2px; } .page-head .actions { display: flex; gap: 8px; flex-wrap: wrap; } .breadcrumb { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-muted); margin-bottom: 6px; } .breadcrumb a { color: var(--text-muted); } .breadcrumb a:hover { color: var(--gold); } .breadcrumb .sep { opacity: .5; } /* ========================================================================= 🃏 Cards & KPI tiles ========================================================================= */ .card { background: var(--bg-card); border: 1px solid var(--border-line); border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow-sm); margin-bottom: 16px; } .card-gold { border-color: var(--border-soft); background: var(--bg-cream-soft); } .card-head { display: flex; align-items: center; gap: 10px; margin: -16px -18px 14px; padding: 12px 18px; border-bottom: 1px solid var(--border-line); font-weight: 700; color: var(--gold-dark); } .card-head .actions { margin-inline-start: auto; display: flex; gap: 6px; } .card-body-flush { margin: 0 -18px -16px; } .kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin-bottom: 18px; } .kpi-card { display: flex; align-items: center; gap: 14px; padding: 18px; border-radius: var(--radius); color: #fff; box-shadow: var(--shadow-sm); background: var(--kpi-c, var(--gold)); transition: var(--transition); } .kpi-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); color: #fff; } .kpi-card .kpi-icon { width: 54px; height: 54px; border-radius: var(--radius-sm); background: #fff; color: var(--kpi-c, var(--gold)); display: flex; align-items: center; justify-content: center; font-size: 24px; flex-shrink: 0; } .kpi-card .kpi-label { font-size: 15px; font-weight: 600; opacity: .95; } .kpi-card .kpi-value { font-size: 28px; font-weight: 800; line-height: 1.1; } /* Info strip on the dashboard — day / date / city / weather */ .info-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 18px; } .info-tile { background: var(--bg-card); border: 1px solid var(--border-line); border-radius: var(--radius); padding: 14px; text-align: center; box-shadow: var(--shadow-sm); } .info-tile.gold { background: linear-gradient(135deg, var(--gold-dark), var(--gold)); color: #fff; border-color: transparent; } .info-tile .v { font-size: 19px; font-weight: 700; } .info-tile .k { font-size: 12px; opacity: .8; } /* ========================================================================= 🔘 Buttons ========================================================================= */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 15px; border: 1px solid transparent; border-radius: var(--radius-sm); font-size: 14px; font-family: inherit; font-weight: 600; cursor: pointer; transition: var(--transition); background: #e9ecef; color: var(--text-primary); line-height: 1.4; white-space: nowrap; } .btn:hover { filter: brightness(.96); } .btn:active { transform: translateY(1px); } .btn:disabled, .btn.disabled { opacity: .55; cursor: not-allowed; } .btn-gold { background: linear-gradient(135deg, var(--gold-dark), var(--gold)); color: #fff; } .btn-gold:hover { color: #fff; box-shadow: var(--shadow-gold); } .btn-primary { background: #3b6fd4; color: #fff; } .btn-primary:hover { color: #fff; } .btn-success { background: var(--success); color: #fff; } .btn-success:hover { color: #fff; } .btn-danger { background: var(--danger); color: #fff; } .btn-danger:hover { color: #fff; } .btn-warning { background: var(--warning); color: #3a2f00; } .btn-outline { background: #fff; border-color: var(--border-soft); color: var(--gold-dark); } .btn-outline:hover { background: var(--bg-cream-soft); } .btn-ghost { background: transparent; color: var(--text-muted); } .btn-ghost:hover { background: #eef0f3; color: var(--text-primary); } .btn-sm { padding: 5px 10px; font-size: 12.5px; border-radius: 7px; } .btn-lg { padding: 11px 22px; font-size: 16px; } .btn-icon { padding: 6px 9px; } /* ========================================================================= 📝 Forms ========================================================================= */ .form-group { margin-bottom: 14px; } .form-label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 5px; color: var(--text-primary); } .form-label .req { color: var(--danger); margin-inline-start: 3px; } .form-control, .form-select, textarea.form-control { width: 100%; padding: 9px 12px; border: 1px solid #d7dbe0; border-radius: var(--radius-sm); font-size: 14px; font-family: inherit; background: #fff; color: var(--text-primary); transition: var(--transition); } .form-control:focus, .form-select:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(185, 151, 91, .15); } .form-control[readonly], .form-control:disabled { background: #f4f5f7; color: var(--text-muted); } textarea.form-control { min-height: 84px; resize: vertical; } /* Native select arrow sits on the correct side automatically in RTL, but the default padding crowds it — give it room. */ .form-select { padding-inline-end: 30px; } .form-help { font-size: 12px; color: var(--text-muted); margin-top: 4px; } .form-error { font-size: 12px; color: var(--danger); margin-top: 4px; } .form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 0 14px; } .form-grid .span-2 { grid-column: span 2; } .form-grid .span-all { grid-column: 1 / -1; } .input-group { display: flex; } .input-group .form-control { border-start-end-radius: 0; border-end-end-radius: 0; } .input-group .btn { border-start-start-radius: 0; border-end-start-radius: 0; } .check-line { display: flex; align-items: center; gap: 7px; margin-bottom: 7px; font-size: 13.5px; } .check-line input[type=checkbox], .check-line input[type=radio] { width: 16px; height: 16px; accent-color: var(--gold); cursor: pointer; } /* Repeatable row block (خصوم، شركاء، دفعات …) */ .repeat-row { display: grid; gap: 10px; align-items: end; padding: 12px; border: 1px dashed var(--border-soft); border-radius: var(--radius-sm); background: var(--bg-cream-soft); margin-bottom: 10px; } .repeat-row .remove-row { align-self: center; } /* ========================================================================= 📊 Tables ========================================================================= */ .table-wrap { background: var(--bg-card); border: 1px solid var(--border-line); border-radius: var(--radius); overflow-x: auto; box-shadow: var(--shadow-sm); margin-bottom: 16px; } .data-table { width: 100%; border-collapse: collapse; font-size: 13.5px; } .data-table thead th { background: var(--bg-cream-warm); color: var(--gold-dark); font-weight: 700; text-align: start; padding: 11px 12px; white-space: nowrap; border-bottom: 2px solid var(--border-soft); position: sticky; top: 0; z-index: 2; } .data-table tbody td { padding: 10px 12px; border-bottom: 1px solid var(--border-line); vertical-align: middle; } .data-table tbody tr:nth-child(even) { background: var(--bg-row-alt); } .data-table tbody tr:hover { background: var(--bg-cream); } .data-table tbody tr:last-child td { border-bottom: none; } .data-table .row-actions { display: flex; gap: 4px; white-space: nowrap; } .data-table .empty { text-align: center; padding: 36px 12px; color: var(--text-muted); } .table-toolbar { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; } .table-toolbar .grow { flex: 1; min-width: 200px; } .table-toolbar .form-group { margin-bottom: 0; } /* ========================================================================= 🏷️ Badges & alerts ========================================================================= */ .badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; } .badge-gold { background: var(--bg-cream); color: var(--text-gold); border: 1px solid var(--border-soft); } .badge-success { background: var(--success-bg); color: #0f5132; } .badge-danger { background: var(--danger-bg); color: #842029; } .badge-warning { background: var(--warning-bg); color: #664d03; } .badge-info { background: var(--info-bg); color: #055160; } .badge-muted { background: #eceff2; color: var(--text-muted); } .alert { padding: 12px 16px; border-radius: var(--radius-sm); margin-bottom: 14px; border-inline-start: 4px solid; font-size: 14px; } .alert-success { background: var(--success-bg); border-color: var(--success); color: #0f5132; } .alert-error, .alert-danger { background: var(--danger-bg); border-color: var(--danger); color: #842029; } .alert-warning { background: var(--warning-bg); border-color: var(--warning); color: #664d03; } .alert-info { background: var(--info-bg); border-color: var(--info); color: #055160; } /* ========================================================================= 🗂️ Tabs ========================================================================= */ .tabs { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 2px solid var(--border-line); margin-bottom: 18px; } .tabs a, .tabs button { padding: 9px 18px; border: none; background: transparent; font-family: inherit; font-size: 14px; font-weight: 600; color: var(--text-muted); cursor: pointer; border-radius: var(--radius-sm) var(--radius-sm) 0 0; margin-bottom: -2px; border-bottom: 2px solid transparent; transition: var(--transition); } .tabs a:hover, .tabs button:hover { color: var(--gold-dark); background: var(--bg-cream-soft); } .tabs a.active, .tabs button.active { color: #fff; background: linear-gradient(135deg, var(--gold-dark), var(--gold)); border-bottom-color: var(--gold-dark); } .tab-pane { display: none; } .tab-pane.active { display: block; } /* ========================================================================= 🪟 Modal ========================================================================= */ .modal-backdrop { position: fixed; inset: 0; background: rgba(20, 18, 14, .5); display: none; align-items: flex-start; justify-content: center; z-index: 200; padding: 40px 16px; overflow-y: auto; } .modal-backdrop.open { display: flex; } .modal-box { background: var(--bg-card); border-radius: var(--radius-lg); width: 100%; max-width: 620px; box-shadow: 0 18px 50px rgba(0,0,0,.28); animation: modal-in .18s ease-out; } .modal-box.wide { max-width: 940px; } @keyframes modal-in { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } } .modal-head { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--border-line); background: linear-gradient(135deg, var(--gold-dark), var(--gold)); color: #fff; border-radius: var(--radius-lg) var(--radius-lg) 0 0; font-weight: 700; } .modal-head .close { margin-inline-start: auto; background: rgba(255,255,255,.2); border: none; color: #fff; width: 28px; height: 28px; border-radius: 50%; cursor: pointer; font-size: 16px; line-height: 1; } .modal-body { padding: 18px; } .modal-foot { padding: 12px 18px; border-top: 1px solid var(--border-line); display: flex; gap: 8px; justify-content: flex-start; background: #fafbfc; border-radius: 0 0 var(--radius-lg) var(--radius-lg); } /* ========================================================================= 📄 Pagination ========================================================================= */ .pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .pager .pages { display: flex; gap: 4px; } .pager .pages a, .pager .pages span { min-width: 34px; padding: 5px 9px; text-align: center; border: 1px solid var(--border-line); border-radius: 7px; font-size: 13px; background: #fff; color: var(--text-primary); } .pager .pages a:hover { border-color: var(--gold); color: var(--gold-dark); } .pager .pages .current { background: var(--gold); border-color: var(--gold); color: #fff; font-weight: 700; } .pager .pages .gap { border: none; background: transparent; } /* ========================================================================= 🧰 Utilities ========================================================================= */ .flex { display: flex; } .flex-col { display: flex; flex-direction: column; } .flex-between { display: flex; align-items: center; justify-content: space-between; } .flex-center { display: flex; align-items: center; justify-content: center; } .items-center { align-items: center; } .flex-1 { flex: 1; } .flex-wrap { flex-wrap: wrap; } .grid { display: grid; } .grid-cols-2 { grid-template-columns: repeat(2, 1fr); } .grid-cols-3 { grid-template-columns: repeat(3, 1fr); } .grid-cols-4 { grid-template-columns: repeat(4, 1fr); } .gap-1 { gap: 4px; } .gap-2 { gap: 8px; } .gap-3 { gap: 14px; } .gap-4 { gap: 20px; } .mt-1 { margin-top: 4px; } .mt-2 { margin-top: 8px; } .mt-3 { margin-top: 14px; } .mt-4 { margin-top: 20px; } .mb-0 { margin-bottom: 0; } .mb-1 { margin-bottom: 4px; } .mb-2 { margin-bottom: 8px; } .mb-3 { margin-bottom: 14px; } .mb-4 { margin-bottom: 20px; } .text-center { text-align: center; } .text-end { text-align: end; } .text-muted { color: var(--text-muted); } .text-gold { color: var(--gold-dark); } .text-danger { color: var(--danger); } .text-success{ color: var(--success); } .fw-700 { font-weight: 700; } .fs-sm { font-size: 12.5px; } .w-100 { width: 100%; } .hidden { display: none !important; } .nowrap { white-space: nowrap; } /* Definition list used on profile pages */ .kv-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px 18px; } .kv { display: flex; gap: 8px; padding: 7px 0; border-bottom: 1px dashed var(--border-line); font-size: 13.5px; } .kv .k { color: var(--text-muted); min-width: 130px; } .kv .v { font-weight: 600; } /* Timeline used for case procedures */ .timeline { position: relative; padding-inline-start: 22px; } .timeline::before { content: ''; position: absolute; inset-inline-start: 6px; top: 4px; bottom: 4px; width: 2px; background: var(--border-soft); } .timeline-item { position: relative; padding-bottom: 16px; } .timeline-item::before { content: ''; position: absolute; inset-inline-start: -21px; top: 6px; width: 11px; height: 11px; border-radius: 50%; background: var(--gold); border: 2px solid #fff; box-shadow: 0 0 0 2px var(--border-soft); } .timeline-item .t-date { font-size: 12px; color: var(--text-muted); } .timeline-item .t-body { background: var(--bg-cream-soft); border: 1px solid var(--border-soft); border-radius: var(--radius-sm); padding: 10px 12px; margin-top: 4px; } /* ========================================================================= 🔐 Login page ========================================================================= */ .login-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #6f5836, var(--gold-dark) 55%, var(--gold)); padding: 24px; } .login-card { background: #fff; border-radius: var(--radius-lg); box-shadow: 0 22px 60px rgba(0,0,0,.3); width: 100%; max-width: 400px; padding: 34px 30px 26px; text-align: center; } .login-card .brand-mark { width: 64px; height: 64px; margin: 0 auto 14px; border-radius: 16px; background: linear-gradient(135deg, var(--gold), var(--gold-highlight)); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 30px; } .login-card h1 { color: var(--gold-dark); font-size: 21px; } .login-card .form-group { text-align: start; } .login-foot { margin-top: 22px; font-size: 12px; color: rgba(255,255,255,.85); text-align: center; } /* ========================================================================= 🖨️ Print ========================================================================= */ @media print { .app-sidebar, .app-header, .no-print, .table-toolbar, .pager { display: none !important; } .app-shell { display: block; } .app-main { padding: 0; } .card, .table-wrap { box-shadow: none; border-color: #ccc; } a[href]::after { content: ''; } } /* ========================================================================= 📱 Responsive ========================================================================= */ @media (max-width: 1024px) { .app-shell { grid-template-columns: 1fr; grid-template-areas: "header" "main"; } .app-sidebar { position: fixed; inset-block: 0; inset-inline-end: 0; width: var(--sidebar-width); transform: translateX(100%); transition: transform .22s ease-in-out; box-shadow: -6px 0 24px rgba(0,0,0,.18); } html[dir="ltr"] .app-sidebar { transform: translateX(-100%); } .app-sidebar.open { transform: none; } .sidebar-scrim { position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 45; display: none; } .sidebar-scrim.open { display: block; } .app-main { padding: 16px; } } @media (max-width: 640px) { body { font-size: 14px; } .kpi-grid { grid-template-columns: 1fr; } .form-grid { grid-template-columns: 1fr; } .form-grid .span-2 { grid-column: span 1; } .page-head { flex-direction: column; align-items: stretch; } .modal-backdrop { padding: 16px 8px; } }