:root {
  --app-primary: #0f766e;
  --app-primary-dark: #0b5f59;
  --app-primary-deep: #073b38;
  --app-primary-soft: #e8f7f4;
  --app-accent: #14b8a6;
  --app-bg: #f3f7f6;
  --app-surface: #ffffff;
  --app-surface-2: #f8fbfa;
  --app-border: #dfe9e7;
  --app-text: #173a37;
  --app-muted: #6e8581;
  --app-danger: #dc3545;
  --app-warning: #d99a20;
  --app-success: #198754;
  --sidebar-width: 280px;
  --topbar-height: 76px;
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 24px;
  --shadow-sm: 0 8px 24px rgba(15, 72, 67, .07);
  --shadow-md: 0 18px 48px rgba(15, 72, 67, .11);
}

* { box-sizing: border-box; }
html { min-height: 100%; }
body.app-body {
  min-height: 100vh;
  margin: 0;
  color: var(--app-text);
  background:
    radial-gradient(circle at 100% 0, rgba(20,184,166,.08), transparent 28rem),
    var(--app-bg);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: .94rem;
  line-height: 1.55;
  overflow-x: hidden;
}
a { color: var(--app-primary); text-decoration: none; }
a:hover { color: var(--app-primary-dark); }
button, input, select, textarea { font: inherit; }

/* Shell */
.app-shell { min-height: 100vh; }
.app-sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 1045;
  width: var(--sidebar-width);
  display: flex;
  flex-direction: column;
  color: rgba(255,255,255,.9);
  background:
    radial-gradient(circle at 22% 4%, rgba(45,212,191,.20), transparent 16rem),
    linear-gradient(180deg, #0b514d 0%, #083d3a 56%, #062d2b 100%);
  box-shadow: 18px 0 48px rgba(4, 37, 34, .17);
  transition: transform .25s ease;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.sidebar-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1040;
  display: none;
  background: rgba(6, 35, 33, .48);
  backdrop-filter: blur(3px);
}
.sidebar-brand {
  min-height: 84px;
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: 1rem 1.15rem;
  color: #fff;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.sidebar-brand:hover { color: #fff; }
.brand-symbol {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 15px;
  color: #0a5b55;
  background: linear-gradient(145deg, #ffffff, #d8fff8);
  box-shadow: 0 10px 26px rgba(0,0,0,.16);
  font-size: 1.2rem;
}
.brand-text { min-width: 0; display: grid; }
.brand-text strong { color: #fff; font-size: 1rem; font-weight: 800; letter-spacing: -.02em; }
.brand-text small { margin-top: .08rem; color: rgba(255,255,255,.6); font-size: .66rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-profile {
  display: flex;
  align-items: center;
  gap: .72rem;
  margin: .95rem .9rem .45rem;
  padding: .8rem;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 16px;
  background: rgba(255,255,255,.07);
}
.profile-avatar {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  color: #0b5d57;
  background: #dffff8;
  font-size: .9rem;
  font-weight: 800;
}
.small-avatar { width: 38px; height: 38px; border-radius: 12px; }
.profile-copy { min-width: 0; display: grid; }
.profile-copy strong { color: #fff; font-size: .79rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.profile-copy span { color: rgba(255,255,255,.58); font-size: .66rem; }
.sidebar-nav { flex: 1; padding: .4rem .75rem 1rem; }
.nav-section-label {
  margin: 1rem .7rem .38rem;
  color: rgba(255,255,255,.42);
  font-size: .61rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.sidebar-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: .75rem;
  min-height: 46px;
  margin: .18rem 0;
  padding: .65rem .75rem;
  border-radius: 13px;
  color: rgba(255,255,255,.73);
  font-size: .78rem;
  font-weight: 650;
  transition: .18s ease;
}
.sidebar-link:hover { color: #fff; background: rgba(255,255,255,.08); transform: translateX(2px); }
.sidebar-link.active { color: #083f3b; background: #e2fff9; box-shadow: 0 10px 24px rgba(0,0,0,.14); }
.sidebar-link.active::before { content: ""; position: absolute; left: -.75rem; width: 4px; height: 24px; border-radius: 0 4px 4px 0; background: #5eead4; }
.sidebar-icon { width: 24px; text-align: center; font-size: .93rem; }
.sidebar-footer { padding: .8rem; border-top: 1px solid rgba(255,255,255,.08); }
.sidebar-public-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  min-height: 46px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 14px;
  color: #fff;
  background: rgba(255,255,255,.08);
  font-size: .76rem;
  font-weight: 700;
}
.sidebar-public-link:hover { color: #083f3b; background: #e2fff9; }

.app-main { min-height: 100vh; display: flex; flex-direction: column; margin-left: var(--sidebar-width); }
.app-topbar {
  position: sticky;
  top: 0;
  z-index: 1030;
  min-height: var(--topbar-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .75rem clamp(1rem, 2.3vw, 2rem);
  border-bottom: 1px solid rgba(216,231,228,.85);
  background: rgba(255,255,255,.88);
  backdrop-filter: blur(16px);
}
.topbar-left, .topbar-actions { display: flex; align-items: center; gap: .8rem; }
.sidebar-toggle {
  width: 44px;
  height: 44px;
  display: none;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--app-border);
  border-radius: 13px;
  color: var(--app-primary);
  background: #fff;
  box-shadow: 0 5px 15px rgba(15,72,67,.06);
}
.topbar-page { display: grid; line-height: 1.2; }
.topbar-kicker { color: var(--app-muted); font-size: .62rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.topbar-page strong { margin-top: .15rem; font-size: .88rem; font-weight: 800; }
.user-menu-button {
  display: flex;
  align-items: center;
  gap: .58rem;
  min-height: 48px;
  padding: .32rem .48rem;
  border: 1px solid var(--app-border);
  border-radius: 15px;
  color: var(--app-text);
  background: #fff;
}
.user-menu-copy { min-width: 110px; text-align: left; line-height: 1.2; }
.user-menu-copy strong, .user-menu-copy small { display: block; }
.user-menu-copy strong { max-width: 140px; font-size: .74rem; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-menu-copy small { margin-top: .14rem; color: var(--app-muted); font-size: .62rem; }
.user-chevron { color: #90a29f; font-size: .65rem; }
.dropdown-menu { border-radius: 14px; padding: .45rem; }
.dropdown-item { border-radius: 10px; padding: .62rem .7rem; font-size: .78rem; }

.app-content { flex: 1; width: min(100%, 1600px); margin-inline: auto; padding: 1.65rem clamp(1rem, 2.3vw, 2rem) 2rem; }
.content-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; }
.content-heading h1 { margin: .32rem 0 .28rem; color: #123c38; font-size: clamp(1.45rem, 2.2vw, 2rem); font-weight: 850; letter-spacing: -.035em; }
.content-heading p { margin: 0; color: var(--app-muted); font-size: .78rem; }
.content-eyebrow { display: inline-flex; align-items: center; gap: .42rem; color: var(--app-primary); font-size: .65rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.app-footer { display: flex; justify-content: space-between; gap: 1rem; padding: 1rem clamp(1rem,2.3vw,2rem); border-top: 1px solid var(--app-border); color: var(--app-muted); background: rgba(255,255,255,.65); font-size: .68rem; }

/* Bootstrap refinement */
.card {
  margin-bottom: 1.15rem;
  border: 1px solid rgba(214,229,226,.95);
  border-radius: var(--radius-md);
  background: var(--app-surface);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.card-header {
  min-height: 68px;
  display: flex;
  align-items: center;
  padding: 1rem 1.15rem;
  border-bottom: 1px solid var(--app-border);
  background: linear-gradient(180deg, #fff, #fbfdfd);
}
.card-body { padding: 1.15rem; }
.card-body.p-0 { overflow-x: auto; }
.card-title { color: var(--app-text); font-size: .88rem; font-weight: 800; }
.section-card-title { display: flex; align-items: center; gap: .72rem; }
.section-card-title .icon-box,
.icon-box {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 13px;
  color: var(--app-primary);
  background: var(--app-primary-soft);
}
.section-card-title small { display: block; margin-top: .12rem; font-size: .68rem; }

.btn {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .42rem;
  border-radius: 12px;
  padding: .55rem .82rem;
  font-size: .75rem;
  font-weight: 750;
  box-shadow: none !important;
}
.btn-sm { min-height: 36px; border-radius: 10px; padding: .42rem .66rem; font-size: .7rem; }
.btn-xs { min-height: 31px; border-radius: 9px; padding: .32rem .52rem; font-size: .65rem; }
.btn-teal, .btn-primary {
  color: #fff !important;
  border-color: var(--app-primary);
  background: linear-gradient(135deg, var(--app-primary), #10968b);
}
.btn-teal:hover, .btn-primary:hover { border-color: var(--app-primary-dark); background: linear-gradient(135deg, var(--app-primary-dark), var(--app-primary)); transform: translateY(-1px); }
.btn-soft-primary { color: var(--app-primary); border: 1px solid #cde9e5; background: var(--app-primary-soft); }
.btn-soft-primary:hover { color: #fff; border-color: var(--app-primary); background: var(--app-primary); }
.btn-outline-secondary { color: #526a67; border-color: #cedbd9; }
.btn-outline-secondary:hover { color: #fff; border-color: #607c78; background: #607c78; }
.btn-outline-danger:hover { color: #fff; }
.btn-block { width: 100%; }

.form-group { margin-bottom: 1rem; }
.form-row { display: flex; flex-wrap: wrap; margin-right: -.375rem; margin-left: -.375rem; }
.form-row > [class*="col-"] { padding-right: .375rem; padding-left: .375rem; }
.form-label, label, .form-group label { margin-bottom: .42rem; color: #244844; font-size: .72rem; font-weight: 750; }
.form-control, .form-select, select.form-control {
  min-height: 46px;
  border: 1px solid #cadbd8;
  border-radius: 12px;
  color: var(--app-text);
  background-color: #fff;
  font-size: .78rem;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
textarea.form-control { min-height: 92px; padding-top: .72rem; resize: vertical; }
.form-control:focus, .form-select:focus, select.form-control:focus {
  border-color: #6bbdb4;
  box-shadow: 0 0 0 .22rem rgba(15,118,110,.12);
}
.form-control::placeholder { color: #9aaba8; }
.input-group-text { border-color: #cadbd8; border-radius: 0 12px 12px 0; color: var(--app-muted); background: #f4f8f7; font-size: .74rem; }
.input-group-append { display: flex; }
.input-group > .form-control { border-radius: 12px 0 0 12px; }

.table { min-width: 720px; margin-bottom: 0; color: #2d4b47; font-size: .74rem; vertical-align: middle; }
.table > :not(caption) > * > * { padding: .82rem .92rem; border-bottom-color: #edf3f2; }
.table thead th {
  color: #607874;
  background: #f7faf9;
  font-size: .64rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.table tbody tr { transition: background .14s ease; }
.table-hover > tbody > tr:hover > * { --bs-table-accent-bg: #f2fbf9; color: inherit; }
.table code { color: #0c7169; font-size: .67rem; font-weight: 700; }
.table-empty { padding: 2.4rem 1rem !important; color: var(--app-muted); text-align: center; }
.action-group { display: flex; flex-wrap: nowrap; gap: .35rem; }

.badge { display: inline-flex; align-items: center; border-radius: 999px; padding: .38rem .6rem; font-size: .62rem; font-weight: 800; letter-spacing: .01em; }
.badge-success { color: #17643e; background: #dcf6e7; }
.badge-info { color: #175e70; background: #dff4fa; }
.badge-warning { color: #7a5516; background: #fff0c4; }
.badge-danger { color: #9c3340; background: #ffe1e5; }
.badge-secondary { color: #566c68; background: #e9efee; }
.badge-primary { color: #155d57; background: #dff7f3; }

.alert { border-radius: 15px; font-size: .76rem; }
.app-alert { display: flex; align-items: flex-start; gap: .65rem; margin-bottom: 1rem; padding: .9rem 1rem; border-width: 1px; }
.app-alert > i { margin-top: .15rem; }
.alert-info { color: #255d68; border-color: #cde8ed; background: #eefafd; }
.alert-warning { color: #745620; border-color: #f1dfb4; background: #fff9e9; }
.alert-success { color: #276541; border-color: #cce8d7; background: #f0faf4; }
.alert-danger { color: #923c45; border-color: #f1ced2; background: #fff3f4; }
.progress { border-radius: 999px; background: #ecf2f1; overflow: hidden; }
.progress-bar { border-radius: 999px; }
.bg-teal { background: linear-gradient(90deg, var(--app-primary), var(--app-accent)) !important; }
.text-teal { color: var(--app-primary) !important; }
.text-right { text-align: right !important; }
.mr-1 { margin-right: .25rem !important; }
.mr-2 { margin-right: .5rem !important; }
.ml-1 { margin-left: .25rem !important; }
.pr-5 { padding-right: 3rem !important; }

/* Dashboard */
.metric-card {
  position: relative;
  min-height: 174px;
  margin-bottom: 1rem;
  padding: 1.15rem;
  border: 1px solid var(--app-border);
  border-radius: var(--radius-md);
  background: linear-gradient(145deg, #ffffff 0%, #f6fbfa 100%);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.metric-card::after { content: ""; position: absolute; right: -45px; bottom: -65px; width: 150px; height: 150px; border-radius: 50%; background: rgba(15,118,110,.06); }
.metric-card.info::after { background: rgba(36,129,180,.08); }
.metric-card.warning::after { background: rgba(217,154,32,.10); }
.metric-card.success::after { background: rgba(25,135,84,.09); }
.metric-icon { width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; border-radius: 13px; color: var(--app-primary); background: var(--app-primary-soft); }
.metric-card.info .metric-icon { color: #247fb0; background: #e5f4fb; }
.metric-card.warning .metric-icon { color: #a66e12; background: #fff4d9; }
.metric-card.success .metric-icon { color: #1a784b; background: #e2f6e9; }
.metric-value { position: relative; z-index: 1; margin: .8rem 0 0; color: #123d39; font-size: 1.75rem; font-weight: 850; letter-spacing: -.04em; }
.metric-label { position: relative; z-index: 1; margin: .05rem 0 .55rem; color: var(--app-muted); font-size: .72rem; }
.metric-link { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: .35rem; font-size: .68rem; font-weight: 800; }

/* Detail and sections */
.detail-list { display: grid; }
.detail-row { display: grid; grid-template-columns: minmax(125px, 42%) minmax(0, 1fr); gap: .85rem; padding: .68rem 0; border-bottom: 1px solid #edf3f2; }
.detail-row:last-child { border-bottom: 0; }
.detail-label { color: var(--app-muted); font-size: .68rem; line-height: 1.45; }
.detail-value { color: #284a46; font-size: .72rem; font-weight: 700; text-align: right; overflow-wrap: anywhere; }
.form-section { margin-bottom: 1.2rem; padding-bottom: 1.2rem; border-bottom: 1px solid #e8efed; }
.form-section:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }
.form-section-title { margin: 0 0 .85rem; color: #214743; font-size: .79rem; font-weight: 850; }

/* Login */
.login-page-modern {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 1.25rem;
  background:
    radial-gradient(circle at 15% 10%, rgba(45,212,191,.19), transparent 22rem),
    radial-gradient(circle at 85% 90%, rgba(20,184,166,.12), transparent 25rem),
    #eef6f4;
}
.login-shell { width: min(100%, 1040px); }
.login-panel { min-height: 620px; display: grid; grid-template-columns: 1.05fr .95fr; border: 1px solid rgba(202,220,216,.9); border-radius: 30px; background: #fff; box-shadow: 0 32px 80px rgba(8,61,57,.16); overflow: hidden; }
.login-intro { position: relative; display: flex; flex-direction: column; justify-content: space-between; padding: 2.4rem; color: #fff; background: linear-gradient(145deg, #0f766e 0%, #07524d 60%, #063a37 100%); overflow: hidden; }
.login-intro::before, .login-intro::after { content: ""; position: absolute; border-radius: 50%; background: rgba(255,255,255,.08); }
.login-intro::before { width: 320px; height: 320px; right: -160px; top: -130px; }
.login-intro::after { width: 240px; height: 240px; left: -130px; bottom: -110px; }
.login-brand { position: relative; z-index: 1; display: flex; align-items: center; gap: .75rem; }
.login-brand strong { font-size: 1rem; font-weight: 850; }
.login-intro h1 { position: relative; z-index: 1; max-width: 470px; margin: 0; font-size: clamp(2rem, 3.5vw, 3rem); font-weight: 850; line-height: 1.1; letter-spacing: -.045em; }
.login-intro p { position: relative; z-index: 1; max-width: 470px; color: rgba(255,255,255,.72); font-size: .82rem; line-height: 1.65; }
.login-features { position: relative; z-index: 1; display: grid; gap: .65rem; }
.login-feature { display: flex; align-items: center; gap: .65rem; color: rgba(255,255,255,.84); font-size: .74rem; }
.login-feature i { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: 11px; background: rgba(255,255,255,.1); }
.login-form-side { display: grid; place-items: center; padding: 2.2rem; }
.login-form-side > div { width: min(100%, 390px); }
.login-form-side h2 { margin: 0 0 .35rem; color: #163f3b; font-size: 1.75rem; font-weight: 850; letter-spacing: -.035em; }
.login-form-side .lead { margin-bottom: 1.6rem; color: var(--app-muted); font-size: .78rem; }
.login-input-wrap { position: relative; }
.login-input-wrap > i { position: absolute; left: .92rem; top: 50%; z-index: 2; color: #7c9793; transform: translateY(-50%); }
.login-input-wrap .form-control { min-height: 50px; padding-left: 2.65rem; }
.password-toggle { position: absolute; right: .45rem; top: 50%; width: 38px; height: 38px; border: 0; border-radius: 10px; color: #718b87; background: transparent; transform: translateY(-50%); }
.password-toggle:hover { color: var(--app-primary); background: var(--app-primary-soft); }

@media (max-width: 1199.98px) {
  :root { --sidebar-width: 258px; }
  .detail-row { grid-template-columns: minmax(110px, 40%) minmax(0,1fr); }
}
@media (max-width: 991.98px) {
  .app-sidebar { transform: translateX(-102%); }
  .app-sidebar.open { transform: translateX(0); }
  .sidebar-backdrop.show { display: block; }
  .app-main { margin-left: 0; }
  .sidebar-toggle { display: inline-flex; }
  .app-content { padding-top: 1.25rem; }
  .content-heading p { max-width: 650px; }
  .login-panel { grid-template-columns: 1fr; min-height: 0; }
  .login-intro { min-height: 290px; padding: 1.6rem; }
  .login-intro h1 { margin-top: 2rem; font-size: 2rem; }
  .login-features { display: none; }
  .login-form-side { padding: 1.8rem 1.4rem; }
}
@media (max-width: 767.98px) {
  .app-topbar { min-height: 68px; padding-inline: .8rem; }
  .topbar-page { display: none; }
  .app-content { padding-inline: .8rem; }
  .content-heading { margin-bottom: 1rem; }
  .content-heading h1 { font-size: 1.55rem; }
  .content-heading p { font-size: .72rem; }
  .card { border-radius: 16px; }
  .card-header { min-height: 60px; padding: .85rem .9rem; }
  .card-body { padding: .95rem; }
  .form-row { display: block; margin: 0; }
  .form-row > [class*="col-"] { width: 100%; padding: 0; }
  .detail-row { grid-template-columns: 1fr; gap: .18rem; }
  .detail-value { text-align: left; }
  .app-footer { flex-direction: column; align-items: center; text-align: center; }
  .metric-card { min-height: 150px; }
  .login-page-modern { padding: .65rem; }
  .login-panel { border-radius: 22px; }
  .login-intro { min-height: 245px; }
}
@media (max-width: 575.98px) {
  .content-eyebrow { font-size: .58rem; }
  .user-menu-button { border: 0; padding: .15rem; background: transparent; }
  .user-chevron { display: none; }
  .card-header.d-flex { align-items: flex-start !important; flex-direction: column; gap: .7rem; }
  .card-header .btn-group { width: 100%; overflow-x: auto; }
  .card-header .btn-group .btn { flex: 1 0 auto; }
  .card-header > .btn { width: 100%; }
  .action-group { flex-direction: column; min-width: 88px; }
  .action-group .btn { width: 100%; }
  .login-intro h1 { font-size: 1.72rem; }
}

/* Login additions */
body.login-page-modern { color: var(--app-text); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.login-brand-subtitle { margin-top: .14rem; color: rgba(255,255,255,.62); font-size: .68rem; }
.login-intro-copy { position: relative; z-index: 1; }
.login-eyebrow { display: inline-flex; align-items: center; gap: .4rem; margin-bottom: .85rem; padding: .38rem .62rem; border: 1px solid rgba(255,255,255,.14); border-radius: 999px; color: rgba(255,255,255,.85); background: rgba(255,255,255,.08); font-size: .65rem; font-weight: 750; }
.login-copyright { position: relative; z-index: 1; color: rgba(255,255,255,.48); }
.login-form-heading { margin-bottom: 1.4rem; }
.login-form-icon { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; margin-bottom: .75rem; border-radius: 14px; color: var(--app-primary); background: var(--app-primary-soft); }
.login-back-link { display: flex; align-items: center; justify-content: center; gap: .45rem; margin-top: 1.15rem; color: #647d79; font-size: .75rem; font-weight: 700; }
.login-back-link:hover { color: var(--app-primary); }

/* ========================================================================
   CKG Analytics 2026 — polished dashboard, reports, responsive data views
   ======================================================================== */
:root {
  --app-primary: #0f766e;
  --app-primary-dark: #075f58;
  --app-primary-soft: #e7f8f5;
  --app-accent: #14b8a6;
  --app-info: #2d8fbe;
  --app-warning: #d99a20;
  --app-danger: #cf4f5c;
  --app-success: #25865b;
  --app-text: #173e3a;
  --app-muted: #6a817d;
  --app-border: #dce8e6;
  --app-bg: #f3f8f7;
  --app-surface: #ffffff;
  --shadow-sm: 0 8px 24px rgba(19, 70, 65, .07);
  --shadow-md: 0 18px 50px rgba(19, 70, 65, .11);
  --radius-md: 18px;
  --radius-lg: 25px;
}

.app-content { padding-bottom: 2rem; }
.content-heading { margin-bottom: 1rem; }
.content-heading h1 { font-size: clamp(1.35rem, 2vw, 1.8rem); }
.content-heading p { max-width: 720px; }

.dashboard-hero,
.report-hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 1.1rem;
  padding: clamp(1.25rem, 2.6vw, 2rem);
  border-radius: var(--radius-lg);
  color: #fff;
  background:
    radial-gradient(circle at 88% 12%, rgba(94,234,212,.22), transparent 17rem),
    radial-gradient(circle at 6% 110%, rgba(255,255,255,.11), transparent 22rem),
    linear-gradient(135deg, #0f766e 0%, #075d57 58%, #073d3a 100%);
  box-shadow: 0 20px 55px rgba(6,77,71,.20);
  overflow: hidden;
}
.dashboard-hero::after,
.report-hero::after {
  content: "";
  position: absolute;
  width: 190px;
  height: 190px;
  right: -55px;
  bottom: -95px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 50%;
}
.dashboard-hero > *, .report-hero > * { position: relative; z-index: 1; }
.dashboard-hero-kicker,
.report-hero > div > span {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin-bottom: .65rem;
  padding: .38rem .68rem;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 999px;
  color: rgba(255,255,255,.9);
  background: rgba(255,255,255,.08);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.dashboard-hero h2,
.report-hero h2 { max-width: 780px; margin: 0; font-size: clamp(1.45rem, 3vw, 2.25rem); font-weight: 900; letter-spacing: -.045em; line-height: 1.1; }
.dashboard-hero p,
.report-hero p { max-width: 760px; margin: .65rem 0 0; color: rgba(255,255,255,.72); font-size: .78rem; line-height: 1.65; }
.report-hero.compact { padding-block: 1.35rem; }
.report-hero.compact h2 { font-size: clamp(1.3rem, 2.4vw, 1.9rem); }
.hero-actions { display: flex; flex-wrap: wrap; gap: .65rem; flex: 0 0 auto; }
.hero-actions .btn { min-width: 132px; }
.hero-actions .btn-light { color: #165e57; border: 1px solid rgba(255,255,255,.85); background: rgba(255,255,255,.94); }

.period-banner {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: 1rem;
  padding: .85rem 1rem;
  border: 1px solid #cce9e4;
  border-radius: 15px;
  color: #285e59;
  background: linear-gradient(135deg, #effbf8, #fff);
}
.period-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; color: var(--app-primary); background: #dff6f2; }
.period-banner > div { display: grid; min-width: 0; }
.period-banner strong { font-size: .78rem; }
.period-banner span:not(.period-icon):not(.status-dot) { color: var(--app-muted); font-size: .68rem; }
.status-dot { display: inline-flex; align-items: center; gap: .4rem; margin-left: auto; padding: .35rem .55rem; border-radius: 999px; color: #1e704b; background: #def6e8; font-size: .65rem; font-weight: 800; }
.status-dot i { width: 7px; height: 7px; border-radius: 50%; background: #2a9a64; box-shadow: 0 0 0 4px rgba(42,154,100,.12); }

.filter-card { overflow: visible; }
.filter-card .card-body { padding: 1.15rem; }
.filter-heading { display: flex; align-items: center; gap: .7rem; margin-bottom: 1rem; padding-bottom: .9rem; border-bottom: 1px solid #e8efee; }
.filter-heading > div { display: grid; }
.filter-heading strong { color: var(--app-text); font-size: .82rem; }
.filter-heading small { margin-top: .14rem; color: var(--app-muted); font-size: .66rem; }
.filter-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .6rem; }
.filter-actions .btn { min-width: 120px; }

.metrics-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 1rem;
  margin-bottom: 1rem;
}
.metrics-grid .metric-card {
  min-height: 150px;
  display: flex;
  align-items: flex-start;
  gap: .85rem;
  margin: 0;
  padding: 1.05rem;
  border-radius: 18px;
  background: linear-gradient(150deg, #fff, #f8fcfb);
}
.metrics-grid .metric-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--metric-color, var(--app-primary));
}
.metric-primary { --metric-color: var(--app-primary); }
.metric-success { --metric-color: var(--app-success); }
.metric-warning { --metric-color: var(--app-warning); }
.metric-danger { --metric-color: var(--app-danger); }
.metric-info { --metric-color: var(--app-info); }
.metrics-grid .metric-icon { flex: 0 0 auto; color: var(--metric-color, var(--app-primary)); background: color-mix(in srgb, var(--metric-color, var(--app-primary)) 11%, white); }
.metric-copy { min-width: 0; display: grid; }
.metric-copy > span { color: var(--app-muted); font-size: .67rem; font-weight: 750; }
.metric-copy strong { margin-top: .18rem; color: var(--app-text); font-size: clamp(1.55rem, 2.8vw, 2rem); font-weight: 900; letter-spacing: -.04em; }
.metric-copy small { margin-top: .32rem; color: var(--app-muted); font-size: .62rem; line-height: 1.45; }

.mini-metrics-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: .8rem; margin-bottom: 1.25rem; }
.mini-metric { padding: .9rem 1rem; border: 1px solid var(--app-border); border-radius: 15px; background: #fff; box-shadow: var(--shadow-sm); }
.mini-metric > span { display: block; color: var(--app-muted); font-size: .65rem; }
.mini-metric > strong { display: block; margin: .2rem 0 .42rem; color: var(--app-text); font-size: 1.1rem; font-weight: 850; }
.mini-metric > small { color: var(--app-muted); font-size: .62rem; }
.mini-metric .progress { height: 6px; }

.card { box-shadow: var(--shadow-sm); }
.card:hover { box-shadow: 0 12px 34px rgba(19,70,65,.09); }
.card-header h3 { margin: 0; color: var(--app-text); font-size: .86rem; font-weight: 850; }
.card-header small { color: var(--app-muted); font-size: .65rem; }
.icon-danger { color: #b23f49 !important; background: #fff0f2 !important; }

.chart-shell { position: relative; width: 100%; min-height: 285px; }
.chart-shell canvas { display: block; width: 100%; height: 285px; }
.chart-shell.chart-lg { min-height: 330px; }
.chart-shell.chart-lg canvas { height: 330px; }
.chart-shell.chart-tall { min-height: 360px; }
.chart-shell.chart-tall canvas { height: 360px; }

.table-responsive { scrollbar-width: thin; scrollbar-color: #bcd4d0 transparent; }
.table { min-width: 840px; }
.table-subtext { display: block; margin-top: .2rem; color: var(--app-muted); font-size: .62rem; line-height: 1.4; }
.table td strong { color: #244943; }
.data-table td { vertical-align: middle; }
.data-count { display: inline-flex; align-items: center; gap: .35rem; color: var(--app-muted); font-size: .66rem; font-weight: 750; }
.list-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: .65rem; }
.coverage-cell { min-width: 145px; }
.coverage-cell > span { display: block; margin-bottom: .25rem; font-size: .65rem; font-weight: 800; }
.coverage-cell .progress { height: 6px; }
.report-table-scroll, .report-priority-scroll { max-height: 520px; overflow: auto; }

.priority-list { display: grid; }
.priority-item { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: .85rem 1rem; border-bottom: 1px solid #edf3f2; color: inherit; }
.priority-item:last-child { border-bottom: 0; }
.priority-item:hover { color: inherit; background: #f5fbfa; }
.priority-item > div { min-width: 0; display: grid; }
.priority-item strong { color: #284c47; font-size: .72rem; }
.priority-item span:not(.badge) { margin-top: .18rem; color: var(--app-muted); font-size: .62rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.empty-state { min-height: 190px; display: grid; place-items: center; align-content: center; gap: .4rem; padding: 1.5rem; color: var(--app-muted); text-align: center; }
.empty-state i { font-size: 1.7rem; color: #9db5b1; }
.empty-state strong { color: #4b6965; font-size: .8rem; }
.empty-state span { max-width: 420px; font-size: .66rem; }
.empty-state.compact { min-height: 150px; }

/* Improve all old CRUD/forms without changing their logic */
.card .row > [class*="col-"] { min-width: 0; }
.form-control, .form-select, select.form-control { width: 100%; }
.form-section > .row { row-gap: .2rem; }
.detail-list { min-width: 0; }
.action-group .btn span { display: inline; }

@media (max-width: 1199.98px) {
  .metrics-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .mini-metrics-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 991.98px) {
  .dashboard-hero, .report-hero { align-items: flex-start; flex-direction: column; }
  .hero-actions { width: 100%; }
  .hero-actions .btn { flex: 1 1 150px; }
  .filter-actions { justify-content: stretch; }
  .filter-actions .btn { flex: 1 1 130px; }
}
@media (max-width: 767.98px) {
  .app-content { padding-inline: .75rem; }
  .content-heading { display: none; }
  .dashboard-hero, .report-hero { margin-top: .1rem; padding: 1.15rem; border-radius: 19px; }
  .dashboard-hero h2, .report-hero h2 { font-size: 1.42rem; }
  .dashboard-hero p, .report-hero p { font-size: .7rem; }
  .metrics-grid { grid-template-columns: 1fr 1fr; gap: .7rem; }
  .metrics-grid .metric-card { min-height: 135px; display: block; padding: .85rem; }
  .metrics-grid .metric-icon { width: 36px; height: 36px; }
  .metric-copy { margin-top: .55rem; }
  .metric-copy strong { font-size: 1.45rem; }
  .mini-metrics-grid { grid-template-columns: 1fr 1fr; gap: .65rem; }
  .card { border-radius: 16px; }
  .card-header { min-height: 62px; padding: .85rem; }
  .card-body { padding: .9rem; }
  .chart-shell, .chart-shell.chart-lg { min-height: 280px; }
  .chart-shell canvas, .chart-shell.chart-lg canvas { height: 280px; }
  .chart-shell.chart-tall { min-height: 330px; }
  .chart-shell.chart-tall canvas { height: 330px; }
  .action-group .btn span { display: none; }
  .action-group .btn { width: 36px; min-width: 36px; padding-inline: 0; }
  .period-banner { align-items: flex-start; }
  .status-dot { margin-left: 0; }
}
@media (max-width: 479.98px) {
  .metrics-grid, .mini-metrics-grid { grid-template-columns: 1fr; }
  .metrics-grid .metric-card { min-height: 112px; display: flex; align-items: center; }
  .metric-copy { margin-top: 0; }
  .hero-actions { display: grid; grid-template-columns: 1fr; }
  .hero-actions .btn { width: 100%; }
  .period-banner { flex-wrap: wrap; }
  .status-dot { width: fit-content; }
  .list-toolbar { width: 100%; justify-content: space-between; }
  .list-toolbar .btn { flex: 1; }
  .filter-actions { display: grid; grid-template-columns: 1fr; }
  .filter-actions .btn { width: 100%; }
}