/* Light/dark — set data-theme on via js/theme.js */
html[data-theme='light'] {
color-scheme: light;
}
html[data-theme='dark'] {
color-scheme: dark;
}
.theme-toggle {
display: inline-flex;
align-items: center;
gap: 0.35rem;
text-transform: uppercase;
font-size: 0.65rem;
padding: 0.45rem 0.65rem;
white-space: nowrap;
}
.theme-toggle-icon {
font-size: 0.9rem;
line-height: 1;
}
.auth-theme-bar {
display: flex;
justify-content: flex-end;
width: 100%;
margin: 0 0 0.5rem;
}
/* ——— Dark mode overrides (light = default app.css) ——— */
html[data-theme='dark'] body {
background: #0f172a;
color: #e2e8f0;
}
html[data-theme='dark'] #authOverlay {
background: linear-gradient(135deg, #020617 0%, #0f172a 50%, #020617 100%);
}
html[data-theme='dark'] .auth-card,
html[data-theme='dark'] .app-shell,
html[data-theme='dark'] .workspace-shell,
html[data-theme='dark'] .history-sidebar,
html[data-theme='dark'] .order-card,
html[data-theme='dark'] .kanban-count,
html[data-theme='dark'] .filter-chip,
html[data-theme='dark'] .saved-run-row {
background: #1e293b;
color: #e2e8f0;
}
html[data-theme='dark'] .auth-brand p,
html[data-theme='dark'] .workspace-header p,
html[data-theme='dark'] .app-top p,
html[data-theme='dark'] .hint,
html[data-theme='dark'] .status-help,
html[data-theme='dark'] .auth-note,
html[data-theme='dark'] .order-card-client,
html[data-theme='dark'] .order-card-meta,
html[data-theme='dark'] .saved-run-meta,
html[data-theme='dark'] .order-detail-client,
html[data-theme='dark'] .status-hint,
html[data-theme='dark'] .kanban-col-head p,
html[data-theme='dark'] .pass-through {
color: #94a3b8;
}
html[data-theme='dark'] .auth-tab,
html[data-theme='dark'] .btn-secondary,
html[data-theme='dark'] .nav-tab,
html[data-theme='dark'] .theme-toggle {
background: #334155;
border-color: #475569;
color: #e2e8f0;
}
html[data-theme='dark'] .auth-tab.active,
html[data-theme='dark'] .nav-tab.active {
background: #0f172a;
border-color: var(--aj-green);
color: #f8fafc;
}
html[data-theme='dark'] .btn-ghost {
color: #94a3b8;
}
html[data-theme='dark'] .btn-primary:hover {
background: #f8fafc;
color: #111;
}
html[data-theme='dark'] .garment-card,
html[data-theme='dark'] .print-card,
html[data-theme='dark'] .sub-panel,
html[data-theme='dark'] .kanban-column,
html[data-theme='dark'] .margin-block {
background: #1e293b;
border-color: #475569;
}
html[data-theme='dark'] .sub-panel {
background: #243044;
}
html[data-theme='dark'] .mockup-panel .mockup-frame {
background: #0f172a;
border-color: #475569;
}
html[data-theme='dark'] .grid-meta input,
html[data-theme='dark'] .grid-meta textarea,
html[data-theme='dark'] .grid-meta select,
html[data-theme='dark'] .auth-form input,
html[data-theme='dark'] .size-grid input,
html[data-theme='dark'] .price-grid input,
html[data-theme='dark'] .print-grid input,
html[data-theme='dark'] .fee-grid-2 input,
html[data-theme='dark'] .garment-meta input,
html[data-theme='dark'] #shippingCost,
html[data-theme='dark'] .orders-search,
html[data-theme='dark'] .detail-note,
html[data-theme='dark'] .detail-status-label select,
html[data-theme='dark'] .status-select-inline,
html[data-theme='dark'] .break-row input {
background: #0f172a;
border-color: #475569;
color: #f1f5f9;
}
html[data-theme='dark'] .size-grid label,
html[data-theme='dark'] .price-grid label,
html[data-theme='dark'] .print-grid label,
html[data-theme='dark'] .fee-grid-2 label,
html[data-theme='dark'] .grid-meta label,
html[data-theme='dark'] .auth-form label,
html[data-theme='dark'] .detail-status-label {
color: #cbd5e1;
}
html[data-theme='dark'] .app-top,
html[data-theme='dark'] .workspace-header,
html[data-theme='dark'] .sidebar-head,
html[data-theme='dark'] .order-detail-head,
html[data-theme='dark'] .kanban-col-head,
html[data-theme='dark'] .sub-panel h3 {
border-color: #475569;
}
html[data-theme='dark'] .price-grid {
border-top-color: #475569;
}
html[data-theme='dark'] .saved-run-row {
border-bottom-color: #334155;
}
html[data-theme='dark'] .saved-run-row:hover,
html[data-theme='dark'] .order-card-open:hover {
background: #334155;
}
html[data-theme='dark'] .break-row.active {
background: #365314;
border-color: #4d7c0f;
}
html[data-theme='dark'] .mockup-placeholder,
html[data-theme='dark'] .kanban-empty,
html[data-theme='dark'] .orders-empty,
html[data-theme='dark'] .sidebar-empty,
html[data-theme='dark'] .timeline-empty {
color: #64748b;
}
html[data-theme='dark'] .status-timeline {
border-left-color: #475569;
}
html[data-theme='dark'] .timeline-item::before {
border-color: #1e293b;
box-shadow: 0 0 0 1px #475569;
}
html[data-theme='dark'] .timeline-item time,
html[data-theme='dark'] .order-detail-stats span {
color: #64748b;
}
html[data-theme='dark'] input[type='range']::-webkit-slider-runnable-track {
background: #475569;
}
html[data-theme='dark'] input[type='range']::-webkit-slider-thumb {
border-color: #e2e8f0;
}
html[data-theme='dark'] ::-webkit-scrollbar-track {
background: #1e293b;
}
html[data-theme='dark'] ::-webkit-scrollbar-thumb {
background: #475569;
}
/* Finance panel stays high-contrast in both modes */
html[data-theme='dark'] .totals-block {
background: #020617;
border-color: #334155;
}
html[data-theme='dark'] .per-shirt {
background: #0f172a;
border-color: #334155;
}
/* Print PDF always light */
@media print {
html[data-theme='dark'] body {
background: #fff !important;
color: #111 !important;
}
}