/* =====================================================================
   ALDEEM — COMPANY SERVICES (B2B) + LOGIN HUB (البوابات)
   Reuses .ovl/.wbar/.wclose/.wt/.trust/.tbadge/.field/.selchip/
   .sheet/.sheet-scrim/.statpill/.tl/.confirm-in/.checkwrap.
   ===================================================================== */

/* ============ B2B / COMPANY SERVICES ============ */
.b2b-scroll { flex:1; overflow-y:auto; scrollbar-width:none; padding:4px 18px 14px; }
.b2b-scroll::-webkit-scrollbar { display:none; }

.b2b-hero { background:var(--tenant-primary-dark); border-radius:22px; padding:20px; color:#fff; position:relative; overflow:hidden; box-shadow:var(--shadow-md); }
.b2b-hero::after { content:""; position:absolute; bottom:-50px; inset-inline-end:-30px; width:150px; height:150px; border-radius:50%;
                   background:radial-gradient(circle, color-mix(in srgb,var(--tenant-accent) 55%,transparent), transparent 70%); opacity:.5; }
.b2b-hero .bk { display:inline-flex; align-items:center; gap:6px; background:rgba(255,255,255,.14); font-size:11px; font-weight:700; padding:5px 11px; border-radius:var(--r-pill); margin-bottom:12px; position:relative; }
.b2b-hero .bk svg { width:13px; height:13px; color:var(--tenant-accent); }
.b2b-hero h1 { font-size:22px; font-weight:800; line-height:1.4; position:relative; margin-bottom:7px; }
.b2b-hero p { font-size:12.5px; font-weight:600; color:rgba(255,255,255,.78); line-height:1.65; position:relative; margin-bottom:16px; }
.b2b-stats { display:flex; gap:8px; position:relative; }
.b2b-stat { flex:1; background:rgba(255,255,255,.1); border-radius:13px; padding:11px 10px; text-align:center; }
.b2b-stat b { font-size:16px; font-weight:800; display:block; }
.b2b-stat span { font-size:10px; color:rgba(255,255,255,.72); font-weight:600; }

.b2b-h { font-size:15px; font-weight:800; padding:22px 2px 12px; }

/* company package card */
.cpkg { background:var(--surface); border:1px solid var(--line); border-radius:20px; padding:16px; box-shadow:var(--shadow-sm); margin-bottom:13px; }
.cpkg-top { display:flex; align-items:center; gap:8px; }
.cpkg-tier { font-size:11px; font-weight:800; padding:5px 11px; border-radius:var(--r-pill); background:var(--tenant-primary-soft); color:var(--tenant-primary); display:inline-flex; align-items:center; gap:5px; }
.cpkg-tier svg { width:12px; height:12px; }
.cpkg-recommend { font-size:10.5px; font-weight:800; color:#fff; background:var(--tenant-accent); padding:5px 11px; border-radius:var(--r-pill); margin-inline-start:auto; }
.cpkg-name { font-size:17px; font-weight:800; margin-top:12px; }
.cpkg-figs { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-top:13px; }
.cfig { background:var(--bg); border:1px solid var(--line-soft); border-radius:12px; padding:10px 12px; }
.cfig .k { font-size:10.5px; color:var(--muted); font-weight:700; margin-bottom:3px; display:flex; align-items:center; gap:5px; }
.cfig .k svg { width:12px; height:12px; color:var(--tenant-primary); }
.cfig .v { font-size:14px; font-weight:800; }
.cfig.price { grid-column:1/-1; background:var(--tenant-primary-soft); border-color:transparent; display:flex; align-items:flex-end; justify-content:space-between; }
.cfig.price .v { font-size:19px; color:var(--tenant-primary); }
.cfig.price .v .riyal { font-size:11px; }
.cfig.price .vat { font-size:10.5px; font-weight:800; background:var(--warning-soft); color:var(--warning); padding:4px 9px; border-radius:var(--r-pill); }
.cpkg .nats { display:flex; flex-wrap:wrap; gap:5px; margin-top:11px; }
.cpkg .nats .n { font-size:11px; font-weight:700; color:var(--ink); background:var(--bg); border:1px solid var(--line); padding:4px 9px; border-radius:var(--r-pill); }
.cpkg-cta { width:100%; margin-top:14px; font-family:inherit; cursor:pointer; border:1.5px solid var(--tenant-primary); background:var(--surface); color:var(--tenant-primary); font-size:13.5px; font-weight:800; padding:12px 0; border-radius:var(--r-btn); }

/* corporate features */
.cfeat { display:flex; align-items:center; gap:13px; background:var(--surface); border:1px solid var(--line); border-radius:15px; padding:13px 14px; margin-bottom:10px; box-shadow:var(--shadow-sm); }
.cfeat .cf-ic { width:42px; height:42px; border-radius:12px; background:var(--tenant-accent-soft); color:var(--tenant-accent-dark); display:grid; place-items:center; flex:none; }
.cfeat .cf-ic svg { width:21px; height:21px; }
.cfeat .cf-tx b { font-size:13.5px; font-weight:800; display:block; }
.cfeat .cf-tx span { font-size:11.5px; color:var(--muted); font-weight:600; line-height:1.45; }

/* quote sheet (طلب عرض سعر) */
.qsheet { max-height:82%; display:flex; flex-direction:column; }
.qbody { overflow-y:auto; scrollbar-width:none; margin:0 -2px; padding:0 2px; }
.qbody::-webkit-scrollbar { display:none; }
.qfield { margin-bottom:14px; }
.qfield label { font-size:12.5px; font-weight:800; display:block; margin-bottom:8px; }
.qfield label .opt { color:var(--muted); font-weight:600; font-size:11px; }

/* ============ LOGIN HUB ============ */
.login-scroll { flex:1; overflow-y:auto; scrollbar-width:none; padding:4px 18px 18px; }
.login-scroll::-webkit-scrollbar { display:none; }
.lv { display:none; }
.lv.on { display:block; animation:fadeUp .28s ease; }

.login-head { text-align:center; padding:14px 0 18px; }
.login-head .lh-tile { width:60px; height:60px; border-radius:19px; background:var(--tenant-primary); display:inline-grid; place-items:center; box-shadow:var(--shadow-md); margin-bottom:14px; }
.login-head .lh-tile svg { width:34px; height:34px; }
.login-head h1 { font-size:21px; font-weight:800; margin-bottom:6px; }
.login-head p { font-size:13px; color:var(--muted); font-weight:600; }

.roles { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.role { background:var(--surface); border:1.5px solid var(--line); border-radius:18px; padding:17px 14px; cursor:pointer; text-align:center; box-shadow:var(--shadow-sm); transition:transform .15s; position:relative; }
.role:active { transform:scale(.97); }
.role .r-ic { width:54px; height:54px; border-radius:16px; display:grid; place-items:center; margin:0 auto 11px; }
.role .r-ic svg { width:28px; height:28px; }
.role b { font-size:15px; font-weight:800; display:block; }
.role span { font-size:11px; color:var(--muted); font-weight:600; }
.role.worker { grid-column:1/-1; border-color:var(--tenant-accent); background:var(--tenant-accent-soft); display:flex; align-items:center; gap:14px; text-align:start; padding:16px; }
.role.worker .r-ic { margin:0; width:56px; height:56px; background:var(--tenant-accent); color:#fff; }
.role.worker .r-tx { margin-inline-end:auto; }
.role.worker b { font-size:17px; }
.role.worker .r-most { font-size:10px; font-weight:800; color:#fff; background:var(--tenant-accent-dark); padding:3px 9px; border-radius:var(--r-pill); }
.role.client .r-ic { background:var(--tenant-primary-soft); color:var(--tenant-primary); }
.role.sup .r-ic { background:var(--tenant-primary-soft); color:var(--tenant-primary); }
.role.office .r-ic { background:var(--tenant-primary-soft); color:var(--tenant-primary); }

/* worker login (very simple, icon-led, big targets) */
.wlogin-top { text-align:center; padding:8px 0 18px; }
.wlogin-top .wl-ic { width:84px; height:84px; border-radius:50%; background:var(--tenant-accent-soft); display:inline-grid; place-items:center; margin-bottom:14px; }
.wlogin-top .wl-ic svg { width:44px; height:44px; color:var(--tenant-accent-dark); }
.wlogin-top h2 { font-size:22px; font-weight:800; margin-bottom:6px; }
.wlogin-top p { font-size:13.5px; color:var(--muted); font-weight:600; }
.big-input { display:flex; align-items:center; gap:12px; background:var(--surface); border:2px solid var(--line); border-radius:16px; padding:4px 16px; margin-bottom:14px; }
.big-input .bi-ic { color:var(--tenant-primary); flex:none; }
.big-input .bi-ic svg { width:24px; height:24px; }
.big-input input { flex:1; border:none; outline:none; font-family:inherit; font-size:20px; font-weight:800; padding:16px 0; background:transparent; color:var(--ink); letter-spacing:2px; }
.big-input input::placeholder { color:var(--faint); font-weight:600; letter-spacing:0; }
.biglogin { width:100%; font-family:inherit; cursor:pointer; border:none; background:var(--tenant-accent); color:#fff; font-size:18px; font-weight:800;
            padding:18px 0; border-radius:16px; display:flex; align-items:center; justify-content:center; gap:10px; box-shadow:0 8px 20px color-mix(in srgb,var(--tenant-accent) 42%,transparent); }
.biglogin svg { width:24px; height:24px; }
.wl-alt { display:flex; align-items:center; gap:10px; justify-content:center; margin-top:16px; font-size:13px; font-weight:700; color:var(--tenant-primary); }
.wl-alt svg { width:18px; height:18px; }

/* server URL field (env switch) */
.env-box { background:var(--bg); border:1px dashed var(--line); border-radius:14px; padding:13px 14px; margin-top:20px; }
.env-box .eh { font-size:11.5px; font-weight:800; color:var(--muted); display:flex; align-items:center; gap:7px; margin-bottom:9px; }
.env-box .eh svg { width:14px; height:14px; }
.env-box .ein { display:flex; align-items:center; gap:8px; background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:9px 11px; margin-bottom:9px; }
.env-box .ein input { flex:1; border:none; outline:none; font-family:'JetBrains Mono','Cairo',monospace; font-size:12px; font-weight:600; direction:ltr; text-align:left; color:var(--ink); background:transparent; }
.env-box .ein svg { width:14px; height:14px; color:var(--success); flex:none; }
.env-chips { display:flex; gap:7px; }
.env-chips .ec { font-size:11px; font-weight:800; padding:6px 13px; border-radius:var(--r-pill); border:1.5px solid var(--line); background:var(--surface); color:var(--muted); cursor:pointer; }
.env-chips .ec.on { border-color:var(--tenant-primary); color:var(--tenant-primary); background:var(--tenant-primary-soft); }

/* worker day view */
.wday-head { display:flex; align-items:center; gap:13px; padding:6px 0 16px; }
.wday-head .wd-av { width:50px; height:50px; border-radius:15px; overflow:hidden; flex:none; }
.wday-head .wd-av svg { width:100%; height:100%; }
.wday-head .wd-tx { margin-inline-end:auto; }
.wday-head .wd-tx b { font-size:16px; font-weight:800; display:block; }
.wday-head .wd-tx span { font-size:12px; color:var(--muted); font-weight:600; }

/* big attendance (تبصيم) */
.attend { border-radius:20px; padding:18px; text-align:center; margin-bottom:18px; transition:.25s; }
.attend.out { background:var(--success-soft); border:1.5px solid color-mix(in srgb,var(--success) 30%,transparent); }
.attend.in { background:var(--tenant-accent-soft); border:1.5px solid color-mix(in srgb,var(--tenant-accent) 35%,transparent); }
.attend .at-state { font-size:12.5px; font-weight:700; color:var(--muted); margin-bottom:12px; }
.attend .at-state b { display:block; font-size:15px; margin-top:2px; }
.attend.out .at-state b { color:var(--success); }
.attend.in .at-state b { color:var(--tenant-accent-dark); }
.attend-btn { width:100%; font-family:inherit; cursor:pointer; border:none; color:#fff; font-size:19px; font-weight:800; padding:18px 0; border-radius:16px; display:flex; align-items:center; justify-content:center; gap:11px; }
.attend.out .attend-btn { background:var(--success); box-shadow:0 8px 20px color-mix(in srgb,var(--success) 40%,transparent); }
.attend.in .attend-btn { background:var(--tenant-accent); box-shadow:0 8px 20px color-mix(in srgb,var(--tenant-accent) 40%,transparent); }
.attend-btn svg { width:26px; height:26px; }

/* day schedule */
.wsec-h { font-size:14px; font-weight:800; margin:4px 2px 11px; display:flex; align-items:center; gap:7px; }
.wsec-h svg { width:16px; height:16px; color:var(--tenant-primary); }
.sched-row { display:flex; align-items:center; gap:12px; background:var(--surface); border:1px solid var(--line); border-radius:15px; padding:12px 13px; margin-bottom:9px; box-shadow:var(--shadow-sm); position:relative; overflow:hidden; }
.sched-row::before { content:""; position:absolute; inset-inline-start:0; top:0; bottom:0; width:5px; }
.sched-row.done::before { background:var(--success); }
.sched-row.now::before { background:var(--tenant-accent); }
.sched-row.next::before { background:var(--faint); }
.sched-row .sc-ic { width:42px; height:42px; border-radius:12px; display:grid; place-items:center; flex:none; }
.sched-row.done .sc-ic { background:var(--success-soft); color:var(--success); }
.sched-row.now .sc-ic { background:var(--tenant-accent-soft); color:var(--tenant-accent-dark); }
.sched-row.next .sc-ic { background:var(--bg); color:var(--muted); }
.sched-row .sc-ic svg { width:21px; height:21px; }
.sched-row .sc-tx { margin-inline-end:auto; }
.sched-row .sc-tx b { font-size:13.5px; font-weight:800; }
.sched-row .sc-tx span { font-size:11.5px; color:var(--muted); font-weight:600; display:block; }
.sched-row .sc-time { font-size:12px; font-weight:800; color:var(--ink); }
.sched-row .sc-badge { font-size:9.5px; font-weight:800; padding:3px 8px; border-radius:var(--r-pill); margin-top:4px; display:inline-block; }
.sched-row.done .sc-badge { background:var(--success-soft); color:var(--success); }
.sched-row.now .sc-badge { background:var(--tenant-accent); color:#fff; }

/* signature pad (توقيع العميل) */
.sigwrap { margin-top:18px; }
.sig-pad { position:relative; height:140px; background:var(--surface); border:2px dashed var(--line); border-radius:16px; overflow:hidden; touch-action:none; }
.sig-pad canvas { position:absolute; inset:0; width:100%; height:100%; }
.sig-ph { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; color:var(--faint); pointer-events:none; font-size:13px; font-weight:700; }
.sig-ph svg { width:30px; height:30px; }
.sig-pad.signed .sig-ph { display:none; }
.sig-foot { display:flex; gap:10px; margin-top:11px; }
.sig-clear { flex:none; width:54px; font-family:inherit; cursor:pointer; background:var(--surface); border:1.5px solid var(--line); color:var(--muted); border-radius:var(--r-btn); display:grid; place-items:center; }
.sig-clear svg { width:18px; height:18px; }
.sig-confirm { flex:1; font-family:inherit; cursor:pointer; border:none; background:var(--tenant-primary); color:#fff; font-size:14px; font-weight:800; padding:13px 0; border-radius:var(--r-btn); box-shadow:0 5px 14px color-mix(in srgb,var(--tenant-primary) 32%,transparent); }
.sig-confirm:disabled { background:#E3E3EA; color:var(--faint); box-shadow:none; }

/* simple login (supervisor / office) */
.slogin { text-align:center; padding:6px 0 6px; }
.slogin .si { width:72px; height:72px; border-radius:20px; display:inline-grid; place-items:center; margin-bottom:14px; background:var(--tenant-primary-soft); color:var(--tenant-primary); }
.slogin .si svg { width:36px; height:36px; }
.slogin h2 { font-size:20px; font-weight:800; margin-bottom:6px; }
.slogin p { font-size:13px; color:var(--muted); font-weight:600; margin-bottom:20px; }
.slogin .field { margin-bottom:12px; text-align:start; }
.slogin .sbtn { width:100%; font-family:inherit; cursor:pointer; border:none; background:var(--tenant-primary); color:#fff; font-size:15px; font-weight:800; padding:15px 0; border-radius:var(--r-btn); margin-top:4px; box-shadow:0 6px 16px color-mix(in srgb,var(--tenant-primary) 32%,transparent); }

/* glimpse dashboards */
.glimpse-h { display:flex; align-items:center; gap:10px; padding:6px 0 14px; }
.glimpse-h .gh-ic { width:42px; height:42px; border-radius:12px; background:var(--tenant-primary); color:#fff; display:grid; place-items:center; flex:none; }
.glimpse-h .gh-ic svg { width:21px; height:21px; }
.glimpse-h b { font-size:17px; font-weight:800; display:block; }
.glimpse-h span { font-size:12px; color:var(--muted); font-weight:600; }
.gcards { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.gcard { background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:15px 14px; box-shadow:var(--shadow-sm); }
.gcard.wide { grid-column:1/-1; display:flex; align-items:center; gap:12px; }
.gcard .gc-ic { width:40px; height:40px; border-radius:12px; background:var(--tenant-primary-soft); color:var(--tenant-primary); display:grid; place-items:center; flex:none; margin-bottom:10px; }
.gcard.wide .gc-ic { margin-bottom:0; }
.gcard .gc-ic svg { width:20px; height:20px; }
.gcard .gc-num { font-size:24px; font-weight:800; }
.gcard .gc-lbl { font-size:11.5px; color:var(--muted); font-weight:700; }
.gcard.wide .gc-tx { margin-inline-end:auto; }
.gcard.wide .gc-tx b { font-size:14px; font-weight:800; display:block; }
.gcard.wide .gc-tx span { font-size:11.5px; color:var(--muted); font-weight:600; }
.gcard .gc-go { color:var(--tenant-primary); }
.gcard .gc-go svg { width:18px; height:18px; }