:root{
  --navy:#0F2942;
  --navy-deep:#0A1D30;
  --coral:#FF6B4A;
  --coral-deep:#E5502D;
  --gold:#E8A33D;
  --ink:#1A1D23;
  --muted:#5C6470;
  --bg:#FAFAF8;
  --card:#FFFFFF;
  --line:rgba(15,41,66,0.10);
  --shadow:0 8px 30px rgba(15,41,66,0.10);
  --shadow-lg:0 20px 50px rgba(15,41,66,0.18);
}
*{box-sizing:border-box;}
body{margin:0; background:var(--bg); color:var(--ink); font-family:'Cairo',sans-serif; line-height:1.6; direction:rtl;}
a{color:inherit;}
[hidden]{display:none !important;}
h1,h2,h3{font-family:'Poppins',sans-serif; margin:0;}
.mono{font-family:monospace; direction:ltr; unicode-bidi:embed;}

/* ---------- login ---------- */
#login-screen{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px; background:linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 100%);}
.login-card{background:var(--card); color:var(--ink); padding:44px 36px; max-width:380px; width:100%; text-align:center; border-radius:22px; box-shadow:var(--shadow-lg);}
.login-card .brand-fr{font-family:'Poppins',sans-serif; font-weight:700; color:var(--navy); font-size:1.2rem; direction:ltr;}
.login-card .brand-ar{color:var(--coral-deep); font-size:0.9rem; font-weight:600; margin:4px 0 26px;}
.login-card label{display:block; font-size:0.8rem; color:var(--muted); margin-bottom:8px; text-align:right;}
.login-card input{width:100%; padding:13px 14px; border-radius:12px; border:1.5px solid var(--line); background:var(--bg); color:var(--ink); font-family:'Cairo',sans-serif; font-size:0.96rem; margin-bottom:16px;}
.login-card input:focus{outline:none; border-color:var(--coral);}
.login-card button[type=submit]{width:100%; padding:14px; border-radius:12px; border:none; background:var(--coral); color:#fff; font-weight:700; font-size:0.98rem; cursor:pointer; box-shadow:0 10px 24px rgba(255,107,74,0.35);}
.login-error{color:var(--coral-deep); font-size:0.82rem; margin-top:14px; min-height:1.2em;}

/* ---------- password visibility toggle ---------- */
.pw-wrap{position:relative;}
.pw-wrap input{padding-left:42px !important;}
.pw-toggle{
  position:absolute; left:6px; top:0; height:100%; display:flex; align-items:center;
  background:none; border:none; cursor:pointer; padding:0 8px; color:var(--muted);
}
.pw-toggle svg{width:18px; height:18px;}
.pw-toggle:hover{color:var(--navy);}

/* ---------- shell ---------- */
.topbar{background:var(--navy); color:#fff; padding:16px 5vw; display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap;}
.topbar .brand-fr{font-family:'Poppins',sans-serif; font-weight:700; font-size:1.05rem; color:#fff; direction:ltr;}
.topbar .brand-ar{font-size:0.8rem; color:var(--gold); font-weight:600;}
.tabs{display:flex; gap:6px; flex-wrap:wrap;}
.tabs button{background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.18); color:rgba(255,255,255,0.85); padding:9px 16px; border-radius:20px; font-size:0.85rem; cursor:pointer; font-family:'Cairo',sans-serif;}
.tabs button.active{background:var(--coral); border-color:var(--coral); color:#fff;}
.topbar-actions{display:flex; gap:10px; align-items:center;}
.topbar-actions span{font-size:0.82rem; color:var(--gold);}
.btn-logout{background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.22); color:#fff; padding:8px 16px; border-radius:20px; font-size:0.82rem; cursor:pointer;}

main{max-width:1150px; margin:0 auto; padding:32px 24px 64px;}
.view{display:none;}
.view.active{display:block;}

.panel-head{margin-bottom:26px;}
.panel-head h2{font-size:1.45rem; color:var(--navy);}
.panel-head p{font-size:0.9rem; color:var(--muted); margin:6px 0 0;}

/* ---------- kpi ---------- */
.kpi-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:36px;}
.kpi-cell{background:var(--card); border-radius:16px; padding:20px 16px; text-align:center; box-shadow:var(--shadow);}
.kpi-cell .label{display:block; font-size:0.74rem; color:var(--muted); margin-bottom:8px;}
.kpi-cell .value{font-family:'Poppins',sans-serif; font-size:1.3rem; font-weight:700; color:var(--coral-deep);}
@media (max-width:640px){ .kpi-grid{grid-template-columns:repeat(2,1fr);} }

/* ---------- filters ---------- */
.filters{display:flex; gap:12px; flex-wrap:wrap; margin-bottom:22px; align-items:end;}
.filters .field{display:flex; flex-direction:column; gap:5px;}
.filters label{font-size:0.76rem; color:var(--muted);}
.filters input, .filters select{border:1.5px solid var(--line); padding:10px 12px; border-radius:10px; background:var(--card); font-family:'Cairo',sans-serif; font-size:0.88rem;}
.btn{font-family:'Cairo',sans-serif; font-size:0.86rem; padding:10px 18px; border-radius:20px; cursor:pointer; border:1.5px solid var(--navy); background:transparent; color:var(--navy); transition:background .15s, color .15s;}
.btn:hover{background:var(--navy); color:#fff;}
.btn.primary{background:var(--coral); border-color:var(--coral); color:#fff;}
.btn.primary:hover{background:var(--coral-deep); border-color:var(--coral-deep);}
.btn.small{padding:6px 14px; font-size:0.78rem;}
.btn.danger{border-color:var(--coral-deep); color:var(--coral-deep);}
.btn.danger:hover{background:var(--coral-deep); color:#fff;}

/* ---------- table ---------- */
.table-card{background:var(--card); border-radius:16px; box-shadow:var(--shadow); overflow-x:auto;}
table{width:100%; border-collapse:collapse; font-size:0.85rem; min-width:820px;}
th{background:var(--navy); color:#fff; font-weight:600; font-size:0.76rem; padding:13px 10px; text-align:center;}
th:first-child{border-top-right-radius:16px;}
th:last-child{border-top-left-radius:16px;}
td{padding:12px 10px; border-bottom:1px solid var(--line); text-align:center;}
tr:last-child td{border-bottom:none;}
tr:hover td{background:var(--bg);}
td.mono{direction:ltr;}
.status-badge{display:inline-block; padding:5px 12px; border-radius:20px; font-size:0.74rem; color:#fff; font-weight:600;}
.status-جديد{background:var(--gold); color:var(--navy);}
.status-مؤكد{background:#2f9e5c;}
.status-ملغى{background:var(--coral-deep);}
.status-مكتمل{background:var(--navy);}
.row-actions{display:flex; gap:6px; justify-content:center; flex-wrap:wrap;}
.pagination{display:flex; gap:8px; justify-content:center; margin-top:18px; align-items:center; font-size:0.86rem;}

/* ---------- apartments ---------- */
.apt-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(310px,1fr)); gap:20px;}
.apt-card{background:var(--card); border-radius:16px; padding:22px; box-shadow:var(--shadow);}
.apt-card h3{font-size:1.1rem; margin:0 0 4px; color:var(--navy);}
.apt-card .meta{font-size:0.82rem; color:var(--muted); margin-bottom:16px;}
.apt-card.inactive{opacity:0.55;}
.apt-card .inactive-tag{background:var(--coral-deep); color:#fff; font-size:0.72rem; padding:4px 10px; border-radius:12px; display:inline-block; margin-bottom:10px;}

.thumbs{display:grid; grid-template-columns:repeat(auto-fill,minmax(64px,1fr)); gap:6px; margin-bottom:16px;}
.thumbs img{width:100%; aspect-ratio:1/1; object-fit:cover; background:var(--bg); border-radius:8px;}

.hero-thumbs-wide{display:block; max-width:420px;}
.hero-thumbs-wide img{
  width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:12px; margin-bottom:10px; box-shadow:var(--shadow);
}
.hero-add-tile{
  width:100%; aspect-ratio:16/9; border-radius:12px; font-size:1.4rem;
  display:flex; flex-direction:column; gap:6px; align-items:center; justify-content:center;
}
.hero-add-tile::after{content:'اختر صورة عريضة (16:9)'; font-size:0.72rem; font-weight:400; color:var(--muted);}
.add-tile{
  aspect-ratio:1/1; border:1.5px dashed var(--coral); border-radius:8px;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  background:var(--bg); color:var(--coral); font-size:1.6rem; font-weight:700;
}
.add-tile:hover{background:rgba(255,107,74,0.08);}
.add-tile input{display:none;}
.upload-status{font-size:0.76rem; color:var(--coral-deep); margin:4px 0 0;}

.form-card{background:var(--card); border-radius:16px; box-shadow:var(--shadow); padding:26px; margin-bottom:24px;}
.form-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px;}
.field{display:flex; flex-direction:column; gap:6px; margin-bottom:16px;}
.field.full{grid-column:1/-1;}
.field label{font-size:0.8rem; color:var(--muted);}
.field input, .field textarea, .field select{border:1.5px solid var(--line); padding:11px 12px; border-radius:10px; background:var(--bg); font-family:'Cairo',sans-serif; font-size:0.9rem; width:100%;}
.field input:focus, .field textarea:focus, .field select:focus{outline:none; border-color:var(--coral);}
.field textarea{min-height:90px; font-family:monospace; direction:ltr; text-align:left; font-size:0.82rem;}
.field-check{display:flex; align-items:center; gap:8px; font-size:0.86rem; margin-bottom:10px;}

.msg{font-size:0.86rem; padding:12px 16px; border-radius:12px; margin-bottom:18px;}
.msg.error{background:rgba(229,80,45,0.1); color:var(--coral-deep);}
.msg.success{background:rgba(47,158,92,0.1); color:#1e6e3f;}

.empty-row td{padding:34px; color:var(--muted);}