/**
 * MIB Kundenportal - Warm Craftsman Dual-Theme Design System
 * 
 * LIGHT MODE: Warm guitar workshop parchment (#f7f5f0), crisp white surfaces,
 * vintage lacquer amber (#d97706), warm sandstone borders (#e5e0d8), espresso text (#1c1917).
 * 
 * DARK MODE: Warm ebony charcoal (#141316), dark roasted card surfaces (#1c1b20),
 * glowing amber (#f59e0b), refined dark borders (#2e2c35), clean ivory text (#f5f4f0).
 */

/* ==========================================================================
   1. Theme Variables & Base Setup
   ========================================================================== */
:root {
  --portal-canvas: #f7f5f0;
  --portal-surface: #ffffff;
  --portal-surface-alt: #f5f3ee;
  --portal-border: #e5e0d8;
  --portal-border-dark: #d6d1c7;
  --portal-text: #1c1917;
  --portal-text-secondary: #44403c;
  --portal-text-muted: #78716c;
  --portal-amber: #d97706;
  --portal-amber-hover: #b45309;
  --portal-amber-light: #fef3c7;
  --portal-amber-dark: #b45309;
  --portal-radius-sm: 6px;
  --portal-radius-md: 10px;
  --portal-radius-lg: 14px;
  --portal-shadow: 0 2px 8px rgba(40, 30, 20, 0.04);
  --portal-shadow-md: 0 6px 20px rgba(40, 30, 20, 0.08);

  /* Overrides for legacy scripts */
  --portal-pos-bg: #f7f5f0 !important;
  --portal-pos-surface: #ffffff !important;
  --portal-pos-surface-2: #f5f3ee !important;
  --portal-pos-border: #e5e0d8 !important;
  --portal-pos-text: #1c1917 !important;
  --portal-pos-muted: #78716c !important;
  --portal-led: #d97706 !important;
  --portal-led-text: #ffffff !important;
  --bg: #f7f5f0 !important;
  --panel: #ffffff !important;
  --panel2: #f5f3ee !important;
  --line: #e5e0d8 !important;
  --text: #1c1917 !important;
  --muted: #78716c !important;
  --blue: #d97706 !important;
}

/* Dark Mode Tokens */
body.theme-dark {
  --portal-canvas: #141316 !important;
  --portal-surface: #1c1b20 !important;
  --portal-surface-alt: #26252b !important;
  --portal-border: #2e2c35 !important;
  --portal-border-dark: #3a3742 !important;
  --portal-text: #f5f4f0 !important;
  --portal-text-secondary: #d6d3dc !important;
  --portal-text-muted: #a19da8 !important;
  --portal-amber: #f59e0b !important;
  --portal-amber-hover: #d97706 !important;
  --portal-amber-light: #2d2314 !important;
  --portal-amber-dark: #fbbf24 !important;
  --portal-shadow: 0 4px 16px rgba(0, 0, 0, 0.35) !important;
  --portal-shadow-md: 0 8px 28px rgba(0, 0, 0, 0.45) !important;

  /* Overrides for legacy dark mode tokens */
  --portal-pos-bg: #141316 !important;
  --portal-pos-surface: #1c1b20 !important;
  --portal-pos-surface-2: #26252b !important;
  --portal-pos-border: #2e2c35 !important;
  --portal-pos-text: #f5f4f0 !important;
  --portal-pos-muted: #a19da8 !important;
  --portal-led: #f59e0b !important;
  --portal-led-text: #141316 !important;
  --bg: #141316 !important;
  --panel: #1c1b20 !important;
  --panel2: #26252b !important;
  --line: #2e2c35 !important;
  --text: #f5f4f0 !important;
  --muted: #a19da8 !important;
  --blue: #f59e0b !important;
}

/* Global Canvas & Typography */
html,
body,
body.portalPageMode,
body.mibBrandTheme {
  margin: 0 !important;
  padding: 0 !important;
  background: var(--portal-canvas) !important;
  color: var(--portal-text) !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
  font-size: 15px !important;
  line-height: 1.5 !important;
  -webkit-font-smoothing: antialiased !important;
  min-height: 100vh !important;
}

main,
body > main,
body.portalPageMode > main {
  background: var(--portal-canvas) !important;
  color: var(--portal-text) !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  padding: 24px 32px !important;
  box-sizing: border-box !important;
}

@media (max-width: 768px) {
  main,
  body > main,
  body.portalPageMode > main {
    padding: 16px 14px !important;
  }
}

/* ==========================================================================
   2. Unified Top Header (Identical on Startpage & All Sub-Pages)
   ========================================================================== */
header,
body > main > header,
body.portalPageMode > main > header {
  position: sticky !important;
  top: 0 !important;
  z-index: 50 !important;
  display: block !important;
  background: var(--portal-surface) !important;
  border-bottom: 1px solid var(--portal-border) !important;
  padding: 0 28px !important;
  margin: -24px -32px 24px -32px !important;
  box-shadow: var(--portal-shadow) !important;
}

.portalHeaderInner,
html body.mibBrandTheme .portalHeaderInner,
html body.mibBrandTheme.portalPageMode > main > header .portalHeaderInner {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: min(1380px, 100%) !important;
  min-height: 76px !important;
  margin: 0 auto !important;
  gap: 20px !important;
  padding: 0 !important;
}

/* Brand mark on the left: ALWAYS visible across all views */
.portalBrandMark,
html body.mibBrandTheme .portalBrandMark,
html body.mibBrandTheme.portalPageMode > main > header .portalBrandMark {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  text-decoration: none !important;
  flex-shrink: 0 !important;
}

.portalBrandMark img {
  width: 36px !important;
  height: 36px !important;
  border-radius: 8px !important;
  object-fit: cover !important;
}

.portalBrandMark span {
  display: flex !important;
  flex-direction: column !important;
}

.portalBrandMark strong {
  font-size: 16px !important;
  font-weight: 800 !important;
  color: var(--portal-text) !important;
  line-height: 1.1 !important;
}

.portalBrandMark small {
  font-size: 12px !important;
  color: var(--portal-text-muted) !important;
  font-weight: 500 !important;
  margin-top: 2px !important;
}

/* Center header title */
.portalHeaderTitle {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  text-align: center !important;
}

.portalHeaderKicker {
  color: var(--portal-amber) !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  font-size: 11px !important;
  letter-spacing: 0.08em !important;
  margin: 0 0 2px !important;
}

#pageTitle {
  font-size: 20px !important;
  font-weight: 850 !important;
  color: var(--portal-text) !important;
  margin: 0 !important;
  line-height: 1.2 !important;
}

#pageSub {
  font-size: 12.5px !important;
  color: var(--portal-text-muted) !important;
  margin: 2px 0 0 !important;
}

/* Header right action buttons */
.portalHeaderActions {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-shrink: 0 !important;
}

.portalHeaderActions button,
.portalHeaderActions a,
header .menuToggle,
header .portalWebsiteLink,
#mibPortalLogout {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 8px 15px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  border-radius: var(--portal-radius-sm) !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

/* Theme Toggle Button */
#portalThemeToggle,
#themeToggleSide,
#themeToggle {
  background: var(--portal-surface-alt) !important;
  border: 1px solid var(--portal-border) !important;
  color: var(--portal-text) !important;
}

#portalThemeToggle:hover,
#themeToggleSide:hover {
  background: var(--portal-amber-light) !important;
  border-color: var(--portal-amber) !important;
  color: var(--portal-amber-dark) !important;
}

/* Desktop Menu Button */
#portalDesktopMenuToggle,
.menuToggle {
  background: var(--portal-surface-alt) !important;
  border: 1px solid var(--portal-border) !important;
  color: var(--portal-text) !important;
}

#portalDesktopMenuToggle:hover {
  background: var(--portal-surface) !important;
  border-color: var(--portal-border-dark) !important;
}

/* Website Link */
.portalWebsiteLink {
  background: transparent !important;
  border: 1px solid var(--portal-border) !important;
  color: var(--portal-amber-dark) !important;
}

.portalWebsiteLink:hover {
  background: var(--portal-amber-light) !important;
  border-color: var(--portal-amber) !important;
}

/* Logout Button */
#mibPortalLogout {
  background: var(--portal-text) !important;
  border: 1px solid var(--portal-text) !important;
  color: var(--portal-canvas) !important;
}

/* ==========================================================================
   2b. Mobile Topbar
   ========================================================================== */
.mobileTopbar {
  display: none !important;
}

@media (max-width: 768px) {
  html body.portalPageMode .mobileTopbar,
  html body .mobileTopbar,
  .mobileTopbar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    background: var(--portal-surface) !important;
    border-bottom: 1px solid var(--portal-border) !important;
    padding: 12px 16px !important;
    margin: -16px -14px 16px -14px !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 100 !important;
    box-shadow: var(--portal-shadow) !important;
  }
  
  html body.portalPageMode .mobileTopbar *,
  html body .mobileTopbar * {
    color: var(--portal-text) !important;
  }

  .mobileTopbar .mobileBrand {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
  }
  
  .mobileTopbar .mobileBrand img {
    width: 30px !important;
    height: 30px !important;
    border-radius: 6px !important;
  }

  .mobileTopbar .mobileBrand strong {
    color: var(--portal-text) !important;
    font-size: 16px !important;
    font-weight: 800 !important;
  }
  
  .mobileTopbar .mobileBrand span,
  .mobileTopbar #mobileSub {
    color: var(--portal-text-muted) !important;
    font-size: 12px !important;
    margin-left: 4px !important;
  }
  
  .mobileTopbar #themeToggle,
  .mobileTopbar #portalMobileDensityToggle {
    display: none !important;
  }
  
  html body.portalPageMode .mobileTopbar button,
  html body .mobileTopbar button,
  .mobileTopbar .menuToggle,
  .mobileTopbar #menuToggle {
    background: var(--portal-amber) !important;
    color: #ffffff !important;
    border: none !important;
    padding: 8px 16px !important;
    border-radius: var(--portal-radius-sm) !important;
    font-weight: 700 !important;
    font-size: 13.5px !important;
    cursor: pointer !important;
  }

  header,
  body > main > header,
  body.portalPageMode > main > header {
    display: none !important;
  }
}

/* ==========================================================================
   3. Sidebar Navigation (#sideMenu, aside)
   ========================================================================== */
aside,
#sideMenu,
body.portalPageMode #sideMenu,
body.theme-dark aside,
body.theme-dark #sideMenu {
  background: var(--portal-surface) !important;
  border-right: 1px solid var(--portal-border) !important;
  color: var(--portal-text) !important;
  box-shadow: 1px 0 4px rgba(0, 0, 0, 0.03) !important;
  padding: 18px 12px !important;
  box-sizing: border-box !important;
}

#sideMenu .brand,
#sideMenu .portalSidebarBrand,
#sideMenu .portalNavBrand {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 8px 12px 18px !important;
  border-bottom: 1px solid var(--portal-border) !important;
  margin-bottom: 14px !important;
}

#sideMenu .brand h1,
#sideMenu #portalTitle {
  font-size: 16px !important;
  font-weight: 800 !important;
  color: var(--portal-text) !important;
  margin: 0 !important;
}

#sideMenu .brand p,
#sideMenu #portalSub {
  font-size: 11px !important;
  color: var(--portal-text-muted) !important;
  margin: 0 !important;
}

#sideMenu .sub,
#sideMenu .groupTitle,
#sideMenu summary,
#sideMenu [data-role="group-title"] {
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  color: var(--portal-text-muted) !important;
  padding: 12px 12px 4px !important;
  margin-top: 8px !important;
}

#sideMenu button,
#sideMenu .navBtn,
body.portalPageMode #sideMenu button {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  padding: 9px 12px !important;
  margin: 2px 0 !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: var(--portal-radius-sm) !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  color: var(--portal-text-secondary) !important;
  text-align: left !important;
  cursor: pointer !important;
  transition: all 0.12s ease !important;
  box-sizing: border-box !important;
}

#sideMenu button:hover,
#sideMenu .navBtn:hover {
  background: var(--portal-surface-alt) !important;
  color: var(--portal-text) !important;
}

#sideMenu button.navActive,
#sideMenu button[aria-current="page"],
#sideMenu .navBtn.active,
body.portalPageMode #sideMenu button.navActive {
  background: var(--portal-amber-light) !important;
  color: var(--portal-amber-dark) !important;
  border: 1px solid var(--portal-border) !important;
  border-left: 4px solid var(--portal-amber) !important;
  font-weight: 700 !important;
}

#sideMenu button.navActive *,
#sideMenu button[aria-current="page"] * {
  color: var(--portal-amber-dark) !important;
}

/* ==========================================================================
   4. Unlocked View vs Locked Start View
   ========================================================================== */
body:not(.portalLocked) #portalEntryShell,
body:not(.portalLocked) .portalHeroGrid,
body:not(.portalLocked) .portalMainGrid,
body:not(.portalLocked) #manualLookupCard,
body:not(.portalLocked) #portalStartGuide {
  display: none !important;
}

body.portalLocked #portalEntryShell {
  display: flex !important;
  flex-direction: column !important;
  gap: 20px !important;
  width: min(1140px, 100%) !important;
  margin: 0 auto !important;
}

.portalHeroGrid {
  display: grid !important;
  grid-template-columns: 1.2fr 1fr !important;
  gap: 18px !important;
}

.portalMainGrid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 18px !important;
  align-items: start !important;
}

@media (max-width: 900px) {
  .portalHeroGrid,
  .portalMainGrid {
    grid-template-columns: 1fr !important;
  }
}

/* ==========================================================================
   5. De-nested Status View & Command Bar ("Entschachtelung")
   ========================================================================== */
.portalCommandBar,
#portalCommandBar,
body.portalPageMode #portalCommandBar {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  margin-bottom: 20px !important;
  width: min(1380px, 100%) !important;
}

/* Hero Status Greeting Row: Flat 2-card grid */
.portalWelcomeRow,
body.portalPageMode .portalWelcomeRow {
  display: grid !important;
  grid-template-columns: 1.2fr 1fr !important;
  gap: 16px !important;
  margin: 0 !important;
  padding: 0 !important;
}

@media (max-width: 860px) {
  .portalWelcomeRow,
  body.portalPageMode .portalWelcomeRow {
    grid-template-columns: 1fr !important;
  }
}

.portalWelcomeCopy,
.portalPriority,
body.portalPageMode .portalWelcomeCopy,
body.portalPageMode .portalPriority {
  background: var(--portal-surface) !important;
  border: 1px solid var(--portal-border) !important;
  border-radius: var(--portal-radius-md) !important;
  padding: 22px 26px !important;
  box-shadow: var(--portal-shadow) !important;
  box-sizing: border-box !important;
  color: var(--portal-text) !important;
}

.portalWelcomeCopy h2,
.portalPriority h2,
.portalPriority h3 {
  font-size: 21px !important;
  font-weight: 850 !important;
  color: var(--portal-text) !important;
  margin: 8px 0 6px !important;
}

.portalWelcomeCopy p,
.portalPriority p {
  font-size: 14px !important;
  color: var(--portal-text-secondary) !important;
  margin: 0 !important;
  line-height: 1.5 !important;
}

/* Eyebrow Badges */
.portalEyebrow,
.expressBadge,
.chEyebrow,
[class*="eyebrow"],
.portalWelcomeCopy span[class*="badge"],
.portalPriority span[class*="badge"] {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 3px 10px !important;
  border-radius: 4px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  background: var(--portal-amber-light) !important;
  color: var(--portal-amber-dark) !important;
  border: 1px solid var(--portal-border) !important;
  margin-bottom: 6px !important;
}

.portalPriority button,
.portalWelcomeRow button,
body.portalPageMode .portalPriority button {
  background: var(--portal-amber) !important;
  color: #ffffff !important;
  border: none !important;
  padding: 10px 20px !important;
  border-radius: var(--portal-radius-sm) !important;
  font-weight: 700 !important;
  font-size: 13.5px !important;
  cursor: pointer !important;
  margin-top: 14px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
  transition: background 0.15s ease !important;
}

.portalPriority button:hover,
.portalWelcomeRow button:hover {
  background: var(--portal-amber-hover) !important;
}

/* Horizontal Metrics Row: Clean flat companion row */
#accountSummary,
body.portalPageMode #accountSummary,
.portalCommandMetrics,
body.portalPageMode .portalCommandMetrics {
  display: grid !important;
  grid-template-columns: 1.4fr repeat(4, 1fr) !important;
  gap: 12px !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  width: 100% !important;
}

@media (max-width: 960px) {
  #accountSummary,
  body.portalPageMode #accountSummary,
  .portalCommandMetrics,
  body.portalPageMode .portalCommandMetrics {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

#accountSummary .stat,
body.portalPageMode #accountSummary .stat,
.portalCommandMetrics > span,
body.portalPageMode .portalCommandMetrics > span {
  background: var(--portal-surface) !important;
  border: 1px solid var(--portal-border) !important;
  border-radius: var(--portal-radius-md) !important;
  padding: 16px 20px !important;
  box-shadow: var(--portal-shadow) !important;
  color: var(--portal-text) !important;
  display: block !important;
}

#accountSummary .stat:first-child,
.portalCommandMetrics > span:first-child {
  border-left: 4px solid var(--portal-amber) !important;
}

#accountSummary .stat > span,
.portalCommandMetrics > span {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--portal-text-muted) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
}

#accountSummary .stat > strong,
.portalCommandMetrics > span b {
  display: block !important;
  font-size: 24px !important;
  font-weight: 850 !important;
  color: var(--portal-text) !important;
  line-height: 1.2 !important;
  margin-top: 4px !important;
}

#accountSummary .stat > p {
  font-size: 13px !important;
  color: var(--portal-text-secondary) !important;
  margin: 4px 0 0 !important;
}

/* Action Strip (Smart Pulse): Clean flat strip */
.portalSmartPulse,
.portalContextStrip,
body.portalPageMode .portalContextStrip {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
  background: var(--portal-surface) !important;
  border: 1px solid var(--portal-border) !important;
  border-radius: var(--portal-radius-md) !important;
  padding: 14px 20px !important;
  margin: 0 !important;
  color: var(--portal-text-secondary) !important;
  font-size: 13.5px !important;
  box-shadow: var(--portal-shadow) !important;
}

.portalSmartPulse button,
.portalContextStrip button,
body.portalPageMode .portalContextStrip button {
  background: var(--portal-surface-alt) !important;
  border: 1px solid var(--portal-border) !important;
  color: var(--portal-text) !important;
  padding: 8px 16px !important;
  border-radius: var(--portal-radius-sm) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  cursor: pointer !important;
  transition: all 0.12s !important;
}

.portalSmartPulse button:hover,
.portalContextStrip button:hover,
body.portalPageMode .portalContextStrip button:hover {
  background: var(--portal-surface) !important;
  border-color: var(--portal-border-dark) !important;
  color: var(--portal-amber) !important;
}

/* ==========================================================================
   6. Panels & Cards - Clean Craftsman Surfaces (No nested frames)
   ========================================================================= */
.card,
section.card,
#content,
#customerHubPanel,
#instrumentsPanel,
#rentalPanel,
#purchasesPanel,
#ordersPanel,
#communityPanel,
#messagePanel,
#newRepairPanel,
#accountPanel,
#receiptClaimPanel,
#legalPanel,
#wikiPanel,
body.portalPageMode #content,
body.portalPageMode #accountPanel,
body.portalPageMode #purchasesPanel,
body.portalPageMode #walletPanel,
body.portalPageMode #messagePanel,
body.portalPageMode #newRepairPanel,
body.portalPageMode #rentalPanel,
body.portalPageMode #ordersPanel,
body.portalPageMode #wikiPanel,
body.portalPageMode #legalPanel {
  background: var(--portal-surface) !important;
  border: 1px solid var(--portal-border) !important;
  border-radius: var(--portal-radius-md) !important;
  color: var(--portal-text) !important;
  box-shadow: var(--portal-shadow) !important;
  padding: 26px 30px !important;
  margin-bottom: 22px !important;
  box-sizing: border-box !important;
  width: min(1380px, 100%) !important;
}

@media (max-width: 768px) {
  .card,
  section.card,
  #content,
  #customerHubPanel,
  #instrumentsPanel,
  #rentalPanel,
  #purchasesPanel,
  #ordersPanel,
  #communityPanel,
  #messagePanel,
  #newRepairPanel,
  #accountPanel {
    padding: 18px 16px !important;
  }
}

/* Sub-card unnesting: elements inside .card have no nested box borders */
.card .card,
#content .card,
.card section {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Headings */
.card h1, .card h2, .card h3, .card h4, .card strong,
#content h1, #content h2, #content h3, #content h4, #content strong,
#customerHubPanel h1, #customerHubPanel h2, #customerHubPanel h3,
#instrumentsPanel h1, #instrumentsPanel h2, #instrumentsPanel h3,
#communityPanel h1, #communityPanel h2, #communityPanel h3,
#purchasesPanel h1, #purchasesPanel h2, #purchasesPanel h3,
body.portalPageMode :is(h1, h2, h3, h4, strong) {
  color: var(--portal-text) !important;
  font-weight: 850 !important;
  line-height: 1.25 !important;
}

/* Body and Muted Text */
.card p, #content p, #customerHubPanel p, #instrumentsPanel p,
#communityPanel p, #purchasesPanel p, .card span,
body.portalPageMode :is(p, span) {
  color: var(--portal-text-secondary) !important;
}

.muted,
.small,
small,
p.muted,
span.muted,
body.portalPageMode :is(.muted, .small, small) {
  color: var(--portal-text-muted) !important;
}

/* ==========================================================================
   7. Form Controls & Inputs
   ========================================================================== */
input,
textarea,
select,
.lookupBox input,
.portalSecretControl input,
.chSearch input,
#instrumentsPanel input,
#instrumentsPanel select,
#instrumentsPanel textarea,
body.portalPageMode input,
body.portalPageMode textarea,
body.portalPageMode select {
  background: var(--portal-surface) !important;
  border: 1px solid var(--portal-border-dark) !important;
  border-radius: var(--portal-radius-sm) !important;
  color: var(--portal-text) !important;
  font-size: 14.5px !important;
  padding: 11px 14px !important;
  box-sizing: border-box !important;
  outline: none !important;
  transition: border-color 0.15s, box-shadow 0.15s !important;
  box-shadow: none !important;
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--portal-amber) !important;
  box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.18) !important;
}

input::placeholder,
textarea::placeholder {
  color: var(--portal-text-muted) !important;
  opacity: 0.8 !important;
}

label,
.card label,
form label,
#instrumentsPanel label,
body.portalPageMode label {
  display: block !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--portal-text) !important;
  margin-bottom: 6px !important;
}

/* Password Eye Toggle */
.portalSecretControl {
  position: relative !important;
  display: block !important;
  width: 100% !important;
}

.portalSecretControl input {
  width: 100% !important;
  padding-right: 96px !important;
}

.portalSecretControl button,
.portalPasswordToggle,
#togglePortalSecret {
  position: absolute !important;
  right: 8px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: auto !important;
  max-width: 90px !important;
  height: 32px !important;
  min-height: 32px !important;
  padding: 0 12px !important;
  background: var(--portal-surface-alt) !important;
  border: 1px solid var(--portal-border-dark) !important;
  border-radius: var(--portal-radius-sm) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--portal-text) !important;
  cursor: pointer !important;
  z-index: 5 !important;
  white-space: nowrap !important;
}

.portalSecretControl button:hover,
.portalPasswordToggle:hover {
  background: var(--portal-border) !important;
}

/* ==========================================================================
   8. Buttons - Primary Craftsman Amber, Secondary Neutral
   ========================================================================== */
button.primary,
button.primaryActionBtn,
#manualLookupBtn,
#confirmPortalPasswordReset,
#createRepair {
  background: var(--portal-amber) !important;
  color: #ffffff !important;
  border: 1px solid var(--portal-amber) !important;
  border-radius: var(--portal-radius-sm) !important;
  font-size: 14.5px !important;
  font-weight: 700 !important;
  padding: 11px 22px !important;
  cursor: pointer !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
  transition: background 0.15s, transform 0.05s !important;
}

body.theme-dark button.primary,
body.theme-dark #manualLookupBtn {
  color: #141316 !important;
}

button.primary:hover,
#manualLookupBtn:hover {
  background: var(--portal-amber-hover) !important;
  border-color: var(--portal-amber-hover) !important;
}

/* Secondary Buttons */
button.secondary,
.card button:not(.primary):not(#manualLookupBtn):not(.whatsappQuickBtn),
body.portalPageMode button.secondary {
  background: var(--portal-surface-alt) !important;
  color: var(--portal-text) !important;
  border: 1px solid var(--portal-border) !important;
  border-radius: var(--portal-radius-sm) !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  padding: 9px 16px !important;
  cursor: pointer !important;
  transition: background 0.12s !important;
}

button.secondary:hover {
  background: var(--portal-border) !important;
}

/* ==========================================================================
   9. Component Refinements (Un-nested Settings & Panels)
   ========================================================================== */
/* Password Prompt / Account Security Card (Un-nested) */
.portalPasswordPrompt {
  background: var(--portal-surface) !important;
  border: 1px solid var(--portal-border) !important;
  border-top: 4px solid var(--portal-amber) !important;
  border-radius: var(--portal-radius-md) !important;
  padding: 24px !important;
  margin-top: 22px !important;
}

.portalPasswordPrompt h3 {
  font-size: 19px !important;
  font-weight: 850 !important;
  color: var(--portal-text) !important;
  margin: 0 0 6px !important;
}

.portalPasswordPrompt .lookupBox {
  display: flex !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
  margin-top: 16px !important;
}

.portalPasswordPrompt .lookupBox input {
  flex: 1 1 220px !important;
}

.portalPasswordPrompt button:first-of-type {
  background: var(--portal-amber) !important;
  color: #ffffff !important;
  border: 1px solid var(--portal-amber) !important;
  font-weight: 700 !important;
}

body.theme-dark .portalPasswordPrompt button:first-of-type {
  color: #141316 !important;
}

/* Instruments Panel */
#instrumentsPanel .emptyState,
#instrumentsPanel .instrumentEmptyBox {
  background: var(--portal-surface-alt) !important;
  border: 2px dashed var(--portal-border) !important;
  border-radius: var(--portal-radius-md) !important;
  padding: 36px 20px !important;
  text-align: center !important;
  color: var(--portal-text-muted) !important;
  margin-bottom: 24px !important;
}

#instrumentsPanel .instrumentFormGrid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
  gap: 16px !important;
  margin-top: 16px !important;
}

/* Community Panel */
#communityPanel .communityTabs,
#communityPanel .wikiCategories {
  display: flex !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
  margin-bottom: 18px !important;
}

#communityPanel .communityTab,
#communityPanel button.wikiCategory {
  background: var(--portal-surface-alt) !important;
  border: 1px solid var(--portal-border) !important;
  color: var(--portal-text) !important;
  padding: 7px 16px !important;
  border-radius: 20px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
}

#communityPanel .communityTab.active,
#communityPanel button.wikiCategory.active {
  background: var(--portal-amber) !important;
  color: #ffffff !important;
  border-color: var(--portal-amber) !important;
}

body.theme-dark #communityPanel .communityTab.active,
body.theme-dark #communityPanel button.wikiCategory.active {
  color: #141316 !important;
}

/* Purchases Panel */
#purchasesPanel .stat {
  background: var(--portal-surface) !important;
  border: 1px solid var(--portal-border) !important;
  padding: 18px 22px !important;
  margin-bottom: 12px !important;
}

#purchasesPanel .stat h3,
#purchasesPanel .stat strong {
  color: var(--portal-text) !important;
}

/* ==========================================================================
   10. Cookie Consent Banner
   ========================================================================== */
.cookieBar,
#cookieConsent {
  position: fixed !important;
  bottom: 16px !important;
  left: 16px !important;
  right: 16px !important;
  max-width: 860px !important;
  margin: 0 auto !important;
  background: #1c1b20 !important;
  color: #f4f4f5 !important;
  border: 1px solid #2e2c35 !important;
  border-radius: var(--portal-radius-md) !important;
  padding: 16px 24px !important;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.35) !important;
  z-index: 99999 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
}

@media (max-width: 640px) {
  .cookieBar,
  #cookieConsent {
    flex-direction: column !important;
    align-items: stretch !important;
  }
}

.cookieBar p,
#cookieConsent p {
  color: #d4d4d8 !important;
  font-size: 13px !important;
  margin: 0 !important;
  line-height: 1.45 !important;
}

.cookieBar strong,
#cookieConsent strong {
  color: #ffffff !important;
  display: block !important;
  margin-bottom: 2px !important;
}

.cookieBar button,
#cookieConsent button {
  background: var(--portal-amber) !important;
  color: #ffffff !important;
  border: none !important;
  padding: 10px 22px !important;
  font-weight: 700 !important;
  font-size: 13.5px !important;
  border-radius: var(--portal-radius-sm) !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  min-width: 120px !important;
  flex-shrink: 0 !important;
}

.cookieBar button:hover,
#cookieConsent button:hover {
  background: var(--portal-amber-hover) !important;
}

/* ==========================================================================
   11. Supreme Specificity Overrides & Dark/Light Mode Harmonization
   ========================================================================== */

/* Full Page & Canvas */
html,
body,
html body,
html body.mibBrandTheme,
html body.portalLocked,
html body.portalPageMode,
html body.theme-light,
html body.mibBrandTheme.theme-light {
  background: #f7f5f0 !important;
  color: #1c1917 !important;
}

html body.theme-dark,
html body.mibBrandTheme.theme-dark,
html body.portalLocked.theme-dark,
html body.portalPageMode.theme-dark {
  background: #141316 !important;
  color: #f5f4f0 !important;
}

/* Header Bar - Light & Dark */
html body > main > header,
html body.mibBrandTheme > main > header,
html body.portalPageMode > main > header,
html body.theme-light > main > header,
html body.theme-light.mibBrandTheme > main > header {
  background: #ffffff !important;
  border-bottom: 1px solid #e5e0d8 !important;
  box-shadow: 0 2px 8px rgba(40, 30, 20, 0.04) !important;
}

html body.theme-dark > main > header,
html body.theme-dark.mibBrandTheme > main > header,
html body.portalPageMode.theme-dark > main > header {
  background: #1c1b20 !important;
  border-bottom: 1px solid #2e2c35 !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45) !important;
}

html body.theme-light > main > header .portalBrandMark strong,
html body.theme-light > main > header #pageTitle {
  color: #1c1917 !important;
}
html body.theme-light > main > header .portalBrandMark small,
html body.theme-light > main > header #pageSub,
html body.theme-light > main > header .portalHeaderKicker {
  color: #78716c !important;
}

html body.theme-dark > main > header .portalBrandMark strong,
html body.theme-dark > main > header #pageTitle {
  color: #f5f4f0 !important;
}
html body.theme-dark > main > header .portalBrandMark small,
html body.theme-dark > main > header #pageSub,
html body.theme-dark > main > header .portalHeaderKicker {
  color: #a19da8 !important;
}

/* Header Buttons */
html body.theme-light .portalHeaderActions button,
html body.theme-light .portalHeaderActions a {
  background: #f5f3ee !important;
  border: 1px solid #e5e0d8 !important;
  color: #1c1917 !important;
}
html body.theme-light .portalHeaderActions button:hover,
html body.theme-light .portalHeaderActions a:hover {
  background: #ffffff !important;
  border-color: #d97706 !important;
  color: #d97706 !important;
}

html body.theme-dark .portalHeaderActions button,
html body.theme-dark .portalHeaderActions a {
  background: #26252b !important;
  border: 1px solid #2e2c35 !important;
  color: #f5f4f0 !important;
}
html body.theme-dark .portalHeaderActions button:hover,
html body.theme-dark .portalHeaderActions a:hover {
  background: #1c1b20 !important;
  border-color: #f59e0b !important;
  color: #f59e0b !important;
}

/* Sidebar Navigation (#sideMenu, aside) */
html body aside,
html body #sideMenu,
html body.mibBrandTheme #sideMenu,
html body.portalPageMode #sideMenu,
html body.theme-light #sideMenu,
html body.theme-light.mibBrandTheme #sideMenu {
  background: #ffffff !important;
  border-right: 1px solid #e5e0d8 !important;
  box-shadow: 2px 0 10px rgba(0, 0, 0, 0.02) !important;
}

html body.theme-dark aside,
html body.theme-dark #sideMenu,
html body.theme-dark.mibBrandTheme #sideMenu,
html body.portalPageMode.theme-dark #sideMenu {
  background: #1c1b20 !important;
  border-right: 1px solid #2e2c35 !important;
  box-shadow: 2px 0 16px rgba(0, 0, 0, 0.35) !important;
}

/* Sidebar Brand */
html body.theme-light #sideMenu .portalNavBrand {
  background: #ffffff !important;
  border-bottom: 1px solid #e5e0d8 !important;
}
html body.theme-light #sideMenu .portalNavBrand strong { color: #1c1917 !important; }
html body.theme-light #sideMenu .portalNavBrand span { color: #78716c !important; }

html body.theme-dark #sideMenu .portalNavBrand {
  background: #1c1b20 !important;
  border-bottom: 1px solid #2e2c35 !important;
}
html body.theme-dark #sideMenu .portalNavBrand strong { color: #f5f4f0 !important; }
html body.theme-dark #sideMenu .portalNavBrand span { color: #a19da8 !important; }

/* Sidebar Group Headings */
html body.theme-light #sideMenu summary,
html body.theme-light #sideMenu details summary,
html body.theme-light #sideMenu [data-role="group-title"] {
  color: #78716c !important;
}
html body.theme-dark #sideMenu summary,
html body.theme-dark #sideMenu details summary,
html body.theme-dark #sideMenu [data-role="group-title"] {
  color: #a19da8 !important;
}

/* Sidebar Nav Buttons */
html body.theme-light #sideMenu button,
html body.theme-light #sideMenu a,
html body.theme-light #sideMenu .navBtn {
  color: #44403c !important;
  background: transparent !important;
  border: 1px solid transparent !important;
}
html body.theme-light #sideMenu button:hover,
html body.theme-light #sideMenu a:hover,
html body.theme-light #sideMenu .navBtn:hover {
  background: #f5f3ee !important;
  color: #1c1917 !important;
}
html body.theme-light #sideMenu button.active,
html body.theme-light #sideMenu button.navActive,
html body.theme-light #sideMenu a.active {
  background: #fef3c7 !important;
  color: #92400e !important;
  border-color: #fde68a !important;
  font-weight: 700 !important;
}

html body.theme-dark #sideMenu button,
html body.theme-dark #sideMenu a,
html body.theme-dark #sideMenu .navBtn {
  color: #d6d3dc !important;
  background: transparent !important;
  border: 1px solid transparent !important;
}
html body.theme-dark #sideMenu button:hover,
html body.theme-dark #sideMenu a:hover,
html body.theme-dark #sideMenu .navBtn:hover {
  background: #26252b !important;
  color: #ffffff !important;
}
html body.theme-dark #sideMenu button.active,
html body.theme-dark #sideMenu button.navActive,
html body.theme-dark #sideMenu a.active {
  background: rgba(245, 158, 11, 0.16) !important;
  color: #f59e0b !important;
  border-color: rgba(245, 158, 11, 0.35) !important;
  font-weight: 700 !important;
}

/* Startpage Intent Grid */
.portalIntentGrid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;
  gap: 12px !important;
  margin: 18px 0 !important;
}

.portalIntentGrid button {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  text-align: left !important;
  padding: 16px 18px !important;
  border-radius: var(--portal-radius-sm) !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

html body.theme-light .portalIntentGrid button,
body.portalLocked.theme-light #portalEntryShell .portalIntentGrid button {
  background: #ffffff !important;
  border: 1px solid #e5e0d8 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03) !important;
}
html body.theme-light .portalIntentGrid button strong { color: #1c1917 !important; font-size: 15px !important; }
html body.theme-light .portalIntentGrid button span { color: #78716c !important; font-size: 12.5px !important; margin-top: 3px !important; }
html body.theme-light .portalIntentGrid button:hover {
  border-color: #d97706 !important;
  background: #faf8f5 !important;
  transform: translateY(-1px) !important;
}
html body.theme-light .portalIntentGrid button.active,
body.portalLocked.theme-light #portalEntryShell .portalIntentGrid button.active {
  background: #fef3c7 !important;
  border-color: #f59e0b !important;
}
html body.theme-light .portalIntentGrid button.active strong { color: #92400e !important; }
html body.theme-light .portalIntentGrid button.active span { color: #b45309 !important; }

html body.theme-dark .portalIntentGrid button,
body.portalLocked.theme-dark #portalEntryShell .portalIntentGrid button {
  background: #26252b !important;
  border: 1px solid #2e2c35 !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2) !important;
}
html body.theme-dark .portalIntentGrid button strong { color: #f5f4f0 !important; font-size: 15px !important; }
html body.theme-dark .portalIntentGrid button span { color: #a19da8 !important; font-size: 12.5px !important; margin-top: 3px !important; }
html body.theme-dark .portalIntentGrid button:hover {
  border-color: #f59e0b !important;
  background: #323038 !important;
  transform: translateY(-1px) !important;
}
html body.theme-dark .portalIntentGrid button.active,
body.portalLocked.theme-dark #portalEntryShell .portalIntentGrid button.active {
  background: rgba(245, 158, 11, 0.16) !important;
  border-color: #f59e0b !important;
}
html body.theme-dark .portalIntentGrid button.active strong { color: #f59e0b !important; }
html body.theme-dark .portalIntentGrid button.active span { color: #fcd34d !important; }

/* Primary Buttons */
button.primary,
#manualLookupBtn,
#savePortalPassword,
#confirmPortalPasswordReset,
#portalRegistrationSubmit,
.primaryActionBtn {
  background: linear-gradient(135deg, #d97706 0%, #b45309 100%) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: var(--portal-radius-sm) !important;
  font-weight: 700 !important;
  padding: 11px 22px !important;
  box-shadow: 0 2px 8px rgba(217, 119, 6, 0.25) !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

button.primary:hover,
#manualLookupBtn:hover,
#savePortalPassword:hover,
#confirmPortalPasswordReset:hover,
#portalRegistrationSubmit:hover,
.primaryActionBtn:hover {
  background: linear-gradient(135deg, #b45309 0%, #92400e 100%) !important;
  box-shadow: 0 4px 14px rgba(217, 119, 6, 0.35) !important;
}

/* Secondary Buttons */
button.secondary,
body.portalPageMode button.secondary,
#createPinBtn,
.secondaryActionBtn {
  background: var(--portal-surface-alt) !important;
  color: var(--portal-text) !important;
  border: 1px solid var(--portal-border) !important;
  border-radius: var(--portal-radius-sm) !important;
  font-weight: 600 !important;
  padding: 9px 18px !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

button.secondary:hover,
body.portalPageMode button.secondary:hover,
#createPinBtn:hover,
.secondaryActionBtn:hover {
  background: var(--portal-surface) !important;
  border-color: var(--portal-border-dark) !important;
}

/* Mobile Topbar in Dark & Light */
html body.theme-light .mobileTopbar {
  background: #ffffff !important;
  border-bottom: 1px solid #e5e0d8 !important;
}
html body.theme-dark .mobileTopbar {
  background: #1c1b20 !important;
  border-bottom: 1px solid #2e2c35 !important;
}

/* ==========================================================================
   12. High-Specificity Amber Buttons & Password Prompt Layout
   ========================================================================== */
html body #manualLookupBtn,
html body.theme-light #manualLookupBtn,
html body.theme-dark #manualLookupBtn,
html body.portalLocked #manualLookupBtn,
body.portalLocked #portalEntryShell #manualLookupBtn,
body.portalLocked.theme-dark #portalEntryShell #manualLookupBtn,
body.portalLocked.theme-light #portalEntryShell #manualLookupBtn,
html body #savePortalPassword,
html body.theme-light #savePortalPassword,
html body.theme-dark #savePortalPassword,
body.portalPageMode #savePortalPassword,
#savePortalPassword,
html body .primaryActionBtn,
html body #createRepair,
html body #saveWallet,
html body #sendMessage,
html body #confirmPortalPasswordReset,
html body #portalRegistrationSubmit {
  background: linear-gradient(135deg, #d97706 0%, #b45309 100%) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: var(--portal-radius-sm) !important;
  font-weight: 700 !important;
  padding: 11px 22px !important;
  box-shadow: 0 2px 8px rgba(217, 119, 6, 0.25) !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

html body #manualLookupBtn:hover,
html body.theme-light #manualLookupBtn:hover,
html body.theme-dark #manualLookupBtn:hover,
body.portalLocked #portalEntryShell #manualLookupBtn:hover,
body.portalLocked.theme-dark #portalEntryShell #manualLookupBtn:hover,
html body #savePortalPassword:hover,
html body.theme-light #savePortalPassword:hover,
html body.theme-dark #savePortalPassword:hover,
body.portalPageMode #savePortalPassword:hover,
#savePortalPassword:hover,
html body .primaryActionBtn:hover,
html body #createRepair:hover,
html body #saveWallet:hover,
html body #sendMessage:hover,
html body #confirmPortalPasswordReset:hover,
html body #portalRegistrationSubmit:hover {
  background: linear-gradient(135deg, #b45309 0%, #92400e 100%) !important;
  box-shadow: 0 4px 14px rgba(217, 119, 6, 0.35) !important;
}

html body #createPortalPin,
html body.theme-light #createPortalPin,
html body.theme-dark #createPortalPin,
#createPortalPin {
  background: var(--portal-surface-alt) !important;
  color: var(--portal-text) !important;
  border: 1px solid var(--portal-border) !important;
  border-radius: var(--portal-radius-sm) !important;
  font-weight: 600 !important;
  padding: 10px 18px !important;
  cursor: pointer !important;
  margin-top: 10px !important;
  transition: all 0.15s ease !important;
}

html body #createPortalPin:hover,
html body.theme-light #createPortalPin:hover,
html body.theme-dark #createPortalPin:hover,
#createPortalPin:hover {
  background: var(--portal-surface) !important;
  border-color: var(--portal-border-dark) !important;
}

.portalPasswordPrompt .lookupBox {
  display: flex !important;
  gap: 12px !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  margin: 14px 0 !important;
}

.portalPasswordPrompt .lookupBox input {
  flex: 1 1 200px !important;
  min-height: 44px !important;
}

.portalPasswordPrompt .lookupBox button {
  flex: 0 0 auto !important;
  min-height: 44px !important;
}

/* ==========================================================================
   13. Global Elimination of Legacy Blue/Cyan (--portal-led / --mib-blue)
   ========================================================================== */
:root,
html,
body,
html body,
body.portalPageMode,
body.theme-light,
body.theme-dark,
html body.portalPageMode,
html body.theme-light,
html body.theme-dark {
  --portal-led: #d97706 !important;
  --portal-led-text: #ffffff !important;
  --mib-blue: #d97706 !important;
  --portal-blue: #d97706 !important;
}

html body.theme-dark,
html body.theme-dark.portalPageMode {
  --portal-led: #f59e0b !important;
  --portal-led-text: #141316 !important;
}

/* Master button override for all portalPageMode panels */
html body.portalPageMode > main > :is(#content, #accountPanel, #purchasesPanel, #walletPanel, #messagePanel, #newRepairPanel, #rentalPanel, #ordersPanel, #wikiPanel, #legalPanel) button:not(.secondary):not(.photoTile):not(.photoClose),
html body.theme-light.portalPageMode > main > :is(#content, #accountPanel, #purchasesPanel, #walletPanel, #messagePanel, #newRepairPanel, #rentalPanel, #ordersPanel, #wikiPanel, #legalPanel) button:not(.secondary):not(.photoTile):not(.photoClose),
html body.theme-dark.portalPageMode > main > :is(#content, #accountPanel, #purchasesPanel, #walletPanel, #messagePanel, #newRepairPanel, #rentalPanel, #ordersPanel, #wikiPanel, #legalPanel) button:not(.secondary):not(.photoTile):not(.photoClose),
html body #savePortalPassword,
html body.portalPageMode #savePortalPassword,
#savePortalPassword {
  background: linear-gradient(135deg, #d97706 0%, #b45309 100%) !important;
  border: 1px solid #b45309 !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(217, 119, 6, 0.25) !important;
}

html body.portalPageMode > main > :is(#content, #accountPanel, #purchasesPanel, #walletPanel, #messagePanel, #newRepairPanel, #rentalPanel, #ordersPanel, #wikiPanel, #legalPanel) button:not(.secondary):not(.photoTile):not(.photoClose):hover,
html body #savePortalPassword:hover,
#savePortalPassword:hover {
  background: linear-gradient(135deg, #b45309 0%, #92400e 100%) !important;
  box-shadow: 0 4px 12px rgba(217, 119, 6, 0.35) !important;
}

/* ==========================================================================
   14. Rich Craftsman Dark Design System (Warm Nitro Lacquer & Ebony)
   ========================================================================== */

/* Canvas */
html body.theme-dark,
body.theme-dark,
html body.theme-dark.portalLocked,
html body.theme-dark.portalPageMode,
html body.theme-dark > main {
  background: #111013 !important;
  color: #f8f7f5 !important;
}

/* Header */
html body.theme-dark > main > header,
html body.theme-dark.portalPageMode > main > header,
html body.theme-dark.portalLocked > main > header {
  background: #16151a !important;
  border-bottom: 1px solid rgba(245, 158, 11, 0.2) !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.5) !important;
}

html body.theme-dark > main > header .portalBrandMark strong {
  color: #fbbf24 !important;
  font-weight: 850 !important;
}

html body.theme-dark > main > header .portalBrandMark small {
  color: #9e988f !important;
}

html body.theme-dark > main > header #pageTitle {
  color: #f8f7f5 !important;
  font-weight: 850 !important;
}

html body.theme-dark > main > header #pageSub,
html body.theme-dark > main > header .portalHeaderKicker {
  color: #fbbf24 !important;
  opacity: 0.9;
}

/* Header Action Buttons */
html body.theme-dark .portalHeaderActions button,
html body.theme-dark .portalHeaderActions a,
html body.theme-dark header .menuToggle,
html body.theme-dark header .portalWebsiteLink {
  background: #222028 !important;
  border: 1px solid rgba(245, 158, 11, 0.25) !important;
  color: #dcd8d0 !important;
  border-radius: 8px !important;
}

html body.theme-dark .portalHeaderActions button:hover,
html body.theme-dark .portalHeaderActions a:hover {
  background: #2a2733 !important;
  border-color: #f59e0b !important;
  color: #fbbf24 !important;
}

html body.theme-dark #portalThemeToggle {
  background: rgba(245, 158, 11, 0.14) !important;
  border: 1px solid rgba(245, 158, 11, 0.4) !important;
  color: #fbbf24 !important;
  font-weight: 700 !important;
}

/* Sidebar */
html body.theme-dark aside,
html body.theme-dark #sideMenu {
  background: #16151a !important;
  border-right: 1px solid rgba(245, 158, 11, 0.18) !important;
  box-shadow: 3px 0 20px rgba(0, 0, 0, 0.4) !important;
}

html body.theme-dark #sideMenu .portalNavBrand {
  background: #16151a !important;
  border-bottom: 1px solid rgba(245, 158, 11, 0.18) !important;
}

html body.theme-dark #sideMenu .portalNavBrand strong {
  color: #fbbf24 !important;
}

html body.theme-dark #sideMenu .portalNavBrand span {
  color: #9e988f !important;
}

html body.theme-dark #sideMenu summary,
html body.theme-dark #sideMenu details summary,
html body.theme-dark #sideMenu [data-role="group-title"] {
  color: #9e988f !important;
  font-size: 11px !important;
  font-weight: 750 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
}

html body.theme-dark #sideMenu button,
html body.theme-dark #sideMenu a,
html body.theme-dark #sideMenu .navBtn {
  color: #dcd8d0 !important;
  background: transparent !important;
  border-radius: 8px !important;
}

html body.theme-dark #sideMenu button:hover,
html body.theme-dark #sideMenu a:hover,
html body.theme-dark #sideMenu .navBtn:hover {
  background: #23212a !important;
  color: #ffffff !important;
}

html body.theme-dark #sideMenu button.active,
html body.theme-dark #sideMenu button.navActive,
html body.theme-dark #sideMenu a.active {
  background: linear-gradient(90deg, rgba(245, 158, 11, 0.22) 0%, rgba(245, 158, 11, 0.05) 100%) !important;
  border-left: 3px solid #f59e0b !important;
  border-color: rgba(245, 158, 11, 0.35) !important;
  color: #fbbf24 !important;
  font-weight: 750 !important;
}

/* Cards & Panels */
html body.theme-dark .card,
html body.theme-dark section.card,
html body.theme-dark #content,
html body.theme-dark .portalCard,
html body.theme-dark #manualLookupCard,
html body.theme-dark #portalRegistrationCard,
html body.theme-dark #portalStartGuide,
html body.theme-dark .portalPasswordPrompt,
html body.theme-dark #purchasesPanel,
html body.theme-dark #instrumentsPanel,
html body.theme-dark #communityPanel,
html body.theme-dark #ordersPanel,
html body.theme-dark #wikiPanel,
html body.theme-dark #legalPanel {
  background: #1a1920 !important;
  border: 1px solid rgba(245, 158, 11, 0.16) !important;
  border-radius: var(--portal-radius-md) !important;
  box-shadow: 0 4px 22px rgba(0, 0, 0, 0.38) !important;
  color: #f8f7f5 !important;
}

html body.theme-dark .card h2,
html body.theme-dark .card h3,
html body.theme-dark section.card h2,
html body.theme-dark section.card h3,
html body.theme-dark #content h2,
html body.theme-dark #content h3 {
  color: #f8f7f5 !important;
}

html body.theme-dark .card p,
html body.theme-dark section.card p,
html body.theme-dark #content p {
  color: #dcd8d0 !important;
}

/* Eyebrows & Badges */
html body.theme-dark .portalEyebrow,
html body.theme-dark [class*="badge"],
html body.theme-dark .portalSmartPulse span:first-child,
html body.theme-dark .stat span.eyebrow {
  background: rgba(245, 158, 11, 0.14) !important;
  color: #fbbf24 !important;
  border: 1px solid rgba(245, 158, 11, 0.35) !important;
  border-radius: 6px !important;
  padding: 4px 10px !important;
  font-size: 11px !important;
  font-weight: 750 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
}

/* Metric Cards in Status View */
html body.theme-dark .portalCommandMetrics > span,
html body.theme-dark .portalCommandMetrics .portalMetricCard,
html body.theme-dark #accountSummary .stat {
  background: #201e26 !important;
  border: 1px solid rgba(245, 158, 11, 0.18) !important;
  border-radius: var(--portal-radius-md) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35) !important;
}

html body.theme-dark .portalCommandMetrics strong,
html body.theme-dark .portalCommandMetrics .portalMetricCard strong,
html body.theme-dark #accountSummary .stat strong {
  color: #fbbf24 !important;
  font-size: 26px !important;
  font-weight: 850 !important;
  text-shadow: 0 0 14px rgba(245, 158, 11, 0.25) !important;
}

html body.theme-dark .portalCommandMetrics span,
html body.theme-dark .portalCommandMetrics .portalMetricCard span,
html body.theme-dark #accountSummary .stat span {
  color: #9e988f !important;
  font-size: 11px !important;
  font-weight: 750 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
}

/* Action Strip */
html body.theme-dark .portalSmartPulse,
html body.theme-dark .portalContextStrip {
  background: #201e26 !important;
  border: 1px solid rgba(245, 158, 11, 0.18) !important;
  border-radius: var(--portal-radius-md) !important;
}

html body.theme-dark .portalSmartPulse button,
html body.theme-dark .portalContextStrip button {
  background: #292732 !important;
  border: 1px solid #3d3a49 !important;
  color: #dcd8d0 !important;
}

html body.theme-dark .portalSmartPulse button:hover,
html body.theme-dark .portalContextStrip button:hover {
  background: #322f3e !important;
  border-color: #f59e0b !important;
  color: #fbbf24 !important;
}

/* Startpage Intent Grid */
html body.theme-dark .portalIntentGrid button,
body.portalLocked.theme-dark #portalEntryShell .portalIntentGrid button {
  background: #201f27 !important;
  border: 1px solid #33303d !important;
  border-radius: var(--portal-radius-md) !important;
  padding: 16px 18px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25) !important;
  transition: all 0.15s ease !important;
}

html body.theme-dark .portalIntentGrid button:hover,
body.portalLocked.theme-dark #portalEntryShell .portalIntentGrid button:hover {
  background: #292733 !important;
  border-color: #f59e0b !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4) !important;
}

html body.theme-dark .portalIntentGrid button.active,
body.portalLocked.theme-dark #portalEntryShell .portalIntentGrid button.active {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.22) 0%, rgba(180, 83, 9, 0.14) 100%) !important;
  border: 1.5px solid #f59e0b !important;
}

html body.theme-dark .portalIntentGrid button strong {
  color: #f8f7f5 !important;
  font-size: 15px !important;
  font-weight: 700 !important;
}

html body.theme-dark .portalIntentGrid button.active strong {
  color: #fbbf24 !important;
}

html body.theme-dark .portalIntentGrid button span {
  color: #9e988f !important;
  font-size: 12.5px !important;
}

html body.theme-dark .portalIntentGrid button.active span {
  color: #fde68a !important;
}

/* Form Controls & Inputs */
html body.theme-dark input[type="text"],
html body.theme-dark input[type="password"],
html body.theme-dark input[type="email"],
html body.theme-dark input[type="tel"],
html body.theme-dark select,
html body.theme-dark textarea,
html body.theme-dark .lookupBox input {
  background: #17161c !important;
  border: 1.5px solid #383544 !important;
  border-radius: var(--portal-radius-sm) !important;
  color: #f8f7f5 !important;
  font-size: 15px !important;
}

html body.theme-dark input:focus,
html body.theme-dark select:focus,
html body.theme-dark textarea:focus {
  border-color: #f59e0b !important;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.25) !important;
  outline: none !important;
}

html body.theme-dark input::placeholder {
  color: #78736c !important;
}

/* Primary Action Buttons */
html body.theme-dark button.primary,
html body.theme-dark #manualLookupBtn,
html body.theme-dark #savePortalPassword,
html body.theme-dark #confirmPortalPasswordReset,
html body.theme-dark #portalRegistrationSubmit,
html body.theme-dark .primaryActionBtn,
body.portalLocked.theme-dark #portalEntryShell #manualLookupBtn {
  background: linear-gradient(135deg, #f59e0b 0%, #b45309 100%) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: var(--portal-radius-sm) !important;
  font-weight: 700 !important;
  padding: 12px 24px !important;
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.35) !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

html body.theme-dark button.primary:hover,
html body.theme-dark #manualLookupBtn:hover,
html body.theme-dark #savePortalPassword:hover,
html body.theme-dark #confirmPortalPasswordReset:hover,
html body.theme-dark #portalRegistrationSubmit:hover,
html body.theme-dark .primaryActionBtn:hover,
body.portalLocked.theme-dark #portalEntryShell #manualLookupBtn:hover {
  background: linear-gradient(135deg, #fbbf24 0%, #d97706 100%) !important;
  box-shadow: 0 6px 18px rgba(245, 158, 11, 0.45) !important;
  transform: translateY(-1px) !important;
}

/* Secondary Buttons */
html body.theme-dark button.secondary,
html body.theme-dark #createPortalPin,
html body.theme-dark .secondaryActionBtn,
html body.theme-dark .portalCard button:not(.primary):not(#manualLookupBtn):not(.whatsappQuickBtn) {
  background: #25232c !important;
  color: #dcd8d0 !important;
  border: 1px solid #3a3746 !important;
  border-radius: var(--portal-radius-sm) !important;
  font-weight: 600 !important;
  padding: 10px 18px !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

html body.theme-dark button.secondary:hover,
html body.theme-dark #createPortalPin:hover,
html body.theme-dark .secondaryActionBtn:hover {
  background: #2f2c38 !important;
  border-color: #f59e0b !important;
  color: #fbbf24 !important;
}

/* Mobile Topbar */
html body.theme-dark .mobileTopbar {
  background: #16151a !important;
  border-bottom: 1px solid rgba(245, 158, 11, 0.2) !important;
}
html body.theme-dark .mobileTopbar strong {
  color: #fbbf24 !important;
}
html body.theme-dark .mobileTopbar span,
html body.theme-dark .mobileTopbar #mobileSub {
  color: #9e988f !important;
}

/* ==========================================================================
   15. Instruments Panel Specificity Dark Fix
   ========================================================================== */
html body.theme-dark.portalPageMode #instrumentsPanel.card.instrumentFolder,
html body.mibBrandTheme.portalPageMode.theme-dark #instrumentsPanel.card.instrumentFolder,
html body.theme-dark #instrumentsPanel.card.instrumentFolder,
html body.theme-dark #instrumentsPanel {
  background: #1a1920 !important;
  color: #f8f7f5 !important;
  border: 1px solid rgba(245, 158, 11, 0.16) !important;
}

html body.theme-dark #instrumentsPanel .instrumentFolderCard,
html body.theme-dark #instrumentsPanel .instrumentFolderForm,
html body.theme-dark #instrumentsPanel .emptyState,
html body.theme-dark #instrumentsPanel .instrumentEmptyBox {
  background: #201e26 !important;
  border: 1px solid #312f3b !important;
  border-top: 3px solid #f59e0b !important;
  color: #f8f7f5 !important;
}

html body.theme-dark #instrumentsPanel :is(h2, h3, strong, b, dt, legend) {
  color: #f8f7f5 !important;
}

html body.theme-dark #instrumentsPanel :is(p, span, dd, label) {
  color: #dcd8d0 !important;
}

html body.theme-dark #instrumentsPanel :is(input, select, textarea) {
  background: #17161c !important;
  border: 1.5px solid #383544 !important;
  color: #f8f7f5 !important;
}

/* ==========================================================================
   16. Complete Mobile Experience Optimization (Screens <= 860px)
   ========================================================================== */
@media (max-width: 860px) {
  /* Prevent any horizontal scrolling */
  html,
  body,
  html body.portalLocked,
  html body.mibBrandTheme,
  html body.mibBrandTheme.portalLocked {
    display: block !important;
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* When locked (not logged in), hide the desktop sidebar on mobile */
  html body.portalLocked > aside#sideMenu,
  html body:not(.portalPageMode) > aside#sideMenu {
    display: none !important;
  }

  /* When logged in on mobile, sidebar is a slide-in drawer */
  html body.portalPageMode > aside#sideMenu {
    position: fixed !important;
    inset: 0 auto 0 0 !important;
    z-index: 9999 !important;
    width: min(310px, 86vw) !important;
    height: 100dvh !important;
    box-sizing: border-box !important;
    padding: 20px 14px !important;
    transform: translateX(-105%) !important;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.6) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  html body.portalPageMode.menuOpen > aside#sideMenu {
    transform: translateX(0) !important;
  }

  /* Backdrop for open drawer */
  .portalNavBackdrop {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9998;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(2px);
  }
  html body.menuOpen .portalNavBackdrop {
    display: block !important;
  }

  /* Main viewport fills screen cleanly */
  main,
  body > main,
  body.portalLocked > main,
  body.portalPageMode > main,
  html body.mibBrandTheme > main {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 14px 12px 90px !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  /* Clean mobile header / brand */
  .mobileTopbar,
  html body.portalPageMode .mobileTopbar,
  html body.portalLocked .mobileTopbar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 400 !important;
    min-height: 52px !important;
    padding: 8px 12px !important;
    margin: -14px -12px 14px -12px !important;
    width: calc(100% + 24px) !important;
    box-sizing: border-box !important;
    background: #16151a !important;
    border-bottom: 1px solid rgba(245, 158, 11, 0.2) !important;
  }

  /* In locked mode, hide menu button on mobile topbar if sidebar is hidden */
  html body.portalLocked .mobileTopbar #menuToggle {
    display: none !important;
  }

  /* Hide desktop header */
  header,
  body > main > header,
  body.portalPageMode > main > header {
    display: none !important;
  }

  /* Entry Shell and Hero Grid full width single column */
  .portalEntryShell,
  #portalEntryShell {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  .portalHeroGrid,
  .portalMainGrid {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    gap: 14px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Cards responsive styling */
  .card,
  section.card,
  .expressCheckCard,
  .damageCheckCard,
  .portalLoginCard,
  #manualLookupCard {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 18px 14px !important;
    border-radius: 12px !important;
    margin-bottom: 0 !important;
    overflow: hidden !important;
  }

  .expressCheckCard h2,
  .damageCheckCard h2,
  .portalLoginCard h2 {
    font-size: 18px !important;
    line-height: 1.3 !important;
    margin-bottom: 8px !important;
    word-break: break-word !important;
  }

  /* Express check input & button full width stack */
  .expressCheckCard div[style*="display:flex"],
  .expressCheckCard .expressFormRow {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    width: 100% !important;
  }

  #expressOrderInput {
    width: 100% !important;
    min-width: 0 !important;
    height: 48px !important;
    box-sizing: border-box !important;
    font-size: 15px !important;
    padding: 0 14px !important;
    border-radius: 8px !important;
  }

  #expressOrderBtn {
    width: 100% !important;
    min-height: 48px !important;
    box-sizing: border-box !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    justify-content: center !important;
    border-radius: 8px !important;
  }

  /* Werkstatt damage check action buttons stack */
  .damageCheckCard div[style*="display:flex"] {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    width: 100% !important;
  }

  .damageCheckCard a.whatsappQuickBtn,
  .damageCheckCard a[href^="https://wa.me"],
  .damageCheckCard a[href^="tel:"] {
    display: flex !important;
    width: 100% !important;
    box-sizing: border-box !important;
    min-height: 46px !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 14px !important;
    text-align: center !important;
    border-radius: 8px !important;
  }

  /* Login card inputs & button */
  .portalLoginFields,
  .lookupBox,
  #portalLoginForm {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    gap: 12px !important;
  }

  .portalLoginFields input,
  .lookupBox input,
  #manualLookup {
    width: 100% !important;
    min-width: 0 !important;
    height: 48px !important;
    box-sizing: border-box !important;
    font-size: 15px !important;
    padding: 0 14px !important;
    border-radius: 8px !important;
  }

  .portalLoginFields button,
  #lookupSubmit,
  .primaryActionBtn {
    width: 100% !important;
    min-height: 48px !important;
    box-sizing: border-box !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    justify-content: center !important;
    border-radius: 8px !important;
  }

  /* Cookie banner clean mobile position */
  .cookieBar,
  #cookieConsent,
  html body .cookieBar {
    position: fixed !important;
    bottom: 8px !important;
    left: 8px !important;
    right: 8px !important;
    width: auto !important;
    max-width: calc(100% - 16px) !important;
    margin: 0 !important;
    padding: 10px 12px !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;
    z-index: 9999 !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
    background: #1c1b22 !important;
    border: 1px solid rgba(245, 158, 11, 0.3) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.7) !important;
  }

  .cookieBar button,
  #cookieAccept {
    width: 100% !important;
    margin-top: 6px !important;
    min-height: 38px !important;
    font-size: 13px !important;
  }

  /* Logged-in metrics & cards on mobile */
  .portalCommandMetrics,
  .hubMetricsGrid,
  .metricsGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .orderItem,
  .repairItem,
  .instrumentCard {
    padding: 14px 12px !important;
  }

  button, a.btn, .navBtn, .menuToggle {
    min-height: 44px !important;
  }
}