:root{
  --navy:#0C1C49;
  --navy-soft:#4A5578;
  --paper:#F7F5F0;
  --card:#FFFFFF;
  --line:#E4E0D5;
  --gold:#D29112;
  --gold-deep:#A5730D;
  --gold-tint:#FBF0DC;

  --ok:#1F7A4D;      --ok-tint:#E4F3EA;   --ok-mid:#2E9A63;
  --hold:#B23A34;    --hold-tint:#FBE7E5; --hold-mid:#D14A43;
  --neg:#2A5FA5;     --neg-tint:#E7EFFA;  --neg-mid:#3E77C4;
  --muted:#8A8578;   --muted-tint:#F1EFE9;
}
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0; background:var(--paper); color:var(--navy);
  font-family:'IBM Plex Sans Arabic','Tajawal',sans-serif;
  overflow-x:hidden;
}
a{color:inherit; text-decoration:none;}
img{max-width:100%;}
.app{max-width:1180px; margin:0 auto; padding:0 16px 60px;}

/* ---------- topbar ---------- */
.topbar{display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:22px; padding:16px 0; border-bottom:2px solid var(--navy); flex-wrap:wrap;}
.brandmark{display:flex; align-items:center; gap:10px; min-width:0;}
.brandmark img{height:44px; width:auto; flex-shrink:0;}
.brandmark .divider{width:1px; height:32px; background:var(--line); flex-shrink:0;}
.brandmark .titles{min-width:0;}
.brandmark .titles h1{font-family:'Tajawal',sans-serif; font-weight:900; font-size:16px; margin:0; color:var(--navy); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.brandmark .titles span{font-size:11px; color:var(--gold-deep); font-weight:500; display:block; margin-top:2px;}
.tabs{display:flex; gap:6px; background:var(--card); border:1px solid var(--line); padding:4px; border-radius:10px; width:100%; max-width:340px;}
.tab{padding:9px 14px; font-size:13px; font-weight:500; color:var(--navy-soft); cursor:pointer; border-radius:7px; flex:1; text-align:center; white-space:nowrap;}
.tab.active{background:var(--navy); color:#fff;}

/* تبويبات لوحة الإدارة الداخلية (الوحدات / العملاء / المشاريع / المستخدمون):
   كل تبويب ياخذ عرضه الطبيعي حسب طول كلمته بدل التوزيع المتساوي، حتى ما تنقص
   مساحة كلمة زي "المستخدمون" وتطلع خارج حدود الصندوق. */
.subtabs{width:fit-content; max-width:100%; flex-wrap:wrap;}
.subtabs .tab{flex:0 0 auto; padding:9px 18px;}

@media(max-width:480px){
  .topbar{padding:12px 0;}
  .brandmark img{height:36px;}
  .brandmark .titles h1{font-size:13px; max-width:none; white-space:normal; overflow:visible; text-overflow:clip; line-height:1.3;}
  .brandmark .titles span{font-size:10px;}
  .tabs{max-width:100%;}
  .tab{padding:8px 6px; font-size:12px;}
  .subtabs .tab{padding:8px 12px;}
  .btn-whatsapp{padding:8px 14px; font-size:12.5px;}
}

/* ---------- stats ---------- */
.stat-row{display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:22px;}
.stat{background:var(--card); border:1px solid var(--line); border-radius:10px; padding:14px 16px; border-top:3px solid transparent;}
.stat b{display:block; font-size:26px; font-weight:700; font-family:'Tajawal';}
.stat span{font-size:12.5px; color:var(--navy-soft);}

/* ---------- toolbar / forms ---------- */
.toolbar{display:flex; gap:10px; margin-bottom:18px; align-items:center; flex-wrap:wrap;}
.search-wrap{position:relative; flex:1; min-width:200px;}
.search-wrap i{position:absolute; right:14px; top:50%; transform:translateY(-50%); color:var(--navy-soft); font-size:17px;}
.search-wrap input{width:100%; padding:11px 40px 11px 14px; border:1px solid var(--line); border-radius:9px; font-size:14px; background:var(--card); font-family:inherit; color:var(--navy);}
select, input[type=text], input[type=tel], input[type=number], textarea{
  padding:11px 14px; border:1px solid var(--line); border-radius:9px; font-size:14px; background:var(--card); font-family:inherit; color:var(--navy);
}
textarea{resize:vertical; line-height:1.6;}
input:focus, select:focus, textarea:focus{outline:none; border-color:var(--gold);}
.filter-chip{padding:9px 14px; border:1px solid var(--line); border-radius:9px; background:var(--card); font-size:13.5px; cursor:pointer; color:var(--navy-soft);}
.filter-chip.on{border-color:var(--navy); color:var(--navy); font-weight:500;}
.btn-primary{background:var(--navy); color:#fff; border:none; padding:11px 20px; border-radius:9px; font-size:14px; font-weight:500; cursor:pointer; font-family:inherit; display:inline-flex; align-items:center; gap:6px; transition:background-color .15s ease, transform .1s ease;}
.btn-primary:hover{background:#081436;}
.btn-primary:active{transform:scale(.96);}
.btn-primary i{color:var(--gold);}
.btn-ghost{background:var(--card); color:var(--navy); border:1px solid var(--line); padding:9px 16px; border-radius:9px; font-size:13.5px; cursor:pointer; font-family:inherit; transition:transform .1s ease, background-color .15s ease;}
.btn-ghost:active{transform:scale(.96);}
.btn-danger{background:var(--hold-tint); color:var(--hold); border:1px solid var(--hold-mid); padding:9px 16px; border-radius:9px; font-size:13.5px; cursor:pointer; font-family:inherit; transition:transform .1s ease, background-color .15s ease;}
.btn-danger:active{transform:scale(.96);}
.btn-whatsapp{background:#25D366; color:#fff; border:none; padding:10px 18px; border-radius:9px; font-size:13.5px; font-weight:600; cursor:pointer; font-family:inherit; display:inline-flex; align-items:center; gap:7px; transition:background-color .15s ease, transform .1s ease;}
.btn-whatsapp:hover{background:#1EBE5A;}
.btn-whatsapp:active{transform:scale(.96);}
.field{display:flex; flex-direction:column; gap:6px; margin-bottom:14px;}
.field label{font-size:13px; color:var(--navy-soft); font-weight:500;}
.field .hint{font-size:11px; color:var(--navy-soft); font-weight:400; margin-top:-2px;}

/* ---------- flash ---------- */
.flash{padding:12px 16px; border-radius:9px; margin-bottom:16px; font-size:14px;}
.flash.error{background:var(--hold-tint); color:var(--hold);}
.flash.ok{background:var(--ok-tint); color:var(--ok);}

/* ---------- units grid ----------
   auto-fill (بدل auto-fit) يخلي أي أعمدة فاضية تحافظ على مكانها بدل ما توزّع
   مساحتها على البطاقة الوحيدة الموجودة — عشان ما تطلع بطاقة الوحدة عريضة
   وقصيرة لما تكون النتيجة وحدة وحدة فقط (زي نتيجة بحث بمشروع فيه وحدة متاحة واحدة). */
.units-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(255px,1fr)); gap:14px;}
.unit-card{background:var(--card); border:1px solid var(--line); border-radius:12px; overflow:hidden; transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease; max-width:380px;}
.unit-card:hover{border-color:var(--navy-soft); transform:translateY(-3px); box-shadow:0 14px 28px -18px rgba(12,28,73,.25);}
.unit-card:active{transform:scale(.98); transition:transform .08s ease;}
.unit-card .strip{height:5px;}
.unit-body{padding:16px;}
.unit-top{display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:10px;}
.unit-top h3{margin:0; font-size:16px; font-weight:700; font-family:'Tajawal';}
.unit-top p{margin:2px 0 0; font-size:12.5px; color:var(--navy-soft);}
.status-pill{font-size:11.5px; font-weight:500; padding:4px 10px; border-radius:20px; white-space:nowrap;}
.unit-meta{display:flex; gap:14px; margin:12px 0; font-size:13px; color:var(--navy-soft);}
.unit-meta div{display:flex; align-items:center; gap:5px;}
.unit-price{font-size:18px; font-weight:700; font-family:'Tajawal'; border-top:1px solid var(--line); padding-top:10px; margin-top:2px; color:var(--gold-deep);}
.unit-price span{font-size:12px; font-weight:400; color:var(--navy-soft);}
.unit-card .cta{display:block; text-align:center; padding:11px; background:var(--navy); color:#fff; font-size:13.5px; font-weight:500; transition:background-color .15s ease, transform .1s ease;}
.unit-card .cta:hover{background:#081436;}
.unit-card .cta:active{transform:scale(.96);}
.unit-card .cta.disabled{background:var(--muted-tint); color:var(--muted); pointer-events:none;}

/* ---------- client list ---------- */
.client-list{display:flex; flex-direction:column; gap:8px;}
.client-row{display:grid; grid-template-columns:4px 1fr auto auto auto; align-items:center; gap:16px; background:var(--card); border:1px solid var(--line); border-radius:10px; padding:13px 16px 13px 0;}
.client-row .bar{align-self:stretch; border-radius:4px;}
.client-name{font-weight:600; font-size:14.5px;}
.client-sub{font-size:12px; color:var(--navy-soft); margin-top:3px; display:flex; gap:12px; flex-wrap:wrap;}
.client-sub span{display:flex; align-items:center; gap:4px;}
.status-tag{font-size:12px; font-weight:500; padding:6px 13px; border-radius:20px; text-align:center; min-width:88px;}

.client-row.has-notes{border-radius:10px 10px 0 0; border-bottom:none;}
.client-notes{background:var(--card); border:1px solid var(--line); border-top:none; border-radius:0 0 10px 10px;}
.client-notes summary{padding:10px 16px; font-size:12.5px; font-weight:500; color:var(--navy-soft); cursor:pointer; display:flex; align-items:center; gap:6px;}
.client-notes form{padding:0 16px 14px; display:flex; flex-direction:column; gap:10px; align-items:flex-start;}

/* ---------- deals table ---------- */
table.deals{width:100%; border-collapse:collapse; background:var(--card); border:1px solid var(--line); border-radius:10px; overflow:hidden;}
table.deals th, table.deals td{padding:12px 14px; font-size:13.5px; text-align:right; border-bottom:1px solid var(--line);}
table.deals th{background:var(--paper); color:var(--navy-soft); font-weight:600;}
table.deals tr:last-child td{border-bottom:none;}
.broker-badge{background:var(--gold-tint); color:var(--gold-deep); padding:4px 10px; border-radius:20px; font-size:11.5px; font-weight:600; display:inline-flex; align-items:center; gap:4px;}

/* status color helpers */
.c-ok{background:var(--ok-tint); color:var(--ok);}
.c-hold{background:var(--hold-tint); color:var(--hold);}
.c-neg{background:var(--neg-tint); color:var(--neg);}
.c-gold{background:var(--gold-tint); color:var(--gold-deep);}
.c-muted{background:var(--muted-tint); color:var(--muted);}
.strip-ok{background:var(--ok-mid);} .strip-hold{background:var(--hold-mid);} .strip-neg{background:var(--neg-mid);} .strip-gold{background:var(--gold);} .strip-muted{background:var(--navy-soft);}
.stat-b-ok{color:var(--ok);} .stat-b-hold{color:var(--hold);} .stat-b-neg{color:var(--neg);} .stat-b-gold{color:var(--gold-deep);} .stat-b-muted{color:var(--navy-soft);}
.stat-t-ok{border-top-color:var(--ok-mid);} .stat-t-hold{border-top-color:var(--hold-mid);} .stat-t-neg{border-top-color:var(--neg-mid);} .stat-t-gold{border-top-color:var(--gold);} .stat-t-muted{border-top-color:var(--navy-soft);} .stat-t-navy{border-top-color:var(--navy);}

.empty{text-align:center; padding:60px 20px; color:var(--navy-soft);}
.empty i{font-size:34px; display:block; margin-bottom:10px; opacity:.5;}

/* ---------- projects management (admin) ---------- */
.section-block{background:var(--card); border:1px solid var(--line); border-radius:12px; padding:16px; margin-bottom:18px;}
.section-head{display:flex; align-items:center; gap:8px; margin-bottom:12px; font-family:'Tajawal'; font-size:14.5px;}
.section-head i{color:var(--gold-deep);}
.section-head span{color:var(--navy-soft); font-weight:400; font-size:13px;}
.projects-row{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:12px;}
.project-chip{display:flex; align-items:center; gap:8px; background:var(--paper); border:1px solid var(--line); border-radius:20px; padding:5px 14px 5px 5px; font-size:13px; font-weight:500;}
.project-chip-thumb{width:26px; height:26px; border-radius:50%; background-color:var(--muted-tint); background-size:cover; background-position:center; display:flex; align-items:center; justify-content:center; color:var(--navy-soft); font-size:13px; flex-shrink:0;}

/* ---------- unit image cover ---------- */
/* ارتفاع أكبر شوي (كان 130px) عشان صورة الوحدة تبين بوضوح ومقاس أكثر ثباتًا
   عبر كل البطاقات، بدل ما تكون شريط رفيع يقصّ أغلب الصورة. */
.unit-cover{height:172px; background-color:var(--muted-tint); background-size:cover; background-position:center;}
.delete-unit-btn{display:flex; align-items:center; justify-content:center; gap:6px; width:100%; padding:10px; background:var(--hold-tint); color:var(--hold); border:none; border-top:1px solid var(--line); font-size:12.5px; font-weight:500; cursor:pointer; font-family:inherit; transition:transform .1s ease, background-color .15s ease;}
.delete-unit-btn:hover{background:var(--hold-mid); color:#fff;}
.delete-unit-btn:active{transform:scale(.96);}

/* ---------- project cards (customer catalog home) ---------- */
/* auto-fill بدل auto-fit لنفس سبب units-grid: ما نبي بطاقة مشروع واحدة تتمدد
   لعرض الصفحة كاملة لو ما فيه إلا مشروع واحد ظاهر بالنتيجة. */
.projects-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:16px;}
.project-card{background:var(--card); border:1px solid var(--line); border-radius:16px; overflow:hidden; transition:transform .2s ease, box-shadow .2s ease; max-width:380px;}
.project-card:hover{transform:translateY(-4px); box-shadow:0 14px 30px -14px rgba(12,28,73,.28);}
.project-card:active{transform:scale(.97); transition:transform .08s ease;}
.project-card .cover{height:150px; background-color:var(--navy); background-size:cover; background-position:center; display:flex; align-items:center; justify-content:center;}
.project-card .cover i{font-size:40px; color:rgba(255,255,255,.6);}
.project-card .info{padding:16px;}
.project-card h3{margin:0 0 4px; font-family:'Tajawal'; font-size:16.5px;}
.project-card .count{font-size:12.5px; color:var(--gold-deep); font-weight:600; display:flex; align-items:center; gap:5px;}

/* قسم "من نحن" بأسفل الصفحة الرئيسية — منفصل بصريًا عن شبكة المشاريع بخلفية فاتحة،
   على نمط أقسام "About" بالمواقع العالمية: عنوان + نص + إحصائيات + دعوة للتواصل. */
.about-section{margin-top:56px; padding:48px 28px; background:var(--paper); border-radius:18px; text-align:center;}
.about-section h2{font-family:'Tajawal'; font-weight:900; font-size:24px; margin:0 0 16px; color:var(--navy);}
.about-section p{color:var(--navy-soft); font-size:15px; line-height:1.9; max-width:680px; margin:0 auto 32px;}
.about-stats{display:flex; justify-content:center; gap:48px; flex-wrap:wrap; margin-bottom:32px;}
.about-stats .stat-item b{display:block; font-family:'Tajawal'; font-weight:900; font-size:30px; color:var(--gold); line-height:1.2;}
.about-stats .stat-item span{font-size:12.5px; color:var(--navy-soft);}

.unit-image-cover{width:100%; height:260px; background-color:var(--muted-tint); background-size:cover; background-position:center; border-radius:12px;}

.unit-gallery{margin-bottom:10px;}
/* شريط تحكم منفصل تحت الصورة (مو فوقها) — حتى الأزرار ما تغطي ولا جزء من الصورة.
   direction:ltr هنا يخلي ترتيب "سابق يسار / تالي يمين" ثابت ومتوقّع بدل ما يتقلب
   حسب اتجاه الصفحة العام (rtl)، مع إن الصف نفسه ما فيه أي نص يحتاج قراءة RTL. */
.gallery-controls{display:flex; align-items:center; justify-content:center; gap:16px; margin:0 0 14px; direction:ltr;}
.gallery-arrow{width:36px; height:36px; border-radius:50%; background:var(--card); border:1px solid var(--line); color:var(--navy); display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:17px; padding:0; transition:background-color .15s ease, border-color .15s ease, transform .1s ease;}
.gallery-arrow:hover{background:var(--paper); border-color:var(--navy-soft);}
.gallery-arrow:active{transform:scale(.9);}
.gallery-dots{display:flex; gap:6px;}
.gallery-dot{width:7px; height:7px; border-radius:50%; background:var(--line); cursor:pointer; transition:background-color .15s ease, transform .15s ease;}
.gallery-dot.active{background:var(--navy); transform:scale(1.3);}

.deposit-box{background:var(--card); border:1px solid var(--line); border-radius:12px; padding:22px; max-width:420px;}
.deposit-box h3{margin-top:0; font-family:'Tajawal';}
.broker-note{background:var(--gold-tint); color:var(--gold-deep); padding:10px 14px; border-radius:9px; font-size:13px; margin-bottom:16px; display:flex; align-items:center; gap:8px;}

.success-box{text-align:center; padding:80px 20px; max-width:480px; margin:0 auto;}
.success-box i{font-size:60px; color:var(--ok); display:block; margin-bottom:14px;}
.success-box h2{font-family:'Tajawal';}

/* ---------- صفحة تسجيل الدخول / إنشاء الحساب الأول ----------
   صندوق مربّع في منتصف الشاشة تمامًا (أفقيًا وعموديًا) بدل ما يطلع
   بدون أي تنسيق على يمين الصفحة. */
.login-page{display:flex; align-items:center; justify-content:center; min-height:100vh; margin:0; padding:24px;}
.login-box{background:var(--card); border:1px solid var(--line); border-radius:18px; padding:38px 34px; width:100%; max-width:380px; text-align:center; box-shadow:0 24px 60px -24px rgba(12,28,73,.3);}
.login-box img{height:56px; width:auto; display:block; margin:0 auto 16px;}
.login-box h1{font-family:'Tajawal'; font-weight:900; font-size:21px; margin:0 0 4px; color:var(--navy);}
.login-box form{margin-top:20px; text-align:right;}
.login-box .flash{text-align:right;}

/* ---------- responsive helpers ---------- */
.form-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(160px,1fr)); gap:10px; align-items:end;}
.table-wrap{width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch;}
table.deals{min-width:720px;}
.unit-detail-grid{display:grid; grid-template-columns:1.2fr 1fr; gap:24px; align-items:start;}

.upload-box{background:var(--card); border:1px dashed var(--gold); border-radius:10px; padding:16px; margin-bottom:18px; display:flex; align-items:center; gap:14px; flex-wrap:wrap;}
.upload-box i{font-size:22px; color:var(--gold-deep); flex-shrink:0;}
.upload-box .txt{flex:1; min-width:180px;}
.upload-box .txt b{display:block; font-size:14px; margin-bottom:2px;}
.upload-box .txt span{font-size:12px; color:var(--navy-soft);}
.upload-box input[type=file]{font-size:12.5px; max-width:100%;}

.disabled-note{background:var(--muted-tint); color:var(--navy-soft); border-radius:9px; padding:12px 14px; font-size:13px; display:flex; align-items:center; gap:8px; margin-bottom:10px;}

@media(max-width:700px){
  .stat-row{grid-template-columns:repeat(2,1fr);}
  .client-row{grid-template-columns:4px 1fr; row-gap:8px;}
  /* أي عنصر إجراء إضافي (فورم تغيير الحالة، فورم الحذف، شارة "حسابك الحالي")
     يروح تحت معلومات الصف (العمود الثاني) بدل ما يضيع بعرض 4px الخاص بالشريط الملوّن. */
  .client-row form, .client-row .row-action{grid-column:2;}
  .unit-detail-grid{grid-template-columns:1fr;}
  .toolbar{flex-direction:column; align-items:stretch;}
  .toolbar > *{width:100%;}
  h1,h2,h3{word-break:break-word;}
}

@media(max-width:480px){
  .stat-row{grid-template-columns:1fr 1fr; gap:8px;}
  .stat{padding:11px 12px;}
  .stat b{font-size:20px;}
  .units-grid{grid-template-columns:1fr;}
  .deposit-box, .success-box{padding:18px;}
  .about-section{padding:32px 18px; margin-top:36px;}
  .about-stats{gap:28px;}
  .about-stats .stat-item b{font-size:24px;}
}