/* TDesign light-theme color overlay. Layout, dimensions and interactions stay on the v0 baseline. */
:root {
  --bg: #eee;
  --surface: #fff;
  --surface-soft: #f3f3f3;
  --ink: rgb(0 0 0 / 90%);
  --muted: rgb(0 0 0 / 60%);
  --subtle: rgb(0 0 0 / 40%);
  --line: #e8e8e8;
  --line-strong: #ddd;
  --blue: #0052d9;
  --blue-dark: #003cab;
  --blue-soft: #f2f3ff;
  --green: #2ba471;
  --green-soft: #e3f9e9;
  --amber: #e37318;
  --amber-soft: #fff1e9;
  --red: #d54941;
  --red-soft: #fff0ed;
  --nav: #fff;
  --nav-hover: #eee;
  --nav-soft: #f2f3ff;
  --shadow: 0 1px 10px rgb(0 0 0 / 5%), 0 4px 5px rgb(0 0 0 / 8%), 0 2px 4px -1px rgb(0 0 0 / 12%);
  --focus: 0 0 0 3px rgb(0 82 217 / 16%);
}

.sidebar {
  background: var(--nav);
  color: var(--muted);
}

.sidebar-collapsed.sidebar-hover .sidebar,
body.sidebar-collapsed .sidebar:hover {
  box-shadow: 18px 0 42px rgb(0 0 0 / 12%);
}

.brand,
.sidebar-foot {
  border-color: var(--line);
}

.brand-copy strong,
.brand .brand-user-button strong {
  color: var(--ink);
}

.brand-copy span {
  color: var(--muted);
}

.brand-search,
.brand-notification,
.brand-user-button,
.brand .brand-search,
.brand .brand-notification,
.brand .brand-user-button {
  border-color: var(--line-strong);
  background: var(--surface);
  color: var(--ink);
}

.brand-search:hover,
.brand-notification:hover,
.brand-user-button:hover,
.brand .brand-search:hover,
.brand .brand-notification:hover,
.brand .brand-user-button:hover {
  border-color: #c6c6c6;
  background: var(--surface-soft);
}

.brand .brand-search svg,
.brand .brand-notification svg,
.brand .brand-user-button svg,
.brand-user-button small {
  color: var(--muted);
}

.brand-mark,
.user-button span {
  background: var(--blue);
}

.primary-nav-item {
  color: var(--muted);
}

.primary-nav-item:hover,
.secondary-nav-item:hover,
.collapse-button:hover {
  background: var(--nav-hover);
  color: var(--ink);
}

.primary-nav-item.active {
  background: var(--blue-soft);
  color: var(--blue);
}

.secondary-nav-item,
.collapse-button {
  color: var(--muted);
}

.secondary-nav-item span {
  border-color: #a6a6a6;
}

.secondary-nav-item.active {
  background: var(--nav-soft);
  color: var(--blue);
}

.workspace-tabs {
  background: rgb(243 243 243 / 96%);
}

.workspace-tab {
  background: #eee;
}

body:not(.login-page-active) .head-actions .secondary-button {
  border-color: var(--line-strong);
  background: rgb(255 255 255 / 86%);
  color: var(--ink);
}

body:not(.login-page-active) .head-actions .primary-button {
  box-shadow: 0 5px 12px rgb(0 82 217 / 14%);
}

.secondary-button:hover,
.ghost-action:hover,
.icon-button:hover,
.user-button:hover,
.workbench-card:hover {
  border-color: #c6c6c6;
  background: var(--surface-soft);
}

.metric-card,
.modal-foot,
.readonly-field {
  background: var(--surface-soft);
}

.metric-card.metric-button:hover,
.metric-card.metric-button.active {
  background: var(--surface);
  box-shadow: 0 1px 10px rgb(0 0 0 / 5%), 0 4px 5px rgb(0 0 0 / 8%);
}

.metric-card.metric-button.active {
  outline-color: rgb(0 82 217 / 16%);
}

.order-inline-warning {
  border-color: #ffd9c2;
  background: var(--amber-soft);
  color: #954500;
}

.report-rate span {
  background: #e8e8e8;
}

/* Logged-in application surfaces: color only, keep every v0 layout rule intact. */
body:not(.login-page-active) .main-shell,
body:not(.login-page-active) .content {
  background: #eee;
  color: var(--ink);
}

body:not(.login-page-active) .filter-panel,
body:not(.login-page-active) .table-card,
body:not(.login-page-active) .config-tabs,
body:not(.login-page-active) .customer-config-toolbar,
body:not(.login-page-active) .batch-bar,
body:not(.login-page-active) .approval-metrics,
body:not(.login-page-active) .setup-wizard-card,
body:not(.login-page-active) .report-source-card,
body:not(.login-page-active) .quick-action,
body:not(.login-page-active) .settings-landing-card,
body:not(.login-page-active) .modal,
body:not(.login-page-active) .workbench-card {
  border-color: #e8e8e8;
  background: #fff;
  color: var(--ink);
}

body:not(.login-page-active) input,
body:not(.login-page-active) select,
body:not(.login-page-active) textarea,
body:not(.login-page-active) .secondary-button,
body:not(.login-page-active) .ghost-action,
body:not(.login-page-active) .icon-button,
body:not(.login-page-active) .user-button {
  border-color: #ddd;
  background: #fff;
  color: var(--ink);
}

body:not(.login-page-active) input::placeholder,
body:not(.login-page-active) textarea::placeholder {
  color: var(--subtle);
}

body:not(.login-page-active) input:focus,
body:not(.login-page-active) select:focus,
body:not(.login-page-active) textarea:focus {
  border-color: var(--blue);
}

body:not(.login-page-active) .data-table {
  background: #fff;
}

body:not(.login-page-active) .data-table th,
body:not(.login-page-active) .data-table th:last-child {
  background: #f3f3f3;
  color: var(--muted);
}

body:not(.login-page-active) .data-table td,
body:not(.login-page-active) .data-table td:last-child {
  background: #fff;
  color: var(--ink);
}

body:not(.login-page-active) .data-table tbody tr:hover,
body:not(.login-page-active) .data-table tbody tr:hover td,
body:not(.login-page-active) .data-table tbody tr:hover td:last-child {
  background: var(--blue-soft);
}

body:not(.login-page-active) .data-table th:last-child,
body:not(.login-page-active) .data-table td:last-child {
  box-shadow: -10px 0 16px rgb(0 0 0 / 5%);
}

body:not(.login-page-active) .metric-card {
  border-color: #e8e8e8;
  background: #fff;
  color: var(--ink);
}

body:not(.login-page-active) .metric-card.good {
  background: #e3f9e9;
}

body:not(.login-page-active) .metric-card.warning {
  background: #fff1e9;
}

body:not(.login-page-active) .metric-card.danger {
  background: #fff0ed;
}

body:not(.login-page-active) .metric-card.blue {
  background: #f2f3ff;
}

body:not(.login-page-active) .metric-card.neutral {
  background: #f3f3f3;
}

body:not(.login-page-active) .metric-card span,
body:not(.login-page-active) .table-footer,
body:not(.login-page-active) .source-note,
body:not(.login-page-active) .detail-item span,
body:not(.login-page-active) .readonly-field span,
body:not(.login-page-active) .notification-item p,
body:not(.login-page-active) .connection-panel p {
  color: var(--muted);
}

body:not(.login-page-active) .detail-item,
body:not(.login-page-active) .readonly-field,
body:not(.login-page-active) .notification-item,
body:not(.login-page-active) .connection-panel,
body:not(.login-page-active) .user-menu-profile,
body:not(.login-page-active) .modal-foot {
  border-color: #e8e8e8;
  background: #f3f3f3;
  color: var(--ink);
}

body:not(.login-page-active) .config-tabs > button,
body:not(.login-page-active) .config-tab-strip > button {
  color: var(--muted);
}

body:not(.login-page-active) .config-tabs > button:hover,
body:not(.login-page-active) .config-tab-strip > button:hover {
  background: #f3f3f3;
}

body:not(.login-page-active) .config-tabs > button.active,
body:not(.login-page-active) .config-tab-strip > button.active {
  background: #f2f3ff;
  color: var(--blue);
}

body:not(.login-page-active) .chip.neutral {
  background: #f3f3f3;
  color: var(--muted);
}

body:not(.login-page-active) .api-state-banner {
  border-color: #d9e1ff;
  background: #f2f3ff;
  color: #003cab;
}

body:not(.login-page-active) .api-state-banner.warning {
  border-color: #ffd9c2;
  background: #fff1e9;
  color: #954500;
}

body:not(.login-page-active) .api-state-banner.danger,
body:not(.login-page-active) .api-error-banner {
  border-color: #ffd8d2;
  background: #fff0ed;
  color: #ad352f;
}

body:not(.login-page-active) .modal-backdrop {
  background: rgb(0 0 0 / 60%);
}

body:not(.login-page-active) .quick-action:hover,
body:not(.login-page-active) .settings-landing-card:hover,
body:not(.login-page-active) .workbench-card:hover {
  border-color: #d9e1ff;
  background: #f2f3ff;
}

body:not(.login-page-active) .topbar {
  background: #fff;
}

body:not(.login-page-active) .workspace-tab.active {
  box-shadow: 0 -1px 8px rgb(0 0 0 / 5%);
}

body:not(.login-page-active) .modal :focus-visible,
body:not(.login-page-active) .workspace-tab-main:focus-visible,
body:not(.login-page-active) .workspace-tab-close:focus-visible {
  outline-color: #d9e1ff;
}

body:not(.login-page-active) .user-button span,
body:not(.login-page-active) .user-menu-profile > span {
  background: var(--blue);
}

body:not(.login-page-active) .batch-summary,
body:not(.login-page-active) .report-rate strong,
body:not(.login-page-active) .progress-cell b {
  color: var(--ink);
}

body:not(.login-page-active) .read-source,
body:not(.login-page-active) .transfer-summary {
  border-color: #e8e8e8;
  background: #f3f3f3;
  color: var(--ink);
}

body:not(.login-page-active) .approval-compare-table .compare-changed td {
  background: #fff1e9;
}

body:not(.login-page-active) .approval-compare-table .compare-changed td:last-child {
  color: #954500;
}

body:not(.login-page-active) .filter-control span,
body:not(.login-page-active) .field span,
body:not(.login-page-active) .field legend,
body:not(.login-page-active) .radio-field label,
body:not(.login-page-active) .checkbox-grid label,
body:not(.login-page-active) .filter-panel .inline-filter-control select,
body:not(.login-page-active) .customer-filter-panel .customer-inline-select select,
body:not(.login-page-active) .customer-tag-filter-panel .customer-inline-select select {
  color: var(--ink);
}

body:not(.login-page-active) .customer-filter-panel .customer-inline-select select:has(option[value=""]:checked) {
  color: var(--subtle);
}

body:not(.login-page-active) .danger-button {
  border-color: #ffd8d2;
}

body:not(.login-page-active) .multi-check-option {
  border-color: #ddd;
  background: #fff;
  color: var(--ink);
}

body:not(.login-page-active) .multi-check-option:has(input:checked) {
  border-color: var(--blue);
  background: #f2f3ff;
  color: #003cab;
}

body:not(.login-page-active) .multi-check-option.stale,
body:not(.login-page-active) .import-issues,
body:not(.login-page-active) .danger-confirm {
  border-color: #ffd8d2;
  background: #fff0ed;
  color: #ad352f;
}

body:not(.login-page-active) .import-issues strong,
body:not(.login-page-active) .danger-confirm strong {
  color: #d54941;
}

body:not(.login-page-active) .danger-confirm p {
  color: #ad352f;
}

body:not(.login-page-active) .toast {
  background: #242424;
  color: #fff;
}

body:not(.login-page-active) .progress-cell span {
  background: #e8e8e8;
}

body:not(.login-page-active) .report-rate i,
body:not(.login-page-active) .progress-cell i {
  background: var(--blue);
}

body.password-change-required {
  background: #eee;
}

.password-change-screen {
  background:
    radial-gradient(circle at 18% 12%, rgb(217 225 255 / 55%), transparent 30%),
    radial-gradient(circle at 84% 84%, rgb(242 243 255 / 70%), transparent 34%),
    linear-gradient(135deg, #fff, #f2f3ff);
}

.password-change-card {
  border-color: #e8e8e8;
  background: rgb(255 255 255 / 96%);
  box-shadow: 0 6px 30px 5px rgb(0 0 0 / 5%), 0 16px 24px 2px rgb(0 0 0 / 4%), 0 8px 10px -5px rgb(0 0 0 / 8%);
}

.password-change-icon {
  background: var(--blue);
}

.password-change-heading p {
  color: var(--blue);
}

.password-change-heading h1 {
  color: var(--ink);
}

.password-change-heading span {
  color: var(--muted);
}

body:not(.login-page-active) .empty-state {
  border-color: #ddd;
  color: var(--muted);
}

body:not(.login-page-active) .empty-cell,
body:not(.login-page-active) .empty-customer-price {
  color: var(--muted);
}

body.login-page-active {
  background: #eee;
}

.login-page-active .login-screen {
  color: var(--ink);
  background:
    radial-gradient(circle at 83% 16%, rgb(217 225 255 / 55%), transparent 28%),
    radial-gradient(circle at 44% 88%, rgb(242 243 255 / 70%), transparent 34%),
    linear-gradient(118deg, rgb(255 255 255 / 98%) 0 32%, rgb(248 249 255 / 94%) 54%, rgb(238 242 255 / 92%) 100%),
    #eee;
}

.login-page-active .login-screen::before {
  background-image:
    linear-gradient(rgb(0 82 217 / 5%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(0 82 217 / 5%) 1px, transparent 1px);
}

.login-page-active .old-pc-login-shell {
  --old-ink: rgb(0 0 0 / 90%);
  --old-muted: rgb(0 0 0 / 60%);
  --old-card: rgb(255 255 255 / 78%);
  --old-line: rgb(0 0 0 / 10%);
  --old-green: #0052d9;
  --old-green-dark: #003cab;
  --old-green-soft: #f2f3ff;
  --old-blue: #366ef4;
  --old-gold: #e37318;
  --old-red: #d54941;
  --old-red-soft: #fff0ed;
}

.login-page-active .old-pc-login-shell .donut {
  background: conic-gradient(#2ba471 0 33%, #0052d9 33% 58%, #366ef4 58% 74%, #e37318 74% 90%, #a6a6a6 90% 100%);
}

.login-page-active .old-pc-login-shell .brand-mark {
  border-color: rgb(0 60 171 / 24%);
  background: linear-gradient(145deg, #0052d9, #003cab);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 25%), 0 18px 42px rgb(0 82 217 / 17%);
}

.login-page-active .old-pc-login-shell .inventory-legend p:nth-child(1) i {
  background: #2ba471;
}

.login-page-active .old-pc-login-shell .inventory-legend p:nth-child(2) i {
  background: #0052d9;
}

.login-page-active .old-pc-login-shell .inventory-legend p:nth-child(3) i {
  background: #366ef4;
}

.login-page-active .old-pc-login-shell .inventory-legend p:nth-child(5) i {
  background: #a6a6a6;
}

.login-page-active .old-pc-login-shell .access-area::before {
  background:
    radial-gradient(ellipse at 58% 28%, rgb(97 141 255 / 18%), transparent 20%),
    linear-gradient(130deg, transparent 0 48%, rgb(0 82 217 / 14%) 49% 50%, transparent 51%),
    linear-gradient(27deg, transparent 0 42%, rgb(0 82 217 / 10%) 43% 44%, transparent 45%),
    linear-gradient(90deg, rgb(0 82 217 / 8%) 1px, transparent 1px),
    linear-gradient(rgb(0 82 217 / 8%) 1px, transparent 1px);
  background-size: auto, auto, auto, 48px 48px, 48px 48px;
}

.login-page-active .old-pc-login-shell .security-ring {
  border-color: rgb(0 82 217 / 25%);
}

.login-page-active .old-pc-login-shell .ring-two {
  border-color: rgb(0 82 217 / 35%);
}

.login-page-active .old-pc-login-shell .security-shield {
  color: var(--blue);
  background: linear-gradient(145deg, rgb(255 255 255 / 92%), rgb(217 225 255 / 70%));
}

.login-page-active .old-pc-login-shell .password-toggle:hover {
  color: var(--blue);
  background: rgb(0 82 217 / 7%);
}

.login-page-active .old-pc-login-shell .input-frame:focus-within input {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgb(0 82 217 / 12%);
}

.login-page-active .old-pc-login-shell .login-submit {
  border-color: var(--blue-dark);
  background: var(--blue);
  box-shadow: 0 16px 32px rgb(0 82 217 / 22%);
}

.login-page-active .old-pc-login-shell .login-submit:hover:not(:disabled) {
  border-color: var(--blue-dark);
  background: var(--blue-dark);
  box-shadow: 0 20px 38px rgb(0 82 217 / 26%);
}