:root{
  --card-radius:18px;
  --soft-shadow:0 10px 30px rgba(16,24,40,.08);
  --soft-border:1px solid rgba(16,24,40,.08);
}

html,body{height:100%}
body.app-body{
  font-family:'Cairo', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:#f6f8fb;
  color:#0f172a;
}

.app-navbar{backdrop-filter:saturate(180%) blur(10px)}
.navbar-brand{font-weight:700;letter-spacing:.2px}
.brand-mark{
  width:34px;height:34px;border-radius:12px;
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(13,110,253,.10);
  color:#0d6efd;
}

.app-container{max-width:1400px}

.card{border-radius:var(--card-radius);border:var(--soft-border)}
.card.shadow-sm{box-shadow:var(--soft-shadow)!important}

.sidebar{min-height:calc(100vh - 70px)}
.app-sidebar-card{position:sticky;top:84px}
.sidebar .nav-link{
  border-radius:14px;
  padding:.6rem .75rem;
  color:#0f172a;
  display:flex;align-items:center;
}
.sidebar .nav-link:hover{background:rgba(2,6,23,.04)}
.sidebar .nav-link.active{
  background:rgba(13,110,253,.12);
  color:#0d6efd;
  font-weight:700;
}
.small-muted{color:#64748b;font-size:.9rem}

.table thead th{white-space:nowrap;color:#334155;font-weight:700}
.table td{vertical-align:middle}
.badge{font-weight:700}

.btn{border-radius:14px}
.btn-sm{border-radius:12px}
.form-control,.form-select{border-radius:14px}

.page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.page-title{margin:0;font-weight:800}
.page-subtitle{color:#64748b}

.kpi{display:flex;align-items:center;gap:12px}
.kpi .kpi-ico{
  width:44px;height:44px;border-radius:16px;
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(2,6,23,.04);
}
.kpi .kpi-val{font-size:1.8rem;font-weight:900;line-height:1}
.kpi .kpi-lbl{color:#64748b}

.table-search{max-width:340px}

:focus-visible{outline:3px solid rgba(13,110,253,.35);outline-offset:2px}

@media (max-width: 991.98px){
  .app-sidebar-card{position:static;top:auto}
  .sidebar{min-height:auto}
}