:root{ --blue-800:#0F2270; --blue-700:#142A8F; --blue-600:#1B33B8; --blue-500:#2E49D6; --blue-400:#5B7BFF; --blue-100:#DEE4FB; --blue-050:#EEF1FD; --gold:#FDC00F; --gold-dim:#C99806; /* GGO gold is the accent. On a light ground the bright gold cannot carry text (1.65:1), so text and links use the deep gold; the bright gold is kept for fills, which take near-black text. Checked: 5.54:1 and 10.78:1. */ --accent:#8A6100; --accent-solid:#FDC00F; --accent-on:#14181F; --accent-soft:#FFF6DC; --accent-line:#E3C271; --accent-hov:#E9B00D; --ink:#0E1327; --ink-2:#3A4260; --ink-3:#6C7492; --ground:#F3F5FB; --surface:#FFFFFF; --surface-2:#F8F9FE; --line:#DFE3F0; --line-strong:#C6CCE2; --rail-bg:#101B4D; --rail-fg:#AEB9E6; --rail-fg-strong:#FFFFFF; --rail-line:#22307A; --ok:#0B7A52; --ok-bg:#E4F4ED; --warn:#A96908; --warn-bg:#FDF1DC; --crit:#BC2D24; --crit-bg:#FBE7E5; --info:#1B33B8; --info-bg:#E7EBFC; /* chart series (validated for contrast and colour-blind separation) */ --chart-1:#8A6100; --chart-2:#2B44D0; --shadow:0 1px 2px rgba(14,19,39,.06),0 4px 16px rgba(14,19,39,.05); --shadow-lg:0 8px 32px rgba(14,19,39,.14); --r:10px; --r-sm:6px; --sans:system-ui,-apple-system,"Segoe UI","Helvetica Neue",Arial,sans-serif; --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace; } @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){ --blue-800:#0A102E; --blue-700:#16215C; --blue-600:#3C57E0; --blue-500:#5B7BFF; --blue-400:#8AA0FF; --blue-100:#222F63; --blue-050:#1A2450; --ink:#EAEDF8; --ink-2:#B4BCD8; --ink-3:#848DAE; --ground:#0A0E1F; --surface:#141A31; --surface-2:#1A2039; --line:#262E4C; --line-strong:#38416A; --rail-bg:#0B1233; --rail-fg:#8C99CE; --rail-fg-strong:#FFFFFF; --rail-line:#1D2856; --ok:#4FC79A; --ok-bg:#10352A; --warn:#E2A63C; --warn-bg:#3A2C12; --crit:#F0796E; --crit-bg:#3D1D1A; --info:#8AA0FF; --info-bg:#1B2350; --chart-1:#BC8A16; --chart-2:#6E88EF; --accent:#FDC00F; --accent-solid:#FDC00F; --accent-on:#14181F; --accent-soft:#33280A; --accent-line:#5A4712; --accent-hov:#FFD34A; --shadow:0 1px 2px rgba(0,0,0,.4),0 4px 16px rgba(0,0,0,.3); --shadow-lg:0 8px 32px rgba(0,0,0,.5); } } :root[data-theme="dark"]{ --blue-800:#0A102E; --blue-700:#16215C; --blue-600:#3C57E0; --blue-500:#5B7BFF; --blue-400:#8AA0FF; --blue-100:#222F63; --blue-050:#1A2450; --ink:#EAEDF8; --ink-2:#B4BCD8; --ink-3:#848DAE; --ground:#0A0E1F; --surface:#141A31; --surface-2:#1A2039; --line:#262E4C; --line-strong:#38416A; --rail-bg:#0B1233; --rail-fg:#8C99CE; --rail-fg-strong:#FFFFFF; --rail-line:#1D2856; --ok:#4FC79A; --ok-bg:#10352A; --warn:#E2A63C; --warn-bg:#3A2C12; --crit:#F0796E; --crit-bg:#3D1D1A; --info:#8AA0FF; --info-bg:#1B2350; --chart-1:#BC8A16; --chart-2:#6E88EF; --accent:#FDC00F; --accent-solid:#FDC00F; --accent-on:#14181F; --accent-soft:#33280A; --accent-line:#5A4712; --accent-hov:#FFD34A; --shadow:0 1px 2px rgba(0,0,0,.4),0 4px 16px rgba(0,0,0,.3); --shadow-lg:0 8px 32px rgba(0,0,0,.5); } /* ---------- ECG: the same portal wearing Euphrates Consulting Group's colours The accent tokens carry the whole interface, so overriding them here is the entire re-skin. data-brand is stamped onto by the server, before the first paint, so nothing flashes in the wrong colour. The one that is easy to get wrong is --accent-on, the text that sits on the solid accent. GGO's gold needs near-black on top of it; ECG's navy needs white. Swap only the accent hex and every button label becomes dark text on dark navy. ---------- */ :root[data-brand="ecg"]{ --gold:#194B7E; --gold-dim:#133A61; --accent:#133A61; --accent-solid:#194B7E; --accent-on:#FFFFFF; --accent-soft:#EDF2F7; --accent-line:#B7C4D3; --accent-hov:#2563A8; --chart-1:#194B7E; --chart-2:#6BA3D6; } :root[data-brand="ecg"][data-theme="dark"]{ --gold:#6BA3D6; --gold-dim:#2563A8; --accent:#6BA3D6; --accent-solid:#2563A8; --accent-on:#FFFFFF; --accent-soft:#152A3F; --accent-line:#234A72; --accent-hov:#8FBBE3; } @media (prefers-color-scheme: dark){ :root[data-brand="ecg"]:not([data-theme="light"]){ --gold:#6BA3D6; --gold-dim:#2563A8; --accent:#6BA3D6; --accent-solid:#2563A8; --accent-on:#FFFFFF; --accent-soft:#152A3F; --accent-line:#234A72; --accent-hov:#8FBBE3; } } *{box-sizing:border-box} body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--sans);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased} h1,h2,h3,h4{margin:0;text-wrap:balance;font-weight:650;letter-spacing:-.01em} a{color:inherit} button{font:inherit;color:inherit;cursor:pointer} :focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:3px} @media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}} /* ---------- shell: top navigation ---------- */ .app{display:flex;flex-direction:column;min-height:100vh} .topbar{position:sticky;top:0;z-index:30;background:var(--rail-bg);border-bottom:1px solid var(--rail-line); display:flex;align-items:center;gap:22px;padding:0 28px;height:118px;flex:none} .brand{display:flex;align-items:center;gap:15px;flex:none} .brand svg{flex:none;display:block} .brand-tx{line-height:1} .brand-tx b{display:block;color:#fff;font-style:italic;font-weight:800;font-size:26px;letter-spacing:-.035em} .brand-tx span{display:block;color:var(--gold);font-size:11px;letter-spacing:.17em;margin-top:5px} .brand-img{flex:none;display:block;object-fit:contain} .brand.light .brand-tx span{color:var(--gold-dim)} .brand-tx span.al{color:#3ABE7C;letter-spacing:0;font-size:15px;margin-top:2px;font-weight:600} .brand.light .brand-tx span.al{color:#117840} .search{flex:1;min-width:0;max-width:440px;position:relative;margin-inline-start:10px} .search input{width:100%;padding:11px 14px 11px 38px;border:1px solid var(--rail-line);border-radius:var(--r-sm); background:rgba(255,255,255,.06);color:#fff;font-size:14px} .search input::placeholder{color:#7C88C4} .search .mag{position:absolute;inset-inline-start:13px;top:50%;transform:translateY(-50%);color:#7C88C4;font-size:14px} .tb-sp{flex:1} .topbar .icbtn{background:none;border:1px solid transparent;border-radius:var(--r-sm);padding:13px 17px;color:#AEB9E6;font-size:22px} .topbar .icbtn svg{width:24px;height:24px} .topbar .icbtn:hover{background:rgba(255,255,255,.09);color:#fff} .usrwrap{position:relative;flex:none;padding-inline-start:20px;border-inline-start:1px solid var(--rail-line)} .usr{display:flex;align-items:center;gap:9px;flex:none;background:none;border:1px solid transparent; border-radius:var(--r-sm);padding:4px 7px;cursor:pointer} .usr:hover{background:rgba(255,255,255,.09)} .usr .cav{display:inline-grid;place-items:center;color:#8C99CE} .usr[aria-expanded="true"] .cav{transform:rotate(180deg)} .av{width:48px;height:48px;border-radius:50%;background:var(--gold);color:#101B4D;display:grid;place-items:center; font-size:11px;font-weight:800;flex:none} .usr-tx{text-align:start} .usr-tx b{display:block;font-size:15px;font-weight:650;line-height:1.3;color:#fff;white-space:nowrap} .usr-tx span{display:block;font-size:12px;color:#8C99CE;line-height:1.3;white-space:nowrap} .usrmenu{position:absolute;top:calc(100% + 8px);inset-inline-end:0;min-width:210px;background:var(--surface); border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-lg);padding:6px;z-index:70} .usrmenu .um-h{padding:7px 10px 9px;border-bottom:1px solid var(--line);margin-bottom:5px} .usrmenu .um-h b{display:block;font-size:13px} .usrmenu .um-h span{display:block;font-size:11px;color:var(--ink-3);margin-top:1px} .usrmenu a,.usrmenu button{display:flex;align-items:center;gap:9px;width:100%;padding:8px 10px;background:none; border:none;border-radius:var(--r-sm);font-size:12.5px;color:var(--ink);text-decoration:none;text-align:start;cursor:pointer} .usrmenu a:hover,.usrmenu button:hover{background:var(--surface-2)} /* menu bar with dropdowns */ .menubar{position:sticky;top:118px;z-index:29;background:var(--surface);border-bottom:1px solid var(--line); display:flex;align-items:stretch;gap:0;padding:0 16px;flex:none;min-height:46px} .mgroup{position:relative;display:flex;align-items:stretch} .mtrig{display:inline-flex;align-items:center;gap:5px;padding:0 9px;background:none;border:none; color:var(--ink-2);font-size:13px;font-weight:600;border-bottom:2px solid transparent;white-space:nowrap; cursor:pointer;transition:color .12s,background .12s} .mtrig:hover{color:var(--ink);background:var(--surface-2)} .mtrig .cav{font-size:8px;opacity:.55;transition:transform .15s} .mgroup.open .mtrig{color:var(--accent);background:var(--surface-2)} .mgroup.open .mtrig .cav{transform:rotate(180deg)} .mtrig.active{color:var(--accent);border-bottom-color:var(--accent-solid)} .mdrop{position:absolute;top:100%;inset-inline-start:0;min-width:246px;background:var(--surface);border:1px solid var(--line); border-radius:0 0 var(--r) var(--r);box-shadow:var(--shadow-lg);padding:6px;display:none;z-index:40} .mgroup.open .mdrop{display:block;animation:mdin .13s ease} @keyframes mdin{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}} .mdrop a{display:flex;align-items:flex-start;gap:10px;padding:8px 10px;border-radius:var(--r-sm); text-decoration:none;color:var(--ink);font-size:13px} .mdrop a:hover{background:var(--surface-2)} .mdrop a.on{background:var(--accent-soft);color:var(--accent);font-weight:650} .mdrop a .ic{font-size:13px;opacity:.7;width:16px;text-align:center;flex:none;margin-top:1px} .mdrop a .lbl{display:block;line-height:1.3} .mdrop a .sub{display:block;font-size:11px;color:var(--ink-3);margin-top:1px;font-weight:400} .mdrop .sep{height:1px;background:var(--line);margin:5px 8px} .mdrop .hd{font-size:8.5px;letter-spacing:.13em;color:var(--ink-3);font-weight:800;padding:8px 10px 4px} /* application sites */ .appgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px} .appcard{display:block;text-decoration:none;background:var(--surface);border:1px solid var(--line); border-radius:var(--r);padding:16px;box-shadow:var(--shadow);transition:transform .12s,border-color .12s} .appcard:hover{transform:translateY(-2px);border-color:var(--accent-line)} .appcard .ai{width:38px;height:38px;border-radius:10px;background:var(--accent-soft);color:var(--accent); display:grid;place-items:center;font-size:17px;margin-bottom:11px} .appcard h4{font-size:14.5px;margin-bottom:4px} .appcard p{margin:0;font-size:11.5px;color:var(--ink-3);line-height:1.45} .appcard .af{display:flex;align-items:center;gap:8px;margin-top:12px;flex-wrap:wrap} .paybox{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:18px 20px;box-shadow:var(--shadow)} .paybox .amt{font-family:var(--mono);font-size:30px;font-weight:600;letter-spacing:-.02em;margin:4px 0} .paybox .per{font-size:12px;color:var(--ink-3)} .privnote{font-size:11.5px;color:var(--ink-3);margin-top:10px;display:flex;gap:7px;align-items:flex-start} .main{display:flex;flex-direction:column;min-width:0;flex:1} .view{padding:20px 24px;width:100%;max-width:none;flex:1} .view.wide{padding:0} .foot{padding:14px 24px 26px;color:var(--ink-3);font-size:11.5px} /* ---------- primitives ---------- */ .vh{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap;margin-bottom:18px} .vh h1{font-size:22px} .vh p{margin:3px 0 0;color:var(--ink-3);font-size:13px} .vh .sp{flex:1} .chip{display:inline-flex;align-items:center;gap:5px;padding:2px 8px;border-radius:99px;font-size:10.5px;font-weight:650;letter-spacing:.03em;border:1px solid transparent;white-space:nowrap} .c-ok{background:var(--ok-bg);color:var(--ok)} .c-warn{background:var(--warn-bg);color:var(--warn)} .c-crit{background:var(--crit-bg);color:var(--crit)} .c-info{background:var(--info-bg);color:var(--info)} .c-mute{background:var(--surface-2);color:var(--ink-3);border-color:var(--line)} .c-live{background:var(--ok-bg);color:var(--ok)} .btn{background:var(--accent-solid);color:var(--accent-on);border:none;padding:7px 14px;border-radius:var(--r-sm);font-size:12.5px;font-weight:600} .btn:hover{background:var(--accent-hov)} .btn.gh{background:transparent;color:var(--ink-2);border:1px solid var(--line-strong)} .btn.gh:hover{background:var(--surface-2)} .card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden} .card-h{display:flex;align-items:center;gap:10px;padding:15px 18px;border-bottom:1px solid var(--line)} .card-h h3{font-size:14.5px;font-weight:600} .card-h .sp{flex:1} .card-b{padding:15px} .grid{display:grid;gap:14px} .muted{color:var(--ink-3)} .mono{font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap} table{width:100%;border-collapse:collapse;font-size:13px} th{text-align:start;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);font-weight:600;padding:10px 12px;border-bottom:1px solid var(--line);background:var(--surface-2);position:sticky;top:0;white-space:nowrap} td{padding:9px 12px;border-bottom:1px solid var(--line);vertical-align:middle} tbody tr:hover{background:var(--surface-2)} tbody tr:last-child td{border-bottom:none} .tw{overflow-x:auto} .num{font-family:var(--mono);font-variant-numeric:tabular-nums;text-align:end} /* ---------- KPI ---------- */ .kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;margin-bottom:16px} .kpi{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;box-shadow:var(--shadow);position:relative;overflow:hidden;container-type:inline-size} .kpi::after{content:"";position:absolute;inset-inline-start:0;top:0;bottom:0;width:3px;background:var(--accent-solid)} .kpi.g::after{background:var(--gold)} .kpi.w::after{background:var(--warn)} .kpi.o::after{background:var(--ok)} .kpi .lbl{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);font-weight:600} /* the big figure scales to its own card (container query), so a long amount never overruns a narrow card — bold on a wide card, smaller when cramped */ .kpi .val{font-family:var(--mono);font-size:clamp(16px,9.5cqi,28px);font-weight:600;letter-spacing:-.03em;margin:5px 0 2px;font-variant-numeric:tabular-nums} .kpi .sub{font-size:11.5px;color:var(--ink-3)} /* ---------- misc ---------- */ .tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin-bottom:16px;flex-wrap:wrap} .tabs button{background:none;border:none;padding:10px 14px;font-size:13.5px;color:var(--ink-2);border-bottom:2px solid transparent;font-weight:500} .tabs button:hover{color:var(--ink)} .tabs button.on{color:var(--accent);border-bottom-color:var(--accent-solid);font-weight:650} .filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px;align-items:center} select,.tin{padding:6px 9px;border:1px solid var(--line-strong);border-radius:var(--r-sm);background:var(--surface);color:var(--ink);font-size:12.5px;font-family:inherit} .bar{height:7px;border-radius:99px;background:var(--blue-100);overflow:hidden} .bar i{display:block;height:100%;background:var(--accent-solid);border-radius:99px} .brow{display:grid;grid-template-columns:170px 1fr 48px;gap:10px;align-items:center;padding:5px 0;font-size:12.5px} .tasks{display:flex;flex-direction:column} .task{display:flex;gap:12px;padding:12px 15px;border-bottom:1px solid var(--line);align-items:flex-start} .task:last-child{border-bottom:none} .task:hover{background:var(--surface-2)} .task .pri{width:3px;align-self:stretch;border-radius:2px;background:var(--line-strong);flex:none} .task.p1 .pri{background:var(--crit)} .task.p2 .pri{background:var(--warn)} .task.p3 .pri{background:var(--blue-400)} .task .bd{flex:1;min-width:0} .task .ti{font-weight:600;font-size:13px} .task .mt{font-size:11.5px;color:var(--ink-3);margin-top:2px} .mods{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px} .mod{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px;text-decoration:none;display:block;box-shadow:var(--shadow);transition:transform .12s,border-color .12s} .mod:hover{transform:translateY(-2px);border-color:var(--accent-line)} .mod .mi{width:32px;height:32px;border-radius:8px;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;font-size:15px;margin-bottom:9px} .mod h4{font-size:13.5px;margin-bottom:3px} .mod p{margin:0;font-size:11.5px;color:var(--ink-3);line-height:1.45} .mod .mf{margin-top:10px;display:flex;align-items:center;gap:6px} /* calendar */ .calbar{display:flex;align-items:center;gap:8px;margin-bottom:10px;flex-wrap:wrap} .calbar b{font-size:12.5px;min-width:132px;text-align:center} .calbar .icbtn{font-size:15px;line-height:1;padding:3px 9px;border:1px solid var(--line);border-radius:var(--r-sm)} .calbar input[type=date]{padding:4px 7px;font-size:11.5px} .cal-h{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;margin-bottom:6px} .cal-h span{font-size:9.5px;letter-spacing:.08em;color:var(--ink-3);text-align:center;font-weight:700} .cal-g{display:grid;grid-template-columns:repeat(7,1fr);gap:5px} .cd{position:relative;aspect-ratio:1;border:0;border-radius:9px;display:flex; align-items:flex-start;justify-content:center;padding-top:6px; background:color-mix(in srgb,var(--surface-2) 55%,transparent);overflow:hidden;transition:filter .12s} .cd:hover{filter:brightness(1.05)} .cd-n{font-size:10.5px;font-family:var(--mono);color:var(--ink-2);font-variant-numeric:tabular-nums;white-space:nowrap} .cd-b{position:absolute;inset-inline:6px;bottom:5px;height:5px;border-radius:3px;background:var(--sc)} .cd.wknd{background:color-mix(in srgb,var(--surface-2) 30%,transparent)} .cd.wknd .cd-n{color:var(--ink-3);opacity:.6} .cd.today{outline:2px solid var(--gold);outline-offset:-2px} .cd.today .cd-n{font-weight:700;color:var(--ink)} .cd.sel{box-shadow:0 0 0 2px var(--accent) inset} /* roster */ .rost{overflow:auto;max-height:60vh} .rtab{border-collapse:separate;border-spacing:0;font-size:12px} .rtab th,.rtab td{border-bottom:1px solid var(--line)} .rtab .stick{position:sticky;inset-inline-start:0;z-index:2;background:var(--surface);min-width:210px;max-width:210px; padding:6px 10px;border-inline-end:1px solid var(--line-strong)} .rtab thead .stick{z-index:4;background:var(--surface-2)} .rtab .stick b{display:block;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .rsub{display:block;font-size:10px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .rtab .mhead{font-size:9.5px;letter-spacing:.08em;text-align:start;padding:5px 8px;background:var(--surface-2); border-inline-start:1px solid var(--line-strong);position:sticky;top:0;z-index:3} .rtab .dhead{font-size:9px;font-family:var(--mono);text-align:center;padding:4px 0;min-width:15px; background:var(--surface-2);color:var(--ink-3);position:sticky;top:23px;z-index:3;letter-spacing:0} .rtab .dhead.wknd{color:var(--ink-3);opacity:.5} .rtab .dhead.today{color:var(--gold);font-weight:700} .rtab .rc{min-width:15px;height:26px;padding:0;background:var(--surface-2)} .rtab .rc.today{box-shadow:inset 1px 0 0 var(--gold),inset -1px 0 0 var(--gold)} .rtab tbody tr:hover .rc{filter:brightness(1.12)} .rtab tbody tr:hover .stick{background:var(--surface-2)} .kpi[style*="--k"]::after{background:var(--k)} .brk{word-break:break-all} /* org chart */ .chartwrap{overflow:auto;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r); padding:22px 22px 30px;max-height:calc(100vh - 300px);resize:vertical} /* full-bleed: as wide as the window, but only as tall as the tree needs */ .chartfull .chartwrap{max-height:calc(100vh - 210px);border-radius:0;border-left:none;border-right:none; border-bottom:1px solid var(--line)} .chartfull .vh{padding:14px 24px 0;margin-bottom:10px} .chartfull .filters{padding:0 24px} .chartfull .tabs{padding:0 24px;margin-bottom:10px} .chartfull .legend{padding:10px 24px 0} .chartfull .chartnote{padding:6px 24px 16px} .chartsize{position:relative} .chart{position:relative;transform-origin:0 0} .edges{position:absolute;left:0;top:0;overflow:visible} .edges path{fill:none;stroke:var(--line-strong);stroke-width:1.5} .nd{position:absolute;width:178px;height:64px;background:var(--surface);border:1px solid var(--line); border-radius:8px;padding:9px 11px 9px 14px;box-shadow:var(--shadow);cursor:pointer;user-select:none;transition:border-color .12s,box-shadow .12s} .nd:hover{border-color:var(--accent-line);box-shadow:var(--shadow-lg)} .nd-stripe{position:absolute;inset-inline-start:0;top:0;bottom:0;width:4px;background:var(--fc);border-start-start-radius:8px;border-end-start-radius:8px} .nd-nm{font-weight:650;font-size:12px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .nd-ti{font-size:10.5px;color:var(--ink-3);line-height:1.3;margin-top:3px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .nd-tg{position:absolute;left:50%;bottom:-11px;transform:translateX(-50%);min-width:23px;height:21px; border-radius:99px;border:1px solid var(--line-strong);background:var(--surface);color:var(--ink-2); font-size:10px;font-family:var(--mono);z-index:3;padding:0 7px;line-height:1;display:grid;place-items:center} .nd-tg:hover{border-color:var(--accent);color:var(--accent)} .nd-tg.shut{background:var(--accent-soft);border-color:var(--accent-line);color:var(--accent);font-weight:700} :root[data-theme="dark"] .nd-stripe{filter:brightness(1.5) saturate(1.1)} @media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .nd-stripe{filter:brightness(1.5) saturate(1.1)}} .legend{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:12px} .legend span{display:inline-flex;align-items:center;gap:6px;font-size:11px;color:var(--ink-3)} .legend i{width:10px;height:10px;border-radius:3px;display:block;flex:none} .fl{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--ink-3)} .zoom{display:inline-flex;align-items:center;gap:6px} .zoom .mono{font-size:11.5px;color:var(--ink-3);min-width:38px;text-align:center} .tree{font-size:13px} .tnode{border-inline-start:1px solid var(--line);margin-inline-start:11px;padding-inline-start:11px} .tnode:first-child{border-inline-start:none;margin-inline-start:0;padding-inline-start:0} .trow{display:flex;align-items:center;gap:8px;padding:4px 6px;border-radius:var(--r-sm)} .trow:hover{background:var(--surface-2)} .tg{width:17px;height:17px;border:1px solid var(--line-strong);border-radius:4px;background:var(--surface);color:var(--ink-3);display:grid;place-items:center;font-size:9px;flex:none;font-family:var(--mono)} .tg.leaf{border-style:dashed;opacity:.4;cursor:default} .tnm{font-weight:600} .ttl{color:var(--ink-3);font-size:12px} .tct{margin-inline-start:auto;font-family:var(--mono);font-size:10.5px;color:var(--ink-3);background:var(--surface-2);border:1px solid var(--line);padding:1px 6px;border-radius:99px} .drawer{position:fixed;top:0;inset-inline-end:0;width:430px;max-width:92vw;height:100vh;padding-bottom:0;background:var(--surface);border-inline-start:1px solid var(--line);box-shadow:var(--shadow-lg);z-index:40;overflow-y:auto;transform:translateX(100%);transition:transform .18s ease} .drawer.on{transform:none} .dh{padding:18px;border-bottom:1px solid var(--line);display:flex;gap:12px;align-items:flex-start} .dh .av{width:44px;height:44px;font-size:14px} .ds{padding:15px 18px;border-bottom:1px solid var(--line)} .ds h4{font-size:10px;letter-spacing:.1em;color:var(--ink-3);margin-bottom:9px} .kv{display:grid;grid-template-columns:104px 1fr;gap:5px 10px;font-size:12.5px} .kv dt{color:var(--ink-3)} .kv dd{margin:0;font-weight:550} .path{display:flex;flex-direction:column;gap:0} .path div{padding:4px 0 4px 16px;position:relative;font-size:12.5px} .path div::before{content:"";position:absolute;inset-inline-start:4px;top:0;bottom:0;width:1px;background:var(--line)} .path div::after{content:"";position:absolute;inset-inline-start:1px;top:7px;width:7px;height:7px;border-radius:50%;background:var(--line-strong)} .path div:last-child::before{bottom:50%} .path div:last-child::after{background:var(--gold)} .path div:last-child{font-weight:650} .matrix td:first-child{font-weight:600} .tick{color:var(--ok);font-weight:700} .cross{color:var(--ink-3);opacity:.5} /* the welcome gradient was removed — the dashboard now opens on the work itself */ .foot{padding:16px 22px 30px;color:var(--ink-3);font-size:11.5px;max-width:1500px} /* ---------- app additions ---------- */ .login-wrap{min-height:100vh;display:grid;place-items:center;background:var(--ground);padding:20px} .login{width:100%;max-width:380px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r); box-shadow:var(--shadow-lg);padding:26px} .login .brand{background:none;border:none;padding:0 0 18px;justify-content:center} .login h1{font-size:17px;margin-bottom:4px;text-align:center} .login p.sub{margin:0 0 18px;text-align:center;color:var(--ink-3);font-size:12.5px} .field{display:block;margin-bottom:12px} .field span{display:block;font-size:11px;letter-spacing:.06em;color:var(--ink-3);font-weight:700;margin-bottom:5px} .field input,.field select,.field textarea{width:100%;padding:9px 11px;border:1px solid var(--line-strong); border-radius:var(--r-sm);background:var(--surface);color:var(--ink);font-size:13.5px;font-family:inherit} .field textarea{min-height:78px;resize:vertical} .btn.wide{width:100%;padding:10px;font-size:13.5px} .err{background:var(--crit-bg);color:var(--crit);padding:9px 11px;border-radius:var(--r-sm);font-size:12.5px;margin-bottom:12px} .ok{background:var(--ok-bg);color:var(--ok);padding:9px 11px;border-radius:var(--r-sm);font-size:12.5px;margin-bottom:12px} .hint{font-size:11.5px;color:var(--ink-3);margin-top:14px;text-align:center;line-height:1.6} .modal-bg{position:fixed;inset:0;background:rgba(6,10,25,.55);z-index:60;display:grid;place-items:center;padding:20px} .modal{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-lg); width:100%;max-width:620px;max-height:88vh;overflow:auto} .modal.lg{max-width:1080px} .modal.fullscreen{position:fixed;inset:0;max-width:none;max-height:none;width:100vw;height:100vh;border-radius:0; display:flex;flex-direction:column} .modal.fullscreen .modal-b{flex:1;min-height:0;overflow:auto} .modal.fullscreen .rte{max-height:calc(100vh - 260px)} .modal.fullscreen .sheet-wrap{max-height:calc(100vh - 250px)} .modal.fullscreen #officeholder{height:calc(100vh - 190px)!important} .modal-h{display:flex;align-items:center;gap:10px;padding:15px 18px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--surface);z-index:2} .modal-h h3{font-size:15px}.modal-h .sp{flex:1} .modal-b{padding:18px} .modal-f{display:flex;gap:8px;justify-content:flex-end;padding:14px 18px;border-top:1px solid var(--line);position:sticky;bottom:0;background:var(--surface)} .tbar{display:flex;flex-wrap:wrap;gap:4px;padding:8px;border:1px solid var(--line);border-bottom:none; border-radius:var(--r-sm) var(--r-sm) 0 0;background:var(--surface-2)} .tbar button{background:var(--surface);border:1px solid var(--line);border-radius:4px;padding:4px 9px;font-size:12px;min-width:30px} .tbar button:hover{border-color:var(--blue-400);color:var(--blue-600)} .tbar select{padding:4px 6px;font-size:12px} .rte{border:1px solid var(--line);border-radius:0 0 var(--r-sm) var(--r-sm);padding:18px 20px;min-height:340px; background:var(--surface);font-size:14px;line-height:1.65;overflow:auto;max-height:56vh} .rte:focus{outline:none;border-color:var(--blue-400)} .rte h1{font-size:20px;margin:.6em 0 .3em}.rte h2{font-size:17px;margin:.6em 0 .3em}.rte h3{font-size:15px;margin:.6em 0 .3em} .rte p{margin:0 0 .7em}.rte ul,.rte ol{margin:0 0 .7em 1.3em} .rte table{border-collapse:collapse;margin:0 0 .8em}.rte td,.rte th{border:1px solid var(--line-strong);padding:5px 8px} .sheet-tabs{display:flex;gap:4px;margin-bottom:8px;flex-wrap:wrap} .sheet-tabs button{padding:4px 10px;font-size:12px;border:1px solid var(--line);background:var(--surface);border-radius:4px} .sheet-tabs button.on{background:var(--blue-600);color:#fff;border-color:var(--blue-600)} .sheet-wrap{overflow:auto;max-height:56vh;border:1px solid var(--line);border-radius:var(--r-sm)} table.sheet{border-collapse:collapse;font-size:12.5px;background:var(--surface)} table.sheet th{background:var(--surface-2);font-size:10px;padding:4px 6px;position:sticky;top:0;z-index:2; border:1px solid var(--line);text-align:center;min-width:34px} table.sheet td{border:1px solid var(--line);padding:0;min-width:96px} table.sheet td input{width:100%;border:none;background:transparent;color:var(--ink);padding:5px 7px;font:inherit;font-size:12.5px} table.sheet td input:focus{outline:2px solid var(--blue-600);outline-offset:-2px;background:var(--surface)} table.sheet td.rowhead{background:var(--surface-2);text-align:center;font-size:10px;color:var(--ink-3); font-family:var(--mono);min-width:34px;position:sticky;inset-inline-start:0} .stages{display:flex;flex-wrap:wrap;gap:0;margin:14px 0} .stage{flex:1;min-width:130px;padding:10px 12px;border:1px solid var(--line);background:var(--surface);position:relative} .stage:first-child{border-radius:var(--r-sm) 0 0 var(--r-sm)} .stage:last-child{border-radius:0 var(--r-sm) var(--r-sm) 0} .stage+.stage{border-inline-start:none} .stage.done{background:var(--ok-bg);border-color:var(--ok-bg)} .stage.cur{background:var(--accent-soft);border-color:var(--accent-line);box-shadow:inset 0 -3px 0 var(--accent-solid)} .stage .sn{font-size:9.5px;letter-spacing:.08em;color:var(--ink-3);font-weight:700} .stage .st{font-size:12.5px;font-weight:600;margin-top:3px;line-height:1.3} .stage .si{font-size:11px;color:var(--ink-3);margin-top:4px;line-height:1.4} .drop{border:2px dashed var(--line-strong);border-radius:var(--r);padding:26px;text-align:center;color:var(--ink-3); font-size:13px;background:var(--surface-2);cursor:pointer} .drop:hover,.drop.over{border-color:var(--blue-600);color:var(--blue-600);background:var(--blue-050)} .permgrid td select{padding:3px 5px;font-size:11.5px;min-width:88px} .permgrid th:first-child,.permgrid td:first-child{position:sticky;inset-inline-start:0;background:var(--surface);z-index:1;min-width:190px} .permgrid thead th:first-child{z-index:3} .toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:var(--ink);color:var(--ground); padding:10px 18px;border-radius:99px;font-size:13px;z-index:80;box-shadow:var(--shadow-lg)} .spin{display:inline-block;width:14px;height:14px;border:2px solid var(--line-strong);border-top-color:var(--blue-600); border-radius:50%;animation:sp .7s linear infinite;vertical-align:-2px} @keyframes sp{to{transform:rotate(360deg)}} .empty{padding:40px;text-align:center;color:var(--ink-3)} .empty h3{margin-bottom:6px;font-size:14px;color:var(--ink)} /* ---------- visual workflow builder ---------- */ .btoolbar{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:8px} .bhelp{font-size:11.5px;margin:0 0 10px} .bwrap{border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface-2);overflow:auto; max-height:calc(100vh - 250px);min-height:420px; background-image:radial-gradient(var(--line) 1px,transparent 1px);background-size:20px 20px} .bcanvas{position:relative;min-width:900px;min-height:520px} .bedges{position:absolute;left:0;top:0;pointer-events:none} .bedges .bedge{pointer-events:auto} .bnodes{position:absolute;left:0;top:0;right:0;bottom:0} .bnode{position:absolute;border-radius:10px;background:var(--surface);border:1.5px solid var(--line-strong);box-shadow:var(--shadow);transition:border-color .12s,box-shadow .12s; box-shadow:var(--shadow);cursor:grab;user-select:none;display:flex;align-items:center;padding:8px 11px} .bnode:hover{border-color:var(--blue-400)} .bnode.sel{border-color:var(--blue-600);box-shadow:0 0 0 3px var(--blue-050),var(--shadow)} .bnode.linking{border-color:var(--gold);box-shadow:0 0 0 3px rgba(253,192,15,.25)} .bn-in{flex:1;min-width:0;text-align:center} .bn-t{font-size:12.5px;font-weight:650;line-height:1.3;white-space:normal;word-break:break-word; display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} .bn-i{opacity:.55;font-size:11px;display:inline-block;margin-inline-end:6px;vertical-align:-1px} .bn-s{font-size:10.5px;color:var(--ink-3);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .bn-port{position:absolute;left:50%;bottom:-14px;transform:translateX(-50%);width:28px;height:28px;border-radius:50%;font-size:15px;box-shadow:var(--shadow);transition:transform .12s,border-color .12s,background .12s,color .12s; border:1.5px solid var(--line-strong);background:var(--surface);color:var(--ink-3);font-size:12px;line-height:1; display:grid;place-items:center;cursor:crosshair;z-index:3;padding:0} .bn-port:hover{border-color:var(--gold-dim);color:var(--accent-on);background:var(--accent-solid);transform:translateX(-50%) scale(1.15)} .bnode:hover .bn-port{border-color:var(--gold-dim);color:var(--accent)} .bnode.linking .bn-port{background:var(--accent-solid);color:var(--accent-on);border-color:var(--gold-dim)} .bnode.t-start,.bnode.t-end{border-radius:99px;justify-content:center} .bnode.t-start{background:var(--ok-bg);border-color:var(--ok)} .bnode.t-start .bn-t{color:var(--ok)} .bnode.t-end{background:var(--crit-bg);border-color:var(--crit)} .bnode.t-end .bn-t{color:var(--crit)} .bnode.t-decision{background:var(--warn-bg);border-color:var(--warn);border-radius:9px} .bnode.t-decision .bn-t{color:var(--warn)} /* read-only diagram on a live item */ .bview .bnode{cursor:default} .bview .bnode.done{background:var(--ok-bg);border-color:var(--ok);opacity:.9} .bview .bnode.here{border-color:var(--blue-600);box-shadow:0 0 0 3px var(--blue-050),var(--shadow)} .bnode.t-parallel,.bnode.t-join{background:var(--info-bg);border-color:var(--blue-600);justify-content:center} .bnode.t-parallel .bn-t,.bnode.t-join .bn-t{color:var(--blue-600)} .bview .bnode.here{background:var(--blue-050)} .activepaths{display:flex;flex-direction:column;gap:10px} .apath{border:1px solid var(--line);border-radius:var(--r-sm);padding:11px 12px;background:var(--surface-2)} .apath h5{margin:0 0 3px;font-size:12.5px;font-weight:650} .apath .who{font-size:11px;color:var(--ink-3)} .apath .acts{display:flex;gap:6px;flex-wrap:wrap;margin-top:9px} /* ================= icons ================= */ .ic-svg{display:inline-block;vertical-align:-.14em;flex:none} .mdrop a .ic{width:18px;display:grid;place-items:center;opacity:.75;margin-top:1px} .mdrop a.on .ic{opacity:1} .appcard .ai .ic-svg,.mod .mi .ic-svg{width:19px;height:19px} /* base style for every icon button — without this they fall back to the browser's default grey button, which hides a light icon completely */ .icbtn{background:none;border:1px solid transparent;border-radius:var(--r-sm); padding:5px 7px;color:var(--ink-3);line-height:0;display:inline-grid;place-items:center} .icbtn:hover{background:var(--surface-2);border-color:var(--line);color:var(--ink)} .icbtn .ic-svg{vertical-align:-.2em} /* ================= top-level nav ================= */ /* Home and Workflows are single destinations, so they are links not menus */ .mlink{display:inline-flex;align-items:center;gap:7px;padding:0 14px;text-decoration:none; color:var(--ink-2);font-size:13px;font-weight:600;border-bottom:2px solid transparent;white-space:nowrap} .mlink:hover{color:var(--ink);background:var(--surface-2)} .mlink.active{color:var(--accent);border-bottom-color:var(--accent-solid)} .mtrig .cav{display:inline-grid;place-items:center;opacity:.5;transition:transform .15s} .mgroup.open .mtrig .cav{transform:rotate(180deg)} .menubtn{display:none;align-items:center;gap:8px;background:none;border:none;color:var(--ink-2); font-size:13px;font-weight:600;padding:11px 14px;width:100%;text-align:start; border-bottom:1px solid var(--line);background:var(--surface)} /* ================= dashboard ================= */ .statrow{display:flex;gap:20px;flex-wrap:wrap;align-items:baseline} .stat{display:inline-flex;align-items:baseline;gap:6px;font-size:12px;color:var(--ink-3)} .stat b{font-family:var(--mono);font-size:21px;font-weight:600;color:var(--ink); letter-spacing:-.02em;font-variant-numeric:tabular-nums} .accsum{margin:0;font-size:13.5px} .accsum b{color:var(--accent);text-transform:capitalize} .accdet{margin-top:10px} .accdet summary{cursor:pointer;font-size:12.5px;color:var(--ink-3);padding:3px 0} .accdet summary:hover{color:var(--ink)} .kv-tight{margin-top:9px;font-size:12.5px;gap:4px 10px} /* ================= workflow stage ================= */ .stgc{display:inline-flex;align-items:center;gap:7px;flex-wrap:nowrap;white-space:nowrap} .stgc-bar{width:46px;height:4px;border-radius:99px;background:var(--line);overflow:hidden;flex:none} .stgc-bar i{display:block;height:100%;background:var(--accent-solid);border-radius:99px} .docct{display:inline-flex;align-items:center;gap:4px;color:var(--ink-3);font-size:11.5px} .nowrap{white-space:nowrap} /* ================= row actions ================= */ /* Delete used to sit beside Edit looking identical. It now lives behind a menu. */ .rowact{display:flex;align-items:center;gap:6px;justify-content:flex-end} .kebab{position:relative} .kebab>button{background:none;border:1px solid transparent;border-radius:var(--r-sm); padding:4px 6px;color:var(--ink-3);line-height:0} .kebab>button:hover{border-color:var(--line-strong);color:var(--ink)} .kebab menu{position:absolute;inset-inline-end:0;top:calc(100% + 4px);margin:0;padding:5px;list-style:none; min-width:172px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r); box-shadow:var(--shadow-lg);display:none;z-index:35} .kebab.open menu{display:block} .kebab menu button,.kebab menu a{display:flex;align-items:center;gap:9px;width:100%;padding:7px 9px; background:none;border:none;border-radius:var(--r-sm);font-size:12.5px;color:var(--ink); text-align:start;text-decoration:none} .kebab menu button:hover,.kebab menu a:hover{background:var(--surface-2)} .kebab menu .danger{color:var(--crit)} .kebab menu .danger:hover{background:var(--crit-bg)} .kebab menu hr{border:none;border-top:1px solid var(--line);margin:4px 6px} /* ================= responsive ================= */ /* Panels declare their columns here, never inline in JavaScript — an inline style cannot be overridden by a media query, which is why the old layout stayed in two columns on a phone. */ .g-main{grid-template-columns:1.35fr 1fr;align-items:start} .g-half{grid-template-columns:1fr 1fr;align-items:start} .g-wide{grid-template-columns:1fr 1.2fr;align-items:start} @media(max-width:1000px){ .g-main,.g-half,.g-wide{grid-template-columns:1fr} } /* When the bar tightens, the account's name/title steps aside and just the avatar remains — the name can't wrap, so keeping it would push the bar off the edge. The search stays until 860. */ @media(max-width:1100px){ .usr-tx{display:none} .usrwrap{padding-inline-start:12px} } /* The top nav's groups need ~1185px in a row. Below that the whole bar becomes the "Menu" button and opens as a panel — so the navigation never runs off the edge of the bar (Mohammed, 31 Aug 2026). The topbar itself keeps its search down to 860 in the block below. */ @media(max-width:1220px){ .menubtn{display:flex} .menubar{display:none;flex-direction:column;align-items:stretch;padding:6px;gap:2px; position:sticky;top:118px;max-height:calc(100vh - 118px);overflow-y:auto} body.navopen .menubar{display:flex} .mgroup{flex-direction:column} .mtrig,.mlink{width:100%;justify-content:flex-start;padding:10px 12px;border-bottom:none; border-radius:var(--r-sm)} .mtrig .cav{margin-inline-start:auto} .mtrig.active,.mlink.active{background:var(--accent-soft)} .mdrop{position:static;display:block;box-shadow:none;border:none;min-width:0; padding:0;padding-bottom:6px;padding-inline-start:14px;border-inline-start:2px solid var(--line);margin:0;margin-bottom:4px;margin-inline-start:12px} .mgroup .mdrop{display:none} .mgroup.open .mdrop{display:block;animation:none} } @media(max-width:860px){ .topbar{padding:0 14px;gap:10px;height:68px} .topbar .brand svg{width:38px;height:38px} .brand-tx b{font-size:17px} .brand-tx span{font-size:8px} .search{display:none} .usr-tx{display:none} .usrwrap{padding-inline-start:8px} .view{padding:14px 12px} .vh{gap:10px} .vh h1{font-size:19px} .statrow{gap:16px} /* the Menu panel now sits below the shorter mobile topbar */ .menubar{top:68px;max-height:calc(100vh - 68px)} /* tables scroll rather than crush */ .tw{-webkit-overflow-scrolling:touch} table{font-size:12.5px} th,td{padding:8px 10px} .chartwrap{max-height:none} .drawer{width:100%} .kpis{grid-template-columns:repeat(2,minmax(0,1fr))} } @media(max-width:520px){ .kpis{grid-template-columns:minmax(0,1fr)} /* phone width: the Iraq mark alone carries the brand — the text would push the sign-out button off the bar */ .brand-tx{display:none} .vh .sp{display:none} .statrow{width:100%} } /* ================= password fields ================= */ .pw{position:relative;display:block} .pw input{width:100%;padding-right:38px} .pw-eye{position:absolute;right:6px;top:50%;transform:translateY(-50%);background:none;border:none; padding:5px;line-height:0;color:var(--ink-3);border-radius:var(--r-sm)} .pw-eye:hover{color:var(--ink)} .pw-eye.on{color:var(--accent)} .pwrules{list-style:none;margin:10px 0 14px;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:3px 12px} .pwrules li{font-size:11.5px;color:var(--ink-3);display:flex;align-items:center;gap:6px} .pwrules li::before{content:"";width:13px;height:13px;border-radius:50%;border:1.5px solid var(--line-strong);flex:none} .pwrules li.met{color:var(--ok)} .pwrules li.met::before{border-color:var(--ok);background:var(--ok); box-shadow:inset 0 0 0 2px var(--surface)} .linkish{background:none;border:none;padding:0;color:var(--accent);font-size:11.5px;text-decoration:underline} .linkish:hover{color:var(--ink)} @media(max-width:520px){.pwrules{grid-template-columns:1fr}} .legend em{font-style:normal;font-family:var(--mono);font-size:10px;color:var(--ink-3); background:var(--surface-2);border:1px solid var(--line);border-radius:99px;padding:0 5px;margin-inline-start:5px} /* the item's name is what people scan for, so give it the room */ .wf-tbl th.c-item,.wf-tbl td.c-item{width:34%} .wf-tbl th.c-stage,.wf-tbl td.c-stage{width:1%;white-space:nowrap} .wf-tbl th.c-when,.wf-tbl td.c-when{width:1%;white-space:nowrap} .stgc .chip{max-width:22ch;overflow:hidden;text-overflow:ellipsis;display:inline-block} .stgc .c-mute{font-size:9.5px;padding:1px 5px} /* On a phone a six-column table cannot fit, so each item becomes a small card: its name, the stage it has reached, and when it last moved. */ @media(max-width:700px){ .wf-tbl,.wf-tbl tbody,.wf-tbl tr,.wf-tbl td{display:block;width:auto} .wf-tbl thead{display:none} .wf-tbl tr{padding:12px 14px;border-bottom:1px solid var(--line)} .wf-tbl tr:last-child{border-bottom:none} .wf-tbl td{border:none;padding:0;text-align:start} .wf-tbl td.c-item{font-size:14px;line-height:1.35} .wf-tbl td.c-item b{font-weight:650} .wf-tbl td.c-flow{color:var(--ink-3);font-size:12px;margin-top:2px} .wf-tbl td.c-dept{margin-top:6px} .wf-tbl td.c-stage{margin-top:8px} .wf-tbl td.c-docs{display:none} .wf-tbl td.c-when{margin-top:6px;font-size:11px;color:var(--ink-3)} .wf-tbl .stgc{flex-wrap:wrap;white-space:normal} .wf-tbl .stgc .chip{max-width:none} .wf-tbl .stgc-bar{width:60px} /* only the workflow-items table stacks into full-width rows, so only its wrapper needs visible overflow; every other table must still scroll sideways instead of being clipped by its card (Mohammed, 31 Aug 2026) */ .tw:has(.wf-tbl){overflow-x:visible} } .h1-ic{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:7px; background:var(--accent-soft);color:var(--accent);margin-inline-end:9px;vertical-align:-5px} /* The top bar is always dark navy, in both themes, so anything sitting on it must be light — a themed ink colour turns invisible there in light mode. */ .topbar .btn.gh{color:#DCE3FA;border-color:rgba(255,255,255,.22);background:transparent} .topbar .btn.gh:hover{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.4);color:#fff} .topbar .icbtn{color:#AEB9E6} .topbar .icbtn:hover{color:#fff} .eyebrow-sm{font-size:9.5px;letter-spacing:.13em;color:var(--ink-3);font-weight:800; margin:16px 0 8px;text-transform:uppercase} .ndgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px} .fhint{display:block;font-size:11px;color:var(--ink-3);margin-top:4px} @media(max-width:620px){.ndgrid{grid-template-columns:1fr}} /* ================= per-workflow access ================= */ .danger-b{color:var(--crit);border-color:var(--crit-bg)} .danger-b:hover{background:var(--crit-bg);border-color:var(--crit)} .accleg{margin-top:16px;padding-top:14px;border-top:1px solid var(--line); display:grid;grid-template-columns:1fr 1fr;gap:7px 20px} .accleg div{font-size:11.5px;line-height:1.45} .accleg b{display:block;color:var(--ink)} .accleg span{color:var(--ink-3)} .steplist{display:grid;gap:6px;max-height:240px;overflow-y:auto;padding:2px} .stepchk{display:flex;align-items:flex-start;gap:9px;padding:8px 10px;border:1px solid var(--line); border-radius:var(--r-sm);background:var(--surface-2);cursor:pointer;font-size:12.5px} .stepchk:hover{border-color:var(--accent-line)} .stepchk input{margin-top:2px;flex:none;accent-color:var(--accent-solid)} .stepchk span{display:block;line-height:1.35} .stepchk em{display:block;font-style:normal;font-size:11px;color:var(--ink-3);margin-top:2px} .stepchk:has(input:checked){background:var(--accent-soft);border-color:var(--accent-line)} @media(max-width:620px){.accleg{grid-template-columns:1fr}} /* ================= workflow step list ================= */ .stepseq{list-style:none;counter-reset:ss;margin:0;padding:0;display:flex;flex-direction:column;gap:0} .stepseq li{counter-increment:ss;display:flex;gap:12px;padding:11px 0 11px 0;position:relative; border-bottom:1px solid var(--line)} .stepseq li:last-child{border-bottom:none} .stepseq li::before{content:counter(ss);flex:none;width:23px;height:23px;border-radius:50%; display:grid;place-items:center;font-family:var(--mono);font-size:10.5px;font-weight:700; background:var(--surface-2);border:1px solid var(--line);color:var(--ink-3)} .stepseq li.ss-task::before{background:var(--accent-soft);border-color:var(--accent-line);color:var(--accent)} .stepseq li.ss-decision::before{content:"?";background:var(--warn-bg);border-color:var(--warn);color:var(--warn)} .stepseq li.ss-end::before{content:"";background:var(--ok);border-color:var(--ok)} .ss-b{display:block;line-height:1.35} .ss-b b{font-size:13.5px} .ss-b em{display:block;font-style:normal;font-size:11.5px;color:var(--ink-3);margin-top:2px} .ss-i{display:block;font-size:12px;color:var(--ink-2);margin-top:5px} /* ================= workflow connectors ================= */ .bctl{position:absolute;inset:0;pointer-events:none;z-index:6} .bedge .be-line{transition:stroke .1s,stroke-width .1s} .bedge:hover .be-line{stroke:var(--accent-line);stroke-width:2.4} .bedge:hover .be-dot{stroke:var(--accent-solid);r:6} .bedge.on .be-dot{filter:drop-shadow(0 0 0 2px var(--accent-soft))} .edgectl{position:absolute;transform:translateX(-50%);pointer-events:auto;display:flex;gap:2px; background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r-sm); box-shadow:var(--shadow-lg);padding:3px;white-space:nowrap;z-index:7} .edgectl button{display:inline-flex;align-items:center;gap:5px;background:none;border:none; border-radius:4px;padding:4px 8px;font-size:11.5px;color:var(--ink-2);line-height:1} .edgectl button:hover{background:var(--surface-2);color:var(--ink)} .edgectl button.danger{color:var(--crit)} .edgectl button.danger:hover{background:var(--crit-bg)} /* ================= document format choice ================= */ .docmode{display:flex;flex-direction:column;gap:7px} .docmode label{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border:1px solid var(--line); border-radius:var(--r-sm);background:var(--surface-2);cursor:pointer} .docmode label:hover{border-color:var(--accent-line)} .docmode input{margin-top:2px;flex:none;accent-color:var(--accent-solid)} .docmode span{display:block;font-size:13px;line-height:1.35} .docmode em{display:block;font-style:normal;font-size:11.5px;color:var(--ink-3);margin-top:2px} .docmode label:has(input:checked){background:var(--accent-soft);border-color:var(--accent-line)} .fmtpick{display:flex;gap:8px;flex-wrap:wrap} .fmtchk{flex:1;min-width:150px;cursor:pointer} .fmtchk input{position:absolute;opacity:0;pointer-events:none} .fmtchk span{display:flex;align-items:center;justify-content:center;gap:8px;padding:11px 12px; border:1px solid var(--line-strong);border-radius:var(--r-sm);background:var(--surface); font-size:12.5px;font-weight:550;color:var(--ink-2)} .fmtchk:hover span{border-color:var(--accent-line);color:var(--ink)} .fmtchk input:checked + span{background:var(--accent-soft);border-color:var(--accent-solid);color:var(--accent)} .fmtchk input:focus-visible + span{outline:2px solid var(--accent);outline-offset:2px} /* Permission levels and roles are stored lower case; show them as words. */ .chip.lvl,.chip.role{text-transform:capitalize} /* ================= who an item is with ================= */ .withc{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--ink-2); white-space:nowrap;max-width:24ch;overflow:hidden;text-overflow:ellipsis} .withc.named{color:var(--ink);font-weight:550} .withc.none{color:var(--ink-3);font-style:italic} .withav{width:20px;height:20px;border-radius:50%;background:var(--accent-soft);color:var(--accent); display:grid;place-items:center;font-size:9px;font-weight:800;flex:none;letter-spacing:.02em} .wf-tbl th.c-with,.wf-tbl td.c-with{width:1%;white-space:nowrap} /* a two-button switch, used for All items / With me */ .segbtn{display:inline-flex;border:1px solid var(--line-strong);border-radius:var(--r-sm);overflow:hidden} .segbtn button{background:var(--surface);border:none;padding:6px 12px;font-size:12.5px; color:var(--ink-2);border-inline-end:1px solid var(--line-strong)} .segbtn button:last-child{border-inline-end:none} .segbtn button:hover{background:var(--surface-2);color:var(--ink)} .segbtn button.on{background:var(--accent-soft);color:var(--accent);font-weight:650} @media(max-width:700px){ .wf-tbl td.c-with{margin-top:6px} .wf-tbl td.c-with::before{content:"With: ";color:var(--ink-3);font-size:11px} } /* On a phone three tall cards push the actual work off the screen. */ @media(max-width:700px){ .kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-bottom:12px} .kpi{padding:10px 12px} .kpi .lbl{font-size:9px;letter-spacing:.08em} .kpi .val{margin:2px 0 0} /* size comes from the container-query clamp above */ .kpi .sub{font-size:10.5px} .kpi::after{width:2px} } @media(max-width:420px){.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}} .note-inline{font-size:12.5px;color:var(--ink-2);background:var(--surface-2);border:1px solid var(--line); border-inline-start:3px solid var(--accent-solid);border-radius:var(--r-sm);padding:10px 12px;margin:10px 0 0} .note-inline.warn{border-inline-start-color:var(--warn);background:var(--warn-bg);color:var(--ink)} /* ================= steps you can act on ================= */ .bview .bnode.pickable{cursor:pointer;transition:border-color .12s,box-shadow .12s,transform .12s} .bview .bnode.pickable:hover{border-color:var(--accent-line);box-shadow:var(--shadow-lg);transform:translateY(-1px)} .bview .bnode.pickable:focus-visible{outline:2px solid var(--accent);outline-offset:2px} .bview .bnode.pickable::after{content:"";position:absolute;right:7px;top:7px;width:5px;height:5px; border-radius:50%;background:var(--line-strong);opacity:0;transition:opacity .12s} .bview .bnode.pickable:hover::after{opacity:1;background:var(--accent-solid)} .bview .bnode.redirected{border-style:dashed;border-color:var(--accent-line)} .bview .bnode.redirected .bn-s{color:var(--accent)} /* ================= tender review ================= */ .tgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:14px} .tcard{display:block;text-decoration:none;color:inherit;background:var(--surface); border:1px solid var(--line);border-radius:var(--r);padding:15px 16px;box-shadow:var(--shadow); transition:transform .12s,border-color .12s} .tcard:hover{transform:translateY(-2px);border-color:var(--accent-line)} .tcard-h{display:flex;gap:10px;align-items:flex-start;justify-content:space-between} .tcard-h b{font-size:14px;line-height:1.3} .tcard-split{display:flex;gap:14px;margin-top:11px;font-size:11.5px;color:var(--ink-2)} .tcard-split span{display:flex;flex-direction:column;gap:1px;flex:1} .tcard-split em{font-style:normal;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)} .tcard-split small{color:var(--ink-3)} .tcard-f{display:flex;justify-content:space-between;gap:10px;margin-top:12px;padding-top:10px; border-top:1px solid var(--line);font-size:11.5px} .tcard-f .due{color:var(--warn);font-weight:650} .tmeter{display:flex;align-items:center;gap:9px;margin-top:10px} .tmeter-bar{flex:1;height:7px;border-radius:99px;background:var(--surface-2); border:1px solid var(--line);overflow:hidden} .tmeter-bar i{display:block;height:100%;background:var(--accent-solid);border-radius:99px; transition:width .25s ease} .tmeter-n{font-family:var(--mono);font-size:12px;font-weight:700;color:var(--ink);min-width:38px;text-align:end} .tmeter-s{font-size:11px;color:var(--ink-3);white-space:nowrap} .tmeter.big .tmeter-bar{height:11px} .tmeter.big .tmeter-n{font-size:20px;min-width:56px;letter-spacing:-.02em} .tprogress{margin-bottom:16px} .tprog-main{display:grid;grid-template-columns:1.3fr 1fr;gap:24px;align-items:start} .tprog-split{display:grid;grid-template-columns:1fr 1fr;gap:18px} .tsections{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start} .tdocs{display:flex;flex-direction:column} .tdoc{display:flex;gap:12px;padding:11px 15px;border-bottom:1px solid var(--line);align-items:flex-start} .tdoc:last-child{border-bottom:none} .tdoc:hover{background:var(--surface-2)} .tdoc.done{background:var(--accent-soft)} .tdoc.done .tdoc-b b{color:var(--ink-3);text-decoration:line-through;text-decoration-thickness:1px} .tdoc-tick{flex:none;margin-top:1px;cursor:pointer;position:relative;width:20px;height:20px} .tdoc-tick input{position:absolute;opacity:0;width:20px;height:20px;margin:0;cursor:pointer} .tdoc-tick span{display:block;width:20px;height:20px;border:1.5px solid var(--line-strong); border-radius:5px;background:var(--surface);transition:background .12s,border-color .12s} .tdoc-tick input:checked + span{background:var(--accent-solid);border-color:var(--accent-solid)} .tdoc-tick input:checked + span::after{content:"";position:absolute;left:6.5px;top:3px;width:5px;height:10px; border:solid var(--accent-on);border-width:0 2px 2px 0;transform:rotate(45deg)} .tdoc-tick input:focus-visible + span{outline:2px solid var(--accent);outline-offset:2px} .tdoc-b{flex:1;min-width:0} .tdoc-b b{font-size:13px;display:block;line-height:1.3} .tdoc-m{font-size:11px;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .tdoc-r{font-size:11px;color:var(--ok);margin-top:3px;display:flex;align-items:center;gap:4px} .tdoc-a{display:flex;align-items:center;gap:5px;flex:none} @media(max-width:1000px){.tsections,.tprog-main,.tprog-split{grid-template-columns:1fr}} .foot-own{display:block;margin-top:4px;color:var(--ink-3);font-size:11px} /* ================= importing a folder ================= */ .drop.imp{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px; padding:28px 18px;text-align:center;color:var(--ink-3);border:1.5px dashed var(--line-strong); border-radius:var(--r);background:var(--surface-2);cursor:pointer;transition:border-color .12s,background .12s} .drop.imp:hover,.drop.imp.over{border-color:var(--accent-solid);background:var(--accent-soft);color:var(--ink)} .drop.imp b{font-size:14px;color:var(--ink)} .drop.imp span{font-size:12px} .imptree{display:flex;flex-wrap:wrap;gap:4px 12px;margin-top:8px;font-size:11.5px;color:var(--ink-3)} .imptree span{display:inline-flex;align-items:center;gap:5px} /* folders inside a section */ .tfolder{border-bottom:1px solid var(--line)} .tfolder:last-child{border-bottom:none} .tfolder > summary{display:flex;align-items:center;gap:9px;padding:9px 15px;cursor:pointer; background:var(--surface-2);font-size:12.5px;list-style:none;user-select:none} .tfolder > summary::-webkit-details-marker{display:none} .tfolder > summary::before{content:"";width:0;height:0;border-inline-start:5px solid var(--ink-3); border-top:4px solid transparent;border-bottom:4px solid transparent;transition:transform .12s;flex:none} .tfolder[open] > summary::before{transform:rotate(90deg)} .tfolder > summary:hover{background:var(--line-strong)} .tf-ic{display:inline-grid;place-items:center;color:var(--accent);flex:none} .tf-n{flex:1;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .tf-c{font-family:var(--mono);font-size:11px;color:var(--ink-3);background:var(--surface); border:1px solid var(--line);border-radius:99px;padding:1px 7px;flex:none} .tf-c.all{color:var(--accent);border-color:var(--accent-line);background:var(--accent-soft)} .tf-body{border-inline-start:1px solid var(--line);margin-inline-start:16px} .tfbar{display:flex;align-items:center;gap:8px;padding:9px 15px;border-bottom:1px solid var(--line); background:var(--surface-2)} .tfbar .btn{padding:4px 10px;font-size:11.5px} .tfolder > summary{padding-inline-end:15px} .tdoc-wrap .tdoc{padding-inline-start:12px} /* ================= home hero and quick tiles (reference-style) ================= */ .hero{background:var(--surface);border:1px solid var(--line);border-inline-start:3px solid var(--accent-solid); border-radius:var(--r);padding:15px 22px 14px;box-shadow:var(--shadow)} .hero h1{font-size:19px} .hero-head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap} .hero .hsub{color:var(--ink-2);font-size:12.5px} .hsep{width:1px;align-self:stretch;background:var(--line);margin:2px 2px 0} .hstats{display:flex;flex-wrap:wrap;gap:26px;margin-top:12px;align-items:flex-end} .hstat .v{font-size:19px;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:-.02em;white-space:nowrap} .hstat .v.hc-t{font-family:var(--mono)} .hstat .v .wc-i{font-size:14px;margin-inline-end:5px} .hstat .v small{font-size:12px;font-weight:500;color:var(--ink-3);margin-inline-start:3px} .hstat .k{margin-top:2px} .hstat.hot .v{color:var(--accent)} .eyebrow{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)} .card-head{display:flex;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid var(--line)} .card-head h2{font-size:15px;font-weight:600} .tiles{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(196px,1fr))} .tile{display:flex;gap:11px;align-items:flex-start;text-align:start;cursor:pointer;text-decoration:none; background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:13px 14px; transition:border-color .12s,box-shadow .12s,transform .12s} .tile:hover{border-color:var(--accent-line);box-shadow:var(--shadow-lg);transform:translateY(-1px)} .tile .ti{width:30px;height:30px;flex:none;border-radius:8px;display:grid;place-items:center; background:var(--surface-2);border:1px solid var(--line);color:var(--ink-2)} .tile:hover .ti{color:var(--accent);border-color:var(--accent-line);background:var(--accent-soft)} .tile>span:last-child{min-width:0} .tile .tn{display:block;font-size:13.5px;font-weight:600;line-height:1.3;color:var(--ink)} .tile .td{display:block;font-size:11.5px;color:var(--ink-3);margin-top:2px;line-height:1.4} .pin{display:inline-block;margin-inline-start:6px;vertical-align:middle;font-family:var(--mono);font-size:9px; letter-spacing:.07em;text-transform:uppercase;padding:1.5px 5px;border-radius:4px; background:var(--accent-soft);color:var(--accent)} /* ================= applications hub: categories and sections ================= */ .catgrid{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(178px,1fr))} .catbtn{display:flex;align-items:center;gap:11px;text-align:start;cursor:pointer; background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r);padding:13px 14px; transition:border-color .12s,box-shadow .12s,background .12s} .catbtn:hover{border-color:var(--accent-line);box-shadow:var(--shadow)} .catbtn .ci{width:32px;height:32px;flex:none;border-radius:8px;display:grid;place-items:center; background:var(--surface);border:1px solid var(--line);color:var(--ink-2)} .catbtn .cn{display:block;font-size:13.5px;font-weight:600;line-height:1.25} .catbtn .cc{display:block;font-size:11px;color:var(--ink-3);margin-top:1px} .catbtn[aria-pressed="true"]{background:var(--rail-bg);border-color:var(--rail-bg)} .catbtn[aria-pressed="true"] .cn{color:#fff} .catbtn[aria-pressed="true"] .cc{color:rgba(255,255,255,.62)} .catbtn[aria-pressed="true"] .ci{background:rgba(255,255,255,.08);border-color:transparent;color:#fff} .sec-head{display:flex;align-items:center;gap:12px;padding:18px 0 12px} .sec-head .rule{flex:1;height:1px;background:var(--line)} @media(max-width:640px){.hstats{gap:22px}.hero{padding:18px}} /* ================= news, announcements, to-do list ================= */ .g-lead{grid-template-columns:1.6fr 1fr;align-items:stretch} @media(max-width:900px){.g-lead{grid-template-columns:1fr}} .feature{overflow:hidden;display:flex;flex-direction:column} .feature-media{flex:1;min-height:200px;max-height:340px;overflow:hidden;background:var(--surface-2)} .feature-media img{width:100%;height:100%;object-fit:cover;display:block} .feature.noimg .feature-body{flex:1;display:flex;flex-direction:column;justify-content:center} .feature.noimg .feature-body h2{font-size:20px} .anncard{display:flex;flex-direction:column} .annlist{flex:1;min-height:0;overflow-y:auto} .g-lead .anncard .annlist{max-height:420px} .feature-body{padding:18px 20px} .feature-body h2{font-size:18px;line-height:1.3;margin-top:6px} .feature-body p{color:var(--ink-2);font-size:13px;line-height:1.55;margin:8px 0 0;white-space:pre-wrap} .feature-meta{margin-bottom:2px} .ann{display:flex;gap:14px;padding:13px 20px;border-bottom:1px solid var(--line)} .ann:last-child{border-bottom:none} .ann:hover{background:var(--surface-2)} .ann-date{flex:none;width:38px;text-align:center;padding-top:1px} .ann-date .d{font-size:19px;font-weight:650;line-height:1.1;font-variant-numeric:tabular-nums} .ann-body{min-width:0} .ann-body h3{font-size:13.5px;font-weight:600;line-height:1.35;margin-top:2px} .todo{display:flex;gap:11px;align-items:flex-start;padding:9px 0;border-bottom:1px solid var(--line)} .todo.wf{cursor:pointer} .todo.wf:hover b{color:var(--accent)} .todo .ti{width:26px;height:26px;flex:none;border-radius:7px;display:grid;place-items:center; background:var(--surface-2);border:1px solid var(--line);color:var(--ink-2)} .todo .tt{flex:1;min-width:0} .todo .tt b{font-size:13px;font-weight:600;display:block;line-height:1.35} .todo .td-sub{display:block;font-size:11px;color:var(--ink-3);margin-top:1px} .todo.done .tt b{color:var(--ink-3);text-decoration:line-through;text-decoration-thickness:1px} .todo-add{display:flex;gap:8px;margin-top:12px} @media(max-width:640px){.todo-add{flex-wrap:wrap}} /* ================= leave balances management ================= */ .lv-table input.tin{width:74px;text-align:end} .lv-neg{color:var(--crit);font-weight:600} /* ================= pay hidden until asked for ================= */ .paycover{filter:blur(10px);user-select:none;pointer-events:none} /* count chip on the Applications menu, like the reference tab bar */ .navcount{font-family:var(--mono);font-size:10px;line-height:1;padding:3px 7px;border-radius:20px; background:var(--surface-2);border:1px solid var(--line);color:var(--ink-2)} .mtrig.active .navcount{background:var(--accent-soft);color:var(--accent);border-color:transparent} /* ================= builder: connecting made obvious ================= */ .bnode.cantarget{border-style:dashed;border-color:var(--accent-line);cursor:crosshair} .bnode.cantarget:hover{border-style:solid;border-color:var(--gold);box-shadow:0 0 0 3px rgba(253,192,15,.28),var(--shadow-lg)} .linkhint{position:absolute;left:50%;top:10px;transform:translateX(-50%);white-space:nowrap; background:var(--accent-soft);border:1px solid var(--accent-line);color:var(--accent); font-size:12px;padding:6px 14px;border-radius:99px;pointer-events:none;box-shadow:var(--shadow)} .bedges g[data-edge]{cursor:pointer} .bedges g[data-edge]:hover .be-line{stroke:var(--accent-line);stroke-width:2.4} .bedges g[data-edge]:hover .be-dot{transform:scale(1.5);transform-box:fill-box;transform-origin:center} /* ================= builder: clickable connectors, relinking, simulation ================= */ /* the node layer used to sit over the SVG and swallow every click aimed at a connector — now clicks fall through except on the steps themselves */ .bnodes{pointer-events:none} .bnode{pointer-events:auto} .bctl{pointer-events:none} .bctl .edgectl,.bctl .simbox{pointer-events:auto} .be-end{transition:r .1s} .bedges g[data-edge]:hover .be-end{r:10} .be-end:hover{stroke:var(--gold)!important;fill:var(--accent-soft)!important;cursor:grab} .typehelp{background:var(--surface-2);border:1px solid var(--line);border-inline-start:3px solid var(--accent-solid); border-radius:var(--r-sm);padding:10px 12px;font-size:12.5px;color:var(--ink-2);line-height:1.5;margin:-6px 0 14px} .bsimbar[hidden]{display:none} .bsimbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;background:var(--accent-soft); border:1px solid var(--accent-line);border-radius:var(--r-sm);padding:8px 12px;margin-bottom:10px} .bsimbar .simsep{width:1px;height:20px;background:var(--accent-line)} .bsimbar .sp{flex:1} .simming .bnode.simdim{opacity:.3;filter:saturate(.4)} .simming .bnode.simpath{opacity:1} .simming .bnode.simhere{border-color:var(--gold);box-shadow:0 0 0 4px rgba(253,192,15,.30),var(--shadow-lg); transform:scale(1.03)} .simming .bedge{opacity:.22} .simming .bedge.simon{opacity:1} .simbox{position:absolute;width:280px;background:var(--surface);border:1px solid var(--accent-line); border-inline-start:3px solid var(--accent-solid);border-radius:var(--r);box-shadow:var(--shadow-lg); padding:12px 14px;font-size:12.5px;line-height:1.55;color:var(--ink-2);z-index:5;animation:simboxin .18s ease} .simbox-t{font-weight:650;color:var(--ink);font-size:13.5px;margin-bottom:5px} .simbox .siminst{display:block;margin:6px 0;padding:6px 9px;background:var(--surface-2); border-radius:6px;font-style:italic;color:var(--ink-2)} @keyframes simboxin{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}} /* ================= viewing as someone else ================= */ .vabar{display:flex;align-items:center;gap:9px;flex-wrap:wrap;padding:9px 18px;font-size:13px; background:var(--accent-soft);border-bottom:2px solid var(--accent-solid);color:var(--ink); position:sticky;top:0;z-index:40} .vabar b{color:var(--accent)} .vabar.closed{background:var(--crit-bg);border-bottom-color:var(--crit)} .vabar.closed b{color:var(--crit)} .closed-note{text-align:center} .closed-note .sub{font-size:14px;color:var(--ink)} /* the door and the mark, in Owner Console */ .door{display:flex;gap:16px;align-items:center;flex-wrap:wrap;border:1px solid var(--line);border-radius:var(--r); padding:14px 16px;background:var(--ok-bg)} .door.shut{background:var(--crit-bg);border-color:var(--crit)} .door-tx{flex:1;min-width:240px;display:flex;flex-direction:column;gap:3px} .door-tx b{font-size:14px} .door-tx .muted{font-size:12.5px} .logopick{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px} .logocard{display:flex;flex-direction:column;gap:6px;align-items:flex-start;text-align:start;font:inherit;color:var(--ink); border:2px solid var(--line);border-radius:var(--r);padding:12px;background:var(--surface);cursor:pointer} .logocard:hover{border-color:var(--line-strong)} .logocard.on{border-color:var(--accent-solid);background:var(--accent-soft)} .logocard b{font-size:13.5px} .logocard .muted{font-size:12px} .logoprev{display:flex;align-items:center;gap:12px;width:100%;border-radius:var(--r-sm);padding:10px 12px;margin-bottom:4px} .logoprev.dark{background:var(--rail-bg)} .logoprev .brand-tx b{color:#fff;font-style:italic;font-weight:800;font-size:19px;letter-spacing:-.035em;display:block} .logoprev .brand-tx span{display:block;color:var(--gold);font-size:9px;letter-spacing:.17em;margin-top:4px} .logoprev .brand-tx span.al{color:#3ABE7C;letter-spacing:0;font-size:13px;font-weight:600;margin-top:1px} .vabar .btn{margin-inline-start:auto;padding:4px 12px;font-size:12.5px} /* ================= who completed a step, and their comment ================= */ .bn-done{font-size:10.5px;color:var(--ok);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .stepdone{background:var(--ok-bg);border:1px solid var(--ok);border-radius:var(--r-sm); padding:10px 12px;margin-bottom:16px;font-size:12.5px} .stepdone .sd-t{color:var(--ok)} .stepdone .sd-note{margin-top:6px;padding:6px 9px;background:var(--surface);border-radius:6px; font-style:italic;color:var(--ink-2)} .h-note{margin:4px 0 2px;padding:5px 9px;background:var(--surface-2);border-inline-start:2px solid var(--accent-line); border-radius:0 6px 6px 0;font-size:12px;font-style:italic;color:var(--ink-2)} /* ================= hero clocks and weather ================= */ .hero-top{display:flex;gap:24px;align-items:flex-start;justify-content:space-between;flex-wrap:wrap} .hero-side{display:flex;flex-direction:column;gap:10px;align-items:flex-end} .hclocks{display:flex;gap:20px;flex-wrap:wrap} .hclock{display:flex;flex-direction:column;align-items:center;gap:1px} .hclock .hc-t{font-family:var(--mono);font-size:17px;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:.01em} .hweather{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end} .wchip{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--ink-2); background:var(--surface-2);border:1px solid var(--line);border-radius:99px;padding:4px 11px 4px 7px} .wchip b{font-size:13px;color:var(--ink);font-variant-numeric:tabular-nums} .wc-i{font-size:14px;line-height:1} @media(max-width:760px){.hero-side{align-items:flex-start}.hweather{justify-content:flex-start}} /* ================= builder: selection box ================= */ .lasso{position:absolute;border:1.5px dashed var(--accent-solid);background:rgba(253,192,15,.07); border-radius:4px;pointer-events:none;z-index:6} /* ================= people's photographs ================= */ .pav{border-radius:50%;object-fit:cover;flex:none;background:var(--surface-2);border:1px solid var(--line)} .pav-ph{display:grid;place-items:center;color:var(--ink-3)} .pav-ph svg{display:block;width:100%;height:auto} .dir-nm{display:inline-flex;align-items:center;gap:9px} .photorow{display:flex;gap:14px;align-items:center} .nd{display:flex;align-items:center;gap:9px} .nd-tx{flex:1;min-width:0} /* ================= step form fields ================= */ /* five things on a row: the question, its type, Required, Title, remove — inputs shrink instead of overflowing */ .frow{display:grid;grid-template-columns:minmax(140px,1.2fr) minmax(150px,1fr) auto auto auto;gap:8px;align-items:center;margin-bottom:8px} .frow>.tin,.frow>select{min-width:0;width:100%} .frow .frow-opts{grid-column:1/-1} @media(max-width:640px){.frow{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.frow .icbtn{justify-self:end}} .frow-req{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;color:var(--ink-2);white-space:nowrap} .stepform{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-sm); padding:12px 14px;margin:10px 0} .stepform .field{margin-bottom:10px} .stepform textarea,.stepform select,.stepform input{width:100%} .freq{font-style:normal;font-size:9px;color:var(--accent);text-transform:uppercase;letter-spacing:.08em;margin-inline-start:4px} /* ================= working patterns ================= */ .patdays{display:inline-flex;gap:4px} .patdays i,.patpick button{font-style:normal;font-family:var(--mono);font-size:10px;letter-spacing:.02em; padding:3px 7px;border-radius:5px;background:var(--surface-2);border:1px solid var(--line);color:var(--ink-3)} .patdays i.on{background:var(--accent-soft);border-color:var(--accent-line);color:var(--accent);font-weight:600} .patpick{display:inline-flex;gap:4px} .patpick button{cursor:pointer} .patpick button.on{background:var(--accent-soft);border-color:var(--accent-line);color:var(--accent);font-weight:600} /* ================= notifications ================= */ #notifBtn{position:relative} .notifdot{position:absolute;top:0;inset-inline-end:0;min-width:15px;height:15px;padding:0 4px; border-radius:20px;background:#D63B31;color:#fff;font-size:9.5px;font-weight:700; line-height:15px;text-align:center;font-family:var(--mono)} .notifpanel{position:fixed;top:60px;inset-inline-end:14px;width:min(370px,calc(100vw - 20px));z-index:65; background:var(--surface);border:1px solid var(--line);border-radius:var(--r); box-shadow:var(--shadow-lg);display:flex;flex-direction:column; max-height:min(560px,calc(100vh - 80px))} .notif-h{display:flex;align-items:center;gap:8px;padding:10px 14px;border-bottom:1px solid var(--line);font-size:13.5px} .notif-h .sp{flex:1} .notif-list{overflow-y:auto;flex:1;overscroll-behavior:contain} .notif{display:flex;gap:10px;padding:10px 14px;border-bottom:1px solid var(--line);cursor:pointer} .notif:hover{background:var(--surface-2)} .notif:last-child{border-bottom:none} .nf-dot{flex:none;width:7px;height:7px;border-radius:50%;background:transparent;margin-top:6px} .notif.unread .nf-dot{background:var(--accent-solid)} .nf-tx{display:block;font-size:12.5px;line-height:1.45;min-width:0} .nf-tx b{font-weight:600} .nf-body{display:block;color:var(--ink-2);font-size:12px;margin-top:1px} .nf-when{display:block;color:var(--ink-3);font-size:11px;margin-top:2px} .notif-f{padding:10px 14px;border-top:1px solid var(--line);background:var(--surface-2); border-radius:0 0 var(--r) var(--r)} .notif-mail{display:flex;align-items:center;gap:8px;font-size:12.5px;cursor:pointer} /* ================= eLearning ================= */ .el-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px;margin-top:12px} .el-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r); padding:16px 18px 14px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:8px; transition:border-color .15s, box-shadow .15s} .el-card:hover{border-color:var(--line-strong);box-shadow:var(--shadow-lg)} .el-card h3{margin:0;font-size:14.5px;line-height:1.35} .el-card .desc{font-size:12px;color:var(--ink-3);line-height:1.45;margin:0; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .el-card .meta{display:flex;gap:6px;flex-wrap:wrap;align-items:center;font-size:11px;color:var(--ink-3)} .el-card .foot{display:flex;align-items:center;gap:10px;margin-top:auto;padding:0} .el-bar{flex:1;height:6px;border-radius:4px;background:var(--surface-2);border:1px solid var(--line);overflow:hidden} .el-bar i{display:block;height:100%;background:var(--accent-solid);border-radius:4px} .el-bar.done i{background:var(--ok)} .el-cat-h{display:flex;align-items:center;gap:8px;margin:26px 0 2px} .el-cat-h h2{margin:0;font-size:14px} .el-cat-h .n{font-size:11px;color:var(--ink-3)} /* the player */ .pl-wrap{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:16px;align-items:start} @media(max-width:900px){.pl-wrap{grid-template-columns:1fr}} .pl-main{min-width:0} .pl-side{background:var(--surface);border:1px solid var(--line);border-radius:var(--r); padding:0 0 8px;box-shadow:var(--shadow);position:sticky;top:12px;max-height:calc(100vh - 24px);display:flex;flex-direction:column} @media(max-width:900px){.pl-side{position:static;max-height:none}} .pl-side-h{padding:12px 14px 8px;display:flex;align-items:baseline;justify-content:space-between;gap:8px} .pl-side-h h3{margin:0;font-size:14px} .pl-side-h .muted{font-size:11.5px;white-space:nowrap} .pl-list{overflow:auto;flex:1;padding:4px 6px} .pl-side .les .les-t{display:flex;flex-direction:column;gap:2px;min-width:0;text-align:start} .pl-side .les .les-t b{font-weight:600;font-size:12.5px;color:var(--ink)} .pl-side .les.on .les-t b{color:var(--accent)} .pl-side .les .les-t .muted{font-size:11px;font-weight:400} .pl-tabs{display:flex;gap:2px;margin-top:14px;border-bottom:1px solid var(--line)} .pl-tabs button{border:0;background:none;padding:9px 12px;font:inherit;font-size:13px;color:var(--ink-3);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px} .pl-tabs button.on{color:var(--ink);border-bottom-color:var(--accent-solid);font-weight:650} .pl-tabbody{padding:12px 4px;font-size:13.5px;line-height:1.6} .pl-tabbody p{margin:0 0 8px} .pl-head .pl-k{font-family:var(--mono);font-size:10.5px;color:var(--ink-3);white-space:nowrap} .pl-side .les{display:flex;gap:9px;align-items:center;width:100%;text-align:start;background:none; border:0;border-radius:7px;padding:8px 9px;cursor:pointer;color:var(--ink-2);font-size:12.5px;font-family:var(--sans)} .pl-side .les:hover{background:var(--surface-2)} .pl-side .les.on{background:var(--accent-soft);color:var(--accent);font-weight:650} .pl-side .les.locked{opacity:.45;cursor:default} .pl-side .les .tick{width:17px;height:17px;border-radius:50%;flex:none;display:grid;place-items:center; border:1.5px solid var(--line-strong);font-size:10px;color:transparent} .pl-side .les.done .tick{background:var(--ok);border-color:var(--ok);color:#fff} .pl-stage{background:var(--surface);border:1px solid var(--line);border-radius:var(--r); box-shadow:var(--shadow);overflow:hidden;position:relative} .pl-head{display:flex;align-items:center;gap:10px;padding:11px 16px;border-top:1px solid var(--line)} .pl-head b{font-size:13.5px} /* the stage: a standard player size — a fixed shape that fits the window, the page or the video fitted inside it */ .pl-canvas{display:grid;place-items:center;background:#20232B;position:relative;aspect-ratio:16/9;max-height:64vh;min-height:320px;width:100%;overflow:hidden} .pl-canvas canvas{max-width:100%;max-height:100%;display:block} .pl-canvas video{width:100%;height:100%;object-fit:contain;display:block;background:#000} .pl-ctl{display:flex;align-items:center;gap:12px;padding:11px 16px;border-top:1px solid var(--line)} .pl-track{position:relative;flex:1;height:8px;border-radius:5px;background:var(--surface-2); border:1px solid var(--line)} .pl-track i{position:absolute;inset-block:0;inset-inline-start:0;background:var(--accent-solid);border-radius:5px} .pl-track .cp{position:absolute;top:50%;transform:translate(-50%,-50%);width:10px;height:10px;border-radius:50%; background:var(--surface);border:2.5px solid var(--warn);z-index:1} [dir="rtl"] .pl-track .cp{transform:translate(50%,-50%)} .pl-track .cp.ok{border-color:var(--ok);background:var(--ok)} .pl-num{font-family:var(--mono);font-size:11.5px;color:var(--ink-3);white-space:nowrap} /* the quiz overlay sits over the stage, not the page */ .quiz{position:absolute;inset:0;background:color-mix(in srgb, var(--ground) 88%, transparent); backdrop-filter:blur(4px);display:grid;place-items:center;padding:20px;z-index:5} .quiz-card{background:var(--surface);border:1px solid var(--line);border-radius:12px; box-shadow:var(--shadow-lg);max-width:520px;width:100%;padding:22px 24px;max-height:100%;overflow:auto} .quiz-card .eyebrow-sm{color:var(--warn)} .quiz-card h3{margin:6px 0 14px;font-size:15px;line-height:1.4} .quiz-opt{display:flex;align-items:center;gap:10px;width:100%;text-align:start;background:var(--surface-2); border:1.5px solid var(--line);border-radius:9px;padding:11px 13px;margin:7px 0;cursor:pointer; font-size:13px;color:var(--ink);font-family:var(--sans);transition:border-color .12s, background .12s} .quiz-opt:hover{border-color:var(--line-strong)} .quiz-opt .k{width:22px;height:22px;border-radius:50%;flex:none;display:grid;place-items:center; border:1.5px solid var(--line-strong);font-size:10.5px;font-weight:700;color:var(--ink-3)} .quiz-opt.right{border-color:var(--ok);background:var(--ok-bg)} .quiz-opt.right .k{background:var(--ok);border-color:var(--ok);color:#fff} .quiz-opt.wrong{border-color:var(--crit);background:var(--crit-bg);animation:qshake .3s} .quiz-opt.wrong .k{background:var(--crit);border-color:var(--crit);color:#fff} .quiz-opt:disabled{cursor:default;opacity:.85} @keyframes qshake{0%,100%{transform:none}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}} .quiz-prog{display:flex;gap:5px;margin-top:14px} .quiz-prog i{flex:1;height:4px;border-radius:3px;background:var(--surface-2);border:1px solid var(--line)} .quiz-prog i.on{background:var(--accent-solid);border-color:var(--accent-line)} .quiz-prog i.ok{background:var(--ok);border-color:var(--ok)} /* the completion card */ .el-done{display:grid;place-items:center;text-align:center;padding:48px 20px} .el-done .big{width:74px;height:74px;border-radius:50%;background:var(--ok-bg);color:var(--ok); display:grid;place-items:center;margin-bottom:14px} .el-done .score{font-family:var(--mono);font-size:26px;font-weight:700;margin:6px 0} /* the studio */ .st-lesson{border:1px solid var(--line);border-radius:var(--r);margin:10px 0;background:var(--surface-2)} .st-lesson>.hd{display:flex;align-items:center;gap:10px;padding:10px 14px;cursor:pointer} .st-lesson>.hd .nm{font-weight:650;font-size:13px} .st-lesson>.bd{padding:4px 14px 14px;border-top:1px solid var(--line)} .st-cp{border-inline-start:3px solid var(--warn);background:var(--surface);border-radius:7px; padding:10px 13px;margin:9px 0} .st-cp .hd{display:flex;align-items:center;gap:8px;flex-wrap:wrap} .st-q{border-top:1px dashed var(--line);padding:8px 0 2px;margin-top:8px;font-size:12.5px} .st-q .opts{margin:5px 0 0;padding-inline-start:18px;color:var(--ink-2)} .st-q .opts li.right{color:var(--ok);font-weight:650} .el-drop{border:2px dashed var(--line-strong);border-radius:var(--r);padding:22px;text-align:center; color:var(--ink-3);font-size:12.5px;cursor:pointer;background:var(--surface-2);transition:border-color .15s} .el-drop:hover,.el-drop.over{border-color:var(--accent-line);color:var(--accent)} /* ================= accounting ================= */ .ac-lines input,.ac-lines select{width:100%;min-width:0} .ac-lines td{padding:4px 6px} /* the books lay out like bookkeeping software: a rail of sections beside the work */ .acwrap{display:grid;grid-template-columns:190px minmax(0,1fr);gap:18px;align-items:start} .acrail{position:sticky;top:182px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r); box-shadow:var(--shadow);padding:7px;display:flex;flex-direction:column;gap:2px} .acrail button{display:flex;align-items:center;gap:9px;padding:8px 10px;background:none;border:none; border-radius:var(--r-sm);font-size:12.5px;color:var(--ink-2);text-align:start;cursor:pointer;font-weight:550} .acrail button:hover{background:var(--surface-2);color:var(--ink)} .acrail button.on{background:var(--accent-soft);color:var(--accent);font-weight:650} .crumbs{font-size:11.5px;color:var(--ink-3);margin:0 0 3px} .crumbs span{opacity:.6;margin:0 4px} .lstbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:12px 14px;border-bottom:1px solid var(--line)} .lstbar .sp{flex:1} @media(max-width:1220px){ .acwrap{grid-template-columns:minmax(0,1fr);gap:12px} .acrail{position:static;flex-direction:row;overflow-x:auto;scrollbar-width:none} .acrail::-webkit-scrollbar{display:none} .acrail button{white-space:nowrap;flex:none} } @media print{ .topbar,.menubar,.vh,.no-print,.foot,.toast,.notifpanel{display:none!important} body{background:#fff} .view{padding:0} .doc-print{border:none;box-shadow:none} } /* ================= permissions: role cards, accounts table, matrix ================= */ .rolecards{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))} .rolecard{padding:14px 16px 10px} .rolecard .rc-h{display:flex;align-items:center;gap:8px;margin-bottom:6px} .rolecard h3{font-size:13.5px} .rc-row{display:flex;align-items:center;gap:10px;padding:8px 0;border-top:1px solid var(--line);cursor:pointer} .rc-row:hover .rc-tx b{color:var(--accent)} .rc-tx{flex:1;min-width:0} .rc-tx b{display:block;font-size:12.5px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .rc-tx span{display:block;font-size:11px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .rc-more{font-size:11.5px;margin:6px 0 2px} .rc-cell{display:flex;align-items:center;gap:10px} .pavi{width:30px;height:30px;border-radius:50%;background:var(--accent-soft);color:var(--accent); display:grid;place-items:center;font-size:11px;font-weight:800;flex:none;letter-spacing:.02em} .ptabs{display:flex;gap:2px;border-bottom:1px solid var(--line);padding:0 12px;flex-wrap:wrap} .ptabs button{background:none;border:none;padding:9px 12px;font-size:12.5px;color:var(--ink-2); border-bottom:2px solid transparent;font-weight:550} .ptabs button:hover{color:var(--ink)} .ptabs button.on{color:var(--accent);border-bottom-color:var(--accent-solid);font-weight:650} .pmatrix .pm-lvl{text-align:center;min-width:76px} .pmatrix .pm-cell{text-align:center} .pmatrix th:first-child,.pmatrix td:first-child{position:sticky;inset-inline-start:0;background:var(--surface);z-index:1} .pmatrix thead th:first-child{z-index:3} .pm-mean{font-size:11.5px;margin:3px 0 0;font-weight:400;line-height:1.45;white-space:normal;max-width:46ch} .pcheck{width:24px;height:24px;border-radius:6px;border:1.5px solid var(--line-strong);background:var(--surface); color:transparent;display:inline-grid;place-items:center;cursor:pointer;transition:border-color .12s,background .12s} .pcheck:hover{border-color:var(--ok)} .pcheck.on{background:var(--ok);border-color:var(--ok);color:#fff} .pcheck:disabled{cursor:default;opacity:.75} .pcheck:disabled:hover{border-color:var(--line-strong)} .pcheck.on:disabled:hover{border-color:var(--ok)} /* ================= page control ================= */ .pager{display:flex;align-items:center;gap:6px;flex-wrap:wrap} .pager .sp{flex:1} .pgsum{font-size:12px} .pgn{min-width:28px;height:28px;border-radius:var(--r-sm);border:1px solid var(--line-strong);background:var(--surface); color:var(--ink-2);font-size:12px;font-family:var(--mono)} .pgn:hover{background:var(--surface-2)} .pgn.on{background:var(--accent-soft);border-color:var(--accent-line);color:var(--accent);font-weight:700} .pgell{color:var(--ink-3);padding:0 2px} .pager .btn[disabled]{opacity:.45;cursor:default} /* ================= OneView training: the guided tours ================= */ /* the container passes clicks through the spotlight hole; the shades and the card catch their own */ .tourlay{position:fixed;inset:0;z-index:120;pointer-events:none} .tshade{position:absolute;background:rgba(6,10,25,.55);pointer-events:auto} .tourtip{pointer-events:auto} .tring{position:absolute;border:2px solid var(--accent-solid);border-radius:10px;pointer-events:none; animation:tpulse 1.6s ease-in-out infinite} @keyframes tpulse{0%,100%{box-shadow:0 0 0 4px rgba(253,192,15,.28)}50%{box-shadow:0 0 0 10px rgba(253,192,15,.08)}} .tourtip{position:fixed;width:min(360px,calc(100vw - 20px));background:var(--surface);border:1px solid var(--line); border-radius:12px;box-shadow:var(--shadow-lg);padding:14px 16px;z-index:122} .tourtip h3{font-size:14.5px;margin:9px 0 3px} .tourtip p{margin:4px 0 0;font-size:12.5px;color:var(--ink-2);line-height:1.55} .tt-h{display:flex;align-items:center;gap:8px;min-width:0} /* a long tour name shrinks with an ellipsis; the counter never leaves the box */ .tt-h .chip{display:block;flex:0 1 auto;min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .tt-h .sp{flex:1 1 0;min-width:6px} .tt-n{flex:none;font-family:var(--mono);font-size:10.5px;color:var(--ink-3);white-space:nowrap} [dir="rtl"] .tt-n{font-family:var(--sans)} .tt-do{color:var(--accent)!important;font-weight:650} .tt-f{display:flex;align-items:center;gap:8px;margin-top:13px} .tt-f .sp{flex:1} .tt-prog{display:flex;gap:3px;margin-top:11px;min-width:0;overflow:hidden} /* one thin segment per step, always fitting the box whatever the count; the classes are the tour's own — 'ok' is the app's green message box */ .tt-prog i{flex:1 1 0;min-width:0;height:4px;padding:0;margin:0;border-radius:2px;background:var(--surface-2);border:1px solid var(--line)} .tt-prog i.now{background:var(--accent-solid);border-color:var(--accent-line)} .tt-prog i.done{background:var(--ok);border-color:var(--ok)} /* the certificate */ .certpg{max-width:820px} .cert-frame{border:2px solid var(--accent-line);border-radius:10px;padding:40px 30px 30px;text-align:center; background:var(--surface);position:relative} .cert-frame::after{content:"";position:absolute;inset:7px;border:1px solid var(--line);border-radius:7px;pointer-events:none} .cert-brand{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:20px} .cert-brand b{display:block;font-style:italic;font-weight:800;font-size:16px;letter-spacing:-.03em} .cert-brand span{display:block;font-size:8px;letter-spacing:.15em;color:var(--gold-dim);margin-top:2px} .cert-eyebrow{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin:0} [dir="rtl"] .cert-eyebrow{font-family:var(--sans)} .cert-title{font-size:24px;margin:6px 0 20px} .cert-line{color:var(--ink-3);font-size:12.5px;margin:10px 0 2px} .cert-name{font-size:27px;font-weight:750;margin:2px 0;letter-spacing:-.01em} .cert-app{font-size:17px;font-weight:650;color:var(--accent);margin:2px 0 6px} .cert-foot{display:flex;justify-content:space-between;gap:10px;margin-top:30px;padding-top:14px; border-top:1px solid var(--line);font-size:12px;color:var(--ink-2)} /* ================= project boards ================= */ .pjboard{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;align-items:start} @media(max-width:900px){.pjboard{grid-template-columns:1fr}} .pjlane{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r);padding:10px} .pjlane-h{display:flex;align-items:center;gap:8px;padding:2px 4px 8px} .pjlane-h b{font-size:12.5px;flex:1} .pjtask{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:9px 11px; margin-bottom:8px;cursor:pointer;box-shadow:var(--shadow);transition:border-color .12s} .pjtask:hover{border-color:var(--accent-line)} .pjtask.ms{border-inline-start:3px solid var(--accent-solid)} .pjrow{display:flex;align-items:center;gap:10px;padding:6px 0;border-top:1px solid var(--line);cursor:pointer} .pjrow-t{width:220px;flex:none;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .pjrow-track{position:relative;flex:1;height:12px;background:var(--surface-2);border:1px solid var(--line);border-radius:6px} .pjrow-track i{position:absolute;top:1px;bottom:1px;border-radius:5px;background:var(--accent-solid)} .pjrow-track i.done{background:var(--ok)} @media(max-width:640px){.pjrow-t{width:130px}} /* ---------- Arabic / right-to-left ---------- The layout mirrors through dir="rtl" on plus the logical (inline-start/end) properties above. What follows is only what cannot mirror by itself. */ /* the language button is text, not an icon */ .icbtn.lang{width:auto;min-width:34px;padding:0 8px;font-size:11.5px;font-weight:700;letter-spacing:.02em} /* Arabic script is connected — tracking would tear it apart. The important flag lets this outweigh every compound selector above; nothing on an Arabic page wants tracking, Latin snippets included. */ [dir="rtl"] *{letter-spacing:0!important} /* identifiers, dates-as-code and file names read left-to-right even in Arabic */ [dir="rtl"] .mono{direction:ltr;unicode-bidi:isolate} /* label elements set in the monospace face carry Arabic text in RTL — the mono fonts have no Arabic and would break the letter joining, so these fall back to the sans stack (numbers in them stay perfectly legible) */ [dir="rtl"] th,[dir="rtl"] .kpi .lbl,[dir="rtl"] .eyebrow,[dir="rtl"] .cd-n, [dir="rtl"] .patdays i,[dir="rtl"] .patpick button{font-family:var(--sans)} /* the person drawer slides in from the inline-end edge — on the left in RTL */ [dir="rtl"] .drawer{transform:translateX(-100%)} [dir="rtl"] .drawer.on{transform:none} /* the org chart draws its connecting lines in physical pixels — the canvas keeps LTR geometry inside an RTL page (the diagram itself is symmetric) */ [dir="rtl"] .chartwrap{direction:ltr} /* document CONTENT follows its own language, paragraph by paragraph — an English policy reads left-to-right inside the Arabic interface, and an Arabic one right-to-left inside the English interface */ .rte :is(p,h1,h2,h3,h4,h5,li,div,td){unicode-bidi:plaintext;text-align:start} /* a slightly larger base size — Arabic glyphs carry detail smaller ones lose */ [dir="rtl"] body{font-size:14.5px} /* ---- the tender flow: ITT at the top, the two branches, then the P&L ---- */ .trail{position:sticky;top:98px;z-index:25;display:flex;align-items:center;gap:6px; background:var(--surface);border:1px solid var(--line);border-radius:12px; padding:7px 10px;margin:0 0 16px;overflow-x:auto;scrollbar-width:none; box-shadow:0 6px 18px rgba(0,0,0,.08)} .trail::-webkit-scrollbar{display:none} .trail a{display:flex;align-items:center;gap:8px;padding:6px 11px;border-radius:9px; white-space:nowrap;color:var(--ink-2);text-decoration:none;font-size:12.5px;font-weight:600} .trail a:hover{background:var(--surface-2)} .trail a .n{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px; border-radius:50%;background:var(--surface-2);color:var(--ink-3);font-size:11px; font-family:var(--mono);flex:none} .trail a.on{background:var(--surface-2);color:var(--ink)} .trail a.on .n{background:var(--accent-solid);color:#fff} .trail-sep{flex:none;width:16px;height:1px;background:var(--line)} /* one stage on screen at a time; scroll or swipe sideways between them */ .tcarousel{display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory; scrollbar-width:none;align-items:flex-start;transition:height .25s ease} .tcarousel::-webkit-scrollbar{display:none} .tcarousel>.tstage{flex:0 0 100%;min-width:100%;scroll-snap-align:start;scroll-snap-stop:always; padding:2px 2px 8px} .tbranches{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start} @media(max-width:900px){ .tbranches{grid-template-columns:1fr} .trail{top:172px} } /* ---- selecting documents to delete, the way an inbox does it ---- */ .selbar{position:fixed;bottom:18px;inset-inline:0;margin:0 auto;width:max-content;max-width:92vw; z-index:40;display:flex;align-items:center;gap:12px;background:var(--surface); border:1px solid var(--line-strong);border-radius:12px;padding:10px 16px; box-shadow:0 12px 34px rgba(0,0,0,.3)} .selbar b{font-size:13px;white-space:nowrap} .selbox{width:16px;height:16px;accent-color:var(--warn);flex:none;cursor:pointer;margin-top:2px} .tfolder>summary .selbox{margin-top:0} /* ---- chat ---- */ /* ---- Chat: the conversations down the left, the open one on the right ---- */ .chatwrap{display:grid;grid-template-columns:320px minmax(0,1fr);height:calc(100vh - 330px);min-height:480px;max-height:860px;overflow:hidden;padding:0} .ch-foot{font-size:11.5px;margin:8px 0 76px} /* room under the card so the Assistant button never sits on the Send button */ .ch-side{display:flex;flex-direction:column;border-inline-end:1px solid var(--line);min-height:0;background:var(--surface)} .ch-side-h{display:flex;align-items:center;gap:6px;padding:12px 12px 8px 16px} [dir=rtl] .ch-side-h{padding:12px 16px 8px 12px} .ch-side-h h2{font-size:17px;margin:0;flex:1;font-weight:700} .ch-newbtn{padding:6px 10px;font-size:12.5px;display:inline-flex;gap:6px;align-items:center} .ch-side-h .ch-only{margin-inline-end:4px} .ch-side-h .ch-only button{padding:4px 9px;font-size:11.5px} .ch-search{position:relative;padding:0 12px 8px} .ch-search .ic{position:absolute;inset-inline-start:22px;top:9px;color:var(--ink-3);pointer-events:none} .ch-search .tin{width:100%;padding-inline-start:30px;padding-inline-end:28px} .ch-clear{position:absolute;inset-inline-end:18px;top:5px;border:0;background:none;color:var(--ink-3);font-size:14px;cursor:pointer;padding:2px 6px;border-radius:99px} .ch-clear:hover{background:var(--surface-2);color:var(--ink)} .ch-none{margin:0;padding:6px 16px 10px;font-size:12px;color:var(--ink-3)} .ch-item.hit{grid-template-columns:minmax(0,1fr)} .ch-item.hit .ch-tx b{font-weight:600} .ch-hitwho{font-weight:400;color:var(--ink-3);font-size:11.5px} .ch-snip{display:block;font-size:12px;color:var(--ink-2);white-space:normal;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical} .ch-list mark{background:color-mix(in srgb,var(--gold) 45%,transparent);color:inherit;border-radius:2px;padding:0 1px} a.ch-item{text-decoration:none;color:inherit} .ch-avw{position:relative;display:inline-block;flex:none;line-height:0} .ch-dot{position:absolute;inset-inline-end:-1px;bottom:-1px;width:11px;height:11px;border-radius:50%;background:var(--ok);border:2px solid var(--surface)} .ch-muteic{color:var(--ink-3);display:inline-block;vertical-align:-1px;position:relative} .ch-muteic::after{content:"";position:absolute;left:0;right:0;top:50%;height:1.5px;background:currentColor;transform:rotate(-45deg)} .ch-unread.quiet{background:var(--surface-2);color:var(--ink-3);border:1px solid var(--line)} .ch-draft{color:var(--crit);font-style:normal;font-weight:600} .ch-list{flex:1;overflow-y:auto;min-height:0;padding-bottom:8px} .ch-sec{font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3);font-weight:700;padding:10px 16px 4px} .ch-item{display:grid;grid-template-columns:38px minmax(0,1fr) auto;gap:10px;align-items:center;padding:9px 14px;cursor:pointer;position:relative;border-inline-start:3px solid transparent} .ch-item:hover,.ch-item:focus-visible{background:var(--surface-2);outline:none} .ch-item.on{background:color-mix(in srgb,var(--gold) 12%,var(--surface));border-inline-start-color:var(--accent-solid)} .ch-av{border-radius:50%;background:var(--info-bg);color:var(--info);font-size:12.5px;font-weight:700;display:inline-grid;place-items:center;flex:none;object-fit:cover;overflow:hidden;border:1px solid var(--line)} .ch-av.grp{border-radius:9px;background:var(--rail-bg);color:#fff;border-color:transparent} .ch-tx{min-width:0} .ch-tx b{display:block;font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .ch-item.unread .ch-tx b{font-weight:800} .ch-prev{display:block;font-size:12px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .ch-prev svg{vertical-align:-2px} .ch-item.unread .ch-prev{color:var(--ink-2)} .ch-meta{display:flex;flex-direction:column;align-items:flex-end;gap:4px;font-size:11px;color:var(--ink-3);white-space:nowrap} .ch-unread{background:var(--gold);color:var(--accent-on);font-size:10.5px;font-weight:800;border-radius:99px;min-width:18px;height:18px;padding:0 5px;display:grid;place-items:center} .ch-pin{position:absolute;inset-inline-end:10px;bottom:8px;border:0;background:var(--surface);color:var(--ink-3);border-radius:99px;padding:3px;display:none;cursor:pointer;box-shadow:var(--shadow)} .ch-item:hover .ch-pin,.ch-pin.on{display:grid;place-items:center} .ch-pin.on{color:var(--accent);background:transparent;box-shadow:none} .ch-main{display:flex;flex-direction:column;min-width:0;min-height:0;position:relative;background:var(--ground)} .ch-head{display:flex;gap:12px;align-items:center;padding:8px 18px;border-bottom:1px solid var(--line);min-height:58px;background:var(--surface);flex-wrap:wrap} .ch-back{display:none} .ch-title{min-width:0;display:flex;flex-direction:column} .ch-title b{font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .ch-sub{font-size:11.5px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .ch-tabs{display:flex;gap:2px;margin-inline-start:12px;align-self:stretch} .ch-tab{border:0;background:none;padding:0 10px;font:inherit;font-size:13px;font-weight:600;color:var(--ink-3);border-bottom:2.5px solid transparent;cursor:pointer} .ch-tab:hover{color:var(--ink)} .ch-tab.on{color:var(--ink);border-color:var(--accent-solid)} .ch-acts{margin-inline-start:auto;display:flex;gap:2px} .ch-acts .icbtn.on{color:var(--accent);background:var(--accent-soft)} .ch-pane{flex:1;overflow-y:auto;padding:16px 20px;min-height:0} .ch-msgs{flex:1;overflow-y:auto;padding:14px 22px 18px;display:flex;flex-direction:column;min-height:0} .ch-empty{margin:auto;text-align:center;color:var(--ink-3);font-size:13px;display:flex;flex-direction:column;align-items:center;gap:8px;padding:30px} .ch-empty p{margin:0;max-width:340px} .ch-day{text-align:center;margin:14px 0 6px} .ch-day span{font-size:10.5px;color:var(--ink-3);background:var(--surface);border:1px solid var(--line);border-radius:99px;padding:2px 10px} .ch-day.new{display:flex;align-items:center;gap:10px;margin:12px 0 4px} .ch-day.new::before,.ch-day.new::after{content:"";flex:1;height:1px;background:var(--crit)} .ch-day.new span{color:var(--crit);border-color:var(--crit);font-weight:700} .ch-more{align-self:center;margin:0 0 8px;border:1px solid var(--line);background:var(--surface);color:var(--ink-2);border-radius:99px;padding:5px 14px;font:inherit;font-size:12px;cursor:pointer} .ch-more:hover{border-color:var(--line-strong)} .ch-typing{font-size:12px;color:var(--ink-3);padding:8px 4px 0;font-style:italic} .ch-typing[hidden]{display:none} .ch-seen{font-size:10.5px;color:var(--ink-3);text-align:end;margin-top:4px;display:flex;justify-content:flex-end;gap:3px;align-items:center} .ch-row.hit .ch-card{outline:2px solid var(--accent-solid);outline-offset:2px;animation:chhit 2.4s ease-out forwards} @keyframes chhit{0%,70%{outline-color:var(--accent-solid)}100%{outline-color:transparent}} .ch-mention{background:color-mix(in srgb,var(--gold) 22%,transparent);color:var(--accent);border-radius:4px;padding:0 3px;font-weight:600} .ch-body code{background:var(--surface-2);border:1px solid var(--line);border-radius:4px;padding:0 4px;font-family:var(--mono);font-size:12px} .ch-mentions{padding:4px;max-height:360px;overflow-y:auto} .ch-mrow{display:flex;gap:10px;align-items:center;width:100%;border:0;background:none;text-align:start;padding:6px 8px;border-radius:7px;cursor:pointer;font:inherit;color:var(--ink)} .ch-mrow span{display:flex;flex-direction:column;min-width:0} .ch-mrow b{font-size:13px} .ch-mrow small{color:var(--ink-3);font-size:11px} .ch-mrow.on,.ch-mrow:hover{background:var(--accent-soft)} .ch-tool.at,.ch-tool.b,.ch-tool.i{font-weight:800;font-size:13px;padding:4px 7px;line-height:1.3} .ch-tool.i{font-style:italic;font-family:Georgia,serif} .ch-row{display:flex;gap:10px;align-items:flex-start;margin-top:10px;max-width:min(78%,760px);position:relative} .ch-row.cont{margin-top:3px} .ch-row.me{align-self:flex-end;flex-direction:row-reverse} .ch-avsp{width:32px;flex:none} .ch-card{background:var(--surface);border-radius:10px;padding:8px 12px;box-shadow:0 1px 2px rgba(14,19,39,.06);min-width:0;position:relative;border:1px solid var(--line)} .ch-row.me .ch-card{background:color-mix(in srgb,var(--gold) 15%,var(--surface));border-color:color-mix(in srgb,var(--gold) 35%,var(--line))} .ch-name{font-size:11.5px;color:var(--ink-3);display:flex;gap:8px;align-items:baseline;margin-bottom:2px} .ch-name b{color:var(--ink-2);font-size:12.5px} .ch-body{font-size:13.5px;white-space:pre-wrap;word-break:break-word;line-height:1.45} .ch-body a{color:var(--accent)} .ch-gif img{max-width:min(280px,100%);height:auto;border-radius:6px;display:block;margin-top:4px;background:var(--surface-2)} .ch-img{display:block;margin-top:6px} .ch-img img{max-width:min(320px,100%);max-height:280px;border-radius:6px;display:block;background:var(--surface-2)} .ch-file{display:flex;gap:10px;align-items:center;border:1px solid var(--line);border-radius:8px;padding:8px 10px;background:var(--surface);margin-top:6px;text-decoration:none;color:inherit;min-width:220px} .ch-file:hover{border-color:var(--line-strong);background:var(--surface-2)} .ch-file .ic{width:34px;height:34px;border-radius:7px;background:var(--blue-050);color:var(--blue-600);display:grid;place-items:center;flex:none} .ch-file .ic.dl{background:transparent;color:var(--ink-3);margin-inline-start:auto} .ch-file-t{min-width:0;display:flex;flex-direction:column} .ch-file-t b{font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .ch-file-t small{color:var(--ink-3);font-size:11px} .ch-reacts{display:flex;gap:4px;flex-wrap:wrap;margin-top:6px} .ch-react{border:1px solid var(--line);border-radius:99px;padding:1px 8px;font-size:12px;background:var(--surface);cursor:pointer;font-family:inherit;color:var(--ink)} .ch-react:hover{border-color:var(--line-strong)} .ch-react.mine{border-color:var(--accent-line);background:var(--accent-soft)} .ch-hover{position:absolute;top:-17px;inset-inline-end:8px;display:none;gap:1px;background:var(--surface);border:1px solid var(--line);border-radius:99px;padding:2px 4px;box-shadow:var(--shadow);z-index:2} .ch-row.me .ch-hover{inset-inline-end:auto;inset-inline-start:8px} .ch-row:hover .ch-hover,.ch-row:focus-within .ch-hover{display:flex} .ch-hover button{border:0;background:none;font-size:15px;line-height:1;cursor:pointer;padding:3px 5px;border-radius:99px;color:var(--ink-2);font-family:inherit} .ch-hover button:hover{background:var(--surface-2);transform:scale(1.15)} .ch-hover button.del,.icbtn.ch-del{color:var(--crit)} .ch-hover button.del{border-inline-start:1px solid var(--line);border-radius:0 99px 99px 0;margin-inline-start:2px} .ch-compose{border-top:1px solid var(--line);padding:10px 18px 12px;background:var(--surface)} .ch-box{border:1px solid var(--line-strong);border-radius:10px;background:var(--surface)} .ch-box:focus-within{outline:2px solid var(--accent-solid);outline-offset:-1px} .ch-box textarea{width:100%;border:0;background:transparent;resize:none;padding:11px 12px 6px;font:inherit;font-size:13.5px;line-height:1.4;min-height:40px;max-height:160px;outline:none;color:var(--ink);display:block} .ch-pend{display:flex;gap:6px;flex-wrap:wrap;padding:0 10px 6px} .ch-pend .chip{display:inline-flex;gap:5px;align-items:center} .ch-pend .chip small{opacity:.7} .ch-tools{display:flex;align-items:center;gap:2px;padding:2px 8px 6px} .ch-tool{border:0;background:none;color:var(--ink-2);padding:6px;border-radius:7px;cursor:pointer;display:grid;place-items:center;font-family:inherit} .ch-tool:hover{background:var(--surface-2);color:var(--ink)} .ch-tool.gif{font-size:10px;font-weight:800;border:1.5px solid currentColor;border-radius:4px;padding:1px 4px;line-height:1.2;margin-inline-start:4px} .ch-send{color:var(--accent)} .ch-send:disabled{color:var(--ink-3);opacity:.5;cursor:default;background:none} .ch-hint{font-size:11px;margin-inline-end:6px} .ch-drop{position:absolute;inset:0;background:color-mix(in srgb,var(--gold) 14%,var(--surface));border:2px dashed var(--accent-solid);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:var(--accent);font-weight:600;z-index:5;pointer-events:none} .ch-drop p{margin:0} .ch-drop[hidden],.ch-pend[hidden],.ch-reacts[hidden],.ch-msgs[hidden],.ch-pane[hidden],.ch-compose[hidden]{display:none} .ch-pop{position:fixed;z-index:210;max-height:400px;background:var(--surface);border:1px solid var(--line-strong);border-radius:10px;box-shadow:var(--shadow-lg);display:flex;flex-direction:column;overflow:hidden} .ch-pop-s{padding:8px;border-bottom:1px solid var(--line)} .ch-pop-s .tin{width:100%} .em-pop{height:380px} .em-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:1px;padding:4px 8px;overflow-y:auto;flex:1;align-content:start} .em-grid button{border:0;background:none;font-size:21px;line-height:1.3;border-radius:6px;cursor:pointer;padding:3px 0;font-family:inherit} .em-grid button:hover{background:var(--surface-2);transform:scale(1.2)} .em-h{grid-column:1/-1;font-size:10.5px;font-weight:700;color:var(--ink-3);text-transform:uppercase;letter-spacing:.06em;padding:8px 2px 2px} .em-tabs{display:flex;gap:2px;border-top:1px solid var(--line);padding:6px 8px} .em-tabs button{flex:1;border:0;background:none;font-size:16px;border-radius:6px;padding:4px;cursor:pointer} .em-tabs button.on{background:var(--accent-soft)} .gif-pop{height:420px} .gif-grid{columns:2;column-gap:6px;padding:8px;overflow-y:auto;flex:1} .gif-grid img{width:100%;border-radius:6px;display:block;margin-bottom:6px;cursor:pointer;break-inside:avoid;background:var(--surface-2)} .gif-grid img:hover{outline:2px solid var(--accent-solid)} .gif-off{column-span:all;padding:10px;font-size:12.5px;color:var(--ink-2);display:flex;flex-direction:column;gap:10px} .gif-off p{margin:0} .gif-foot{font-size:10.5px;padding:5px 10px;border-top:1px solid var(--line);text-align:end} .ch-files{display:flex;flex-direction:column;gap:6px;max-width:720px} .ch-files .ch-file{margin-top:0} .ch-people{max-width:720px} .ch-people-h{display:flex;align-items:center;gap:8px;margin-bottom:10px} .ch-person{display:flex;gap:10px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line-soft,var(--line))} .ch-person .ch-tx{flex:1} @media (max-width:760px){ .chatwrap{grid-template-columns:1fr;height:calc(100vh - 190px);min-height:420px} .chatwrap:not(.open) .ch-main{display:none} .chatwrap.open .ch-side{display:none} .ch-back{display:inline-grid} .ch-head{padding:8px 10px;gap:8px} .ch-tabs{order:5;flex-basis:100%;margin:0;justify-content:space-around} .ch-row{max-width:92%} .ch-hint{display:none} } /* ---- surveys: the answer scale ---- */ .svscale{display:flex;gap:8px} .svscale label{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:11px;color:var(--ink-3);cursor:pointer} /* the home strip's own-cities edit button */ .hcity-edit{align-self:center;color:var(--ink-3);font-size:13px;border:1px solid var(--line); border-radius:var(--r-sm);padding:6px 9px;background:var(--surface);cursor:pointer;flex:none} .hcity-edit:hover{color:var(--ink);background:var(--surface-2)} /* ---- client organisation charts ---- */ .con-node{margin:6px 0;position:relative} .con-node summary{list-style:none;display:flex;align-items:center;gap:8px;cursor:pointer} .con-node summary::-webkit-details-marker{display:none} .con-card{flex:1;display:flex;align-items:flex-start;gap:10px;background:var(--surface); border:1px solid var(--line);border-radius:9px;padding:9px 13px;min-width:0} details.con-node>summary .con-card{border-inline-start:3px solid var(--gold)} .con-tx{flex:1;min-width:0} .con-tx b{display:block;font-size:13px} .con-person{display:block;font-size:12px;color:var(--ink-2);margin-top:1px} .con-person.empty{color:var(--ink-3);font-style:italic} .con-contact{display:block;font-size:11px;color:var(--ink-3);font-family:var(--mono);margin-top:2px;unicode-bidi:plaintext;text-align:start} .con-notes{display:block;font-size:11px;color:var(--ink-3);margin-top:3px;white-space:pre-wrap} .con-acts{display:flex;gap:2px;flex:none;opacity:.25;transition:opacity .12s} .con-card:hover .con-acts{opacity:1} .con-count{flex:none;font-size:10.5px;font-weight:700;color:var(--ink-3);background:var(--surface-2); border-radius:99px;padding:2px 8px} details.con-node[open]>summary .con-count{background:color-mix(in srgb,var(--gold) 18%,transparent);color:var(--gold)} .con-kids{margin-inline-start:26px;padding-inline-start:14px;border-inline-start:2px solid var(--line)} @media (max-width:700px){.con-kids{margin-inline-start:10px;padding-inline-start:8px}} /* search fields that wait to be asked: the magnifier inside fires the search (with Enter); typing alone never does (Mohammed, 31 Aug 2026) */ .sfield{position:relative;display:inline-flex;align-items:center;vertical-align:middle} .sfield .tin{padding-inline-end:30px;width:100%} .sgo{position:absolute;inset-inline-end:2px;border:0;background:none;cursor:pointer; padding:4px 7px;color:var(--ink-3);border-radius:var(--r-sm);display:grid;place-items:center} .sgo:hover{color:var(--accent);background:var(--surface-2)} .sgo svg{display:block} .search .mag{border:0;background:none;cursor:pointer;padding:0} .search .mag:hover{color:var(--gold)} /* the globe language menu on the top bar */ .langwrap{position:relative} .langmenu{min-width:150px} .langmenu button{justify-content:space-between} /* freeze pane: the permissions matrix scrolls inside its own frame — the header row stays put, and so does the names column (Mohammed, 31 Aug 2026) */ .tw.freeze{max-height:calc(100vh - 340px);min-height:320px;overflow:auto} .tw.freeze thead th{position:sticky;top:0;background:var(--surface);z-index:3;box-shadow:0 1px 0 var(--line)} .tw.freeze th:first-child,.tw.freeze td:first-child{position:sticky;inset-inline-start:0;background:var(--surface);z-index:2;box-shadow:1px 0 0 var(--line)} .tw.freeze thead th:first-child{z-index:4} /* a workflow's name is a start button: it keeps the name's look, but the cursor and a hover cue say it is clickable (Mohammed, 31 Aug 2026) */ .wfstart{font:inherit;color:var(--ink);text-decoration:none;text-align:start;cursor:pointer} .wfstart b{font-weight:650} .wfstart:hover{color:var(--accent)} .wfstart:hover b{text-decoration:underline;text-underline-offset:2px} /* the workflow tracker's expandable step trail (Reports) */ .wt-steps{display:grid;gap:8px} .wt-step{border:1px solid var(--line);border-radius:var(--r-sm);padding:8px 11px;background:var(--surface)} .wt-step.wt-done{border-inline-start:3px solid var(--ok)} .wt-step.wt-current{border-inline-start:3px solid var(--info)} .wt-step.wt-pending{opacity:.65} .wt-step-h{display:flex;align-items:center;gap:8px;justify-content:space-between} .wt-ans{margin-top:5px;font-size:12px;display:grid;gap:2px} .wt-ans .muted{font-weight:600} /* ================= employee records ================= */ .emp-tbl td{vertical-align:middle} .emp-who{display:flex;align-items:center;gap:10px;min-width:0} .emp-who b{display:block;font-size:13px;line-height:1.25} .emp-who span{display:block;font-size:11.5px;color:var(--ink-3)} .emp-ids{display:flex;gap:5px;flex-wrap:wrap} .emp-ids .chip{font-family:var(--mono);letter-spacing:.02em} .emp-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 16px} .emp-form .field.wide{grid-column:1/-1} @media(max-width:640px){.emp-form{grid-template-columns:minmax(0,1fr)}} .idcheck{font-size:12.5px;border-radius:var(--r-sm);padding:9px 12px;margin:-4px 0 10px;border:1px solid var(--line)} .idcheck.bad{background:var(--crit-bg);border-color:var(--crit);color:var(--ink)} .idcheck.ok{background:var(--ok-bg);border-color:var(--ok);color:var(--ink)} .idcheck b{font-weight:650} /* ================= workflows: the use area ================= */ .wfsec{font-size:15px;margin:18px 0 10px} .wfcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px;margin-bottom:8px} .wfcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;box-shadow:var(--shadow); cursor:pointer;display:flex;flex-direction:column;gap:8px;transition:border-color .12s,transform .12s} .wfcard:hover{border-color:var(--accent-line);transform:translateY(-1px)} .wfcard .wfc-h{display:flex;align-items:flex-start;justify-content:space-between;gap:8px} .wfcard .wfc-h b{font-size:14px;line-height:1.3} .wfcard p{margin:0;font-size:12.5px;color:var(--ink-2);flex:1} .wfcard .wfc-f{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:11.5px} /* ================= employee timesheet ================= */ .ts-grid td,.ts-grid th{padding:5px 8px;vertical-align:middle} .ts-grid input[type=number]{width:72px;text-align:end} .ts-grid select{width:auto} .ts-grid input.tin{min-width:0} .ts-grid tr.wknd td{background:var(--surface-2)} .ts-grid tr.hol td{background:var(--warn-bg)} .ts-grid tr.today td:first-child b{color:var(--accent)} .ts-day{white-space:nowrap} .ts-day span{display:block;font-size:11px;color:var(--ink-3)} .ts-total{font-family:var(--mono);font-variant-numeric:tabular-nums} .ts-bars{display:grid;gap:6px;margin-top:8px} .ts-bar{display:grid;grid-template-columns:170px minmax(0,1fr) 70px;align-items:center;gap:10px;font-size:12.5px} .ts-bar .bar{height:14px;background:var(--surface-2);border-radius:7px;overflow:hidden} .ts-bar .bar i{display:block;height:100%;background:var(--accent-solid);border-radius:7px} .ts-bar .n{text-align:end;font-family:var(--mono)} @media(max-width:640px){.ts-bar{grid-template-columns:110px minmax(0,1fr) 60px}} /* ================= workflow designer: the three stages ================= */ .wfstages{display:flex;gap:6px;margin:0 0 14px;flex-wrap:wrap} .wfstages button{flex:1;min-width:120px;display:flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid var(--line);border-radius:var(--r); background:var(--surface-2);color:var(--ink-2);font:inherit;font-size:12.5px;cursor:pointer;text-align:start} .wfstages button i{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--surface);border:1px solid var(--line);font-style:normal;font-size:11.5px;font-weight:700} .wfstages button.on{background:var(--accent-soft);border-color:var(--accent-line);color:var(--ink)} .wfstages button.on i{background:var(--accent-solid);color:var(--accent-on);border-color:transparent} .wfstages button.done i{background:var(--ok-bg);color:var(--ok);border-color:transparent} .wfintro{font-size:12.5px;margin:0 0 12px} .wfh4{font-size:11px;letter-spacing:.1em;color:var(--ink-3);margin:18px 0 8px} .wfstep{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r);margin-bottom:8px;background:var(--surface)} .wfstep .chip{margin-top:2px} .wfstep-b{flex:1;min-width:0;font-size:12.5px} .wfstep-b .muted{font-size:11.5px;margin-top:2px} #wf_walk{margin-top:6px} #diagramState{font-size:12.5px;margin:0 0 8px;color:var(--ink-2)} #diagramState.ok{color:var(--ok)} /* ================= training: sections and the written guides ================= */ .lrn-sec{font-size:14px;margin:22px 0 10px;display:flex;align-items:center;gap:10px} .lrn-sec span{font-weight:400;color:var(--ink-3);font-size:12px} .lrn-sec.first{margin-top:6px} .el-card.wftrain{border-color:var(--accent-line)} .guide p{font-size:13.5px;line-height:1.6;margin:0 0 12px} .guide p:first-child::first-letter{font-weight:700} /* ================= suppliers & materials; materials lines on a form ================= */ .mat-tbl td,.mat-tbl th{padding:5px 8px;vertical-align:middle} .mat-tbl select{width:100%;min-width:150px} .mat-tbl.ro{font-size:12.5px} .matlines>span{display:block;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);margin-bottom:6px} .matlines .mat-total{font-family:var(--mono);font-variant-numeric:tabular-nums} .sup-head{display:flex;gap:14px;align-items:flex-start;flex-wrap:wrap} .sup-meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:8px 18px;font-size:12.5px} .sup-meta dt{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)} .sup-meta dd{margin:2px 0 0} .codecheck{font-size:12px;margin-top:4px} .codecheck.bad{color:var(--crit)} .codecheck.ok{color:var(--ok)} /* ================= the way back: a real button, not a grey link ================= */ .backrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 10px} .backbtn{display:inline-flex;align-items:center;gap:7px;padding:7px 14px 7px 10px;border-radius:999px; background:var(--accent-soft);color:var(--accent);border:1px solid var(--accent-line); font:inherit;font-size:13px;font-weight:600;text-decoration:none;cursor:pointer;line-height:1;white-space:nowrap; transition:background .12s,transform .12s} .backbtn:hover{background:var(--accent-line);transform:translateX(-2px)} [dir="rtl"] .backbtn:hover{transform:translateX(2px)} .backbtn svg{flex:none} [dir="rtl"] .backbtn svg{transform:scaleX(-1)} .backcrumbs{font-size:12.5px;color:var(--ink-3)} .backcrumbs a{color:var(--ink-2);text-decoration:underline;text-underline-offset:2px} /* ================= using a workflow: the form → the documents → pass on ================= */ .stepwork{margin-bottom:14px} .sw-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:14px 18px;border-bottom:1px solid var(--line)} .sw-head h3{margin:0 0 3px;font-size:16px} .sw-head .muted{font-size:12px} .sw-steps{display:flex;gap:6px;list-style:none;margin:0;padding:0;flex-wrap:wrap} .sw-steps li{display:flex;align-items:center;gap:7px;padding:6px 12px 6px 8px;border-radius:999px;border:1px solid var(--line);background:var(--surface-2);color:var(--ink-3);font-size:12px;white-space:nowrap} .sw-steps li i{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--surface);border:1px solid var(--line);font-style:normal;font-size:11px;font-weight:700} .sw-steps li.on{background:var(--accent-soft);border-color:var(--accent-line);color:var(--ink);font-weight:600} .sw-steps li.on i{background:var(--accent-solid);color:var(--accent-on);border-color:transparent} .sw-steps li.done i{background:var(--ok-bg);color:var(--ok);border-color:transparent} .sw-steps li.skip{opacity:.7} .sw-body{padding:16px 18px 18px} .sw-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 18px} .sw-form .field.wide{grid-column:1 / -1} .sw-form .field{margin-bottom:10px} .sw-form textarea,.sw-form select,.sw-form input.tin{width:100%} .sw-form .field.bad>span{color:var(--crit)} .sw-form .field.bad input,.sw-form .field.bad select,.sw-form .field.bad textarea{border-color:var(--crit)} .sw-lead{font-size:13.5px;margin:0 0 12px} .sw-acts{margin-top:14px;padding-top:12px;border-top:1px solid var(--line);display:flex;gap:8px;flex-wrap:wrap;align-items:center} .sw-acts .btn{font-size:13.5px;padding:9px 16px} .doc-tbl td:first-child{width:24px;color:var(--ink-3)} @media(max-width:760px){.sw-form{grid-template-columns:1fr}} /* ================= the assistant: a floating button and a chat panel ================= */ .aibtn{position:fixed;bottom:22px;inset-inline-end:22px;z-index:58;display:inline-flex;align-items:center;gap:8px;padding:11px 18px 11px 14px;border-radius:999px; background:var(--accent-solid);color:var(--accent-on);border:0;font:inherit;font-size:13.5px;font-weight:700;cursor:pointer;box-shadow:var(--shadow-lg);transition:transform .12s} .aibtn:hover{transform:translateY(-2px)} .aibtn.on{background:var(--ink);color:var(--surface)} .aipanel{position:fixed;bottom:76px;inset-inline-end:22px;z-index:59;width:min(420px,calc(100vw - 24px));height:min(640px,calc(100vh - 110px)); display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-lg);overflow:hidden} .aipanel[hidden]{display:none} .ai-h{display:flex;align-items:center;gap:8px;padding:12px 14px;border-bottom:1px solid var(--line)} .ai-h b{display:block;font-size:14px}.ai-h .muted{font-size:11.5px} .ai-tabs{display:flex;gap:6px;padding:8px 12px;border-bottom:1px solid var(--line);background:var(--surface-2)} .ai-tabs button{flex:1;padding:6px 10px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--ink-2);font:inherit;font-size:12.5px;cursor:pointer} .ai-tabs button.on{background:var(--accent-soft);border-color:var(--accent-line);color:var(--ink);font-weight:600} .ai-msgs{flex:1;overflow:auto;padding:14px;display:flex;flex-direction:column;gap:10px} .ai-note{font-size:12.5px;color:var(--ink-2);margin:0} .ai-starters{display:flex;flex-direction:column;gap:6px} .ai-starters button{text-align:start;padding:8px 12px;border-radius:10px;border:1px solid var(--line);background:var(--surface-2);color:var(--ink);font:inherit;font-size:12.5px;cursor:pointer} .ai-starters button:hover{border-color:var(--accent-line);background:var(--accent-soft)} .ai-m{display:flex;flex-direction:column;max-width:92%} .ai-m.user{align-self:flex-end;align-items:flex-end} .ai-m.assistant{align-self:flex-start} .ai-b{padding:9px 12px;border-radius:14px;font-size:13px;line-height:1.55;background:var(--surface-2);color:var(--ink)} .ai-m.user .ai-b{background:var(--accent-solid);color:var(--accent-on);border-bottom-inline-end-radius:4px} .ai-m.assistant .ai-b{border-bottom-inline-start-radius:4px} .ai-src{display:flex;flex-wrap:wrap;gap:6px;margin-top:5px;font-size:11.5px} .ai-src a,.ai-src button{color:var(--accent);text-decoration:none;font-size:11.5px;display:inline-flex;align-items:center;gap:3px} .ai-mem{margin-top:5px}.ai-mem .chip{white-space:normal;font-weight:500;letter-spacing:0;line-height:1.4} .ai-typing{display:inline-flex;gap:4px;align-items:center} .ai-typing i{width:7px;height:7px;border-radius:50%;background:var(--ink-3);animation:aiblink 1.2s infinite} .ai-typing i:nth-child(2){animation-delay:.2s}.ai-typing i:nth-child(3){animation-delay:.4s} @keyframes aiblink{0%,80%,100%{opacity:.25}40%{opacity:1}} .ai-in{display:flex;gap:8px;padding:10px 12px;border-top:1px solid var(--line)} .ai-in input{flex:1;min-width:0;padding:9px 12px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--ink);font:inherit;font-size:13px} @media(max-width:640px){.aipanel{bottom:70px;inset-inline-end:12px;height:min(560px,calc(100vh - 100px))}.aibtn{bottom:14px;inset-inline-end:14px}} @media print{.aibtn,.aipanel{display:none}} /* ================= the file viewer (PDFs drawn by pdf.js, images) ================= */ .fv{display:flex;flex-direction:column;height:min(72vh,860px);border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden;background:var(--surface-2)} .modal.fullscreen .fv{height:calc(100vh - 150px)} .fv-tb{display:flex;align-items:center;gap:6px;padding:6px 8px;border-bottom:1px solid var(--line);background:var(--surface);flex-wrap:wrap} .fv-tb .btn{padding:5px 10px;font-size:12px;text-decoration:none;display:inline-flex;align-items:center;gap:5px;white-space:nowrap} .fv-tb .btn.gh svg,.fv-tb .btn svg{width:14px;height:14px} .fv-pg{display:inline-flex;align-items:center;gap:4px;font-size:12px;color:var(--ink-2);white-space:nowrap} .fv-pn{width:46px;padding:3px 5px;border:1px solid var(--line-strong);border-radius:4px;font:inherit;font-size:12px;text-align:center;background:var(--surface);color:var(--ink)} .fv-sep{width:1px;height:22px;background:var(--line);margin:0 4px} .fv-zoom{font-family:var(--mono);font-size:11.5px;min-width:44px;text-align:center;color:var(--ink-2)} .fv-body{flex:1;min-height:0;overflow:auto;padding:14px} .fv-page{margin:0 auto 14px;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.28)} .fv-page canvas{display:block;width:100%;height:100%} .fv-imgwrap{text-align:center} .fv-imgwrap img{max-width:none;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.28);vertical-align:top} [data-fileview] svg{width:14px;height:14px} /* ================= the PDF editor ================= */ .pe-modal .modal-b{padding:0;display:flex;flex-direction:column;overflow:hidden} .pe{display:flex;flex-direction:column;flex:1;min-height:0;height:100%} .pe-bar{display:flex;align-items:center;gap:6px;padding:6px 10px;border-bottom:1px solid var(--line);background:var(--surface);flex-wrap:wrap;flex:none} .pe-tools{display:flex;gap:2px;flex-wrap:wrap} .pe-tool{display:inline-flex;flex-direction:column;align-items:center;gap:1px;min-width:52px;padding:4px 6px;border:1px solid transparent;border-radius:var(--r-sm);background:none;color:var(--ink-2);font:inherit;font-size:10.5px;line-height:1.2;cursor:pointer} .pe-tool svg{width:18px;height:18px} .pe-tool:hover{background:var(--surface-2);border-color:var(--line)} .pe-tool.on{background:var(--accent-soft);border-color:var(--accent-line);color:var(--ink)} .pe-sep{width:1px;height:28px;background:var(--line);margin:0 4px} .pe-opt{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;color:var(--ink-2);white-space:nowrap} .pe-opt[hidden]{display:none} .pe-opt input[type=color]{width:30px;height:24px;padding:0 2px;border:1px solid var(--line-strong);border-radius:4px;background:var(--surface)} .pe-opt input[type=range]{width:80px} .pe-opt select{padding:3px 6px;font-size:12px} .pe-bar .btn{padding:5px 10px;font-size:12px} .pe-bar .icbtn svg{width:15px;height:15px} .pe-note{padding:5px 12px;font-size:12px;color:var(--ink-2);background:var(--surface-2);border-bottom:1px solid var(--line);flex:none;min-height:16px} .pe-note.warn{background:var(--warn-bg);color:var(--warn)} .pe-note:empty{display:none} .pe-work{flex:1;min-height:0;display:flex} .pe-main{flex:1;min-width:0;overflow:auto;padding:16px;background:var(--ground)} .pe-main[data-tool="pen"] .pe-ov,.pe-main[data-tool="hl"] .pe-ov,.pe-main[data-tool="rect"] .pe-ov,.pe-main[data-tool="line"] .pe-ov,.pe-main[data-tool="cover"] .pe-ov{cursor:crosshair} .pe-main[data-tool="text"] .pe-ov,.pe-main[data-tool="place"] .pe-ov{cursor:copy} .pe-page{position:relative;margin:0 auto 16px;background:#fff;box-shadow:0 1px 5px rgba(0,0,0,.3)} .pe-page canvas{display:block;width:100%;height:100%} .pe-ov{position:absolute;left:0;top:0;transform-origin:0 0;touch-action:none;user-select:none;-webkit-user-select:none} .pe-svg{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none} .pe-ov.select .pe-svg path,.pe-ov.select .pe-svg line{pointer-events:visibleStroke;cursor:move} .pe-ov.select .pe-text,.pe-ov.select .pe-rect,.pe-ov.select .pe-hl,.pe-ov.select .pe-cover,.pe-ov.select .pe-img{cursor:move} .pe-ov:not(.select) .pe-text,.pe-ov:not(.select) .pe-rect,.pe-ov:not(.select) .pe-hl,.pe-ov:not(.select) .pe-cover,.pe-ov:not(.select) .pe-img,.pe-ov:not(.select) .pe-svg *{pointer-events:none} .pe-text{position:absolute;white-space:pre;padding:2px;line-height:1.2;font-family:Helvetica,Arial,sans-serif;min-width:6px;min-height:1em;outline:1px dashed transparent;color:#111;box-sizing:border-box} .pe-text.editing{outline-color:var(--blue-500);cursor:text;user-select:text;-webkit-user-select:text;background:rgba(255,255,255,.6)} .pe-rect,.pe-hl,.pe-cover,.pe-img{position:absolute;box-sizing:border-box} .pe-hl{mix-blend-mode:multiply;opacity:.45} .pe-cover{background:#fff;outline:1px dashed rgba(0,0,0,.25)} .pe-img{object-fit:fill;max-width:none} .pe-selbox{position:absolute;border:1.5px solid var(--blue-500);pointer-events:none;box-sizing:border-box} .pe-h{position:absolute;right:-7px;bottom:-7px;width:13px;height:13px;background:#fff;border:1.5px solid var(--blue-500);border-radius:2px;pointer-events:auto;cursor:nwse-resize} .pe-pnum{position:absolute;bottom:4px;right:6px;font:10px var(--mono);color:#999;pointer-events:none} .pe-side{width:226px;flex:none;border-inline-start:1px solid var(--line);background:var(--surface);display:flex;flex-direction:column;min-height:0} .pe-stabs{display:flex;border-bottom:1px solid var(--line);flex:none} .pe-stabs button{flex:1;padding:8px 4px;border:none;background:none;font:inherit;font-size:12px;color:var(--ink-3);border-bottom:2px solid transparent;cursor:pointer} .pe-stabs button.on{color:var(--ink);border-bottom-color:var(--accent-solid);font-weight:600} .pe-spane{flex:1;min-height:0;overflow:auto;padding:10px} .pe-spane[hidden]{display:none} .pe-pact{display:flex;flex-direction:column;gap:6px;margin-bottom:10px} .pe-pact .btn{font-size:12px;padding:6px 8px} .pe-th{border:2px solid transparent;border-radius:6px;padding:4px;margin-bottom:6px;cursor:pointer;text-align:center} .pe-th.on{border-color:var(--accent-solid);background:var(--accent-soft)} .pe-th canvas{display:block;margin:0 auto;box-shadow:0 1px 3px rgba(0,0,0,.3);background:#fff;max-width:100%} .pe-thn{font:11px var(--mono);color:var(--ink-3);margin-top:3px} .pe-tha{display:flex;justify-content:center;gap:2px;margin-top:3px} .pe-tha button{border:1px solid var(--line);background:var(--surface);border-radius:4px;font-size:12px;padding:1px 5px;cursor:pointer;line-height:1.4;color:var(--ink-2)} .pe-tha button:hover{border-color:var(--accent-line);color:var(--ink)} .pe-tha button:disabled{opacity:.35;cursor:default} .pe-field{display:flex;flex-direction:column;gap:3px;margin-bottom:8px;font-size:12px} .pe-field span{color:var(--ink-3);font-size:11px;overflow-wrap:anywhere} .pe-field input[type=text],.pe-field select{padding:5px 7px;border:1px solid var(--line-strong);border-radius:4px;background:var(--surface);color:var(--ink);font:inherit;font-size:12.5px} .pe-flat{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;margin-inline-end:6px} #pe_side_toggle{display:none} @media(max-width:900px){ #pe_side_toggle{display:inline-block} .pe-side{display:none;position:absolute;inset-inline-end:0;top:0;bottom:0;z-index:3;box-shadow:var(--shadow-lg)} .pe.side-open .pe-side{display:flex} .pe-work{position:relative} .pe-tool span{display:none} .pe-tool{min-width:34px} } /* ================= Setup (owner): the company address and email ================= */ .setup-card .card-b{padding-top:14px} .setup-step{display:grid;grid-template-columns:34px minmax(0,1fr);gap:12px;padding:14px 0;border-top:1px solid var(--line)} .setup-step:first-of-type{border-top:0} .setup-n{width:28px;height:28px;border-radius:50%;background:var(--surface-2);border:1px solid var(--line);display:grid;place-items:center;font-family:var(--mono);font-size:12.5px;font-weight:700;color:var(--ink-2)} .setup-step.is-ok .setup-n{background:var(--ok-bg);border-color:transparent;color:var(--ok)} .setup-h{display:flex;align-items:center;gap:10px;margin-bottom:6px} .setup-h b{font-size:13.5px} .setup-body p{margin:0 0 8px;font-size:13px} .setup-row{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;margin-top:6px} .setup-ol{margin:6px 0 4px;padding-inline-start:20px;font-size:13px}.setup-ol li{margin:3px 0} .setup-ul{list-style:none;margin:8px 0 0;padding:0;font-size:13px}.setup-ul li{display:flex;gap:8px;align-items:center;margin:4px 0} .setup-tbl{font-size:13px}.setup-tbl td,.setup-tbl th{padding:6px 10px} .setup-copy{cursor:copy;padding:1px 6px;border-radius:5px;background:var(--surface-2);border:1px dashed var(--line)} .setup-copy:hover{border-style:solid} .setup-chips{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 8px} .chipbtn{padding:5px 11px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--ink-2);font:inherit;font-size:12.5px;cursor:pointer} .chipbtn.on{background:var(--accent-soft);border-color:var(--accent-line);color:var(--ink);font-weight:600} .setup-more{margin-top:12px;font-size:13px}.setup-more summary{cursor:pointer;font-weight:600} /* ================= a client's organization chart (clients.js) ================= the same cards as the company chart: the unit is the bold line (two lines when it needs them), the person beneath it. The text reads in the chart's own language — right-to-left for Arabic, with the stripe on the right */ .conbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center} .conchart .nd{height:68px} .conchart .nd-nm{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical} .conchart .nd-ti{display:block;white-space:nowrap;text-overflow:ellipsis;margin-top:2px} .conchart .chart[dir="rtl"] .nd{padding:9px 14px 9px 11px} .conchart .chart[dir="rtl"] .nd-tx{text-align:right} .conchart .chartwrap{max-height:calc(100vh - 340px);min-height:260px} /* ================= master data ================= */ .reghint{display:inline-block;font-size:11px;color:var(--ink-3);margin-top:4px} .reghint a{color:var(--accent);text-decoration:none;font-weight:600} .md-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px} .md-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);padding:12px 14px;display:flex;flex-direction:column;gap:6px} .md-card h3{font-size:14px;margin:0;display:flex;align-items:baseline;gap:8px} .md-card h3 .cnt{margin-inline-start:auto;font-family:var(--mono);font-size:12.5px;color:var(--ink-2)} .md-card .where{font-size:12px;color:var(--ink-2)} .md-card .where a{color:var(--accent);font-weight:600;text-decoration:none} .md-card .who{font-size:11px;color:var(--ink-3)} .md-health{list-style:none;margin:4px 0 0;padding:0;font-size:12px} .md-health li{display:flex;gap:6px;align-items:center;color:var(--warn,#A96908)} .md-health li.ok{color:var(--ok)} .md-health li::before{content:'';width:7px;height:7px;border-radius:50%;background:currentColor;flex:none} /* ================= workflow forms that pick from the registers ================= the "Kept in …" hint beneath a picker inside a form label reads as a hint, not as the label itself */ .field .reghint{display:inline-block;font-weight:400;letter-spacing:0;margin:4px 0 0;font-size:11px} .field .reghint a{font-weight:600} /* ================= field service: a material line picked from a register ================= */ .fv-line{margin-bottom:8px;padding-bottom:8px;border-bottom:1px dashed var(--line)} .fv-line .fv-pick{width:100%;margin-bottom:4px;font-size:12px} .field .reghint{display:block} /* the "Kept in …" hint under a picker inside a form field: plain small text, not the field's bold letter-spaced label */ .field .reghint{display:inline-block;font-weight:500;letter-spacing:0;margin:4px 0 0;color:var(--ink-3)} .ac-lines select.tin{min-width:150px;max-width:220px} /* ================= register pickers on the people screens ================= */ /* the "Kept in …" hint under a picker keeps its own quiet look inside a form field (the field's own span rule would make it a bold label otherwise) */ .field .reghint,.field span.reghint{display:block;font-size:11px;font-weight:400;letter-spacing:0;text-transform:none;color:var(--ink-3);margin:4px 0 0} .field .linkish{font-size:11px;cursor:pointer;margin-inline-start:6px} .filters .reghint{margin-top:2px} /* ---- pick from a list: the typeahead in front of a