:root{
  --primary: #2f5f9e;
  --primary-dark: #234876;
  --sidebar-bg: #1c2b3a;
  --sidebar-hover: #26374a;
  --bg: #f4f6f9;
  --success: #1e9e6f;
  --danger: #d9534f;
  --warning: #e6a23c;
  --radius: 10px;
}

*{box-sizing:border-box}
body{
  font-family: 'Cairo', Tahoma, sans-serif;
  background: var(--bg);
  margin:0;
  color:#2c3e50;
}

/* ===== تخطيط الصفحة ===== */
.app-wrapper{display:flex; min-height:100vh}

.sidebar{
  width:250px; min-width:250px;
  background: var(--sidebar-bg);
  color:#cfd8e3;
  position:sticky; top:0; height:100vh; overflow-y:auto;
  transition: margin-right .25s ease;
}
.sidebar-brand{
  display:flex; align-items:center; gap:10px;
  padding:20px 18px; font-size:19px; font-weight:800; color:#fff;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.sidebar-brand i{font-size:24px; color:#5aa9e6}
.sidebar-brand .brand-logo{height:42px; max-width:200px; object-fit:contain; border-radius:6px; background:#fff; padding:3px}
.sidebar-nav{padding:14px 10px; display:flex; flex-direction:column; gap:3px}
.sidebar-nav a{
  display:flex; align-items:center; gap:12px;
  padding:11px 14px; color:#cfd8e3; text-decoration:none;
  border-radius:8px; font-size:14.5px; font-weight:500;
  transition:.15s;
}
.sidebar-nav a i{font-size:17px; width:20px; text-align:center}
.sidebar-nav a:hover{background:var(--sidebar-hover); color:#fff}
.sidebar-nav a.active{background:var(--primary); color:#fff}
.sidebar-divider{
  margin:14px 10px 6px; padding-top:10px;
  font-size:11.5px; color:#7d8ea3; border-top:1px solid rgba(255,255,255,.08);
}

.main-area{flex:1; display:flex; flex-direction:column; min-width:0}

.topbar{
  background:#fff; border-bottom:1px solid #e6e9ee;
  padding:12px 22px; display:flex; align-items:center; justify-content:space-between;
  position:sticky; top:0; z-index:20;
}
.topbar-title{font-weight:700; font-size:17px; color:#1c2b3a}
.btn-icon{background:none;border:none;font-size:22px;color:#333;cursor:pointer}
.btn-user{
  background:#f4f6f9; border:1px solid #e6e9ee; border-radius:30px;
  padding:6px 14px; display:flex; align-items:center; gap:8px; cursor:pointer;
  font-family:inherit; font-weight:600; font-size:14px; color:#2c3e50;
}
.btn-user i{font-size:20px; color:var(--primary)}

.content-area{padding:24px; flex:1}
.app-footer{
  text-align:center; padding:14px; font-size:13px; color:#94a3b8;
  border-top:1px solid #e6e9ee; background:#fff;
}

/* ===== بطاقات ===== */
.stat-card{
  background:#fff; border-radius:var(--radius); padding:20px;
  box-shadow:0 1px 4px rgba(0,0,0,.06); border-right:4px solid var(--primary);
  display:flex; align-items:center; gap:16px; height:100%;
}
.stat-card .icon{
  width:52px; height:52px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  font-size:24px; color:#fff; flex-shrink:0;
}
.stat-card .value{font-size:24px; font-weight:800; color:#1c2b3a}
.stat-card .label{font-size:13.5px; color:#6b7a8f; font-weight:600}

.card-box{
  background:#fff; border-radius:var(--radius); padding:22px;
  box-shadow:0 1px 4px rgba(0,0,0,.06); border:1px solid #eef1f5;
}
.card-box .card-title{font-weight:700; font-size:16px; margin-bottom:16px; color:#1c2b3a}

/* ===== جداول ===== */
.table-wrap{background:#fff; border-radius:var(--radius); overflow:hidden; box-shadow:0 1px 4px rgba(0,0,0,.06)}
table.custom-table{width:100%; border-collapse:collapse; font-size:14.5px}
table.custom-table thead{background:#f4f6f9}
table.custom-table th{padding:13px 14px; font-weight:700; color:#4a5a70; text-align:right; border-bottom:2px solid #eef1f5}
table.custom-table td{padding:12px 14px; border-bottom:1px solid #f1f3f6; vertical-align:middle}
table.custom-table tbody tr:hover{background:#f9fbfd}

.badge-status{padding:5px 12px; border-radius:20px; font-size:12.5px; font-weight:700}
.badge-paid{background:#e3f7ed; color:var(--success)}
.badge-unpaid{background:#fdeceb; color:var(--danger)}
.badge-partial{background:#fdf3e3; color:var(--warning)}
.badge-draft{background:#eef1f5; color:#6b7a8f}
.badge-cancelled{background:#eee; color:#888}
.badge-active{background:#e3f7ed; color:var(--success)}
.badge-inactive{background:#fdeceb; color:var(--danger)}

/* ===== أزرار ===== */
.btn-primary{background:var(--primary); border-color:var(--primary)}
.btn-primary:hover{background:var(--primary-dark); border-color:var(--primary-dark)}
.btn-soft{background:#eef4fb; color:var(--primary); border:none}
.btn-soft:hover{background:#dce9f7; color:var(--primary-dark)}

/* ===== نماذج تسجيل الدخول والتثبيت ===== */
.auth-wrapper{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg, var(--primary-dark), var(--primary));
  padding:20px;
}
.auth-box{
  background:#fff; border-radius:16px; padding:36px 34px; width:100%; max-width:420px;
  box-shadow:0 20px 50px rgba(0,0,0,.25);
}
.auth-box .logo{text-align:center; margin-bottom:22px}
.auth-box .logo i{font-size:42px; color:var(--primary)}
.auth-box h3{text-align:center; font-weight:800; margin-bottom:4px}
.auth-box p.sub{text-align:center; color:#8798ac; margin-bottom:24px; font-size:14px}

.form-label{font-weight:600; font-size:14px; color:#3c4c60}
.form-control, .form-select{
  border-radius:8px; border:1px solid #dde3ea; padding:10px 12px; font-size:14.5px;
}
.form-control:focus, .form-select:focus{border-color:var(--primary); box-shadow:0 0 0 3px rgba(47,95,158,.12)}

/* ===== responsive ===== */
@media (max-width: 991.98px){
  .sidebar{position:fixed; right:0; top:0; z-index:1050; margin-right:-260px}
  .sidebar.show{margin-right:0}
  .content-area{padding:16px}
}

/* طباعة الفاتورة */
@media print{
  .no-print{display:none !important}
  body{background:#fff}
  .content-area{padding:0}
}