/* --------------------------------------------------------------------------- Theme. Every surface, border and text colour in this file resolves through a variable so the dark theme below is a redefinition of nine values rather than a second stylesheet. Anything hardcoded here is a colour that will not flip, which is how a dark theme ends up with white boxes in it. --------------------------------------------------------------------------- */ :root { --navy:#0f2135; --blue:#1877c9; --sky:#eaf5ff; --paper:#fff; --ink:#162434; /* لون النص فوق --blue. ليس #fff دائماً: انظر التعليق عند .primary. */ --on-blue:#fff; /* الذهبي: لون الهوية الثاني، كان غائباً عن اللوحة وحدها. */ --gold:#c9982f; --gold-light:#faf3e2; --muted:#718096; --line:#e7edf3; --green:#16835a; --red:#c74444; --bg:#f5f8fb; --field:#fff; --field-line:#d8e1ea; --raised:#f7fafd; --ok-bg:#e6f7ef; --bad-bg:#fff0f0; --warn-bg:#fdf3e0; --warn-fg:#b7791f; --secondary-bg:#eaf2f9; --secondary-fg:#24516f; --danger-bg:#f9e7e7; --track:#cbd5e1; --nav-group:#7e9ab5; --shadow:#1d34480a; } /* Follows the operating system unless the toggle in the sidebar says otherwise; [data-theme] on is what the toggle writes, and it wins over the media query in both directions. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --navy:#0b141f; --blue:#58a6ff; --sky:#12263c; --paper:#161b22; /* الأزرق يفتحّ في الوضع الداكن ليُقرأ نصّاً على خلفية داكنة — ونصّ أبيض فوقه يعطي تبايناً 2.53:1، دون حدّ WCAG AA بكثير. النص يقلب داكناً بدل أن يقلب الأزرق. */ --on-blue:#0d1117; --gold:#d8ad4a; --gold-light:#2c2413; --ink:#e6edf3; --muted:#94a3b8; --line:#26313f; --green:#3fb950; --red:#f85149; --bg:#0d1117; --field:#0f141b; --field-line:#30363d; --raised:#1c222c; --ok-bg:#0f2f22; --bad-bg:#3a1519; --warn-bg:#3a2a10; --warn-fg:#e3b341; --secondary-bg:#21262d; --secondary-fg:#c9d1d9; --danger-bg:#3a1519; --track:#30363d; --nav-group:#8fa9c4; --shadow:#00000040; } } /* نسخة ثانية من قيم الوضع الداكن — الأولى للنظام، وهذه للمبدّل اليدوي. كل متغيّر يُضاف أعلاه يجب أن يُضاف هنا: متغيّر يُنسى في هذه الكتلة يرث قيمته الفاتحة من :root، فيبدو الوضع الداكن سليماً حتى يلمس أحدٌ المبدّل. حدث هذا بالضبط مع --on-blue. */ :root[data-theme="dark"] { --navy:#0b141f; --blue:#58a6ff; --sky:#12263c; --paper:#161b22; --on-blue:#0d1117; --gold:#d8ad4a; --gold-light:#2c2413; --ink:#e6edf3; --muted:#94a3b8; --line:#26313f; --green:#3fb950; --red:#f85149; --bg:#0d1117; --field:#0f141b; --field-line:#30363d; --raised:#1c222c; --ok-bg:#0f2f22; --bad-bg:#3a1519; --warn-bg:#3a2a10; --warn-fg:#e3b341; --secondary-bg:#21262d; --secondary-fg:#c9d1d9; --danger-bg:#3a1519; --track:#30363d; --nav-group:#8fa9c4; --shadow:#00000040; } /* Prevents the white flash before the theme script runs. */ html { background:var(--bg); color-scheme:light dark; } * { box-sizing:border-box; } body { margin:0; color:var(--ink); background:var(--bg); font-family:Tahoma, Arial, sans-serif; font-size:14px; } button, input, select, textarea { font:inherit; } button { cursor:pointer; } .shell { display:grid; grid-template-columns:245px 1fr; min-height:100vh; } .sidebar { background:var(--navy); color:#dce9f5; padding:25px 16px; } .brand { display:flex; gap:10px; align-items:center; color:#fff; font-size:18px; font-weight:bold; margin:0 8px 30px; } /* White plate, not the old blue one: the logo it now holds is navy-and-gold on nothing, and navy on a navy sidebar is an invisible logo. */ .brand-mark { display:grid; place-items:center; width:38px; height:38px; border-radius:10px; background:#fff; flex-shrink:0; padding:3px; box-sizing:border-box; } .brand-mark img { width:100%; height:100%; object-fit:contain; display:block; } .nav a { display:block; padding:12px 14px; margin:4px 0; color:#c7d7e7; text-decoration:none; border-radius:8px; } .nav a:hover,.nav a.active { background:#213c58; color:#fff; } .logout { width:100%; margin-top:28px; border:1px solid #42627e; background:transparent; border-radius:8px; padding:10px; color:#fff; } .content { padding:30px; max-width:1440px; width:100%; margin:auto; } .page-head { display:flex; justify-content:space-between; gap:20px; align-items:center; margin-bottom:26px; } h1 { margin:0 0 6px; font-size:26px; } .page-head p { margin:0; color:var(--muted); } .user { display:flex; gap:9px; align-items:center; background:var(--paper); padding:8px 12px; border-radius:10px; border:1px solid var(--line); } .avatar { display:grid; place-items:center; height:30px; width:30px; background:var(--sky); color:var(--blue); border-radius:50%; } .stats { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:16px; margin-bottom:24px; } .card,.panel { background:var(--paper); border:1px solid var(--line); border-radius:12px; box-shadow:0 2px 8px var(--shadow); } .card { padding:19px; } .card label { color:var(--muted); } .number { display:block; font-size:29px; margin-top:8px; font-weight:bold; } .panel { padding:20px; margin-bottom:20px; } .panel h2 { font-size:17px; margin:0 0 18px; } .toolbar { display:flex; flex-wrap:wrap; gap:10px; justify-content:space-between; margin-bottom:16px; } .toolbar input { min-width:230px; } input,select,textarea { border:1px solid var(--field-line); background:var(--field); color:var(--ink); border-radius:7px; padding:10px 11px; outline:none; } input:focus,select:focus,textarea:focus { border-color:var(--blue); box-shadow:0 0 0 3px #1877c91c; } .primary,.secondary,.danger { border:0; border-radius:7px; padding:10px 14px; color:var(--on-blue); background:var(--blue); } .secondary { background:var(--secondary-bg); color:var(--secondary-fg); } .danger { background:var(--danger-bg); color:var(--red); } .table-wrap { overflow:auto; } table { border-collapse:collapse; width:100%; min-width:650px; } th,td { padding:13px 10px; text-align:right; border-bottom:1px solid var(--line); } th { color:var(--muted); font-weight:normal; font-size:13px; } td small { color:var(--muted); } .status { display:inline-block; padding:4px 8px; border-radius:20px; background:var(--ok-bg); color:var(--green); font-size:12px; } .status.off { background:var(--bad-bg); color:var(--red); } /* "In progress" — was an inline style on every purchase row, which meant it stayed beige on a dark background. */ .status.pending { background:var(--warn-bg); color:var(--warn-fg); } /* Destructive rows in the audit log and "out of stock" in the market report. */ .danger-text { color:var(--red); font-weight:700; } .warning-text { color:var(--warn-fg); font-weight:700; } .form-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; } .form-grid label { color:var(--muted); } .form-grid input,.form-grid select,.form-grid textarea { width:100%; display:block; margin-top:6px; } .form-actions { grid-column:1/-1; display:flex; gap:8px; } .message { min-height:20px; margin:12px 0 0; color:var(--green); } .message.error { color:var(--red); } .empty { color:var(--muted); padding:20px 0; text-align:center; } .login-page { min-height:100vh; display:grid; place-items:center; background:linear-gradient(135deg,#0f2c46,#1a80c8); } .login-card { width:min(420px,calc(100% - 32px)); padding:35px; background:var(--paper); border-radius:18px; box-shadow:0 20px 60px #06182766; } .login-card h1 { color:var(--navy); } .login-card p { color:var(--muted); margin-bottom:24px; } .login-card label { display:block; margin:14px 0 6px; } .login-card input { width:100%; } .login-card button { width:100%; margin-top:20px; } .back-link { display:inline-flex; align-items:center; gap:6px; color:var(--muted); margin-bottom:14px; font-size:13px; } .back-link:hover { color:var(--blue); } /* Tabs — used to split up long settings-style pages into sections */ .tabs { display:flex; gap:6px; flex-wrap:wrap; border-bottom:1px solid var(--line); margin-bottom:22px; } .tab-btn { border:0; background:transparent; padding:11px 18px; border-radius:8px 8px 0 0; color:var(--muted); font-weight:bold; border-bottom:2px solid transparent; margin-bottom:-1px; } .tab-btn:hover { color:var(--ink); background:var(--bg); } .tab-btn.active { color:var(--blue); border-bottom-color:var(--blue); } .tab-panel { display:none; } .tab-panel.active { display:block; } /* Stat cards — small inline stats inside a detail page */ .stat-row { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:14px; margin-bottom:22px; } .stat-chip { background:var(--paper); border:1px solid var(--line); border-radius:12px; padding:16px; } .stat-chip label { display:block; color:var(--muted); font-size:12.5px; margin-bottom:6px; } .stat-chip .number { font-size:22px; } .badge-row { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:22px; } .badge-pill { display:inline-flex; align-items:center; gap:6px; padding:7px 14px; border-radius:999px; background:var(--sky); color:var(--blue); font-size:13px; font-weight:bold; } /* History list — recitation / attendance / session timelines */ .history-list { display:flex; flex-direction:column; gap:1px; } .history-row { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:13px 4px; border-bottom:1px solid var(--line); font-size:13.5px; } .history-row:last-child { border-bottom:0; } .history-row .h-main { display:flex; flex-direction:column; gap:2px; } .history-row .h-main strong { font-size:14px; } .history-row .h-main span { color:var(--muted); font-size:12.5px; } .history-row .h-meta { color:var(--muted); font-size:12.5px; white-space:nowrap; } /* Multi-surah recitation session — several history-rows recorded together from one save in the teacher app, collapsed behind a summary line. */ .session-group { border-bottom:1px solid var(--line); } .session-group:last-child { border-bottom:0; } .session-group summary { cursor:pointer; padding:13px 4px; font-size:13.5px; font-weight:bold; color:var(--blue); list-style:none; } .session-group summary::-webkit-details-marker { display:none; } .session-group summary::before { content:'▸'; display:inline-block; margin-left:6px; transition:transform .15s; } .session-group[open] summary::before { transform:rotate(90deg); } .session-group .history-row { padding-right:20px; } .session-group .history-row:last-child { border-bottom:0; } /* Row links -> detail pages (kept inside one cell, not the whole , since list rows also hold other interactive controls like the circle-picker select and the delete button) */ a.row-link { color:var(--ink); font-weight:bold; } a.row-link:hover { color:var(--blue); } /* Toggle switch — used for feature flags so on/off reads as a clickable control */ .switch-row { display:flex; align-items:center; gap:12px; } .switch { position:relative; display:inline-block; width:50px; height:28px; flex-shrink:0; } .switch input { opacity:0; width:0; height:0; } .switch .slider { position:absolute; cursor:pointer; inset:0; background:var(--track); border-radius:999px; transition:.2s; } .switch .slider::before { content:""; position:absolute; height:22px; width:22px; right:3px; top:3px; background:#fff; border-radius:50%; transition:.2s; box-shadow:0 1px 3px rgba(0,0,0,.25); } .switch input:checked + .slider { background:var(--green); } .switch input:checked + .slider::before { transform:translateX(-22px); } .switch-label { font-size:13px; font-weight:bold; } .switch-label.on { color:var(--green); } .switch-label.off { color:var(--muted); } /* Sidebar group labels — the nav grew past ten links, so it needs headings */ .nav-group { display:block; margin:18px 14px 6px; font-size:11.5px; letter-spacing:.4px; color:var(--nav-group); text-transform:none; } .nav-group:first-child { margin-top:8px; } /* --------------------------------------------------------------------------- Page layouts. Sections used to be one
after another, so every screen was a single long scroll. These put the short "add/edit" form beside the long list instead of above it. --------------------------------------------------------------------------- */ .layout-split { display:grid; grid-template-columns:minmax(300px,380px) 1fr; gap:20px; align-items:start; } .layout-split > .col { display:flex; flex-direction:column; gap:20px; min-width:0; } /* The form column tracks the list while it scrolls on tall screens. */ .layout-split > .col.sticky { position:sticky; top:20px; } .layout-cols { display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:20px; align-items:start; } /* Panel headings carry their own explanation instead of a loose

above the form */ .panel-head { margin:0 0 18px; } .panel-head h2 { margin:0 0 6px; } .panel-head p { margin:0; color:var(--muted); font-size:13px; line-height:1.7; } .panel + .panel { margin-top:0; } .panel-tight { padding:0; overflow:hidden; } .panel-tight .panel-head { padding:20px 20px 0; } .panel-tight .table-wrap { padding:0 4px 4px; } /* Row of read-only key figures at the top of a screen */ .summary-row { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:14px; margin-bottom:20px; } /* --------------------------------------------------------------------------- Centred modal. Replaces window.prompt(), which dropped a one-value-at-a-time box from the top of the browser and could not show a checkbox or a select. --------------------------------------------------------------------------- */ dialog.modal { border:0; padding:0; border-radius:14px; width:min(620px,calc(100vw - 32px)); box-shadow:0 24px 70px #0a1c2e40; color:var(--ink); background:var(--paper); } dialog.modal::backdrop { background:#0b1c2ea8; backdrop-filter:blur(2px); } .modal-form { display:flex; flex-direction:column; max-height:min(86vh,780px); } .modal-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:18px 20px; border-bottom:1px solid var(--line); } .modal-head h3 { margin:0; font-size:17px; } .modal-x { border:0; background:transparent; color:var(--muted); font-size:24px; line-height:1; padding:0 4px; border-radius:6px; } .modal-x:hover { background:var(--raised); color:var(--ink); } .modal-desc { margin:0; padding:14px 20px 0; color:var(--muted); font-size:13px; line-height:1.7; } .modal-body { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; padding:18px 20px; overflow:auto; } .modal-field { display:flex; flex-direction:column; gap:6px; color:var(--muted); font-size:13px; min-width:0; } .modal-field > input,.modal-field > select,.modal-field > textarea { width:100%; color:var(--ink); font-size:14px; } .modal-field textarea { resize:vertical; line-height:1.7; } .modal-field small { color:var(--muted); font-size:11.5px; } .modal-check { grid-column:1/-1; display:flex; align-items:center; gap:9px; background:var(--raised); border:1px solid var(--line); border-radius:9px; padding:11px 13px; } .modal-check input { width:17px; height:17px; margin:0; accent-color:var(--blue); } .modal-foot { display:flex; justify-content:flex-start; gap:9px; padding:14px 20px; border-top:1px solid var(--line); background:var(--raised); } /* --------------------------------------------------------------------------- Narrow screens. The supervisor opens this on a phone — from the mosque, or to check something between lessons — so the panel has to survive 380px. --------------------------------------------------------------------------- */ @media(max-width:900px){ .layout-split{grid-template-columns:1fr} .layout-split > .col.sticky{position:static} } @media(max-width:800px){ .shell{grid-template-columns:1fr} /* The sidebar becomes a sticky top bar: brand, scrolling links, then the two controls that used to be display:none here — which meant an admin on a phone could not log out or change the theme at all. */ .sidebar{padding:10px 12px;position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:10px} .brand{margin:0;flex-shrink:0;font-size:16px} .brand-mark{width:28px;height:28px;border-radius:8px} .nav{display:flex;overflow-x:auto;align-items:center;gap:4px;flex:1;min-width:0;scrollbar-width:none} .nav::-webkit-scrollbar{display:none} .nav a{white-space:nowrap;padding:9px 12px;margin:0;font-size:13px} .nav-group{display:none} .logout,.theme-toggle{display:block;width:auto;margin:0;flex-shrink:0;padding:8px 10px;font-size:0} /* Icon-only at this width: the words do not fit beside a scrolling nav, but the controls themselves have to stay reachable. */ .logout::after{content:"↩";font-size:16px} .theme-toggle::after{content:"◐";font-size:15px} .theme-toggle{display:flex;align-items:center;justify-content:center} .content{padding:18px 12px} .stats{grid-template-columns:repeat(2,1fr);gap:12px} .page-head{align-items:flex-start;flex-direction:column;gap:10px} .user{display:flex} .form-grid{grid-template-columns:1fr} .modal-body{grid-template-columns:1fr} .toolbar input{min-width:0;width:100%} .tabs{overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none} .tabs::-webkit-scrollbar{display:none} .tab-btn{white-space:nowrap;padding:10px 13px;font-size:13px} /* Tables still scroll sideways rather than being restructured into cards — but the edge shadow tells you there is more, which a bare overflow does not. */ .table-wrap{-webkit-overflow-scrolling:touch;background: linear-gradient(to left, var(--paper) 30%, transparent) right/22px 100% no-repeat, linear-gradient(to right, var(--paper) 30%, transparent) left/22px 100% no-repeat} table{min-width:560px} th,td{padding:10px 8px;font-size:13px} .panel,.card{padding:15px} h1{font-size:21px} } @media(max-width:480px){ .stats{grid-template-columns:1fr} .summary-row{grid-template-columns:repeat(2,1fr)} .brand span:not(.brand-mark){display:none} /* Buttons inside table cells stack instead of squeezing each other to unreadable widths. */ td .secondary,td .danger,td .primary{display:inline-block;margin:2px 0} } /* Theme toggle, at the foot of the sidebar beside the logout button */ .theme-toggle { width:100%; margin-top:10px; border:1px solid #42627e; background:transparent; border-radius:8px; padding:10px; color:#dce9f5; display:flex; align-items:center; justify-content:center; gap:8px; font-size:13px; } .theme-toggle:hover { background:#213c58; } @media(max-width:800px){ .theme-toggle{ display:none } } /* Destructive confirmation + undo bar */ .danger-note { margin:0; padding:11px 13px; border-radius:9px; background:var(--danger-bg); color:var(--red); font-size:13px; line-height:1.8; } .danger-modal .modal-head h3 { color:var(--red); } .undo-bar { position:fixed; inset:auto 20px 20px auto; z-index:60; display:flex; align-items:center; gap:14px; background:var(--navy); color:#fff; padding:13px 16px; border-radius:11px; box-shadow:0 10px 34px #0a1c2e59; font-size:13.5px; max-width:calc(100vw - 40px); } .undo-btn { border:1px solid #ffffff59; background:transparent; color:#fff; border-radius:7px; padding:6px 12px; font-size:13px; } .undo-btn:hover { background:#ffffff1f; } /* Juz picker — thirty checkboxes that have to stay scannable. Ordered 30 -> 1 in the markup, because that is the order juz are memorised and recited. */ .juz-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:8px; margin-top:8px; } .juz-chip { display:flex; align-items:center; gap:8px; padding:9px 11px; border:1px solid var(--line); border-radius:9px; background:var(--paper); cursor:pointer; font-size:13px; } .juz-chip:hover { border-color:var(--blue); } .juz-chip input { width:16px; height:16px; margin:0; accent-color:var(--blue); flex-shrink:0; } .juz-chip b { color:var(--blue); margin-left:4px; } .juz-chip:has(input:checked) { border-color:var(--blue); background:var(--sky); } @media(max-width:480px){ .juz-grid{ grid-template-columns:repeat(2,1fr) } } /* The amount of a juz — whole, half, quarter, eighth. Hidden until the juz is ticked: thirty always-visible dropdowns turn a scannable grid into a wall of controls, and for every circle but البراعم the answer is "كامل" anyway. */ .juz-chip { flex-wrap:wrap; } /* The chip is a

now, so the tick target has to be the label explicitly. */ .juz-chip > label { flex:1; cursor:pointer; } .juz-chip .portion { display:none; width:100%; margin:6px 0 0; padding:5px 7px; font-size:12px; border:1px solid var(--line); border-radius:7px; background:var(--paper); color:var(--ink); } .juz-chip:has(input[type=checkbox]:checked) .portion { display:block; } /* One amount offered means there is nothing to choose — the control would only ask a question with a single answer. */ .juz-chip .portion.single { display:none !important; } .portion-note { margin:6px 0 0; color:var(--muted); font-size:12.5px; line-height:1.7; } /* Sheet builder: field checkboxes, grouped by the question they answer. Grouped rather than one long list, because thirty loose checkboxes are a thing you scan for a minute and still miss the one you wanted. */ /* ── Centre calendar ────────────────────────────────────────────────────── A real month grid, not a list of dates. The whole reason an admin will keep this accurate — and the attendance denominator depends on them keeping it accurate — is being able to see the month and click the day. */ .cal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:6px; } .cal-head { text-align:center; font-size:12px; font-weight:bold; color:var(--muted); padding:6px 0; } .cal-head.off { color:var(--warn-fg); } .cal-cell { position:relative; min-height:86px; border:1px solid var(--line); border-radius:9px; background:var(--paper); padding:6px; cursor:pointer; overflow:hidden; } .cal-cell:hover { border-color:var(--blue); } .cal-cell.blank { border:0; background:transparent; cursor:default; min-height:0; } /* Not a red "error" tint: a day off is normal, it just is not counted. */ .cal-cell.off { background:var(--bg); border-style:dashed; } .cal-cell.today { border-color:var(--blue); box-shadow:inset 0 0 0 1px var(--blue); } .cal-num { font-size:12.5px; font-weight:bold; color:var(--ink); } .cal-cell.off .cal-num { color:var(--muted); } .cal-marks { display:flex; flex-direction:column; gap:3px; margin-top:5px; } .cal-chip { display:inline-block; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding:2px 7px; border-radius:6px; font-size:10.5px; font-weight:600; } .cal-more { font-size:10px; color:var(--muted); } /* Colours come from the TYPE ROW as an inline style, not from a class per kind — the list of kinds is edited by the admin and is not known here. */ .cal-legend { display:flex; flex-wrap:wrap; gap:16px; margin-top:16px; font-size:12px; color:var(--muted); } .cal-legend span { display:flex; align-items:center; gap:6px; } .cal-dot { width:11px; height:11px; border-radius:3px; display:inline-block; } .cal-swatch { width:11px; height:11px; border-radius:3px; display:inline-block; background:var(--bg); border:1px dashed var(--line); } /* One day, everything on it. The grid cell is too small to list three entries with their actions, and "a day can hold more than one thing" was invisible until the day itself became a thing you could open. */ .day-list { display:flex; flex-direction:column; gap:10px; max-height:320px; overflow-y:auto; } .day-row { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:11px 13px; border:1px solid var(--line); border-radius:10px; background:var(--paper); } .day-row small { color:var(--muted); } /* Scheduled سرد on the calendar. Visually distinct from a calendar entry because it is not one: the row lives in serd_sessions and is managed from the سرد screen, and a chip that looked editable here would be a lie. */ .cal-serd { position:absolute; top:5px; left:6px; font-size:9px; font-weight:700; letter-spacing:.5px; color:var(--green,#16835a); border:1px solid currentColor; border-radius:4px; padding:0 4px; opacity:.8; } .cal-serd-chip { background:var(--ok-bg); color:var(--green); border:1px dashed var(--green); } :root[data-theme="dark"] .cal-serd-chip { background:#0f2f22; color:#7ee2b8; } @media(max-width:640px){ .cal-cell { min-height:64px; padding:4px; } .cal-chip { font-size:9.5px; padding:1px 5px; } } .field-group { margin-bottom:14px; } .field-group h4 { margin:0 0 6px; font-size:13px; color:var(--muted); font-weight:600; } .field-group .den-picker { margin-top:0; } /* Which amounts a stage may use. Same shape in the config form and in each row of the per-stage table, so the two read as one setting. */ .den-picker { display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; } .den-picker label { display:flex; align-items:center; gap:7px; padding:8px 12px; border:1px solid var(--line); border-radius:9px; background:var(--paper); cursor:pointer; font-size:13px; } .den-picker label:has(input:checked) { border-color:var(--blue); background:var(--sky); } .den-picker label:has(input:disabled) { opacity:.75; cursor:default; } .den-picker input { width:16px; height:16px; margin:0; accent-color:var(--blue); } /* A partial recital, wherever one is listed. Amber rather than the queue's blue: it is not a warning, but it is the thing on the row a reader must not skim past into reading "juz 30" as a whole juz. */ .portion-tag { display:inline-block; margin-right:4px; padding:1px 6px; border-radius:6px; background:var(--warn-bg); color:var(--warn-fg); font-size:11.5px; font-weight:600; } /* سرد review: the linking picker. A native