/* ============================================================ Qudra Assessment Platform — Design System Apple-inspired: minimal, editorial, premium, high-trust. RTL-aware via [dir="rtl"] + CSS logical properties. ============================================================ */ :root { --bg: #f5f5f7; --surface: #ffffff; --text-primary: #1d1d1f; --text-secondary: #6e6e73; --accent: #0071e3; --accent-hover: #0077ed; --dark: #0a0a0a; --success: #1d8a4a; --warning: #b5651d; --danger: #d53f3f; --border: #d2d2d7; --radius-sm: 8px; --radius-md: 14px; --radius-lg: 20px; --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08); --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.12); --font-en: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Helvetica, Arial, sans-serif; --font-ar: -apple-system, BlinkMacSystemFont, "SF Arabic", "Segoe UI", "Tahoma", sans-serif; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text-primary); font-family: var(--font-en); -webkit-font-smoothing: antialiased; line-height: 1.5; /* Global overflow containment (Section A/L): a single unexpectedly long value (long name, raw URL, security-test payload string) must never be able to widen / and cause page-level horizontal scroll. */ max-width: 100%; overflow-x: hidden; } /* Any flex/grid child anchor for width-constrained content. Applied selectively below to the specific containers that historically broke (cards, table cells, alerts, form controls) rather than globally, so we never silently truncate content the user actually needs to read. */ .min-w-0 { min-width: 0; } html[dir="rtl"] body, html[lang="ar"] body { font-family: var(--font-ar); } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } .container { max-width: 1080px; margin: 0 auto; padding: 0 24px; } .container-narrow { max-width: 720px; margin: 0 auto; padding: 0 24px; } /* ---------- Top bar / language switch ---------- */ .topbar { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; background: rgba(245, 245, 247, 0.8); backdrop-filter: saturate(180%) blur(20px); position: sticky; top: 0; z-index: 50; border-bottom: 1px solid rgba(0, 0, 0, 0.05); } .topbar .brand { font-weight: 700; font-size: 1.05rem; letter-spacing: -0.01em; } .lang-switch { display: flex; gap: 4px; background: rgba(0, 0, 0, 0.05); border-radius: 999px; padding: 4px; } .lang-switch button { border: none; background: transparent; padding: 6px 14px; border-radius: 999px; font-size: 0.85rem; font-weight: 600; cursor: pointer; color: var(--text-secondary); transition: all 0.2s ease; } .lang-switch button.active { background: var(--surface); color: var(--text-primary); box-shadow: var(--shadow-sm); } /* ---------- Hero / editorial typography ---------- */ .hero { padding: 96px 0 64px; text-align: center; } .hero h1 { font-size: clamp(2.25rem, 5vw, 3.5rem); font-weight: 700; letter-spacing: -0.02em; margin: 0 0 16px; } .hero p.subtitle { color: var(--text-secondary); font-size: 1.2rem; margin: 0 auto 32px; max-width: 640px; } /* ---------- Cards / surfaces ---------- */ .card { background: var(--surface); border-radius: var(--radius-lg); padding: 32px; box-shadow: var(--shadow-sm); border: 1px solid rgba(0, 0, 0, 0.04); /* Containment (Section A/8): a card is a flex/grid item in some layouts (grid-2/grid-3, admin-main). Without min-width:0 a long unbroken string inside it (URL, long name) can force the card — and its ancestor row — wider than the viewport. max-width:100% + overflow-wrap covers the remaining case of long text inside a card that ISN'T a flex/grid item. */ min-width: 0; max-width: 100%; overflow-wrap: anywhere; word-break: break-word; } .card + .card { margin-top: 16px; } .card-dark { background: var(--dark); color: #f5f5f7; border-radius: var(--radius-lg); padding: 40px; } .card-dark .text-secondary { color: #a1a1a6; } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: none; border-radius: 980px; padding: 12px 28px; font-size: 0.95rem; font-weight: 600; cursor: pointer; transition: transform 0.15s ease, background 0.15s ease, opacity 0.15s ease; font-family: inherit; } .btn-primary { background: var(--accent); color: #fff; } .btn-primary:hover { background: var(--accent-hover); } .btn-primary:disabled { background: var(--border); color: var(--text-secondary); cursor: not-allowed; } .btn-secondary { background: rgba(0, 0, 0, 0.06); color: var(--text-primary); } .btn-secondary:hover { background: rgba(0, 0, 0, 0.09); } .btn-ghost { background: transparent; color: var(--accent); padding: 12px 16px; } .btn:active { transform: scale(0.97); } .btn-block { width: 100%; } .btn-sm { padding: 8px 18px; font-size: 0.85rem; } .btn-danger { background: var(--danger); color: #fff; } /* ---------- Forms ---------- */ label { display: block; font-size: 0.85rem; font-weight: 600; color: var(--text-secondary); margin-bottom: 6px; } input, select, textarea { width: 100%; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 0.95rem; font-family: inherit; background: var(--surface); color: var(--text-primary); transition: border-color 0.15s ease; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.15); } .form-group { margin-bottom: 18px; min-width: 0; max-width: 100%; } .form-error { color: var(--danger); font-size: 0.85rem; margin-top: 6px; overflow-wrap: anywhere; } /* Long option text inside itself must never grow past its form-group / grid cell (Section G: "long org names don't break selects"). */ select { max-width: 100%; text-overflow: ellipsis; } input, textarea { max-width: 100%; } /* ---------- Progress ---------- */ .progress-track { height: 6px; border-radius: 999px; background: rgba(0, 0, 0, 0.08); overflow: hidden; } .progress-fill { height: 100%; background: var(--accent); border-radius: 999px; transition: width 0.3s ease; } .progress-meta { display: flex; justify-content: space-between; font-size: 0.85rem; color: var(--text-secondary); margin-bottom: 8px; } /* ---------- Question ---------- */ .question-card { background: var(--surface); border-radius: var(--radius-lg); padding: 40px; box-shadow: var(--shadow-md); max-width: 640px; margin: 0 auto; } .question-number { font-size: 0.8rem; font-weight: 700; color: var(--accent); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 12px; } .question-text { font-size: 1.35rem; font-weight: 600; line-height: 1.4; margin-bottom: 28px; } .option-list { display: flex; flex-direction: column; gap: 10px; } .option-item { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border: 1.5px solid var(--border); border-radius: var(--radius-md); cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease; } .option-item:hover { border-color: var(--accent); background: rgba(0, 113, 227, 0.04); } .option-item.selected { border-color: var(--accent); background: rgba(0, 113, 227, 0.08); } .option-key-badge { width: 28px; height: 28px; border-radius: 50%; background: rgba(0, 0, 0, 0.06); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.85rem; flex-shrink: 0; color: var(--text-secondary); } .option-item.selected .option-key-badge { background: var(--accent); color: #fff; } .option-text { font-size: 1rem; } .nav-row { display: flex; justify-content: space-between; align-items: center; max-width: 640px; margin: 28px auto 0; } /* ---------- Grid / table ---------- */ /* minmax(0,1fr) instead of 1fr (Section A/L): a bare `1fr` track can still grow past the available space to fit an unbreakable child (e.g. a raw URL or a 100+ char name with no wrap opportunity) — `minmax(0, 1fr)` caps the track at the grid's own width so children are forced to wrap or ellipsis instead of expanding the grid itself. */ .grid-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; } .grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } @media (max-width: 720px) { .grid-2, .grid-3 { grid-template-columns: minmax(0, 1fr); } } /* ---------- Tables ---------- Root cause of the reported overflow bug: a plain HTML table has no intrinsic width limit — a single long, unbreakable cell value (a raw invitation URL, a 100+ character candidate name, or a security-test payload string like "AAAA...AAAA" or "