@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700&display=swap');

:root{
  --brand:#0969ad;
  --accent:#f89208;
  --ink:#0b1220;
  --muted:#64748b;
  --bg:#f6f8fb;
  --card:#ffffff;
  --line:rgba(15,23,42,.08);
  --shadow:0 10px 30px rgba(2,6,23,.08);
  --radius:16px;
}

.app-logo{
  height:40px;   /* غيّر الرقم هنا */
  width:auto;
  object-fit:contain;
}

/* Base */
html,body{height:100%}
body.app-body{
  font-family:Cairo,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:linear-gradient(180deg,#f7fbff 0%, var(--bg) 45%, #fdf7ef 100%);
  color:var(--ink);
}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
.small-muted{color:var(--muted)}

/* Subtle Islamic pattern header */
.app-topbar{
  background:
    radial-gradient(circle at 20% 20%, rgba(248,146,8,.10) 0 22%, transparent 23%),
    radial-gradient(circle at 80% 10%, rgba(9,105,173,.10) 0 18%, transparent 19%),
    linear-gradient(90deg, rgba(9,105,173,.08), rgba(248,146,8,.08));
  border-bottom:1px solid var(--line);
}
.app-nav{background:rgba(255,255,255,.9);backdrop-filter:saturate(180%) blur(10px); border-bottom:1px solid var(--line);}
.app-logo{width:36px;height:36px;object-fit:contain}
.navbar .nav-link{color:var(--ink)}
.navbar .nav-link:hover{color:var(--brand)}
.navbar .nav-link.active{color:var(--brand);font-weight:700}

/* Cards */
.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.card.soft{box-shadow:0 6px 18px rgba(2,6,23,.06)}
.card-header{
  background:transparent;
  border-bottom:1px solid var(--line);
  font-weight:700;
}

/* Buttons */
.btn{border-radius:12px}
.btn-brand{background:var(--brand);border-color:var(--brand);color:#fff}
.btn-brand:hover{filter:brightness(.95);color:#fff}
.btn-accent{background:var(--accent);border-color:var(--accent);color:#111}
.btn-accent:hover{filter:brightness(.95);color:#111}
.btn-soft{
  background:rgba(9,105,173,.08);
  border-color:rgba(9,105,173,.12);
  color:var(--brand);
}
.btn-soft:hover{background:rgba(9,105,173,.12)}
.btn-outline-brand{border-color:var(--brand);color:var(--brand)}
.btn-outline-brand:hover{background:var(--brand);color:#fff}
.badge-soft{
  background:rgba(9,105,173,.10);
  color:var(--brand);
  border:1px solid rgba(9,105,173,.16);
}

/* Tables */
.table thead th{
  color:var(--muted);
  font-weight:700;
  border-bottom:1px solid var(--line)!important;
}
.table td, .table th{vertical-align:middle}
.table-hover tbody tr:hover{background:rgba(9,105,173,.04)}

/* Forms */
.form-control, .form-select{
  border-radius:12px;
  border-color:rgba(15,23,42,.14);
}
.form-control:focus, .form-select:focus{
  border-color:rgba(9,105,173,.45);
  box-shadow:0 0 0 .2rem rgba(9,105,173,.12);
}
.form-label{font-weight:700}

/* KPI chips */
.kpi{
  border-radius:18px;
  padding:14px 16px;
  border:1px solid var(--line);
  background:linear-gradient(180deg, rgba(9,105,173,.06), rgba(248,146,8,.05));
}
.kpi .v{font-size:22px;font-weight:800}
.kpi .k{color:var(--muted);font-weight:700}

/* Footer */
.app-footer{
  background:#fff;
  border-top:1px solid var(--line);
}
.app-footer .mini{
  color:var(--muted);
}

/* Print */
@media print{
  body{background:#fff!important}
  .no-print{display:none!important}
  .card{box-shadow:none!important}
}