/* V198 - Global Personal Theme
   One user preference follows the authenticated account across every BELM
   area. Existing page-specific dark styles keep priority where they exist;
   these rules fill the gaps on standalone customer/technician/operator pages. */
html[data-theme="light"] { color-scheme: light; }
html[data-theme="dark"] {
  color-scheme: dark;
  --canvas: #09111f;
  --line: #2a3950;
  --muted: #98a8bb;
  --navy: #101a2d;
  --navy2: #16243b;
}

.belm-global-theme-toggle {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 9997;
  min-height: 38px;
  padding: 8px 12px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 999px;
  background: #111b2f;
  color: #fff;
  box-shadow: 0 10px 30px rgba(4, 12, 25, .24);
  font: 800 11px/1.1 Inter, system-ui, sans-serif;
  cursor: pointer;
}
.belm-global-theme-toggle:hover { transform: translateY(-1px); }
html[data-theme="dark"] .belm-global-theme-toggle {
  border-color: #3d4d66;
  background: #f8fafc;
  color: #111827;
}

html[data-theme="dark"] body {
  color: #e6edf7 !important;
  background-color: #09111f !important;
}
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] .heading h1,
html[data-theme="dark"] .task h2,
html[data-theme="dark"] td strong,
html[data-theme="dark"] .analysis-row b,
html[data-theme="dark"] .summary-grid strong,
html[data-theme="dark"] .part-request-row-head > strong {
  color: #eef4fb !important;
}
html[data-theme="dark"] .lead,
html[data-theme="dark"] .meta,
html[data-theme="dark"] .empty,
html[data-theme="dark"] .handled-by,
html[data-theme="dark"] .op-hint,
html[data-theme="dark"] .due,
html[data-theme="dark"] .sidebar-card-label,
html[data-theme="dark"] .summary-grid span,
html[data-theme="dark"] .analysis-row span {
  color: #9aaabd !important;
}

html[data-theme="dark"] .panel,
html[data-theme="dark"] .sidebar-card:not(.petty-cash-card):not(.balance-card),
html[data-theme="dark"] .summary-grid article:not(.balance-card),
html[data-theme="dark"] .op-card,
html[data-theme="dark"] .task,
html[data-theme="dark"] .loading,
html[data-theme="dark"] .empty,
html[data-theme="dark"] .locked,
html[data-theme="dark"] .receipt-preview,
html[data-theme="dark"] dialog,
html[data-theme="dark"] .customer-card,
html[data-theme="dark"] .machine-card,
html[data-theme="dark"] .part-request-row,
html[data-theme="dark"] .card {
  border-color: #2a3950 !important;
  background: #111b2e !important;
  color: #e6edf7 !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .18) !important;
}
html[data-theme="dark"] .remove-part-row {
  border-color: #6b3942 !important;
  background: #331a20 !important;
  color: #ffb4b4 !important;
}
html[data-theme="dark"] .part-source-toggle button {
  border-color: #3a4a61 !important;
  background: #152238 !important;
  color: #dce7f3 !important;
}
html[data-theme="dark"] .part-source-toggle button.active {
  background: #0f6b3a !important;
  border-color: #0f6b3a !important;
  color: #fff !important;
}

html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
  border-color: #3a4a61 !important;
  background: #0c1626 !important;
  color: #edf4fb !important;
}
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder { color: #75869b !important; }
html[data-theme="dark"] label,
html[data-theme="dark"] #expenseForm label,
html[data-theme="dark"] #loginForm label,
html[data-theme="dark"] #problemLabel,
html[data-theme="dark"] .spare-catalog-label,
html[data-theme="dark"] .spare-field > span { color: #c7d2df !important; }

html[data-theme="dark"] table { color: #dce6f1 !important; }
html[data-theme="dark"] th {
  border-color: #2a3950 !important;
  background: #0d1728 !important;
  color: #93a4b8 !important;
}
html[data-theme="dark"] td { border-color: #26354a !important; }

html[data-theme="dark"] .secondary,
html[data-theme="dark"] .op-secondary,
html[data-theme="dark"] .tabs button,
html[data-theme="dark"] .heading button,
html[data-theme="dark"] .op-toggle {
  border-color: #3a4a61 !important;
  background: #152238 !important;
  color: #dce7f3 !important;
}
html[data-theme="dark"] .op-toggle.active,
html[data-theme="dark"] .op-counter-card {
  background: #10291f !important;
}
html[data-theme="dark"] #reportProblemButton.active { background: #32290d !important; }
html[data-theme="dark"] .panel-head,
html[data-theme="dark"] .task-actions { border-color: #2a3950 !important; }
html[data-theme="dark"] .receipt-image-wrap { background: #08111f !important; }
html[data-theme="dark"] .alert:not(.error),
html[data-theme="dark"] .op-alert:not(.error) {
  border-color: #285d46 !important;
  background: #10291f !important;
  color: #8fe4b7 !important;
}
html[data-theme="dark"] .alert.error,
html[data-theme="dark"] .op-alert.error {
  border-color: #6b3942 !important;
  background: #331a20 !important;
  color: #ffb4b4 !important;
}

@media (max-width: 640px) {
  .belm-global-theme-toggle { right: 10px; bottom: 10px; padding: 8px 10px; }
}

@media print {
  .belm-global-theme-toggle { display: none !important; }
  html, body { color-scheme: light !important; }
}

/* V382 - Preserve full-card machine range colors in dark mode instead of the
   generic .machine-card dark background flattening RED/YELLOW/GREEN states. */
html[data-theme="dark"] #machineListDialog .machine-card.machine-range-green {
  border-color: #22c55e !important;
  background: linear-gradient(160deg, #102b25 0%, #111b2e 66%) !important;
  box-shadow: inset 0 0 0 9999px rgba(34,197,94,.055), 0 12px 30px rgba(34,197,94,.16) !important;
}
html[data-theme="dark"] #machineListDialog .machine-card.machine-range-yellow {
  border-color: #eab308 !important;
  background: linear-gradient(160deg, #30290f 0%, #111b2e 66%) !important;
  box-shadow: inset 0 0 0 9999px rgba(234,179,8,.065), 0 12px 30px rgba(234,179,8,.18) !important;
}
html[data-theme="dark"] #machineListDialog .machine-card.machine-range-red {
  border-color: #ef4444 !important;
  background: linear-gradient(160deg, #35191f 0%, #111b2e 66%) !important;
  box-shadow: inset 0 0 0 9999px rgba(239,68,68,.075), 0 12px 32px rgba(239,68,68,.22) !important;
}
html[data-theme="dark"] #machineListDialog .machine-alert-copy {
  background: rgba(7,18,31,.72) !important;
}
html[data-theme="dark"] #machineListDialog .machine-card.machine-range-green .machine-alert-copy { border-color: rgba(34,197,94,.58) !important; }
html[data-theme="dark"] #machineListDialog .machine-card.machine-range-yellow .machine-alert-copy { border-color: rgba(234,179,8,.62) !important; }
html[data-theme="dark"] #machineListDialog .machine-card.machine-range-red .machine-alert-copy { border-color: rgba(239,68,68,.64) !important; }
html[data-theme="dark"] #machineListDialog .machine-alert-copy .machine-alert-reason { color: #f8fafc !important; }
html[data-theme="dark"] #machineListDialog .machine-alert-copy .machine-service-alert-copy { color: #cbd5e1 !important; }

html[data-theme="dark"] .belm-customer-machine-card.belm-range-green,
html.dark .belm-customer-machine-card.belm-range-green {
  border-color: #22c55e !important;
  background: linear-gradient(160deg, #102b25 0%, #101b2d 68%) !important;
}
html[data-theme="dark"] .belm-customer-machine-card.belm-range-yellow,
html.dark .belm-customer-machine-card.belm-range-yellow {
  border-color: #eab308 !important;
  background: linear-gradient(160deg, #30290f 0%, #101b2d 68%) !important;
}
html[data-theme="dark"] .belm-customer-machine-card.belm-range-red,
html.dark .belm-customer-machine-card.belm-range-red {
  border-color: #ef4444 !important;
  background: linear-gradient(160deg, #35191f 0%, #101b2d 68%) !important;
}
html[data-theme="dark"] .belm-customer-machine-alert-copy,
html.dark .belm-customer-machine-alert-copy {
  background: rgba(7,18,31,.76) !important;
}
html[data-theme="dark"] .belm-customer-machine-alert-copy strong,
html.dark .belm-customer-machine-alert-copy strong { color: #f8fafc !important; }
html[data-theme="dark"] .belm-customer-machine-alert-copy span,
html.dark .belm-customer-machine-alert-copy span { color: #cbd5e1 !important; }


/* V485 embedded/display-fit hardening */
html,body{max-width:100%}
body{overflow-x:hidden}
html.belm-embedded body>.topbar,html.belm-embedded #belmAdminSidebar,html.belm-embedded .belm-admin-sidebar,html.belm-embedded .belm-sidebar-toggle,html.belm-embedded .belm-sidebar-scrim{display:none!important}
html.belm-embedded body{padding-left:0!important;margin-left:0!important;min-width:0!important;overflow-x:hidden!important}
html.belm-embedded main,html.belm-embedded .shell{max-width:100%!important;min-width:0!important}
.table-wrap{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
iframe,img,video,canvas,svg{max-width:100%}
input,select,textarea,button{min-width:0}


/* V494 - embedded dark-canvas fallback. Prevent iframe/page gaps from flashing
   white before module-specific styles finish painting. */
html[data-theme="dark"].belm-embedded,
html[data-theme="dark"].belm-embedded body{
  background:#0b1728 !important;
}

/* V627 - Customer Machine Check Up: centered one-column, touch-friendly layout.
   Scoped to the standalone Check Up page so other portal forms are unchanged. */
body:has(#machineName):has(#template):has(#items) .shell{
  width:min(100%,760px)!important;
  max-width:760px!important;
  margin:0 auto!important;
  padding:24px 18px 36px!important;
}
body:has(#machineName):has(#template):has(#items) .default-grid{
  display:grid!important;
  grid-template-columns:minmax(0,1fr)!important;
  gap:18px!important;
}
body:has(#machineName):has(#template):has(#items) .display-photo{
  grid-column:auto!important;
}
body:has(#machineName):has(#template):has(#items) .default-box{
  width:100%!important;
  padding:21px!important;
}
body:has(#machineName):has(#template):has(#items) .default-box input,
body:has(#machineName):has(#template):has(#items) .default-box select,
body:has(#machineName):has(#template):has(#items) .answer-wrap input,
body:has(#machineName):has(#template):has(#items) .answer-wrap select,
body:has(#machineName):has(#template):has(#items) .answer-wrap textarea{
  width:100%!important;
  min-height:58px!important;
  padding:16px 17px!important;
  font-size:16px!important;
  line-height:1.35!important;
  border-radius:14px!important;
}
body:has(#machineName):has(#template):has(#items) .answer-wrap textarea{
  min-height:96px!important;
  resize:vertical!important;
}
body:has(#machineName):has(#template):has(#items) .service-type{
  min-height:58px!important;
  font-size:16px!important;
}
body:has(#machineName):has(#template):has(#items) .items{
  display:grid!important;
  grid-template-columns:minmax(0,1fr)!important;
  gap:18px!important;
}
body:has(#machineName):has(#template):has(#items) .item{
  width:100%!important;
  padding:22px!important;
  border-radius:18px!important;
}
body:has(#machineName):has(#template):has(#items) .item-head{
  align-items:flex-start!important;
  margin-bottom:15px!important;
}
body:has(#machineName):has(#template):has(#items) .item h3{
  font-size:17px!important;
  line-height:1.4!important;
}
body:has(#machineName):has(#template):has(#items) .safety-pill{
  flex:0 0 auto!important;
  min-height:28px!important;
  display:inline-flex!important;
  align-items:center!important;
}
body:has(#machineName):has(#template):has(#items) .day-check{
  min-height:58px!important;
  padding:6px 0!important;
}
body:has(#machineName):has(#template):has(#items) .day-check input{
  width:30px!important;
  height:30px!important;
  min-height:30px!important;
}
body:has(#machineName):has(#template):has(#items) .submit{
  min-height:62px!important;
  font-size:17px!important;
}
@media(max-width:600px){
  body:has(#machineName):has(#template):has(#items) .shell{
    width:100%!important;
    padding:14px 12px 30px!important;
  }
  body:has(#machineName):has(#template):has(#items) .hero,
  body:has(#machineName):has(#template):has(#items) .card{
    padding:18px!important;
    border-radius:17px!important;
  }
  body:has(#machineName):has(#template):has(#items) .default-grid,
  body:has(#machineName):has(#template):has(#items) .items{
    gap:16px!important;
  }
  body:has(#machineName):has(#template):has(#items) .default-box,
  body:has(#machineName):has(#template):has(#items) .item{
    padding:18px!important;
  }
  body:has(#machineName):has(#template):has(#items) .item-head{
    gap:12px!important;
  }
  body:has(#machineName):has(#template):has(#items) .item h3{
    font-size:16px!important;
    line-height:1.45!important;
  }
  body:has(#machineName):has(#template):has(#items) .default-box input,
  body:has(#machineName):has(#template):has(#items) .default-box select,
  body:has(#machineName):has(#template):has(#items) .answer-wrap input,
  body:has(#machineName):has(#template):has(#items) .answer-wrap select,
  body:has(#machineName):has(#template):has(#items) .answer-wrap textarea{
    min-height:60px!important;
    padding:17px 16px!important;
    font-size:16px!important;
  }
  body:has(#machineName):has(#template):has(#items) .answer-wrap textarea{
    min-height:100px!important;
  }
}