/* Voice — Design tokens (Blade implementation) */ @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@300;400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&family=Inter:wght@400;500;600;700&display=swap'); :root { /* Brand */ --brand-50: oklch(0.97 0.025 70); --brand-100: oklch(0.94 0.05 65); --brand-200: oklch(0.88 0.08 60); --brand-300: oklch(0.80 0.12 55); --brand-400: oklch(0.72 0.15 50); --brand-500: oklch(0.65 0.16 48); --brand-600: oklch(0.58 0.16 42); --brand-700: oklch(0.50 0.14 38); --brand-800: oklch(0.40 0.11 35); --brand-900: oklch(0.32 0.08 35); /* Warm neutrals */ --n-0: #ffffff; --n-25: oklch(0.99 0.005 70); --n-50: oklch(0.98 0.006 70); --n-75: oklch(0.965 0.007 70); --n-100: oklch(0.95 0.008 70); --n-150: oklch(0.93 0.008 70); --n-200: oklch(0.90 0.008 70); --n-300: oklch(0.82 0.008 70); --n-400: oklch(0.68 0.008 70); --n-500: oklch(0.55 0.010 70); --n-600: oklch(0.44 0.012 70); --n-700: oklch(0.33 0.012 70); --n-800: oklch(0.22 0.012 70); --n-900: oklch(0.16 0.012 70); --n-950: oklch(0.10 0.012 70); /* Semantic */ --success-500: oklch(0.62 0.14 150); --success-50: oklch(0.96 0.04 150); --success-700: oklch(0.46 0.13 150); --warning-500: oklch(0.78 0.14 80); --warning-50: oklch(0.97 0.04 85); --danger-500: oklch(0.60 0.20 25); --danger-50: oklch(0.96 0.04 25); --danger-700: oklch(0.46 0.18 25); --info-500: oklch(0.60 0.13 230); --info-50: oklch(0.96 0.03 230); /* WhatsApp green */ --wa-500: #25D366; --wa-50: #E7FAEF; --wa-700: #128C7E; /* Surfaces */ --bg-app: var(--n-50); --bg-surface: var(--n-0); --bg-sunken: var(--n-75); --border: var(--n-150); --border-strong: var(--n-200); --text: var(--n-900); --text-muted: var(--n-600); --text-faint: var(--n-500); /* Radii */ --r-sm: 6px; --r: 10px; --r-md: 12px; --r-lg: 16px; --r-xl: 22px; --r-full: 999px; /* Shadows */ --shadow-xs: 0 1px 0 oklch(0.2 0.01 70 / 0.04); --shadow-sm: 0 1px 2px oklch(0.2 0.01 70 / 0.06), 0 1px 1px oklch(0.2 0.01 70 / 0.04); --shadow: 0 1px 2px oklch(0.2 0.01 70 / 0.06), 0 4px 12px oklch(0.2 0.01 70 / 0.06); --shadow-lg: 0 8px 24px oklch(0.2 0.01 70 / 0.08), 0 2px 6px oklch(0.2 0.01 70 / 0.06); --shadow-pop: 0 24px 48px oklch(0.2 0.01 70 / 0.12), 0 4px 12px oklch(0.2 0.01 70 / 0.08); /* Type */ --font-ar: 'IBM Plex Sans Arabic', 'Segoe UI', system-ui, sans-serif; --font-en: 'Inter', system-ui, sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, monospace; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: var(--font-ar); color: var(--text); background: var(--bg-app); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; /* الاتجاه يتبع وسم (rtl للعربية / ltr للإنجليزية) — لا تُثبّته هنا */ } a { color: inherit; text-decoration: none; } button { font-family: var(--font-ar); } /* Screen frame */ .screen { width: 100vw; min-height: 100vh; background: var(--bg-app); color: var(--text); font-family: var(--font-ar); display: flex; overflow: hidden; } .en, .mono, .num { font-family: var(--font-mono); direction: ltr; unicode-bidi: isolate; } /* Buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 38px; padding: 0 16px; border-radius: var(--r); font-family: var(--font-ar); font-weight: 500; font-size: 14px; line-height: 1; border: 1px solid transparent; cursor: pointer; white-space: nowrap; transition: background 120ms, border-color 120ms, color 120ms, box-shadow 120ms; text-decoration: none; } .btn-primary { background: var(--brand-600); color: white; box-shadow: var(--shadow-xs), inset 0 -1px 0 oklch(0.3 0.08 38 / 0.4), inset 0 1px 0 oklch(1 0 0 / 0.15); } .btn-primary:hover { background: var(--brand-700); } .btn-ghost { background: transparent; color: var(--text); border-color: var(--border); } .btn-ghost:hover { background: var(--n-75); } .btn-secondary { background: var(--n-100); color: var(--text); border-color: var(--border); } .btn-secondary:hover { background: var(--n-150); } .btn-danger { background: var(--danger-500); color: white; } .btn-wa { background: var(--wa-500); color: white; } .btn-sm { height: 32px; padding: 0 12px; font-size: 13px; border-radius: 8px; } .btn-lg { height: 44px; padding: 0 20px; font-size: 15px; } .btn-icon { width: 36px; padding: 0; } .btn-icon.btn-sm { width: 32px; } /* Inputs */ .field { display: flex; flex-direction: column; gap: 6px; } .label { font-size: 13px; font-weight: 500; color: var(--text); } .label .req { color: var(--danger-500); margin-inline-start: 4px; } .input, .textarea, .select { width: 100%; height: 40px; padding: 0 12px; border-radius: var(--r); border: 1px solid var(--border-strong); background: var(--bg-surface); color: var(--text); font-family: var(--font-ar); font-size: 14px; outline: none; transition: border-color 120ms, box-shadow 120ms; } .input::placeholder { color: var(--text-faint); } .input:focus, .textarea:focus, .select:focus { border-color: var(--brand-500); box-shadow: 0 0 0 3px oklch(0.65 0.16 48 / 0.18); } .textarea { height: auto; padding: 10px 12px; min-height: 80px; line-height: 1.6; resize: vertical; } .input-group { position: relative; display: flex; align-items: center; } .input-group .input { padding-inline-start: 38px; } .input-group .icon-left { position: absolute; inset-inline-start: 12px; color: var(--text-faint); pointer-events: none; display: inline-flex; } /* Card */ .card { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-xs); } .card-hd { padding: 16px 20px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .card-hd h3 { margin: 0; font-size: 15px; font-weight: 600; } .card-bd { padding: 20px; } /* Badges */ .badge { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border-radius: var(--r-full); font-size: 12px; font-weight: 500; border: 1px solid transparent; white-space: nowrap; } .badge .dot { width: 6px; height: 6px; border-radius: 999px; background: currentColor; } .b-success { background: var(--success-50); color: var(--success-700); } .b-danger { background: var(--danger-50); color: var(--danger-700); } .b-warning { background: var(--warning-50); color: oklch(0.42 0.12 60); } .b-info { background: var(--info-50); color: oklch(0.40 0.12 230); } .b-neutral { background: var(--n-100); color: var(--n-700); } .b-brand { background: var(--brand-50); color: var(--brand-700); } .b-wa { background: var(--wa-50); color: var(--wa-700); } /* Tables */ .table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13.5px; } .table th { text-align: start; padding: 10px 14px; font-weight: 500; font-size: 12px; color: var(--text-muted); background: var(--bg-sunken); border-bottom: 1px solid var(--border); letter-spacing: 0.02em; } .table th:first-child { border-start-start-radius: var(--r); } .table th:last-child { border-start-end-radius: var(--r); } /* Sortable column header — wraps the label in . */ .table th .th-sort { display: inline-flex; align-items: center; gap: 4px; color: inherit; text-decoration: none; cursor: pointer; transition: color 120ms ease; } .table th .th-sort:hover { color: var(--text); } .table th .th-sort[data-active="1"] { color: var(--brand-700); font-weight: 600; } .table td { padding: 12px 14px; border-bottom: 1px solid var(--border); color: var(--text); vertical-align: middle; } .table tr:last-child td { border-bottom: none; } .table tr.row-hover:hover td { background: var(--n-50); } /* Toggle */ .toggle { position: relative; display: inline-block; width: 36px; height: 20px; background: var(--n-300); border-radius: 999px; transition: background 160ms; cursor: pointer; border: none; flex-shrink: 0; } .toggle::after { content: ''; position: absolute; top: 2px; inset-inline-start: 2px; width: 16px; height: 16px; background: white; border-radius: 999px; transition: transform 160ms; box-shadow: 0 1px 2px oklch(0.2 0.01 70 / 0.2); } .toggle.on { background: var(--brand-600); } .toggle.on::after { transform: translateX(-16px); } [dir="rtl"] .toggle.on::after { transform: translateX(-16px); } /* Avatar */ .avatar { width: 32px; height: 32px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-weight: 600; font-size: 12px; background: var(--brand-100); color: var(--brand-800); flex-shrink: 0; } .av-brand { background: var(--brand-100); color: var(--brand-800); } .av-info { background: var(--info-50); color: oklch(0.40 0.12 230); } .av-success { background: var(--success-50); color: var(--success-700); } .av-neutral { background: var(--n-100); color: var(--n-700); } /* Stat tile */ .stat { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: 18px 20px; display: flex; flex-direction: column; gap: 6px; position: relative; overflow: hidden; } .stat .stat-label { font-size: 13px; color: var(--text-muted); display: flex; align-items: center; gap: 8px; } .stat .stat-value { font-size: 28px; font-weight: 600; letter-spacing: -0.01em; } .stat .stat-delta { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 500; } .stat .stat-delta.up { color: var(--success-700); } .stat .stat-delta.down { color: var(--danger-700); } /* Tabs */ .tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); } .tab { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; font-size: 13px; font-weight: 500; color: var(--text-muted); border-bottom: 2px solid transparent; cursor: pointer; margin-bottom: -1px; } .tab.active { color: var(--brand-700); border-bottom-color: var(--brand-600); } .tab:hover:not(.active) { color: var(--text); } /* Star rating */ .stars { display: inline-flex; gap: 2px; color: var(--n-200); } .stars .on { color: var(--warning-500); } /* Pill (filter/segmented) */ .seg { display: inline-flex; background: var(--n-100); border-radius: var(--r); padding: 3px; gap: 2px; border: 1px solid var(--border); } .seg button, .seg a { border: none; background: transparent; padding: 6px 12px; font-size: 13px; font-weight: 500; border-radius: 7px; cursor: pointer; color: var(--text-muted); font-family: var(--font-ar); display: inline-flex; align-items: center; justify-content: center; text-decoration: none; } .seg button.active, .seg a.active { background: var(--bg-surface); color: var(--text); box-shadow: var(--shadow-xs); } /* Filter chip (dashed border) */ .chip { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; border: 1px dashed var(--border-strong); border-radius: 8px; background: transparent; font-size: 12.5px; cursor: pointer; font-family: var(--font-ar); color: inherit; } .chip .chip-l { color: var(--text-muted); } .chip .chip-v { color: var(--text); font-weight: 500; } /* Status pill (uppercase, colored bg) */ .status-pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 4px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.4px; white-space: nowrap; } .status-rated { background: oklch(0.50 0.16 290); color: white; } .status-sent { background: var(--success-500); color: white; } .status-pending { background: var(--warning-500); color: oklch(0.25 0.10 60); } .status-delivered { background: oklch(0.55 0.16 230); color: white; } .status-failed { background: var(--danger-500); color: white; } .status-draft { background: var(--n-300); color: var(--n-800); } /* Scrollbar */ .screen ::-webkit-scrollbar { width: 8px; height: 8px; } .screen ::-webkit-scrollbar-thumb { background: var(--n-200); border-radius: 999px; } .screen ::-webkit-scrollbar-track { background: transparent; } /* ───────── App shell layout ───────── */ /* In Arabic (RTL) the menu lives on the right side of the screen. row-reverse on top of dir="rtl" lays out children in DOM order from LEFT → RIGHT visually, so DOM order (main, sidebar) places: main-col → far left (content) sidebar → far right (nav menu) */ .app-shell { display: flex; flex-direction: row-reverse; height: 100vh; overflow: hidden; } /* Light sidebar (right side in RTL). Collapses to a 56px icon rail when has the .sb-collapsed class (toggled by the hamburger button in the topbar; state persists in localStorage). */ .sidebar { width: 248px; flex-shrink: 0; background: var(--bg-surface); border-inline-end: 1px solid var(--border); display: flex; flex-direction: column; height: 100%; overflow: hidden; transition: width 220ms cubic-bezier(.2,.7,.3,1); } /* ─── Collapsed (icon-rail) mode ─────────────────────────────────── */ html.sb-collapsed .sidebar { width: 56px; } /* Hide group headers ("الفوترة", "تجربة العملاء", …) — !important لأن الزر يحمل display:flex مضمّناً */ html.sb-collapsed .sb-group-label { display: none !important; } /* Each nav item becomes an icon-only square button. Labels and count badges are hidden; the native `title` attribute provides a tooltip on hover. */ html.sb-collapsed .sb-nav { padding: 8px 6px 16px; } html.sb-collapsed .sb-item { justify-content: center; padding: 9px 0; margin: 2px 0; } html.sb-collapsed .sb-item > span { display: none; } html.sb-collapsed .sb-item.active::before { inset-inline-end: -6px; inset-inline-start: auto; } /* The hamburger toggle button — always visible in the topbar */ .sb-toggle { flex-shrink: 0; } /* ─── Password / secret reveal toggle inside .input-group ─── */ .input-group .input-eye { position: absolute; inset-inline-end: 6px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; border: none; background: transparent; cursor: pointer; color: var(--text-faint); border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; transition: color 120ms, background 120ms; } .input-group .input-eye:hover { color: var(--text); background: var(--n-100); } .input-group .input-eye:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 1px; } /* Reserve room on the trailing edge for the eye button */ .input-group:has(.input-eye) .input { padding-inline-end: 40px; } /* Swap icons based on .shown class */ .input-eye .eye-hide { display: none; } .input-eye.shown .eye-show { display: none; } .input-eye.shown .eye-hide { display: inline-flex; } .sb-nav { flex: 1; overflow-y: auto; padding: 8px 8px 16px; } .sb-group { margin-bottom: 6px; } .sb-group-label { display: flex; align-items: center; gap: 4px; width: 100%; background: none; border: 0; cursor: pointer; text-align: start; padding: 12px 12px 5px; font-family: inherit; font-size: 14.5px; font-weight: 800; color: var(--text); } /* نمط الـeyebrow (uppercase + تباعد) للإنجليزية فقط — يكسر اتصال الحروف العربية ولا أثر له فيها */ html[dir="ltr"] .sb-group-label { font-size: 11px; letter-spacing: 0.5px; text-transform: uppercase; } .sb-item { display: flex; align-items: center; gap: 10px; padding: 7px 10px; margin: 1px 0; border-radius: 7px; font-size: 13.5px; font-weight: 500; color: var(--text); position: relative; } .sb-item:hover { background: var(--n-50); } .sb-item.active { background: var(--brand-50); color: var(--brand-700); font-weight: 600; } .sb-item.active::before { content: ''; position: absolute; inset-inline-end: -8px; top: 5px; bottom: 5px; width: 3px; background: var(--brand-600); border-radius: 999px; } .sb-item-count { font-size: 11px; font-family: var(--font-mono); font-weight: 500; color: var(--text-faint); padding: 1px 6px; border-radius: 4px; margin-inline-start: auto; } .sb-item.active .sb-item-count { color: var(--brand-700); background: var(--brand-100); } /* عناوين فرعية داخل المجموعة (شجرة التقارير) */ .sb-subhead { font-size: 10.5px; font-weight: 800; color: var(--text-faint); padding: 9px 12px 3px; letter-spacing: .2px; } .sb-item.sb-sub { padding-inline-start: 24px; font-size: 12.5px; } .sb-item.sb-sub .sb-dot { width: 5px; height: 5px; border-radius: 999px; background: var(--text-faint); flex-shrink: 0; transition: background .15s; } .sb-item.sb-sub.active .sb-dot { background: var(--brand-600); } /* Main column (left of sidebar in RTL) */ .main-col { flex: 1; display: flex; flex-direction: column; min-width: 0; } /* Topbar */ .topbar { flex-shrink: 0; background: var(--bg-surface); border-bottom: 1px solid var(--border); } .topbar-row { height: 52px; display: flex; align-items: center; padding: 0 20px; gap: 16px; } .crumbs { flex: 1; display: flex; align-items: center; gap: 8px; font-size: 13px; } .crumb { color: var(--text-muted); font-weight: 400; } .crumb.last { color: var(--text); font-weight: 600; } .crumb:not(.last) { display: none; } /* أظهر الصفحة الحالية فقط */ .crumb-sep { display: none; } /* بلا فاصل "/" */ .topbar-divider { width: 1px; height: 22px; background: var(--border); } .topbar-tabs { padding: 0 20px; display: flex; gap: 4px; border-top: 1px solid var(--border); } .tb-tab { display: inline-flex; align-items: center; gap: 6px; padding: 10px 12px; font-size: 13px; font-weight: 500; background: transparent; border: none; cursor: pointer; color: var(--text-muted); border-bottom: 2px solid transparent; margin-bottom: -1px; font-family: var(--font-ar); text-decoration: none; } .tb-tab.active { color: var(--text); border-bottom-color: var(--brand-600); } .tb-tab-count { font-size: 10.5px; color: var(--text-faint); font-family: var(--font-mono); background: var(--n-100); padding: 1px 5px; border-radius: 4px; } main.app-main { flex: 1; overflow-y: auto; padding: 20px 24px; background: var(--bg-app); } /* Page header */ .page-hdr { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; } .page-title { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -0.3px; display: flex; align-items: center; gap: 10px; } .page-title-icon { width: 30px; height: 30px; border-radius: 8px; background: var(--brand-50); color: var(--brand-700); display: inline-flex; align-items: center; justify-content: center; } .page-sub { margin-top: 6px; font-size: 13px; color: var(--text-muted); } /* Stacked avatars */ .stack-av { display: inline-flex; align-items: center; } .stack-av .avatar { border: 2px solid var(--bg-surface); } .stack-av .avatar:not(:first-child) { margin-inline-start: -8px; } .stack-av .more { margin-inline-start: -8px; width: 22px; height: 22px; border-radius: 999px; background: var(--n-100); color: var(--text-muted); font-size: 10px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; border: 2px solid var(--bg-surface); } /* Pagination buttons */ .pg-btn { width: 32px; height: 32px; border-radius: 8px; border: none; background: transparent; color: var(--text-muted); cursor: pointer; font-weight: 500; font-family: var(--font-mono); } .pg-btn.active { background: var(--brand-50); color: var(--brand-700); } .pg-btn:hover { background: var(--n-75); } /* ───────── Modal (native ) ───────── Used by /admin/companies edit. The native element gives us free ESC-to-close + focus-trap, we just style it. */ .v-modal::backdrop { background: oklch(0.16 0.012 70 / 0.55); backdrop-filter: blur(2px); animation: vBackdropIn 160ms ease-out; } .v-modal { width: min(720px, calc(100vw - 32px)); /* Cap shorter so overflow happens reliably and scrollbar shows */ max-height: min(82vh, 720px); padding: 0; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--bg-surface); color: var(--text); box-shadow: var(--shadow-pop); font-family: var(--font-ar); overflow: hidden; animation: vModalIn 200ms cubic-bezier(.2,.7,.3,1); } /* Native 's default user-agent style breaks our flex column — the [open] attribute forces display:flex so the footer can stay docked. */ .v-modal[open] { display: flex; flex-direction: column; } /* When the modal's content is wrapped in a
(common for save forms), the form becomes the only flex child and the header/body/footer inside it stop being flex items — body never gets a constrained height, never scrolls. display:contents makes the form invisible to layout so the inner sections (.v-modal-hd / .v-modal-bd / .v-modal-ft) become direct flex children of the dialog. */ .v-modal[open] > form { display: contents; } /* Force Arabic font on every descendant — user-agent styles sometimes inject `font` shorthand which clobbers font-family. */ .v-modal, .v-modal input, .v-modal textarea, .v-modal select, .v-modal button, .v-modal label, .v-modal h1, .v-modal h2, .v-modal h3, .v-modal div, .v-modal span, .v-modal p { font-family: var(--font-ar); } .v-modal input.num, .v-modal .num { font-family: var(--font-mono); } @keyframes vModalIn { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } } @keyframes vBackdropIn { from { opacity: 0; } to { opacity: 1; } } .v-modal-hd { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--border); flex-shrink: 0; } .v-modal-hd .icon { width: 36px; height: 36px; border-radius: 9px; background: var(--brand-50); color: var(--brand-700); display: inline-flex; align-items: center; justify-content: center; } .v-modal-hd h3 { margin: 0; font-size: 16px; font-weight: 600; } .v-modal-hd .sub { font-size: 12px; color: var(--text-muted); margin-top: 2px; } .v-modal-hd .close { margin-inline-start: auto; width: 32px; height: 32px; border: none; background: transparent; cursor: pointer; color: var(--text-muted); border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; } .v-modal-hd .close:hover { background: var(--n-75); color: var(--text); } .v-modal-bd { padding: 20px; overflow-y: auto; flex: 1 1 auto; /* min-height: 0 is the classic fix that lets a flex child with overflow:auto actually shrink — without it, content forces the body to its natural height and pushes the footer off-screen. */ min-height: 0; /* Always reserve gutter so users see scroll is possible */ scrollbar-gutter: stable; /* Firefox */ scrollbar-width: auto; scrollbar-color: var(--n-400) var(--bg-sunken); } /* Visible, themed scrollbar inside modal body (Webkit/Chrome/Safari/Edge) */ .v-modal-bd::-webkit-scrollbar { width: 12px; background: var(--bg-sunken); } .v-modal-bd::-webkit-scrollbar-track { background: var(--bg-sunken); border-inline-start: 1px solid var(--border); } .v-modal-bd::-webkit-scrollbar-thumb { background: var(--n-400); border-radius: 999px; border: 3px solid var(--bg-sunken); min-height: 48px; } .v-modal-bd::-webkit-scrollbar-thumb:hover { background: var(--n-500); } .v-modal-bd::-webkit-scrollbar-thumb:active { background: var(--n-600); } .v-modal-ft { display: flex; align-items: center; gap: 10px; justify-content: flex-end; padding: 14px 20px; border-top: 1px solid var(--border); background: var(--bg-sunken); flex: 0 0 auto; position: sticky; bottom: 0; } .v-modal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px; } .v-modal-grid .span-2 { grid-column: 1 / -1; } .v-modal-section-title { grid-column: 1 / -1; font-size: 11px; font-weight: 600; color: var(--text-faint); letter-spacing: 0.6px; text-transform: uppercase; padding-bottom: 4px; border-bottom: 1px solid var(--border); margin-bottom: 4px; } /* Readonly / disabled fields inside any modal — visually de-emphasized so "this field is not editable" reads at a glance, without needing a dedicated "locked" section header. */ .v-modal .input:disabled, .v-modal .input[readonly], .v-modal .textarea:disabled, .v-modal .textarea[readonly] { background: var(--bg-sunken); color: var(--text-faint); border-color: var(--border); cursor: not-allowed; opacity: 0.75; } /* Mobile: collapse the modal grid to a single column. The desktop 2-column layout becomes cramped under ~640px (especially with inputs + labels) — stacking is the right responsive default. */ @media (max-width: 640px) { .v-modal-grid { grid-template-columns: 1fr; gap: 12px; } .v-modal-bd { padding: 16px; } .v-modal-hd { padding: 14px 16px; gap: 10px; } .v-modal-hd h3 { font-size: 15px; } .v-modal-ft { padding: 12px 16px; } } /* ─────────────────────────────────────────────────────────────────── Responsive utility classes — single source of truth for layouts that need to reflow on smaller viewports. Inline grids with fixed column counts (`repeat(N, 1fr)`) don't survive narrow screens; use these classes instead. ─────────────────────────────────────────────────────────────────── */ /* KPI / stat strip — fills available width with as many columns as fit. */ .v-kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; } .v-kpi-grid-sm { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; } /* Two-column section that collapses to one column on tablet & below. */ .v-2col-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; } @media (max-width: 900px) { .v-2col-grid { grid-template-columns: 1fr; } } /* Filter toolbar — flex-wrap pattern. Search expands, selects shrink, actions stick to the end. Naturally wraps onto multiple rows on narrow viewports without any media-query gymnastics. */ .v-filter-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 12px 14px; } .v-filter-bar .filter-search { flex: 2 1 220px; min-width: 200px; position: relative; } .v-filter-bar > select, .v-filter-bar > .input, .v-filter-bar > .select { flex: 1 1 140px; min-width: 130px; } .v-filter-bar .filter-actions { display: flex; gap: 6px; flex: 0 0 auto; margin-inline-start: auto; } @media (max-width: 600px) { .v-filter-bar .filter-actions { width: 100%; margin-inline-start: 0; } .v-filter-bar .filter-actions .btn { flex: 1; } } /* Table-to-cards on mobile — opt-in via class `v-stack-table`. Each needs `data-label="…"` so the label appears next to the value in the stacked card view. Mirrors the `.inv-list-table` pattern from /admin/invoices, generalized for reuse across admin tables. */ @media (max-width: 768px) { .v-stack-table-wrap { overflow-x: visible !important; } .v-stack-table colgroup, .v-stack-table thead { display: none; } .v-stack-table, .v-stack-table tbody { display: block; width: 100%; } .v-stack-table tr { display: block; margin: 10px 0; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-surface); box-shadow: 0 1px 2px rgba(0,0,0,0.04); overflow: hidden; } .v-stack-table tr:hover { background: var(--bg-surface) !important; } .v-stack-table td { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 9px 14px !important; border-bottom: 1px solid var(--border) !important; text-align: start !important; width: auto !important; } .v-stack-table tr td:last-child { border-bottom: none !important; } .v-stack-table td::before { content: attr(data-label); font-size: 11px; font-weight: 600; color: var(--text-faint); flex-shrink: 0; white-space: nowrap; } /* A td that has no label (or label="") is treated as an actions row — centered, sunken background, full-width touch targets. */ .v-stack-table td[data-label=""], .v-stack-table td:not([data-label]) { justify-content: center; background: var(--bg-sunken); } .v-stack-table td[data-label=""]::before, .v-stack-table td:not([data-label])::before { display: none; } } /* Page title shrinks on narrow viewports so it doesn't eat the toolbar. */ @media (max-width: 768px) { .page-title { font-size: 17px; } .page-title-icon { width: 26px; height: 26px; } } /* ─────────────────────────────────────────────────────────────────── Dark mode — opt-in via `html.theme-dark` (toggled by the moon icon in the topbar; persisted to localStorage by vToggleDarkMode). Strategy: override the neutral scale AND the semantic role variables so direct `var(--n-100)` usages and semantic vars both work without touching individual page styles. ─────────────────────────────────────────────────────────────────── */ html.theme-dark { color-scheme: dark; /* Neutral scale — inverted lightness, same hue. n-0 (was pure white, used as card surface) now lands on a slightly raised dark grey; n-900/950 (was deep text) now lands on near-white. */ --n-0: oklch(0.18 0.010 70); --n-25: oklch(0.17 0.010 70); --n-50: oklch(0.16 0.010 70); --n-75: oklch(0.20 0.010 70); --n-100: oklch(0.22 0.010 70); --n-150: oklch(0.26 0.010 70); --n-200: oklch(0.30 0.010 70); --n-300: oklch(0.38 0.010 70); --n-400: oklch(0.52 0.010 70); --n-500: oklch(0.65 0.010 70); --n-600: oklch(0.75 0.010 70); --n-700: oklch(0.84 0.010 70); --n-800: oklch(0.90 0.008 70); --n-900: oklch(0.95 0.008 70); --n-950: oklch(0.98 0.005 70); /* Semantic roles — explicitly mapped so cards stay slightly LIGHTER than body bg (raised feel), not the other way around. */ --bg-app: oklch(0.14 0.010 70); --bg-surface: oklch(0.19 0.010 70); --bg-sunken: oklch(0.16 0.010 70); --border: oklch(0.27 0.010 70); --border-strong: oklch(0.34 0.010 70); --text: oklch(0.95 0.008 70); --text-muted: oklch(0.75 0.010 70); --text-faint: oklch(0.58 0.010 70); /* Brand & status pale-50 tints darken so badge/chip backgrounds keep enough contrast against the dark surface without glowing white. */ --brand-50: oklch(0.30 0.06 70); --brand-100: oklch(0.35 0.08 65); --success-50: oklch(0.28 0.07 150); --warning-50: oklch(0.30 0.07 80); --danger-50: oklch(0.30 0.10 25); --info-50: oklch(0.28 0.06 230); --wa-50: oklch(0.30 0.07 150); /* Strong status colors used for text shift a notch brighter so they still read against the dark bg. */ --success-700: oklch(0.70 0.14 150); --danger-700: oklch(0.72 0.18 25); --warning-700: oklch(0.78 0.14 80); --info-700: oklch(0.70 0.13 230); --brand-700: oklch(0.70 0.13 38); --brand-800: oklch(0.78 0.10 35); --wa-700: oklch(0.72 0.14 150); } html.theme-dark body { background: var(--bg-app); color: var(--text); } /* Stronger contrast for inputs in dark mode — the default border becomes invisible against a similar-tone surface otherwise. */ html.theme-dark .input, html.theme-dark .textarea, html.theme-dark .select, html.theme-dark input[type="text"], html.theme-dark input[type="email"], html.theme-dark input[type="password"], html.theme-dark input[type="tel"], html.theme-dark input[type="number"], html.theme-dark input[type="search"], html.theme-dark input[type="time"], html.theme-dark input[type="date"], html.theme-dark select, html.theme-dark textarea { background: var(--n-75); border-color: var(--border-strong); color: var(--text); } html.theme-dark .input::placeholder, html.theme-dark input::placeholder, html.theme-dark textarea::placeholder { color: var(--text-faint); } /* Modal backdrop a touch denser in dark mode for a stronger focus. */ html.theme-dark .v-modal::backdrop { background: oklch(0.05 0 0 / 0.65); } /* Moon/sun icon swap on the topbar toggle button. Default state shows the moon (light mode → click to go dark). When dark is active the button gets `.is-on` (set by vToggleDarkMode) and we show the sun. */ [data-dark-toggle] .icon-sun { display: none; } [data-dark-toggle].is-on .icon-moon { display: none; } [data-dark-toggle].is-on .icon-sun { display: inline-block; color: var(--warning-500); } /* Submitting state — locks the modal body visually while the request is in flight. Inputs stay enabled (so their values still POST) but pointer-events:none + opacity gives feedback. */ .v-modal.is-submitting .v-modal-bd { pointer-events: none; opacity: 0.55; } .v-modal.is-submitting .v-modal-hd .close { pointer-events: none; opacity: 0.4; } /* Tiny inline spinner used on submit buttons during loading */ .v-spinner { display: inline-block; width: 14px; height: 14px; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; animation: vSpin 600ms linear infinite; vertical-align: -2px; } @keyframes vSpin { to { transform: rotate(360deg); } } /* Page-wide busy overlay — used while a long form submission is in flight. Blocks all clicks and shows a wait cursor. */ .v-page-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.04); z-index: 9999; cursor: wait; } .v-page-overlay-card { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: var(--bg-surface); border: 1px solid var(--border); border-radius: 12px; padding: 16px 22px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12); display: flex; align-items: center; gap: 12px; font-size: 13.5px; font-weight: 600; color: var(--text); } .v-page-overlay-card .v-spinner { width: 18px; height: 18px; border-width: 2.5px; color: var(--brand-600); } /* Flash banner */ .flash-success { display: flex; align-items: center; gap: 10px; padding: 12px 14px; margin-bottom: 14px; border-radius: 10px; background: var(--success-50); border: 1px solid oklch(0.85 0.07 150); color: var(--success-700); font-size: 13px; } /* ═══════════════════════════════════════════════════════════════ Responsive — tablet & phone The shell is desktop-first. At ≤860px the fixed-width sidebar turns into an overlay drawer toggled by the topbar hamburger, and the content column spans the full viewport width. ═══════════════════════════════════════════════════════════════ */ /* Drawer backdrop — only painted as a layer on small screens. */ .sb-backdrop { display: none; } @media (max-width: 860px) { /* ── Sidebar → off-canvas drawer. It is anchored to the inline-start edge (the right side in RTL) and slid off-screen until opened. */ .sidebar { position: fixed; inset-block: 0; inset-inline-start: 0; z-index: 120; width: 264px; box-shadow: var(--shadow-pop); transform: translateX(100%); transition: transform 240ms cubic-bezier(.2,.7,.3,1); } html.sb-mobile-open .sidebar { transform: translateX(0); } /* The desktop 56px icon-rail mode is meaningless on a phone — if the persisted state is "collapsed", still render the full-width drawer. */ html.sb-collapsed .sidebar { width: 264px; } html.sb-collapsed .sb-group-label { display: flex !important; } html.sb-collapsed .sb-item { justify-content: flex-start; padding: 7px 10px; margin: 1px 0; } html.sb-collapsed .sb-item > span { display: inline; } /* Dimmed backdrop behind the open drawer */ .sb-backdrop { display: block; position: fixed; inset: 0; z-index: 110; background: oklch(0.16 0.012 70 / 0.45); opacity: 0; visibility: hidden; transition: opacity 200ms ease, visibility 200ms; } html.sb-mobile-open .sb-backdrop { opacity: 1; visibility: visible; } /* ── Content column spans the whole width ─────────────────────── */ .main-col { width: 100%; } /* ── Topbar tightening ────────────────────────────────────────── */ .topbar-row { height: 50px; padding: 0 12px; gap: 10px; } .crumbs { gap: 5px; overflow: hidden; } .crumb { white-space: nowrap; } .topbar-tabs { padding: 0 12px; overflow-x: auto; scrollbar-width: none; } .topbar-tabs::-webkit-scrollbar { display: none; } /* ── Main content padding + a horizontal-scroll safety net for any wide tables not yet adapted to a card layout ─────────────── */ main.app-main { padding: 14px; overflow-x: auto; } .page-hdr { margin-bottom: 14px; gap: 10px; } .page-title { font-size: 19px; } .page-title-icon { width: 26px; height: 26px; } /* Modal footers stay reachable on short screens */ .v-modal-ft { flex-wrap: wrap; } /* ── Tables inside cards: horizontal scroll as a safety net ── (tables opted into .t-cards below get the stacked-card layout instead — no horizontal scrolling at all). */ .card:has(> .table:not(.t-cards)) { overflow-x: auto; -webkit-overflow-scrolling: touch; } .card > .table:not(.t-cards) { min-width: 680px; } /* KPI/counter strips: two tidy columns on phones */ .page-hdr + div[style*="auto-fit"] { grid-template-columns: repeat(2, 1fr) !important; } } /* ── Topbar global search ──────────────────────────────────────────── */ .tb-search { position: relative; flex: 1; max-width: 440px; min-width: 120px; margin-inline: 8px; } .tb-search-icon { position: absolute; inset-inline-start: 12px; top: 50%; transform: translateY(-50%); color: var(--text-faint); pointer-events: none; display: inline-flex; } .tb-search-input { width: 100%; height: 38px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-sunken); padding-inline-start: 36px; padding-inline-end: 44px; font: 500 13px inherit; color: var(--text); outline: none; transition: border-color .15s, background .15s; } .tb-search-input:focus { border-color: var(--brand-500); background: var(--bg-surface); } .tb-search-input::-webkit-search-cancel-button { -webkit-appearance: none; } .tb-search .tb-kbd { position: absolute; inset-inline-end: 10px; top: 50%; transform: translateY(-50%); font-size: 10.5px; font-weight: 700; color: var(--text-faint); background: var(--bg-surface); border: 1px solid var(--border); border-radius: 6px; padding: 1px 6px; pointer-events: none; } .tb-search-panel { position: absolute; top: calc(100% + 6px); inset-inline-start: 0; inset-inline-end: 0; z-index: 300; background: var(--bg-surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 18px 50px rgb(0 0 0 / .16); overflow: hidden; max-height: 70vh; overflow-y: auto; } .tb-sr { display: flex; align-items: center; gap: 10px; padding: 10px 14px; text-decoration: none; color: var(--text); border-bottom: 1px solid var(--border); } .tb-sr:last-child { border-bottom: 0; } .tb-sr:hover, .tb-sr.active { background: var(--bg-sunken); } .tb-sr-ic { width: 30px; height: 30px; border-radius: 8px; background: var(--brand-50); color: var(--brand-700); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .tb-sr-main { flex: 1; min-width: 0; } .tb-sr-label { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tb-sr-sub { font-size: 11.5px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tb-sr-type { font-size: 10.5px; font-weight: 700; color: var(--text-faint); background: var(--bg-sunken); border-radius: 999px; padding: 2px 9px; flex-shrink: 0; } .tb-search-empty { padding: 22px; text-align: center; color: var(--text-muted); font-size: 12.5px; } .tb-search-toggle { display: none; } @media (max-width: 720px) { /* على الجوال: يختفي الشريط المضمّن ويظهر زر بحث يفتح شريطاً بعرض كامل */ .tb-search-toggle { display: inline-grid; place-items: center; } .tb-search { display: none; position: fixed; top: 56px; inset-inline-start: 10px; inset-inline-end: 10px; max-width: none; margin: 0; z-index: 320; background: var(--bg-surface); border: 1px solid var(--border); border-radius: 12px; padding: 8px; box-shadow: 0 14px 40px rgb(0 0 0 / .18); } .tb-search.is-open { display: block; } .tb-search .tb-kbd { display: none; } .tb-search-input { height: 42px; } .tb-search-panel { position: static; box-shadow: none; border: 0; border-top: 1px solid var(--border); border-radius: 0; margin-top: 8px; max-height: 60vh; } } /* ── Shared dialog (finance entries + invoice collection) ───────────── */ .fin-dlg { border: 0; border-radius: 16px; padding: 0; max-width: 560px; width: 94vw; background: var(--bg-surface); color: var(--text); box-shadow: var(--shadow-lg); } .fin-dlg::backdrop { background: oklch(0.16 0.012 70 / 0.5); } .fin-dlg-hd { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--border); } .fin-dlg-x { border: 0; background: transparent; cursor: pointer; font-size: 20px; color: var(--text-muted); } .fin-dlg-bd { padding: 16px 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .fin-dlg-ft { display: flex; gap: 8px; justify-content: flex-end; padding: 12px 18px; border-top: 1px solid var(--border); } .fin-dlg .field.full { grid-column: 1 / -1; } @media (max-width: 560px) { .fin-dlg-bd { grid-template-columns: 1fr; } } /* ═══ .t-cards — table rows become stacked cards on phones ═══ Add class "t-cards" to a .table and data-th="العنوان" to each td: on ≤700px the thead disappears and every row renders as a tidy card with labelled fields. No horizontal scrolling. */ @media (max-width: 700px) { .table.t-cards thead { display: none; } .table.t-cards, .table.t-cards tbody { display: block; width: 100%; } .table.t-cards tr { display: block; margin: 10px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-surface); padding: 4px 0; box-shadow: var(--shadow-xs, none); } .table.t-cards td { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 6px 14px; padding: 8px 14px; border: 0; } .table.t-cards td { max-width: none !important; } .table.t-cards td + td { border-top: 1px dashed var(--border); } .table.t-cards td[data-th]::before { content: attr(data-th); font-size: 11.5px; font-weight: 700; color: var(--text-muted); flex-shrink: 0; } /* خلية الإجراءات: أزرار بصف كامل */ .table.t-cards td.t-actions { justify-content: flex-start; } .table.t-cards td.t-actions > div { justify-content: flex-start !important; width: 100%; } /* خلية فارغة لا تشغل مساحة */ .table.t-cards td:empty { display: none; } } @media (max-width: 540px) { .topbar-row { gap: 8px; } /* Collapse the breadcrumb trail to just the current page */ .crumb:not(.last), .crumb-sep { display: none; } .page-title { font-size: 17px; } } /* ═══════════════════════════════════════════════════════════════ Responsive layout utilities — reusable on EVERY page Drop these classes on a wrapper instead of hand-writing a grid plus media queries each time: .v-grid Auto-wrapping grid. Columns size themselves to the available width and reflow on their own — no media query needed. Tune via custom props: --col-min minimum column width (default 240px) --v-gap gap between items (default 14px) e.g.
.v-split Main + aside layout (~2:1) that collapses into a single stacked column at ≤900px. Override the ratio with --v-split-main (default 2fr). .hide-mobile Hidden at ≤860px (phones / small tablets). .hide-desktop Hidden above 860px (mobile-only content). These are the canonical building blocks — prefer them over inline `display:grid` so every screen behaves consistently. ═══════════════════════════════════════════════════════════════ */ .v-grid { display: grid; gap: var(--v-gap, 14px); grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--col-min, 240px)), 1fr)); } .v-split { display: grid; gap: var(--v-gap, 14px); grid-template-columns: minmax(0, var(--v-split-main, 2fr)) minmax(0, 1fr); align-items: start; } @media (max-width: 900px) { .v-split { grid-template-columns: 1fr; } } @media (max-width: 860px) { .hide-mobile { display: none !important; } } @media (min-width: 861px) { .hide-desktop { display: none !important; } } /* ═══ الطباعة / حفظ PDF — لأي صفحة في اللوحة (محتوى نظيف بلا واجهة) ═══ */ @media print { .sidebar, .topbar, .sb-backdrop, .sb-toggle, .topbar-tabs, .tb-search, .notif-panel, [data-notif-wrap], [data-user-menu] { display: none !important; } html, body { background: #fff !important; } .main-col, .app-main, .app-wrap, main.app-main { margin: 0 !important; padding: 0 !important; width: 100% !important; max-width: 100% !important; } /* عناصر التحكّم (أزرار + نماذج الفلاتر) تُخفى عند الطباعة */ .btn, .seg, details, form[data-no-guard], .page-hdr > div:last-child:not(:only-child) { display: none !important; } .page-hdr { display: block !important; margin-bottom: 12px !important; } .page-title, .page-sub { display: block !important; } .card { box-shadow: none !important; border: 1px solid #d7d7d7 !important; break-inside: avoid; } a { color: inherit !important; text-decoration: none !important; } /* اطبع جداول البطاقات كجداول عادية دائماً */ .table.t-cards, .table.t-cards thead, .table.t-cards tbody, .table.t-cards tr, .table.t-cards td { display: revert !important; } .table.t-cards thead { display: table-header-group !important; } .table.t-cards tr { display: table-row !important; margin: 0 !important; border: 0 !important; box-shadow: none !important; } .table.t-cards td { display: table-cell !important; border: 0 !important; border-bottom: 1px solid #eee !important; } .table.t-cards td[data-th]::before { content: none !important; } @page { margin: 14mm; } } /* تجاوب شبكة بطاقات التقارير (.q-show-grid) — عمود واحد على الشاشات الصغيرة. تتقدّم على style المضمّن في صفحات التقارير عبر !important. */ @media (max-width: 768px) { .q-show-grid { grid-template-columns: 1fr !important; } }