:root{
  --app-bg: #f5f7fb;
  --app-card: #ffffff;
  --app-border: rgba(15, 23, 42, .10);
  --app-text: #0f172a;
  --app-muted: rgba(15, 23, 42, .65);
  --app-primary: #1d4ed8;
  --app-success: #16a34a;
  --app-danger: #dc2626;
  --app-warning: #d97706;

  --radius: 14px;
  --shadow: 0 12px 28px rgba(2,6,23,.08);
  --shadow-sm: 0 6px 18px rgba(2,6,23,.06);
}

html, body { height: 100%; }
body{
  background: var(--app-bg);
  color: var(--app-text);
}

/* Typography */
h1,h2,h3,h4{ letter-spacing: -.02em; }
.text-muted{ color: var(--app-muted) !important; }

/* Links */
a{ text-decoration: none; }
a:hover{ text-decoration: underline; }

/* Navbar */
.navbar{
  background: rgba(255,255,255,.92) !important;
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--app-border);
}
.navbar-brand{ font-weight: 800; letter-spacing: .2px; }
.navbar .nav-link{ font-weight: 600; color: rgba(15,23,42,.75) !important; }
.navbar .nav-link:hover{ color: rgba(15,23,42,.95) !important; }
.navbar .nav-link.active{ color: var(--app-primary) !important; }

/* Layout */
.app-page{ padding: 1.25rem 0 2rem; }
.page-title{
  font-weight: 800;
  margin: 0;
}
.page-subtitle{
  margin: .35rem 0 0;
  color: var(--app-muted);
}

/* Surfaces */
.panel, .card{
  background: var(--app-card);
  border: 1px solid var(--app-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.card{ box-shadow: var(--shadow-sm); }
.card-header{
  background: transparent;
  border-bottom: 1px solid var(--app-border);
  font-weight: 700;
}
.card-footer{
  background: transparent;
  border-top: 1px solid var(--app-border);
}

/* Buttons */
.btn{
  border-radius: 12px;
  font-weight: 700;
}
.btn-primary{ background: var(--app-primary); border-color: var(--app-primary); }
.btn-outline-primary{ border-color: rgba(29,78,216,.45); }
.btn-outline-primary:hover{ background: rgba(29,78,216,.08); }
.btn-soft{
  background: rgba(29,78,216,.08);
  border: 1px solid rgba(29,78,216,.18);
  color: var(--app-primary);
}
.btn-soft:hover{ background: rgba(29,78,216,.12); }

/* Forms */
.form-control, .form-select{
  border-radius: 12px;
  border-color: rgba(15,23,42,.12);
}
.form-control:focus, .form-select:focus{
  border-color: rgba(29,78,216,.55);
  box-shadow: 0 0 0 .25rem rgba(29,78,216,.15);
}
.form-label{ font-weight: 700; color: rgba(15,23,42,.85); }

/* Tables */
.table{
  border-color: rgba(15,23,42,.10);
}
.table thead th{
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: rgba(15,23,42,.70);
  background: rgba(255,255,255,.75);
}
.table tbody tr:hover{ background: rgba(29,78,216,.04); }
.table td, .table th{ vertical-align: middle; }

/* Badges */
.badge{
  border-radius: 999px;
  padding: .5em .75em;
  font-weight: 800;
}

/* Status badges */
.badge-success{ background: rgba(22,163,74,.12); color: var(--app-success); border: 1px solid rgba(22,163,74,.25); }
.badge-danger{ background: rgba(220,38,38,.12); color: var(--app-danger); border: 1px solid rgba(220,38,38,.25); }
.badge-warning{ background: rgba(217,119,6,.12); color: var(--app-warning); border: 1px solid rgba(217,119,6,.25); }
.badge-info{ background: rgba(2,132,199,.12); color: #0369a1; border: 1px solid rgba(2,132,199,.25); }

/* Alerts */
.alert{
  border-radius: 14px;
  border: 1px solid var(--app-border);
}

/* Utility: KPI cards */
.kpi{
  padding: 1rem;
  border-radius: var(--radius);
  border: 1px solid var(--app-border);
  background: var(--app-card);
  box-shadow: var(--shadow-sm);
}
.kpi .kpi-title{ font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--app-muted); }
.kpi .kpi-value{ font-size: 1.35rem; font-weight: 900; margin-top: .25rem; }


/* Shell */
.app-shell{
  display: flex;
  min-height: calc(100vh - 56px);
}
.app-main{
  flex: 1;
  min-width: 0;
}
.app-topbar{
  height: 56px;
}
.app-page{ padding: 1.25rem 0 2rem; }

/* Sidebar */
.app-sidebar{
  width: 260px;
  background: rgba(255,255,255,.86);
  border-right: 1px solid var(--app-border);
  position: sticky;
  top: 56px;
  height: calc(100vh - 56px);
}
.app-sidebar-brand{
  border-bottom: 1px solid var(--app-border);
}
.app-section-title{
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--app-muted);
  margin: .75rem 0 .35rem;
}
.app-nav .nav-link{
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .55rem .65rem;
  border-radius: 12px;
  color: rgba(15,23,42,.78);
  font-weight: 700;
}
.app-nav .nav-link i{ font-size: 1.05rem; opacity: .9; }
.app-nav .nav-link:hover{
  background: rgba(29,78,216,.08);
  color: var(--app-primary);
  text-decoration: none;
}
.app-nav .nav-link.active{
  background: rgba(29,78,216,.12);
  color: var(--app-primary);
  border: 1px solid rgba(29,78,216,.18);
}
.app-sidebar-footer{
  border: 1px solid var(--app-border);
  background: rgba(255,255,255,.65);
  box-shadow: var(--shadow-sm);
}

/* Offcanvas */
.app-offcanvas .offcanvas-header{
  border-bottom: 1px solid var(--app-border);
}
.app-offcanvas .offcanvas-body{
  background: var(--app-bg);
}

/* Topbar */
.app-topbar{
  background: rgba(255,255,255,.92) !important;
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--app-border);
}
.app-topbar .input-group-text{
  border-radius: 12px 0 0 12px;
}
.app-topbar .form-control{
  border-radius: 0;
}
.app-topbar .btn-primary{
  border-radius: 0 12px 12px 0;
}

/* Dark mode */
html[data-theme="dark"]{
  --app-bg: #0b1220;
  --app-card: #0f172a;
  --app-border: rgba(148,163,184,.18);
  --app-text: #e2e8f0;
  --app-muted: rgba(226,232,240,.68);
  --shadow: 0 12px 30px rgba(0,0,0,.35);
  --shadow-sm: 0 8px 18px rgba(0,0,0,.28);
}

html[data-theme="dark"] body{ background: var(--app-bg); color: var(--app-text); }
html[data-theme="dark"] .panel,
html[data-theme="dark"] .card,
html[data-theme="dark"] .kpi{
  background: var(--app-card);
  border-color: var(--app-border);
}
html[data-theme="dark"] .navbar,
html[data-theme="dark"] .app-topbar{
  background: rgba(15,23,42,.78) !important;
  border-color: var(--app-border);
}
html[data-theme="dark"] .app-sidebar{
  background: rgba(15,23,42,.76);
  border-color: var(--app-border);
}
html[data-theme="dark"] .app-sidebar-footer{
  background: rgba(15,23,42,.55);
  border-color: var(--app-border);
}
html[data-theme="dark"] .table thead th{
  background: rgba(15,23,42,.55);
  color: rgba(226,232,240,.75);
}
html[data-theme="dark"] .btn-outline-secondary{
  color: rgba(226,232,240,.85);
  border-color: rgba(226,232,240,.25);
}
html[data-theme="dark"] .btn-outline-secondary:hover{
  background: rgba(226,232,240,.08);
}
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select,
html[data-theme="dark"] .input-group-text{
  background: rgba(15,23,42,.65);
  color: var(--app-text);
  border-color: rgba(148,163,184,.22);
}
html[data-theme="dark"] .dropdown-menu{
  background: rgba(15,23,42,.98);
  border-color: rgba(148,163,184,.22);
}
html[data-theme="dark"] .dropdown-item{ color: rgba(226,232,240,.9); }
html[data-theme="dark"] .dropdown-item:hover{ background: rgba(226,232,240,.08); }