/* ══════════════════════════════════════════════════════════════
   style.css — منصة مزودي الخدمات · الرشودي للمحاماة
   مطابق لتصميم Claude Design
══════════════════════════════════════════════════════════════ */

@font-face { font-family:'Mersal'; src:url('../assets/fonts/Mersal-Light.otf')   format('opentype'); font-weight:300; font-display:block; }
@font-face { font-family:'Mersal'; src:url('../assets/fonts/Mersal-Regular.otf') format('opentype'); font-weight:400; font-display:block; }
@font-face { font-family:'Mersal'; src:url('../assets/fonts/Mersal-Medium.otf')  format('opentype'); font-weight:500; font-display:block; }
@font-face { font-family:'Mersal'; src:url('../assets/fonts/Mersal-Bold.otf')    format('opentype'); font-weight:700; font-display:block; }

:root {
  --bg:        #EDE8E1;
  --surface:   #F4EFE8;
  --surface-2: #FAF7F3;
  --surface-3: #E5DFD7;

  --ink-900: #2A2820;
  --ink-700: #3D3B33;
  --ink-500: #6B6660;
  --ink-400: #8A857E;
  --ink-300: #ADA8A2;
  --ink-200: #CCC8C2;
  --ink-100: #E0DDD8;

  --gold:       #BB9771;
  --gold-dark:  #8E6F4F;
  --gold-light: #D4B896;
  --gold-faint: rgba(187,151,113,.10);
  --gold-line:  rgba(187,151,113,.22);
  --gold-line2: rgba(187,151,113,.38);

  --footer-bg:   #373450;
  --footer-text: rgba(255,255,255,.72);
  --footer-dim:  rgba(255,255,255,.40);
  --footer-gold: #D4B896;

  --ok:    #2E7D5A;  --ok-bg:   rgba(46,125,90,.09);
  --warn:  #8A6A1A;  --warn-bg: rgba(138,106,26,.09);
  --bad:   #8A3020;  --bad-bg:  rgba(138,48,32,.09);
  --info:  #2A5A8A;  --info-bg: rgba(42,90,138,.08);

  --r-sm:2px; --r:10px; --r-lg:14px; --r-xl:20px;
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { direction:rtl; }
html,body { background:var(--bg); color:var(--ink-900); font-family:'Mersal','Segoe UI',Tahoma,sans-serif; font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; }
button { font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }
input,textarea,select { font-family:inherit; color:inherit; direction:rtl; }
a { color:inherit; text-decoration:none; cursor:pointer; }
ul,ol { list-style:none; }
img { display:block; }
h1,h2,h3,h4,h5,h6 { line-height:1.2; color:var(--ink-900); }

/* ── Topbar ── */
.topbar {
  display:flex; align-items:center; justify-content:space-between;
  gap:24px; padding:0 48px; height:68px;
  background:var(--surface-2); border-bottom:1px solid var(--ink-100);
  position:sticky; top:0; z-index:50;
}
@media(max-width:1100px){.topbar{padding:0 20px;}}
.brand { display:flex; align-items:center; flex-shrink:0; }
.logo-svg { height:40px; width:auto; max-width:260px; object-fit:contain; }
.logo-text { font-size:15px; font-weight:700; color:var(--ink-900); }
.logo-sub  { font-size:11px; color:var(--gold-dark); }
.topnav { display:flex; gap:0; }
@media(max-width:860px){.topnav{display:none;}}
.topnav a { font-size:13.5px; color:var(--ink-500); padding:8px 18px; border-radius:8px; transition:color .16s; white-space:nowrap; }
.topnav a:hover { color:var(--ink-900); }
.topnav a.active { color:var(--gold-dark); font-weight:500; }
.topbar-right { display:flex; align-items:center; gap:10px; flex-shrink:0; }

/* ── Buttons ── */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 22px; font-size:13.5px; font-weight:500; border-radius:var(--r);
  white-space:nowrap; border:1px solid transparent; transition:all .18s; font-family:inherit; cursor:pointer;
}
.btn-gold    { background:var(--gold); color:#fff; font-weight:700; }
.btn-gold:hover { background:var(--gold-dark); }
.btn-outline { border-color:var(--ink-200); color:var(--ink-700); }
.btn-outline:hover { border-color:var(--gold); color:var(--gold-dark); background:var(--gold-faint); }
.btn-ghost   { color:var(--ink-500); }
.btn-ghost:hover { color:var(--gold-dark); }
.btn-danger  { background:var(--bad-bg); border:1px solid rgba(138,48,32,.22); color:var(--bad); }
.btn-danger:hover { background:rgba(138,48,32,.14); }
.btn-success { background:var(--ok-bg); border:1px solid rgba(46,125,90,.22); color:var(--ok); }
.btn-success:hover { background:rgba(46,125,90,.14); }
.btn-sm { padding:6px 14px; font-size:12px; }
.btn-lg { padding:13px 30px; font-size:14.5px; font-weight:600; }

/* ── Page Wrap ── */
.page-wrap { padding:0 48px 100px; max-width:1400px; margin:0 auto; width:100%; }
@media(max-width:860px){.page-wrap{padding:0 18px 80px;}}

/* ── Section title ── */
.stb { text-align:end; margin-bottom:48px; }
.stb .ar { font-size:clamp(22px,2.6vw,34px); font-weight:700; color:var(--ink-900); line-height:1.2; margin-bottom:4px; }
.stb .en { font-size:clamp(12px,1.2vw,15px); font-weight:300; color:var(--ink-300); letter-spacing:.1em; direction:ltr; display:inline-block; }

/* ── Hero ── */
.hero-section { padding:64px 48px 56px; background:var(--surface-2); border-bottom:1px solid var(--ink-100); }
.hero-grid { display:grid; grid-template-columns:1fr 300px; gap:48px; align-items:center; max-width:1400px; margin:0 auto; }
@media(max-width:920px){.hero-grid{grid-template-columns:1fr;} .hero-card{display:none!important;}}
.hero-eyebrow { display:inline-flex; align-items:center; gap:10px; margin-bottom:20px; font-size:11px; color:var(--gold-dark); letter-spacing:.2em; font-weight:500; text-transform:uppercase; direction:ltr; }
.hero-eyebrow::after { content:""; width:32px; height:1px; background:var(--gold-line2); display:inline-block; }
.hero-headline { font-size:clamp(34px,4.8vw,66px); font-weight:700; line-height:1.1; letter-spacing:-.022em; color:var(--ink-900); margin-bottom:18px; }
.hero-headline .gold { color:var(--gold-dark); }
.hero-sub { font-size:15px; color:var(--ink-500); max-width:540px; line-height:1.8; margin-bottom:36px; }
.hero-card { background:var(--surface); border:1px solid var(--ink-100); border-radius:var(--r-xl); padding:26px; }
.hc-label { font-size:10px; letter-spacing:.2em; color:var(--gold-dark); text-transform:uppercase; margin-bottom:18px; }
.hc-row { display:flex; justify-content:space-between; align-items:center; padding:11px 0; border-bottom:1px solid var(--ink-100); font-size:13.5px; }
.hc-row:last-child { border-bottom:none; }
.hc-key { color:var(--ink-400); }
.hc-val { color:var(--gold-dark); font-weight:600; }

/* ── Stats Bar ── */
.stats-bar { background:var(--surface-3); border-top:1px solid var(--ink-100); border-bottom:1px solid var(--ink-100); display:grid; grid-template-columns:repeat(4,1fr); }
@media(max-width:700px){.stats-bar{grid-template-columns:repeat(2,1fr);}}
.stat-item { padding:48px 32px; border-inline-end:1px solid var(--ink-100); text-align:center; }
.stat-item:last-child { border-inline-end:none; }
.stat-item .num { font-size:clamp(44px,5.5vw,72px); font-weight:700; color:var(--ink-900); line-height:1; letter-spacing:-.03em; }
.stat-item .lbl { font-size:13px; color:var(--ink-500); margin-top:10px; }

/* ── Services ── */
.services-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:14px; }
@media(max-width:1100px){.services-grid{grid-template-columns:repeat(3,1fr);}}
@media(max-width:700px){.services-grid{grid-template-columns:1fr 1fr;}}
.service-card { background:var(--surface); border:1px solid var(--ink-100); border-radius:var(--r-lg); padding:28px 22px; display:flex; flex-direction:column; transition:background .18s,border-color .18s; }
.service-card:hover { background:var(--surface-2); border-color:var(--gold-line); }
.service-card .snum { font-size:10px; color:var(--ink-300); letter-spacing:.2em; margin-bottom:16px; direction:ltr; }
.service-card .glyph { width:26px; height:26px; color:var(--gold-dark); margin-bottom:14px; stroke:currentColor; fill:none; stroke-width:1.4; }
.service-card .glyph svg { width:100%; height:100%; }
.service-card h4 { font-size:16.5px; color:var(--ink-900); font-weight:600; margin-bottom:4px; }
.service-card .sen { font-size:10px; color:var(--gold-dark); letter-spacing:.1em; margin-bottom:10px; direction:ltr; }
.service-card p { font-size:12.5px; color:var(--ink-500); line-height:1.7; flex:1; }
.service-card .card-link { display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--gold-dark); margin-top:18px; font-weight:500; transition:gap .16s; }
.service-card:hover .card-link { gap:10px; }

/* ── Timeline ── */
.tl-grid { display:grid; grid-template-columns:repeat(7,1fr); border:1px solid var(--ink-100); border-radius:var(--r-xl); overflow:hidden; background:var(--ink-100); gap:1px; }
@media(max-width:1100px){.tl-grid{grid-template-columns:repeat(4,1fr);}}
@media(max-width:600px){.tl-grid{grid-template-columns:repeat(2,1fr);}}
.tl-step { background:var(--surface); padding:28px 16px; text-align:center; transition:background .18s; }
.tl-step:hover { background:var(--surface-2); }
.tl-step.active { background:var(--gold-faint); }
.tl-step .dot { width:36px; height:36px; border-radius:50%; border:1px solid var(--ink-200); background:var(--surface-3); color:var(--gold-dark); font-weight:700; font-size:12px; display:flex; align-items:center; justify-content:center; margin:0 auto 14px; direction:ltr; }
.tl-step.active .dot { background:var(--gold); color:#fff; border-color:var(--gold); }
.tl-step h5 { font-size:12.5px; color:var(--ink-900); font-weight:600; margin-bottom:5px; }
.tl-step p  { font-size:11px; color:var(--ink-400); line-height:1.5; }

/* Grade Cards */
.grade-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
@media(max-width:700px){.grade-cards{grid-template-columns:1fr;}}
.grade-card { padding:24px 20px; border-radius:var(--r-lg); background:var(--surface); border:1px solid var(--ink-100); }
.g-pct { font-size:32px; font-weight:700; line-height:1; letter-spacing:-.02em; margin-bottom:8px; }
.g-lbl { font-size:12px; color:var(--ink-500); margin-bottom:6px; font-weight:500; }
.g-desc { font-size:12px; color:var(--ink-400); line-height:1.6; }

/* CTA Band */
.cta-band { padding:52px 48px; border-radius:var(--r-xl); border:1px solid var(--gold-line2); background:linear-gradient(135deg,var(--gold-faint),transparent 60%),var(--surface); display:flex; align-items:center; justify-content:space-between; gap:28px; flex-wrap:wrap; }
.cta-eyebrow { display:inline-flex; align-items:center; gap:10px; margin-bottom:10px; font-size:11px; color:var(--gold-dark); letter-spacing:.2em; text-transform:uppercase; }
.cta-eyebrow::before { content:""; width:24px; height:1px; background:var(--gold-line2); display:inline-block; }

/* ── Footer ── */
.footer { background:var(--footer-bg); color:var(--footer-text); padding:60px 48px 32px; }
.footer-inner { max-width:1400px; margin:0 auto; }
.footer-grid { display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:48px; margin-bottom:44px; }
@media(max-width:860px){.footer-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:580px){.footer-grid{grid-template-columns:1fr;}}
.footer-col h6 { font-size:10px; color:var(--footer-gold); letter-spacing:.2em; text-transform:uppercase; margin-bottom:18px; font-weight:500; }
.footer-col ul li { font-size:13px; padding:5px 0; }
.footer-col ul li a { color:var(--footer-text); transition:color .14s; }
.footer-col ul li a:hover { color:#fff; }
.footer-name { font-size:15px; font-weight:600; color:#fff; margin-top:14px; margin-bottom:4px; }
.footer-role { font-size:12px; color:var(--footer-dim); }
.footer-contact { margin-top:16px; display:flex; flex-direction:column; gap:5px; }
.footer-contact a { font-size:13px; color:var(--footer-text); transition:color .14s; direction:ltr; text-align:end; }
.footer-contact a:hover { color:#fff; }
.footer-legal { border-top:1px solid rgba(255,255,255,.1); padding-top:22px; display:flex; justify-content:space-between; align-items:center; font-size:11px; color:var(--footer-dim); flex-wrap:wrap; gap:8px; }

/* ── Form ── */
.field { margin-bottom:20px; }
.field label { display:block; font-size:12px; color:var(--ink-500); margin-bottom:8px; font-weight:500; }
.field label .req,.req { color:var(--gold-dark); margin-inline-start:3px; }
.input,.textarea,.select { width:100%; padding:12px 16px; background:var(--surface); border:1px solid var(--ink-200); border-radius:var(--r); color:var(--ink-900); font-size:14px; font-family:inherit; transition:border-color .18s; }
.input::placeholder,.textarea::placeholder { color:var(--ink-200); }
.input:focus,.textarea:focus,.select:focus { outline:none; border-color:var(--gold); box-shadow:0 0 0 3px var(--gold-faint); }
.textarea { resize:vertical; min-height:96px; }
.field-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media(max-width:600px){.field-row{grid-template-columns:1fr;}}
.field-helper { font-size:11px; color:var(--ink-300); margin-top:5px; }

/* Chips */
.chip-row { display:flex; flex-wrap:wrap; gap:8px; }
.chip { padding:8px 16px; border:1px solid var(--ink-200); border-radius:100px; font-size:13px; color:var(--ink-500); cursor:pointer; background:var(--surface); transition:all .16s; display:inline-flex; align-items:center; gap:7px; user-select:none; }
.chip:hover { border-color:var(--gold); color:var(--ink-900); }
.chip.selected { background:var(--gold-faint); border-color:var(--gold); color:var(--gold-dark); font-weight:500; }
.chip .ck { width:14px; height:14px; border-radius:50%; border:1px solid var(--ink-200); display:flex; align-items:center; justify-content:center; font-size:9px; flex-shrink:0; }
.chip.selected .ck { background:var(--gold); border-color:var(--gold); color:#fff; }

/* Upload */
.upload { border:1.5px dashed var(--ink-200); border-radius:var(--r); padding:22px; text-align:center; cursor:pointer; transition:all .18s; background:var(--surface); }
.upload:hover { background:var(--gold-faint); border-color:var(--gold); }
.upload.uploaded { border-style:solid; border-color:rgba(46,125,90,.4); background:rgba(46,125,90,.04); }
.upload .icn { width:22px; height:22px; margin:0 auto 10px; color:var(--gold-dark); }
.upload .icn svg { width:100%; height:100%; stroke:currentColor; fill:none; stroke-width:1.5; }
.upload h6 { font-size:13px; color:var(--ink-900); margin-bottom:4px; font-weight:500; }
.upload p { font-size:11px; color:var(--ink-400); }

/* Surface card */
.surface { background:var(--surface); border:1px solid var(--ink-100); border-radius:var(--r-lg); }

/* ── Admin ── */
.admin-shell { display:grid; grid-template-columns:240px minmax(0,1fr); gap:0; min-height:calc(100vh - 68px); }
@media(max-width:1000px){.admin-shell{grid-template-columns:1fr;}}
.admin-side { background:var(--surface-2); border-inline-end:1px solid var(--ink-100); padding:20px 12px; position:sticky; top:68px; height:calc(100vh - 68px); overflow-y:auto; }
@media(max-width:1000px){.admin-side{display:none;}}
.side-group { font-size:10px; color:var(--ink-300); letter-spacing:.18em; text-transform:uppercase; margin:16px 10px 6px; }
.aside-link { display:flex; align-items:center; gap:10px; padding:10px 14px; font-size:13px; color:var(--ink-500); border-radius:8px; transition:all .16s; cursor:pointer; margin-bottom:2px; text-decoration:none; }
.aside-link svg { width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:1.6; flex-shrink:0; }
.aside-link:hover { color:var(--ink-900); background:var(--surface-3); }
.aside-link.active { color:var(--gold-dark); background:var(--gold-faint); font-weight:500; }
.badge-mini { margin-inline-start:auto; font-size:10px; padding:2px 7px; border-radius:100px; background:var(--gold); color:#fff; font-weight:700; }
.admin-main { padding:32px 36px 60px; }
@media(max-width:800px){.admin-main{padding:18px;}}

/* Admin stats */
.admin-stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:14px; margin-bottom:28px; }
.stat-card { background:var(--surface); border:1px solid var(--ink-100); border-radius:var(--r-lg); padding:22px; position:relative; }
.stat-card .lbl { font-size:12px; color:var(--ink-400); margin-bottom:14px; }
.stat-card .val { font-size:36px; font-weight:700; color:var(--ink-900); line-height:1; letter-spacing:-.02em; }
.stat-card.gold .val { color:var(--gold-dark); }
.stat-card .ico { position:absolute; inset-inline-end:18px; top:18px; width:22px; height:22px; color:var(--ink-200); }
.stat-card .ico svg { width:100%; height:100%; stroke:currentColor; fill:none; stroke-width:1.4; }

/* Table */
.table-wrap { background:var(--surface); border:1px solid var(--ink-100); border-radius:var(--r-lg); overflow:hidden; }
.table-head { display:flex; align-items:center; justify-content:space-between; padding:16px 22px; border-bottom:1px solid var(--ink-100); flex-wrap:wrap; gap:12px; }
.table-head h3 { font-size:15px; font-weight:600; }
.table-tabs { display:flex; gap:2px; }
.tt { font-size:12px; color:var(--ink-400); padding:6px 12px; border-radius:6px; cursor:pointer; transition:all .14s; white-space:nowrap; text-decoration:none; }
.tt.active { color:var(--gold-dark); background:var(--gold-faint); font-weight:500; }
.tt:hover { color:var(--ink-900); }
.table { width:100%; border-collapse:collapse; }
.table th,.table td { padding:13px 22px; text-align:start; font-size:13px; border-bottom:1px solid var(--ink-100); }
.table th { color:var(--ink-400); font-weight:500; font-size:11px; letter-spacing:.08em; text-transform:uppercase; background:var(--surface-3); }
.table tbody tr { transition:background .12s; }
.table tbody tr:hover { background:var(--surface-3); }
.table td:last-child { text-align:end; }

/* Pills */
.pill { display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:100px; font-size:11px; font-weight:500; border:1px solid transparent; }
.pill .dot { width:5px; height:5px; border-radius:50%; flex-shrink:0; }
.pill.warn  { color:var(--warn); background:var(--warn-bg); border-color:rgba(138,106,26,.22); } .pill.warn .dot  { background:var(--warn); }
.pill.ok    { color:var(--ok);   background:var(--ok-bg);   border-color:rgba(46,125,90,.22);  } .pill.ok .dot    { background:var(--ok);   }
.pill.bad   { color:var(--bad);  background:var(--bad-bg);  border-color:rgba(138,48,32,.22);  } .pill.bad .dot   { background:var(--bad);  }
.pill.info  { color:var(--info); background:var(--info-bg); border-color:rgba(42,90,138,.2);   } .pill.info .dot  { background:var(--info); }
.pill.gold  { color:var(--gold-dark); background:var(--gold-faint); border-color:var(--gold-line2); } .pill.gold .dot { background:var(--gold); }

/* Avatar */
.avatar { border-radius:50%; background:var(--surface-3); border:1px solid var(--ink-100); display:inline-flex; align-items:center; justify-content:center; font-weight:600; color:var(--gold-dark); width:32px; height:32px; font-size:12px; flex-shrink:0; }
.avatar.lg { width:52px; height:52px; font-size:18px; }
.avatar.xl { width:72px; height:72px; font-size:24px; }

/* Detail */
.detail-grid { display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:22px; }
@media(max-width:1100px){.detail-grid{grid-template-columns:1fr;}}
.profile-card { background:var(--surface); border:1px solid var(--ink-100); border-radius:var(--r-lg); padding:26px; }
.profile-head { display:flex; align-items:flex-start; gap:16px; padding-bottom:22px; border-bottom:1px solid var(--ink-100); margin-bottom:22px; }
.profile-head .info { flex:1; min-width:0; }
.kv-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:16px 24px; }
.kv .k { font-size:10px; color:var(--ink-300); letter-spacing:.1em; text-transform:uppercase; margin-bottom:4px; }
.kv .v { font-size:14px; color:var(--ink-900); font-weight:500; }
.kv .vsub { font-size:12px; color:var(--ink-400); font-weight:400; }
.sec-head { display:flex; align-items:center; justify-content:space-between; margin:0 0 14px; }
.sec-head h3 { font-size:14px; font-weight:600; }
.doc-list { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:10px; }
.doc { display:flex; align-items:center; gap:12px; padding:13px; background:var(--surface-3); border:1px solid var(--ink-100); border-radius:var(--r); transition:all .16s; cursor:pointer; }
.doc:hover { background:var(--surface-2); border-color:var(--gold-line); }
.doc .ico { width:32px; height:32px; border-radius:8px; background:var(--gold-faint); color:var(--gold-dark); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.doc .meta h6 { font-size:13px; color:var(--ink-900); margin-bottom:2px; font-weight:500; }
.doc .meta p { font-size:11px; color:var(--ink-400); direction:ltr; text-align:end; }

/* Aside Card */
.aside-card { background:var(--surface); border:1px solid var(--ink-100); border-radius:var(--r-lg); padding:20px; margin-bottom:14px; }
.aside-card h4 { font-size:11px; color:var(--gold-dark); letter-spacing:.14em; text-transform:uppercase; margin-bottom:14px; font-weight:500; }

/* Event list */
.event-list { padding-inline-start:18px; position:relative; }
.event-list::before { content:""; position:absolute; inset-inline-start:4px; top:8px; bottom:8px; width:1px; background:var(--ink-100); }
.event { position:relative; padding:6px 0 14px; }
.event::before { content:""; position:absolute; inset-inline-start:-18px; top:12px; width:9px; height:9px; border-radius:50%; background:var(--surface); border:2px solid var(--gold); }
.event h6 { font-size:13px; color:var(--ink-900); margin-bottom:2px; font-weight:500; }
.event p { font-size:12px; color:var(--ink-400); }
.event time { font-size:10px; color:var(--ink-300); letter-spacing:.08em; direction:ltr; display:inline-block; }

/* Scrollbar */
::-webkit-scrollbar { width:8px; }
::-webkit-scrollbar-track { background:var(--surface-3); }
::-webkit-scrollbar-thumb { background:var(--ink-200); border-radius:4px; border:2px solid var(--surface-3); }