/* Archivo and IBM Plex Sans Arabic (SIL Open Font Licence), served from the app so pages need no network */
@font-face{font-family:'Archivo';font-style:normal;font-weight:400 800;font-display:swap;src:url(Archivo-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Archivo';font-style:normal;font-weight:400 800;font-display:swap;src:url(Archivo-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:400;font-display:swap;src:url(IBMPlexSansArabic-400-arabic.woff2) format('woff2');unicode-range:U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:600;font-display:swap;src:url(IBMPlexSansArabic-600-arabic.woff2) format('woff2');unicode-range:U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:700;font-display:swap;src:url(IBMPlexSansArabic-700-arabic.woff2) format('woff2');unicode-range:U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1}

/* Shared by the fee apps (Fees, Collections, Reconciliation, Next year) and GPIS Access.
   Look: Omar's "Modernist" design system (claude.ai/design, 14 October 2026). Flat and architectural, set in Archivo
   (Arabic in IBM Plex Sans Arabic), ink on a light ground with one red accent, square corners, strong 2px rules,
   everything flush left. Two deliberate departures, kept from Omar's own requests: each card carries a colour band so
   tables side by side stay distinguishable (14 October), and status keeps a green for money that is settled.
   Fonts are served from this folder: no page needs the network. */
:root{
  /* Modernist tokens (styles.css of the design system) */
  --color-bg:#f3f2f2; --color-surface:#eae9e9; --color-text:#201e1d; --color-accent:#ec3013;
  --color-divider:color-mix(in srgb,#201e1d 40%,transparent);
  --color-neutral-100:#f8f4f4; --color-neutral-200:#eae7e7; --color-neutral-300:#d7d3d3; --color-neutral-500:#9b9797;
  --color-neutral-700:#605d5d; --color-neutral-800:#444141; --color-neutral-900:#2d2b2b;
  --color-accent-100:#fff2ef; --color-accent-200:#ffe0d9; --color-accent-300:#ffc4b8; --color-accent-600:#dd2b0f;
  --color-accent-700:#ae1800; --color-accent-800:#7c1405;
  --font:"Archivo","IBM Plex Sans Arabic",system-ui,"Segoe UI",Arial,sans-serif;
  /* the apps' own names, mapped onto the tokens */
  --ink:var(--color-text); --muted:var(--color-neutral-700); --line:color-mix(in srgb,#201e1d 18%,transparent);
  --rule:var(--color-divider); --bg:#fbfafa; --panel:var(--color-surface); --page:var(--color-bg); --thbg:#fbfafa;
  --accent:var(--color-accent); --link:var(--color-accent-700); --key:var(--color-accent-100);
  --c1:#00693A; --c2:#2E3092; --c3:#0b6e7f; --c4:#8a5a00; --c5:#6a3d8f; --app:#00693A;
  --neg:var(--color-accent-700); --flag:var(--color-accent-800); --flagbg:var(--color-accent-100);
  --miss:var(--color-neutral-800); --missbg:var(--color-neutral-200);
  --ok:#1e5e33; --okbg:#e3efe6; --red:var(--color-accent-700); --redbg:var(--color-accent-100);
  --rail:430px; --hl:#E8590C;
}
*{box-sizing:border-box}
body{margin:0;color:var(--ink);background:var(--page);font:13px/1.45 var(--font);font-variant-numeric:tabular-nums}
h1,h2,h3,h4{font-family:var(--font);font-weight:800;margin:0;letter-spacing:-.01em}
a{color:var(--link);text-underline-offset:3px} button{font:inherit;cursor:pointer}
:focus{outline:none} :focus-visible{outline:2px solid var(--accent);outline-offset:2px}
::selection{background:color-mix(in srgb,var(--accent) 30%,transparent)}

/* ---- header: the Modernist nav bar; the app's own colour is the square before its name */
header{position:sticky;top:0;z-index:20;background:var(--color-bg);border-bottom:2px solid var(--ink);color:var(--ink)}
.bar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:14px;padding:8px 18px}
.bar .left{display:flex;align-items:center;gap:12px;min-width:0}
.bar .right{display:flex;align-items:center;gap:8px;justify-content:flex-end;min-width:0}
.brand{font-weight:800;font-size:17px;white-space:nowrap;display:flex;align-items:center;gap:10px;letter-spacing:-.01em}
.brand::before{content:"";width:14px;height:14px;background:var(--app);flex:none}
.brand span{font-weight:400;color:var(--muted)}
nav{display:flex;gap:2px;justify-self:center;flex-wrap:wrap;justify-content:center}
nav button{border:0;border-bottom:2px solid transparent;background:none;padding:6px 10px;border-radius:0;color:var(--ink);white-space:nowrap;font-weight:600}
nav button:hover{color:var(--accent)}
nav button.on{color:var(--accent);border-bottom-color:var(--accent)}
nav button.cfo{outline:1px dashed var(--color-neutral-500);outline-offset:-3px}
.who{display:flex;align-items:center;gap:8px;font-size:12px;white-space:nowrap}
.who .me{border-left:2px solid var(--ink);padding:1px 0 1px 8px;line-height:1.25;text-align:left}
.who .me small{display:block;color:var(--muted);font-size:10.5px}
.who a,.who select{color:var(--ink);border:1px solid var(--rule);border-radius:0;padding:4px 8px;text-decoration:none;background:transparent;font:inherit;font-size:12px;font-weight:600}
.who a:hover,.who select:hover{background:color-mix(in srgb,var(--ink) 7%,transparent)}
.testbar{background:var(--accent);color:#fff;font-weight:600;padding:3px 18px;font-size:12px}
.demobar{background:var(--ink);color:var(--color-bg);padding:3px 18px;font-size:11px}

main{padding:16px 18px 80px;margin-right:var(--rail)}
body.nopanel main{margin-right:0} body.nopanel #panel{display:none}
#panel{position:fixed;right:0;top:var(--headh,50px);bottom:0;width:var(--rail);border-left:2px solid var(--ink);background:var(--panel);overflow:auto;padding:14px}
#panel .empty{color:var(--muted);margin-top:40px}

/* ---- cards: flat, a strong rule on top in the card's colour, the heading in ink */
.card{border:0;border-top:4px solid var(--c1);border-radius:0;margin-bottom:16px;background:var(--bg);overflow:hidden}
.card>h2{padding:10px 14px 8px;font-size:12.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);background:none;
  border-bottom:2px solid var(--rule);display:flex;justify-content:space-between;align-items:center;gap:8px}
.card>.note{padding:8px 14px;color:var(--muted);border-bottom:1px solid var(--line);font-size:12px}
.note{color:var(--muted);font-size:12px}
.card .body{padding:10px 14px}
.wrap{overflow:auto}

/* ---- tables: the Modernist table, uppercase muted headings over a 2px rule */
table{border-collapse:collapse;font-variant-numeric:tabular-nums;width:100%}
th,td{padding:4px 8px;border-bottom:1px solid var(--line);text-align:left;white-space:nowrap;height:26px}
th{font-weight:600;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);background:var(--thbg);border-bottom:2px solid var(--rule);position:sticky;top:0;z-index:2}
td.n,th.n{text-align:right}
tr:hover td{background:color-mix(in srgb,var(--ink) 4%,transparent)} tr.sel td{background:var(--key)}
tr.tot td{font-weight:800;border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);background:var(--color-surface)}
.sub{color:var(--muted)} .neg{color:var(--neg)} .small{font-size:11px}
th.srt{cursor:pointer;user-select:none} th.srt:hover{color:var(--accent)}
tr.filt th{top:27px;padding-top:2px;border-bottom:1px solid var(--line)}
input.f{width:100%;padding:2px 5px;font-size:11px;border:1px solid var(--line);border-radius:0;color:var(--muted);background:var(--bg);text-transform:none;letter-spacing:0}
input.f.on{border-color:var(--accent);color:var(--ink);font-weight:600}
.grid-box{max-height:calc(100vh - 210px);overflow:auto}
td.click{cursor:pointer;color:var(--link)}

/* ---- forms and buttons: square, labels flush left, the primary a solid accent */
select,input[type=text],input[type=number],input[type=date],input[type=email],textarea{font:inherit;color:var(--ink);border:1px solid var(--rule);border-radius:0;padding:5px 8px;background:var(--color-surface);caret-color:var(--accent)}
select:hover,input[type=text]:hover,input[type=number]:hover,input[type=date]:hover,textarea:hover{border-color:color-mix(in srgb,var(--ink) 55%,transparent)}
input[type=number]{appearance:textfield}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--accent);outline-offset:0;border-color:var(--accent)}
.btn{display:inline-flex;align-items:center;justify-content:flex-start;gap:6px;text-align:left;border:1px solid var(--rule);background:transparent;color:var(--ink);border-radius:0;padding:6px 14px;font-weight:800}
.btn:hover{background:color-mix(in srgb,var(--ink) 7%,transparent)}
.btn:active{background:color-mix(in srgb,var(--ink) 14%,transparent)}
.btn.pri{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.pri:hover{background:var(--color-accent-600)} .btn.pri:active{background:var(--color-accent-700)}
.btn.warn{border-color:var(--accent);color:var(--color-accent-700)}
.btn.sm{padding:3px 9px;font-size:12px}
.btn:disabled{opacity:.45;cursor:not-allowed}

/* ---- tags (chips): square, tinted from the ramps */
.chip{display:inline-block;padding:1px 8px;border:0;border-radius:0;font-size:11px;letter-spacing:.02em;color:var(--color-neutral-800);background:var(--color-neutral-200);margin-right:4px;white-space:nowrap}
.chip.flag{color:var(--flag);background:var(--flagbg)}
.chip.miss{color:var(--miss);background:var(--missbg)}
.chip.ok{color:var(--ok);background:var(--okbg)}
.chip.red{color:#fff;background:var(--color-accent-700)}
.chip.navy{color:var(--color-bg);background:var(--ink)}

/* ---- KPI tiles: cells of the grid, a strong rule on top */
.kpis{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:0;margin-bottom:16px;border-top:2px solid var(--ink);border-left:1px solid var(--line)}
.kpi{border:0;border-right:1px solid var(--line);border-bottom:1px solid var(--line);border-top:4px solid transparent;border-radius:0;padding:10px 14px 12px;background:var(--bg)}
.kpi .l{font-size:10.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;font-weight:600}
.kpi .v{font-size:24px;font-weight:800;margin-top:2px;letter-spacing:-.02em}
.kpi .s{font-size:11px;color:var(--muted)}
.kpi.amber{border-top-color:var(--accent);background:var(--color-accent-100)} .kpi.red{border-top-color:var(--color-accent-700);background:var(--color-accent-100)}
.kpi.green{border-top-color:var(--ok);background:var(--okbg)}

/* ---- the week's checklist */
.check{display:flex;align-items:flex-start;gap:12px;padding:10px 14px;border-bottom:1px solid var(--line)}
.check:last-child{border-bottom:none}
.check .dot{width:22px;height:22px;border-radius:0;flex:none;display:flex;align-items:center;justify-content:center;font-weight:800;color:#fff;font-size:12px}
.dot.done{background:var(--ok)} .dot.todo{background:var(--accent)} .dot.bad{background:var(--color-accent-800)} .dot.info{background:var(--color-neutral-500)}
.check .t{flex:1} .check .t b{display:block;font-weight:800}

/* ---- the right-hand panel's sections: same language as the cards */
.psec{border:0;border-top:4px solid var(--c1);border-radius:0;background:var(--bg);margin-bottom:12px;overflow:hidden}
.psec>h3{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;padding:8px 10px 6px;border-bottom:2px solid var(--rule);color:var(--ink);background:none}
.psec .in{padding:8px 10px}
.psec.id{border-top-color:#2E3092} .psec.money{border-top-color:#00693A} .psec.hist{border-top-color:var(--color-neutral-700)}
.psec.flags{border-top-color:var(--accent)} .psec.stmt{border-top-color:#0b6e7f} .psec.ppl{border-top-color:#6a3d8f}
.four{display:grid;grid-template-columns:1fr 1fr;gap:0;border-top:1px solid var(--line);border-left:1px solid var(--line)}
.four div{border:0;border-right:1px solid var(--line);border-bottom:1px solid var(--line);border-radius:0;padding:6px 8px}
.four .l{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.four .v{font-size:16px;font-weight:800}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.form{display:grid;grid-template-columns:170px 1fr;gap:8px 12px;align-items:center}
.form label{color:var(--muted);font-size:12px}
.proofbox{border:2px dashed var(--rule);border-radius:0;min-height:430px;display:flex;align-items:center;justify-content:flex-start;color:var(--muted);background:var(--color-surface);padding:14px}
.proofbox.over{border-color:var(--accent);background:var(--key)}
.proofbox img{max-width:100%;max-height:600px}
.proofbox iframe{width:100%;height:600px;border:0}
.split{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:24px;background:var(--ink);color:var(--color-bg);padding:10px 16px;border-radius:0;border-left:6px solid var(--ok);z-index:99;max-width:70%;font-weight:600}
.toast.err{border-left-color:var(--accent)}
.hl{outline:4px solid var(--hl)!important;outline-offset:2px;box-shadow:0 0 0 6px rgba(232,89,12,.18)!important}
.bars{display:flex;align-items:flex-end;gap:2px;height:90px;padding:6px 0;border-bottom:2px solid var(--ink)}
.bars div{background:var(--ink);flex:1;min-width:14px;position:relative}
.bars div span{position:absolute;top:-15px;left:0;right:0;text-align:center;font-size:10px;color:var(--muted)}
.blbl{display:flex;gap:2px}.blbl div{flex:1;min-width:14px;text-align:center;font-size:9px;color:var(--muted)}
input.cell{width:100px;text-align:right;border:1px solid var(--rule);border-radius:0;padding:2px 5px;background:var(--bg);font-weight:600}
input.cell.changed{background:var(--color-accent-100);border-color:var(--accent)}
.state-held{color:var(--color-accent-700);font-weight:600} .state-late{color:var(--accent);font-weight:600} .state-ok{color:var(--ok)}
.fb{position:fixed;right:calc(var(--rail) + 14px);bottom:14px;z-index:30}
body.nopanel .fb{right:14px}

/* coloured bands: each card on a page takes the next colour, so tables side by side read as separate blocks */
.card:nth-child(5n+2){border-top-color:var(--c2)} .card:nth-child(5n+3){border-top-color:var(--c3)}
.card:nth-child(5n+4){border-top-color:var(--c4)} .card:nth-child(5n+5){border-top-color:var(--c5)}
.card:has(>h2.h1){border-top-color:var(--c1)!important} .card:has(>h2.h2){border-top-color:var(--c2)!important} .card:has(>h2.h3){border-top-color:var(--c3)!important}
.card:has(>h2.h4){border-top-color:var(--c4)!important} .card:has(>h2.h5){border-top-color:var(--c5)!important}
.card>h2 .sub{color:var(--muted);font-weight:400;text-transform:none;letter-spacing:0}
.card>h2 .btn{text-transform:none;letter-spacing:0} .card>h2 select{text-transform:none;letter-spacing:0;font-weight:600}
.card>h2 .chip{text-transform:none}
.card .body h3,.card h4.sec{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--ink);margin:12px 0 4px;padding-bottom:3px;border-bottom:2px solid var(--rule)}
/* the verbatim statement text */
.verb{font-family:"IBM Plex Sans Arabic","Archivo",Tahoma,Arial,sans-serif;font-size:13.5px;line-height:1.6;background:var(--color-surface);border:0;border-left:4px solid var(--ink);border-radius:0;padding:6px 10px;white-space:pre-wrap;unicode-bidi:plaintext}
td .vb{border-bottom:1px dotted var(--color-neutral-500);cursor:help}
#tip{position:fixed;z-index:90;max-width:560px;pointer-events:none;box-shadow:0 12px 32px color-mix(in srgb,#2d2b2b 22%,transparent);display:none}
.tbls{display:grid;grid-template-columns:repeat(auto-fit,minmax(420px,1fr));gap:16px}

/* ---- right to left (Arabic): the side panel moves to the left, columns mirror, numbers align to the end */
.langbtn{font-weight:800}
html[dir=rtl] body{font-family:"IBM Plex Sans Arabic","Archivo",system-ui,Tahoma,sans-serif}
html[dir=rtl] main{margin-right:0;margin-left:var(--rail)} html[dir=rtl] body.nopanel main{margin-left:0}
html[dir=rtl] #panel{right:auto;left:0;border-left:0;border-right:2px solid var(--ink)}
html[dir=rtl] th,html[dir=rtl] td{text-align:right} html[dir=rtl] td.n,html[dir=rtl] th.n{text-align:left}
html[dir=rtl] .btn{text-align:right}
html[dir=rtl] .kpis{border-left:0;border-right:1px solid var(--line)} html[dir=rtl] .kpi{border-right:0;border-left:1px solid var(--line)}
html[dir=rtl] .four{border-left:0;border-right:1px solid var(--line)} html[dir=rtl] .four div{border-right:0;border-left:1px solid var(--line)}
html[dir=rtl] .chip{margin-right:0;margin-left:4px} html[dir=rtl] .who .me{text-align:right;border-left:0;border-right:2px solid var(--ink);padding:1px 8px 1px 0}
html[dir=rtl] .card>h2,html[dir=rtl] .kpi .l,html[dir=rtl] .psec>h3,html[dir=rtl] th,html[dir=rtl] .four .l{letter-spacing:0}
html[dir=rtl] .verb{border-left:0;border-right:4px solid var(--ink)}
html[dir=rtl] .toast{border-left:0;border-right:6px solid var(--ok)} html[dir=rtl] .toast.err{border-right-color:var(--accent)}
html[dir=rtl] .fb{right:auto;left:calc(var(--rail) + 14px)} html[dir=rtl] body.nopanel .fb{left:14px}
html[dir=rtl] input.cell{text-align:left}

/* bank narration wrapped on 2 or 3 lines (the toggle in the header): narrower columns, more of them on a full HD screen */
body.narr-2 td:has(.vb),body.narr-3 td:has(.vb){white-space:normal;min-width:220px;max-width:320px;height:auto}
body.narr-2 td .vb,body.narr-3 td .vb{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;line-height:1.3}
body.narr-2 td .vb{-webkit-line-clamp:2;line-clamp:2} body.narr-3 td .vb{-webkit-line-clamp:3;line-clamp:3}
#narr{display:inline-flex;flex-wrap:nowrap;white-space:nowrap;gap:2px;align-items:center;font-size:11px} #narr .btn{padding:0 5px;min-width:20px;line-height:18px}
body.narr-2 th[data-k="narr"],body.narr-3 th[data-k="narr"]{width:300px!important}

/* a long header (many menus, the narration toggle): the email under the name gives way first */
@media (max-width:2200px){.who .me small{display:none}}
.who .me{max-width:200px;overflow:hidden;text-overflow:ellipsis}

/* one line: a long narration is cut at a fixed width (hover shows the statement's words), so the actions stay on a full HD screen */
body.narr-1 td:has(.vb){max-width:420px;overflow:hidden;text-overflow:ellipsis}