/* GBRemote UI/theme polish v3 - 2026-10-03
   Visual-only layer for app.gbremote.com and admin.gbremote.com.
   Goals: complete light-mode coverage, normalize native controls/buttons,
   polish assistance/history/commercial/plan-change modules, preserve
   the remote desktop viewport as a deliberately black rendering surface. */

:root {
  --gb-ui-radius-sm: 9px;
  --gb-ui-radius: 12px;
  --gb-ui-radius-lg: 18px;
  --gb-ui-control-h: 42px;
  --gb-ui-transition: 160ms ease;
}

html[data-theme="dark"] {
  --gb-ui-bg: #07131f;
  --gb-ui-surface: #0b1d2d;
  --gb-ui-surface-2: #0f2539;
  --gb-ui-surface-3: #132c42;
  --gb-ui-text: #eef7ff;
  --gb-ui-muted: #8eabc0;
  --gb-ui-border: rgba(111, 169, 207, .22);
  --gb-ui-border-strong: rgba(111, 169, 207, .34);
  --gb-ui-primary: #2ca9f5;
  --gb-ui-primary-2: #665cf2;
  --gb-ui-primary-soft: rgba(44, 169, 245, .12);
  --gb-ui-danger: #ff7285;
  --gb-ui-danger-soft: rgba(255, 114, 133, .10);
  --gb-ui-success: #39c48a;
  --gb-ui-shadow: 0 18px 48px rgba(0, 0, 0, .23);
  --gb-ui-focus: 0 0 0 3px rgba(44, 169, 245, .17);
}

html[data-theme="light"] {
  --gb-ui-bg: #f3f6fa;
  --gb-ui-surface: #ffffff;
  --gb-ui-surface-2: #f8fafc;
  --gb-ui-surface-3: #eef3f8;
  --gb-ui-text: #0f172a;
  --gb-ui-muted: #64748b;
  --gb-ui-border: rgba(15, 23, 42, .12);
  --gb-ui-border-strong: rgba(15, 23, 42, .18);
  --gb-ui-primary: #188ee8;
  --gb-ui-primary-2: #6655f1;
  --gb-ui-primary-soft: rgba(24, 142, 232, .08);
  --gb-ui-danger: #d94b62;
  --gb-ui-danger-soft: #fff1f3;
  --gb-ui-success: #168557;
  --gb-ui-shadow: 0 15px 40px rgba(15, 23, 42, .07);
  --gb-ui-focus: 0 0 0 3px rgba(24, 142, 232, .13);
}

/* ------------------------------------------------------------------
   1. NORMALIZED FORM CONTROLS
   Covers existing classes and dynamically generated modules even when
   they forgot .input. Navigation and the theme switch are excluded.
   ------------------------------------------------------------------ */
:is(.section, .loginbox, .user-detail, #comNewOrder, #comOrderSuccess, #comOrderDetail, .ddns-modal-card)
:is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]), select, textarea),
:is(.section, .loginbox, .user-detail, #comNewOrder, #comOrderSuccess, #comOrderDetail, .ddns-modal-card) .input {
  box-sizing: border-box !important;
  width: 100%;
  min-height: var(--gb-ui-control-h) !important;
  border: 1px solid var(--gb-ui-border) !important;
  border-radius: var(--gb-ui-radius-sm) !important;
  background: var(--gb-ui-surface) !important;
  color: var(--gb-ui-text) !important;
  padding: 9px 12px !important;
  font: inherit !important;
  line-height: 1.3 !important;
  outline: none !important;
  box-shadow: none !important;
  transition: border-color var(--gb-ui-transition), box-shadow var(--gb-ui-transition), background var(--gb-ui-transition), opacity var(--gb-ui-transition) !important;
}

:is(.section, .loginbox, .user-detail, #comNewOrder, #comOrderSuccess, #comOrderDetail, .ddns-modal-card) textarea {
  min-height: 96px !important;
  resize: vertical;
}

:is(.section, .loginbox, .user-detail, #comNewOrder, #comOrderSuccess, #comOrderDetail, .ddns-modal-card)
:is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]), select, textarea):focus,
:is(.section, .loginbox, .user-detail, #comNewOrder, #comOrderSuccess, #comOrderDetail, .ddns-modal-card) .input:focus {
  border-color: var(--gb-ui-primary) !important;
  box-shadow: var(--gb-ui-focus) !important;
}

:is(.section, .loginbox, .user-detail, #comNewOrder, #comOrderSuccess, #comOrderDetail, .ddns-modal-card)
:is(input, select, textarea):disabled {
  opacity: .55 !important;
  cursor: not-allowed !important;
  background: var(--gb-ui-surface-3) !important;
}

:is(.section, .loginbox, .user-detail, #comNewOrder, #comOrderSuccess, #comOrderDetail, .ddns-modal-card)
:is(input[type="checkbox"], input[type="radio"]) {
  accent-color: var(--gb-ui-primary);
}

:is(.section, .loginbox, .user-detail, #comNewOrder, #comOrderSuccess, #comOrderDetail, .ddns-modal-card) label {
  color: var(--gb-ui-text);
}

:is(.section, .loginbox, .user-detail, #comNewOrder, #comOrderSuccess, #comOrderDetail, .ddns-modal-card)
:is(input, textarea)::placeholder {
  color: var(--gb-ui-muted) !important;
  opacity: .66 !important;
}

/* Native file input button */
:is(.section, .user-detail, #comNewOrder) input[type="file"]::file-selector-button {
  min-height: 34px;
  margin: -5px 10px -5px -8px;
  padding: 6px 11px;
  border: 0;
  border-right: 1px solid var(--gb-ui-border);
  background: var(--gb-ui-surface-3);
  color: var(--gb-ui-text);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

/* ------------------------------------------------------------------
   2. NORMALIZED BUTTONS / LINKS USED AS BUTTONS
   ------------------------------------------------------------------ */
:is(.section, .loginbox, .user-detail, #comNewOrder, #comOrderSuccess, #comOrderDetail, .ddns-modal-card)
:is(button:not(.gb-theme-switch), a.btn, .btn, .primary, .secondary, .gb-btn) {
  box-sizing: border-box !important;
  min-height: 40px !important;
  padding: 9px 14px !important;
  border: 1px solid var(--gb-ui-border) !important;
  border-radius: 10px !important;
  background: var(--gb-ui-surface-2) !important;
  color: var(--gb-ui-text) !important;
  font: inherit !important;
  font-weight: 750 !important;
  line-height: 1.2 !important;
  text-decoration: none !important;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  white-space: nowrap;
  box-shadow: none !important;
  transition: transform var(--gb-ui-transition), background var(--gb-ui-transition), border-color var(--gb-ui-transition), box-shadow var(--gb-ui-transition), opacity var(--gb-ui-transition) !important;
}

:is(.section, .loginbox, .user-detail, #comNewOrder, #comOrderSuccess, #comOrderDetail, .ddns-modal-card)
:is(button:not(.gb-theme-switch), a.btn, .btn, .primary, .secondary, .gb-btn):hover:not(:disabled) {
  border-color: var(--gb-ui-border-strong) !important;
  background: var(--gb-ui-surface-3) !important;
  transform: translateY(-1px);
}

:is(.section, .loginbox, .user-detail, #comNewOrder, #comOrderSuccess, #comOrderDetail, .ddns-modal-card)
:is(button:not(.gb-theme-switch), a.btn, .btn, .primary, .secondary, .gb-btn):focus-visible {
  outline: none !important;
  border-color: var(--gb-ui-primary) !important;
  box-shadow: var(--gb-ui-focus) !important;
}

:is(.section, .loginbox, .user-detail, #comNewOrder, #comOrderSuccess, #comOrderDetail, .ddns-modal-card)
:is(button:not(.gb-theme-switch), .btn, .primary, .secondary, .gb-btn):disabled {
  opacity: .42 !important;
  cursor: not-allowed !important;
  transform: none !important;
}

/* Primary action selectors used across old/new modules */
:is(.section, .loginbox, .user-detail, #comNewOrder, #comOrderSuccess, #comOrderDetail)
:is(.primary, .primary-lite, .gb-btn--primary, button[type="submit"]:not(.btn):not(.secondary)) {
  color: #ffffff !important;
  background: linear-gradient(135deg, var(--gb-ui-primary), var(--gb-ui-primary-2)) !important;
  border-color: transparent !important;
  box-shadow: 0 9px 22px rgba(37, 145, 235, .18) !important;
}

:is(.section, .loginbox, .user-detail, #comNewOrder, #comOrderSuccess, #comOrderDetail)
:is(.primary, .primary-lite, .gb-btn--primary, button[type="submit"]:not(.btn):not(.secondary)):hover:not(:disabled) {
  color: #ffffff !important;
  filter: brightness(1.035);
  box-shadow: 0 12px 28px rgba(37, 145, 235, .24) !important;
}

:is(.section, .user-detail, #comNewOrder, #comOrderDetail)
:is(.danger, .danger-lite, .danger-outline, .gb-btn--danger) {
  color: var(--gb-ui-danger) !important;
  background: var(--gb-ui-danger-soft) !important;
  border-color: color-mix(in srgb, var(--gb-ui-danger) 38%, transparent) !important;
}

/* Small action buttons should stay compact. */
:is(.section, .user-detail) button.small,
:is(.section, .user-detail) .btn.small {
  min-height: 34px !important;
  padding: 7px 11px !important;
}

/* ------------------------------------------------------------------
   3. APP DASHBOARD CTA
   ------------------------------------------------------------------ */
.gb-dashboard-assistance {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 24px !important;
}

.gb-dashboard-assistance__copy { min-width: 0; }

.gb-dashboard-assistance .btn,
.gb-dashboard-assistance a[href*="assistance"] {
  flex: 0 0 auto;
  color: #fff !important;
  background: linear-gradient(135deg, var(--gb-ui-primary), var(--gb-ui-primary-2)) !important;
  border-color: transparent !important;
  box-shadow: 0 9px 22px rgba(37, 145, 235, .18) !important;
}

/* ------------------------------------------------------------------
   4. APP LICENSE / PLAN CHANGE
   ------------------------------------------------------------------ */
#license .card + .card { margin-top: 18px; }

#license :is([class*="subscription" i], [class*="plan-change" i], [id*="planchange" i], [id*="plan-change" i]) {
  color: var(--gb-ui-text) !important;
}

html[data-theme="light"] #license :is([class*="subscription" i], [class*="plan-change" i], [id*="planchange" i], [id*="plan-change" i]) {
  background: var(--gb-ui-surface) !important;
  border-color: var(--gb-ui-border) !important;
}

#license form select,
#license form input {
  min-width: 180px;
}

/* ------------------------------------------------------------------
   5. APP DEVICE SELF-SERVICE
   ------------------------------------------------------------------ */
#deviceClaimForm.device-claim-form {
  display: grid !important;
  grid-template-columns: minmax(210px, 1.15fr) minmax(170px, .65fr) minmax(240px, 1.25fr) auto !important;
  gap: 12px !important;
  align-items: end !important;
  margin-top: 16px !important;
}

#deviceClaimForm.device-claim-form label {
  display: grid !important;
  gap: 7px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: var(--gb-ui-muted) !important;
}

#deviceClaimForm.device-claim-form button[type="submit"] {
  min-width: 160px;
}

#devices .danger-lite {
  min-width: 110px;
  background: var(--gb-ui-danger-soft) !important;
  color: var(--gb-ui-danger) !important;
  border-color: color-mix(in srgb, var(--gb-ui-danger) 35%, transparent) !important;
}

#devices .table tbody tr:hover td {
  background: var(--gb-ui-primary-soft) !important;
}

/* ------------------------------------------------------------------
   6. ASSISTANCE HISTORY - both themes
   ------------------------------------------------------------------ */
.gb-assistance-history__list {
  display: grid !important;
  gap: 10px !important;
  margin-top: 14px !important;
}

.gb-history-row {
  display: grid !important;
  grid-template-columns: minmax(250px, .9fr) minmax(320px, 1.55fr) auto !important;
  align-items: center !important;
  gap: 24px !important;
  padding: 16px 18px !important;
  border: 1px solid var(--gb-ui-border) !important;
  border-radius: 14px !important;
  background: var(--gb-ui-surface) !important;
  color: var(--gb-ui-text) !important;
  box-shadow: 0 8px 26px rgba(15, 23, 42, .035) !important;
}

.gb-history-row > div {
  display: grid !important;
  gap: 4px !important;
  min-width: 0;
}

.gb-history-row strong {
  color: var(--gb-ui-text) !important;
  overflow-wrap: anywhere;
}

.gb-history-row small {
  color: var(--gb-ui-muted) !important;
  line-height: 1.45;
}

.gb-status {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 32px !important;
  padding: 6px 11px !important;
  border-radius: 999px !important;
  background: var(--gb-ui-primary-soft) !important;
  color: var(--gb-ui-primary) !important;
  border: 1px solid color-mix(in srgb, var(--gb-ui-primary) 25%, transparent) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  white-space: nowrap;
}

/* ------------------------------------------------------------------
   7. ASSISTANCE WIZARD - complete theme awareness
   ------------------------------------------------------------------ */
.gb-assistance {
  color: var(--gb-ui-text) !important;
}

.gb-assistance__hero,
.gb-assistance__card,
.gb-assistance__trust,
.gb-assistance__capability {
  border-color: var(--gb-ui-border) !important;
  color: var(--gb-ui-text) !important;
}

html[data-theme="light"] .gb-assistance__hero {
  background: linear-gradient(135deg, #ffffff, #f5f9fd) !important;
  box-shadow: var(--gb-ui-shadow) !important;
}

html[data-theme="light"] .gb-assistance__card,
html[data-theme="light"] .gb-assistance__wizard,
html[data-theme="light"] .gb-assistance__side,
html[data-theme="light"] .gb-request {
  background: var(--gb-ui-surface) !important;
  color: var(--gb-ui-text) !important;
  border: 1px solid var(--gb-ui-border) !important;
  box-shadow: var(--gb-ui-shadow) !important;
}

html[data-theme="light"] .gb-assistance__trust,
html[data-theme="light"] .gb-assistance__capability {
  background: var(--gb-ui-surface-2) !important;
}

html[data-theme="light"] .gb-assistance :is(h2, h3, legend, b, strong),
html[data-theme="light"] .gb-assistance__side h3 {
  color: var(--gb-ui-text) !important;
}

html[data-theme="light"] .gb-assistance :is(p, small, .gb-assistance__hint, .gb-assistance__side span) {
  color: var(--gb-ui-muted) !important;
}

/* Fix poor contrast seen in the dark Assistance sidebar too. */
html[data-theme="dark"] .gb-assistance__side h3,
html[data-theme="dark"] .gb-assistance__side b,
html[data-theme="dark"] .gb-assistance legend {
  color: #f4f9ff !important;
}

.gb-assistance fieldset {
  border: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.gb-assistance legend {
  margin-bottom: 8px !important;
  font-size: clamp(22px, 2vw, 28px) !important;
  font-weight: 800 !important;
}

.gb-choice {
  display: flex !important;
  align-items: flex-start !important;
  gap: 13px !important;
  padding: 16px !important;
  margin-top: 10px !important;
  border: 1px solid var(--gb-ui-border) !important;
  border-radius: 13px !important;
  background: var(--gb-ui-surface-2) !important;
  color: var(--gb-ui-text) !important;
  cursor: pointer;
  transition: background var(--gb-ui-transition), border-color var(--gb-ui-transition), box-shadow var(--gb-ui-transition), transform var(--gb-ui-transition) !important;
}

.gb-choice:hover {
  border-color: color-mix(in srgb, var(--gb-ui-primary) 42%, var(--gb-ui-border)) !important;
  background: var(--gb-ui-primary-soft) !important;
  transform: translateY(-1px);
}

.gb-choice:focus-within,
.gb-choice:has(input:checked) {
  border-color: var(--gb-ui-primary) !important;
  background: var(--gb-ui-primary-soft) !important;
  box-shadow: var(--gb-ui-focus) !important;
}

.gb-choice input[type="radio"] {
  margin-top: 3px;
  flex: 0 0 auto;
}

.gb-choice span {
  display: grid !important;
  gap: 4px !important;
}

.gb-choice b { color: var(--gb-ui-text) !important; }
.gb-choice small { color: var(--gb-ui-muted) !important; }

.gb-assistance__steps span {
  background: var(--gb-ui-surface-2) !important;
  color: var(--gb-ui-muted) !important;
  border-color: var(--gb-ui-border) !important;
}

.gb-assistance__steps span.is-active {
  background: var(--gb-ui-primary-soft) !important;
  color: var(--gb-ui-primary) !important;
  border-color: var(--gb-ui-primary) !important;
}

.gb-assistance__steps i {
  background: var(--gb-ui-border) !important;
}

.gb-assistance__side ul { margin: 20px 0 0 !important; padding: 0 !important; list-style: none !important; }
.gb-assistance__side li { padding: 12px 0 !important; border-top: 1px solid var(--gb-ui-border) !important; }
.gb-assistance__side li:first-child { border-top: 0 !important; }
.gb-assistance__side li b { display: block !important; margin-bottom: 5px !important; color: var(--gb-ui-text) !important; }
.gb-assistance__side li span { color: var(--gb-ui-muted) !important; }

.gb-assistance__actions {
  display: flex !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  margin-top: 20px !important;
}

.gb-btn--primary {
  color: #fff !important;
  background: linear-gradient(135deg, var(--gb-ui-primary), var(--gb-ui-primary-2)) !important;
  border-color: transparent !important;
}

.gb-btn--ghost { background: var(--gb-ui-surface-2) !important; color: var(--gb-ui-text) !important; }
.gb-btn--danger { background: var(--gb-ui-danger-soft) !important; color: var(--gb-ui-danger) !important; }

/* ------------------------------------------------------------------
   8. WEB REMOTE
   Theme the chrome/controls, not the actual desktop image.
   ------------------------------------------------------------------ */
#webremote .gb-webremote-control,
#webremote .gb-webremote-viewer-card {
  color: var(--gb-ui-text) !important;
}

html[data-theme="light"] #webremote .gb-webremote-control,
html[data-theme="light"] #webremote .gb-webremote-viewer-card {
  background: var(--gb-ui-surface) !important;
  border-color: var(--gb-ui-border) !important;
  box-shadow: var(--gb-ui-shadow) !important;
}

html[data-theme="light"] #webremote :is(.gb-webremote-copy, .gb-webremote-hint, .gb-webremote-viewerbar small) {
  color: var(--gb-ui-muted) !important;
}

#webremote .gb-webremote-actions {
  display: grid !important;
  gap: 10px !important;
}

#webremote .gb-webremote-state {
  border-radius: 12px !important;
  border: 1px solid var(--gb-ui-border) !important;
  padding: 13px 14px !important;
}

/* Terminal/log box intentionally remains dark in both modes. */
html[data-theme="light"] #webremote .gb-webremote-state {
  background: #27313d !important;
  color: #d8ebff !important;
  border-color: rgba(44, 169, 245, .20) !important;
}

html[data-theme="light"] #webremote .gb-webremote-state strong { color: #ffffff !important; }
html[data-theme="light"] #webremote .gb-webremote-state pre { color: #b8d9f7 !important; }

/* Never lighten the rendering surface. */
#webremote .gb-webremote-viewport-wrap,
#webremote #webRemoteViewport,
.gb-remote-popout .gb-webremote-viewport-wrap,
.gb-remote-popout #webRemoteViewport {
  background: #000000 !important;
}

/* ------------------------------------------------------------------
   9. ADMIN LICENSE PLAN CHANGE
   The module is injected by plan_change_admin.js and historically uses
   its own dark surface. Cover current/future naming variants.
   ------------------------------------------------------------------ */
#licenseDetail :is([class*="subscription" i], [class*="plan-change" i], [class*="planchange" i], [id*="plan-change" i], [id*="planchange" i]) {
  color: var(--gb-ui-text) !important;
  border-color: var(--gb-ui-border) !important;
}

html[data-theme="light"] #licenseDetail :is([class*="subscription" i], [class*="plan-change" i], [class*="planchange" i], [id*="plan-change" i], [id*="planchange" i]) {
  background: var(--gb-ui-surface) !important;
  color: var(--gb-ui-text) !important;
  border-color: var(--gb-ui-border) !important;
  box-shadow: 0 8px 24px rgba(15, 23, 42, .035) !important;
}

/* Fallback for inline dark styles inside the plan-change injection. */
html[data-theme="light"] #licenseDetail :is([class*="subscription" i], [class*="plan-change" i], [class*="planchange" i], [id*="plan-change" i], [id*="planchange" i]) [style*="background"] {
  background: var(--gb-ui-surface-2) !important;
  color: var(--gb-ui-text) !important;
}

/* Catch the plan-change wrapper even if its script does not use a semantic class. */
html[data-theme="light"] #licenseDetail > .card > :is(div, section, article):has(select):not(.cardhead):not(.license-form) {
  background: var(--gb-ui-surface) !important;
  color: var(--gb-ui-text) !important;
  border-color: var(--gb-ui-border) !important;
}

/* ------------------------------------------------------------------
   10. ADMIN COMMERCIAL / ASSISTED SALE MODALS
   Keep the screen backdrop dark; make the dialog surface theme-aware.
   ------------------------------------------------------------------ */
html[data-theme="light"] :is(#comNewOrder, #comOrderSuccess, #comOrderDetail) {
  color: var(--gb-ui-text) !important;
}

/* If the ID is the overlay, preserve a translucent backdrop. */
html[data-theme="light"] :is(#comNewOrder, #comOrderSuccess, #comOrderDetail)[style*="position: fixed"],
html[data-theme="light"] :is(#comNewOrder, #comOrderSuccess, #comOrderDetail).modal,
html[data-theme="light"] :is(#comNewOrder, #comOrderSuccess, #comOrderDetail).com-modal {
  background: rgba(15, 23, 42, .28) !important;
  backdrop-filter: blur(6px);
}

/* Actual dialog/form surface. */
html[data-theme="light"] :is(#comNewOrder, #comOrderSuccess, #comOrderDetail)
:is(form, .modal-card, .dialog, .com-dialog, .com-modal-card, .loginbox, [role="dialog"]) {
  background: var(--gb-ui-surface) !important;
  color: var(--gb-ui-text) !important;
  border-color: var(--gb-ui-border) !important;
  box-shadow: 0 28px 90px rgba(15, 23, 42, .20) !important;
}

html[data-theme="light"] :is(#comNewOrder, #comOrderSuccess, #comOrderDetail) .com-card {
  background: var(--gb-ui-surface-2) !important;
  color: var(--gb-ui-text) !important;
  border-color: var(--gb-ui-border) !important;
  box-shadow: none !important;
}

html[data-theme="light"] :is(#comNewOrder, #comOrderSuccess, #comOrderDetail)
:is(h2, h3, h4, b, strong, label) {
  color: var(--gb-ui-text) !important;
}

html[data-theme="light"] :is(#comNewOrder, #comOrderSuccess, #comOrderDetail)
:is(p, small, .com-subtle, .com-kv > span) {
  color: var(--gb-ui-muted) !important;
}

html[data-theme="light"] :is(#comNewOrder, #comOrderSuccess, #comOrderDetail)
:is(.com-info, .com-summary, .com-linkbox) {
  background: var(--gb-ui-surface-2) !important;
  color: var(--gb-ui-text) !important;
  border-color: var(--gb-ui-border) !important;
}

#comOrderForm .com-actions,
#comNewOrder .com-actions {
  display: flex !important;
  gap: 10px !important;
  align-items: center !important;
}

#comOrderForm button[type="submit"] {
  flex: 1 1 auto;
  color: #fff !important;
  background: linear-gradient(135deg, var(--gb-ui-primary), var(--gb-ui-primary-2)) !important;
  border-color: transparent !important;
}

/* Commercial configuration pages */
html[data-theme="light"] :is(#commercialOrders, #commercialSettings) .com-card {
  background: var(--gb-ui-surface) !important;
  color: var(--gb-ui-text) !important;
  border-color: var(--gb-ui-border) !important;
}

/* Dynamic surface tags added by gb-ui-polish.js make injected modules
   deterministic even when their original scripts use anonymous wrappers. */
.gb-plan-change-surface {
  margin-top: 16px !important;
  padding: 18px !important;
  border: 1px solid var(--gb-ui-border) !important;
  border-radius: 14px !important;
  color: var(--gb-ui-text) !important;
}

html[data-theme="light"] .gb-plan-change-surface {
  background: var(--gb-ui-surface-2) !important;
  box-shadow: 0 8px 24px rgba(15, 23, 42, .035) !important;
}

html[data-theme="dark"] .gb-plan-change-surface {
  background: var(--gb-ui-surface-2) !important;
}

html[data-theme="light"] #comNewOrder .gb-commercial-dialog-surface,
html[data-theme="light"] #comNewOrder .gb-commercial-form-surface {
  background: var(--gb-ui-surface) !important;
  color: var(--gb-ui-text) !important;
  border-color: var(--gb-ui-border) !important;
}

#comNewOrder .gb-commercial-dialog-surface {
  border-radius: 18px !important;
  overflow: auto !important;
}

#comNewOrder .gb-commercial-form-surface {
  border-radius: 14px !important;
}

/* ------------------------------------------------------------------
   11. TABLES AND DYNAMIC DETAIL SURFACES
   ------------------------------------------------------------------ */
:is(.section, .user-detail) :is(.table, .com-table, .ddns-table) {
  color: var(--gb-ui-text) !important;
}

html[data-theme="light"] :is(.section, .user-detail) :is(.table, .com-table, .ddns-table) thead th {
  background: var(--gb-ui-surface-3) !important;
  color: #52657a !important;
  border-color: var(--gb-ui-border) !important;
}

html[data-theme="light"] :is(.section, .user-detail) :is(.table, .com-table, .ddns-table) tbody td {
  color: var(--gb-ui-text) !important;
  border-color: var(--gb-ui-border) !important;
}

html[data-theme="light"] :is(.section, .user-detail) :is(.table, .com-table, .ddns-table) tbody tr:hover td {
  background: var(--gb-ui-primary-soft) !important;
}

html[data-theme="light"] :is(#auditMetadata, #updates pre, .ddns-code, .ddns-token) {
  border-color: var(--gb-ui-border) !important;
}

/* Keep explicit system badges/statuses legible in light mode. */
html[data-theme="light"] :is(.tag, .badge, .com-status, .ddns-badge) {
  border-color: var(--gb-ui-border) !important;
}

/* ------------------------------------------------------------------
   12. RESPONSIVE REFINEMENTS
   ------------------------------------------------------------------ */
@media (max-width: 1180px) {
  #deviceClaimForm.device-claim-form {
    grid-template-columns: 1fr 1fr !important;
  }
  #deviceClaimForm.device-claim-form button[type="submit"] { width: 100%; }
  .gb-history-row { grid-template-columns: 1fr 1.25fr auto !important; }
}

@media (max-width: 760px) {
  .gb-dashboard-assistance {
    align-items: stretch !important;
    flex-direction: column !important;
  }
  .gb-dashboard-assistance .btn,
  .gb-dashboard-assistance a[href*="assistance"] { width: 100%; }

  #deviceClaimForm.device-claim-form { grid-template-columns: 1fr !important; }

  .gb-history-row {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  .gb-history-row .gb-status { justify-self: start; }

  .gb-assistance__actions {
    align-items: stretch !important;
    flex-direction: column-reverse !important;
  }
  .gb-assistance__actions .gb-btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .gb-choice,
  :is(.section, .loginbox, .user-detail, #comNewOrder, #comOrderSuccess, #comOrderDetail) :is(button, .btn, a.btn, input, select, textarea) {
    transition: none !important;
  }
}