/* ============================================================
   A.S.K. — Client Portal shared styles
   Used by: client-login.html, client-portal.html, reset-password.html
   One place to edit portal look & feel — do not fork these rules
   back into per-page <style> blocks.
   ============================================================ */

:root{
  --bg:#0a0a0a;
  --surface:#121212;
  --surface-2:#171717;
  --surface-3:#1d1d1d;
  --line:rgba(255, 209, 102,.10);
  --line-strong:rgba(255, 209, 102,.18);
  --brand:#FFD166;
  --brand-soft:#FFE29A;
  --accent:#E0AC4A;
  --text:#FFFFFF;
  --muted:#a8a097;
  --muted-2:#7e7871;
  --ok:#7fd99a;
  --ok-bg:rgba(78,135,90,.16);
  --ok-line:rgba(129,198,143,.22);
  --err:#f4a4a4;
  --err-bg:rgba(128,20,20,.16);
  --err-line:rgba(220,101,101,.25);
  --shadow:0 20px 60px rgba(0,0,0,.34);
  --radius-xl:28px;
  --radius-lg:22px;
  --radius-md:16px;
  --space-xs:.75rem;
  --space-sm:1rem;
  --space-md:1.25rem;
  --space-lg:1.5rem;
  --space-xl:2rem;
  --space-2xl:2.5rem;
  --font-family-base:"Segoe UI","Segoe UI Emoji","Segoe UI Symbol",Tahoma,Arial,"Noto Sans Arabic","Noto Sans","Tajawal","Helvetica Neue",sans-serif;
  --portal-nav-h:4.5rem;
}

.portal-body{
  min-height:100vh;
  background:
    radial-gradient(circle at top,rgba(255, 209, 102,.12),transparent 30%),
    linear-gradient(180deg,#090909 0%,#0d0d0d 100%);
  color:var(--text);
  font-family:var(--font-family-base);
}

html[lang=en] .ar-txt,html[lang=ar] .en-txt{display:none;}
html[lang=en] .en-txt,html[lang=ar] .ar-txt{display:inline;}
html[lang=en]{direction:ltr;}
html[lang=ar]{direction:rtl;}

/* ---------- Home link ---------- */
.portal-home-link{
  position:fixed;
  inset-block-start:var(--space-md);
  inset-inline-start:var(--space-md);
  z-index:50;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:2.75rem;
  height:2.75rem;
  border-radius:999px;
  background:rgba(255,255,255,.06);
  border:1px solid var(--line);
  color:var(--text);
  text-decoration:none;
  font-size:1.25rem;
  line-height:1;
}
html[lang=en] .portal-home-link{transform:scaleX(-1);}

/* ---------- Auth pages (login / reset-password) ---------- */
.auth-shell{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:var(--space-xl) var(--space-md);
}
.auth-wrap{width:100%;max-width:460px;}
.auth-logo{
  appearance:none;background:none;border:none;cursor:default;
  display:block;margin:0 auto var(--space-xl);padding:var(--space-xs);
}
.auth-logo img{height:76px;object-fit:contain;display:block;margin:0 auto;}

.lang-btns{display:flex;gap:var(--space-xs);justify-content:center;margin-bottom:var(--space-lg);}
.lang-btn{
  background:none;border:1px solid rgba(255,244,214,.12);border-radius:999px;
  padding:.6rem 1.1rem;color:var(--muted);cursor:pointer;font-size:.95rem;font-weight:700;
  letter-spacing:.02em;transition:all .2s ease;
}
.lang-btn.active{border-color:var(--brand);color:#fff;box-shadow:0 0 0 1px rgba(255, 209, 102,.12);}

.auth-card{
  position:relative;background:var(--surface);border:1px solid var(--line-strong);
  border-radius:var(--radius-lg);padding:var(--space-2xl) var(--space-xl);
  box-shadow:var(--shadow);
}
.auth-eyebrow{
  display:flex;align-items:center;gap:var(--space-xs);margin-bottom:var(--space-sm);
  font-size:.9rem;font-weight:700;letter-spacing:.02em;color:var(--brand-soft);
}
.auth-card h1{font-size:1.75rem;line-height:1.2;font-weight:700;margin-bottom:var(--space-sm);color:#fff;}
.auth-card .sub{font-size:1rem;color:var(--muted);margin-bottom:var(--space-lg);}

/* ---------- Form controls ---------- */
label{display:block;font-size:.95rem;font-weight:700;color:var(--muted);margin-bottom:var(--space-xs);}
input[type=text],input[type=password]{
  width:100%;background:var(--surface-2);border:1px solid rgba(255,244,214,.08);
  border-radius:var(--radius-md);padding:var(--space-sm) var(--space-md);
  color:var(--text);font-size:1rem;outline:none;margin-bottom:var(--space-md);
  transition:border-color .2s,box-shadow .2s;font-family:inherit;
}
input[type=text]:focus,input[type=password]:focus{
  border-color:var(--brand);box-shadow:0 0 0 4px rgba(255, 209, 102,.08);
}
input::placeholder{color:var(--muted-2);}

.btn{
  border:none;border-radius:999px;padding:var(--space-sm) var(--space-md);
  font-size:1rem;font-weight:700;letter-spacing:.02em;cursor:pointer;
  transition:transform .2s,box-shadow .2s,opacity .2s;font-family:inherit;
}
.btn:hover{transform:translateY(-1px);}
.btn:disabled{opacity:.55;cursor:not-allowed;transform:none;}
.btn-block{width:100%;}
.btn-primary{background:var(--brand);color:#fff;box-shadow:0 16px 30px rgba(255, 209, 102,.18);}
.btn-ghost{background:rgba(255,255,255,.03);color:var(--text);border:1px solid var(--line-strong);}
.btn-danger{background:transparent;color:var(--err);border:1px solid var(--err-line);}

.msg{
  display:none;background:var(--err-bg);border:1px solid var(--err-line);border-radius:var(--radius-md);
  padding:var(--space-sm) var(--space-md);font-size:.95rem;color:var(--err);margin-bottom:var(--space-md);
}
.msg.show{display:block;}
.msg.ok{background:var(--ok-bg);border-color:var(--ok-line);color:var(--ok);}

.text-link{background:none;border:none;padding:0;color:var(--brand-soft);cursor:pointer;font-size:.9rem;text-decoration:none;}
.text-link:hover{color:#fff;}
.text-link:disabled{opacity:.55;cursor:not-allowed;}
.form-links{display:flex;justify-content:flex-end;margin:calc(var(--space-xs) * -1) 0 var(--space-md);}

.auth-footer{text-align:center;margin-top:var(--space-lg);font-size:.9rem;color:var(--muted-2);}
.auth-footer a{color:var(--brand-soft);text-decoration:none;}
.auth-footer a:hover{color:#fff;}

/* ---------- Portal dashboard shell ---------- */
.portal-nav{
  position:fixed;inset-block-start:0;inset-inline:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  padding-inline:var(--space-xl);height:var(--portal-nav-h);
  background:rgba(10,10,10,.92);backdrop-filter:blur(16px);
  border-bottom:1px solid var(--line-strong);
}
.portal-nav-logo img{height:2.5rem;display:block;object-fit:contain;}
.portal-nav-right{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;}
.nav-pill{
  display:inline-flex;align-items:center;gap:.4rem;padding:.4rem .8rem;border-radius:999px;
  border:1px solid var(--line);background:rgba(255,255,255,.02);color:var(--muted);font-size:.75rem;
}

.portal-main{padding:calc(var(--portal-nav-h) + var(--space-xl)) var(--space-xl) var(--space-xl);max-width:70rem;margin-inline:auto;}

.state-card{display:none;text-align:center;padding:var(--space-2xl) var(--space-lg);}
.state-card.show{display:block;}

.hero{margin-bottom:var(--space-xl);}
.status-badge{
  display:inline-flex;align-items:center;gap:.4rem;padding:.4rem .9rem;border-radius:999px;
  font-size:.8rem;font-weight:700;background:var(--ok-bg);border:1px solid var(--ok-line);color:var(--ok);
  margin-bottom:var(--space-sm);
}
.status-badge.status-inactive{background:rgba(198,150,40,.14);border-color:rgba(214,168,66,.28);color:#e8c877;}
.status-badge.status-closed{background:rgba(120,120,120,.14);border-color:rgba(160,160,160,.24);color:#c9c4bb;}
.hero h1{font-size:1.6rem;color:#fff;margin-bottom:.3rem;}
.hero p{color:var(--muted);font-size:.95rem;}

.summary-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));gap:var(--space-sm);
  margin-bottom:var(--space-xl);
}
.stat-card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md);
  padding:var(--space-md);
}
.stat-card .stat-label{font-size:.78rem;color:var(--muted-2);margin-bottom:.3rem;}
.stat-card .stat-value{font-size:1.05rem;font-weight:700;color:#fff;word-break:break-word;}

.panel{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:var(--space-lg);margin-bottom:var(--space-lg);
}
.panel-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-md);}
.panel-title h2{font-size:1.05rem;color:#fff;}
.panel-empty,.empty{color:var(--muted-2);font-size:.9rem;padding:var(--space-md) 0;text-align:center;}

.update-item{
  padding:var(--space-sm) 0;border-block-start:1px solid var(--line);
}
.update-item:first-child{border-block-start:none;}
.update-item .update-title{font-weight:700;color:#fff;margin-bottom:.2rem;}
.update-item .update-body{color:var(--muted);font-size:.9rem;margin-bottom:.2rem;}
.update-item .update-date{color:var(--muted-2);font-size:.78rem;}

/* File cards — markup generated by assets/js/client-portal.js (fileCardHtml) */
.doc-item{
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-sm);
  padding:var(--space-sm);border:1px solid var(--line);border-radius:var(--radius-md);
  margin-bottom:.6rem;background:var(--surface-2);flex-wrap:wrap;
}
.doc-item:last-child{margin-bottom:0;}
.doc-main{display:flex;align-items:center;gap:.7rem;min-width:0;}
.doc-icon{
  flex-shrink:0;width:2.5rem;height:2.5rem;border-radius:var(--radius-md);
  background:var(--surface-3);border:1px solid var(--line);color:var(--brand-soft);
  display:flex;align-items:center;justify-content:center;font-size:.65rem;font-weight:700;
}
.doc-text{min-width:0;}
.doc-name{font-weight:600;color:#fff;font-size:.9rem;word-break:break-word;}
.doc-date{color:var(--muted-2);font-size:.75rem;}
.doc-actions{display:flex;align-items:center;gap:.5rem;flex-shrink:0;}
.doc-badge{
  font-size:.7rem;color:var(--muted-2);border:1px solid var(--line);border-radius:999px;
  padding:.15rem .55rem;white-space:nowrap;
}
.btn-dl{
  background:rgba(255,255,255,.04);border:1px solid var(--line-strong);color:var(--text);
  border-radius:999px;padding:.4rem .9rem;font-size:.8rem;font-weight:700;cursor:pointer;
  font-family:inherit;
}
.btn-dl:hover{border-color:var(--brand);}

.upload-zone{
  border:2px dashed var(--line-strong);border-radius:var(--radius-md);
  padding:var(--space-xl) var(--space-md);text-align:center;cursor:pointer;
  color:var(--muted);transition:border-color .2s,background .2s;margin-bottom:var(--space-md);
}
.upload-zone:hover,.upload-zone.dragover{border-color:var(--brand);background:rgba(255, 209, 102,.04);}
.upload-zone.loading{opacity:.6;pointer-events:none;}
.upload-zone input[type=file]{display:none;}

.toast-stack{
  position:fixed;inset-block-end:var(--space-lg);inset-inline-end:var(--space-lg);z-index:200;
  display:flex;flex-direction:column;gap:.5rem;max-width:20rem;
}
.toast{
  display:flex;flex-direction:column;gap:.2rem;
  background:var(--surface-3);border:1px solid var(--line-strong);border-radius:var(--radius-md);
  padding:.8rem 1rem;font-size:.85rem;color:var(--text);box-shadow:var(--shadow);
}
.toast.ok{border-color:var(--ok-line);}
.toast.ok strong{color:var(--ok);}
.toast.err{border-color:var(--err-line);}
.toast.err strong{color:var(--err);}

/* ---------- Responsive ---------- */
@media(max-width:640px){
  .portal-nav{padding-inline:var(--space-md);}
  .portal-main{padding:calc(var(--portal-nav-h) + var(--space-lg)) var(--space-md) var(--space-lg);}
  .auth-card{padding:var(--space-xl) var(--space-lg);}
  .summary-grid{grid-template-columns:repeat(2,1fr);}
  .doc-item{flex-direction:column;align-items:flex-start;}
  .doc-actions{width:100%;justify-content:space-between;}
}