/* ============================================================ App shell — mirrors ui_kits/data-platform/App.jsx from the Riyadh Municipality design system: 66px top bar, 250px RTL sidebar (right), 3px accent bar on the active nav item. Runs on the DARK token variant (.rm-dark on ). ============================================================ */ * { box-sizing: border-box; } html, body { height: 100%; font-family: var(--font-body); } body { margin: 0; font-family: var(--font-body); background: var(--bg-base); color: var(--text-body); font-size: var(--fs-body); line-height: var(--lh-normal); -webkit-font-smoothing: antialiased; } /* Figures: Latin mono, tabular, always LTR inside RTL text */ .num { font-family: var(--font-mono); direction: ltr; unicode-bidi: embed; display: inline-block; font-variant-numeric: tabular-nums; } a { color: inherit; text-decoration: none; } /* ---------------------------------------------------------- shell */ .app { display: flex; flex-direction: column; height: 100%; background: var(--bg-base); } .topbar { display: flex; align-items: center; gap: var(--space-5); padding: 0 var(--space-5); height: 66px; flex-shrink: 0; border-bottom: 1px solid var(--border-subtle); background: var(--surface-1); } .lockup { display: flex; align-items: center; gap: 14px; } .lockup .brandmark { height: 38px; width: auto; display: block; } .lockup .emblem { width: 36px; height: 36px; border-radius: var(--radius-sm); background: linear-gradient(135deg, var(--green-500), var(--green-700)); display: flex; align-items: center; justify-content: center; color: #fff; font-weight: var(--w-bold); font-size: 15px; } .lockup .wordmark { font-size: 14px; font-weight: var(--w-semibold); color: var(--text-strong); line-height: 1.25; } .lockup .wordmark small { display: block; font-size: 10.5px; font-weight: var(--w-regular); color: var(--text-faint); } .lockup .divider { height: 30px; width: 1px; background: var(--border-strong); } .lockup .product { font-size: 14px; font-weight: var(--w-semibold); color: var(--text-strong); } .topbar .spacer { margin-inline-start: auto; } .user { display: flex; align-items: center; gap: 10px; } .user .avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--green-700); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: var(--w-semibold); font-size: 14px; } .user .who { line-height: 1.2; } .user .who b { display: block; font-size: 13px; font-weight: var(--w-semibold); color: var(--text-strong); } .user .who span { font-size: 11px; color: var(--text-faint); } .body { display: flex; flex: 1; min-height: 0; } /* sidebar sits on the RIGHT in RTL */ .sidebar { width: 250px; flex-shrink: 0; border-inline-start: 1px solid var(--border-subtle); background: var(--surface-1); padding: 20px 14px; display: flex; flex-direction: column; gap: var(--space-1); } .navitem { display: flex; align-items: center; gap: var(--space-3); padding: 11px 14px; border: none; cursor: pointer; border-radius: var(--radius-md); text-align: right; width: 100%; background: transparent; color: var(--text-muted); font-family: var(--font-body); font-size: 14.5px; font-weight: var(--w-medium); transition: background var(--dur-fast), color var(--dur-fast); position: relative; } .navitem:hover { background: var(--surface-2); color: var(--text-body); } .navitem.on { background: var(--surface-3); color: var(--text-strong); font-weight: var(--w-semibold); } .navitem.on::before { content: ""; position: absolute; inset-inline-start: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 2px; background: var(--accent); } .navitem .ico { display: inline-flex; } .navitem.on .ico { color: var(--green-300); } main.content { flex: 1; min-width: 0; overflow-y: auto; padding: 28px 32px; } /* ---------------------------------------------------------- pieces */ .badge { display: inline-block; padding: 3px 10px; border-radius: var(--radius-pill); font-size: 11px; font-weight: var(--w-semibold); background: rgba(67, 176, 42, .14); color: var(--green-300); border: 1px solid var(--border-brand); } .page-head { margin-bottom: var(--space-5); } .page-head h1 { margin: 0; font-family: var(--font-display); font-size: var(--fs-h2); font-weight: var(--w-bold); color: var(--text-strong); } .page-head p { margin: 6px 0 0; color: var(--text-muted); font-size: var(--fs-sm); } .card { background: var(--surface-1); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: var(--space-5); } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 24px; border-radius: var(--radius-pill); border: 1px solid transparent; font-family: var(--font-body); font-size: 14.5px; font-weight: var(--w-semibold); cursor: pointer; transition: background var(--dur-fast), border-color var(--dur-fast); } .btn-primary { background: var(--green-500); color: #fff; } .btn-primary:hover { background: var(--green-400); } .btn-ghost { background: transparent; color: var(--text-body); border-color: var(--border-strong); } .btn-ghost:hover { background: var(--surface-2); } .field { width: 100%; padding: 13px 16px; border-radius: var(--radius-md); border: 1px solid var(--border-strong); background: var(--surface-2); color: var(--text-strong); font-family: var(--font-body); font-size: 15px; } .field::placeholder { color: var(--text-faint); } .field:focus { outline: 2px solid var(--focus-ring); outline-offset: 1px; border-color: transparent; } .empty { text-align: center; padding: var(--space-8) var(--space-5); color: var(--text-muted); border: 1px dashed var(--border-strong); border-radius: var(--radius-lg); background: var(--surface-1); } /* ---------------------------------------------------------- login */ .login-wrap { min-height: 100%; display: flex; align-items: center; justify-content: center; padding: var(--space-6); /* Cinematic per the DS readme: Riyadh photography behind a green protection scrim — never a bare photo. */ background: var(--scrim-radial), var(--tint-brand), url("/static/brand/riyadh-skyline-dusk.jpg") center / cover no-repeat #06130D; } .login-card { width: 100%; max-width: 430px; padding: var(--space-7) var(--space-6); background: var(--surface-card); backdrop-filter: var(--blur-md); border: 1px solid var(--border-subtle); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); } .brandmark-login { height: 44px; width: auto; display: block; margin: 0 auto var(--space-2); } .login-card h1 { margin: var(--space-5) 0 6px; font-family: var(--font-display); font-size: var(--fs-h3); font-weight: var(--w-bold); color: var(--text-strong); } .login-card .lede { margin: 0 0 var(--space-6); color: var(--text-muted); font-size: var(--fs-sm); } .login-card label { display: block; font-size: 13px; color: var(--text-muted); margin: 0 0 6px; } .login-card .row { margin-bottom: var(--space-4); } .login-card .btn { width: 100%; margin-top: var(--space-3); } .login-note { margin: var(--space-5) 0 0; padding-top: var(--space-4); border-top: 1px solid var(--border-subtle); font-size: 12px; color: var(--text-faint); line-height: 1.65; } .err { margin-bottom: var(--space-4); padding: 10px 14px; border-radius: var(--radius-sm); background: rgba(196, 68, 58, .12); border: 1px solid rgba(196, 68, 58, .4); color: #F0B4AF; font-size: 13px; } /* ---------------------------------------------------------- purchase screen */ .sec-title { display: flex; align-items: center; gap: 12px; margin-bottom: var(--space-4); } .sec-title h2 { margin: 0; font-family: var(--font-display); font-size: var(--fs-h4); font-weight: var(--w-semibold); color: var(--text-strong); } .sec-title .badge { margin-inline-start: 0; } .sec-title > *:last-child { margin-inline-start: auto; } /* 3 up, matching the report's fact grid — auto-fit orphaned the 6th card */ .facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); } @media (max-width: 900px) { .facts { grid-template-columns: repeat(2, 1fr); } } .fact { background: var(--surface-2); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); } .fact .k { font-size: 12.5px; color: var(--text-muted); margin-bottom: 4px; } .fact .v { font-size: var(--fs-h4); font-weight: var(--w-bold); color: var(--text-strong); } .fact .v small { font-size: 12.5px; font-weight: var(--w-regular); color: var(--text-muted); } .locked-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-2); } .locked { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: var(--radius-sm); background: var(--surface-2); border: 1px solid var(--border-subtle); color: var(--text-muted); font-size: 13.5px; } .locked svg { flex-shrink: 0; opacity: .55; } .dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; flex-shrink: 0; } .dot.amber { background: var(--amber-500); margin-inline-start: auto; } /* tier cards */ .tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--space-4); } .tier { position: relative; background: var(--surface-1); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: var(--space-5); display: flex; flex-direction: column; } .tier-best { border-color: var(--border-brand); box-shadow: var(--glow-brand); } .ribbon { position: absolute; top: -11px; inset-inline-end: var(--space-5); background: var(--green-500); color: #fff; font-size: 11px; font-weight: var(--w-semibold); padding: 3px 12px; border-radius: var(--radius-pill); } .tier h3 { margin: 0 0 4px; font-family: var(--font-display); font-size: var(--fs-h4); font-weight: var(--w-bold); color: var(--text-strong); } .tier .tagline { margin: 0 0 var(--space-4); font-size: 13px; color: var(--text-muted); } .tier .price { font-size: var(--fs-stat-m); font-weight: var(--w-bold); color: var(--text-strong); line-height: 1; } .tier .price small { font-size: var(--fs-sm); font-weight: var(--w-regular); color: var(--text-muted); } .tier .count { margin: 6px 0 var(--space-4); font-size: 12.5px; color: var(--green-300); } .tier .lines { list-style: none; margin: 0 0 var(--space-5); padding: 0; flex: 1; } .tier .lines li { display: flex; align-items: flex-start; gap: 9px; font-size: 13.5px; color: var(--text-body); padding: 5px 0; } .tier .lines li.all { color: var(--text-faint); font-size: 12.5px; padding-bottom: 10px; margin-bottom: 4px; border-bottom: 1px dashed var(--border-subtle); } .tier .lines svg { flex-shrink: 0; margin-top: 2px; } .tier .btn, .tier form { width: 100%; } .tier form .btn { width: 100%; } /* commercial coming-soon */ .soon { border: 1px dashed var(--border-strong); border-radius: var(--radius-lg); background: var(--surface-1); padding: var(--space-7) var(--space-6); text-align: center; } .soon h3 { margin: var(--space-4) 0 8px; font-family: var(--font-display); font-size: var(--fs-h4); color: var(--text-strong); } .soon p { margin: 0 auto; max-width: 520px; font-size: 14px; color: var(--text-muted); line-height: var(--lh-relaxed); } .foot-note { margin-top: var(--space-5); font-size: 12px; color: var(--text-faint); display: flex; align-items: center; gap: 8px; } .foot-note .dot.amber { margin-inline-start: 0; } /* ---------------------------------------------------------- my reports */ .tbl { width: 100%; border-collapse: collapse; background: var(--surface-1); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); overflow: hidden; } .tbl th, .tbl td { padding: 13px 16px; text-align: right; border-bottom: 1px solid var(--border-subtle); font-size: 13.5px; } .tbl thead th { background: var(--surface-2); color: var(--text-muted); font-size: 12.5px; font-weight: var(--w-semibold); } .tbl tbody tr:last-child td { border-bottom: none; } .tbl tbody tr:hover { background: var(--surface-2); } .tbl tbody tr.just-bought { background: rgba(67, 176, 42, .09); } .totals { display: flex; gap: var(--space-5); justify-content: flex-start; margin-top: var(--space-4); font-size: 13px; color: var(--text-muted); } .totals span:last-child { margin-inline-start: auto; color: var(--text-body); } /* ---------------------------------------------------------- comparison */ .tbl.cmp td.c, .tbl.cmp th.c { text-align: center; } .tbl.cmp tr.grp td { background: var(--surface-3); color: var(--green-300); font-size: 12px; font-weight: var(--w-semibold); padding: 8px 16px; } .tbl.cmp td.win { color: var(--green-300); font-weight: var(--w-bold); } .tbl.cmp .star { color: var(--green-300); font-size: 10px; margin-inline-start: 6px; } /* ============================================================ Mobile — one responsive site, not a separate one. Below 820px the sidebar becomes a bottom tab bar (app-like for 3 tabs), the top bar compresses, tables scroll, grids stack. ============================================================ */ @media (max-width: 820px) { .topbar { gap: 10px; padding: 0 14px; height: 58px; } .lockup .brandmark { height: 26px; } .lockup .divider, .lockup .product { display: none; } .user .who { display: none; } .topbar .btn { padding: 8px 12px; font-size: 12.5px; } .body { flex-direction: column; } /* sidebar -> fixed bottom tab bar */ .sidebar { position: fixed; bottom: 0; inset-inline: 0; z-index: 50; width: 100%; flex-direction: row; padding: 6px 8px; padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px)); border-inline-start: none; border-top: 1px solid var(--border-subtle); background: var(--surface-1); gap: 4px; } .navitem { flex: 1; flex-direction: column; gap: 3px; padding: 7px 4px; font-size: 11px; text-align: center; justify-content: center; } .navitem.on::before { inset-inline: 18%; top: auto; bottom: -6px; height: 3px; width: auto; } .navitem .badge { display: none; } main.content { padding: 18px 14px 96px; } /* room for the tab bar */ .page-head h1 { font-size: var(--fs-h3); } .card { padding: var(--space-4); } .facts { grid-template-columns: repeat(2, 1fr); } .tiers { grid-template-columns: 1fr; } .locked-grid { grid-template-columns: 1fr; } /* wide tables scroll inside themselves, page never scrolls sideways */ .tbl { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; } .tbl thead, .tbl tbody, .tbl tr { min-width: 560px; } .tbl th, .tbl td { padding: 10px 10px; font-size: 12.5px; } .totals { font-size: 12px; } .login-card { padding: var(--space-6) var(--space-5); } } @media (max-width: 480px) { .facts { grid-template-columns: 1fr 1fr; gap: 8px; } .fact .v { font-size: 16px; } } @media (max-width: 820px) { /* forms stack cleanly: every control full-width */ form .field, form .btn, form > div { width: 100%; flex: 1 1 100%; } } /* --- admin monitor ------------------------------------------------------- */ .admin-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-3); margin-bottom: var(--space-6); } .admin-stats .stat { padding: 16px 18px; } .admin-stats .stat .k { display: block; font-size: 12.5px; color: var(--text-muted); } .admin-stats .stat b { display: block; margin-top: 6px; font-size: 24px; font-weight: 700; } .admin-filter { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: var(--space-4); } .admin-filter .field { width: auto; flex: 0 1 240px; } .admin-filter .btn { padding: 9px 18px; font-size: 13px; } /* Shortened user agent — full string is on the cell's title attribute. */ .tbl td.ua { white-space: nowrap; font-size: 12px; color: var(--text-muted); } /* Wide tables carry more columns than a phone will ever fit, so they scroll sideways inside their own box with every row on a single line. Squeezing them instead wraps timestamps into unreadable stacks and clips the action buttons off the edge with nothing to show a swipe is possible. */ .tbl-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } @media (max-width: 820px) { /* the filter row stacks like every other form on mobile */ .admin-filter { flex-direction: column; } .admin-filter .field, .admin-filter .btn { width: 100%; flex: 1 1 100%; } .admin-stats { grid-template-columns: 1fr 1fr; gap: 8px; } .admin-stats .stat { padding: 12px 14px; } .admin-stats .stat b { font-size: 19px; } /* an odd card left alone on the last row spans the full width */ .admin-stats .stat:last-child:nth-child(odd) { grid-column: span 2; } .tbl-scroll .tbl { display: table; width: max-content; min-width: 100%; } .tbl-scroll .tbl thead, .tbl-scroll .tbl tbody, .tbl-scroll .tbl tr { min-width: 0; } .tbl-scroll .tbl th, .tbl-scroll .tbl td { white-space: nowrap; } } @media (max-width: 560px) { /* «تقاريري» on a phone: drop price and purchase date so the buttons people actually came for stay on screen instead of hiding past the right edge. Both numbers still appear in the totals line under the table. */ .rep-tbl th:nth-child(4), .rep-tbl td:nth-child(4), .rep-tbl th:nth-child(5), .rep-tbl td:nth-child(5) { display: none; } /* and the two actions stack, so the pair costs one button's width, not two */ .rep-tbl td:last-child .btn { display: block; width: 100%; margin: 3px 0; text-align: center; padding: 10px 12px; font-size: 12.5px; min-height: 40px; } /* Hiding two columns was not enough: the remaining three still added up to more than a 390px phone (and far more than 320px), so the sideways scroll of .tbl-scroll parked «معاينة» and «تحميل PDF» past the edge of the screen — the one table whose last column is the reason the page exists. Let this one table size itself to the viewport and wrap instead of scrolling. */ .tbl-scroll .rep-tbl { width: 100%; min-width: 0; table-layout: fixed; } .tbl-scroll .rep-tbl th, .tbl-scroll .rep-tbl td { white-space: normal; overflow-wrap: break-word; padding: 10px 8px; /* the cells wrap here, so the desktop ellipsis has nothing left to do except add a stray «…» beside a badge */ overflow: visible; text-overflow: clip; max-width: none; } .rep-tbl th:nth-child(1), .rep-tbl td:nth-child(1) { width: 21%; } .rep-tbl th:nth-child(3), .rep-tbl td:nth-child(3) { width: 27%; } .rep-tbl td:last-child { width: 30%; padding-inline: 6px; } .rep-tbl .badge { white-space: normal; } } @media (max-width: 380px) { /* on a 320px phone the «تحميل PDF» label was 10px wider than its own button and got cut in half — give the action column more room and a smaller label */ .rep-tbl td:last-child, .rep-tbl th:last-child { width: 37%; } .rep-tbl th:nth-child(3), .rep-tbl td:nth-child(3) { width: 24%; } .rep-tbl td:last-child .btn { font-size: 11.5px; padding-inline: 6px; min-width: 0; white-space: normal; } /* a pill badge wrapped onto three lines looks broken — square it off a little and let it read as a label at this width */ .rep-tbl .badge { border-radius: 8px; font-size: 11px; padding: 4px 7px; line-height: 1.4; overflow-wrap: normal; word-break: keep-all; } } /* A touch target under ~40px is a miss on a phone. The buttons inside table rows were 35px, and the «back to search» link was a 21px-tall strip. */ @media (max-width: 820px) { .btn { min-height: 42px; } .topbar .btn { min-height: 40px; } .tbl .btn { min-height: 40px; padding-top: 9px; padding-bottom: 9px; } .page-head > a { display: inline-block; padding: 10px 2px; min-height: 40px; } .lockup { padding: 6px 0; min-height: 40px; } } /* A phone held sideways is 844px wide, so the width-based rules above miss it entirely — ask about the input device instead. */ @media (hover: none) and (pointer: coarse) { .btn { min-height: 42px; } .tbl .btn { min-height: 40px; padding-top: 9px; padding-bottom: 9px; } .page-head > a { display: inline-block; padding: 10px 2px; min-height: 40px; } } /* One pathological value — a 250-character "email" typed into the login box — used to stretch its column until every other column of the monitor's tables sat off-screen. Cap the cell and let long values wrap or ellipsize. */ .tbl th, .tbl td { max-width: 340px; overflow: hidden; text-overflow: ellipsis; } .tbl td .num { overflow-wrap: anywhere; }