/* V3348 shell compatibility layer. Variables come from yabox-tokens.css. */

html,
body,
#app,
.main-area,
.content {
  background: var(--bg) !important;
  color: var(--text) !important;
}

.topbar {
  background: var(--bg-elev) !important;
  border-bottom: 1px solid var(--border) !important;
  color: var(--text) !important;
}

#page-title,
.topbar-title,
.yabox-toolbar-title,
.search-item-title {
  color: var(--text) !important;
}

.page-sub,
.topbar-btn-ghost,
.search-item-sub,
.kpil,
.kpi-sub {
  color: var(--text3) !important;
}

.kpis {
  background: var(--bg-elev) !important;
  border-bottom: 1px solid var(--border) !important;
}

.kpi,
.kpi-card {
  background: var(--bg-elev) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
}

.kpi.kpi-active {
  background: var(--blue-bg) !important;
  border-color: var(--blue-border) !important;
}

/* FIX v3349: order cards can receive brand colors inline from oCH(). */
.ocard,
.ocard[style*="background"] {
  background: var(--white) !important;
  border-color: var(--border) !important;
}

.cbox,
.card,
.yabox-card,
.yabox-card-flat,
.ocard,
.an-card,
.dispatch-card,
.finance-card,
.printing-panel,
.cai-section,
.blitz-order-card,
[data-order-id],
.modal,
.mbody,
.mhdr,
.mfooter,
.search-drop {
  background: var(--bg-elev) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}

.ocard *,
.cbox *,
.yabox-card *,
.dispatch-card *,
.finance-card *,
.printing-panel *,
.cai-section *,
[data-order-id] * {
  color: inherit;
}

.ocard {
  box-shadow: 0 10px 28px rgba(0,0,0,.26) !important;
}

.otags span,
.tag,
.badge,
.pill,
.status-pill {
  color: inherit;
}

.tag,
.pill,
.status-pill,
.nav-badge {
  border-color: var(--border) !important;
}

.data-table,
.data-table table,
table {
  background: var(--bg-elev) !important;
  color: var(--text) !important;
}

.data-table th,
table th {
  background: var(--bg-hover) !important;
  color: var(--text2) !important;
  border-color: var(--border) !important;
}

.data-table td,
table td {
  color: var(--text) !important;
  border-color: var(--border) !important;
}

.yabox-input,
.linp,
input,
select,
textarea {
  background: var(--bg-elev) !important;
  color: var(--text) !important;
  border-color: var(--border2) !important;
}

.yabox-input::placeholder,
.linp::placeholder,
input::placeholder,
textarea::placeholder {
  color: var(--text3) !important;
}

.topbar-btn,
.yabox-btn,
.obtn {
  background: var(--bg-elev) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}

.topbar-btn-primary,
.yabox-btn-primary,
.obtn-primary {
  background: var(--blue) !important;
  border-color: var(--blue) !important;
  color: var(--on-accent) !important;
}

.empty-state,
.agent-state {
  background: var(--bg-elev) !important;
  border-color: var(--border) !important;
  color: var(--text2) !important;
}

#dp-popup,
.city-dropdown,
#cai-detail,
.mobile-sheet,
.bottom-sheet {
  background: var(--bg-elev) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}

.octa,
.cai-act,
.db-quick-action,
.search-item,
.pgbtn,
.pgsize {
  background: var(--bg-elev) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}

.octa-call,
.cai-act.confirm,
.yabox-btn-success {
  background: var(--green-bg) !important;
  color: var(--green-txt) !important;
  border-color: var(--green-border) !important;
}

.octa-track,
.cai-act.track {
  background: var(--blue-bg) !important;
  color: var(--blue-txt) !important;
  border-color: var(--blue-border) !important;
}

/* Intelligence/adaptive screens still ship legacy readable-light cards. */
.intel-page,
.intel-card,
.intel-page .yabox-card,
.intel-page .ol-card,
.intel-page .ol-glass,
.intel-page .ol-map-card,
.intel-page .data-table,
.intel-page table {
  background: var(--bg-elev) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}

.intel-page th,
.intel-page .data-table th {
  background: var(--bg-hover) !important;
  color: var(--text2) !important;
  border-color: var(--border) !important;
}

.intel-page td,
.intel-page .data-table td {
  color: var(--text) !important;
  border-color: var(--border) !important;
}

.intel-title,
.intel-page h1,
.intel-page h2,
.intel-page h3,
.intel-page .ol-title {
  color: var(--text) !important;
}

.intel-subtitle,
.intel-page .muted,
.intel-page .ol-text-muted,
.intel-page small {
  color: var(--text3) !important;
}

/* FIX — Dark mode: override hardcoded brand background on order cards */
.ocard {
  background: var(--white) !important;
  border-color: var(--border) !important;
}

.ocard[style*="background"] {
  background: var(--white) !important;
  border-color: var(--border) !important;
}

/* FILTERS: keep form-wide width:100% from forcing filter controls vertical. */
.filters .yabox-input,
.filters select,
.filters input,
.filters-row .yabox-input,
.filters-row select,
.filters-row input {
  width: auto !important;
  flex: 0 0 auto !important;
  min-width: 140px !important;
  max-width: 200px !important;
}

.filters > div,
.filters-row > div,
.filters > button,
.filters-row > button {
  flex: 0 0 auto !important;
}