:root {
  --app-navy: #0b1f3a;
  --app-navy-2: #102f58;
  --app-blue: #1769e0;
  --app-blue-dark: #0e4ca7;
  --app-bg: #f4f7fb;
  --app-card: #ffffff;
  --app-text: #172b4d;
  --app-muted: #667085;
  --app-border: #e5eaf2;
  --app-shadow: 0 10px 28px rgba(23, 43, 77, .07);
}

* { box-sizing: border-box; }
body { min-height: 100vh; background: var(--app-bg); color: var(--app-text); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
a { text-decoration: none; }

/* HEADER */
.app-navbar {
  min-height: 72px;
  background: linear-gradient(105deg, #07172c 0%, #0c2d57 55%, #124f9e 100%) !important;
  border-bottom: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 8px 22px rgba(5, 20, 40, .18);
}
.app-navbar-inner { min-height: 72px; }
.app-brand { display:flex; align-items:center; gap:10px; color:#fff !important; line-height:1.05; margin-right:28px; }
.app-brand strong { display:block; font-size:1rem; letter-spacing:.03em; }
.app-brand small { display:block; margin-top:4px; color:rgba(255,255,255,.72); font-size:.68rem; letter-spacing:.02em; }
.brand-mark { display:inline-flex; align-items:center; justify-content:center; width:39px; height:39px; border-radius:11px; color:#0d3b79; background:#fff; box-shadow:0 4px 12px rgba(0,0,0,.16); font-weight:800; font-size:1.15rem; }
.app-nav { gap:4px; }
.app-nav .nav-link { color:rgba(255,255,255,.78) !important; font-size:.91rem; font-weight:600; padding:.56rem .78rem; border-radius:9px; transition:.2s ease; }
.app-nav .nav-link:hover, .app-nav .nav-link.active { color:#fff !important; background:rgba(255,255,255,.16) !important; }
.app-user-panel { display:flex; align-items:center; gap:10px; margin-left:18px; padding-left:18px; border-left:1px solid rgba(255,255,255,.18); }
.app-user-avatar { display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:50%; background:#f0b429; color:#142a4b; font-size:.84rem; font-weight:800; }
.app-user-text { min-width:105px; line-height:1.15; color:#fff; }
.app-user-text small { display:block; color:rgba(255,255,255,.64); font-size:.67rem; }
.app-user-text strong { display:block; max-width:145px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.78rem; }
.btn-logout { background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.28); color:#fff; font-size:.82rem; font-weight:700; padding:.42rem .75rem; }
.btn-logout:hover { background:#fff; color:#123b72; }
.app-toggler { border:1px solid rgba(255,255,255,.55); }
.app-toggler:focus { box-shadow:0 0 0 .2rem rgba(255,255,255,.18); }

/* LAYOUT */
.app-main { min-height:calc(100vh - 130px); padding-top:34px; padding-bottom:34px; }
.page-header { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:18px; margin-bottom:24px; }
.page-title { margin:0; color:#152a4d; font-size:1.72rem; font-weight:800; letter-spacing:-.04em; }
.page-subtitle { margin:5px 0 0; color:var(--app-muted); font-size:.93rem; }
.page-actions { display:flex; gap:10px; flex-wrap:wrap; }

/* CARD & CONTENT */
.card, .content-card, .form-card, .card-stat { background:var(--app-card); border:1px solid var(--app-border) !important; border-radius:16px; box-shadow:var(--app-shadow); }
.content-card .card-body { padding:1.35rem; }
.card-stat { height:100%; overflow:hidden; }
.card-stat .card-body { min-height:128px; padding:1.2rem 1.25rem; position:relative; }
.metric-label { color:#60708a; font-size:.8rem; font-weight:700; letter-spacing:.02em; text-transform:uppercase; }
.metric-value { color:#102d55; font-size:1.72rem; font-weight:800; letter-spacing:-.05em; line-height:1.22; margin-top:.36rem; }
.metric-desc { color:#7a879d; font-size:.8rem; margin-top:.36rem; }
.metric-icon { position:absolute; right:18px; top:19px; display:inline-flex; width:38px; height:38px; align-items:center; justify-content:center; border-radius:11px; background:#edf4ff; color:#1769e0; font-size:1.08rem; }
.metric-icon.metric-success { background:#e9f8ef; color:#198754; }
.metric-icon.metric-warning { background:#fff4df; color:#b7791f; }
.metric-icon.metric-purple { background:#f1ecff; color:#7446d8; }
.dashboard-section-title { color:#142b50; font-size:1.05rem; font-weight:800; margin:0; }

/* BUTTONS AND FORM */
.btn { border-radius:9px; font-weight:700; font-size:.88rem; padding:.52rem .82rem; }
.btn-primary { background:var(--app-blue); border-color:var(--app-blue); }
.btn-primary:hover, .btn-primary:focus { background:var(--app-blue-dark); border-color:var(--app-blue-dark); }
.btn-outline-primary { color:var(--app-blue); border-color:#b7cff5; }
.btn-outline-primary:hover { background:var(--app-blue); border-color:var(--app-blue); }
.form-label { color:#34445f; font-size:.86rem; font-weight:700; }
.form-control, .form-select { min-height:41px; border-radius:9px; border-color:#d7e0ec; color:#253854; font-size:.9rem; }
.form-control:focus, .form-select:focus { border-color:#7faef2; box-shadow:0 0 0 .2rem rgba(23,105,224,.12); }
textarea.form-control { min-height:auto; }

/* TABLE */
.table { --bs-table-bg: transparent; --bs-table-hover-bg: #f8fbff; margin-bottom:0; }
.table thead th { padding:.76rem .75rem; background:#f7f9fc; color:#66758d; font-size:.73rem; font-weight:800; letter-spacing:.045em; text-transform:uppercase; border-bottom:1px solid #dfe7f1; white-space:nowrap; }
.table > :not(caption) > * > * { padding:.82rem .75rem; border-color:#edf1f6; vertical-align:middle; }
.table tbody tr:last-child td { border-bottom:0; }
.badge { font-weight:700; padding:.44em .64em; border-radius:999px; }
.empty-state { padding:2.5rem 1rem !important; color:#77869d; text-align:center; }

/* DASHBOARD */
.dashboard-quick-link { display:flex; align-items:center; gap:12px; width:100%; padding:.78rem .85rem; margin-bottom:9px; color:#23416c; background:#f8fbff; border:1px solid #dce8f6; border-radius:10px; font-weight:700; font-size:.88rem; transition:.18s ease; }
.dashboard-quick-link:last-child { margin-bottom:0; }
.dashboard-quick-link .quick-icon { display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:8px; background:#e7f0ff; color:#1769e0; font-size:.92rem; }
.dashboard-quick-link:hover { color:#fff; background:#1769e0; border-color:#1769e0; transform:translateY(-1px); }
.dashboard-quick-link:hover .quick-icon { background:rgba(255,255,255,.2); color:#fff; }
.dashboard-card-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:1.05rem; }
.dashboard-card-header a { font-size:.82rem; font-weight:700; }

/* FOOTER */
.app-footer { background:#fff; border-top:1px solid #e5eaf2; }
.app-footer-inner { display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; padding:17px 12px; color:#79869a; font-size:.8rem; }

/* LOGIN */
.login-wrap { min-height:100vh; background:radial-gradient(circle at 10% 10%, #246ed4 0, transparent 28%), linear-gradient(135deg, #07172c, #0e3970 65%, #1769e0); }
.login-card { border:0 !important; border-radius:18px; box-shadow:0 26px 60px rgba(0,0,0,.25); }
.login-badge { display:inline-flex; padding:.42rem .7rem; border-radius:999px; background:#eaf2ff; color:#124e9c; font-size:.75rem; font-weight:800; letter-spacing:.02em; }

.print-area { background:#fff; padding:30px; border-radius:12px; box-shadow:var(--app-shadow); }

@media (max-width:991.98px) {
  .app-navbar-inner { padding-top:10px; padding-bottom:10px; }
  .app-nav { padding:12px 0; }
  .app-nav .nav-link { padding:.64rem .8rem; }
  .app-user-panel { margin:0 0 5px; padding:12px 0 0; border-left:0; border-top:1px solid rgba(255,255,255,.18); }
}
@media (max-width:575.98px) {
  .app-main { padding-top:22px; padding-bottom:22px; }
  .page-title { font-size:1.45rem; }
  .page-actions { width:100%; }
  .page-actions .btn { flex:1; }
  .content-card .card-body { padding:1rem; }
  .metric-value { font-size:1.48rem; }
  .app-footer-inner { justify-content:center; text-align:center; }
}
@media print {
  .no-print, .app-navbar, .app-footer { display:none !important; }
  body { background:#fff; }
  main.container { max-width:none; padding:0 !important; }
  .print-area { box-shadow:none; border:none; padding:0; }
}
