/* Final MIB Admin layer: one calm control surface across all workspaces. */
:root {
  --mib-admin-radius: 7px;
  --mib-bg-deep: #0c0b0a;
  --mib-bg-panel: #141210;
  --mib-bg-elevated: #1c1916;
  --mib-border: #2c2722;
  --mib-brass: #c59b47;
  --mib-brass-hover: #d8af5b;
  --mib-text: #f2ede4;
  --mib-text-muted: #a69f94;
  --mib-error: #e05a47;
  --mib-success: #4ea874;
}

body.mibProUi main, body.mibKassePortal main { background-image: none !important; }
body:not(.theme-dark) #sideMenu, body:not(.theme-dark) aside { background: #f7f8f6 !important; box-shadow: none !important; }
body.theme-dark #sideMenu, body.theme-dark aside { background: #0c0b0a !important; box-shadow: none !important; }
.navGroup, body.mibProUi:not(.theme-dark) .navGroup { border-radius: var(--mib-admin-radius) !important; box-shadow: none !important; }
.navGroup summary { letter-spacing: 0 !important; }
.navGroup button, body.mibProUi:not(.theme-dark) .navGroup button { border-radius: 5px !important; box-shadow: none !important; min-height: 42px; text-align: left !important; }
.navGroup button.navActive { border-left: 3px solid var(--mib-brass) !important; }
.dashboardCockpit, .dashboardCockpitPro { background: var(--mib-bg-panel) !important; background-image: none !important; border-radius: var(--mib-admin-radius) !important; box-shadow: none !important; }
.cockpitModeCard, .leitstandCard, .cockpitKpi, .commandBtn, .order, .customerRow, .messageRow, .statRow, .workshopRow, .customerOrderRow, .calendarBox, .orderStatusLane, .modalCard { border-radius: var(--mib-admin-radius) !important; box-shadow: none !important; }
.cockpitKpi { border-top-width: 3px !important; font-variant-numeric: tabular-nums; }
.cockpitModeCard { background-image: none !important; }
button, .buttonLink { border-radius: 6px !important; box-shadow: none !important; }
.viewToolbar button, .badge, .pill, .positionTag { border-radius: 999px !important; }
input, select, textarea { border-radius: 5px !important; }
table th { letter-spacing: 0; }
table td, .tabular-nums, .ms-kpi-value, code { font-variant-numeric: tabular-nums; }

@media (max-width: 1024px) {
  body:not(.theme-dark) #sideMenu, body:not(.theme-dark) aside { background: #f7f8f6 !important; }
  body.theme-dark #sideMenu, body.theme-dark aside { background: #0c0b0a !important; }
  .navGroup button { min-height: 48px; }
}

/* One compact navigation, including the school workspace. */
body #sideMenu,
body:not(.theme-dark) aside#sideMenu,
body.theme-dark aside#sideMenu {
  background: #0c0b0a !important;
  color: #f2ede4 !important;
  border-right: 1px solid #2c2722 !important;
}
#sideMenu > img,
#sideMenu > h1 { display: none !important; }
#sideMenu .sideMenuTopBar {
  padding: 16px 0 !important;
  gap: 8px !important;
  align-items: center !important;
  border-bottom: 1px solid #2c2722 !important;
  margin-bottom: 12px !important;
}
#sideMenu .sideMenuBrandMini {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-width: 0;
}
#sideMenu .sideMenuBrandMini img {
  width: 38px !important;
  height: 44px !important;
  object-fit: contain !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
}
#sideMenu .sideMenuBrandMini strong { font-size: 15px !important; white-space: nowrap; color: #f2ede4; }
#sideMenu .sideMenuCloseBtn span { display: none !important; }
body #sideMenu .navGroup {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 4px 0 !important;
  margin: 2px 0 !important;
}
#sideMenu .navGroup summary {
  padding: 12px 8px !important;
  font-size: 13px !important;
  font-weight: 650 !important;
  color: #a69f94 !important;
  background: transparent !important;
  min-height: 42px !important;
  letter-spacing: 0 !important;
}
body #sideMenu .navGroup button {
  width: 100% !important;
  background: transparent !important;
  color: #e4ded3 !important;
  border: 0 !important;
  padding: 10px 12px !important;
  margin: 1px 0 !important;
  min-height: 40px !important;
  font-size: 14px !important;
  font-weight: 450 !important;
  line-height: 1.4 !important;
  overflow-wrap: normal !important;
}
body #sideMenu .navGroup button:hover { background: #1c1916 !important; }
body #sideMenu .navGroup button.navActive,
body #sideMenu .navGroup button[aria-current="page"] {
  background: rgba(197, 155, 71, 0.14) !important;
  color: #e5c168 !important;
  box-shadow: inset 3px 0 #c59b47 !important;
}
#sideMenu .msSchoolLinks { padding: 0 !important; gap: 1px !important; }
@media (min-width: 761px) {
  body #sideMenu {
    position: sticky !important;
    top: 0 !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
  }
  #sideMenu .sideMenuTopBar,
  #sideMenu > button { flex: 0 0 auto; }
  #sideMenu .navScroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
}
body.musicSchoolMode #mibFlowBar,
body.musicSchoolMode #adminCommandBar,
body.musicSchoolMode #mibAdaptiveActions,
body.musicSchoolMode #leitstandFlow,
body.musicSchoolMode #stats,
body.musicSchoolMode .mobileBottomNav { display: none !important; }
body.musicSchoolMode .msButton {
  width: auto !important;
  flex: 0 0 auto !important;
  padding: 10px 15px !important;
  min-height: 40px !important;
  background: #c59b47 !important;
  border: 1px solid #d8af5b !important;
  color: #0c0b0a !important;
  font-size: 13px !important;
  font-weight: 650 !important;
}
body.musicSchoolMode .msButton.secondary {
  background: #1c1916 !important;
  border-color: #38312b !important;
  color: #f2ede4 !important;
}
body.musicSchoolMode .msIconButton {
  width: 36px !important;
  min-width: 36px !important;
  height: 36px !important;
  min-height: 36px !important;
  padding: 0 !important;
  flex: 0 0 36px !important;
}
body.musicSchoolMode .msSectionHead { justify-content: space-between !important; }
body.musicSchoolMode .msSectionHead > div { flex: 1; min-width: 0; }
@media (max-width: 760px) {
  body #sideMenu .navGroup button { min-height: 44px !important; }
  body.musicSchoolMode .msHeaderActions .msButton:last-child { grid-column: auto; }
  body.musicSchoolMode .msIconButton { min-height: 44px !important; width: 44px !important; }
}

/* Modern Web Guidance: Prevent page scroll under modal dialog */
dialog:modal {
  overscroll-behavior: contain;
}
dialog::backdrop {
  overflow: hidden;
  overscroll-behavior: contain;
}

/* Modern Web Guidance: Deferred user-interaction validation & accessible error states */
.mib-field-hint {
  display: block;
  color: var(--mib-text-muted, #a69f94);
  font-size: 11px;
  margin-bottom: 4px;
}
.mib-error-msg,
.error-msg {
  display: none;
  color: #ef6b5b;
  font-size: 11px;
  font-weight: 600;
  margin-top: 4px;
  line-height: 1.35;
}
input:user-invalid,
select:user-invalid,
textarea:user-invalid,
input.user-invalid-fallback,
select.user-invalid-fallback,
textarea.user-invalid-fallback {
  border-color: var(--mib-error, #e05a47) !important;
  background-color: rgba(224, 90, 71, 0.09) !important;
  box-shadow: 0 0 0 2px rgba(224, 90, 71, 0.2) !important;
}
input:user-invalid + .mib-error-msg,
select:user-invalid + .mib-error-msg,
textarea:user-invalid + .mib-error-msg,
input:user-invalid ~ .mib-error-msg,
select:user-invalid ~ .mib-error-msg,
textarea:user-invalid ~ .mib-error-msg,
input:user-invalid + .error-msg,
select:user-invalid + .error-msg,
textarea:user-invalid + .error-msg,
input:user-invalid ~ .error-msg,
select:user-invalid ~ .error-msg,
textarea:user-invalid ~ .error-msg,
input.user-invalid-fallback ~ .mib-error-msg,
input.user-invalid-fallback ~ .error-msg {
  display: block;
}
input:user-valid,
select:user-valid,
textarea:user-valid {
  border-color: rgba(78, 168, 116, 0.55);
}