/* Work Advances (سلف عمل) - Empire MENA, Phase 1. Arabic RTL is the default direction; English LTR is the alternative - `dir`/`lang` are set once, on , by base.html. Every rule below uses CSS logical properties (inline/block, start/end) instead of left/right so this ONE stylesheet serves both directions - there are no mirrored blocks here and there must not be any added later. No CDN, no third-party fonts, no external assets: system font stack only. --brand/--brand-2/--brand-3/--neg/--warn below are the Empire MENA Control Room's own tokens, reused verbatim (see Wood & Foam Stock Manager's static/app.css) so this app reads as the same product family. */ :root{ /* Empire MENA brand tokens, verbatim. */ --brand:#75A1C8;--brand-2:#4E7DAE;--brand-3:#2E5580; --warn:#D9922B;--warn-ink:#7A4E00;--warn-bg:#FBF1DF; /* Negative-balance tokens. --neg is the accent (icons/borders), --neg-ink is darkened for AA text contrast on --surface, --neg-bg is the wash behind a negative figure or badge. */ --neg:#D4483B;--neg-ink:#A8291E;--neg-bg:#FBEAE8; --canvas:#EEF1F5;--surface:#FFFFFF;--surface-2:#F6F8FA; --ink:#1A1D23;--muted:#5B6270;--line:#DDE1E7;--line-strong:#C6CCD6; --focus:#2F6FED; --shadow:0 8px 24px rgba(20,24,32,.10); --r:14px;--r-sm:10px;--r-pill:999px; --ease:cubic-bezier(.32,.72,0,1);--fast:.16s;--med:.28s; --fs:-apple-system,BlinkMacSystemFont,"Segoe UI Variable","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; --fa:"SF Arabic","Geeza Pro","Segoe UI","Noto Naskh Arabic",Tahoma,Arial,sans-serif; --font:var(--fs); } @media (prefers-color-scheme: dark){ :root{ --brand:#8FB6D9;--brand-2:#6C97C4;--brand-3:#4E7DAE; --warn:#E4A94F;--warn-ink:#FCE4B8;--warn-bg:#3A2C0F; --neg:#FF8078;--neg-ink:#FF8078;--neg-bg:#3A1A18; --canvas:#14161B;--surface:#1B1E25;--surface-2:#20232B; --ink:#EEF0F4;--muted:#9AA3B2;--line:#2B2F38;--line-strong:#3A3F4A; --focus:#6EA8FF; --shadow:0 8px 24px rgba(0,0,0,.45); } } *,*::before,*::after{box-sizing:border-box} html,body{margin:0;min-height:100%} html{background:var(--canvas)} body{ background:var(--canvas);color:var(--ink);font-family:var(--font); font-size:15px;line-height:1.55;-webkit-text-size-adjust:100%; } :lang(ar){font-family:var(--fa)} h1,h2,h3{margin-block:0 .5em;line-height:1.3} p{margin-block:0 .75em} bdi{unicode-bidi:isolate} .tnum{font-variant-numeric:tabular-nums} img{max-width:100%} /* ---------------------------------------------------------------- a11y */ .visually-hidden{ position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden; clip:rect(0,0,0,0);white-space:nowrap;border:0; } .skip-link{ position:absolute;inset-inline-start:8px;inset-block-start:-48px;z-index:200; background:var(--surface);color:var(--ink);padding:10px 16px;border-radius:var(--r-sm); box-shadow:var(--shadow);transition:inset-block-start var(--fast) var(--ease); } .skip-link:focus{inset-block-start:8px} :focus{outline:none} a:focus-visible,button:focus-visible,.btn:focus-visible, .input:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible, .lang-opt:focus-visible{ outline:2px solid var(--focus);outline-offset:2px;border-radius:var(--r-sm); } @media (prefers-reduced-motion: reduce){ *,*::before,*::after{ animation-duration:.001ms!important;animation-iteration-count:1!important; transition-duration:.001ms!important;scroll-behavior:auto!important; } } /* ---------------------------------------------------------------- shell */ .app-header{ display:flex;align-items:center;justify-content:space-between;gap:12px; flex-wrap:wrap;padding-block:12px;padding-inline:16px; background:var(--surface);border-block-end:1px solid var(--line); position:sticky;inset-block-start:0;z-index:50; } .brand{font-weight:800;font-size:17px;color:var(--brand-3)} .app-nav{display:flex;gap:6px;align-items:center;flex:1 1 auto} .app-nav a{ padding:8px 12px;border-radius:var(--r-sm);color:var(--muted);text-decoration:none; font-weight:600;min-height:44px;display:inline-flex;align-items:center; } .app-nav a:hover{background:var(--surface-2);color:var(--ink)} .header-account{display:flex;align-items:center;gap:10px;flex-wrap:wrap} .account-name{color:var(--muted);font-size:13px} .lang-toggle{ display:inline-flex;border:1px solid var(--line-strong);border-radius:var(--r-pill); padding:3px;background:var(--surface-2);gap:2px; } .lang-toggle.on-dark{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.35)} .lang-opt{ padding:6px 12px;border-radius:var(--r-pill);color:var(--muted);text-decoration:none; font-size:12px;font-weight:700;letter-spacing:.02em;min-height:32px;display:inline-flex;align-items:center; } .lang-toggle.on-dark .lang-opt{color:rgba(255,255,255,.75)} .lang-opt.is-on{background:var(--brand);color:#fff} .app-main{padding:20px 16px 48px;max-width:960px;margin-inline:auto;width:100%} /* ---------------------------------------------------------------- flash */ .flash-region{display:grid;gap:8px;margin-block-end:16px} .flash{ margin:0;padding:10px 14px;border-radius:var(--r-sm);font-size:13px; border:1px solid var(--line-strong);background:var(--surface-2);color:var(--ink); } .flash-error{background:var(--neg-bg);color:var(--neg-ink);border-color:var(--neg)} .flash-success{background:var(--surface-2);color:var(--ink);border-color:var(--brand)} .flash-warning{background:var(--warn-bg);color:var(--warn-ink);border-color:var(--warn)} /* ---------------------------------------------------------------- forms */ .field{display:grid;gap:6px;margin-block-end:16px} .field label{font-size:13px;font-weight:600;color:var(--muted)} .input,input,select,textarea{ font:inherit;font-size:16px; /* never smaller: iOS zooms the viewport below 16px */ padding:12px 14px;border-radius:var(--r-sm);border:1px solid var(--line-strong); background:var(--surface);color:var(--ink);min-height:44px;width:100%; } .input::placeholder,input::placeholder{color:var(--muted)} .input:focus,input:focus,select:focus,textarea:focus{border-color:var(--brand)} .btn{ display:inline-flex;align-items:center;justify-content:center;gap:8px; min-height:44px;padding:10px 18px;border-radius:var(--r-sm);border:1px solid transparent; font-weight:700;font-size:15px;text-decoration:none;cursor:pointer; transition:background var(--fast) var(--ease),border-color var(--fast) var(--ease); } .btn-primary{background:var(--brand-3);color:#fff} .btn-primary:hover{background:var(--brand-2)} .btn-ghost{background:transparent;border-color:var(--line-strong);color:var(--ink)} .btn-ghost:hover{background:var(--surface-2)} .btn-sm{min-height:36px;padding:6px 12px;font-size:13px} .card{ background:var(--surface);border:1px solid var(--line);border-radius:var(--r); padding:24px;box-shadow:var(--shadow); } .form-card{max-width:420px;margin-inline:auto} .form-card h1{font-size:20px} .notice{color:var(--muted);font-size:13px;margin-block-end:20px} .stacked-form{display:block} /* ---------------------------------------------------------------- login */ .login-page .app-main{padding:0} .floating-lang-toggle{ position:fixed;inset-block-start:16px;inset-inline-end:16px;z-index:60; } .login-shell{ min-height:100vh;display:grid;place-items:center;padding:28px; background:linear-gradient(150deg,var(--brand-3) 0%,var(--brand-2) 60%,var(--brand) 100%); } .login-card{ width:min(400px,100%);background:var(--surface);border-radius:var(--r); padding:32px 26px;box-shadow:var(--shadow);text-align:center; } .login-brandmark{ display:inline-flex;align-items:center;justify-content:center; min-width:44px;height:44px;padding-inline:14px;border-radius:var(--r-pill); background:var(--surface-2);color:var(--brand-3);font-weight:800;margin-block-end:16px; } .login-card h1{font-size:22px;margin-block-end:4px} .login-tagline{color:var(--muted);font-size:13px;margin-block-end:24px} .login-form{text-align:start} .login-submit{width:100%;margin-block-start:4px} /* ------------------------------------------------------- holder screen */ .holder-header{ position:sticky;inset-block-start:0;z-index:40; background:var(--surface);border:1px solid var(--line);border-radius:var(--r); padding:18px 20px;margin-block-end:20px;box-shadow:var(--shadow); } .holder-id{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-block-end:12px} .holder-code{ font-size:12px;font-weight:700;color:var(--muted);background:var(--surface-2); border:1px solid var(--line);border-radius:var(--r-sm);padding:3px 8px; } .holder-name{font-size:19px;margin:0} .balance-row{display:flex;flex-wrap:wrap;gap:10px;margin-block-end:10px} .balance-pill{ flex:1 1 160px;background:var(--surface-2);border:1px solid var(--line); border-radius:var(--r-sm);padding:12px 14px;display:flex;flex-direction:column;gap:4px; } .balance-pill.is-negative{background:var(--neg-bg);border-color:var(--neg)} .balance-figure{font-size:24px;font-weight:800;color:var(--ink)} .balance-pill.is-negative .balance-figure{color:var(--neg-ink)} .neg-tag{ align-self:flex-start;font-size:10px;font-weight:800;letter-spacing:.03em; text-transform:uppercase;color:#fff;background:var(--neg-ink); border-radius:var(--r-sm);padding:2px 7px; } .as-of{color:var(--muted);font-size:12px;margin-block-end:2px} .backup-note{color:var(--muted)} .data-age-notice{color:var(--muted);font-size:12px;font-style:italic} /* -------------------------------------------------------------- tables */ .page-head{margin-block-end:20px} .table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)} .ledger-table{width:100%;border-collapse:collapse;font-size:13px;min-width:560px} .ledger-table th,.ledger-table td{ padding:11px 14px;text-align:start;border-block-end:1px solid var(--line); vertical-align:top;white-space:nowrap; } .ledger-table td:nth-child(2),.ledger-table td:nth-child(3){white-space:normal} .ledger-table thead th{ background:var(--surface-2);color:var(--muted);font-size:11px;text-transform:uppercase; letter-spacing:.04em;position:sticky;inset-block-start:0; } .ledger-table tbody tr:last-child td{border-block-end:none} .ledger-table tbody tr:hover{background:var(--surface-2)} .ledger-table td.num,.ledger-table th.num{text-align:end} .ledger-table td.num.is-negative{color:var(--neg-ink)} .ledger-table td.num .neg-tag{margin-inline-end:6px} .holders-table td:last-child{text-align:end} .empty-state{ color:var(--muted);text-align:center;padding:32px 16px;border:1px dashed var(--line-strong); border-radius:var(--r);background:var(--surface); } /* ---------------------------------------------------------------- misc */ .change-password-page .app-main{padding-block-start:40px} /* --------------------------------------------------- phone-first (≥360) */ @media (pointer: coarse){ html{-webkit-tap-highlight-color:transparent} a,button,.btn,.input,input,select,textarea,.lang-opt{touch-action:manipulation} } @media (max-width:700px){ .app-header{padding-inline:12px} .app-main{padding:16px 12px 40px} .balance-row{flex-direction:column} .balance-pill{flex:1 1 auto} .login-shell{padding:16px} .login-card{padding:26px 18px} } @media (max-width:400px){ .holder-header{padding:14px} .holder-name{font-size:17px} .balance-figure{font-size:21px} } /* ---- Notification bell (Phase 4) - mounted from base.html on every signed-in page; _notify.html markup, notify.js behaviour. Same tokens as the rest of the shell; the badge reuses the --neg family so an unread count reads as "attention", not as an error. ---- */ .sr-only{ position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden; clip:rect(0,0,0,0);white-space:nowrap;border:0; } .notify{position:relative;display:inline-flex} .notify-bell{ position:relative;display:inline-flex;align-items:center;justify-content:center; width:38px;height:38px;border:1px solid var(--line);border-radius:var(--r-pill); background:var(--surface);color:var(--ink);cursor:pointer; transition:background var(--fast) var(--ease),border-color var(--fast) var(--ease); } .notify-bell:hover{background:var(--surface-2);border-color:var(--line-strong)} .notify-bell:focus-visible{outline:2px solid var(--focus);outline-offset:2px} .notify-bell[aria-expanded="true"]{background:var(--surface-2);border-color:var(--brand-2)} .notify-bell-icon{display:block} .notify-badge{ position:absolute;top:-4px;inset-inline-end:-4px;min-width:18px;height:18px; padding:0 5px;border-radius:var(--r-pill);background:var(--neg);color:#fff; font-size:11px;font-weight:700;line-height:18px;text-align:center; font-variant-numeric:tabular-nums;box-shadow:0 0 0 2px var(--surface); } .notify-dropdown{ position:absolute;top:calc(100% + 8px);inset-inline-end:0;z-index:40; width:min(360px,calc(100vw - 24px));max-height:70vh;overflow:auto; background:var(--surface);border:1px solid var(--line);border-radius:var(--r); box-shadow:var(--shadow); } .notify-dropdown-header{ padding:10px 14px;border-block-end:1px solid var(--line); font-size:13px;font-weight:700;color:var(--muted); } .notify-list{list-style:none;margin:0;padding:6px 0} .notify-item{ display:flex;flex-direction:column;gap:3px;padding:10px 14px;cursor:pointer; border-inline-start:3px solid transparent; } .notify-item:hover,.notify-item:focus-visible{background:var(--surface-2);outline:none} .notify-item.is-unread{border-inline-start-color:var(--brand);background:var(--surface-2)} .notify-item.is-unread .notify-item-message{font-weight:700} .notify-item-message{font-size:14px;line-height:1.4;overflow-wrap:anywhere} .notify-item-time{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums} .notify-empty{padding:16px 14px;font-size:13px;color:var(--muted);text-align:center} @media (max-width:700px){ .notify-dropdown{position:fixed;top:60px;inset-inline:12px;width:auto} }