/* TeslaShop.GE workspaces — quiet companion to the Tesla Hub glass surface.
   Load after the existing page styles. Forms and order data stay nearly opaque;
   this layer adds the same fine edge and restrained depth without large blurs. */

.auth-v2-page,
.tsa-account-app,
.evs-workspace,
.sp-shell,
.ts-cart-page,
.ts-checkout-page {
  --tswg-surface: rgba(250, 252, 255, .97);
  --tswg-edge: rgba(111, 130, 154, .22);
  --tswg-edge-strong: rgba(91, 111, 138, .38);
  --tswg-sheen: rgba(255, 255, 255, .66);
  --tswg-shadow: 0 10px 28px rgba(24, 39, 61, .075), inset 0 1px 0 rgba(255, 255, 255, .78);
  --tswg-focus: #b51229;
}

html[data-theme="dark"] .tsa-account-app,
.auth-v2-page[data-evx-theme="dark"],
html[data-theme="dark"] .auth-v2-page {
  --tswg-surface: #101827;
  --tswg-edge: #34445a;
  --tswg-edge-strong: #58708e;
  --tswg-sheen: rgba(255, 255, 255, .045);
  --tswg-shadow: 0 16px 36px rgba(0, 0, 0, .22), inset 0 1px 0 rgba(255, 255, 255, .05);
  --tswg-focus: #ff767c;
}

/* The sign-in and recovery panels keep their existing theme and validation. */
.auth-v2-page .auth-v2-panel,
.auth-v2-page .auth-v2-status-card {
  border-color: var(--tswg-edge);
  background: linear-gradient(160deg, var(--tswg-sheen), transparent 58%), var(--tswg-surface);
  box-shadow: var(--tswg-shadow);
}
.auth-v2-page .auth-v2-control,
.auth-v2-page .auth-v2-quiet-link,
.auth-v2-page .auth-v2-theme {
  border-color: var(--tswg-edge);
  background-color: var(--tswg-surface);
}
.auth-v2-page .auth-v2-control:focus-within {
  border-color: var(--tswg-focus);
  box-shadow: 0 0 0 3px rgba(181, 18, 41, .13);
}
.auth-v2-page :is(.auth-v2-quiet-link, .auth-v2-theme, .auth-v2-submit) {
  min-height: 44px;
}

/* Account cards share the material but preserve status and primary treatments. */
.tsa-account-app :is(.tsa-card, .tsaop-panel, .tsaop-status-card, .tsam-toolbar, .tsam-filter-panel, .tsam-inquiry-card) {
  border-color: var(--tswg-edge);
  background: linear-gradient(160deg, var(--tswg-sheen), transparent 58%), var(--tswg-surface);
  box-shadow: var(--tswg-shadow);
}
.tsa-account-app :is(.tsaop-summary-card, .tsam-summary-card):not(.is-primary) {
  border-color: var(--tswg-edge);
  background: var(--tswg-surface);
  box-shadow: var(--tswg-shadow);
}
.tsa-account-app :is(.tsa-btn, .tsa-tab, .tsam-segmented a, .tsam-action-popover a, .tsam-action-popover button) {
  min-height: 44px;
}
.tsa-account-app :is(a, button, input, select, textarea, summary):focus-visible {
  outline: 3px solid var(--tswg-focus);
  outline-offset: 3px;
}

/* Seller v2 already routes every panel through these variables, including
   rules marked !important. Adjusting the source tokens avoids another override
   cascade and keeps its light/dark palette working. */
html:not([data-theme="dark"]) body.seller-console-page {
  --evs-surface: rgba(250, 252, 255, .97);
  --evs-border: rgba(111, 130, 154, .22);
  --evs-shadow: 0 10px 28px rgba(24, 39, 61, .075), inset 0 1px 0 rgba(255, 255, 255, .78);
}
html[data-theme="dark"] body.seller-console-page {
  --evs-surface: #111b2a;
  --evs-border: #34445a;
  --evs-shadow: 0 14px 34px rgba(0, 0, 0, .22), inset 0 1px 0 rgba(255, 255, 255, .05);
}
.evs-workspace .evs-summary-grid article {
  border-color: var(--evs-border);
  background: var(--evs-surface);
  box-shadow: var(--evs-shadow);
}
.evs-workspace :is(.seller-btn, .seller-icon-btn, .evs-status-tabs a) {
  min-height: 44px;
}
.evs-workspace :is(a, button, input, select, textarea, summary):focus-visible {
  outline: 3px solid var(--tswg-focus);
  outline-offset: 3px;
}

/* The service console has self-contained CSS in its PHP partial. Its dense
   bookings table remains solid; only the surrounding controls get soft depth. */
.sp-shell :is(.sp-sidebar, .sp-card, .sp-kpi, .sp-toolbar, .sp-booking-card) {
  border-color: var(--tswg-edge);
  background: linear-gradient(160deg, var(--tswg-sheen), transparent 58%), var(--tswg-surface);
  box-shadow: var(--tswg-shadow);
}
.sp-shell .sp-table :is(th, td),
.sp-shell :is(.sp-field, .sp-toolbar input, .sp-toolbar select) {
  background-color: #fff;
}
.sp-shell :is(.sp-btn, .sp-field, .sp-toolbar input, .sp-toolbar select, .sp-filter-tabs a, .sp-mobile-nav a) {
  min-height: 44px;
}
.sp-shell :is(a, button, input, select, textarea):focus-visible {
  outline: 3px solid var(--tswg-focus);
  outline-offset: 3px;
}

/* Cart and checkout are decision surfaces: transparent enough for continuity,
   opaque enough that quantities, payment choices and totals never drift. */
.ts-cart-page :is(.ts-cart-item, .ts-cart-summary),
.ts-checkout-page :is(.ts-checkout-card, .ts-checkout-summary) {
  border: 1px solid var(--tswg-edge);
  border-radius: 16px;
  background: linear-gradient(160deg, var(--tswg-sheen), transparent 58%), var(--tswg-surface);
  box-shadow: var(--tswg-shadow);
}
.ts-checkout-page .ts-checkout-choice {
  min-height: 44px;
  background: #fff;
}
.ts-checkout-page .ts-checkout-choice:focus-within {
  outline: 3px solid var(--tswg-focus);
  outline-offset: 2px;
}
.ts-cart-page :is(button, input, a.btn-tesla, a.btn-outline),
.ts-checkout-page :is(button, input, select, textarea, a.btn-tesla, a.btn-outline) {
  min-height: 44px;
}
.ts-cart-page :is(a, button, input):focus-visible,
.ts-checkout-page :is(a, button, input, select, textarea):focus-visible {
  outline: 3px solid var(--tswg-focus);
  outline-offset: 3px;
}

@media (max-width: 680px) {
  .ts-cart-page :is(.ts-cart-item, .ts-cart-summary),
  .ts-checkout-page :is(.ts-checkout-card, .ts-checkout-summary) {
    border-radius: 14px;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .auth-v2-page,
  .tsa-account-app,
  .evs-workspace,
  .sp-shell,
  .ts-cart-page,
  .ts-checkout-page {
    --tswg-surface: #fff;
    --tswg-sheen: transparent;
  }
  html[data-theme="dark"] .tsa-account-app,
  .auth-v2-page[data-evx-theme="dark"],
  html[data-theme="dark"] .auth-v2-page {
    --tswg-surface: #111b2a;
  }
  html:not([data-theme="dark"]) body.seller-console-page {
    --evs-surface: #fff;
  }
}

@media (forced-colors: active) {
  .auth-v2-page,
  .tsa-account-app,
  .evs-workspace,
  .sp-shell,
  .ts-cart-page,
  .ts-checkout-page {
    --tswg-surface: Canvas;
    --tswg-edge: CanvasText;
    --tswg-sheen: transparent;
    --tswg-shadow: none;
    --tswg-focus: Highlight;
  }
  body.seller-console-page {
    --evs-surface: Canvas;
    --evs-border: CanvasText;
    --evs-shadow: none;
  }
}