@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800&family=Share+Tech+Mono&display=swap'); :root { --ink: #1b1f1c; --ink-soft: #565f59; --ground: #f6f5f1; --surface: #ffffff; --border: #dcded6; --accent: #b2531f; --accent-dark: #8a3f17; --accent-soft: #f4e3d3; --good: #2f6b52; --good-soft: #e2ede6; --bad: #9c3b34; --bad-soft: #f3e2df; --warn: #8a6a10; --warn-soft: #fdf0cf; --radius: 10px; --radius-lg: 14px; --shadow-sm: 0 1px 2px rgba(27, 31, 28, .06); --shadow-md: 0 6px 18px rgba(27, 31, 28, .10); --shadow-lg: 0 14px 34px rgba(27, 31, 28, .16); /* motion tokens -- "purposeful motion" pass: every transition in this file references these two so the whole app speeds up/slows down (or turns off entirely, see prefers-reduced-motion below) consistently. */ --dur-fast: .12s; --dur: .2s; --ease: cubic-bezier(.4, 0, .2, 1); /* sequential ramp (single hue, light -> dark) for magnitude bars */ --seq-1: #f8e7d6; --seq-2: #eec9a0; --seq-3: #d99a5c; --seq-4: var(--accent); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } } * { box-sizing: border-box; } html { direction: rtl; } /* The line above is the RTL default; English pages set dir="ltr" on and must actually switch box-layout direction (grid/flex auto-placement, logical-property resolution) to match -- not just align text -- so every component (KPI grid, chart bars, order cards, etc.) visually mirrors instead of staying RTL-ordered with LTR text inside it. */ html[dir="ltr"] { direction: ltr; } body { margin: 0; background: var(--ground); color: var(--ink); font-family: 'Cairo', -apple-system, BlinkMacSystemFont, "Segoe UI", Tahoma, sans-serif; line-height: 1.65; } /* Consistent, visible keyboard-focus ring everywhere -- accessibility part of the redesign pass, not just a mouse/touch pass. */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; } /* Slim, on-brand scrollbars for the several horizontal-scroll strips in this app (tabs-nav, student-tabs, the order grid) -- WebKit + Firefox. */ * { scrollbar-width: thin; scrollbar-color: var(--border) transparent; } *::-webkit-scrollbar { height: 7px; width: 7px; } *::-webkit-scrollbar-track { background: transparent; } *::-webkit-scrollbar-thumb { background: var(--border); border-radius: 99px; } *::-webkit-scrollbar-thumb:hover { background: var(--ink-soft); } .topbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 14px 20px; background: var(--surface); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 40; } .topbar .brand { font-weight: 800; font-size: 17px; display: flex; align-items: center; gap: 10px; } .topbar .brand .mark { line-height: 1; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; background: #fff; border: 1px solid var(--border); border-radius: 9px; overflow: hidden; flex: 0 0 auto; box-shadow: var(--shadow-sm); } .topbar .brand .mark img { width: 100%; height: 100%; object-fit: contain; padding: 3px; } .topbar .brand-text { display: flex; flex-direction: column; line-height: 1.2; } .topbar .brand-name { font-weight: 800; font-size: 16.5px; } .topbar .brand-by { font-weight: 600; font-size: 10.5px; color: var(--ink-soft); letter-spacing: .2px; } .topbar .area-pill { color: var(--accent); font-weight: 600; font-size: 12.5px; background: var(--accent-soft); padding: 3px 10px; border-radius: 99px; margin-inline-start: 4px; } .topbar .who { display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--ink-soft); } /* Change-password dropdown in the topbar (see partials/topbar.ejs) -- a
anchored to the summary button, panel positioned absolutely so opening it never pushes the sticky topbar taller/shifts page content, and aligned with inset-inline-end (not left/right) so it lands on the correct side in both the Arabic/RTL and English/LTR layouts. */ .who .pw-menu { position: relative; } .who .pw-menu > summary { list-style: none; } .who .pw-menu > summary::-webkit-details-marker { display: none; } .who .pw-menu .pw-menu-panel { position: absolute; top: calc(100% + 8px); inset-inline-end: 0; width: 270px; z-index: 50; text-align: start; box-shadow: var(--shadow-sm); } .who .pw-menu .pw-menu-panel form.stack { max-width: none; gap: 10px; } /* --- Live clock widget in the topbar: current time/date/weekday for Libya, shown to every logged-in user regardless of role. Styled like a small desktop LED clock (dark face, monospace digits) so it reads as its own distinct gadget rather than blending into the rest of the topbar. The digits are ticked client-side (see partials/topbar.ejs's inline script) from a Libya-local time seeded by the server, never the viewer's own device clock/timezone. */ .clock-widget { display: flex; align-items: center; gap: 12px; background: linear-gradient(160deg, #23281f, #14170f); color: #e8f5e9; border-radius: var(--radius); padding: 7px 16px; box-shadow: var(--shadow-sm); } .clock-days { display: flex; flex-direction: column; gap: 1.5px; font-size: 9px; line-height: 1.3; color: #6b7568; font-weight: 700; } .clock-days .cw-day { transition: color var(--dur) var(--ease); } .clock-days .cw-day.active { color: #5eead4; } .clock-main { display: flex; align-items: baseline; gap: 6px; } .clock-time { font-family: 'Share Tech Mono', 'Courier New', monospace; font-size: 26px; font-weight: 700; letter-spacing: 1px; color: #f0fdf4; text-shadow: 0 0 10px rgba(94, 234, 212, .35); } .clock-meta { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; } .clock-date { font-family: 'Share Tech Mono', monospace; font-size: 11px; color: #5eead4; } .clock-weekday-label { font-size: 10px; color: #8a938c; } @media (max-width: 860px) { .clock-days { display: none; } } @media (max-width: 640px) { .clock-widget { padding: 6px 12px; gap: 8px; } .clock-time { font-size: 21px; } } .topbar button { background: none; border: 1px solid var(--border); border-radius: var(--radius); padding: 6px 12px; font-size: 13px; cursor: pointer; color: var(--ink-soft); font-family: inherit; transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); } .topbar button:hover { background: var(--bad-soft); color: var(--bad); border-color: transparent; } /* Arabic/English switcher (see partials/topbar.ejs + src/i18n.ts) -- a small segmented pill, same visual language as .tabs-nav/.student-tabs. */ .lang-switch { display: flex; align-items: center; gap: 2px; padding: 3px; background: var(--ground); border: 1px solid var(--border); border-radius: 99px; } .lang-switch a { display: inline-block; padding: 4px 10px; border-radius: 99px; font-size: 12.5px; font-weight: 600; text-decoration: none; color: var(--ink-soft); transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); } .lang-switch a:hover { color: var(--ink); } .lang-switch a.active { background: var(--surface); color: var(--accent-dark); box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,.08)); } main { max-width: 780px; margin: 0 auto; padding: 24px 18px 60px; } h1 { font-size: 22px; margin: 0 0 4px; font-weight: 800; } h2 { font-size: 15.5px; margin: 30px 0 12px; font-weight: 700; padding-inline-start: 10px; border-inline-start: 3px solid var(--accent); } h3 { font-size: 14px; margin: 0 0 8px; font-weight: 700; } .subtitle { color: var(--ink-soft); font-size: 14px; margin: 0 0 20px; } .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 16px 18px; margin-bottom: 16px; max-width: 100%; overflow-x: auto; } .balance { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 10px; background: linear-gradient(135deg, var(--accent-soft), var(--surface) 65%); border-color: transparent; } .balance .amount { font-size: 30px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--accent-dark); } .balance .label { font-size: 13px; color: var(--ink-soft); } form.inline { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } form.stack { display: flex; flex-direction: column; gap: 12px; max-width: 480px; } label { display: block; font-size: 13px; color: var(--ink-soft); margin-bottom: 4px; } input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], select, textarea { padding: 9px 10px; border: 1px solid var(--border); border-radius: var(--radius); font-size: 14px; background: var(--surface); color: var(--ink); font-family: inherit; } textarea { width: 100%; min-height: 130px; resize: vertical; font-family: 'Cairo', monospace; line-height: 1.8; } .field-row { display: flex; gap: 10px; flex-wrap: wrap; } .field-row > div { flex: 1; min-width: 140px; } button, .btn { background: var(--accent); color: #fff; border: none; border-radius: var(--radius); padding: 9px 14px; font-size: 14px; font-weight: 600; cursor: pointer; font-family: inherit; text-decoration: none; display: inline-block; } button.secondary, .btn.secondary { background: var(--surface); color: var(--ink); border: 1px solid var(--border); } button.danger, .btn.danger { background: var(--bad-soft); color: var(--bad); border: 1px solid var(--border); } button.small, .btn.small { padding: 6px 10px; font-size: 13px; } button.small.secondary, .btn.small.secondary { transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); } details summary.btn { list-style: none; cursor: pointer; } details summary.btn::-webkit-details-marker { display: none; } .notice-banner { padding: 10px 14px; border-radius: var(--radius); margin-bottom: 12px; font-size: 13.5px; } table.calendar { table-layout: fixed; } table.calendar th { text-align: center; padding: 6px 2px; } table.calendar td { text-align: center; vertical-align: top; height: 56px; padding: 4px; border: 1px solid var(--border); font-size: 12px; color: var(--ink-faint); } table.calendar td.today { background: var(--accent-soft); } table.calendar td.has-items { background: var(--good-soft); } table.calendar td.today.has-items { background: linear-gradient(135deg, var(--accent-soft), var(--good-soft)); } table.calendar td a { display: block; text-decoration: none; color: inherit; } table.calendar .day-num { display: block; font-weight: 700; color: var(--ink); font-size: 13px; } table.calendar .day-count { display: block; margin-top: 2px; color: var(--good); font-weight: 600; } .menu-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border); } .menu-item:last-child { border-bottom: none; } .menu-item .name { font-weight: 600; } .menu-item .desc { color: var(--ink-soft); font-size: 12.5px; margin-top: 2px; } .menu-item .price { color: var(--ink-soft); font-size: 13px; font-variant-numeric: tabular-nums; } .menu-item .sold-out { color: var(--bad); font-size: 12.5px; } .menu-item .tag { display: inline-block; background: var(--good-soft); color: var(--good); font-size: 11px; padding: 1px 7px; border-radius: 99px; margin-inline-end: 4px; } .menu-item input[type=number] { width: 56px; } .menu-item .actions { display: flex; align-items: center; gap: 6px; } .category-heading { font-size: 12.5px; font-weight: 700; color: var(--accent); text-transform: none; margin: 18px 0 4px; padding-bottom: 4px; border-bottom: 2px solid var(--accent-soft); } .category-heading:first-child { margin-top: 0; } table { width: 100%; border-collapse: collapse; font-size: 14px; } th, td { text-align: start; padding: 9px 10px; border-bottom: 1px solid var(--border); } th { font-size: 11.5px; color: var(--ink-soft); font-weight: 600; } td.num, th.num { text-align: end; font-variant-numeric: tabular-nums; } .pill { display: inline-block; font-size: 12px; font-weight: 600; padding: 2px 9px; border-radius: 99px; } .pill.PLACED { background: var(--accent-soft); color: var(--accent); } .pill.PREPARING { background: #fdf0cf; color: #8a6a10; } .pill.READY { background: var(--good-soft); color: var(--good); } .pill.COLLECTED { background: var(--border); color: var(--ink-soft); } .pill.CANCELLED { background: var(--bad-soft); color: var(--bad); } /* Order "ticket" cards -- canteen queue + pickup verification. A colored top band (not just a thin side rule) plus a torn-stub divider before the pickup code make each order read like an actual order ticket instead of a plain settings-style card, and a responsive grid (see .orders-grid) replaces the old single stacked column so a busy queue fits more on screen at a glance. */ .orders-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; align-items: start; } .order-card { position: relative; padding-top: 20px; overflow: visible; transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .order-card::before { content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; height: 6px; border-radius: var(--radius-lg) var(--radius-lg) 0 0; background: var(--accent); } .order-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); } .order-card.status-PREPARING::before { background: var(--warn); } .order-card.status-READY::before { background: var(--good); } .order-card.status-COLLECTED::before { background: var(--ink-soft); } .order-card.status-CANCELLED::before, .order-card.status-NOT_COLLECTED::before { background: var(--bad); } .order-card .head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 10px; flex-wrap: wrap; gap: 8px; } .order-card .items { font-size: 13.5px; color: var(--ink-soft); margin-bottom: 12px; } .student-chip { display: flex; align-items: center; gap: 9px; } .student-chip .avatar { width: 32px; height: 32px; border-radius: 50%; flex: 0 0 auto; background: var(--accent-soft); color: var(--accent-dark); font-weight: 800; font-size: 14px; display: flex; align-items: center; justify-content: center; } .student-chip strong { font-size: 14.5px; } .student-chip .student-class { font-size: 12px; color: var(--ink-soft); } .order-time { font-size: 11.5px; color: var(--ink-soft); margin-top: 6px; font-variant-numeric: tabular-nums; } .ticket-stub { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 -18px 12px; padding: 10px 18px 0; border-top: 1px dashed var(--border); } .pickup-code { display: flex; flex-direction: column; } .pickup-code .code-label { font-size: 11px; color: var(--ink-soft); } .pickup-code .code-value { font-size: 19px; font-weight: 800; letter-spacing: 1px; font-variant-numeric: tabular-nums; color: var(--accent-dark); } .ticket-total { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; } .order-actions { display: flex; gap: 8px; flex-wrap: wrap; } /* Small at-a-glance counts above the queue (جديد/قيد التحضير/جاهز/تم الاستلام) -- lets canteen staff read the state of the whole queue without scanning every card, especially once it's more than a screenful. */ .queue-stats { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; } .queue-stat { display: flex; align-items: baseline; gap: 6px; padding: 8px 14px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm); } .queue-stat-num { font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; } .queue-stat-label { font-size: 12.5px; color: var(--ink-soft); } .queue-stat.PLACED .queue-stat-num { color: var(--accent); } .queue-stat.PREPARING .queue-stat-num { color: var(--warn); } .queue-stat.READY .queue-stat-num { color: var(--good); } .queue-stat.COLLECTED .queue-stat-num { color: var(--ink-soft); } .message { padding: 10px 14px; border-radius: var(--radius); margin-bottom: 16px; font-size: 14px; background: var(--accent-soft); color: var(--accent); } .error-list { padding: 10px 14px; border-radius: var(--radius); margin-bottom: 16px; font-size: 13.5px; background: var(--bad-soft); color: var(--bad); } .error-list ul { margin: 6px 0 0; padding-inline-start: 18px; } .student-tabs { display: flex; gap: 8px; margin-bottom: 18px; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 2px; } .student-tabs a { flex: 0 0 auto; padding: 6px 14px; border-radius: 99px; border: 1px solid var(--border); font-size: 13.5px; text-decoration: none; color: var(--ink-soft); background: var(--surface); transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); } .student-tabs a:hover { border-color: var(--accent); color: var(--accent); } .student-tabs a.active { background: var(--accent); color: #fff; border-color: var(--accent); box-shadow: var(--shadow-sm); } /* Segmented-pill nav strip, shared by every /canteen/* page. A soft "track" background behind the tabs (like a tab-bar control) reads more like a single navigation unit than a loose row of buttons. */ .tabs-nav { display: flex; gap: 4px; margin-bottom: 20px; flex-wrap: wrap; padding: 4px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; } .tabs-nav a { flex: 0 0 auto; padding: 8px 12px; border-radius: 9px; font-size: 13.5px; text-decoration: none; color: var(--ink-soft); background: transparent; border: 1px solid transparent; white-space: nowrap; transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); } .tabs-nav a:hover { background: var(--ground); color: var(--ink); } .tabs-nav a.active { background: var(--ink); color: #fff; box-shadow: var(--shadow-sm); } .day-group { margin-bottom: 22px; } .day-group .day-label { font-size: 13px; font-weight: 700; color: var(--ink); background: var(--ground); padding: 6px 12px; border-radius: var(--radius); display: inline-block; margin-bottom: 8px; } .hint { font-size: 12.5px; color: var(--ink-soft); margin-top: 4px; } .hint code { background: var(--ground); padding: 1px 6px; border-radius: 4px; } /* Split-panel login: a brand/story side + the form side, the way most modern products (not just this app's own inner pages) present sign-in -- the highest-visibility page in the whole system, so it gets the most deliberate visual treatment. Stacks to one column on narrow screens. */ .login-shell { display: flex; min-height: 100vh; position: relative; } .login-lang-switch { position: absolute; top: 18px; inset-inline-start: 18px; z-index: 5; background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.3); } .login-lang-switch a { color: rgba(255,255,255,.85); } .login-lang-switch a.active { background: rgba(255,255,255,.92); color: var(--accent-dark); } .login-panel { flex: 1 1 46%; display: flex; flex-direction: column; justify-content: center; padding: 60px; color: #fff; background: radial-gradient(circle at 15% 20%, rgba(255,255,255,.14), transparent 40%), linear-gradient(135deg, var(--accent), var(--accent-dark)); } .login-panel .brand-mark { width: 62px; height: 62px; border-radius: 16px; padding: 8px; background: #fff; display: flex; align-items: center; justify-content: center; margin-bottom: 18px; box-shadow: var(--shadow-md); } .login-panel .brand-mark img { width: 100%; height: 100%; object-fit: contain; } .login-powered-by { margin-top: 30px; font-size: 12px; font-weight: 600; color: rgba(255,255,255,.75); } .login-panel h1 { font-size: 30px; color: #fff; } .login-panel .subtitle { color: rgba(255,255,255,.85); font-size: 15px; max-width: 380px; } .login-panel .login-features { list-style: none; margin: 28px 0 0; padding: 0; display: flex; flex-direction: column; gap: 14px; } .login-panel .login-features li { display: flex; align-items: center; gap: 10px; font-size: 14px; color: rgba(255,255,255,.92); } .login-panel .login-features .ico { width: 30px; height: 30px; border-radius: 9px; background: rgba(255,255,255,.16); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; font-size: 14px; } .login-form-panel { flex: 1 1 54%; display: flex; align-items: center; justify-content: center; padding: 40px 24px; } .login-wrap { width: 100%; max-width: 380px; } .login-wrap .card { padding: 28px 26px; box-shadow: var(--shadow-lg); } .login-wrap label { display: block; font-size: 13px; color: var(--ink-soft); margin: 12px 0 4px; } .login-wrap input { width: 100%; } .demo-hint { font-size: 12.5px; color: var(--ink-soft); margin-top: 16px; border-top: 1px dashed var(--border); padding-top: 12px; line-height: 2; } @media (max-width: 860px) { .login-shell { flex-direction: column; min-height: 0; } .login-panel { padding: 32px 24px; text-align: center; } .login-panel .brand-mark { margin-inline: auto; } .login-panel .subtitle, .login-panel .login-features { display: none; } /* keep the stacked mobile layout short -- the form panel below needs the space */ } /* --- visual polish pass --- */ .card { box-shadow: 0 1px 2px rgba(27, 31, 28, 0.04); transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease); } button, .btn { box-shadow: 0 1px 2px rgba(178, 83, 31, 0.18); transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), filter var(--dur-fast) var(--ease); } button:hover, .btn:hover { filter: brightness(1.05); transform: translateY(-1px); box-shadow: var(--shadow-md); } button:active, .btn:active { transform: translateY(1px); box-shadow: none; } button.secondary, .btn.secondary { box-shadow: none; } button.secondary:hover, .btn.secondary:hover { background: var(--ground); box-shadow: var(--shadow-sm); } button:disabled { opacity: .55; cursor: not-allowed; filter: none; transform: none; box-shadow: none; } input[type=checkbox], input[type=radio] { width: 17px; height: 17px; accent-color: var(--accent); cursor: pointer; } input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], select, textarea { transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; } /* Large, natively-clickable checkbox targets -- wraps a checkbox (order grid cells, the order-edit item list) so the whole cell/row responds to hover/tap, not just the small checkbox square. No JS: the checkbox is a descendant of the