/* =====================================================================
   NESAM maintenance portal — stylesheet
   Shares the brand tokens of the main site but stands alone, so the
   portal keeps working even if the marketing CSS changes.
   ===================================================================== */
:root{
  --teal:#008081; --teal-bright:#16a6a4; --teal-deep:#0a6e6f; --blue:#2a9fd6;
  --red:#e5484d; --amber:#d98324; --green:#16a34a;
  --radius:16px; --radius-sm:10px;
  --font:'Poppins','Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-body:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --ease:cubic-bezier(.4,0,.2,1);
}
[data-theme="dark"]{
  color-scheme:dark;
  --bg:#060d0c; --bg-2:#0b1816; --surface:#0f1e1c; --surface-2:#13211f;
  --border:rgba(255,255,255,.09); --border-2:rgba(255,255,255,.16);
  --text:#e9f2f0; --heading:#f4faf8; --muted:#93a8a4; --faint:rgba(233,242,240,.45);
  --nav-bg:rgba(7,14,13,.86); --glow:rgba(22,166,164,.22); --input:#0a1413;
}
[data-theme="light"]{
  color-scheme:light;
  --bg:#eef1ee; --bg-2:#ffffff; --surface:#ffffff; --surface-2:#f5f8f7;
  --border:rgba(12,40,38,.11); --border-2:rgba(12,40,38,.18);
  --text:#1b2b28; --heading:#0c1a18; --muted:#5e716d; --faint:rgba(20,32,30,.5);
  --nav-bg:rgba(255,255,255,.9); --glow:rgba(0,128,129,.16); --input:#ffffff;
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--font-body); background:var(--bg); color:var(--text);
  line-height:1.6; min-height:100vh; display:flex; flex-direction:column;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:var(--font);color:var(--heading);line-height:1.2;letter-spacing:-.01em}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

/* ---------------- nav ---------------- */
.pnav{position:sticky;top:0;z-index:50;background:var(--nav-bg);backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--border)}
.pnav__in{max-width:1180px;margin-inline:auto;padding:0 20px;min-height:66px;
  display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.pnav__brand{display:flex;align-items:center;gap:10px;flex:none;padding:12px 0}
.pnav__mark{width:36px;height:36px;flex:none;
  background:url(../../assets/img/brand/nesam-logo.svg) center/contain no-repeat;
  filter:drop-shadow(0 4px 10px rgba(0,0,0,.22))}
.pnav__sub{font-family:var(--font);font-size:.7rem;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--teal-bright);border-inline-start:1px solid var(--border-2);padding-inline-start:10px}
.pnav__links{display:flex;gap:4px;flex-wrap:wrap;margin-inline-end:auto}
.pnav__links a{font-family:var(--font);font-weight:500;font-size:.9rem;color:var(--muted);
  padding:.5em .8em;border-radius:9px;transition:color .2s var(--ease),background-color .2s var(--ease)}
.pnav__links a:hover,.pnav__links a[aria-current]{color:var(--text);background:var(--surface-2)}
.pnav__right{display:flex;align-items:center;gap:8px;margin-inline-start:auto}
.pnav__who{font-size:.84rem;color:var(--muted);max-width:22ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------------- buttons ---------------- */
.pbtn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  font-family:var(--font);font-weight:600;font-size:.9rem;padding:.62em 1.1em;
  border-radius:999px;border:1px solid var(--border-2);color:var(--text);background:transparent;
  cursor:pointer;transition:transform .18s var(--ease),border-color .18s,background-color .18s,color .18s;
  white-space:nowrap}
.pbtn:hover{transform:translateY(-1px);border-color:var(--teal-bright);color:var(--teal-bright)}
.pbtn--primary{background:linear-gradient(95deg,var(--teal),var(--teal-bright));
  border-color:transparent;color:#fff;box-shadow:0 10px 24px -10px var(--teal)}
.pbtn--primary:hover{color:#fff;box-shadow:0 16px 30px -10px var(--teal)}
.pbtn--danger{border-color:color-mix(in srgb,var(--red) 45%,transparent);color:var(--red)}
.pbtn--danger:hover{border-color:var(--red);color:var(--red);background:color-mix(in srgb,var(--red) 10%,transparent)}
.pbtn--icon{width:40px;height:40px;padding:0;border-radius:11px}
.pbtn--sm{font-size:.82rem;padding:.45em .85em}
.pbtn--full{width:100%}
.pbtn[disabled]{opacity:.5;cursor:not-allowed;transform:none}
.ic{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2}
[data-theme="dark"] .ic--sun{display:block}[data-theme="dark"] .ic--moon{display:none}
[data-theme="light"] .ic--sun{display:none}[data-theme="light"] .ic--moon{display:block}

/* ---------------- layout ---------------- */
.pwrap{flex:1;width:100%;max-width:1180px;margin-inline:auto;padding:30px 20px 60px}
body.is-narrow .pwrap{max-width:520px;padding-top:48px}
.pfoot{border-top:1px solid var(--border);padding:20px;display:flex;gap:10px;justify-content:space-between;
  flex-wrap:wrap;font-size:.8rem;color:var(--faint);max-width:1180px;margin-inline:auto;width:100%}

.phead{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:24px}
.phead h1{font-size:clamp(1.5rem,3.4vw,2.1rem);font-weight:700}
.phead p{color:var(--muted);font-size:.96rem;margin-top:4px}
.phead__actions{margin-inline-start:auto;display:flex;gap:8px;flex-wrap:wrap}

.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:24px}
.card + .card{margin-top:18px}
.card__title{font-family:var(--font);font-size:1.05rem;font-weight:700;margin-bottom:4px}
.card__hint{color:var(--muted);font-size:.88rem;margin-bottom:18px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.stack{display:grid;gap:16px}

/* ---------------- forms ---------------- */
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
.field--full{grid-column:1/-1}
.field label{font-size:.8rem;font-weight:600;font-family:var(--font);color:var(--muted);letter-spacing:.01em}
.field .req{color:var(--teal-bright)}
.field input,.field select,.field textarea{
  font-family:inherit;font-size:.97rem;color:var(--text);background:var(--input);
  border:1px solid var(--border-2);border-radius:var(--radius-sm);padding:.72em .9em;
  transition:border-color .18s,box-shadow .18s;width:100%}
.field textarea{resize:vertical;min-height:120px;line-height:1.55}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--teal-bright);box-shadow:0 0 0 3px var(--glow)}
.field small{color:var(--faint);font-size:.78rem}
.field--bad input,.field--bad select,.field--bad textarea{border-color:var(--red)}
.field .err{color:var(--red);font-size:.8rem;font-weight:500}
fieldset{border:0;padding:0;margin:0}

/* ---------------- alerts ---------------- */
.alert{border-radius:var(--radius-sm);padding:13px 16px;margin-bottom:18px;font-size:.92rem;
  border:1px solid var(--border-2);background:var(--surface-2)}
.alert--ok{border-color:color-mix(in srgb,var(--green) 40%,transparent);
  background:color-mix(in srgb,var(--green) 12%,transparent);color:var(--green)}
.alert--error{border-color:color-mix(in srgb,var(--red) 45%,transparent);
  background:color-mix(in srgb,var(--red) 10%,transparent);color:var(--red)}
.alert--info{border-color:color-mix(in srgb,var(--teal-bright) 40%,transparent);
  background:color-mix(in srgb,var(--teal-bright) 10%,transparent);color:var(--teal-bright)}

/* ---------------- tables / lists ---------------- */
.tablewrap{overflow-x:auto;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface)}
table.t{width:100%;border-collapse:collapse;font-size:.92rem;min-width:620px}
table.t th{text-align:start;font-family:var(--font);font-size:.72rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);padding:13px 16px;border-bottom:1px solid var(--border);font-weight:600}
table.t td{padding:14px 16px;border-bottom:1px solid var(--border);vertical-align:top}
table.t tr:last-child td{border-bottom:0}
table.t tbody tr{transition:background-color .15s}
table.t tbody tr:hover{background:var(--surface-2)}
.t__ref{font-family:var(--font);font-weight:700;color:var(--teal-bright)}
.t__sub{display:block;color:var(--muted);font-size:.84rem;margin-top:2px}

.pill{display:inline-block;font-family:var(--font);font-size:.72rem;font-weight:600;
  padding:.3em .7em;border-radius:999px;border:1px solid var(--border-2);white-space:nowrap}
.pill--new{color:#fff;background:var(--teal);border-color:transparent}
.pill--in_progress{color:var(--blue);border-color:color-mix(in srgb,var(--blue) 45%,transparent)}
.pill--waiting_customer{color:var(--amber);border-color:color-mix(in srgb,var(--amber) 45%,transparent)}
.pill--resolved{color:var(--green);border-color:color-mix(in srgb,var(--green) 45%,transparent)}
.pill--closed{color:var(--muted)}
.pill--p-urgent{color:#fff;background:var(--red);border-color:transparent}
.pill--p-high{color:var(--red);border-color:color-mix(in srgb,var(--red) 45%,transparent)}
.pill--p-normal{color:var(--muted)}
.pill--p-low{color:var(--faint)}

.empty{text-align:center;padding:52px 24px;color:var(--muted)}
.empty h3{font-size:1.1rem;margin-bottom:6px;color:var(--heading)}
.empty p{margin-bottom:18px;font-size:.94rem}

/* ---------------- request thread ---------------- */
.thread{display:grid;gap:14px;margin-top:4px}
.msg{border:1px solid var(--border);border-radius:var(--radius-sm);padding:15px 17px;background:var(--surface-2)}
.msg--admin{border-color:color-mix(in srgb,var(--teal-bright) 38%,transparent);
  background:color-mix(in srgb,var(--teal-bright) 8%,transparent)}
.msg--system{background:transparent;border-style:dashed;color:var(--muted);font-size:.88rem}
.msg__head{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;margin-bottom:7px}
.msg__who{font-family:var(--font);font-weight:600;font-size:.88rem}
.msg__when{font-size:.78rem;color:var(--faint);margin-inline-start:auto}
.msg__body{white-space:pre-wrap;word-wrap:break-word;font-size:.94rem;line-height:1.6}

.kv{display:grid;grid-template-columns:auto 1fr;gap:9px 18px;font-size:.92rem}
.kv dt{color:var(--muted);white-space:nowrap}
.kv dd{color:var(--text);font-weight:500}

/* ---------------- stats ---------------- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-bottom:22px}
.stat{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);
  padding:16px 18px;border-top:2px solid var(--teal)}
.stat b{display:block;font-family:var(--font);font-size:1.7rem;font-weight:800;color:var(--heading);line-height:1.1}
.stat span{font-size:.76rem;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.stat--alert{border-top-color:var(--red)}
.stat--warn{border-top-color:var(--amber)}
.stat--ok{border-top-color:var(--green)}

/* ---------------- auth pages ---------------- */
.auth__logo{display:block;width:60px;height:60px;margin:0 auto 22px;
  background:url(../../assets/img/brand/nesam-logo.svg) center/contain no-repeat;
  filter:drop-shadow(0 8px 18px rgba(0,0,0,.24))}
.auth__title{text-align:center;font-size:1.5rem;margin-bottom:6px}
.auth__lead{text-align:center;color:var(--muted);font-size:.93rem;margin-bottom:26px}
.auth__alt{text-align:center;margin-top:20px;font-size:.9rem;color:var(--muted)}
.auth__alt a{color:var(--teal-bright);font-weight:600}

/* ---------------- QR ---------------- */
.qrbox{display:flex;gap:26px;align-items:flex-start;flex-wrap:wrap}
.qrcanvas{background:#fff;padding:16px;border-radius:var(--radius-sm);
  display:inline-flex;align-items:center;justify-content:center;min-width:200px;min-height:200px}
.qrcanvas canvas,.qrcanvas img{display:block}
.qrmeta{flex:1;min-width:240px}

.tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:20px;border-bottom:1px solid var(--border);padding-bottom:12px}
.tabs a{font-family:var(--font);font-weight:600;font-size:.88rem;color:var(--muted);
  padding:.45em .9em;border-radius:999px;transition:background-color .18s,color .18s}
.tabs a:hover{color:var(--text);background:var(--surface-2)}
.tabs a.on{background:var(--teal);color:#fff}

.muted{color:var(--muted)}
.small{font-size:.85rem}
.mt{margin-top:18px}
.right{text-align:end}
.nowrap{white-space:nowrap}
.hr{height:1px;background:var(--border);border:0;margin:22px 0}

@media (max-width:760px){
  .grid2,.grid3{grid-template-columns:1fr}
  .pnav__links{order:3;width:100%;margin:0 0 10px;overflow-x:auto}
  .pnav__who{display:none}
  .pwrap{padding:22px 16px 48px}
  .card{padding:18px}
  .phead__actions{margin-inline-start:0;width:100%}
  .phead__actions .pbtn{flex:1}
}

/* =====================================================================
   APP SHELL — the customer side, built to feel like an installed app.
   One phone-width column, a title bar, a bottom tab bar, and nothing
   that depends on a mouse. The admin pages keep the layout above.
   ===================================================================== */
body.app{display:block;background:var(--bg-2);min-height:100vh;min-height:100dvh}
.app__shell{
  display:flex;flex-direction:column;width:100%;max-width:480px;margin-inline:auto;
  min-height:100vh;min-height:100dvh;background:var(--bg);position:relative;
}
@media (min-width:560px){
  body.app{background:
    radial-gradient(900px 480px at 50% -10%, var(--glow), transparent 70%), var(--bg-2)}
  .app__shell{border-inline:1px solid var(--border);box-shadow:0 0 70px -24px rgba(0,0,0,.5)}
  body.app--wide .app__shell{max-width:720px}
}

/* ---- title bar ---- */
.abar{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:10px;
  min-height:56px;padding:8px 10px;padding-top:calc(8px + env(safe-area-inset-top));
  background:var(--nav-bg);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border)}
.abar__title{font-family:var(--font);font-weight:700;font-size:1.02rem;color:var(--heading);
  flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center}
.abar__back,.abar__icon{width:40px;height:40px;flex:none;display:inline-flex;align-items:center;
  justify-content:center;border-radius:12px;border:0;background:transparent;color:var(--text);
  cursor:pointer;transition:background-color .18s var(--ease)}
.abar__back:active,.abar__icon:active{background:var(--surface-2)}
.abar__back svg{width:24px;height:24px}
.abar__icon .ic{width:20px;height:20px}
.abar__mark{width:40px;height:40px;flex:none;
  background:url(../../assets/img/brand/nesam-logo.svg) center/30px no-repeat}
[dir="rtl"] .abar__back svg{transform:scaleX(-1)}

/* ---- scroll area ---- */
.ascroll{flex:1;padding:18px 16px calc(96px + env(safe-area-inset-bottom))}
body.app--bare .ascroll{padding-bottom:calc(28px + env(safe-area-inset-bottom))}
.alead{color:var(--muted);font-size:.95rem;margin:-4px 0 18px}

/* ---- bottom tabs ---- */
.atabs{position:fixed;inset-inline:0;bottom:0;z-index:45;margin-inline:auto;
  width:min(480px,100%);display:grid;grid-template-columns:repeat(5,1fr);align-items:end;
  gap:2px;padding:6px 6px calc(6px + env(safe-area-inset-bottom));
  background:var(--nav-bg);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-top:1px solid var(--border)}
.atabs__i{display:flex;flex-direction:column;align-items:center;gap:3px;padding:7px 2px 5px;
  border-radius:13px;color:var(--muted);font-family:var(--font);font-size:.66rem;font-weight:600;
  letter-spacing:.01em;transition:color .18s var(--ease),background-color .18s var(--ease)}
.atabs__i svg{width:23px;height:23px}
.atabs__i.is-on{color:var(--teal-bright)}
.atabs__i:active{background:var(--surface-2)}
.atabs__fab{display:inline-flex;align-items:center;justify-content:center;
  width:54px;height:54px;margin:0 auto 4px;border-radius:18px;color:#fff;
  background:linear-gradient(135deg,var(--teal),var(--teal-bright));
  box-shadow:0 12px 24px -10px var(--teal);transition:transform .18s var(--ease)}
.atabs__fab svg{width:25px;height:25px}
.atabs__fab:active{transform:scale(.94)}

/* ---- onboarding progress ---- */
.prog{display:flex;gap:6px;justify-content:center;padding:14px 16px 2px}
.prog__d{width:34px;height:4px;border-radius:999px;background:var(--border-2);transition:background-color .3s var(--ease)}
.prog__d.is-on{background:var(--teal-bright)}

/* ---- welcome ---- */
.wel{display:flex;flex-direction:column;min-height:calc(100dvh - 160px);text-align:center;padding-top:8px}
.wel__art{position:relative;margin:10px auto 26px;width:min(240px,66vw);aspect-ratio:1;
  display:grid;place-items:center}
.wel__ring{position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle at 50% 42%, var(--glow), transparent 68%)}
.wel__ring::after{content:"";position:absolute;inset:9%;border-radius:50%;
  border:1px solid var(--border-2);opacity:.75}
.wel__logo{position:relative;width:52%;aspect-ratio:1;
  background:url(../../assets/img/brand/nesam-logo.svg) center/contain no-repeat;
  filter:drop-shadow(0 12px 28px rgba(0,0,0,.26))}
.wel h1{font-size:clamp(1.65rem,7vw,2.1rem);font-weight:800;letter-spacing:-.02em}
.wel__kicker{font-family:var(--font);font-size:.7rem;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--teal-bright);margin-bottom:10px}
.wel p{color:var(--muted);font-size:1rem;margin:12px auto 0;max-width:34ch}
.wel__spacer{flex:1;min-height:22px}
.wel__acts{display:grid;gap:10px}
.wel__pts{display:grid;gap:12px;margin:26px auto 0;text-align:start;max-width:30ch}
.wel__pt{display:flex;gap:11px;align-items:flex-start;color:var(--muted);font-size:.9rem}
.wel__pt b{flex:none;width:23px;height:23px;border-radius:50%;display:grid;place-items:center;
  background:var(--surface-2);border:1px solid var(--border);color:var(--teal-bright);
  font-family:var(--font);font-size:.72rem}

/* ---- big friendly buttons ---- */
.abtn{display:flex;align-items:center;justify-content:center;gap:.5em;width:100%;
  font-family:var(--font);font-weight:700;font-size:1rem;padding:15px 20px;border-radius:16px;
  border:1px solid var(--border-2);color:var(--text);background:var(--surface);cursor:pointer;
  transition:transform .16s var(--ease),filter .16s var(--ease);text-align:center}
.abtn:active{transform:scale(.985)}
.abtn--primary{background:linear-gradient(120deg,var(--teal),var(--teal-bright));
  border-color:transparent;color:#fff;box-shadow:0 14px 28px -14px var(--teal)}
.abtn--ghost{background:transparent}
.abtn--danger{color:var(--red);border-color:color-mix(in srgb,var(--red) 40%,transparent);background:transparent}
.abtn.is-busy{opacity:.62}
.abtn[disabled]{opacity:.5;cursor:not-allowed}
.abtn__sub{display:block;font-weight:500;font-size:.8rem;opacity:.8;margin-top:2px}

/* ---- cards & rows ---- */
.acard{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:18px;margin-bottom:14px}
.acard--flat{background:var(--surface-2)}
.acard__t{font-family:var(--font);font-weight:700;font-size:1rem;margin-bottom:3px}
.acard__h{color:var(--muted);font-size:.86rem;margin-bottom:14px}
.asec{font-family:var(--font);font-weight:700;font-size:.74rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);margin:24px 0 10px}
.asec:first-child{margin-top:4px}

.hero{position:relative;overflow:hidden;border-radius:20px;padding:20px;margin-bottom:16px;
  background:linear-gradient(135deg,var(--teal-deep),var(--teal-bright));color:#fff}
.hero::after{content:"";position:absolute;inset-inline-end:-30px;top:-40px;width:170px;height:170px;
  border-radius:50%;background:rgba(255,255,255,.12)}
.hero h2{color:#fff;font-size:1.3rem;font-weight:800;position:relative}
.hero p{color:rgba(255,255,255,.85);font-size:.92rem;margin:6px 0 16px;position:relative}
.hero .abtn{position:relative;background:#fff;color:var(--teal-deep);border-color:transparent}

.rowlink{display:flex;align-items:center;gap:13px;width:100%;padding:14px;border-radius:15px;
  background:var(--surface);border:1px solid var(--border);margin-bottom:10px;
  transition:border-color .18s var(--ease),transform .16s var(--ease)}
.rowlink:active{transform:scale(.99);border-color:var(--border-2)}
.rowlink__ic{flex:none;width:42px;height:42px;border-radius:13px;display:grid;place-items:center;
  background:var(--surface-2);color:var(--teal-bright)}
.rowlink__ic svg{width:21px;height:21px}
.rowlink__b{flex:1;min-width:0;display:block;overflow:hidden}
.rowlink__t{display:block;font-family:var(--font);font-weight:600;font-size:.95rem;color:var(--heading);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rowlink__s{display:block;color:var(--muted);font-size:.82rem;margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rowlink__r{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:5px;max-width:40%}
.rowlink__go{flex:none;color:var(--faint)}
.rowlink__go svg{width:19px;height:19px}
[dir="rtl"] .rowlink__go svg{transform:scaleX(-1)}

/* ---- choice chips: apartment, category, urgency ---- */
.choice{display:grid;gap:9px}
.choice--2{grid-template-columns:1fr 1fr}
.choice input{position:absolute;opacity:0;width:0;height:0}
.choice label{display:flex;align-items:center;gap:11px;padding:13px;border-radius:15px;
  border:1.5px solid var(--border);background:var(--surface);cursor:pointer;
  transition:border-color .16s var(--ease),background-color .16s var(--ease)}
.choice input:focus-visible + label{outline:2px solid var(--teal-bright);outline-offset:2px}
.choice input:checked + label{border-color:var(--teal-bright);background:color-mix(in srgb,var(--teal) 10%,var(--surface))}
.choice__t{font-family:var(--font);font-weight:600;font-size:.92rem;color:var(--heading)}
.choice__s{display:block;color:var(--muted);font-size:.8rem;font-weight:400;margin-top:1px}

.catgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.catgrid input{position:absolute;opacity:0;width:0;height:0}
.catgrid > a{display:flex;flex-direction:column;align-items:center;gap:7px;padding:13px 7px;
  border-radius:16px;border:1.5px solid var(--border);background:var(--surface);text-align:center;
  min-height:94px;font-family:var(--font);font-size:.72rem;font-weight:600;line-height:1.25;
  color:var(--text);justify-content:flex-start;transition:border-color .16s var(--ease),transform .16s var(--ease)}
.catgrid > a:active{transform:scale(.97);border-color:var(--teal-bright)}
.catgrid label{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  gap:7px;padding:13px 7px;border-radius:16px;border:1.5px solid var(--border);
  background:var(--surface);cursor:pointer;text-align:center;min-height:94px;
  font-family:var(--font);font-size:.72rem;font-weight:600;line-height:1.25;color:var(--text);
  transition:border-color .16s var(--ease),background-color .16s var(--ease),transform .16s var(--ease)}
.catgrid label:active{transform:scale(.97)}
.catgrid input:focus-visible + label{outline:2px solid var(--teal-bright);outline-offset:2px}
.catgrid input:checked + label{border-color:var(--teal-bright);
  background:color-mix(in srgb,var(--teal) 12%,var(--surface));color:var(--heading)}
.cicon{width:25px;height:25px;color:var(--teal-bright)}
.catgrid input:checked + label .cicon{color:var(--teal-bright)}

.seg{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;padding:5px;border-radius:15px;
  background:var(--surface-2);border:1px solid var(--border)}
.seg input{position:absolute;opacity:0;width:0;height:0}
.seg label{padding:9px 4px;border-radius:11px;text-align:center;cursor:pointer;
  font-family:var(--font);font-size:.78rem;font-weight:600;color:var(--muted);
  transition:background-color .16s var(--ease),color .16s var(--ease)}
.seg input:focus-visible + label{outline:2px solid var(--teal-bright)}
.seg input:checked + label{background:var(--surface);color:var(--heading);box-shadow:0 2px 8px -4px rgba(0,0,0,.4)}
.seg input:checked + label.sev--urgent{background:var(--red);color:#fff}
.seg input:checked + label.sev--high{background:color-mix(in srgb,var(--red) 18%,var(--surface));color:var(--red)}

/* ---- chat thread ---- */
.thread2{display:flex;flex-direction:column;gap:11px;margin-bottom:18px}
.bub{max-width:88%;padding:12px 14px;border-radius:17px;font-size:.92rem;line-height:1.55;
  border:1px solid var(--border);background:var(--surface);align-self:flex-start;
  border-end-start-radius:6px;word-break:break-word;overflow-wrap:anywhere}
.bub--mine{align-self:flex-end;background:color-mix(in srgb,var(--teal) 14%,var(--surface));
  border-color:color-mix(in srgb,var(--teal) 34%,transparent);
  border-end-start-radius:17px;border-end-end-radius:6px}
.bub--system{align-self:center;background:transparent;border:0;color:var(--muted);
  font-size:.8rem;text-align:center;padding:2px 0}
.bub__h{display:flex;gap:9px;align-items:baseline;margin-bottom:4px}
.bub__w{font-family:var(--font);font-weight:700;font-size:.79rem;color:var(--teal-bright)}
.bub__t{font-size:.72rem;color:var(--faint);margin-inline-start:auto}

/* ---- misc ---- */
.aempty{text-align:center;padding:34px 18px;color:var(--muted)}
.aempty svg{width:46px;height:46px;color:var(--border-2);margin:0 auto 12px;display:block;
  fill:none;stroke:currentColor;stroke-width:1.5}
.aempty h3{font-size:1.02rem;margin-bottom:5px}
.aempty p{font-size:.9rem;margin-bottom:16px}
.akv{display:grid;grid-template-columns:auto 1fr;gap:9px 16px;font-size:.89rem}
.akv dt{color:var(--muted)}
.akv dd{color:var(--text);text-align:end;word-break:break-word}
.astats{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-bottom:16px}
.astat{background:var(--surface);border:1px solid var(--border);border-radius:15px;
  padding:13px 10px;text-align:center}
.astat b{display:block;font-family:var(--font);font-size:1.4rem;font-weight:800;color:var(--heading);line-height:1.1}
.astat span{display:block;font-size:.7rem;color:var(--muted);margin-top:3px;
  text-transform:uppercase;letter-spacing:.07em}
.alink{color:var(--teal-bright);font-weight:600}
.atxt{text-align:center;color:var(--muted);font-size:.9rem;margin-top:18px}
.app .field input,.app .field select,.app .field textarea{font-size:16px;padding:13px 14px;border-radius:13px}
.app .field{margin-bottom:15px}
.app .alert{border-radius:13px}
.ainstall{display:none;align-items:center;gap:11px;padding:13px 14px;border-radius:15px;
  background:var(--surface-2);border:1px dashed var(--border-2);margin-bottom:14px;font-size:.86rem}
.ainstall.is-on{display:flex}
.ainstall b{font-family:var(--font);font-size:.88rem;color:var(--heading);display:block}
.ainstall button{flex:none;margin-inline-start:auto}

/* ---- admin: icon picker ---- */
.iconpick{display:grid;grid-template-columns:repeat(auto-fill,minmax(46px,1fr));gap:7px}
.iconpick input{position:absolute;opacity:0;width:0;height:0}
.iconpick label{display:grid;place-items:center;aspect-ratio:1;border-radius:12px;cursor:pointer;
  border:1.5px solid var(--border);background:var(--surface-2);color:var(--muted);
  transition:border-color .16s var(--ease),color .16s var(--ease)}
.iconpick label svg{width:22px;height:22px}
.iconpick input:focus-visible + label{outline:2px solid var(--teal-bright);outline-offset:2px}
.iconpick input:checked + label{border-color:var(--teal-bright);color:var(--teal-bright);
  background:color-mix(in srgb,var(--teal) 12%,var(--surface))}
.t code{font-size:.8em;opacity:.8}

/* ---- admin: a wide list beside a narrow form ---- */
.splitwide{display:grid;grid-template-columns:minmax(0,1.75fr) minmax(290px,1fr);gap:18px;align-items:start}
.splitwide > *{min-width:0}
.splitwide .t td:nth-child(2){min-width:190px}
@media (max-width:900px){.splitwide{grid-template-columns:1fr}}
.splitwide .t td:last-child{white-space:normal}
.splitwide .t td:last-child form{display:inline-flex;gap:4px}
.splitwide .t td:last-child > *{margin:2px 0}

/* ---- tutorial screen ---- */
.guide__top{display:flex;align-items:center;gap:13px;margin-bottom:18px}
.guide__ic{flex:none;width:52px;height:52px;border-radius:16px;display:grid;place-items:center;
  background:color-mix(in srgb,var(--teal) 12%,var(--surface));color:var(--teal-bright);
  border:1px solid var(--border)}
.guide__ic svg{width:26px;height:26px}
.guide__h{font-size:1.25rem;font-weight:800;line-height:1.2}
.guide__k{font-family:var(--font);font-size:.7rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--teal-bright);margin-top:3px}
.guide__video{position:relative;width:100%;aspect-ratio:16/9;border-radius:16px;overflow:hidden;
  background:#000;border:1px solid var(--border);margin-bottom:16px}
.guide__video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.guide__intro{font-size:.96rem;line-height:1.65;color:var(--text);margin-bottom:20px}

.steps{list-style:none;counter-reset:none;display:grid;gap:14px;margin:0;padding:0}
.step{display:flex;gap:13px;align-items:flex-start}
.step__n{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;
  background:var(--teal);color:#fff;font-family:var(--font);font-weight:700;font-size:.82rem;
  margin-top:2px}
.step__b{flex:1;min-width:0}
.step__b p{font-size:.94rem;line-height:1.6;margin:0}
.step__img{width:100%;height:auto;border-radius:13px;margin-top:10px;border:1px solid var(--border)}

.catgrid > a{position:relative}
.catgrid__soon{position:absolute;top:7px;inset-inline-end:7px;font-style:normal;
  font-family:var(--font);font-size:.56rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--faint);background:var(--surface-2);border:1px solid var(--border);
  padding:2px 5px;border-radius:999px}

/* ---- "we will reach you on WhatsApp" note ---- */
.wanote{display:flex;gap:13px;align-items:flex-start;padding:15px;border-radius:16px;
  margin-bottom:16px;background:color-mix(in srgb,var(--green) 10%,var(--surface));
  border:1px solid color-mix(in srgb,var(--green) 34%,transparent)}
.wanote__ic{flex:none;width:38px;height:38px;border-radius:12px;display:grid;place-items:center;
  background:#25D366;color:#fff}
.wanote__ic svg{width:22px;height:22px}
.wanote b{display:block;font-family:var(--font);font-size:.95rem;color:var(--heading);margin-bottom:3px}
.wanote span{display:block;font-size:.88rem;color:var(--muted);line-height:1.55}
.wanote__num{margin-top:5px;font-family:var(--font);font-weight:700;
  color:var(--heading) !important;font-size:.92rem !important;direction:ltr;unicode-bidi:plaintext}

/* =====================================================================
   DESKTOP — from 900px the phone column becomes a proper app window:
   the bottom tab bar stands up as a sidebar and the content breathes.
   Everything below is inside the media query, so the phone layout that
   works today is untouched.
   ===================================================================== */
@media (min-width:900px){
  body.app{ padding:26px 0 }
  .app__shell{
    display:grid;
    grid-template-columns:250px minmax(0,1fr);
    grid-template-rows:auto minmax(0,1fr);
    width:min(1160px,calc(100% - 52px));
    max-width:none; height:calc(100dvh - 52px); min-height:calc(100dvh - 52px);
    border:1px solid var(--border); border-radius:22px; overflow:hidden;
    box-shadow:0 36px 80px -46px rgba(0,0,0,.55);
  }

  /* ---- the tab bar becomes the sidebar ---- */
  .atabs{
    grid-column:1; grid-row:1 / span 2;
    /* margin-inline:auto from the phone rule would shrink-wrap the column
       and leave a strip of bare shell beside it — the sidebar fills it */
    position:static; width:auto; inset:auto; margin:0;
    display:flex; flex-direction:column; align-items:stretch; gap:4px;
    padding:22px 16px calc(22px + env(safe-area-inset-bottom));
    background:var(--bg-2);
    border-top:0; border-inline-end:1px solid var(--border);
    backdrop-filter:none; -webkit-backdrop-filter:none;
  }
  .atabs::before{
    content:""; order:-2;        /* above the New request button */
    display:block; width:40px; height:40px; margin:2px 0 22px 8px; flex:none;
    background:url(../../assets/img/brand/nesam-logo.svg) center/contain no-repeat;
    filter:drop-shadow(0 5px 12px rgba(0,0,0,.2));
  }
  .atabs__i{
    flex-direction:row; align-items:center; justify-content:flex-start; gap:12px;
    padding:11px 13px; border-radius:13px; font-size:.93rem; letter-spacing:0;
  }
  .atabs__i svg{ width:21px; height:21px; flex:none }
  .atabs__i:hover{ background:var(--surface-2); color:var(--text) }
  .atabs__i.is-on{ color:var(--teal-bright); background:color-mix(in srgb,var(--teal) 13%,transparent) }
  .atabs__fab{
    order:-1; width:100%; height:auto; margin:0 0 16px; border-radius:14px;
    padding:13px 14px; gap:9px;
    font-family:var(--font); font-weight:700; font-size:.93rem;
  }
  .atabs__fab::after{ content:attr(data-label) }
  .atabs__fab:active{ transform:none }
  .atabs__fab:hover{ filter:brightness(1.05) }

  /* ---- title bar ---- */
  .abar{
    grid-column:2; grid-row:1;
    min-height:76px; padding:20px 30px; gap:14px;
    background:var(--bg); backdrop-filter:none; -webkit-backdrop-filter:none;
  }
  .abar__title{ text-align:start; font-size:1.42rem; letter-spacing:-.01em }
  .abar__mark{ display:none }
  .abar__back{ margin-inline-start:-8px }
  .abar__icon{ margin-inline-start:auto }

  /* ---- content: only this panel scrolls, so the sidebar and the title
     bar stay put the way a desktop app behaves ---- */
  .ascroll{ grid-column:2; grid-row:2; padding:24px 30px 56px;
    min-height:0; overflow-y:auto; overscroll-behavior:contain }
  .atabs{ min-height:0; overflow-y:auto }
  .alead{ font-size:1rem; max-width:62ch }

  .hero{ padding:28px 30px; border-radius:22px }
  .hero h2{ font-size:1.55rem }
  .hero p{ font-size:.98rem; max-width:48ch }
  .hero .abtn{ width:auto; min-width:230px; padding:14px 26px }
  .hero::after{ width:230px; height:230px; top:-60px }

  .catgrid{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px }
  .catgrid > a,
  .catgrid label{ min-height:112px; font-size:.78rem; padding:16px 10px }
  .cicon{ width:28px; height:28px }

  .astats{ grid-template-columns:repeat(3,minmax(0,220px)); gap:12px }
  .asec{ font-size:.76rem; margin:28px 0 12px }

  /* the long reading blocks should not run the full width */
  .acard, .rowlink, .wanote, .steps, .guide__intro,
  .thread2, .choice, .seg, .app .field, .aempty{ max-width:760px }
  .acard--wide{ max-width:none }
  .guide__video{ max-width:680px }
  .abtn{ max-width:380px }
  .abtn--full{ max-width:none }
  .wel__acts .abtn{ max-width:none }

  .rowlink:hover{ border-color:var(--teal-bright); transform:none }
  .catgrid > a:hover{ border-color:var(--teal-bright) }
  .choice label:hover{ border-color:var(--border-2) }

  .guide__top{ margin-bottom:22px }
  .guide__h{ font-size:1.5rem }
  .step__img{ max-width:460px }
  .akv{ max-width:620px }

  /* ---- the welcome / sign-in screens stay a centred card ---- */
  body.app--bare .app__shell{
    display:flex; flex-direction:column;
    width:min(520px,calc(100% - 52px)); height:auto; min-height:auto; margin-block:auto;
  }
  body.app--bare .ascroll{ overflow:visible }
  body.app--bare .abar{ grid-column:auto; grid-row:auto; min-height:56px; padding:10px 14px }
  body.app--bare .abar__title{ text-align:center; font-size:1.02rem }
  body.app--bare .abar__mark{ display:block }
  body.app--bare .ascroll{ grid-column:auto; grid-row:auto; padding:22px 26px 34px }
  body.app--bare .abtn{ max-width:none }
  body.app--bare .app .field{ max-width:none }
}

@media (min-width:1180px){
  .catgrid{ grid-template-columns:repeat(5,minmax(0,1fr)) }
}

/* =====================================================================
   العربية — the same app, read from the right.

   The layout needed almost nothing: every rule above uses logical
   properties (inset-inline, border-inline-end, text-align:start), so
   dir="rtl" on <html> mirrors the whole thing by itself. What is left
   here is the script, not the layout.
   ===================================================================== */

/* the title bar's language button, and the spacer that keeps the title
   optically centred now that there are two buttons on the trailing side */
.abar__lang{
  font-family:var(--font); font-weight:700; font-size:.84rem;
  letter-spacing:.01em; text-decoration:none;
}
.abar__spacer{ width:40px; height:40px; flex:none }

[lang="ar"]{
  --font:'Tajawal','Cairo','Poppins',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-body:'Tajawal','Cairo','Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
}
[lang="ar"] body{ font-family:var(--font-body) }

/* Arabic letters join, so letter-spacing pulls a word apart, and there
   are no capitals to make. Both have to go wherever English shouts. */
[lang="ar"] .asec,
[lang="ar"] .wel__kicker,
[lang="ar"] .guide__k,
[lang="ar"] .catgrid__soon,
[lang="ar"] .astat span,
[lang="ar"] .stat span,
[lang="ar"] .pill,
[lang="ar"] .tabs a,
[lang="ar"] .atabs__i span,
[lang="ar"] th{
  text-transform:none; letter-spacing:0;
}

/* Arabic sits lower in its line box than Latin and reads small at the
   same size, so the places where the type is tight get a little room. */
[lang="ar"] .atabs__i{ font-size:.7rem }
[lang="ar"] .catgrid > a,
[lang="ar"] .catgrid label{ font-size:.8rem; line-height:1.45 }
[lang="ar"] .guide__k{ font-size:.74rem }
[lang="ar"] .wel__kicker{ font-size:.76rem }
[lang="ar"] .acard__h,
[lang="ar"] .alead,
[lang="ar"] .step__b p,
[lang="ar"] .guide__intro{ line-height:1.8 }

/* An email address, a phone number or a reference is Latin wherever it
   appears; carrying dir="ltr" on the field keeps the +966 and the @ on
   the correct side inside an otherwise right-to-left screen. */
[dir="rtl"] .wanote__num,
[dir="rtl"] input[dir="ltr"]{ text-align:start }

/* the one button whose glyph points somewhere */
[dir="rtl"] .atabs__fab svg{ transform:none }

/* dir="auto" lets each piece of text a customer typed pick its own
   direction, which is what keeps an English sentence's full stop at its
   end inside an Arabic screen. For a paragraph that should also decide
   the alignment — but in a two-column list, or a card heading, letting it
   decide leaves the column ragged, so those stay pinned to the page. */
[dir="rtl"] .akv dd{ text-align:left }
[dir="rtl"] .acard__t[dir="auto"],
[dir="rtl"] .rowlink__t[dir="auto"],
[dir="rtl"] .choice__t[dir="auto"]{ text-align:right }