/*
 * SIMUTU × Orbit Dashboard UI
 * Compatibility layer: keeps SIMUTU's Bootstrap/JS contract intact while
 * applying the visual language of orbit-dashboard-template.
 */
:root {
  --orbit-bg: #f5f5f3;
  --orbit-surface: #ffffff;
  --orbit-surface-2: #f0f0ee;
  --orbit-surface-3: #e8e8e5;
  --orbit-text: #111111;
  --orbit-muted: #6f6f6b;
  --orbit-line: #ddddda;
  --orbit-line-strong: #c9c9c4;
  --orbit-inverse: #ffffff;
  --orbit-accent: #111111;
  --orbit-danger: #d92d20;
  --orbit-success: #15803d;
  --orbit-warning: #b45309;
  --orbit-shadow: 0 18px 50px rgba(0,0,0,.08);
  --orbit-radius: 24px;
  --orbit-sidebar: 292px;
  --orbit-sidebar-collapsed: 88px;
  --orbit-topbar: 86px;
  /* sync variables used by the original Orbit stylesheet */
  --bg: var(--orbit-bg);
  --surface: var(--orbit-surface);
  --surface-2: var(--orbit-surface-2);
  --surface-3: var(--orbit-surface-3);
  --text: var(--orbit-text);
  --muted: var(--orbit-muted);
  --line: var(--orbit-line);
  --line-strong: var(--orbit-line-strong);
  --inverse: var(--orbit-inverse);
  --accent: var(--orbit-accent);
  --danger: var(--orbit-danger);
  --success: var(--orbit-success);
  --warning: var(--orbit-warning);
  --shadow: var(--orbit-shadow);
  --radius: var(--orbit-radius);
  --sidebar: var(--orbit-sidebar);
  --topbar: var(--orbit-topbar);
  --bs-body-bg: var(--orbit-bg);
  --bs-body-color: var(--orbit-text);
  --bs-border-color: var(--orbit-line);
  --card-bg: var(--orbit-surface);
  --border-color: var(--orbit-line);
  --text-main: var(--orbit-text);
  --text-muted: var(--orbit-muted);
}

html[data-bs-theme="dark"] {
  --orbit-bg: #0a0a0a;
  --orbit-surface: #111111;
  --orbit-surface-2: #171717;
  --orbit-surface-3: #202020;
  --orbit-text: #f5f5f5;
  --orbit-muted: #8d8d8d;
  --orbit-line: #2b2b2b;
  --orbit-line-strong: #3a3a3a;
  --orbit-inverse: #111111;
  --orbit-accent: #f5f5f5;
  --orbit-shadow: 0 18px 60px rgba(0,0,0,.35);
  color-scheme: dark;
}

html, body { background: var(--orbit-bg) !important; }
body {
  color: var(--orbit-text) !important;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  -webkit-font-smoothing: antialiased;
}
body:not(.orbit-sidebar-open) { overscroll-behavior-x: none; }

/* ---------- LOGIN / AUTH ---------- */
#loginSection {
  min-height: 100vh;
  padding: 32px;
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
  background: #090909;
}
#loginSection::before,
#loginSection::after {
  content: "";
  position: fixed;
  width: 460px;
  height: 460px;
  border: 48px solid #141414;
  border-radius: 50%;
  opacity: .78;
  pointer-events: none;
}
#loginSection::before { left: -270px; top: -190px; }
#loginSection::after { right: -270px; bottom: -190px; }
.login-shell {
  width: min(980px, 100%) !important;
  min-height: 590px;
  grid-template-columns: minmax(360px, .9fr) minmax(430px, 1.1fr) !important;
  border: 1px solid #292929 !important;
  border-radius: 30px !important;
  background: #111 !important;
  box-shadow: 0 28px 90px rgba(0,0,0,.48) !important;
  position: relative;
  z-index: 2;
}
.login-card {
  padding: 48px !important;
  background: rgba(17,17,17,.96) !important;
  color: #f5f5f5 !important;
}
.login-card h3,
.login-card h3.text-dark { color: #f5f5f5 !important; letter-spacing: -.045em; font-size: 30px; }
.login-card .text-muted, .login-card label { color: #949494 !important; }
.login-card .form-control {
  min-height: 52px;
  border: 1px solid #303030 !important;
  border-radius: 14px !important;
  background: #111 !important;
  color: #f5f5f5 !important;
  box-shadow: none !important;
}
.login-card .form-control:focus { border-color: #606060 !important; box-shadow: 0 0 0 3px rgba(255,255,255,.06) !important; }
.login-card .form-control::placeholder { color: #666 !important; }
.login-card .dynamic-app-logo {
  width: 66px !important;
  height: 66px !important;
  padding: 9px;
  border-radius: 18px;
  background: #f5f5f5;
  border: 1px solid #333;
}
.login-card .btn-primary {
  min-height: 50px;
  border: 1px solid #f5f5f5 !important;
  border-radius: 14px !important;
  background: #f5f5f5 !important;
  color: #111 !important;
  box-shadow: none !important;
  font-weight: 800 !important;
}
.login-card .btn-primary:hover { background: #dcdcdc !important; transform: translateY(-1px); }
.login-link-btn { color: #aaa !important; text-decoration: none; }
.login-link-btn:hover { color: #fff !important; }
.password-toggle { color: #888 !important; }
.password-toggle:hover { background: #202020 !important; color: #fff !important; }
.login-visual { min-height: 590px !important; background: #111 !important; }
.login-campus-img { filter: grayscale(1) contrast(1.03); opacity: .8; }
.login-visual-overlay {
  background: linear-gradient(180deg, rgba(9,9,9,.02) 0%, rgba(9,9,9,.25) 45%, rgba(9,9,9,.92) 100%) !important;
}

/* ---------- APP SHELL ---------- */
#appSection { min-height: 100vh; display: block !important; background: var(--orbit-bg); }
#appSection.hidden { display: none !important; }
#appSection > .sidebar {
  position: fixed !important;
  inset: 0 auto 0 0;
  width: var(--orbit-sidebar) !important;
  height: 100vh !important;
  padding: 26px 20px 20px !important;
  background: var(--orbit-bg) !important;
  border-right: 1px solid transparent !important;
  box-shadow: none !important;
  overflow-y: auto;
  z-index: 1040;
  transition: width .22s ease, transform .24s ease;
}
#sidebar > div:first-child {
  min-height: 48px;
  margin: 0 0 20px !important;
  padding: 0 8px !important;
}
#sidebar .app-logo-img {
  width: 40px !important;
  height: 40px !important;
  padding: 4px;
  border: 1px solid var(--orbit-line);
  border-radius: 14px !important;
  background: var(--orbit-surface);
  box-shadow: none !important;
}
#sidebar .dynamic-app-name {
  color: var(--orbit-text) !important;
  font-size: 17px;
  letter-spacing: -.04em;
}
#sidebar hr { display: none; }
#sidebar nav.flex-grow-1 { margin-top: 2px !important; }
#sidebar .sidebar-link {
  width: 100%;
  min-height: 46px;
  margin: 0 0 5px !important;
  padding: 0 14px !important;
  border: 0 !important;
  border-radius: 14px !important;
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--orbit-text) !important;
  background: transparent !important;
  font-size: 13px;
  font-weight: 650 !important;
  transition: background .18s ease, transform .18s ease, color .18s ease !important;
}
#sidebar .sidebar-link i {
  width: 22px;
  margin-right: 0 !important;
  text-align: center;
  color: var(--orbit-muted);
  font-size: 17px !important;
}
#sidebar .sidebar-link:hover { background: var(--orbit-surface-2) !important; transform: none !important; }
#sidebar .sidebar-link.active {
  background: var(--orbit-surface-3) !important;
  color: var(--orbit-text) !important;
  box-shadow: none !important;
}
#sidebar .sidebar-link.active i { color: var(--orbit-text) !important; }
#sidebar .sidebar-link.text-danger { color: var(--orbit-danger) !important; }
#sidebar .sidebar-link.text-danger i { color: var(--orbit-danger) !important; }
#sidebar .sidebar-link.text-danger:hover { background: color-mix(in srgb, var(--orbit-danger) 8%, var(--orbit-bg)) !important; }
.orbit-sidebar-note {
  margin: 18px 4px 12px;
  padding: 17px;
  border: 1px solid var(--orbit-line);
  border-radius: 20px;
  background: linear-gradient(150deg, var(--orbit-surface), var(--orbit-surface-2));
}
.orbit-sidebar-note .eyebrow { color: var(--orbit-muted); font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.orbit-sidebar-note strong { display:block; margin:7px 0 6px; color:var(--orbit-text); font-size:14px; line-height:1.35; }
.orbit-sidebar-note p { margin:0; color:var(--orbit-muted); font-size:11px; line-height:1.5; }

#sidebar.collapsed { width: var(--orbit-sidebar-collapsed) !important; }
#sidebar.collapsed > div:first-child { justify-content:center !important; padding:0 !important; }
#sidebar.collapsed .app-logo-img { margin-right:0 !important; }
#sidebar.collapsed .dynamic-app-name,
#sidebar.collapsed .sidebar-link span,
#sidebar.collapsed .orbit-sidebar-note { display:none !important; }
#sidebar.collapsed .sidebar-link { justify-content:center; padding:0 !important; }
#sidebar.collapsed .sidebar-link i { width:auto; font-size:18px !important; }

.main-content {
  width: auto !important;
  min-width: 0;
  min-height: 100vh;
  height: 100vh !important;
  margin-left: var(--orbit-sidebar);
  overflow-y: auto !important;
  background: var(--orbit-bg);
  transition: margin-left .22s ease;
}
#sidebar.collapsed + .orbit-sidebar-scrim + .main-content,
#sidebar.collapsed ~ .main-content { margin-left: var(--orbit-sidebar-collapsed); }
.orbit-sidebar-scrim { display:none; }

/* ---------- TOPBAR ---------- */
.main-content > .topbar {
  min-height: var(--orbit-topbar);
  margin: 0 !important;
  padding: 18px clamp(24px, 4vw, 54px) !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 1030 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: color-mix(in srgb, var(--orbit-bg) 88%, transparent) !important;
  backdrop-filter: blur(18px) !important;
  box-shadow: none !important;
}
.orbit-page-heading { min-width:0; }
.orbit-page-heading #topbarPageTitle {
  color: var(--orbit-text) !important;
  margin: 0 !important;
  font-size: clamp(22px, 2vw, 28px) !important;
  letter-spacing: -.04em;
}
.orbit-page-subtitle { display:block; margin-top:3px; color:var(--orbit-muted); font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.btn-toggle,
.btn-notification {
  width: 44px !important;
  height: 44px !important;
  padding: 0 !important;
  display: inline-grid !important;
  place-items: center;
  border: 1px solid var(--orbit-line) !important;
  border-radius: 14px !important;
  background: var(--orbit-surface) !important;
  color: var(--orbit-text) !important;
  box-shadow: none !important;
}
.btn-toggle:hover,.btn-notification:hover { background: var(--orbit-surface-2) !important; transform: translateY(-1px); }
.topbar-actions .dropdown-menu {
  padding: 9px !important;
  border: 1px solid var(--orbit-line) !important;
  border-radius: 18px !important;
  background: var(--orbit-surface-2) !important;
  box-shadow: var(--orbit-shadow) !important;
}
.topbar-actions .dropdown-item {
  min-height: 42px;
  border-radius: 11px;
  color: var(--orbit-text) !important;
  font-size: 13px;
}
.topbar-actions .dropdown-item:hover { background: var(--orbit-surface-3) !important; }
.topbar-user-trigger {
  min-height: 44px;
  padding: 3px 12px 3px 4px !important;
  border: 1px solid var(--orbit-line) !important;
  border-radius: 999px !important;
  background: var(--orbit-surface) !important;
  box-shadow: none !important;
}
.topbar-user-trigger #topbarUserName { color: var(--orbit-text) !important; }
#topbarUserPhoto { border:1px solid var(--orbit-line); }

/* ---------- CONTENT / CARDS ---------- */
.content-wrapper {
  width: min(1180px, calc(100% - 48px));
  margin: 8px auto 110px;
  padding: 0 !important;
}
.menu-view { animation: orbitFade .18s ease; }
@keyframes orbitFade { from{opacity:.55; transform:translateY(3px)} to{opacity:1; transform:none} }
.premium-card,
.card,
.chat-container,
.compliance-card {
  border: 1px solid var(--orbit-line) !important;
  border-radius: var(--orbit-radius) !important;
  background: var(--orbit-surface) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.02) !important;
  color: var(--orbit-text);
}
.premium-card:hover,.card:hover { transform:none !important; box-shadow:0 1px 0 rgba(255,255,255,.02) !important; }
.premium-card h1,.premium-card h2,.premium-card h3,.premium-card h4,.premium-card h5,.premium-card h6,
.card h1,.card h2,.card h3,.card h4,.card h5,.card h6,
.text-dark { color: var(--orbit-text) !important; }
.text-muted,.text-secondary { color: var(--orbit-muted) !important; }

#menu-dashboard > .row:first-child .col-lg-8 .premium-card {
  min-height: 220px;
  background: linear-gradient(145deg, var(--orbit-surface), var(--orbit-surface-2)) !important;
}
#menu-dashboard > .row:first-child .badge {
  border: 1px solid var(--orbit-line) !important;
  background: var(--orbit-surface) !important;
  color: var(--orbit-muted) !important;
  letter-spacing: .04em;
}
#menu-dashboard > .row:nth-child(2) .premium-card,
#menu-dashboard > .row:nth-child(3) .premium-card {
  min-height: 132px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
#menu-dashboard > .row:nth-child(2) .premium-card h3,
#menu-dashboard > .row:nth-child(3) .premium-card h3 { font-size: 31px; letter-spacing: -.045em; }
.icon-shape {
  border: 1px solid var(--orbit-line) !important;
  border-radius: 16px !important;
  background: var(--orbit-surface-2) !important;
  color: var(--orbit-text) !important;
  box-shadow: none !important;
}
.bg-gradient-primary,.bg-gradient-success,.bg-gradient-warning { background:var(--orbit-surface-2) !important; color:var(--orbit-text) !important; }

/* ---------- BUTTONS ---------- */
.btn {
  border-radius: 14px !important;
  font-weight: 700 !important;
  box-shadow: none !important;
}
.btn-primary {
  border-color: var(--orbit-accent) !important;
  background: var(--orbit-accent) !important;
  color: var(--orbit-inverse) !important;
}
.btn-primary:hover { opacity:.84; }
.btn-light,.btn-outline-secondary,.btn-outline-primary,.btn-outline-dark {
  border: 1px solid var(--orbit-line-strong) !important;
  background: var(--orbit-surface) !important;
  color: var(--orbit-text) !important;
}
.btn-light:hover,.btn-outline-secondary:hover,.btn-outline-primary:hover,.btn-outline-dark:hover { background: var(--orbit-surface-2) !important; }
.btn-danger { background: var(--orbit-danger) !important; border-color: var(--orbit-danger) !important; }
.btn-success { background: var(--orbit-success) !important; border-color: var(--orbit-success) !important; }
.btn-action-circle {
  width: 36px !important;
  height: 36px !important;
  border: 1px solid var(--orbit-line) !important;
  border-radius: 11px !important;
  background: var(--orbit-surface-2) !important;
  color: var(--orbit-text) !important;
}
.btn-action-circle:hover { background: var(--orbit-accent) !important; color:var(--orbit-inverse) !important; transform:translateY(-1px) !important; }

/* ---------- FORMS ---------- */
.form-control,.form-select,.input-group-text {
  border: 1px solid var(--orbit-line) !important;
  border-radius: 14px !important;
  background-color: var(--orbit-surface-2) !important;
  color: var(--orbit-text) !important;
  box-shadow: none !important;
}
.form-control:focus,.form-select:focus {
  border-color: var(--orbit-line-strong) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--orbit-accent) 8%, transparent) !important;
}
.form-control::placeholder { color: var(--orbit-muted) !important; }
.form-label { color: var(--orbit-text); font-size:12px; font-weight:700; }
.input-group > .form-control:not(:first-child),.input-group > .form-select:not(:first-child) { border-top-left-radius:0 !important; border-bottom-left-radius:0 !important; }
.input-group > .input-group-text + .form-control { border-left:0 !important; }

/* ---------- TABLES / STATUS ---------- */
.table-responsive { border-radius: 16px !important; }
.table { --bs-table-bg: transparent !important; --bs-table-color: var(--orbit-text) !important; margin-bottom:0; }
.table > :not(caption) > * > * { padding: 14px 12px !important; border-bottom-color: var(--orbit-line) !important; color: var(--orbit-text); }
.table thead th {
  border-bottom: 1px solid var(--orbit-line) !important;
  color: var(--orbit-muted) !important;
  font-size: 10px !important;
  letter-spacing: .09em !important;
  font-weight: 800 !important;
}
.table tbody tr:hover > * { background: color-mix(in srgb, var(--orbit-surface-2) 65%, transparent); }
.status-pill,.badge { border-radius:999px !important; }

/* ---------- MODALS / OFFCANVAS / ALERTS ---------- */
.modal-content,
.offcanvas {
  border: 1px solid var(--orbit-line) !important;
  border-radius: 24px !important;
  background: var(--orbit-surface) !important;
  color: var(--orbit-text) !important;
  box-shadow: var(--orbit-shadow) !important;
}
.modal-header { border-bottom-color: var(--orbit-line) !important; }
.offcanvas-header,.offcanvas-body { background: var(--orbit-surface) !important; color:var(--orbit-text); }
.modal-backdrop.show { opacity:.55; }
.swal2-popup {
  border: 1px solid var(--orbit-line) !important;
  border-radius: 24px !important;
  background: var(--orbit-surface) !important;
  color: var(--orbit-text) !important;
  box-shadow: var(--orbit-shadow) !important;
}
.swal2-title,.swal2-html-container { color:var(--orbit-text) !important; }

/* ---------- SPECIAL MODULE COMPONENTS ---------- */
.audit-form-intro,.indicator-picker-shell,.unit-picker-shell,.file-upload-panel,.role-context-note,
.indicator-option,.unit-option,.assessment-option,.selected-indicator-preview.empty,.selected-unit-preview.empty,
.persiapan-card,.persiapan-indicator-item,.akreditasi-card {
  border-color: var(--orbit-line) !important;
  background: var(--orbit-surface-2) !important;
  color: var(--orbit-text) !important;
  box-shadow: none !important;
}
.indicator-search-box,.unit-search-box { background:var(--orbit-surface-2) !important; }
.indicator-option:hover,.unit-option:hover,.assessment-option:hover { border-color:var(--orbit-line-strong) !important; box-shadow:none !important; transform:none !important; }
.indicator-option-text,.unit-option-title,.assessment-option-title,.akreditasi-title { color:var(--orbit-text) !important; }
.indicator-standard-badge,.unit-type-badge,.persiapan-standard-label { background:var(--orbit-surface-3) !important; color:var(--orbit-muted) !important; }

/* ---------- CHAT ---------- */
.chat-container { overflow:hidden; }
.chat-sidebar { border-right-color:var(--orbit-line) !important; background:var(--orbit-surface) !important; }
.chat-main { background:var(--orbit-surface-2) !important; }
.chat-header-mobile,.chat-input-area { background:var(--orbit-surface) !important; border-color:var(--orbit-line) !important; }
.chat-input { background:var(--orbit-surface-2) !important; color:var(--orbit-text) !important; border:1px solid var(--orbit-line) !important; }

/* ---------- FOOTER ---------- */
.app-footer {
  margin-top: 28px !important;
  padding: 18px 20px !important;
  border: 1px solid var(--orbit-line) !important;
  border-radius: 20px !important;
  background: var(--orbit-surface) !important;
  box-shadow: none !important;
  color: var(--orbit-muted) !important;
}
.app-footer .footer-brand { color:var(--orbit-text) !important; }
.app-footer .footer-dev { color:var(--orbit-text) !important; text-decoration:underline; text-underline-offset:3px; }

/* ---------- MOBILE ---------- */
.bottom-nav { display:none !important; }
.mobile-logo-area { display:none !important; }
@media (max-width: 760px) {
  #loginSection { padding:16px; }
  .login-shell { grid-template-columns:1fr !important; max-width:480px !important; min-height:auto; }
  .login-visual { display:none !important; }
  .login-card { padding:36px 28px !important; }

  #appSection > .sidebar {
    width: min(86vw, 310px) !important;
    transform: translateX(-105%);
    box-shadow: var(--orbit-shadow) !important;
    background:var(--orbit-bg) !important;
  }
  #sidebar.collapsed { width:min(86vw,310px) !important; }
  #sidebar.collapsed .dynamic-app-name,
  #sidebar.collapsed .sidebar-link span,
  #sidebar.collapsed .orbit-sidebar-note { display:block !important; }
  #sidebar.collapsed .sidebar-link { justify-content:flex-start; padding:0 14px !important; }
  #sidebar.collapsed .sidebar-link i { width:22px; }
  body.orbit-sidebar-open #appSection > .sidebar { transform:translateX(0); }
  .orbit-sidebar-scrim {
    display:block;
    position:fixed;
    inset:0;
    z-index:1038;
    pointer-events:none;
    opacity:0;
    background:rgba(0,0,0,.48);
    transition:opacity .2s ease;
  }
  body.orbit-sidebar-open .orbit-sidebar-scrim { opacity:1; pointer-events:auto; }
  .main-content,#sidebar.collapsed ~ .main-content { margin-left:0 !important; }
  .main-content > .topbar { min-height:76px; padding:14px 18px !important; }
  .content-wrapper { width:min(100% - 28px, 1180px); margin-top:6px; margin-bottom:70px; }
  .orbit-page-subtitle { display:none; }
  .topbar-user-trigger #topbarUserName,.topbar-user-chevron { display:none; }
  .topbar-user-trigger { padding:3px !important; border-radius:50% !important; }
  .topbar-actions { gap:6px !important; }
  .topbar-actions > .dropdown:first-child { display:none; }
}
@media (max-width: 575.98px) {
  #loginSection::before,#loginSection::after { width:330px; height:330px; border-width:34px; }
  .login-card { padding:30px 22px !important; }
  .main-content > .topbar { padding:12px 14px !important; }
  .content-wrapper { width:calc(100% - 20px); }
  .orbit-page-heading #topbarPageTitle { font-size:20px !important; }
  .premium-card,.card { border-radius:20px !important; }
}

/* ---------- ORBIT MOBILE PARITY PATCH ----------
   Mirrors orbit-dashboard-template's <=760px shell behavior. */
.orbit-mobile-sidebar-close { display:none; }

@media (max-width: 980px) and (min-width: 761px) {
  :root { --orbit-sidebar:260px; }
}

@media (max-width: 760px) {
  :root { --orbit-topbar:76px; }

  /* Orbit uses an off-canvas sidebar, not a hidden mobile sidebar. */
  #appSection > .sidebar {
    display:flex !important;
    flex-direction:column !important;
    width:min(86vw,310px) !important;
    padding:26px 20px 20px !important;
    transform:translateX(-105%);
    transition:transform .24s ease !important;
    box-shadow:var(--orbit-shadow) !important;
  }
  body.orbit-sidebar-open #appSection > .sidebar { transform:translateX(0); }
  body.orbit-sidebar-open { overflow:hidden; }
  .orbit-sidebar-brand-row { justify-content:flex-start !important; padding-right:0 !important; }
  .orbit-sidebar-brand-row .dynamic-app-name { flex:1; min-width:0; }
  .orbit-mobile-sidebar-close {
    flex:0 0 40px;
    width:40px;
    height:40px;
    margin-left:auto;
    border:1px solid var(--orbit-line);
    border-radius:13px;
    display:inline-grid;
    place-items:center;
    background:var(--orbit-surface);
    color:var(--orbit-text);
  }

  /* Orbit mobile topbar keeps hamburger + page title. */
  .main-content > .topbar {
    min-height:var(--orbit-topbar);
    padding:14px 16px !important;
    gap:12px !important;
  }
  .main-content > .topbar > div:first-child { min-width:0; }
  .btn-toggle {
    display:inline-grid !important;
    flex:0 0 44px;
    margin-right:14px !important;
  }
  .mobile-logo-area { display:none !important; }
  .orbit-page-heading { display:block !important; min-width:0; }
  .orbit-page-heading #topbarPageTitle {
    display:block !important;
    margin:0 !important;
    font-size:22px !important;
    line-height:1.15;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .orbit-page-subtitle { display:none !important; }
  .topbar-actions { gap:8px !important; }
  .topbar-actions > .dropdown:first-child { display:block !important; }
  .topbar-actions > .btn-notification { display:none !important; }
  .btn-notification { width:42px !important; height:42px !important; border-radius:14px !important; }
  .topbar-user-trigger {
    width:42px !important;
    height:42px !important;
    min-height:42px !important;
    padding:3px !important;
    border:1px solid var(--orbit-line) !important;
    border-radius:50% !important;
    background:var(--orbit-surface) !important;
  }
  .topbar-user-trigger #topbarUserPhoto {
    width:34px !important;
    height:34px !important;
    margin:0 !important;
    border:0 !important;
  }
  .topbar-user-trigger #topbarUserName,
  .topbar-user-trigger .topbar-user-chevron { display:none !important; }

  /* Same content gutters as the Orbit template. */
  .content-wrapper {
    width:min(calc(100% - 24px),720px) !important;
    margin:0 auto 104px !important;
    padding:0 !important;
  }
  .app-footer { margin-bottom:0 !important; }

  /* Orbit fixed five-slot navigation. */
  .bottom-nav.orbit-mobile-nav {
    position:fixed !important;
    inset:auto 0 0 !important;
    z-index:1050 !important;
    min-height:70px !important;
    padding:8px 10px max(8px, env(safe-area-inset-bottom)) !important;
    display:grid !important;
    grid-template-columns:repeat(5,1fr) !important;
    align-items:end !important;
    overflow:visible !important;
    white-space:normal !important;
    border:0 !important;
    border-top:1px solid var(--orbit-line) !important;
    border-radius:0 !important;
    background:color-mix(in srgb, var(--orbit-bg) 92%, transparent) !important;
    box-shadow:none !important;
    backdrop-filter:blur(18px) !important;
  }
  .bottom-nav.orbit-mobile-nav .bottom-nav-item {
    min-width:0 !important;
    min-height:48px !important;
    padding:0 !important;
    border:0 !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    gap:3px !important;
    background:transparent !important;
    color:var(--orbit-muted) !important;
    font-size:9px !important;
    font-weight:600 !important;
    line-height:1 !important;
    text-decoration:none !important;
    flex:auto !important;
  }
  .bottom-nav.orbit-mobile-nav .bottom-nav-item > i {
    padding:0 !important;
    margin:0 !important;
    font-size:20px !important;
    line-height:1 !important;
    background:transparent !important;
    transform:none !important;
  }
  .bottom-nav.orbit-mobile-nav .bottom-nav-item.active { color:var(--orbit-text) !important; }
  .bottom-nav.orbit-mobile-nav .orbit-mobile-compose {
    width:52px !important;
    height:52px !important;
    min-height:52px !important;
    margin:0 auto !important;
    border-radius:17px !important;
    background:var(--orbit-accent) !important;
    color:var(--orbit-inverse) !important;
    transform:translateY(-8px) !important;
    cursor:pointer;
  }
  .bottom-nav.orbit-mobile-nav .orbit-mobile-compose > i { font-size:22px !important; color:inherit !important; }

  body.chat-room-open-mobile .bottom-nav.orbit-mobile-nav { display:none !important; }
}

@media (max-width: 560px) {
  .premium-card,.card,.chat-container,.compliance-card { border-radius:19px !important; }
  .content-wrapper { width:calc(100% - 24px) !important; }
  #menu-dashboard > .row:first-child .col-lg-8 .premium-card { min-height:auto !important; }
  #menu-dashboard > .row:first-child .premium-card .d-flex.align-items-center.justify-content-between {
    align-items:flex-start !important;
  }
  #menu-dashboard > .row:first-child .premium-card .icon-shape[style*="90px"] { display:none !important; }
  .modal-dialog { margin:12px !important; }
  .modal-content { border-radius:22px !important; }
}

/* ---------- MAJOR UX UPDATE: GUIDED WORKSPACE ---------- */
.orbit-nav-tree { padding-bottom: 8px; }
.orbit-nav-group { margin-bottom: 18px; }
.orbit-nav-label {
  padding: 0 14px 7px;
  color: var(--orbit-muted);
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .13em;
  text-transform: uppercase;
}
#sidebar.collapsed .orbit-nav-label { display:none; }

.orbit-eyebrow {
  color: var(--orbit-muted);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.orbit-welcome-card {
  background:
    radial-gradient(circle at 92% 10%, color-mix(in srgb, var(--orbit-text) 9%, transparent), transparent 34%),
    var(--orbit-surface) !important;
}
.orbit-role-badge {
  border: 1px solid var(--orbit-line) !important;
  background: var(--orbit-surface-2) !important;
  color: var(--orbit-text) !important;
}
.orbit-next-action-card {
  border-color: var(--orbit-line-strong) !important;
  background: var(--orbit-text) !important;
  color: var(--orbit-inverse) !important;
}
.orbit-next-action-card .text-dark,
.orbit-next-action-card .text-muted,
.orbit-next-action-card .orbit-eyebrow { color: var(--orbit-inverse) !important; }
.orbit-next-action-card .text-muted { opacity:.68; }
.orbit-next-action-card .orbit-eyebrow { opacity:.62; }
.orbit-next-action-card .btn-dark {
  border-color: var(--orbit-inverse) !important;
  background: var(--orbit-inverse) !important;
  color: var(--orbit-text) !important;
}
.orbit-task-icon {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  display:grid;
  place-items:center;
  border:1px solid color-mix(in srgb, var(--orbit-inverse) 20%, transparent);
  border-radius:15px;
  background:color-mix(in srgb, var(--orbit-inverse) 8%, transparent);
}
.orbit-task-meta {
  padding: 13px 15px;
  border:1px solid color-mix(in srgb, var(--orbit-inverse) 15%, transparent);
  border-radius:14px;
  color:color-mix(in srgb, var(--orbit-inverse) 72%, transparent);
  font-size:12px;
  line-height:1.45;
}
.orbit-workflow-card { overflow:hidden; }
.orbit-workflow-steps {
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:10px;
}
.orbit-workflow-step {
  position:relative;
  min-height:118px;
  padding:15px 14px;
  border:1px solid var(--orbit-line);
  border-radius:17px;
  background:var(--orbit-surface-2);
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}
.orbit-workflow-step > span {
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  margin-bottom:14px;
  border:1px solid var(--orbit-line-strong);
  border-radius:50%;
  color:var(--orbit-muted);
  font-size:11px;
  font-weight:850;
}
.orbit-workflow-step strong { color:var(--orbit-text); font-size:12px; line-height:1.2; }
.orbit-workflow-step small { margin-top:6px; color:var(--orbit-muted); font-size:10px; line-height:1.4; }
.orbit-workflow-step.active {
  border-color:var(--orbit-text);
  background:var(--orbit-text);
}
.orbit-workflow-step.active > span {
  border-color:color-mix(in srgb, var(--orbit-inverse) 25%, transparent);
  color:var(--orbit-inverse);
}
.orbit-workflow-step.active strong { color:var(--orbit-inverse); }
.orbit-workflow-step.active small { color:color-mix(in srgb, var(--orbit-inverse) 68%, transparent); }
.orbit-workflow-step.done > span {
  border-color:var(--orbit-success);
  background:var(--orbit-success);
  color:#fff;
}
.orbit-workflow-step.done > span::before { content:'✓'; }
.orbit-workflow-step.done > span { font-size:0; }
.orbit-workflow-step.done > span::before { font-size:12px; }

.orbit-kpi-card h3 { font-size:clamp(26px,3vw,36px); letter-spacing:-.05em; }
.orbit-kpi-card small { display:block; margin-top:5px; font-size:10px; line-height:1.35; }
.orbit-details-toggle {
  width:100%;
  border:0;
  padding:0;
  background:transparent;
  color:var(--orbit-text);
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-weight:800;
}
.orbit-mini-stat {
  height:100%;
  padding:15px;
  border:1px solid var(--orbit-line);
  border-radius:15px;
  background:var(--orbit-surface-2);
}
.orbit-mini-stat h6 { margin:0 0 7px; color:var(--orbit-muted); font-size:9px; font-weight:850; letter-spacing:.08em; text-transform:uppercase; }
.orbit-mini-stat strong { color:var(--orbit-text); font-size:18px; }
.orbit-compliance-line {
  min-height:54px;
  padding:12px 14px;
  border:1px solid var(--orbit-line);
  border-radius:15px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  background:var(--orbit-surface-2);
}
.orbit-compliance-line > span { color:var(--orbit-muted); font-size:11px; font-weight:700; }

.orbit-context-guide {
  margin-bottom:18px;
  padding:15px 17px;
  border:1px solid var(--orbit-line);
  border-radius:18px;
  background:var(--orbit-surface-2);
  display:flex;
  align-items:flex-start;
  gap:13px;
}
.orbit-context-guide > i {
  width:34px;
  height:34px;
  flex:0 0 34px;
  display:grid;
  place-items:center;
  border-radius:11px;
  background:var(--orbit-text);
  color:var(--orbit-inverse);
}
.orbit-context-guide strong { display:block; margin-bottom:3px; color:var(--orbit-text); font-size:12px; }
.orbit-context-guide span { display:block; color:var(--orbit-muted); font-size:11px; line-height:1.5; }

.btn-action-text {
  min-height:36px;
  padding:0 12px;
  border:1px solid var(--orbit-line);
  border-radius:11px;
  background:var(--orbit-text);
  color:var(--orbit-inverse);
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-size:10px;
  font-weight:800;
  vertical-align:middle;
}
.btn-action-text:hover { opacity:.84; }
.btn-action-text.verify { background:var(--orbit-success); border-color:var(--orbit-success); color:#fff; }
.orbit-followup-summary {
  padding:16px;
  border:1px solid var(--orbit-line);
  border-radius:17px;
  background:var(--orbit-surface-2);
}
.orbit-howto ol { padding-left:1.2rem; margin-bottom:0; }
.orbit-howto li { margin-bottom:10px; color:var(--orbit-muted); line-height:1.55; }
.orbit-howto li strong { color:var(--orbit-text); }

@media (max-width: 1100px) {
  .orbit-workflow-steps { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width: 760px) {
  .orbit-nav-group { margin-bottom:14px; }
  .orbit-nav-label { padding-left:14px; }
  .orbit-workflow-card { padding:18px !important; }
  .orbit-workflow-steps {
    display:flex;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    padding-bottom:5px;
    margin-right:-18px;
    padding-right:18px;
  }
  .orbit-workflow-step {
    flex:0 0 156px;
    min-height:108px;
    scroll-snap-align:start;
  }
  .orbit-kpi-row > [class*='col-'] { min-width:0; }
  .orbit-kpi-card { padding:17px !important; }
  .orbit-kpi-card h3 { font-size:27px; }
  .orbit-kpi-card h6 { font-size:8px !important; }
  .orbit-context-guide { padding:13px 14px; border-radius:16px; }
  .espmi-page-heading { gap:12px !important; }
  .espmi-page-heading > .btn { width:100%; }
  #menu-dashboard .table-responsive { margin-left:-4px; margin-right:-4px; }
  .btn-action-text span { display:none; }
  .btn-action-text { width:36px; padding:0; justify-content:center; }
}
@media (max-width: 480px) {
  .orbit-next-action-card, .orbit-welcome-card { padding:24px !important; }
  .orbit-next-action-card h4 { font-size:20px; }
  .orbit-workflow-step { flex-basis:144px; }
}

.orbit-form-steps {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
}
.orbit-form-steps span {
  min-height:42px;
  padding:9px 10px;
  border:1px solid var(--orbit-line);
  border-radius:13px;
  background:var(--orbit-surface);
  color:var(--orbit-muted);
  display:flex;
  align-items:center;
  gap:8px;
  font-size:10px;
  font-weight:750;
}
.orbit-form-steps b {
  width:22px;
  height:22px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:var(--orbit-text);
  color:var(--orbit-inverse);
  font-size:9px;
}

@media (max-width: 760px) {
  .orbit-form-steps { grid-template-columns:repeat(2,minmax(0,1fr)); }

  /* Key workflow modules become readable cards instead of tiny horizontal tables. */
  #menu-jadwal .table-responsive,
  #menu-penilaian .table-responsive,
  #menu-temuan .table-responsive,
  #menu-laporan .table-responsive {
    overflow:visible !important;
  }
  #menu-jadwal table thead,
  #menu-penilaian table thead,
  #menu-temuan table thead,
  #menu-laporan table thead { display:none; }
  #menu-jadwal table tbody,
  #menu-penilaian table tbody,
  #menu-temuan table tbody,
  #menu-laporan table tbody { display:grid; gap:12px; }
  #menu-jadwal table tbody tr,
  #menu-penilaian table tbody tr,
  #menu-temuan table tbody tr,
  #menu-laporan table tbody tr {
    display:block;
    padding:8px 14px;
    border:1px solid var(--orbit-line);
    border-radius:17px;
    background:var(--orbit-surface-2);
  }
  #menu-jadwal table tbody td,
  #menu-penilaian table tbody td,
  #menu-temuan table tbody td,
  #menu-laporan table tbody td {
    min-height:38px;
    padding:9px 0 !important;
    border-bottom:1px solid var(--orbit-line) !important;
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:14px;
    text-align:right !important;
    font-size:11px;
  }
  #menu-jadwal table tbody td:last-child,
  #menu-penilaian table tbody td:last-child,
  #menu-temuan table tbody td:last-child,
  #menu-laporan table tbody td:last-child { border-bottom:0 !important; }
  #menu-jadwal table tbody td::before,
  #menu-penilaian table tbody td::before,
  #menu-temuan table tbody td::before,
  #menu-laporan table tbody td::before {
    content:attr(data-label);
    flex:0 0 34%;
    color:var(--orbit-muted);
    font-size:9px;
    font-weight:850;
    letter-spacing:.06em;
    text-align:left;
    text-transform:uppercase;
  }
  #menu-jadwal table tbody td[data-label="Aksi"],
  #menu-penilaian table tbody td[data-label="Aksi"],
  #menu-temuan table tbody td[data-label="Aksi"],
  #menu-laporan table tbody td[data-label="Aksi"] {
    justify-content:flex-end;
    padding-top:12px !important;
  }
  #menu-jadwal table tbody td[data-label="Aksi"]::before,
  #menu-penilaian table tbody td[data-label="Aksi"]::before,
  #menu-temuan table tbody td[data-label="Aksi"]::before,
  #menu-laporan table tbody td[data-label="Aksi"]::before { margin-right:auto; }
}


/* =========================================================
   v8 — CUSTOM CAMPUS BRANDING
   ========================================================= */
:root{--brand-primary:#111111;--brand-secondary:#3F3F46;--brand-accent:#2563EB;--brand-primary-dark:#8A8A8A;--brand-secondary-dark:#8D8D94;--brand-accent-dark:#5B8CF4;--brand-primary-text-light:#111111;--brand-primary-text-dark:#F5F5F5;--brand-on-primary-light:#FFFFFF;--brand-on-primary-dark:#111111;--brand-primary-rgb:17,17,17;--brand-primary-dark-rgb:138,138,138;--brand-accent-rgb:37,99,235;--brand-primary-display:var(--brand-primary);--brand-secondary-display:var(--brand-secondary);--brand-accent-display:var(--brand-accent);--brand-primary-text:var(--brand-primary-text-light);--brand-on-primary:var(--brand-on-primary-light);--brand-primary-soft:color-mix(in srgb,var(--brand-primary-display) 10%,var(--orbit-surface));--brand-primary-softer:color-mix(in srgb,var(--brand-primary-display) 5%,var(--orbit-surface));--brand-accent-soft:color-mix(in srgb,var(--brand-accent-display) 11%,var(--orbit-surface));--orbit-accent:var(--brand-primary-display);--bs-primary:var(--brand-primary-display);--bs-primary-rgb:var(--brand-primary-rgb);--bs-link-color:var(--brand-primary-text);--bs-link-hover-color:var(--brand-primary-text)}
html[data-bs-theme="dark"]{--brand-primary-display:var(--brand-primary-dark);--brand-secondary-display:var(--brand-secondary-dark);--brand-accent-display:var(--brand-accent-dark);--brand-primary-text:var(--brand-primary-text-dark);--brand-on-primary:var(--brand-on-primary-dark);--orbit-accent:var(--brand-primary-display);--bs-primary:var(--brand-primary-display);--bs-primary-rgb:var(--brand-primary-dark-rgb)}
#sidebar .sidebar-link:hover{color:var(--brand-primary-text)!important;background:var(--brand-primary-softer)!important}
#sidebar .sidebar-link.active{background:linear-gradient(135deg,var(--brand-primary-display),var(--brand-secondary-display))!important;color:var(--brand-on-primary)!important;box-shadow:0 10px 24px color-mix(in srgb,var(--brand-primary-display) 22%,transparent)!important}
#sidebar .sidebar-link.active i{color:var(--brand-on-primary)!important}
.main-content .text-primary,.dropdown-menu .text-primary,a.text-primary{color:var(--brand-primary-text)!important}.main-content .bg-primary-subtle,.dropdown-menu .bg-primary-subtle{background:var(--brand-primary-soft)!important}.main-content .border-primary{border-color:var(--brand-primary-display)!important}
.btn-primary,.btn-dark{border-color:var(--brand-primary-display)!important;background:linear-gradient(135deg,var(--brand-primary-display),var(--brand-secondary-display))!important;color:var(--brand-on-primary)!important}.btn-primary:hover,.btn-dark:hover{filter:saturate(1.04) brightness(.96);color:var(--brand-on-primary)!important}
.btn-outline-primary{border-color:color-mix(in srgb,var(--brand-primary-display) 36%,var(--orbit-line))!important;color:var(--brand-primary-text)!important}.btn-outline-primary:hover{background:var(--brand-primary-soft)!important;color:var(--brand-primary-text)!important}
.btn-action-circle.edit{background:var(--brand-primary-soft)!important;color:var(--brand-primary-text)!important}.btn-action-circle.edit:hover,.btn-action-circle:hover{background:var(--brand-primary-display)!important;border-color:var(--brand-primary-display)!important;color:var(--brand-on-primary)!important}
.form-control:focus,.form-select:focus{border-color:color-mix(in srgb,var(--brand-primary-display) 60%,var(--orbit-line-strong))!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--brand-primary-display) 13%,transparent)!important}
.nav-pills .nav-link:hover{color:var(--brand-primary-text)!important}.nav-pills .nav-link.active{background:var(--brand-primary-soft)!important;border-color:color-mix(in srgb,var(--brand-primary-display) 28%,var(--orbit-line))!important;color:var(--brand-primary-text)!important}
.progress-bar.bg-primary,.progress-bar:not(.bg-success):not(.bg-warning):not(.bg-danger){background:linear-gradient(90deg,var(--brand-primary-display),var(--brand-secondary-display))!important}.app-footer .footer-dev{color:var(--brand-primary-text)!important}
.notification-item.unread,.orbit-notification-item.unread{background:var(--brand-primary-softer)!important;border-color:color-mix(in srgb,var(--brand-primary-display) 18%,var(--orbit-line))!important}
.orbit-eyebrow{color:var(--brand-accent-display)!important}.brand-safe-badge i{color:var(--brand-accent-display)!important}
.orbit-next-action-card{border-color:color-mix(in srgb,var(--brand-primary-display) 42%,var(--orbit-line))!important;background:linear-gradient(140deg,var(--brand-primary-display),var(--brand-secondary-display))!important;color:var(--brand-on-primary)!important}.orbit-next-action-card .text-dark,.orbit-next-action-card .text-muted,.orbit-next-action-card .orbit-eyebrow{color:var(--brand-on-primary)!important}.orbit-next-action-card .btn-dark{background:color-mix(in srgb,var(--brand-on-primary) 94%,transparent)!important;border-color:transparent!important;color:var(--brand-primary-display)!important}
.selected-indicator-preview{background:linear-gradient(135deg,var(--brand-primary-display),var(--brand-secondary-display))!important;box-shadow:0 14px 28px color-mix(in srgb,var(--brand-primary-display) 22%,transparent)!important}.indicator-code-badge,.unit-code-badge{background:var(--brand-primary-soft)!important;color:var(--brand-primary-text)!important}
#loginSection{background:radial-gradient(circle at 12% 10%,color-mix(in srgb,var(--brand-primary-display) 30%,transparent),transparent 34%),radial-gradient(circle at 90% 92%,color-mix(in srgb,var(--brand-accent-display) 18%,transparent),transparent 30%),#090909!important}.login-card .btn-primary{border-color:var(--brand-primary-display)!important;background:linear-gradient(135deg,var(--brand-primary-display),var(--brand-secondary-display))!important;color:var(--brand-on-primary)!important}.login-card .form-control:focus{border-color:var(--brand-primary-display)!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--brand-primary-display) 18%,transparent)!important}.login-link-btn,.password-toggle:hover{color:var(--brand-primary-dark)!important}
@media(max-width:760px){.bottom-nav.orbit-mobile-nav .bottom-nav-item.active{color:var(--brand-primary-text)!important}.bottom-nav.orbit-mobile-nav .orbit-mobile-compose{background:linear-gradient(135deg,var(--brand-primary-display),var(--brand-secondary-display))!important;color:var(--brand-on-primary)!important;box-shadow:0 10px 24px color-mix(in srgb,var(--brand-primary-display) 24%,transparent)!important}}
.brand-settings-icon{width:50px;height:50px;border-radius:16px;color:var(--brand-on-primary);background:linear-gradient(135deg,var(--brand-primary-display),var(--brand-secondary-display));box-shadow:0 8px 22px color-mix(in srgb,var(--brand-primary-display) 18%,transparent)}.brand-safe-badge{display:inline-flex;align-items:center;width:max-content;padding:7px 11px;border-radius:999px;border:1px solid var(--orbit-line);background:var(--orbit-surface-2);color:var(--orbit-muted);font-size:.72rem;font-weight:800}
.brand-settings-layout{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(320px,.75fr);gap:28px;align-items:start}.brand-color-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.brand-color-field{border:1px solid var(--orbit-line);background:var(--orbit-surface-2);border-radius:18px;padding:16px}.brand-color-input-row{display:grid;grid-template-columns:58px 1fr;gap:10px;align-items:center;margin-bottom:8px}.brand-color-picker{width:58px!important;height:48px!important;min-height:48px;padding:4px!important;border-radius:14px!important;background:var(--orbit-surface)!important;cursor:pointer}.brand-color-picker::-webkit-color-swatch-wrapper{padding:2px}.brand-color-picker::-webkit-color-swatch{border:0;border-radius:9px}.brand-hex-input{min-width:0;text-transform:uppercase;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:800;letter-spacing:.02em}
.brand-preset-list{display:flex;flex-wrap:wrap;gap:8px}.brand-preset{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--orbit-line);background:var(--orbit-surface);color:var(--orbit-text);border-radius:999px;padding:8px 12px;font-size:.75rem;font-weight:800}.brand-preset:hover{border-color:var(--brand-primary-display);background:var(--brand-primary-softer)}.brand-preset span{width:30px;height:16px;border-radius:999px;background:linear-gradient(90deg,var(--p1) 0 34%,var(--p2) 34% 67%,var(--p3) 67%);box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.brand-theme-note{display:flex;gap:12px;padding:14px 16px;border-radius:16px;border:1px solid var(--orbit-line);background:var(--brand-primary-softer)}.brand-theme-note>i{color:var(--brand-primary-text);margin-top:3px}.brand-theme-note strong{display:block;color:var(--orbit-text);font-size:.82rem;margin-bottom:2px}.brand-theme-note span{display:block;color:var(--orbit-muted);font-size:.76rem;line-height:1.5}
.brand-preview-panel{position:sticky;top:110px;border:1px solid var(--orbit-line);border-radius:22px;background:var(--orbit-surface-2);padding:16px}.brand-preview-label{color:var(--orbit-muted);font-size:.68rem;font-weight:900;letter-spacing:.12em;margin:2px 2px 10px}.brand-preview-window{min-height:260px;display:grid;grid-template-columns:105px 1fr;overflow:hidden;border:1px solid var(--orbit-line);border-radius:18px;background:var(--orbit-bg);box-shadow:0 18px 45px rgba(0,0,0,.08)}.brand-preview-sidebar{padding:14px 9px;background:var(--orbit-surface);border-right:1px solid var(--orbit-line)}.brand-preview-logo{width:36px;height:36px;margin:0 auto 16px;padding:5px;border-radius:11px;border:1px solid var(--orbit-line);background:#fff;display:grid;place-items:center}.brand-preview-logo img{max-width:100%;max-height:100%;object-fit:contain}.brand-preview-nav{display:flex;align-items:center;gap:7px;padding:9px 8px;border-radius:10px;color:var(--orbit-muted);font-size:.64rem;font-weight:800;margin-bottom:5px}.brand-preview-nav i{width:12px;text-align:center}.brand-preview-nav.active{background:linear-gradient(135deg,var(--brand-primary-display),var(--brand-secondary-display));color:var(--brand-on-primary)}.brand-preview-content{padding:14px}.brand-preview-top{display:flex;justify-content:space-between;gap:8px;margin-bottom:22px}.brand-preview-top span{height:8px;border-radius:999px;background:var(--orbit-line)}.brand-preview-top span:first-child{width:44%}.brand-preview-top span:last-child{width:18%}.brand-preview-card{border:1px solid var(--orbit-line);border-radius:15px;background:var(--orbit-surface);padding:15px}.brand-preview-card small{display:block;color:var(--orbit-muted);font-size:.6rem;text-transform:uppercase;font-weight:800;letter-spacing:.08em}.brand-preview-card strong{display:block;color:var(--orbit-text);font-size:.85rem;margin:5px 0 13px}.brand-preview-progress{height:7px;background:var(--orbit-surface-3);border-radius:999px;overflow:hidden;margin-bottom:14px}.brand-preview-progress span{display:block;width:68%;height:100%;background:linear-gradient(90deg,var(--brand-primary-display),var(--brand-secondary-display));border-radius:inherit}.brand-preview-card button{width:100%;border:0;border-radius:10px;padding:9px;background:linear-gradient(135deg,var(--brand-primary-display),var(--brand-secondary-display));color:var(--brand-on-primary);font-size:.66rem;font-weight:900}.brand-preview-pills{display:flex;gap:6px;margin-top:10px}.brand-preview-pills span{flex:1;padding:7px;border-radius:9px;background:var(--brand-primary-soft);color:var(--brand-primary-text);font-size:.56rem;font-weight:800;text-align:center}.brand-preview-pills span:last-child{background:var(--brand-accent-soft);color:var(--brand-accent-display)}
@media(max-width:991.98px){.brand-settings-layout{grid-template-columns:1fr}.brand-preview-panel{position:static}}@media(max-width:767.98px){.brand-color-grid{grid-template-columns:1fr}.brand-preview-window{grid-template-columns:86px 1fr}}

/* =========================================================
   v8.1 / v9 LOGIN BRANDING FIX
   Login now follows campus brand colors while keeping a
   neutral, readable authentication surface.
   ========================================================= */
#loginSection {
  background:
    radial-gradient(circle at 7% 10%, color-mix(in srgb, var(--brand-secondary) 72%, transparent) 0 0, transparent 34%),
    radial-gradient(circle at 92% 92%, color-mix(in srgb, var(--brand-accent) 55%, transparent) 0 0, transparent 31%),
    linear-gradient(135deg,
      color-mix(in srgb, var(--brand-primary) 88%, #071018) 0%,
      color-mix(in srgb, var(--brand-secondary) 75%, #09111b) 52%,
      color-mix(in srgb, var(--brand-primary) 72%, #05070a) 100%) !important;
}
#loginSection::before,
#loginSection::after {
  border-color: color-mix(in srgb, var(--brand-accent) 28%, transparent) !important;
  opacity: .52 !important;
}
#loginSection::before {
  box-shadow: 0 0 100px color-mix(in srgb, var(--brand-primary) 18%, transparent);
}
#loginSection::after {
  box-shadow: 0 0 110px color-mix(in srgb, var(--brand-accent) 16%, transparent);
}
.login-shell {
  border-color: color-mix(in srgb, var(--brand-primary) 20%, rgba(255,255,255,.58)) !important;
  background: #ffffff !important;
  box-shadow: 0 34px 100px rgba(0,0,0,.28), 0 0 0 1px color-mix(in srgb, var(--brand-primary) 8%, transparent) !important;
}
.login-card,
html[data-bs-theme="dark"] .login-card {
  background: rgba(255,255,255,.985) !important;
  color: #172033 !important;
}
.login-card h3,
.login-card h3.text-dark,
html[data-bs-theme="dark"] .login-card h3.text-dark {
  color: #111827 !important;
}
.login-card .text-muted,
.login-card label,
html[data-bs-theme="dark"] .login-card .text-muted,
html[data-bs-theme="dark"] .login-card label {
  color: #667085 !important;
}
.login-card .dynamic-app-logo {
  background: #ffffff !important;
  border-color: color-mix(in srgb, var(--brand-primary) 22%, #e5e7eb) !important;
  box-shadow: 0 10px 30px color-mix(in srgb, var(--brand-primary) 12%, transparent) !important;
}
.login-card .form-control,
html[data-bs-theme="dark"] .login-card .form-control {
  min-height: 56px !important;
  background: #f8fafc !important;
  border: 1px solid #dfe4ea !important;
  color: #111827 !important;
  box-shadow: none !important;
}
.login-card .form-control::placeholder,
html[data-bs-theme="dark"] .login-card .form-control::placeholder {
  color: #98a2b3 !important;
}
.login-card .form-control:focus,
html[data-bs-theme="dark"] .login-card .form-control:focus {
  background: #ffffff !important;
  border-color: var(--brand-primary) !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand-primary) 14%, transparent) !important;
}
.login-link-btn,
html[data-bs-theme="dark"] .login-link-btn {
  color: var(--brand-primary-text-light) !important;
}
.login-link-btn:hover,
html[data-bs-theme="dark"] .login-link-btn:hover {
  color: var(--brand-secondary) !important;
  text-decoration: underline;
}
.login-card .btn-primary {
  border-color: var(--brand-primary) !important;
  background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary)) !important;
  color: var(--brand-on-primary-light) !important;
  box-shadow: 0 12px 26px color-mix(in srgb, var(--brand-primary) 24%, transparent) !important;
}
.login-card .btn-primary:hover {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--brand-primary) 92%, #000),
    color-mix(in srgb, var(--brand-secondary) 92%, #000)) !important;
  color: var(--brand-on-primary-light) !important;
  box-shadow: 0 15px 32px color-mix(in srgb, var(--brand-primary) 30%, transparent) !important;
}
.login-visual {
  background: color-mix(in srgb, var(--brand-primary) 15%, #101828) !important;
}
.login-campus-img {
  filter: none !important;
  opacity: 1 !important;
}
.login-visual-overlay {
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--brand-primary) 6%, transparent) 0%,
      color-mix(in srgb, var(--brand-primary) 12%, transparent) 38%,
      color-mix(in srgb, var(--brand-primary) 76%, rgba(0,0,0,.42)) 100%) !important;
}
.password-field {
  position: relative !important;
}
.password-field .form-control {
  padding-right: 62px !important;
}
.password-field .password-toggle {
  position: absolute !important;
  top: 50% !important;
  right: 7px !important;
  bottom: auto !important;
  transform: translateY(-50%) !important;
  width: 44px !important;
  height: 44px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  color: #667085 !important;
  background: transparent !important;
  z-index: 3;
}
.password-field .password-toggle i {
  display: block;
  width: 18px;
  text-align: center;
  line-height: 1 !important;
  font-size: 17px !important;
}
.password-field .password-toggle:hover,
.password-field .password-toggle:focus-visible {
  background: var(--brand-primary-soft) !important;
  color: var(--brand-primary-text-light) !important;
  outline: none;
}
.password-field .password-toggle:focus-visible {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary) 15%, transparent) !important;
}

@media (max-width: 992px) {
  #loginSection {
    background:
      radial-gradient(circle at 8% 8%, color-mix(in srgb, var(--brand-secondary) 62%, transparent), transparent 38%),
      radial-gradient(circle at 92% 90%, color-mix(in srgb, var(--brand-accent) 42%, transparent), transparent 34%),
      linear-gradient(145deg, color-mix(in srgb, var(--brand-primary) 88%, #071018), color-mix(in srgb, var(--brand-secondary) 70%, #09111b)) !important;
  }
}