/* ============ نظام إدارة الأملاك — Design System ============ */
:root{
  --blue:#2563eb; --blue-light:#eff6ff; --blue-dark:#1d4ed8;
  --emerald:#059669; --emerald-light:#ecfdf5;
  --amber:#d97706; --amber-light:#fffbeb;
  --purple:#7c3aed; --purple-light:#f5f3ff;
  --red:#dc2626; --red-light:#fef2f2;
  --indigo:#4f46e5; --indigo-light:#eef2ff;
  --gray-50:#f8fafc; --gray-100:#f1f5f9; --gray-200:#e2e8f0; --gray-300:#cbd5e1;
  --gray-500:#64748b; --gray-600:#475569; --gray-700:#334155; --gray-900:#0f172a;
  --radius:14px; --radius-sm:9px;
  --shadow: 0 1px 3px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.04);
  --shadow-md: 0 4px 14px rgba(15,23,42,.08);
}
*{box-sizing:border-box}
body{
  margin:0; font-family:'Cairo',"Segoe UI","Tahoma",sans-serif;
  background:var(--gray-50); color:var(--gray-900); direction:rtl;
}
a{color:inherit; text-decoration:none}
input,select,textarea,button{font-family:inherit; font-size:14px}

/* ---------- layout ---------- */
.app-shell{display:flex; min-height:100vh}
.sidebar{
  width:250px; background:#fff; border-left:1px solid var(--gray-200);
  display:flex; flex-direction:column; position:sticky; top:0; height:100vh; flex-shrink:0;
  z-index:210; transition:transform .25s ease;
}
.sidebar-close{display:none; margin-right:auto; background:none; border:none; font-size:18px; color:var(--gray-500); cursor:pointer; padding:6px}
.sidebar-overlay{display:none}
.hamburger-btn{display:none; background:none; border:none; font-size:22px; cursor:pointer; color:var(--gray-700); padding:4px 6px; border-radius:8px}
.hamburger-btn:hover{background:var(--gray-100)}
.sidebar-brand{display:flex; align-items:center; gap:10px; padding:22px 20px; border-bottom:1px solid var(--gray-100)}
.sidebar-brand .icon{background:linear-gradient(135deg,var(--blue),var(--indigo)); color:#fff; width:42px; height:42px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:20px; box-shadow:0 4px 10px rgba(37,99,235,.3)}
.sidebar-brand h1{font-size:15px; margin:0; font-weight:800}
.sidebar-brand p{margin:2px 0 0; font-size:11px; color:var(--gray-500)}
.sidebar-nav{flex:1; padding:14px 12px; overflow-y:auto}
.sidebar-nav a{
  display:flex; align-items:center; gap:10px; padding:11px 14px; border-radius:10px;
  color:var(--gray-600); font-size:14px; font-weight:600; margin-bottom:3px; transition:.15s;
}
.sidebar-nav a:hover{background:var(--gray-100); color:var(--gray-900)}
.sidebar-nav a.active{background:linear-gradient(135deg,var(--blue),var(--indigo)); color:#fff; box-shadow:0 4px 10px rgba(37,99,235,.25)}
.sidebar-nav .emoji{width:20px; text-align:center}
.sidebar-foot{padding:14px; border-top:1px solid var(--gray-100)}
.user-chip{display:flex; align-items:center; gap:10px; padding:8px; border-radius:10px}
.user-chip img, .avatar-circle{width:38px; height:38px; border-radius:50%; object-fit:cover; background:var(--blue-light); color:var(--blue); display:flex; align-items:center; justify-content:center; font-weight:700}
.user-chip .name{font-size:13px; font-weight:700}
.user-chip .role{font-size:11px; color:var(--gray-500)}
.logout-btn{display:block; text-align:center; margin-top:10px; font-size:13px; color:var(--red); font-weight:700; padding:8px; border-radius:8px}
.logout-btn:hover{background:var(--red-light)}

.main{flex:1; min-width:0}
.topbar{
  background:#fff; border-bottom:1px solid var(--gray-200); padding:16px 28px;
  display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; z-index:20;
}
.topbar h2{margin:0; font-size:19px; font-weight:800}
.content{padding:26px 28px}

/* ---------- flash ---------- */
.flash{padding:12px 16px; border-radius:10px; margin-bottom:16px; font-size:14px; font-weight:600}
.flash.error{background:var(--red-light); color:var(--red); border:1px solid #fecaca}
.flash.success{background:var(--emerald-light); color:var(--emerald); border:1px solid #a7f3d0}

/* ---------- cards / stats ---------- */
.grid{display:grid; gap:18px}
.grid-4{grid-template-columns:repeat(4,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}
@media (max-width:1100px){.grid-4{grid-template-columns:repeat(2,1fr)} .grid-3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.grid-4,.grid-3,.grid-2{grid-template-columns:1fr}}

.card{background:#fff; border:1px solid var(--gray-200); border-radius:var(--radius); box-shadow:var(--shadow)}
.card-pad{padding:20px}
.stat-card{display:flex; align-items:center; justify-content:space-between; padding:20px; transition:.2s}
.stat-card:hover{box-shadow:var(--shadow-md); transform:translateY(-2px)}
.stat-card .value{font-size:24px; font-weight:800; margin:4px 0 0}
.stat-card .label{font-size:13px; color:var(--gray-500); font-weight:600}
.stat-icon{width:48px; height:48px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:22px}
.bg-blue{background:var(--blue-light); color:var(--blue)}
.bg-emerald{background:var(--emerald-light); color:var(--emerald)}
.bg-amber{background:var(--amber-light); color:var(--amber)}
.bg-purple{background:var(--purple-light); color:var(--purple)}
.bg-indigo{background:var(--indigo-light); color:var(--indigo)}
.bg-red{background:var(--red-light); color:var(--red)}

.section-title{font-size:16px; font-weight:800; margin:0 0 14px}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:7px; padding:10px 18px; border-radius:10px;
  font-weight:700; font-size:14px; border:1px solid transparent; cursor:pointer; transition:.15s;
}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--blue); color:#fff; box-shadow:0 2px 8px rgba(37,99,235,.25)}
.btn-primary:hover{background:var(--blue-dark); box-shadow:0 4px 12px rgba(37,99,235,.35)}
.btn-outline{background:#fff; border-color:var(--gray-300); color:var(--gray-700)}
.btn-outline:hover{background:var(--gray-100)}
.btn-danger{background:var(--red-light); color:var(--red)}
.btn-danger:hover{background:#fecaca}
.btn-success{background:var(--emerald); color:#fff}
.btn-success:hover{background:#047857}
.btn-sm{padding:7px 12px; font-size:12.5px; border-radius:8px}
.btn-icon{padding:8px; border-radius:8px}
.btn:disabled{opacity:.5; cursor:not-allowed}

/* ---------- table ---------- */
.table-wrap{overflow-x:auto; border-radius:var(--radius); border:1px solid var(--gray-200); background:#fff}
table{width:100%; border-collapse:collapse; font-size:13.5px}
thead th{background:var(--gray-50); text-align:right; padding:13px 16px; font-weight:700; color:var(--gray-600); border-bottom:1px solid var(--gray-200); white-space:nowrap}
tbody td{padding:13px 16px; border-bottom:1px solid var(--gray-100); white-space:nowrap}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover{background:var(--gray-50)}

/* ---------- badges ---------- */
.badge{display:inline-flex; align-items:center; gap:5px; padding:4px 11px; border-radius:999px; font-size:12px; font-weight:700}
.badge-green{background:var(--emerald-light); color:var(--emerald)}
.badge-amber{background:var(--amber-light); color:var(--amber)}
.badge-red{background:var(--red-light); color:var(--red)}
.badge-blue{background:var(--blue-light); color:var(--blue)}
.badge-gray{background:var(--gray-100); color:var(--gray-600)}

/* ---------- forms ---------- */
.field{margin-bottom:14px}
.field label{display:block; font-size:13px; font-weight:700; color:var(--gray-700); margin-bottom:6px}
.field input, .field select, .field textarea{
  width:100%; border:1px solid var(--gray-300); border-radius:10px; padding:10px 12px; background:#fff; transition:.15s;
}
.field input:focus, .field select:focus, .field textarea:focus{outline:none; border-color:var(--blue); box-shadow:0 0 0 3px var(--blue-light)}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:14px}
@media (max-width:640px){.field-row{grid-template-columns:1fr}}

/* ---------- toolbar / search ---------- */
.toolbar{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:18px; flex-wrap:wrap}
.search-box{position:relative; flex:1; max-width:380px}
.search-box input{width:100%; padding:10px 14px 10px 14px; border:1px solid var(--gray-300); border-radius:10px}
.filters{display:flex; gap:8px; flex-wrap:wrap}
.chip-filter{padding:7px 14px; border-radius:999px; border:1px solid var(--gray-300); font-size:13px; font-weight:600; cursor:pointer; background:#fff}
.chip-filter.active{background:var(--blue); color:#fff; border-color:var(--blue)}

/* ---------- modal ---------- */
.modal-overlay{
  position:fixed; inset:0; background:rgba(15,23,42,.55); display:none;
  align-items:flex-start; justify-content:center; padding:40px 16px; overflow-y:auto; z-index:100;
}
.modal-overlay.open{display:flex}
.modal-box{background:#fff; border-radius:16px; width:100%; max-width:640px; box-shadow:0 20px 60px rgba(0,0,0,.25); animation:pop .15s ease}
@keyframes pop{from{transform:translateY(10px); opacity:0} to{transform:translateY(0); opacity:1}}
.modal-head{display:flex; align-items:center; justify-content:space-between; padding:18px 22px; border-bottom:1px solid var(--gray-100)}
.modal-head h3{margin:0; font-size:17px; font-weight:800}
.modal-close{cursor:pointer; font-size:20px; color:var(--gray-500); background:none; border:none}
.modal-body{padding:22px; max-height:70vh; overflow-y:auto}
.modal-foot{padding:16px 22px; border-top:1px solid var(--gray-100); display:flex; justify-content:flex-start; gap:10px}

/* ---------- empty state ---------- */
.empty{text-align:center; padding:50px 20px; color:var(--gray-500)}
.empty .big{font-size:40px; margin-bottom:10px}

/* ---------- login ---------- */
.auth-page{min-height:100vh; display:flex; align-items:center; justify-content:center; background:linear-gradient(160deg,#eff6ff,#f8fafc); padding:20px}
.auth-card{background:#fff; width:100%; max-width:420px; border-radius:18px; box-shadow:var(--shadow-md); padding:36px 32px; border:1px solid var(--gray-200)}
.auth-logo{width:64px; height:64px; border-radius:16px; background:var(--blue-light); color:var(--blue); display:flex; align-items:center; justify-content:center; font-size:28px; margin:0 auto 16px}
.auth-card h2{text-align:center; margin:0 0 4px; font-size:22px; font-weight:800}
.auth-card p.sub{text-align:center; color:var(--gray-500); font-size:13.5px; margin:0 0 24px}
.hint-box{background:var(--blue-light); border:1px solid #bfdbfe; color:var(--blue-dark); font-size:12.5px; padding:10px 14px; border-radius:10px; margin-top:16px; text-align:center}

/* ---------- public pages ---------- */
.public-header{background:#fff; border-bottom:1px solid var(--gray-200); padding:16px 5%; display:flex; align-items:center; justify-content:space-between}
.public-hero{padding:50px 5% 30px; text-align:center; background:linear-gradient(160deg,#eff6ff,#fff)}
.public-grid{padding:0 5% 60px; display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:22px}
.prop-card{background:#fff; border:1px solid var(--gray-200); border-radius:16px; overflow:hidden; box-shadow:var(--shadow); transition:.2s}
.prop-card:hover{box-shadow:var(--shadow-md); transform:translateY(-2px)}
.prop-card .img{height:180px; background:var(--gray-100) center/cover no-repeat; display:flex; align-items:center; justify-content:center; color:var(--gray-300); font-size:34px}
.prop-card .body{padding:16px}
.prop-card h3{margin:0 0 6px; font-size:16px}
.prop-card .price{font-size:19px; font-weight:800; color:var(--blue); margin:10px 0 0}
.tag-list{display:flex; gap:8px; flex-wrap:wrap; margin-top:8px}
.tag{background:var(--gray-100); color:var(--gray-600); font-size:11.5px; padding:4px 9px; border-radius:8px; font-weight:600}

/* ---------- month banner (payments) ---------- */
.month-banner{
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  background:linear-gradient(135deg, var(--blue-light), #fff); border:1px solid #dbeafe;
  border-radius:var(--radius); padding:16px 20px; margin-bottom:18px;
}
.month-banner-text{display:flex; align-items:center; gap:12px}
.month-banner-text .emoji{font-size:24px}
.month-banner-title{font-weight:800; font-size:16px; color:var(--gray-900)}
.month-banner-sub{font-size:12.5px; color:var(--gray-500); margin-top:2px}
.month-select-form{display:flex}
.month-select{
  border:1px solid var(--blue); background:#fff; color:var(--blue-dark); font-weight:700;
  padding:9px 14px; border-radius:10px; cursor:pointer;
}

/* ---------- image upload / gallery (property form) ---------- */
.upload-dropzone{
  border:2px dashed var(--gray-300); border-radius:var(--radius-sm); padding:22px;
  text-align:center; cursor:pointer; transition:.15s; background:var(--gray-50);
}
.upload-dropzone:hover, .upload-dropzone.drag{border-color:var(--blue); background:var(--blue-light)}
.upload-dropzone .icon{font-size:26px; margin-bottom:6px}
.upload-dropzone .hint{font-size:12px; color:var(--gray-500); margin-top:4px}
.image-preview-grid{display:flex; flex-wrap:wrap; gap:10px; margin-top:12px}
.image-preview-item{
  position:relative; width:84px; height:84px; border-radius:10px; overflow:hidden;
  border:1px solid var(--gray-200); background:var(--gray-100);
}
.image-preview-item img{width:100%; height:100%; object-fit:cover; display:block}
.image-preview-item .remove-btn{
  position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%;
  background:rgba(15,23,42,.65); color:#fff; border:none; font-size:12px; line-height:1;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.image-preview-item .remove-btn:hover{background:var(--red)}
.image-preview-item.uploading{display:flex; align-items:center; justify-content:center; font-size:11px; color:var(--gray-500)}
.prop-thumb{width:46px; height:46px; border-radius:8px; object-fit:cover; background:var(--gray-100); flex-shrink:0}

/* ---------- public property gallery ---------- */
.gallery-main{
  height:380px; background:var(--gray-100) center/cover no-repeat; display:flex; align-items:center;
  justify-content:center; font-size:54px; color:var(--gray-300); position:relative;
}
.gallery-main img{width:100%; height:100%; object-fit:cover}
.gallery-thumbs{display:flex; gap:8px; padding:12px 12px 0; overflow-x:auto}
.gallery-thumbs img{
  width:64px; height:64px; object-fit:cover; border-radius:8px; cursor:pointer; flex-shrink:0;
  border:2px solid transparent; opacity:.75; transition:.15s;
}
.gallery-thumbs img:hover{opacity:1}
.gallery-thumbs img.active{border-color:var(--blue); opacity:1}
.developer-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  color: #fff;
  background: #2563eb;
  border-radius: 10px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  transition: 0.2s ease;
}

.developer-link:hover {
  background: #1d4ed8;
  transform: translateY(-2px);
}

.developer-link .emoji {
  font-size: 18px;
}
/* ---------- owner info card (public page) ---------- */
.owner-card{background:#fff; border:1px solid var(--gray-200); border-radius:var(--radius); box-shadow:var(--shadow); padding:20px; margin-top:18px}
.owner-card-head{display:flex; align-items:center; gap:14px}
.owner-card-head img, .owner-card-head .avatar-circle{
  width:64px; height:64px; border-radius:50%; object-fit:cover; background:var(--blue-light); color:var(--blue);
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:24px; flex-shrink:0;
}
.owner-card-head .name{font-size:16px; font-weight:800}
.owner-card-head .sub{font-size:12.5px; color:var(--gray-500); margin-top:2px}
.owner-contacts{display:flex; flex-wrap:wrap; gap:10px; margin-top:16px}
.owner-contacts a{
  display:flex; align-items:center; gap:7px; padding:9px 14px; border-radius:10px; font-size:13px;
  font-weight:700; border:1px solid var(--gray-200); background:var(--gray-50); color:var(--gray-700); transition:.15s;
}
.owner-contacts a:hover{background:var(--gray-100)}
.owner-contacts a.whatsapp{background:#ecfdf5; color:#059669; border-color:#a7f3d0}
.owner-contacts a.whatsapp:hover{background:#d1fae5}
.owner-contacts a.call{background:var(--blue-light); color:var(--blue); border-color:#bfdbfe}
.owner-contacts a.call:hover{background:#dbeafe}
.owner-socials{display:flex; gap:8px; margin-top:12px}
.owner-socials a{
  width:34px; height:34px; border-radius:50%; background:var(--gray-100); display:flex;
  align-items:center; justify-content:center; font-size:15px; color:var(--gray-600); transition:.15s;
}
.owner-socials a:hover{background:var(--gray-200)}

/* ---------- misc ---------- */
.text-muted{color:var(--gray-500)}
.mt-0{margin-top:0} .mb-0{margin-bottom:0}
.flex{display:flex} .items-center{align-items:center} .gap-2{gap:8px} .gap-3{gap:12px}
.w-full{width:100%}
.progress-bar{height:8px; background:var(--gray-100); border-radius:99px; overflow:hidden}
.progress-bar .fill{height:100%; background:var(--emerald); border-radius:99px}
.avatar-sm{width:32px; height:32px; border-radius:50%; object-fit:cover; background:var(--gray-100)}
.divider{border:none; border-top:1px solid var(--gray-100); margin:16px 0}
.no-scroll{overflow:hidden}

/* =========================================================
   RESPONSIVE — tablets & phones
   ========================================================= */
@media (max-width: 900px){
  .hamburger-btn{display:inline-flex; align-items:center; justify-content:center}
  .sidebar-close{display:block}

  .sidebar{
    position:fixed; top:0; right:0; height:100dvh; width:82%; max-width:290px;
    transform:translateX(100%); box-shadow:0 0 0 rgba(0,0,0,0);
  }
  .sidebar.open{transform:translateX(0); box-shadow:-10px 0 40px rgba(15,23,42,.25)}

  .sidebar-overlay{
    display:block; position:fixed; inset:0; background:rgba(15,23,42,.5);
    z-index:205; opacity:0; pointer-events:none; transition:opacity .2s ease;
  }
  .sidebar-overlay.open{opacity:1; pointer-events:auto}

  .main{width:100%; min-width:0}
  .topbar{padding:12px 16px; gap:10px}
  .topbar h2{font-size:16px}
  .topbar .btn{padding:9px 14px; font-size:13px}
  .content{padding:16px}

  .grid-4, .grid-3{grid-template-columns:repeat(2,1fr)}
}

@media (max-width: 640px){
  .grid-4, .grid-3, .grid-2{grid-template-columns:1fr}
  .content{padding:12px}
  .card-pad{padding:16px}
  .stat-card{padding:16px}
  .stat-card .value{font-size:20px}

  .toolbar{flex-direction:column; align-items:stretch}
  .search-box{max-width:none}
  .filters{overflow-x:auto; flex-wrap:nowrap; padding-bottom:2px}
  .chip-filter{flex-shrink:0}

  .month-banner{flex-direction:column; align-items:stretch; padding:14px}
  .month-select-form{width:100%}
  .month-select{width:100%}

  .modal-overlay{padding:0}
  .modal-box{max-width:100%; width:100%; min-height:100dvh; border-radius:0; animation:none}
  .modal-head{padding:14px 16px}
  .modal-body{padding:16px; max-height:calc(100dvh - 130px)}
  .modal-foot{padding:12px 16px; flex-wrap:wrap}
  .modal-foot .btn{flex:1; justify-content:center}

  table{font-size:12.5px}
  thead th, tbody td{padding:10px 12px}

  .public-header{padding:14px 16px; flex-wrap:wrap; gap:10px}
  .public-hero{padding:34px 5% 22px}
  .public-hero h1{font-size:21px}
  .public-grid{grid-template-columns:1fr; padding:0 16px 40px; gap:16px}

  .gallery-main{height:230px}
  .owner-contacts{flex-direction:column; align-items:stretch}
  .owner-contacts a{justify-content:center}

  .auth-card{padding:26px 20px}

  .field-row{grid-template-columns:1fr}
  .btn{padding:10px 14px; font-size:13.5px}
}

@media (max-width: 400px){
  .sidebar-brand h1{font-size:13.5px}
  .owner-card-head{flex-wrap:wrap}
}