/* E-Rosh Learning v3.0 | Office-inspired Fluent UI | by @e-rosh.
   Presentation only: no grading, menus, APIs or form behavior altered. */
:root { --office-accent:#0f6cbd; --office-accent-hover:#115ea3; --office-bg:#f7f9fc; --office-surface:#fff; --office-text:#243449; --office-muted:#60738b; --office-border:#e3e9f1; --office-radius:14px; --office-shadow:0 3px 16px rgba(42,68,103,.055); }
html,body { color:var(--office-text); background:var(--office-bg); }
body,button,input,select,textarea { font-family:'Segoe UI',system-ui,-apple-system,'Helvetica Neue',sans-serif !important; }
button, .btn, .main-btn, input, select, textarea { transition:background-color .15s ease,border-color .15s ease,box-shadow .15s ease,transform .15s ease; }
:focus-visible { outline:2px solid #0f6cbd !important; outline-offset:2px; }
/* Panel: overrides injected ministry theme with an intentionally light Fluent rail. */
.sidebar-nav-wrapper { background:linear-gradient(180deg,#f3f8ff 0%,#edf4fc 100%) !important; color:#29415d !important; border-right:1px solid #d9e4f1 !important; box-shadow:3px 0 16px rgba(26,64,110,.055) !important; }
.sidebar-nav-wrapper::after { opacity:0 !important; }
.sidebar-nav-wrapper .navbar-logo { background:#fff !important; border-bottom:1px solid #e1eaf4 !important; box-shadow:none !important; backdrop-filter:none !important; }
.sidebar-nav-wrapper .navbar-logo h5,.sidebar-nav-wrapper .navbar-logo>a { color:#173859 !important; }
.sidebar-nav-wrapper .navbar-logo::after { color:#66809b !important; }
.sidebar-nav-wrapper .sidebar-nav ul .nav-item>a { color:#34506e !important; border-radius:10px !important; }
.sidebar-nav-wrapper .sidebar-nav ul .nav-item>a .icon { color:#31679d !important; background:#e0edf9 !important; border-color:#d4e4f3 !important; }
.sidebar-nav-wrapper .sidebar-nav ul .nav-item:hover>a { color:#134c80 !important; background:#e2effc !important; border-color:#d7e7f7 !important; transform:none !important; }
.sidebar-nav-wrapper .sidebar-nav ul .nav-item.active>a,.sidebar-nav-wrapper .sidebar-nav ul .nav-item.active>a.collapsed { background:#d7eafb !important; color:#115a95 !important; border-color:#c4dff4 !important; box-shadow:none !important; }
.sidebar-nav-wrapper .sidebar-nav ul .nav-item.active>a .icon { color:#0b62ad !important; background:#c2e0fb !important; border-color:#a8d3f5 !important; }
.sidebar-nav-wrapper .sidebar-nav ul .nav-item>a::before { background:#0f6cbd !important; box-shadow:none !important; }
.sidebar-nav-wrapper .sidebar-nav ul .nav-item.nav-item-has-children ul.dropdown-nav { background:#e7f1fb !important; border-left:1px solid #cadbec !important; }
.sidebar-nav-wrapper .sidebar-nav ul .nav-item.nav-item-has-children ul.dropdown-nav li a { color:#405b78 !important; }
.sidebar-nav-wrapper .sidebar-nav ul .nav-item.nav-item-has-children ul.dropdown-nav li a::before { background:#7ba0c4 !important; }
.sidebar-nav-wrapper .sidebar-nav ul .nav-item.nav-item-has-children ul.dropdown-nav li a.active { color:#0f5b9d !important; background:#d5e9fb !important; }
.sidebar-nav-wrapper .sidebar-nav ul .nav-item.nav-item-has-children>a::after { color:#6683a2 !important; }
.main-wrapper, .main-wrapper.active { background:#f7f9fc !important; }
.main-wrapper .header { background:rgba(255,255,255,.96) !important; border-bottom:1px solid #e3e9f1 !important; box-shadow:0 2px 9px rgba(36,62,90,.04) !important; }
.header .header-left .menu-toggle-btn .main-btn { background:#0f6cbd !important; box-shadow:none !important; }
.main-wrapper .section { background:transparent; }
.main-wrapper .card,.main-wrapper .card-style,.main-wrapper .stat-card,.main-wrapper .table-wrapper,.main-wrapper .card-box { background:#fff; border:1px solid #e3e9f1; border-radius:14px; box-shadow:var(--office-shadow); }
.main-wrapper .card:hover,.main-wrapper .card-style:hover { box-shadow:0 6px 20px rgba(42,68,103,.075); }
.main-wrapper table { color:#2d4156; }
.main-wrapper .table thead th, .main-wrapper table.dataTable thead th { background:#f2f6fb; color:#38536e; border-color:#e2eaf3; }
.main-wrapper .table td,.main-wrapper .table th { border-color:#e8edf4; }
.main-wrapper .form-control,.main-wrapper .form-select, .main-wrapper input[type=text],.main-wrapper input[type=search],.main-wrapper textarea { border:1px solid #ccd9e8; border-radius:9px; }
.main-wrapper .form-control:focus,.main-wrapper .form-select:focus { border-color:#0f6cbd; box-shadow:0 0 0 3px rgba(15,108,189,.13); }
.main-wrapper .btn-primary,.main-wrapper .primary-btn { background:#0f6cbd; border-color:#0f6cbd; }
.main-wrapper .btn-primary:hover,.main-wrapper .primary-btn:hover { background:#115ea3; border-color:#115ea3; }
.main-wrapper .footer { background:#fff; border-top:1px solid #e1e8f0; }
/* Mobile/student experience, preserving question interaction and answer selection. */
body:has(#headerArea) { background:#f6f9fd; }
#headerArea.header-area:not(.tugas-header) { color:#fff !important; background:linear-gradient(100deg,#155c9b,#297ac0) !important; border-bottom:2px solid #d1e9ff !important; box-shadow:0 3px 12px rgba(24,88,147,.10) !important; }
body:has(#headerArea) .card,body:has(#headerArea) .card-body,body:has(#headerArea) .single-feature-card { border-radius:14px; }
body:has(#headerArea) .card { border:1px solid #e4ebf4; box-shadow:var(--office-shadow); }
body:has(#headerArea) .btn-primary { background:#0f6cbd; border-color:#0f6cbd; }
body:has(#headerArea) .btn-primary:hover { background:#115ea3; border-color:#115ea3; }
body:has(#headerArea) input.form-control,body:has(#headerArea) select.form-select,body:has(#headerArea) textarea.form-control { border-radius:10px; border-color:#ccd9e8; }
@media(max-width:767px) { .main-wrapper .card,.main-wrapper .card-style { border-radius:11px; } .sidebar-nav-wrapper .sidebar-nav ul .nav-item>a { min-height:43px; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { transition-duration:.01ms !important; scroll-behavior:auto !important; } }

/* ================================================================
   E-Rosh Learning v3.1 - Fluent Vibrant Refinement | by @e-rosh
   Layer applied after v3 base. Pure CSS: no CBT or business logic.
   ================================================================ */
:root {
  --office-accent:#126db4;
  --office-accent-hover:#07518e;
  --office-bg:#edf3fa;
  --office-text:#1b334f;
  --office-muted:#536b84;
  --office-border:#d5e1ef;
  --office-shadow:0 8px 24px rgba(15,55,97,.09);
}
html,body { background:#edf3fa; color:#1b334f; }
/* Office Fluent: rich brand rail + bright white workspace */
.sidebar-nav-wrapper {
  background:linear-gradient(168deg,#246ca9 0%,#14548d 38%,#103e6e 100%) !important;
  color:#f5f9ff !important;
  border-right:1px solid rgba(255,255,255,.19) !important;
  box-shadow:6px 0 24px rgba(19,67,117,.17) !important;
  scrollbar-color:rgba(222,238,255,.48) transparent;
}
.sidebar-nav-wrapper::after { opacity:.8 !important; background:linear-gradient(180deg,#f2ca68,#77bdf2,transparent) !important; }
.sidebar-nav-wrapper .navbar-logo {
  background:rgba(255,255,255,.09) !important;
  border-bottom:1px solid rgba(255,255,255,.2) !important;
  box-shadow:0 7px 20px rgba(8,36,69,.07) !important;
  backdrop-filter:blur(14px) !important;
}
.sidebar-nav-wrapper .navbar-logo h5,.sidebar-nav-wrapper .navbar-logo>a { color:#fff !important; }
.sidebar-nav-wrapper .navbar-logo::after { color:#e0efff !important; }
.sidebar-nav-wrapper .sidebar-nav ul .nav-item>a {
  color:#edf6ff !important;
  border:1px solid transparent !important;
  text-shadow:0 1px 1px rgba(5,28,53,.08);
}
.sidebar-nav-wrapper .sidebar-nav ul .nav-item>a .icon {
  color:#fff !important;
  background:rgba(255,255,255,.12) !important;
  border-color:rgba(255,255,255,.16) !important;
}
.sidebar-nav-wrapper .sidebar-nav ul .nav-item:hover>a,
.sidebar-nav-wrapper .sidebar-nav ul .nav-item:hover>a.collapsed {
  background:rgba(255,255,255,.14) !important;
  color:#fff !important;
  border-color:rgba(255,255,255,.20) !important;
  transform:translateX(2px) !important;
}
.sidebar-nav-wrapper .sidebar-nav ul .nav-item.active>a,
.sidebar-nav-wrapper .sidebar-nav ul .nav-item.active>a.collapsed {
  background:linear-gradient(100deg,rgba(255,255,255,.24),rgba(255,255,255,.10)) !important;
  color:#fff !important;
  border-color:rgba(255,255,255,.28) !important;
  box-shadow:0 5px 16px rgba(7,43,85,.12) !important;
}
.sidebar-nav-wrapper .sidebar-nav ul .nav-item.active>a .icon {
  color:#183f6e !important;
  background:#f8d47a !important;
  border-color:#fbe9b9 !important;
}
.sidebar-nav-wrapper .sidebar-nav ul .nav-item>a::before {
  background:#ffd77c !important;
  box-shadow:0 0 10px rgba(255,215,124,.25) !important;
}
.sidebar-nav-wrapper .sidebar-nav ul .nav-item.nav-item-has-children ul.dropdown-nav {
  background:rgba(4,31,61,.18) !important;
  border-left:1px solid rgba(212,235,255,.38) !important;
}
.sidebar-nav-wrapper .sidebar-nav ul .nav-item.nav-item-has-children ul.dropdown-nav li a {
  color:#e4f1ff !important;
}
.sidebar-nav-wrapper .sidebar-nav ul .nav-item.nav-item-has-children ul.dropdown-nav li a::before {
  background:#a4cbef !important;
}
.sidebar-nav-wrapper .sidebar-nav ul .nav-item.nav-item-has-children ul.dropdown-nav li a:hover,
.sidebar-nav-wrapper .sidebar-nav ul .nav-item.nav-item-has-children ul.dropdown-nav li a.active {
  color:#fff !important;
  background:rgba(255,255,255,.15) !important;
}
.sidebar-nav-wrapper .sidebar-nav ul .nav-item.nav-item-has-children>a::after { color:#e6f2ff !important; }
.main-wrapper,.main-wrapper.active {
  background:radial-gradient(circle at 95% 0%,rgba(74,160,230,.105),transparent 30%),#edf3fa !important;
}
.main-wrapper .header {
  background:rgba(255,255,255,.98) !important;
  border-bottom:1px solid #d7e5f3 !important;
  box-shadow:0 4px 18px rgba(23,77,129,.065) !important;
}
.header .header-left .menu-toggle-btn .main-btn {
  background:linear-gradient(135deg,#126db4,#338de0) !important;
  box-shadow:0 5px 15px rgba(18,109,180,.22) !important;
}
.main-wrapper .card,.main-wrapper .card-style,.main-wrapper .stat-card,
.main-wrapper .table-wrapper,.main-wrapper .card-box {
  border:1px solid #d7e4f1 !important;
  background:#fff !important;
  box-shadow:0 8px 22px rgba(21,69,115,.08) !important;
}
.main-wrapper .card:hover,.main-wrapper .card-style:hover {
  box-shadow:0 13px 30px rgba(21,69,115,.115) !important;
}
.main-wrapper h1,.main-wrapper h2,.main-wrapper h3,
.main-wrapper h4,.main-wrapper h5 { color:#173d67; }
.main-wrapper .table thead th,.main-wrapper table.dataTable thead th {
  background:#e8f2fc !important;
  color:#1b507f !important;
  border-color:#ccdeef !important;
}
.main-wrapper .btn-primary,.main-wrapper .primary-btn {
  background:linear-gradient(135deg,#126db4,#2c86d2) !important;
  border-color:#126db4 !important;
  box-shadow:0 4px 11px rgba(18,109,180,.13);
}
.main-wrapper .btn-primary:hover,.main-wrapper .primary-btn:hover {
  background:#07518e !important;
}
.main-wrapper .form-control:focus,.main-wrapper .form-select:focus {
  border-color:#2688d3 !important;
  box-shadow:0 0 0 3px rgba(38,136,211,.16) !important;
}
/* Student header: richer yet not dark or harsh */
body:has(#headerArea) { background:#eef4fb; }
#headerArea.header-area:not(.tugas-header) {
  color:#fff !important;
  background:linear-gradient(110deg,#104d83 0%,#1677bb 54%,#3998d4 100%) !important;
  border-bottom:2px solid #a8d5fa !important;
  box-shadow:0 6px 18px rgba(14,74,130,.18) !important;
}
body:has(#headerArea) .card {
  border:1px solid #d7e4f1 !important;
  box-shadow:0 8px 20px rgba(21,69,115,.085) !important;
}
@media(max-width:767px) {
  .sidebar-nav-wrapper { box-shadow:7px 0 28px rgba(19,67,117,.22) !important; }
}