/* ============================================================================ Pre-redesign shell stylesheet for the NON-admin pages that extend templates/base.html — the customer Help page, the customer document archive, the Telegram link page, and anonymous visitors on those pages. A frozen, verbatim copy of static/css/admin_shell.css as of 9c1d49c (the last release before the admin redesign), including its "Refined Blue" colour tokens. base.html loads it INSTEAD of admin_tokens.css + admin_shell.css when the viewer is not an admin, so the admin redesign (R1–R5) changes nothing a customer sees on these pages (spec "What does NOT change" item 1 and V6; the owner's palette decision is admin-only). Do not restyle it for the admin palette. A fix that customers on these pages need goes here as well as in admin_shell.css. ============================================================================ */ /* Kill Bootstrap row hover/transition on plain tables only — keep .trio-table rows interactive (they get their own gentle hover below). */ table:not(.trio-table) tbody tr { transition: none !important; } table:not(.trio-table) tbody tr:hover { background: inherit !important; } .trio-table tbody tr:hover { background: var(--bg-main); } :root { /* ── Midnight Navy Theme ── */ --primary: #2c5282; /* Refined Blue B — deeper "owned" blue (was #3b82f6) */ --primary-dark: #234876; --accent: #c79a4b; /* Refined Blue B — subtle warm-bronze accent */ /* Light mode — softer on the eyes: off-white cards on a cool pale-slate background. Avoids pure #ffffff + #f7f8fa which glare against dark UI. */ --bg-main: #eef1f6; /* Cool pale slate page background */ --bg-card: #fafbfd; /* Off-white card — not stark #fff */ --bg-sidebar: #e9edf3; /* Sidebar slightly recessed from page */ --sidebar-text: #1e293b; /* Slate-900 — softer than pure black */ --sidebar-text-muted: #5e6e84; /* AA-safe on the #e9edf3 sidebar (~4.6:1); was #64748b (~4.06:1, sub-AA) */ --sidebar-border: #d7dce4; /* Subtle divider */ --sidebar-hover-bg: #dde3ec; /* Gentle hover tint */ --sidebar-active-bg: #d8e2f1; /* Soft blue wash for active item (Refined Blue B) */ --sidebar-active-text: #234876; --text-primary: #2a3442; /* Softened from slate-900 — eases the ~14:1 glare for long sessions */ --text-secondary: #475569; /* Slate-600 */ --text-muted: #5e6e84; /* AA-safe on #eef1f6/#fafbfd (~4.6/5.0:1); was #64748b (sub-AA on the page bg) */ --text-on-dark: #ffffff; --success: #10b981; --success-bg: #dcfce7; /* Status text, light mode — WCAG AA (checkup 2026-10-02 UX-15): #16a34a / #d97706 / #dc2626 were 3.2 / 3.1 / 4.7:1 on the card and 3.0 / 2.9 / 4.0:1 on their own -bg badges. These clear 4.5:1 on the page, the card and the badge. */ --success-text: #157a3a; --warning: #f59e0b; --warning-bg: #fef3c7; --warning-text: #a85008; --error: #ef4444; --error-bg: #fee2e2; --error-text: #b91c1c; --info: #3b82f6; --info-bg: #eff6ff; --info-text: #1d4ed8; --border-light: #e3e7ee; --border-medium: #c6cdd7; --shadow-sm: 0 1px 2px rgba(30,41,59,0.04); --shadow-md: 0 2px 6px rgba(30,41,59,0.06); /* ── Design-system scale (radius / space / card shadow) 2026-06-27 ── */ --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-pill: 999px; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --shadow-card: 0 1px 2px rgba(13,19,33,.05), 0 0 0 1px rgba(13,19,33,.03); --shadow-card-hover: 0 6px 20px rgba(13,19,33,.10); /* Violet status token pair (badges) */ --violet-bg: #ede9fe; --violet-text: #6d28d9; /* ── Layout ── */ --sidebar-width: 220px; --topbar-h: 49px; /* sticky topbar height — sticky table headers clear this */ --border: #e8eaed; --border-color: #e8eaed; --warning-text: #a85008; --success-text: #157a3a; --error-text: #b91c1c; --info-text: #1d4ed8; /* Filled controls with white text (active chip / pager / buttons). Same as --primary in light; dark mode needs its own, see the dark block (UX-15). */ --primary-fill: #2c5282; --success-fill: #047857; /* white text 5.5:1 — --success #10b981 was 2.5:1 */ } * { box-sizing: border-box; } body { font-family: 'DM Sans', -apple-system, 'Segoe UI', Roboto, 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif; background: var(--bg-main); color: var(--text-primary); margin: 0; min-height: 100vh; } html[lang="ar"] body { font-family: 'Cairo', 'Noto Sans SC', 'PingFang SC', sans-serif; } /* a11y: visible keyboard-focus ring across interactive elements (V-3) */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible, .sidebar-item:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 4px; } /* a11y: skip-link — first tab stop jumps past the ~13-item nav to content. */ /* Hidden by clipping, not left:-9999px: an element parked far off the left edge widens the scrollable area of an RTL page (checkup 2026-10-02 UX-12). */ .skip-link { position: absolute; top: 8px; inset-inline-start: 8px; z-index: 2000; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .skip-link:focus { width: auto; height: auto; overflow: visible; clip-path: none; padding: 8px 14px; background: var(--bg-card); color: var(--text-primary); border-radius: var(--r-sm); box-shadow: var(--shadow-card); font-size: 13px; font-weight: 600; text-decoration: none; } /* Click-to-sort column headers (data-sort on a .trio-table th) */ .trio-table th.th-sortable { cursor: pointer; user-select: none; } .trio-table th.th-sortable:hover { color: var(--text-primary); } /* The sortable label is wrapped in a