:root {
      --bg: #f6f8fb;
      --text: #172033;
      --muted: #697586;
      --primary: #15459f;
      --primary-2: #3867e8;
      --accent: #20a99b;
      --success: #299765;
      --warning: #f59e0b;
      --danger: #dc3545;
      --sidebar: #101a34;
      --sidebar-soft: #172544;
      --border: #e4e8ef;
      --shadow: 0 12px 30px rgba(16, 26, 52, .08);
    }

    * { box-sizing: border-box; }
    body {
      margin: 0;
      background: var(--bg);
      color: var(--text);
      font-family: Tajawal, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }

    .app-shell { min-height: 100vh; display: flex; }
    .sidebar {
      width: 282px;
      background: var(--sidebar);
      color: #dbe5f5;
      border-left: 1px solid rgba(255,255,255,.08);
      position: sticky;
      top: 0;
      height: 100vh;
      overflow-y: auto;
      flex: 0 0 282px;
    }

    .brand-mark {
      width: 44px;
      height: 44px;
      display: grid;
      place-items: center;
      border-radius: 14px;
      background: linear-gradient(135deg, var(--primary), var(--primary-2));
      color: white;
      box-shadow: 0 8px 26px rgba(56, 103, 232, .35);
    }

    .sidebar-heading {
      color: rgba(219, 229, 245, .52);
      font-size: .76rem;
      padding: .5rem 1rem;
      margin-top: .75rem;
      font-weight: 700;
    }

    .nav-link {
      color: #dbe5f5;
      border-radius: 10px;
      padding: .75rem 1rem;
      display: flex;
      align-items: center;
      gap: .75rem;
      margin: .12rem .75rem;
      cursor: pointer;
      transition: .18s ease;
    }

    .nav-link:hover { background: var(--sidebar-soft); color: #fff; }
    .nav-link.active {
      background: linear-gradient(135deg, var(--primary), var(--primary-2));
      color: #fff;
      box-shadow: 0 8px 24px rgba(56, 103, 232, .27);
      font-weight: 700;
    }

    .main { flex: 1; min-width: 0; }
    .topbar {
      height: 68px;
      background: rgba(255,255,255,.85);
      backdrop-filter: blur(10px);
      border-bottom: 1px solid var(--border);
      position: sticky;
      top: 0;
      z-index: 10;
    }

    .content { padding: 28px; }
    .page { display: none; animation: fade .2s ease; }
    .page.active { display: block; }
    @keyframes fade { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }

    .card {
      border: 1px solid var(--border);
      border-radius: 14px;
      box-shadow: var(--shadow);
    }

    .soft-card {
      background: white;
      border: 1px solid var(--border);
      border-radius: 14px;
      box-shadow: var(--shadow);
    }

    .stat-icon {
      width: 48px;
      height: 48px;
      display: grid;
      place-items: center;
      border-radius: 14px;
      color: white;
      flex: 0 0 48px;
    }

    .bg-grad-primary { background: linear-gradient(135deg, var(--primary), var(--primary-2)); }
    .bg-grad-accent { background: linear-gradient(135deg, var(--accent), #22b5d6); }
    .bg-grad-success { background: linear-gradient(135deg, var(--success), #25b88e); }
    .bg-grad-warning { background: linear-gradient(135deg, var(--warning), #f97316); }

    .btn-primary {
      --bs-btn-bg: var(--primary);
      --bs-btn-border-color: var(--primary);
      --bs-btn-hover-bg: #123b88;
      --bs-btn-hover-border-color: #123b88;
    }

    .btn-gradient {
      color: #fff;
      border: 0;
      background: linear-gradient(135deg, var(--primary), var(--primary-2));
      box-shadow: 0 8px 24px rgba(56, 103, 232, .25);
    }

    .text-muted-2 { color: var(--muted); }
    .badge-soft-success { color: var(--success); background: rgba(41,151,101,.1); border: 1px solid rgba(41,151,101,.18); }
    .badge-soft-warning { color: #a96500; background: rgba(245,158,11,.14); border: 1px solid rgba(245,158,11,.22); }
    .badge-soft-danger { color: var(--danger); background: rgba(220,53,69,.1); border: 1px solid rgba(220,53,69,.18); }
    .badge-soft-primary { color: var(--primary); background: rgba(21,69,159,.1); border: 1px solid rgba(21,69,159,.18); }
    .table > :not(caption) > * > * { padding: .95rem 1rem; }
    .table thead th { color: var(--muted); background: #f1f4f8; font-weight: 700; }
    .avatar {
      width: 38px;
      height: 38px;
      display: grid;
      place-items: center;
      border-radius: 50%;
      color: white;
      background: linear-gradient(135deg, var(--primary), var(--primary-2));
      font-weight: 800;
    }

    .mobile-toggle { display: none; }
    .chart-box { height: 290px; }

    @media (max-width: 991.98px) {
      .app-shell { display: block; }
      .sidebar {
        position: fixed;
        inset: 0 auto 0 0;
        z-index: 1040;
        transform: translateX(-100%);
        transition: transform .2s ease;
      }
      .sidebar.show { transform: translateX(0); }
      .mobile-toggle { display: inline-flex; }
      .content { padding: 18px; }
      .topbar { height: 62px; }
    }
/* ══════════════ PAGE CONTENT ══════════════ */
.page-content{padding:24px;animation:fadeUp .3s ease}
.page-content.active{display:block}
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}

.page-header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:24px}
.page-title{font-size:26px;font-weight:800;color:var(--text-primary);line-height:1.2}
.page-subtitle{font-size:12px;color:var(--text-secondary);margin-top:3px}
.btn-add{
  background:linear-gradient(135deg,#3b82f6,#1d4ed8);color:#fff;
  border:none;border-radius:10px;padding:9px 18px;font-size:13px;font-weight:600;
  font-family:'Cairo',sans-serif;cursor:pointer;display:flex;align-items:center;gap:7px;
  box-shadow:0 4px 14px rgba(59,130,246,.35);transition:all .2s;
}
.btn-add:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(59,130,246,.45)}

/* ══════════════ PRODUCTS PAGE ══════════════ */
.products-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}

.product-card{
  background:var(--card-bg);border-radius:14px;padding:18px;
  border:1px solid var(--border);transition:all .22s;
  box-shadow:0 1px 4px rgba(0,0,0,.05);
}
.product-card:hover{transform:translateY(-3px);box-shadow:0 8px 24px rgba(0,0,0,.1);border-color:#bfdbfe}

.product-card-top{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:14px}
.product-icon-wrap{
  width:46px;height:46px;border-radius:12px;
  background:linear-gradient(135deg,#0ea5e9,#0284c7);
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:20px;box-shadow:0 4px 12px rgba(14,165,233,.3);
}
.product-top-left{display:flex;align-items:center;gap:8px}
.product-id{font-size:11px;color:var(--text-secondary);font-weight:500}
.btn-del{
  background:#fef2f2;border:1px solid #fecaca;color:#ef4444;
  border-radius:7px;padding:4px 8px;font-size:11px;cursor:pointer;
  transition:all .15s;font-family:'Cairo',sans-serif;
}
.btn-del:hover{background:#ef4444;color:#fff}

.product-name{font-size:14.5px;font-weight:700;color:var(--text-primary);margin-bottom:4px;text-align:right}
.product-meta{font-size:10.5px;color:var(--text-secondary);text-align:right;margin-bottom:14px}

.price-row{
  display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px;
}
.price-box{background:#f8fafc;border-radius:9px;padding:10px 12px;text-align:center}
.price-label{font-size:9.5px;color:var(--text-secondary);margin-bottom:3px;font-weight:500}
.price-val{font-size:14px;font-weight:700;color:var(--text-primary)}
.price-val.installment{color:var(--accent)}

.profit-row{display:flex;align-items:center;justify-content:space-between}
.profit-pct{font-size:12px;font-weight:700;color:var(--success)}
.profit-label{font-size:11px;color:var(--text-secondary)}

/* ══════════════ CUSTOMERS PAGE ══════════════ */
.search-filter-row{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.table-search{
  flex:1;display:flex;align-items:center;gap:9px;
  background:#fff;border:1px solid var(--border);border-radius:10px;
  padding:9px 14px;
}
.table-search input{
  border:none;background:none;outline:none;width:100%;
  font-family:'Cairo',sans-serif;font-size:12.5px;color:var(--text-primary);
}
.table-search input::placeholder{color:#94a3b8}
.btn-filter{
  background:#fff;border:1px solid var(--border);border-radius:10px;
  padding:9px 16px;font-family:'Cairo',sans-serif;font-size:12.5px;
  color:var(--text-secondary);cursor:pointer;display:flex;align-items:center;gap:7px;
  transition:all .15s;
}
.btn-filter:hover{border-color:#3b82f6;color:#3b82f6}

.customers-table{
  background:#fff;border-radius:14px;border:1px solid var(--border);
  overflow:hidden;box-shadow:0 1px 4px rgba(0,0,0,.05);
}
.customers-table table{width:100%;border-collapse:collapse}
.customers-table thead th{
  background:#f8fafc;padding:12px 16px;font-size:11.5px;font-weight:700;
  color:var(--text-secondary);border-bottom:1px solid var(--border);text-align:right;
}
.customers-table tbody tr{border-bottom:1px solid #f1f5f9;transition:background .15s}
.customers-table tbody tr:last-child{border-bottom:none}
.customers-table tbody tr:hover{background:#fafbff}
.customers-table tbody td{padding:12px 16px;font-size:12.5px;color:var(--text-primary);vertical-align:middle}

.cust-avatar{
  width:34px;height:34px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:13px;font-weight:700;flex-shrink:0;
}
.cust-name-wrap{display:flex;align-items:center;gap:10px}
.cust-info .cn{font-size:13px;font-weight:600;color:var(--text-primary)}
.cust-info .ci{font-size:10.5px;color:var(--text-secondary)}

.badge-status{
  padding:3px 10px;border-radius:20px;font-size:10.5px;font-weight:700;
  display:inline-block;
}
.badge-active{background:#dcfce7;color:#16a34a}
.badge-late{background:#fef9c3;color:#b45309}
.badge-done{background:#e0f2fe;color:#0369a1}

/* ══════════════ CONTRACTS PAGE ══════════════ */
.contracts-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}

.contract-card{
  background:#fff;border-radius:14px;padding:18px;
  border:1px solid var(--border);transition:all .22s;
  box-shadow:0 1px 4px rgba(0,0,0,.05);
}
.contract-card:hover{transform:translateY(-3px);box-shadow:0 8px 24px rgba(0,0,0,.1)}

.contract-top{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:4px}
.contract-id{font-size:11.5px;font-weight:700;color:var(--text-primary)}
.contract-customer{font-size:11px;color:var(--text-secondary);margin-bottom:2px;text-align:right}
.contract-icon{
  width:38px;height:38px;border-radius:10px;
  background:linear-gradient(135deg,#3b82f6,#1d4ed8);
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:16px;box-shadow:0 3px 10px rgba(59,130,246,.3);flex-shrink:0;
}
.contract-product{font-size:14px;font-weight:700;color:var(--text-primary);margin-bottom:3px;text-align:right}
.contract-schedule{font-size:10.5px;color:var(--text-secondary);text-align:right;margin-bottom:12px}

.progress-wrap{margin-bottom:12px}
.progress-pct{font-size:11px;font-weight:700;color:var(--text-primary);margin-bottom:5px}
.progress-bar-track{background:#e2e8f0;border-radius:20px;height:7px;overflow:hidden}
.progress-bar-fill{height:100%;border-radius:20px;transition:width .6s ease;
  background:linear-gradient(90deg,#3b82f6,#0ea5e9)}
.progress-bar-fill.done{background:linear-gradient(90deg,#10b981,#34d399)}
.progress-bar-fill.late{background:linear-gradient(90deg,#f59e0b,#fbbf24)}

.contract-amounts{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.amt-box{text-align:center}
.amt-label{font-size:9.5px;color:var(--text-secondary);font-weight:600;margin-bottom:3px}
.amt-val{font-size:12.5px;font-weight:700}
.amt-val.total{color:var(--text-primary)}
.amt-val.paid{color:var(--success)}
.amt-val.remain{color:var(--warning)}

.contract-top-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.contract-left{flex:1}

/* ══════════════ DASHBOARD PAGE ══════════════ */
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:24px}
.stat-card{
  background:#fff;border-radius:14px;padding:18px;
  border:1px solid var(--border);box-shadow:0 1px 4px rgba(0,0,0,.05);
  display:flex;align-items:center;gap:14px;
}
.stat-icon{
  width:46px;height:46px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0;
}
.stat-icon.blue{background:#eff6ff;color:#3b82f6}
.stat-icon.green{background:#f0fdf4;color:#10b981}
.stat-icon.orange{background:#fff7ed;color:#f59e0b}
.stat-icon.teal{background:#f0f9ff;color:#0ea5e9}
.stat-val{font-size:22px;font-weight:800;color:var(--text-primary)}
.stat-label{font-size:11.5px;color:var(--text-secondary)}

.recent-section{background:#fff;border-radius:14px;border:1px solid var(--border);
  box-shadow:0 1px 4px rgba(0,0,0,.05);overflow:hidden;}
.recent-header{padding:16px 20px;border-bottom:1px solid var(--border);
  font-size:14px;font-weight:700;color:var(--text-primary)}

/* Colors for avatars */
.c1{background:#3b82f6} .c2{background:#8b5cf6} .c3{background:#f59e0b}
.c4{background:#10b981} .c5{background:#ef4444} .c6{background:#0ea5e9} .c7{background:#ec4899}