/* Global TMS appearance — gradient content panels (never list headers / thead) */

.page.tms-has-appearance {
  --tms-panel-gradient: linear-gradient(180deg, #eef3f5 0%, #dbeafe 100%);
}

.tms-appearance-picker {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px 12px;
  margin: 0 0 10px;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid #dfe7f2;
  border-radius: 10px;
}

.page.tms-has-appearance .tms-appearance-picker {
  background: rgba(255, 255, 255, 0.72);
  border-color: rgba(255, 255, 255, 0.85);
}

.tms-appearance-picker label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  color: #475569;
}

.tms-appearance-picker select {
  padding: 6px 10px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  font: inherit;
  font-weight: 600;
  min-width: 160px;
  background: #fff;
}

.tms-appearance-screen-tag {
  font-size: 11px;
  font-weight: 700;
  color: #64748b;
}

.tms-appearance-hint {
  margin: 0 0 12px;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  color: #475569;
}

.tms-appearance-body {
  background: var(--tms-panel-gradient);
  border-radius: 8px;
  padding: 18px 20px 20px;
  margin: 12px 0 0;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
}

.tms-has-appearance .panel:not(.tms-list-panel) > form {
  background: var(--tms-panel-gradient);
  border-radius: 8px;
  padding: 18px 20px 20px;
  margin: 12px 0 0;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
}

/* Customer / Carrier workbench — gradient fills the whole form canvas */
.page.tms-has-appearance .customer-form-page,
.page.tms-has-appearance .carrier-form-page {
  background: var(--tms-panel-gradient);
  border-radius: 12px;
  padding: 16px 18px 24px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
}

.page.tms-has-appearance .customer-form-page .panel-head-row,
.page.tms-has-appearance .carrier-form-page .panel-head-row {
  background: transparent;
}

.page.tms-has-appearance .customer-form-body.tms-appearance-body,
.page.tms-has-appearance .carrier-form-body.tms-appearance-body {
  background: transparent;
  box-shadow: none;
  margin: 0;
  padding: 12px 0 0;
}

.tms-appearance-body .form-subsection-title,
.tms-has-appearance .panel:not(.tms-list-panel) > form .form-subsection-title {
  text-align: center;
}

/* Frosted cards on gradient — color shows through gaps and edges */
.page.tms-has-appearance .tms-appearance-body .form-subsection,
.page.tms-has-appearance .panel:not(.tms-list-panel) > form .form-subsection {
  background: rgba(255, 255, 255, 0.58);
  border: 1px solid rgba(255, 255, 255, 0.78);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 12px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}

.page.tms-has-appearance .tms-appearance-body .ld-tab-panel {
  background: rgba(255, 255, 255, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.78);
}

.page.tms-has-appearance .tms-appearance-body .ld-tab-strip {
  background: rgba(255, 255, 255, 0.42);
  border-color: rgba(255, 255, 255, 0.72);
}

/* Hub / workbench panels */
.page.tms-has-appearance .maint-hub .panel,
.page.tms-has-appearance .maint-hub .maint-group-panel,
.page.tms-has-appearance .maint-hub .maint-hub-intro,
.page.tms-has-appearance .acct-hub-wrap .panel,
.page.tms-has-appearance .acct-hub-wrap .acct-group-panel,
.page.tms-has-appearance .acct-hub-wrap .acct-hub-intro,
.page.tms-has-appearance .tms-hub-wrap .tms-hub-group-panel,
.page.tms-has-appearance .tms-hub-wrap .tms-hub-intro,
.page.tms-has-appearance .acct-app .panel:not(.tms-list-panel):not(.acct-list-panel) {
  background: var(--tms-panel-gradient);
  border-radius: 8px;
  padding: 18px 20px 20px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
}

/* List screens: never style these with panel gradients */
.tms-list-panel,
.tms-list-panel .panel-head-row,
.tms-list-grid thead th,
.tms-section-title,
.panel-head-row,
.tms-form-tabs,
.tms-module-tabs {
  background: unset;
}

.page.tms-has-appearance .maint-hub .maint-hub-intro.tms-list-panel,
.page.tms-has-appearance .acct-hub-wrap .acct-hub-intro.tms-list-panel,
.page.tms-has-appearance .tms-hub-wrap .tms-hub-intro.tms-list-panel {
  background: var(--tms-panel-gradient);
}