/* SJ BIO LMS V89 — final UI renewal */
:root{
  --ui-sidebar:248px;--ui-sidebar-collapsed:82px;--ui-topbar:76px;
  --ui-bg:#f4f7f5;--ui-surface:#fff;--ui-surface-soft:#f8faf9;
  --ui-text:#1d2a24;--ui-muted:#6f7d76;--ui-line:#dce5e0;
  --ui-brand:#079466;--ui-brand-dark:#096b50;--ui-brand-soft:#eaf7f1;
  --ui-danger:#c83f48;--ui-warning:#b97708;--ui-radius:14px;
  --ui-shadow:0 8px 24px rgba(20,49,38,.06);
}
*{box-sizing:border-box}
html{font-size:16px}
body.admin-ui, body.learner-ui, body:has(.admin-sidebar-root){
  margin:0;background:var(--ui-bg)!important;color:var(--ui-text)!important;
  font-family:Pretendard,"Noto Sans KR",Arial,sans-serif!important;font-size:15px!important;line-height:1.6!important;
}
.app{grid-template-columns:var(--ui-sidebar) minmax(0,1fr)!important;min-height:100vh}
.main{min-width:0;background:var(--ui-bg)}

/* Sidebar */
.side, .sidebar, .admin-sidebar, .admin-sidebar-root{
  width:var(--ui-sidebar)!important;min-width:var(--ui-sidebar)!important;padding:20px 14px!important;
  background:linear-gradient(180deg,#102f25 0%,#123a2c 54%,#0c2b21 100%)!important;
  box-shadow:8px 0 28px rgba(10,42,30,.09)!important;
}
.brand{padding:2px 10px 20px!important;margin-bottom:4px!important;border-bottom:1px solid rgba(255,255,255,.08)!important}
.brand strong{font-size:17px!important;letter-spacing:-.03em}.brand small,.brand span{font-size:11px!important}
.nav a,.admin-nav a,.nav-single,.nav-group-toggle{min-height:44px!important;height:auto!important;padding:10px 12px!important;border-radius:10px!important;font-size:14px!important;letter-spacing:-.015em}
.nav a:hover,.admin-nav a:hover,.nav-single:hover,.nav-group-toggle:hover{transform:none!important;background:rgba(255,255,255,.075)!important}
.nav a.active,.nav a.on,.admin-nav a.active,.nav-single.active,.nav-group.open>.nav-group-toggle{
  background:rgba(16,184,112,.18)!important;box-shadow:inset 3px 0 0 #35d68d!important
}
.ico,.nav-icon{width:25px!important;height:25px!important;min-width:25px!important}
.foot,.sidebar-footer,.admin-profile,.sidebar-support{border-radius:12px!important;background:rgba(255,255,255,.055)!important}

/* Topbar and page */
.top,.topbar,.admin-topbar,.learner-topbar{height:var(--ui-topbar)!important;min-height:var(--ui-topbar)!important;padding:0 32px!important;background:#fff!important;border-bottom:1px solid var(--ui-line)!important;box-shadow:none!important}
.top h1,.topbar h1,.admin-topbar h1,.learner-topbar h1{font-size:20px!important;letter-spacing:-.035em!important}
.content,.page,.admin-content,.learner-content,.page-content,.content-area{padding:28px 32px 48px!important;max-width:1680px;width:100%;margin:0 auto}
.page-head,.head,.page-header,.content-header{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin:0 0 22px!important}
.page-head h1,.page-head h2,.head h1,.head h2,.page-header h1,.content-header h1{margin:0!important;font-size:29px!important;line-height:1.25!important;letter-spacing:-.055em!important;color:var(--ui-text)!important}
.page-head p,.head p,.page-header p,.content-header p{margin:7px 0 0!important;color:var(--ui-muted)!important;font-size:14px!important}

/* Cards */
.card,.panel,.section-card,.content-card,.table-card,.form-card,.stat-card,.dash-card,.kpi-card,.summary-card,.filter-card,.resource-card,.course-card,.as-card{
  background:var(--ui-surface)!important;border:1px solid var(--ui-line)!important;border-radius:var(--ui-radius)!important;box-shadow:var(--ui-shadow)!important
}
.card,.panel,.section-card,.content-card,.form-card{padding:20px!important}
.card-header,.panel-header,.section-head,.table-head,.dash-card-head{padding-bottom:14px!important;margin-bottom:16px!important;border-bottom:1px solid #e9efec!important}
.card h2,.panel h2,.section-card h2,.dash-card h2{letter-spacing:-.035em!important}

/* Forms and buttons */
label{display:block;margin-bottom:7px;color:#35443d!important;font-size:13px!important;font-weight:800!important}
input:not([type=checkbox]):not([type=radio]),select,textarea,.field{
  min-height:44px!important;border:1px solid #cfdad4!important;border-radius:10px!important;background:#fff!important;color:var(--ui-text)!important;font-size:14px!important
}
input:not([type=checkbox]):not([type=radio]),select{height:44px!important;padding:0 13px!important}
textarea{padding:11px 13px!important;line-height:1.55!important;resize:vertical}
input:focus,select:focus,textarea:focus{outline:0!important;border-color:#4caf83!important;box-shadow:0 0 0 3px rgba(7,148,102,.10)!important}
.btn,button,.button,a.btn{min-height:42px!important;height:auto!important;padding:10px 16px!important;border-radius:10px!important;font-size:13px!important;font-weight:850!important;line-height:1.15!important;transform:none!important}
.btn:hover,button:hover,.button:hover,a.btn:hover{transform:none!important;filter:brightness(.99)}
.btn.primary,.btn-primary,.primary-btn,.button-primary,button.primary,[type=submit].primary{background:var(--ui-brand)!important;border-color:var(--ui-brand)!important;color:#fff!important;box-shadow:none!important}
.btn.secondary,.btn-secondary,.secondary-btn,.btn-outline{background:#fff!important;border-color:#cfdad4!important;color:#405049!important}
.btn.danger,.btn-danger,.danger-btn{background:#fff5f5!important;border-color:#edc7ca!important;color:var(--ui-danger)!important}
.actions,.toolbar,.filter-actions,.form-actions{display:flex;align-items:center;gap:9px;flex-wrap:wrap}

/* Tables */
.table-wrap,.table-responsive{overflow:auto!important;border:1px solid var(--ui-line)!important;border-radius:12px!important;background:#fff!important}
table,.table{width:100%!important;border-collapse:separate!important;border-spacing:0!important;font-size:14px!important}
thead th,.table th{position:sticky;top:0;z-index:2;padding:13px 14px!important;background:#f5f8f6!important;color:#4d5c55!important;font-size:12px!important;font-weight:900!important;white-space:nowrap;border-bottom:1px solid #d7e1dc!important;text-align:left!important}
tbody td,.table td{padding:14px!important;border-bottom:1px solid #e9efec!important;vertical-align:middle!important;color:#293730}
tbody tr:hover{background:#f8fbf9!important}tbody tr:last-child td{border-bottom:0!important}
td .btn,td button,td a.btn{min-height:34px!important;padding:8px 11px!important;font-size:12px!important}

/* Tabs, status, pagination */
.tabs,.tab-list{display:flex;gap:5px!important;padding:4px!important;background:#eaf0ed!important;border-radius:11px!important;overflow:auto}
.tab,.tab-btn{min-height:38px!important;padding:8px 14px!important;border:0!important;background:transparent!important;border-radius:8px!important;color:#65736c!important;white-space:nowrap}
.tab.on,.tab.active,.tab-btn.active{background:#fff!important;color:var(--ui-brand-dark)!important;box-shadow:0 2px 8px rgba(20,49,38,.08)!important}
.badge,.status,.pill,.status-pill,.tag,.course-status,.file-badge{display:inline-flex;align-items:center;min-height:26px;padding:4px 9px!important;border-radius:999px!important;font-size:11px!important;font-weight:900!important}
.pagination{display:flex;align-items:center;gap:6px;justify-content:flex-end;margin-top:16px}
.pagination a,.pagination button,.page-btn{min-width:38px!important;min-height:38px!important;padding:8px!important;border:1px solid var(--ui-line)!important;background:#fff!important;border-radius:9px!important}

/* Dashboard and learner */
.kpi-grid,.learner-stat-grid,.assignment-summary{gap:14px!important}.kpi-card,.learner-stat-card,.as-card{padding:19px!important;min-height:118px!important}
.dashboard-hero{border-radius:18px!important;box-shadow:0 14px 34px rgba(6,75,59,.16)!important}
.dashboard-quick-menu{gap:12px!important}.dashboard-quick-menu>a{border-radius:13px!important;box-shadow:var(--ui-shadow)!important}
.course-grid,.resource-grid{gap:14px!important}.course-card,.resource-card{padding:19px!important}

/* Modal and empty state */
.modal-content,.dialog-content,.confirm-box{border-radius:16px!important;border:1px solid var(--ui-line)!important;box-shadow:0 24px 64px rgba(12,44,31,.20)!important}
.empty,.empty-state,.no-data{padding:48px 22px!important;color:var(--ui-muted)!important;text-align:center!important}

/* Footer */
.site-footer{margin-top:30px!important;padding-top:20px!important;border-top:1px solid var(--ui-line)!important}

/* Collapsed sidebar */
html.admin-sidebar-precollapsed .app,.app.sidebar-collapsed{grid-template-columns:var(--ui-sidebar-collapsed) minmax(0,1fr)!important}
html.admin-sidebar-precollapsed .side,html.admin-sidebar-precollapsed .sidebar,html.admin-sidebar-precollapsed .admin-sidebar,
.app.sidebar-collapsed .side,.app.sidebar-collapsed .sidebar,.app.sidebar-collapsed .admin-sidebar{width:var(--ui-sidebar-collapsed)!important;min-width:var(--ui-sidebar-collapsed)!important}

@media(max-width:1100px){
  .content,.page,.admin-content,.learner-content,.page-content,.content-area{padding:24px 22px 42px!important}
  .top,.topbar,.admin-topbar,.learner-topbar{padding:0 22px!important}
  .profile,.kpi-grid,.learner-stat-grid,.assignment-summary{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:900px){
  .app{grid-template-columns:1fr!important}.side, .sidebar, .admin-sidebar, .admin-sidebar-root{position:fixed!important;left:0;top:0;z-index:1000;transform:translateX(-102%);transition:transform .2s ease}
  .sidebar-open .side,.sidebar-open .sidebar,.sidebar-open .admin-sidebar{transform:translateX(0)}
  .content,.page,.admin-content,.learner-content,.page-content,.content-area{padding:20px 16px 36px!important}
  .top,.topbar,.admin-topbar,.learner-topbar{height:68px!important;min-height:68px!important;padding:0 16px!important}
  .page-head,.head,.page-header,.content-header{align-items:flex-start;flex-direction:column;margin-bottom:18px!important}
  .page-head h1,.page-head h2,.head h1,.head h2,.page-header h1,.content-header h1{font-size:25px!important}
}
@media(max-width:620px){
  body.admin-ui,body.learner-ui{font-size:14px!important}.profile,.kpi-grid,.learner-stat-grid,.assignment-summary,.course-grid,.resource-grid{grid-template-columns:1fr!important}
  .card,.panel,.section-card,.content-card,.form-card{padding:16px!important;border-radius:12px!important}
  .actions,.toolbar,.filter-actions,.form-actions{width:100%}.actions>.btn,.toolbar>.btn,.filter-actions>.btn,.form-actions>.btn{flex:1}
  thead th,.table th{padding:11px 12px!important}tbody td,.table td{padding:12px!important}
}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;animation:none!important}}