/* TUEBA shared interface system */
:root {
    --app-bg:#f3f6fa; --surface:#fff; --surface-soft:#f8fafc; --ink:#172b45;
    --muted:#62748b; --line:#e3eaf2; --brand:#2459cf; --brand-soft:#edf3ff;
    --bs-primary-rgb:36,89,207; --bs-body-color:#172b45; --bs-body-bg:#f3f6fa;
    --bs-secondary-color:#62748b; --bs-border-color:#e3eaf2;
}
[data-bs-theme="dark"] {
    --app-bg:#111b2b; --surface:#18263a; --surface-soft:#1d2e44; --ink:#e7eef8;
    --muted:#a6b7cd; --line:#2b3d54; --brand:#8eafff; --brand-soft:#233956;
    --bs-body-color:#e7eef8; --bs-body-bg:#111b2b; --bs-secondary-color:#a6b7cd; --bs-border-color:#2b3d54;
}
* { scrollbar-width:thin; scrollbar-color:#b9c6d6 transparent; }
body { font-family:Inter,system-ui,sans-serif; background:var(--app-bg); color:var(--ink); font-size:.875rem; line-height:1.6; }
button,input,select,textarea { font:inherit; }
:focus-visible { outline:3px solid #7a9feb; outline-offset:3px; }
.skip-link { position:fixed; top:-80px; left:20px; padding:12px 18px; z-index:2000; background:var(--surface); border-radius:10px; }
.skip-link:focus { top:12px; }
.wrapper { height:100vh; height:100dvh; }
.sidebar { width:252px; min-width:252px; background:#152a47!important; border-right:1px solid #223b5b; box-shadow:none; transition:transform .2s; }
.sidebar-header { display:flex; gap:12px; text-align:left!important; align-items:center; min-height:88px; padding:20px!important; border-color:#2c4160!important; }
.sidebar-header img { width:44px; height:44px; object-fit:contain; margin:0!important; padding:5px!important; border-radius:10px!important; }
.sidebar-brand strong { display:block; font-size:1rem; letter-spacing:.04em; color:white; }
.sidebar-brand span { color:#a2b5d0; font-size:.69rem; }
.sidebar-body { flex:1; min-height:0; height:auto!important; padding-bottom:20px!important; }
.sidebar .nav { padding:12px!important; }
.sidebar .nav-item>small { color:#9fb2ce!important; font-size:.65rem!important; letter-spacing:.1em; }
.sidebar .nav-link { color:#bdcce0; padding:11px 13px; margin:3px 0; min-height:44px; border-radius:9px!important; font-weight:500; font-size:.81rem; gap:3px; border:0; }
.sidebar .nav-link i { width:21px; font-size:.95rem; opacity:.85; }
.sidebar .nav-link:hover { color:white; background:#203c5e; transform:none; }
.sidebar .nav-link:hover i { transform:none; }
.sidebar .nav-link.active { color:white; background:#2b5dce; border:0; box-shadow:0 4px 12px #0001; }
.sidebar-footer { border-top:1px solid #2c4160; padding:16px 22px; color:#a2b5d0; font-size:.71rem; }
.sidebar-footer strong { display:block; color:#e6edf8; margin-bottom:3px; font-weight:500; }
.main-content { min-width:0; background:var(--app-bg); }
header.navbar { min-height:76px; padding:14px 30px!important; background:var(--surface)!important; border-color:var(--line)!important; box-shadow:none!important; z-index:1020; }
.header-eyebrow { font-size:.66rem; letter-spacing:.07em; color:var(--muted); margin-bottom:2px; }
.header-title { color:var(--ink); font-size:.94rem; font-weight:650; }
.header-tools,.theme-switch-wrapper { display:flex; align-items:center; gap:10px; }
.header-tools .dropdown { margin:0!important; }
#themeToggle { width:38px; height:38px; padding:0; border-radius:10px!important; }
#userMenu { background:var(--surface-soft); border-color:var(--line); font-size:.8rem; }
.user-name { max-width:190px; display:inline-block; overflow:hidden; text-overflow:ellipsis; vertical-align:middle; white-space:nowrap; }
main { padding:28px 30px 48px!important; background:var(--app-bg)!important; flex:1; }
[data-bs-theme] main.bg-body-tertiary,[data-bs-theme] main.bg-light-subtle { background:var(--app-bg)!important; }
[data-bs-theme="dark"] header.navbar { background:var(--surface)!important; }
main>.container-fluid { max-width:1600px; margin:0 auto; }
.page-view { animation:none; }
.page-view>h5 { font-size:1.5rem; letter-spacing:-.035em; color:var(--ink); text-transform:none!important; margin-bottom:6px!important; line-height:1.3; }
.page-view>h5:focus { outline:none; }
.page-description { color:var(--muted); font-size:.83rem; margin-bottom:24px; max-width:800px; }
.page-view>h6 { font-size:.86rem; color:var(--ink)!important; margin-top:25px!important; }
.page-view>h6 i { color:var(--brand); }
.card { border:1px solid var(--line)!important; border-radius:14px!important; background:var(--surface); color:var(--ink); box-shadow:0 3px 16px #172b4509!important; }
.card:hover,.card[class*="-subtle"]:hover { transform:none; filter:none; box-shadow:0 3px 16px #172b4509!important; }
.card-header { background:var(--surface)!important; border-bottom:1px solid var(--line); padding:17px 20px; font-size:.83rem; color:var(--ink); font-weight:600!important; }
.card-header h6 { font-size:.85rem; color:var(--ink)!important; }
.card-body { padding:20px; }
.card[class*="-subtle"] { background:var(--surface)!important; position:relative; border-left:3px solid #4b79db!important; }
.card.bg-success-subtle { border-left-color:#269985!important; }
.card.bg-danger-subtle { border-left-color:#cf666b!important; }
.card.bg-warning-subtle { border-left-color:#d3a14d!important; }
.card.bg-secondary-subtle { border-left-color:#8293ab!important; }
.card.bg-info-subtle { border-left-color:#4395b5!important; }
.card h3 { font-size:clamp(1.35rem,1.65vw,1.9rem); letter-spacing:-.035em; font-weight:650!important; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; color:var(--ink)!important; line-height:1.4; }
.card h4 { font-size:1.1rem; color:var(--ink)!important; }
.card-body>h6 { font-size:.75rem; font-weight:500!important; color:var(--muted)!important; }
.card .rounded-circle { border-radius:12px!important; }
.card .bg-success.text-white { background:#e5f4ef!important; color:#117768!important; }
.card .bg-danger.text-white { background:#fbeaec!important; color:#bc4c59!important; }
.text-muted { color:var(--muted)!important; }
.text-primary { color:var(--brand)!important; }
[data-bs-theme="dark"] .text-dark,[data-bs-theme="dark"] .card .text-secondary { color:var(--ink)!important; }
[data-bs-theme="dark"] .bg-light,[data-bs-theme="dark"] .bg-white { background:var(--surface-soft)!important; }
.nav-tabs,.nav-pills { gap:5px; padding:5px; background:var(--surface); border:1px solid var(--line); border-radius:11px; }
.nav-tabs { flex-wrap:nowrap; overflow-x:auto; margin-top:20px; }
.nav-tabs .nav-link,.nav-pills .nav-link { border:0; border-radius:7px; color:var(--muted); white-space:nowrap; padding:10px 16px; font-size:.8rem; font-weight:550!important; min-height:40px; }
.nav-tabs .nav-link:hover,.nav-pills .nav-link:hover { background:var(--surface-soft); color:var(--ink); }
.nav-tabs .nav-link.active,.nav-pills .nav-link.active { background:var(--brand-soft); color:var(--brand); }
.filter-bar { padding:16px 18px!important; background:var(--surface)!important; border:1px solid var(--line)!important; box-shadow:none!important; border-radius:12px!important; gap:12px 20px!important; align-items:flex-end!important; }
.filter-bar>.d-flex { flex-direction:column; align-items:flex-start!important; gap:6px!important; }
.filter-bar label { font-size:.69rem!important; color:var(--muted)!important; font-weight:550!important; }
.filter-bar .form-select { width:clamp(135px,11vw,195px)!important; }
.form-control,.form-select { border:1px solid var(--line); background-color:var(--surface); color:var(--ink); border-radius:8px; min-height:40px; font-size:.81rem; box-shadow:none; }
.form-control::placeholder { color:#8797ad; }
.form-control:focus,.form-select:focus { border-color:#779beb; box-shadow:0 0 0 3px #2459cf1a; }
.form-label { font-size:.76rem; font-weight:550; margin-bottom:7px; }
.btn { border-radius:8px; min-height:38px; padding:8px 14px; font-size:.8rem; font-weight:550; transition:background .15s,border-color .15s; }
.btn:hover { transform:none; box-shadow:none; }
.btn-sm { min-height:34px; padding:6px 10px; font-size:.75rem; }
.btn-primary { --bs-btn-bg:#2459cf; --bs-btn-border-color:#2459cf; --bs-btn-hover-bg:#1c49b0; --bs-btn-hover-border-color:#1c49b0; }
.btn-outline-secondary { --bs-btn-color:var(--muted); --bs-btn-border-color:var(--line); --bs-btn-hover-bg:var(--surface-soft); --bs-btn-hover-color:var(--ink); }
.table { --bs-table-bg:transparent; --bs-table-color:var(--ink); --bs-table-border-color:var(--line); --bs-table-striped-bg:var(--surface-soft); --bs-table-hover-bg:var(--brand-soft); font-size:.79rem; margin-bottom:0; font-variant-numeric:tabular-nums; }
.table>:not(caption)>*>* { padding:13px 16px; }
.table thead { --bs-table-bg:var(--surface-soft); --bs-table-color:var(--muted); }
.table thead th { font-size:.68rem; font-weight:650; vertical-align:middle; white-space:nowrap; border-bottom-width:1px; }
.table tbody tr:hover { transform:none; box-shadow:none; }
.table td { vertical-align:middle; }
.table td .btn { min-height:32px; padding:5px 8px; }
.badge { font-size:.65rem; padding:6px 9px; border-radius:5px; font-weight:550; }
.badge.bg-success { background:#e3f3ed!important; color:#16725d!important; }
.badge.bg-danger { background:#fae9ed!important; color:#aa3e52!important; }
.badge.bg-info { background:var(--brand-soft)!important; color:var(--brand)!important; }
.page-link { color:var(--muted); background:var(--surface); border-color:var(--line); font-size:.77rem; padding:7px 12px; }
.active>.page-link { background:#2459cf; border-color:#2459cf; }
.pagination { margin-bottom:0; }
.modal-content,.dropdown-menu { background:var(--surface); color:var(--ink); border:1px solid var(--line); border-radius:14px; box-shadow:0 16px 60px #12243b2e; }
.modal-header,.modal-footer { padding:18px 24px; border-color:var(--line); }
.modal-body { padding:24px; }
.modal-title { font-size:1rem; font-weight:650; }
.dropdown-menu { padding:8px; }
.dropdown-item { padding:10px 12px; border-radius:7px; font-size:.8rem; }
.accordion-item { border-color:var(--line); background:var(--surface); }
.accordion-button { background:var(--surface-soft); color:var(--ink); font-size:.82rem; }
.accordion-button:not(.collapsed) { background:var(--brand-soft); color:var(--brand); box-shadow:none; }
.list-group-item { background:var(--surface); color:var(--ink); border-color:var(--line); padding:16px; }
.list-group-item.active { background:var(--brand-soft); color:var(--brand); border-color:var(--line); }
.alert { font-size:.8rem; border-radius:10px; padding:12px 16px; }
.alert-secondary { color:var(--muted); background:var(--surface-soft); border-color:var(--line); }
.chart-loading::after,[data-bs-theme="dark"] .chart-loading::after { inset:0 0 auto; height:2px; background:linear-gradient(90deg,transparent,#5986e4,transparent); background-size:200% 100%; backdrop-filter:none; animation:loading-line 1.3s linear infinite; }
@keyframes loading-line { to { background-position:-200% 0; } }
.sidebar-backdrop { background:#0a192e73; }
.app-toasts { position:fixed; right:24px; bottom:24px; z-index:2000; width:min(380px,calc(100vw - 32px)); display:grid; gap:10px; }
.app-toast { padding:15px 16px; background:var(--surface); color:var(--ink); border:1px solid var(--line); border-left:3px solid var(--brand); border-radius:11px; box-shadow:0 8px 36px #12243b29; display:flex; gap:12px; align-items:flex-start; }
.app-toast p { margin:0; flex:1; font-size:.82rem; }
.roles-empty { padding:38px 24px; text-align:center; color:var(--muted); border:1px dashed var(--line); border-radius:14px; background:var(--surface); }
.roles-empty i { font-size:1.5rem; display:block; color:var(--brand); margin-bottom:14px; }
@media(max-width:1199.98px) { .sidebar { width:226px; min-width:226px; } main { padding:24px!important; } header.navbar { padding:14px 24px!important; } }
@media(max-width:991.98px) { .sidebar { width:252px; min-width:252px; position:fixed; inset:0 auto 0 0; margin:0; transform:translateX(-100%); } .sidebar.active { margin:0; transform:translateX(0); } .header-title { font-size:.86rem; } }
@media(max-width:767.98px) {
    main { padding:20px 16px 32px!important; } header.navbar { padding:12px 16px!important; min-height:68px; }
    .header-eyebrow { display:none; } .header-title { font-size:.79rem; max-width:145px; }
    #sidebarToggle { margin-right:10px!important; } #userMenu .user-name { max-width:90px; } #userMenu { padding:8px; }
    .header-tools,.theme-switch-wrapper { gap:6px; margin-right:0!important; }
    .page-view>h5 { font-size:1.3rem; } .page-description { font-size:.78rem; margin-bottom:18px; }
    .card-header,.card-body { padding:16px; } .card h3 { font-size:1.5rem; }
    .filter-bar { gap:12px!important; padding:14px!important; } .filter-bar>.d-flex { flex:1 1 140px; } .filter-bar .form-select { width:100%!important; }
    .table { min-width:550px; } .table thead th { padding:11px 12px; } .table td { padding:12px; }
    .nav-tabs .nav-link { padding:9px 12px; } .modal-body { padding:18px; } .app-toasts { right:16px; bottom:16px; }
}
@media(max-width:420px) { .user-name { display:none; } .header-title { max-width:130px; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; } }


/* Academic risk: four independent metrics, empty values stay visually blank. */
#academic-risk .risk-overview { padding:28px; border:1px solid var(--line); border-radius:22px; background:linear-gradient(145deg,var(--surface),var(--surface-soft)); }
#academic-risk .risk-overview-header { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:26px; }
#academic-risk .risk-eyebrow { color:var(--muted); font-size:.64rem; font-weight:700; letter-spacing:.15em; margin-bottom:9px; }
#academic-risk .risk-overview-title { color:var(--ink); font-size:1.25rem; font-weight:650; letter-spacing:-.03em; margin:0; }
#academic-risk .risk-rule { display:inline-flex; align-items:center; gap:8px; white-space:nowrap; color:var(--muted); border:1px solid var(--line); background:var(--surface); border-radius:50px; font-size:.72rem; padding:9px 13px; }
#academic-risk .risk-rule i { color:var(--brand); }
#academic-risk .risk-metrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; }
#academic-risk .risk-metric { --risk-color:#b77b22; --risk-soft:#fff4df; position:relative; overflow:hidden; min-height:235px; padding:24px; border:1px solid var(--line); border-radius:18px; background:var(--surface); box-shadow:0 3px 12px #18334f04; transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease; }
#academic-risk .risk-metric::after { content:""; position:absolute; bottom:0; left:24px; right:24px; height:3px; background:var(--risk-color); opacity:.55; border-radius:3px 3px 0 0; }
#academic-risk .risk-metric:hover { transform:translateY(-3px); border-color:var(--risk-color); box-shadow:0 12px 26px #18334f0b; }
#academic-risk .risk-metric--dismissal { --risk-color:#c3586e; --risk-soft:#fcecf0; }
#academic-risk .risk-metric--progress { --risk-color:#557bd2; --risk-soft:#edf2ff; }
#academic-risk .risk-metric--deadline { --risk-color:#8970c5; --risk-soft:#f2edfc; }
#academic-risk .risk-metric-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:22px; }
#academic-risk .risk-metric-icon { display:grid; place-items:center; width:44px; height:44px; border-radius:14px; background:var(--risk-soft); color:var(--risk-color); font-size:1.05rem; }
#academic-risk .risk-metric-accent { width:22px; height:5px; border-radius:4px; background:var(--risk-color); opacity:.35; }
#academic-risk .risk-metric-label { min-height:2.7em; margin:0 0 12px; color:var(--ink); font-size:.86rem; font-weight:550; line-height:1.4; }
#academic-risk .risk-metric-value { min-height:52px; color:var(--ink); font-size:clamp(1.9rem,2.8vw,2.8rem); font-weight:650; letter-spacing:-.055em; line-height:1.15; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
#academic-risk .risk-metric-unit { margin-top:8px; color:var(--muted); font-size:.72rem; }
[data-bs-theme="dark"] #academic-risk .risk-metric { --risk-soft:#b77b2220; --risk-color:#e2ae60; }
[data-bs-theme="dark"] #academic-risk .risk-metric--dismissal { --risk-soft:#c3586e20; --risk-color:#ee93a7; }
[data-bs-theme="dark"] #academic-risk .risk-metric--progress { --risk-soft:#557bd220; --risk-color:#91b0f5; }
[data-bs-theme="dark"] #academic-risk .risk-metric--deadline { --risk-soft:#8970c520; --risk-color:#bba4eb; }
@media(max-width:1199.98px) { #academic-risk .risk-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:575.98px) {
 #academic-risk .risk-overview { padding:18px; border-radius:18px; }
 #academic-risk .risk-overview-header { align-items:flex-start; flex-direction:column; gap:14px; margin-bottom:20px; }
 #academic-risk .risk-overview-title { font-size:1.1rem; }
 #academic-risk .risk-metrics { grid-template-columns:1fr; gap:14px; }
 #academic-risk .risk-metric { min-height:210px; padding:20px; }
}

/* Entry workspaces show every business tab without horizontal scrolling. */
[data-entry-section] .nav-tabs { flex-wrap:wrap; overflow-x:visible; margin-top:0; }
[data-entry-section] .nav-tabs .nav-link { white-space:normal; max-width:100%; text-align:left; }

/* Leadership dashboards & Enterprise Statistics */
.school-hero { display:flex; justify-content:space-between; align-items:center; gap:1.5rem; flex-wrap:wrap; padding:1.75rem 2rem; border:1px solid var(--line)!important; border-radius:1.15rem; background:linear-gradient(135deg,var(--surface),var(--surface-soft))!important; box-shadow:0 4px 20px rgba(18,38,63,.04); }
.school-hero form { max-width:100%; }
.school-panel { border:1px solid var(--line)!important; border-top:3.5px solid #2459cf!important; border-radius:14px!important; background:var(--surface); transition:transform .25s cubic-bezier(.16,1,.3,1),box-shadow .25s ease!important; box-shadow:0 3px 14px rgba(18,38,63,.04)!important; }
.school-panel:hover { transform:translateY(-3px); box-shadow:0 12px 28px rgba(18,38,63,.08)!important; }
.school-metric { display:flex; flex-direction:column; gap:.35rem; padding:.65rem .85rem; background:var(--surface-soft); border:1px solid var(--line); border-radius:10px; transition:background .2s ease,border-color .2s ease; }
.school-metric:hover { background:var(--surface); border-color:rgba(36,89,207,.3); }
.school-metric strong { font-size:1.35rem; font-weight:700; overflow-wrap:anywhere; color:var(--ink); letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.school-metric small { font-size:.8rem; font-weight:500; color:var(--muted); }
.school-chart { height:230px; position:relative; }
.report-chart { height:280px; position:relative; }
.report-tabs { overflow-x:auto; flex-wrap:nowrap!important; scrollbar-width:thin; }
.report-tabs .nav-link { white-space:nowrap; transition:all .2s ease; }

/* Sticky tab navigation for learner statistics & workspace */
.learner-workspace-tabs-sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 76px;
  z-index: 1010;
  margin-top: -2px;
}
@media (max-width: 991.98px) {
  .learner-workspace-tabs-sticky {
    top: 68px;
  }
}
.learner-workspace-tabs-sticky .card {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--line)!important;
  border-radius: 12px;
  box-shadow: 0 4px 18px rgba(18, 38, 63, 0.07)!important;
  transition: box-shadow .2s ease;
}
[data-bs-theme="dark"] .learner-workspace-tabs-sticky .card {
  background: rgba(30, 41, 59, 0.95);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35)!important;
}
.learner-workspace-tabs-sticky .nav-tabs {
  margin-top: 0!important;
  border: 0!important;
  background: transparent!important;
  padding: 0!important;
}
.learner-workspace-tabs-sticky .nav-tabs .nav-link {
  border-radius: 8px;
  font-weight: 600;
  padding: 8px 14px;
  color: var(--muted);
  transition: all .2s cubic-bezier(.16,1,.3,1);
}
.learner-workspace-tabs-sticky .nav-tabs .nav-link:hover {
  background: var(--surface-soft);
  color: var(--ink);
  transform: translateY(-1px);
}
.learner-workspace-tabs-sticky .nav-tabs .nav-link.active {
  background: var(--brand)!important;
  color: #fff!important;
  box-shadow: 0 3px 10px rgba(36, 89, 207, 0.35)!important;
  transform: translateY(-1px);
}
.learner-workspace-tabs-sticky .nav-tabs .nav-link.active .active-check-icon {
  color: #fff!important;
}
.report-current-badge {
  font-size: .82rem;
  letter-spacing: -.01em;
}

/* ==========================================================================
   TUEBA Modern UX/UI Animations, Skeletons & Micro-interactions
   ========================================================================== */
@keyframes tuebaShimmer { 0% { background-position:-200% 0; } 100% { background-position:200% 0; } }
@keyframes tuebaPulse { 0%,100% { opacity:1; transform:scale(1); } 50% { opacity:.6; transform:scale(.995); } }
@keyframes tuebaFadeInUp { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:translateY(0); } }
@keyframes tuebaSpin { to { transform:rotate(360deg); } }

.tueba-skeleton { background:linear-gradient(90deg,var(--surface-soft) 25%,var(--line) 50%,var(--surface-soft) 75%); background-size:200% 100%; animation:tuebaShimmer 1.6s cubic-bezier(.4,0,.2,1) infinite; border-radius:8px; display:inline-block; }
.tueba-skeleton-card { background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:1.25rem 1.4rem; height:100%; position:relative; overflow:hidden; box-shadow:0 4px 16px rgba(18,38,63,.03); }
.tueba-skeleton-card::before { content:""; position:absolute; inset:0; background:linear-gradient(90deg,transparent 20%,rgba(255,255,255,.45) 50%,transparent 80%); background-size:200% 100%; animation:tuebaShimmer 1.8s ease-in-out infinite; pointer-events:none; }
[data-bs-theme="dark"] .tueba-skeleton-card::before { background:linear-gradient(90deg,transparent 20%,rgba(255,255,255,.06) 50%,transparent 80%); }
.tueba-skeleton-bar { height:12px; border-radius:6px; margin-bottom:12px; }
.tueba-skeleton-value { height:34px; width:60%; border-radius:8px; }
.tueba-skeleton-chart { height:250px; border-radius:12px; width:100%; }

.tueba-animate-in { animation:tuebaFadeInUp .38s cubic-bezier(.16,1,.3,1) both; }
.tueba-delay-1 { animation-delay:.04s; }
.tueba-delay-2 { animation-delay:.08s; }
.tueba-delay-3 { animation-delay:.12s; }
.tueba-delay-4 { animation-delay:.16s; }
.tueba-delay-5 { animation-delay:.20s; }
.tueba-delay-6 { animation-delay:.24s; }

.report-kpi { position:relative; border:1px solid var(--line)!important; border-radius:14px!important; background:var(--surface)!important; overflow:hidden; transition:transform .25s cubic-bezier(.16,1,.3,1),box-shadow .25s ease,border-color .25s ease!important; box-shadow:0 3px 14px rgba(18,38,63,.03)!important; }
.report-kpi::before { content:""; position:absolute; top:0; left:0; right:0; height:3.5px; background:linear-gradient(90deg,#2459cf,#5b87ee); opacity:.9; border-radius:14px 14px 0 0; transition:height .2s ease,opacity .2s ease; }
.report-kpi:hover { transform:translateY(-3px); box-shadow:0 10px 26px rgba(24,43,69,.08)!important; border-color:rgba(36,89,207,.35)!important; }
.report-kpi:hover::before { height:4.5px; opacity:1; }
.report-kpi .card-body { padding:1.25rem 1.4rem; }
.report-kpi .kpi-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:.65rem; }
.report-kpi .kpi-label { font-size:.74rem; font-weight:600; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); line-height:1.3; }
.report-kpi .kpi-icon { width:32px; height:32px; border-radius:9px; display:flex; align-items:center; justify-content:center; font-size:.88rem; background:var(--surface-soft); color:var(--brand); flex-shrink:0; transition:transform .2s ease; }
.report-kpi:hover .kpi-icon { transform:scale(1.1); }
.report-kpi strong { font-size:clamp(1.4rem,1.8vw,1.85rem)!important; font-weight:700!important; color:var(--ink); letter-spacing:-.035em; line-height:1.2; display:block; font-variant-numeric:tabular-nums; }

.kpi-accent-blue::before { background:linear-gradient(90deg,#2459cf,#5b87ee); }
.kpi-accent-blue .kpi-icon { background:rgba(36,89,207,.1); color:#2459cf; }
.kpi-accent-emerald::before { background:linear-gradient(90deg,#10b981,#34d399); }
.kpi-accent-emerald .kpi-icon { background:rgba(16,185,129,.12); color:#059669; }
.kpi-accent-purple::before { background:linear-gradient(90deg,#8b5cf6,#a78bfa); }
.kpi-accent-purple .kpi-icon { background:rgba(139,92,246,.12); color:#7c3aed; }
.kpi-accent-amber::before { background:linear-gradient(90deg,#f59e0b,#fbbf24); }
.kpi-accent-amber .kpi-icon { background:rgba(245,158,11,.12); color:#d97706; }
.kpi-accent-rose::before { background:linear-gradient(90deg,#f43f5e,#fb7185); }
.kpi-accent-rose .kpi-icon { background:rgba(244,63,94,.12); color:#e11d48; }

.report-chart-card { transition:transform .25s cubic-bezier(.16,1,.3,1),box-shadow .25s ease!important; }
.report-chart-card:hover { box-shadow:0 10px 28px rgba(18,38,63,.08)!important; }
.report-chart-card h6 { font-size:.92rem; font-weight:650; color:var(--ink); display:flex; align-items:center; gap:8px; margin-bottom:1.15rem; }
.report-chart-card h6 i { font-size:.85rem; color:var(--brand); }

.tueba-loading-indicator { display:inline-flex; align-items:center; gap:10px; padding:8px 18px; background:var(--surface); border:1px solid var(--line); border-radius:50px; box-shadow:0 4px 18px rgba(18,38,63,.06); color:var(--brand); font-size:.82rem; font-weight:600; animation:tuebaPulse 2s ease-in-out infinite; }
.tueba-spinner { width:17px; height:17px; border:2.5px solid rgba(36,89,207,.2); border-top-color:var(--brand); border-radius:50%; animation:tuebaSpin .75s linear infinite; display:inline-block; vertical-align:middle; }

@media(max-width:575px) { .school-hero { padding:1.1rem; } .school-hero form { flex-wrap:wrap; } .school-chart,.report-chart { height:240px; } .report-kpi .card-body { padding:1rem; } }