:root{
  --brand-blue: #0d6efd;
  --brand-blue-dark: #0b5ed7;
  --brand-navy: #093170;
  --sidebar-width: 240px;
}

body{
  background:#f4f7fb;
  font-family: 'Segoe UI', Roboto, Arial, sans-serif;
}

/* ---------- Navbar ---------- */
.app-navbar{
  background: linear-gradient(90deg, var(--brand-navy), var(--brand-blue));
  z-index: 1030;
}

/* ---------- Layout ---------- */
.app-wrapper{
  display:flex;
  min-height: calc(100vh - 56px);
}

.app-sidebar{
  width: var(--sidebar-width);
  background: #ffffff;
  border-right: 1px solid #e5e9f2;
  flex-shrink:0;
  transition: transform .25s ease;
}

.app-sidebar .nav-link{
  color:#3b4a63;
  font-weight:500;
  border-radius:8px;
  padding:.65rem .9rem;
  margin-bottom:2px;
}
.app-sidebar .nav-link i{ width:22px; margin-right:6px; }
.app-sidebar .nav-link:hover,
.app-sidebar .nav-link.active{
  background: var(--brand-blue);
  color:#fff;
}
.nav-section-label{
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.05em;
  color:#8a94a6;
  padding:.4rem .9rem;
}

.app-content{
  flex-grow:1;
  min-width:0;
}

.sidebar-backdrop{
  display:none;
  position:fixed; inset:0;
  background:rgba(0,0,0,.4);
  z-index:1020;
}

/* ---------- Cards ---------- */
.stat-card{
  border:none;
  border-radius:16px;
  color:#fff;
  box-shadow: 0 6px 18px rgba(13,110,253,.15);
}
.stat-card .stat-icon{ font-size:2rem; opacity:.85; }
.stat-card.blue   { background: linear-gradient(135deg,#0d6efd,#3b8bfd); }
.stat-card.orange { background: linear-gradient(135deg,#fd7e14,#ffb35c); }
.stat-card.green  { background: linear-gradient(135deg,#198754,#3bd67f); }
.stat-card.purple { background: linear-gradient(135deg,#6f42c1,#9c7bdb); }
.stat-card.navy   { background: linear-gradient(135deg,#093170,#0d6efd); }

.card{ border-radius:14px; border:1px solid #e9edf5; }
.card-header{ background:#fff; border-bottom:1px solid #eef1f7; font-weight:600; border-radius:14px 14px 0 0 !important; }

/* ---------- Tables ---------- */
.table-responsive{ border-radius:12px; overflow:hidden; }
table thead{ background:#eef4ff; }

/* ---------- Buttons ---------- */
.btn-primary{ background:var(--brand-blue); border-color:var(--brand-blue); }
.btn-primary:hover{ background:var(--brand-blue-dark); border-color:var(--brand-blue-dark); }
.btn, .form-control, .form-select{ border-radius:8px; }
@media (max-width: 576px){
  .btn{ padding:.55rem 1rem; }
}

/* ---------- Photo Upload Preview ---------- */
.photo-preview-box{
  width:100%; aspect-ratio:1/1; border:2px dashed #c8d3e6; border-radius:10px;
  display:flex; align-items:center; justify-content:center; overflow:hidden; background:#f8faff; cursor:pointer;
}
.photo-preview-box img{ width:100%; height:100%; object-fit:cover; }

/* ---------- Responsive ---------- */
@media (max-width: 991.98px){
  .app-sidebar{
    position:fixed; top:56px; bottom:0; left:0;
    transform:translateX(-100%);
    z-index:1025;
    box-shadow: 4px 0 18px rgba(0,0,0,.15);
  }
  .app-sidebar.show{ transform:translateX(0); }
  .sidebar-backdrop.show{ display:block; }
}

/* Print (used for PDF export via browser Print-to-PDF) */
@media print{
  .app-navbar, .app-sidebar, footer, .no-print{ display:none !important; }
  .app-content{ width:100% !important; }
  body{ background:#fff; }
}