/* SJ BIO LMS V81 — unified UI/UX refresh */
:root{
  --v81-primary:#0a8f5a;--v81-primary-2:#14b873;--v81-primary-soft:#eaf8f2;
  --v81-ink:#17231e;--v81-muted:#718079;--v81-line:#e2e9e5;--v81-bg:#f5f8f6;
  --v81-card:#fff;--v81-shadow:0 10px 34px rgba(25,58,44,.075);--v81-radius:16px;
}
html{scroll-behavior:smooth}
body{background:var(--v81-bg)!important;color:var(--v81-ink);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body.admin-ui,body.learner-ui{background:linear-gradient(180deg,#f8faf9 0,#f4f7f5 100%)!important}

/* Layout and top bars */
.main,.content,.admin-main,.learner-main,.main-content{min-width:0}
.topbar,.admin-topbar,.learner-topbar{background:rgba(255,255,255,.92)!important;border-bottom:1px solid var(--v81-line)!important;backdrop-filter:blur(14px);box-shadow:0 1px 0 rgba(19,49,36,.02)}
.page-content,.content-area,.admin-content,.learner-content{padding-top:24px!important}
.page-title h1,.page-header h1,.content-header h1{letter-spacing:-.045em!important;color:var(--v81-ink)!important}
.page-title p,.page-header p,.content-header p{color:var(--v81-muted)!important}

/* Sidebar */
.sidebar.v2202-sidebar, .admin-sidebar-root{background:linear-gradient(180deg,#0d2d22 0%,#103a2b 56%,#0b2b20 100%)!important;border-right:0!important;box-shadow:10px 0 30px rgba(10,42,30,.10)}
.sidebar .brand{min-height:74px!important;border-bottom:1px solid rgba(255,255,255,.09)!important}
.sidebar .brand strong{font-size:18px!important;letter-spacing:-.025em!important}
.sidebar .brand-mark{filter:drop-shadow(0 5px 12px rgba(20,184,115,.25))}
.sidebar .nav-single,.sidebar .nav-group-toggle{border-radius:11px!important;margin:3px 10px!important;min-height:45px!important;color:rgba(255,255,255,.78)!important;transition:background .18s,transform .18s,color .18s!important}
.sidebar .nav-single:hover,.sidebar .nav-group-toggle:hover{background:rgba(255,255,255,.085)!important;color:#fff!important;transform:translateX(2px)}
.sidebar .nav-single.active,.sidebar .nav-group.open>.nav-group-toggle{background:linear-gradient(135deg,rgba(20,184,115,.24),rgba(20,184,115,.12))!important;color:#fff!important;box-shadow:inset 3px 0 0 #35d68d}
.sidebar .nav-submenu{margin:0 10px 6px!important;padding:5px 0 5px 43px!important;border-left:1px solid rgba(255,255,255,.10)}
.sidebar .nav-submenu a{border-radius:8px!important;color:rgba(255,255,255,.64)!important;padding:9px 11px!important}
.sidebar .nav-submenu a:hover,.sidebar .nav-submenu a.active{background:rgba(255,255,255,.08)!important;color:#fff!important}
.sidebar .nav-submenu a.active:before{background:#35d68d!important}
.sidebar .admin-logout{margin:10px!important;border-radius:11px!important;border-color:rgba(255,255,255,.10)!important}
.sidebar-support{margin:10px!important;border-radius:13px!important;background:rgba(255,255,255,.065)!important;border:1px solid rgba(255,255,255,.08)!important}

/* Cards */
.card,.panel,.section-card,.content-card,.table-card,.form-card,.stat-card,.dash-card,.kpi-card,.summary-card,.filter-card{
  border:1px solid var(--v81-line)!important;border-radius:var(--v81-radius)!important;background:var(--v81-card)!important;box-shadow:var(--v81-shadow)!important;
}
.card-header,.panel-header,.section-head,.table-head,.dash-card-head{border-bottom:1px solid #edf1ef!important}
.card:hover,.section-card:hover,.content-card:hover{border-color:#d0ddd6!important}

/* Buttons */
button,.btn,.button,a.btn{border-radius:10px;transition:transform .16s ease,box-shadow .16s ease,filter .16s ease,border-color .16s ease}
button:hover,.btn:hover,.button:hover,a.btn:hover{transform:translateY(-1px)}
.btn-primary,.primary-btn,.button-primary,button.primary,[type=submit].primary{background:linear-gradient(135deg,var(--v81-primary-2),var(--v81-primary))!important;border-color:transparent!important;color:#fff!important;box-shadow:0 8px 18px rgba(10,143,90,.20)!important}
.btn-primary:hover,.primary-btn:hover,.button-primary:hover{box-shadow:0 11px 24px rgba(10,143,90,.28)!important;filter:brightness(1.02)}
.btn-secondary,.secondary-btn,.btn-outline{background:#fff!important;border-color:#cad8d1!important;color:#42534b!important}
.btn-danger,.danger-btn{background:#fff2f2!important;border-color:#f2caca!important;color:#d53f3f!important}

/* Form controls */
input:not([type=checkbox]):not([type=radio]),select,textarea{border-radius:10px!important;border-color:#d5dfda!important;background:#fff!important;transition:border-color .16s,box-shadow .16s!important}
input:not([type=checkbox]):not([type=radio]):focus,select:focus,textarea:focus{outline:0!important;border-color:#58bd91!important;box-shadow:0 0 0 4px rgba(20,184,115,.10)!important}
label{color:#33443c}

/* Tables */
table{border-collapse:separate!important;border-spacing:0!important}
thead th{background:#f7faf8!important;color:#4d5d55!important;font-size:12px!important;font-weight:800!important;border-bottom:1px solid #dfe7e3!important}
tbody td{border-bottom:1px solid #edf1ef!important}
tbody tr{transition:background .14s}
tbody tr:hover{background:#f8fcfa!important}
tbody tr:last-child td{border-bottom:0!important}
.table-wrap,.table-responsive{border-radius:14px!important;overflow:auto}

/* Badges, tabs, pagination */
.badge,.status,.pill,.status-pill,.tag{border-radius:999px!important;font-weight:800!important}
.tabs,.tab-list{background:#eef3f0!important;border-radius:12px!important;padding:4px!important}
.tab,.tab-btn{border-radius:9px!important}
.tab.active,.tab-btn.active{background:#fff!important;color:var(--v81-primary)!important;box-shadow:0 3px 10px rgba(23,55,42,.08)!important}
.pagination a,.pagination button,.page-btn{border-radius:9px!important}

/* Dashboard overrides */
.v2202 .dashboard{--gap:16px!important}
.v2202 .kpi-card{min-height:132px!important;padding:20px!important;border-radius:16px!important;box-shadow:var(--v81-shadow)!important}
.v2202 .kpi-icon{width:54px!important;height:54px!important}
.v2202 .kpi-label{font-size:14px!important}.v2202 .kpi-value{font-size:30px!important}.v2202 .kpi-note{font-size:11px!important}
.v2202 .dash-card{border-radius:16px!important;box-shadow:var(--v81-shadow)!important}
.v2202 .dash-card-head h2{font-size:17px!important}.v2202 .dash-card-head p{font-size:11px!important}
.v2202 .department-list{max-height:none!important;overflow:visible!important}.v2202 .department-row{padding:11px 0!important}
.v2202 .quick-item{min-height:72px!important;border-radius:13px!important}.v2202 .quick-item strong{font-size:11px!important}.v2202 .quick-item span{font-size:9px!important}

/* Modals */
.modal,.dialog,.confirm-modal{backdrop-filter:blur(6px)}
.modal-content,.dialog-content,.confirm-box{border-radius:18px!important;border:1px solid rgba(220,231,225,.9)!important;box-shadow:0 24px 70px rgba(15,44,31,.20)!important}

/* Empty states */
.empty-state,.no-data{padding:48px 24px!important;color:var(--v81-muted)!important}

/* Footer */
.site-footer{background:transparent!important;border-top:1px solid var(--v81-line)!important;color:#7a8881!important}

/* Scrollbars */
*{scrollbar-width:thin;scrollbar-color:#b9c9c0 transparent}
*::-webkit-scrollbar{width:9px;height:9px}*::-webkit-scrollbar-thumb{background:#bdcbc4;border:2px solid transparent;background-clip:padding-box;border-radius:999px}*::-webkit-scrollbar-track{background:transparent}

/* Responsive */
@media(max-width:1280px){.v2202 .kpi-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}.v2202 .quick-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}.v2202 .main-grid,.v2202 .lower-grid,.v2202 .insight-grid{grid-template-columns:1fr 1fr!important}}
@media(max-width:900px){.page-content,.content-area,.admin-content,.learner-content{padding:16px!important}.v2202 .kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}.v2202 .main-grid,.v2202 .lower-grid,.v2202 .insight-grid{grid-template-columns:1fr!important}.v2202 .quick-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}.card,.panel,.section-card,.content-card,.table-card{border-radius:14px!important}}
@media(max-width:560px){.v2202 .kpi-grid,.v2202 .quick-grid{grid-template-columns:1fr!important}.v2202 .kpi-card{min-height:112px!important}.page-title h1,.page-header h1,.content-header h1{font-size:24px!important}.table-wrap,.table-responsive{margin-left:-4px;margin-right:-4px}}

@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}