/* SparkPub 0.8 — visual profissional, previsível e independente da cor da marca. */
:root {
  --ink: #172033;
  --muted: #5f6b7c;
  --subtle: #8793a5;
  --line: #dbe2ea;
  --line-strong: #c8d2df;
  --paper: #ffffff;
  --canvas: #f4f6f9;
  --surface-soft: #eef2f6;
  --surface-raised: #ffffff;
  --navy: #172033;
  --green: #12805c;
  --amber: #c76b08;
  --red: #c93632;
  --violet: #6e56cf;
  --blue: var(--brand-primary, #e06b2d);
  --shadow-card: 0 1px 2px rgb(15 23 42 / 4%), 0 8px 24px rgb(15 23 42 / 5%);
  --shadow-floating: 0 16px 42px rgb(15 23 42 / 16%);
  --sidebar-width: 15.5rem;
  --content-width: 100rem;
  --page-gutter: clamp(1rem, 2.2vw, 2rem);
  --radius-card: .875rem;
  --radius-control: .625rem;
  --touch-target: 2.75rem;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { background: var(--canvas); }
html, body { width: 100%; max-width: 100%; min-width: 0; overflow-x: clip; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--canvas);
  font: 500 .9375rem/1.5 "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; }
button, a, input, select, textarea, [role="button"] { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .55; }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--brand-primary) 32%, transparent); outline-offset: 2px; }

/* Estrutura */
.app-shell { min-height: 100dvh; background: var(--canvas); }
.sidebar {
  position: fixed; inset: 0 auto 0 0; z-index: 30;
  width: var(--sidebar-width); max-width: calc(100vw - 3rem); height: 100dvh;
  padding: 1rem .75rem .75rem;
  display: flex; flex-direction: column; overflow: hidden;
  color: #f8fafc;
  background: #121b2b;
  border: 0; border-right: 1px solid #263349;
  box-shadow: none;
}
.brand { min-height: 3.75rem; padding: .25rem .5rem 1rem; display: flex; align-items: center; gap: .75rem; }
.brand-mark { width: 2.5rem; height: 2.5rem; padding: .2rem; flex: 0 0 auto; border: 1px solid rgb(255 255 255 / 14%); border-radius: .75rem; background: #fff; box-shadow: none; }
.brand-mark img { width: 100%; height: 100%; object-fit: contain; border-radius: .55rem; }
.brand strong { display: block; color: #fff; font: 800 1.125rem/1.2 "Manrope", sans-serif; letter-spacing: -.02em; }
.brand small { display: block; margin-top: .15rem; color: #9eabc0; font-size: .6875rem; }
.venue-switcher {
  display: grid; grid-template-columns: 2.125rem minmax(0,1fr) 1.5rem; align-items: center; gap: .625rem;
  width: auto; min-height: 3.75rem; margin: 0 .25rem .75rem; padding: .625rem;
  color: #e7edf6; background: #1a2638; border: 1px solid #2c3a50; border-radius: .75rem;
}
.venue-switcher:hover { background: #202e43; }
.venue-switcher div { min-width: 0; }
.venue-switcher small { display: block; color: #90a0b7; font-size: .625rem; }
.venue-switcher strong { display: block; overflow: hidden; color: #fff; font-size: .8125rem; text-overflow: ellipsis; white-space: nowrap; }
.venue-switcher > button { width: 1.5rem; min-width: 1.5rem; min-height: 2.75rem; padding: 0; color: #9eabc0; background: transparent; border: 0; }
.venue-avatar { width: 2.125rem; height: 2.125rem; display: grid; place-items: center; border-radius: .625rem; color: var(--brand-on-primary); background: var(--brand-primary); font-size: .6875rem; font-weight: 800; }
.nav { min-height: 0; display: grid; align-content: start; gap: .125rem; padding: .25rem; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #34445d transparent; }
.nav-item {
  position: relative; width: 100%; min-height: 2.75rem; padding: .55rem .625rem;
  display: flex; align-items: center; gap: .75rem;
  color: #aeb9ca; background: transparent; border: 0; border-radius: .625rem;
  font-size: .875rem; font-weight: 650; text-align: left; transition: background .15s, color .15s;
}
.nav-item::before { display: none; }
.nav-item:hover { color: #fff; background: #1d2a3e; transform: none; }
.nav-item.active { color: #fff; background: #26354c; box-shadow: inset 3px 0 var(--brand-primary); }
.nav-symbol { width: 1.25rem; height: 1.25rem; display: grid; place-items: center; flex: 0 0 auto; color: #8999b0; background: transparent; border-radius: 0; }
.nav-symbol svg { width: 1.2rem; height: 1.2rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.nav-item.active .nav-symbol { color: var(--brand-primary); background: transparent; box-shadow: none; }
.sidebar-footer { margin-top: auto; padding: .75rem .25rem 0; display: grid; gap: .375rem; border-top: 1px solid #263349; background: transparent; }
.sync-status { min-height: 2.75rem; padding: .45rem .5rem; display: grid; grid-template-columns: .5rem minmax(0,1fr); align-items: center; gap: .625rem; color: #c9d2df; }
.sync-status > span { width: .5rem; height: .5rem; border: 0 !important; box-shadow: 0 0 0 3px rgb(18 128 92 / 16%); }
.sync-status strong { display: block; color: #eaf0f7; font-size: .6875rem; }
.sync-status small { display: block; overflow: hidden; color: #8291a8; font-size: .6rem; text-overflow: ellipsis; white-space: nowrap; }
.app-meta-button { min-height: 2.75rem; padding: .5rem; gap: .1rem; color: #8f9db1; border-radius: .625rem; }
.app-meta-button:hover { color: #fff; background: #1d2a3e; }
.app-meta-version { color: #dbe4ef; font-size: .65rem; }
.app-meta-device { color: #8796ac; font-size: .59rem; }
#sidebar-api, #sidebar-build { display: none; }
.profile-card { min-height: 3.5rem; padding: .5rem; display: grid; grid-template-columns: 2.125rem minmax(0,1fr) auto; gap: .625rem; color: #e8eef6; background: #1a2638; border: 1px solid #2c3a50; border-radius: .75rem; }
.profile-card:hover { color: #fff; background: #202e43; }
.profile-card > div { min-width: 0; text-align: left; }
.profile-card strong, .profile-card small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-card strong { color: #fff; font-size: .8125rem; }
.profile-card small { color: #8f9db1; font-size: .65rem; }
.profile-card .avatar { width: 2.125rem; height: 2.125rem; background: var(--brand-primary); color: var(--brand-on-primary); }
.workspace { min-width: 0; min-height: 100dvh; margin-left: var(--sidebar-width); background: var(--canvas); }
.topbar {
  position: sticky; top: 0; z-index: 20; height: 4.5rem; padding: 0 var(--page-gutter);
  display: flex; align-items: center; gap: 1rem;
  color: var(--ink); background: color-mix(in srgb, var(--paper) 94%, transparent);
  border: 0; border-bottom: 1px solid var(--line); box-shadow: none; backdrop-filter: blur(14px);
}
.menu-button { display: none; }
.page-title { min-width: 0; }
.page-title small { display: block; color: var(--muted); font-size: .6875rem; font-weight: 650; }
.page-title h1 { margin: .1rem 0 0; color: var(--ink); font: 800 1.25rem/1.25 "Manrope", sans-serif; letter-spacing: -.02em; }
.topbar-actions { margin-left: auto; min-width: 0; gap: .5rem; }
.role-chip { min-height: 2.75rem; padding: 0 .75rem; color: var(--ink); background: var(--surface-soft); border: 1px solid var(--line); border-radius: .625rem; box-shadow: none; }
.role-dot { background: var(--brand-primary); }
main#app { width: min(100%, var(--content-width)); margin: 0 auto; padding: clamp(1.25rem, 2.5vw, 2.25rem) var(--page-gutter) 4rem; color: var(--ink); }

/* Componentes */
.section-heading { margin: 0 0 1.25rem; display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.section-heading > div { min-width: 0; }
.section-heading h2 { margin: 0; color: var(--ink); font: 800 clamp(1.35rem, 2.4vw, 1.75rem)/1.2 "Manrope", sans-serif; letter-spacing: -.025em; }
.section-heading p { margin: .35rem 0 0; color: var(--muted); font-size: .875rem; }
.heading-actions, .form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.primary-button, .secondary-button, .ghost-button, .danger-button, .icon-button, .filter-button {
  min-height: var(--touch-target); padding: .65rem .9rem;
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  border-radius: var(--radius-control); font-size: .8125rem; font-weight: 750; line-height: 1.2;
  box-shadow: none; transition: transform .12s, background .15s, border-color .15s;
}
.primary-button { color: var(--brand-on-primary); background: var(--brand-primary); border: 1px solid var(--brand-primary); }
.primary-button:hover { color: var(--brand-on-primary); background: var(--brand-primary-strong); border-color: var(--brand-primary-strong); transform: translateY(-1px); }
.secondary-button { color: var(--ink); background: var(--paper); border: 1px solid var(--line-strong); }
.secondary-button:hover, .ghost-button:hover { color: var(--ink); background: var(--surface-soft); border-color: var(--line-strong); }
.ghost-button { color: var(--muted); background: transparent; border: 1px solid transparent; }
.danger-button { color: #a72b28; background: #fff4f3; border: 1px solid #f2c2bf; }
.danger-button:hover { color: #8b211f; background: #ffe9e7; }
.icon-button { width: var(--touch-target); padding: 0; color: var(--ink); background: var(--surface-soft); border: 1px solid var(--line); }
.input-control, .select-control, input:not([type="checkbox"]):not([type="radio"]):not([type="color"]), select, textarea {
  width: 100%; min-width: 0; min-height: var(--touch-target); padding: .65rem .75rem;
  color: var(--ink); background: var(--paper); border: 1px solid var(--line-strong); border-radius: var(--radius-control);
  font-size: 1rem; line-height: 1.35; box-shadow: 0 1px 2px rgb(15 23 42 / 3%);
}
.input-control::placeholder, input::placeholder, textarea::placeholder { color: var(--subtle); opacity: 1; }
.input-control:hover, .select-control:hover, input:hover, select:hover, textarea:hover { border-color: color-mix(in srgb, var(--brand-primary) 42%, var(--line-strong)); }
.input-control:focus, .select-control:focus, input:focus, select:focus, textarea:focus { border-color: var(--brand-primary); outline: 3px solid color-mix(in srgb, var(--brand-primary) 16%, transparent); }
label { color: var(--ink); }
label > small { color: var(--muted); font-weight: 500; }
.panel, .metric-card, .data-panel, .integration-card, .team-card, .access-section, .expenses-section {
  color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-card); box-shadow: var(--shadow-card);
}
.panel { padding: 1.125rem; }
.metric-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: .75rem; }
.metric-card { min-width: 0; min-height: 7rem; padding: 1rem; overflow: hidden; }
.metric-card > div { min-width: 0; display: grid; align-content: start; gap: .3rem; }
.metric-card p { margin: 0; color: var(--muted); font-size: .75rem; font-weight: 650; }
.metric-card strong { display: block; color: var(--ink); font: 800 clamp(1.15rem, 3vw, 1.55rem)/1.2 "Manrope", sans-serif; overflow-wrap: anywhere; }
.metric-card small { display: block; margin-top: auto; color: var(--muted); font-size: .6875rem; line-height: 1.35; }
.badge, .role-badge { min-height: 1.625rem; padding: .25rem .5rem; display: inline-flex; align-items: center; border-radius: 999px; font-size: .6875rem; font-weight: 800; line-height: 1; }
.badge.blue { color: #175a91; background: #e7f3fb; }
.badge.green { color: #08714e; background: #e5f7ef; }
.badge.amber { color: #99520a; background: #fff0d9; }
.badge.red { color: #a72b28; background: #feeceb; }
.badge.violet { color: #5d45b5; background: #f0edff; }
.badge.gray, .role-badge { color: #536174; background: var(--surface-soft); }
.notice-box, .warning-box { margin: 1rem 0; padding: .875rem 1rem; border-radius: .75rem; line-height: 1.45; }
.notice-box { color: #1d557f; background: #edf7fd; border: 1px solid #b9dff4; }
.warning-box { color: #8b3f0b; background: #fff7e8; border: 1px solid #f1d394; }
.empty-state, .operations-empty { min-width: 0; padding: 2.5rem 1.25rem; color: var(--muted); text-align: center; border: 1px dashed var(--line-strong); border-radius: var(--radius-card); background: color-mix(in srgb, var(--paper) 70%, transparent); }
.empty-state h3, .operations-empty strong { color: var(--ink); }

/* Operação: comandas e mesas */
.operations-page, .management-view, .kds-page { width: 100%; min-width: 0; color: var(--ink); }
.operations-page { max-width: none; }
.operations-order-toolbar, .operations-table-toolbar, .promotion-toolbar, .report-filter {
  margin-bottom: 1.25rem; padding: 1rem; display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: .875rem;
  color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-card); box-shadow: none;
}
.operations-order-toolbar label, .operations-table-toolbar label, .management-search { min-width: min(100%, 20rem); display: grid; gap: .4rem; color: var(--ink); font-size: .75rem; font-weight: 750; }
.operations-board-caption { color: var(--muted); font-size: .75rem; }
.order-status-tabs, .status-filter, .promotion-filters { display: flex; gap: .5rem; max-width: 100%; margin: 0 0 1rem; padding: 0 0 .25rem; overflow-x: auto; scrollbar-width: none; }
.order-status-tabs button, .status-filter button, .promotion-filters button {
  min-height: 2.75rem; padding: .55rem .8rem; flex: 0 0 auto;
  color: var(--muted); background: var(--paper); border: 1px solid var(--line); border-radius: .625rem; font-size: .75rem; font-weight: 750;
}
.order-status-tabs button.active, .status-filter button.active, .promotion-filters button.active { color: var(--brand-on-primary); background: var(--brand-primary); border-color: var(--brand-primary); }
.order-grid.operations-order-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: .75rem; align-items: stretch; }
.operation-order-card.panel {
  position: relative; min-width: 0; min-height: 12rem; height: 100%; padding: .9rem;
  display: flex; flex-direction: column; align-items: stretch; gap: .35rem;
  color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-top: 0; border-left: 4px solid var(--stage-color); border-radius: var(--radius-card); box-shadow: var(--shadow-card); text-align: left;
}
.operation-order-card.panel:hover { border-color: color-mix(in srgb, var(--stage-color) 55%, var(--line)); box-shadow: 0 10px 28px rgb(15 23 42 / 10%); transform: translateY(-2px); }
.operation-order-top { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: .4rem; }
.operation-order-label { color: var(--muted); font-size: .625rem; font-weight: 750; text-transform: uppercase; letter-spacing: .04em; }
.operation-order-number { color: var(--ink); font: 800 1.2rem/1.2 "Manrope", sans-serif; }
.operation-order-place { color: var(--ink); font-size: .8125rem; font-weight: 750; }
.operation-order-customer, .operation-order-meta, .operation-order-items { color: var(--muted); font-size: .7rem; line-height: 1.4; overflow-wrap: anywhere; }
.operation-order-meta, .operation-order-items { display: none; }
.operation-order-footer { min-width: 0; margin-top: auto; padding-top: .7rem; display: flex; align-items: end; justify-content: space-between; gap: .5rem; border-top: 1px solid var(--line); }
.operation-order-footer small { display: block; color: var(--muted); font-size: .625rem; }
.operation-order-footer b { display: block; color: var(--ink); font: 800 .95rem/1.2 "Manrope", sans-serif; }
.operation-order-action { display: none; color: var(--brand-primary); font-size: .6875rem; font-weight: 800; }
.tables-grid.operations-tables-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: .625rem; }
.restaurant-table {
  min-width: 0; min-height: 6.4rem; padding: .75rem;
  display: flex; flex-direction: column; align-items: flex-start; gap: .15rem;
  color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: .75rem; box-shadow: none; text-align: left;
}
.restaurant-table:hover { border-color: var(--brand-primary); box-shadow: var(--shadow-card); transform: translateY(-1px); }
.restaurant-table.occupied, .restaurant-table.table-occupied { color: var(--ink); background: color-mix(in srgb, var(--brand-primary) 7%, var(--paper)); border-color: color-mix(in srgb, var(--brand-primary) 45%, var(--line)); }
.operation-table-number { color: var(--ink); font: 800 1rem/1.2 "Manrope", sans-serif; }
.operations-tables-grid .operation-table-number { max-width: 100%; font-size: clamp(.78rem, 3.4vw, 1.05rem); white-space: nowrap; }
.operation-table-status { color: var(--muted); font-size: .625rem; }
.restaurant-table.free .operation-table-status { color: #08714e; }
.restaurant-table.occupied .operation-table-status, .restaurant-table.table-occupied .operation-table-status { color: var(--brand-primary); }
.operation-table-order { display: none; color: var(--muted); font-size: .6875rem; }
.operation-table-footer { margin-top: auto; color: var(--brand-primary); font-size: .65rem; font-weight: 750; }
.operation-table-footer b { color: var(--ink); font-size: .7rem; }
.operations-table-legend { display: flex; flex-wrap: wrap; gap: .75rem; color: var(--muted); font-size: .75rem; }
.operations-section-title { margin: 1.5rem 0 .75rem; display: flex; align-items: end; justify-content: space-between; gap: 1rem; }
.operations-section-title h3 { margin: 0; color: var(--ink); }
.operations-section-title p { margin: .25rem 0 0; color: var(--muted); font-size: .8125rem; }

/* Dados e gestão */
.management-metrics, .executive-metrics { margin-bottom: 1.25rem; }
.data-panel { min-width: 0; padding: 0; overflow: hidden; }
.table-toolbar { margin: 0; padding: 1rem; color: var(--ink); background: var(--paper); border-bottom: 1px solid var(--line); }
.table-scroll { max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; }
.data-table { width: 100%; min-width: 47.5rem; border-collapse: collapse; color: var(--ink); background: var(--paper); }
.data-table th { padding: .75rem 1rem; color: var(--muted); background: var(--surface-soft); border-bottom: 1px solid var(--line); font-size: .6875rem; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; text-align: left; }
.data-table td { padding: .875rem 1rem; color: var(--ink); background: var(--paper); border-bottom: 1px solid var(--line); vertical-align: middle; }
.data-table tbody tr:hover td { background: color-mix(in srgb, var(--brand-primary) 4%, var(--paper)); }
.management-name strong, .management-number { color: var(--ink); }
.management-date, .management-reason { color: var(--muted); }
.team-grid, .printer-grid, .promotion-grid, .device-grid, .expense-grid, .reservation-list, .template-grid { display: grid; grid-template-columns: minmax(0,1fr); gap: .75rem; }
.team-card, .printer-card, .promotion-card, .device-card, .expense-card, .reservation-card, .template-card { color: var(--ink); background: var(--paper); border-color: var(--line); box-shadow: var(--shadow-card); }
.management-person h3, .printer-card h3, .promotion-card h3, .device-card h3, .expense-card h4 { color: var(--ink); }
.management-person p, .printer-destination p, .promotion-card p, .device-facts, .expense-card p { color: var(--muted); }
.integrated-print-status { display: flex; align-items: center; gap: .75rem; margin-bottom: 1rem; padding: .875rem 1rem; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
.integrated-print-status i { width: .75rem; height: .75rem; flex: 0 0 auto; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 .25rem color-mix(in srgb, var(--amber) 14%, transparent); }
.integrated-print-status[data-state="ready"] i { background: var(--green); box-shadow: 0 0 0 .25rem color-mix(in srgb, var(--green) 14%, transparent); }
.integrated-print-status[data-state="error"] i { background: var(--red); box-shadow: 0 0 0 .25rem color-mix(in srgb, var(--red) 14%, transparent); }
.integrated-print-status strong, .integrated-print-status span { display: block; }
.integrated-print-status span { margin-top: .125rem; color: var(--muted); font-size: .8125rem; overflow-wrap: anywhere; }
.integration-logo, .device-symbol, .report-rank-position { color: var(--brand-primary); background: color-mix(in srgb, var(--brand-primary) 10%, var(--paper)); }

/* Caixa: elimina cores fixas conflitantes. */
.cash-view { color: var(--ink); }
.cash-section-nav, .cash-summary-card, .cash-panel, .cash-closing-panel, .cash-history, .cash-history-heading, .cash-history-row, .cash-count-row, .cash-policy-panel, .cash-blind-panel {
  color: var(--ink) !important; background: var(--paper) !important; border-color: var(--line) !important;
}
.cash-section-nav { box-shadow: none; }
.cash-section-nav a { color: var(--muted); }
.cash-section-nav a:hover { color: var(--brand-primary); background: color-mix(in srgb, var(--brand-primary) 8%, var(--paper)); }
.cash-status-card { border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
.cash-status-card.is-open { background: linear-gradient(125deg, #16243a 0%, #203550 58%, color-mix(in srgb, var(--brand-primary) 68%, #203550)); }
.cash-status-card.is-closed { background: linear-gradient(125deg, #263247, #3b485c); }
.cash-summary-card.emphasis { background: color-mix(in srgb, var(--brand-primary) 7%, var(--paper)) !important; border-color: color-mix(in srgb, var(--brand-primary) 34%, var(--line)) !important; }
.cash-summary-card > span, .cash-summary-card > small, .cash-payment-row > div > span, .cash-payment-row > div > small, .cash-panel-note, .cash-ledger > div, .cash-closing-panel p, .cash-history-heading p, .cash-history-primary small, .cash-history-values small, .cash-policy-values small, .cash-movement-row small { color: var(--muted) !important; }
.cash-summary-card > strong, .cash-summary-card.emphasis > strong, .cash-summary-card.emphasis > span, .cash-panel-heading h3, .cash-panel-heading > strong, .cash-payment-row > strong, .cash-ledger > div strong, .cash-closing-panel h3, .cash-history-heading h3, .cash-history-primary strong, .cash-history-values strong, .cash-policy-values strong, .cash-movement-row strong { color: var(--ink) !important; }
.cash-payment-row, .cash-ledger > div, .cash-history-row, .cash-count-row { border-color: var(--line) !important; }
.cash-payment-row > div > i, .financial-bar i { background: var(--surface-soft) !important; }
.cash-consultation, .cash-guidance { color: var(--ink); background: #edf7fd; border-color: #b9dff4; }
.cash-consultation strong, .cash-guidance strong { color: #1d557f; }
.cash-history-values > span, .cash-closing-values > span, .cash-method-icon, .cash-desktop-label { background: var(--surface-soft); border-color: var(--line); }

/* KDS, formulários e diálogos */
.kds-column { color: var(--ink); background: var(--surface-soft); border: 1px solid var(--line); border-radius: var(--radius-card); }
.kds-card { color: var(--ink); background: var(--paper); border-color: var(--line); box-shadow: var(--shadow-card); }
.kds-card h3 { color: var(--ink); }
.kds-card > strong, .kds-card small { color: var(--muted); }
.settings-panel, .branding-form, .report-ranking, .dre-panel, .report-concepts, .qr-preview, .form-stack { color: var(--ink); background: var(--paper); border-color: var(--line); }
.settings-group legend, .admin-section-heading h3, .report-panel-heading h3, .dre-panel h3, .report-ranking h3 { color: var(--ink); }
.modal {
  color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 1rem; box-shadow: 0 28px 80px rgb(15 23 42 / 28%);
}
.modal-head { min-height: 4rem; color: var(--ink); background: var(--paper); border-color: var(--line); }
.modal-head h2 { color: var(--ink); }
.modal-close { width: 2.75rem; height: 2.75rem; color: var(--ink); background: var(--surface-soft); border: 1px solid var(--line); }
.modal-form, .modal-body, .sale-layout, .sale-products, .cart { color: var(--ink); background: var(--paper); }
.cart { border-color: var(--line); }
.cart-item strong { color: var(--ink); }
.cart-item button { color: var(--ink); background: var(--surface-soft); border-color: var(--line); }
.pick-product { color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: .75rem; }
.pick-product:hover { border-color: var(--brand-primary); background: color-mix(in srgb, var(--brand-primary) 5%, var(--paper)); }
.pick-product b { color: var(--brand-primary); }
.overlay { background: rgb(15 23 42 / 52%); backdrop-filter: blur(2px); }
.toast { color: var(--ink); background: var(--paper); border-color: var(--line); box-shadow: var(--shadow-floating); }

/* Login */
.login-screen { min-height: 100dvh; padding: 1rem; background: var(--canvas); }
.login-screen::before { opacity: .16 !important; }
.login-screen::after { background: color-mix(in srgb, var(--canvas) 84%, transparent) !important; }
.login-card { width: min(28rem, 100%); padding: clamp(1.5rem, 5vw, 2.25rem); gap: 1.5rem; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 1rem; box-shadow: 0 24px 70px rgb(15 23 42 / 13%); }
.login-card h1 { color: var(--ink); font-size: 1.65rem; }
.login-card p, .login-help { color: var(--muted); }

/* Tema escuro: as cores de marca são usadas só em ações e detalhes. */
html[data-theme="dark"] {
  --ink: #f1f5f9;
  --muted: #aeb9c9;
  --subtle: #8190a5;
  --line: #334158;
  --line-strong: #44536a;
  --paper: #172235;
  --canvas: #0d1523;
  --surface-soft: #202d42;
  --surface-raised: #1b283c;
  --shadow-card: 0 1px 2px rgb(0 0 0 / 18%), 0 10px 28px rgb(0 0 0 / 12%);
  color-scheme: dark;
}
html[data-theme="dark"] body, html[data-theme="dark"] .workspace, html[data-theme="dark"] main#app { color: var(--ink); background: var(--canvas); }
html[data-theme="dark"] .badge.blue { color: #9ed7ff; background: #183951; }
html[data-theme="dark"] .badge.green { color: #8ee2bf; background: #173c31; }
html[data-theme="dark"] .badge.amber { color: #f6ca82; background: #493319; }
html[data-theme="dark"] .badge.red { color: #ffb4ae; background: #4a2527; }
html[data-theme="dark"] .badge.violet { color: #c9c1ff; background: #332c58; }
html[data-theme="dark"] .badge.gray, html[data-theme="dark"] .role-badge { color: #cbd5e1; background: #29374b; }
html[data-theme="dark"] .notice-box, html[data-theme="dark"] .cash-consultation, html[data-theme="dark"] .cash-guidance { color: #b9dcf4; background: #172f43; border-color: #2d5b78; }
html[data-theme="dark"] .notice-box strong, html[data-theme="dark"] .cash-consultation strong, html[data-theme="dark"] .cash-guidance strong { color: #d5edfc; }
html[data-theme="dark"] .warning-box { color: #f3cf92; background: #3b2d18; border-color: #72552a; }
html[data-theme="dark"] .danger-button { color: #ffb4ae; background: #3e2426; border-color: #764044; }
html[data-theme="dark"] .cash-closing-panel { background: color-mix(in srgb, #c93632 7%, var(--paper)) !important; }
html[data-theme="dark"] .cash-consultation, html[data-theme="dark"] .cash-guidance { color: var(--ink); }
html[data-theme="dark"] .cash-history-values > span, html[data-theme="dark"] .cash-closing-values > span { background: var(--surface-soft); }
html[data-theme="dark"] .restaurant-table.free .operation-table-status { color: #73d9ae; }
html[data-theme="dark"] .restaurant-table.occupied .operation-table-status, html[data-theme="dark"] .restaurant-table.table-occupied .operation-table-status { color: #ffad7f; }

/* Escalas */
@media (min-width: 30rem) {
  .tables-grid.operations-tables-grid { grid-template-columns: repeat(5, minmax(0,1fr)); }
}
@media (min-width: 48rem) {
  .metric-grid { grid-template-columns: repeat(4, minmax(0,1fr)); }
  .order-grid.operations-order-grid { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1rem; }
  .operation-order-card.panel { min-height: 15rem; padding: 1rem; }
  .operation-order-meta, .operation-order-items, .operation-order-action { display: block; }
  .tables-grid.operations-tables-grid { grid-template-columns: repeat(7, minmax(0,1fr)); gap: .75rem; }
  .restaurant-table { min-height: 7.5rem; padding: .875rem; }
  .operation-table-order { display: block; }
  .team-grid, .printer-grid, .device-grid, .expense-grid, .reservation-list, .template-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1rem; }
  .promotion-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .panel { padding: 1.25rem; }
}
@media (min-width: 64rem) {
  #menu-button { display: none !important; }
  .order-grid.operations-order-grid { grid-template-columns: repeat(4, minmax(0,1fr)); }
  .tables-grid.operations-tables-grid { grid-template-columns: repeat(8, minmax(0,1fr)); }
}
@media (min-width: 80rem) {
  .order-grid.operations-order-grid { grid-template-columns: repeat(5, minmax(0,1fr)); }
  .tables-grid.operations-tables-grid { grid-template-columns: repeat(10, minmax(0,1fr)); }
  .team-grid, .printer-grid, .device-grid, .expense-grid, .reservation-list, .template-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .promotion-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width: 56.25rem) {
  .sidebar { transform: translateX(-103%); transition: transform .2s ease; box-shadow: 18px 0 54px rgb(15 23 42 / 24%); }
  .sidebar.open { transform: translateX(0); }
  .workspace { margin-left: 0; }
  .menu-button { display: inline-grid; place-items: center; flex: 0 0 auto; }
  .menu-button::before { content: ""; width: 1.15rem; height: .85rem; background: linear-gradient(var(--ink) 0 0) top/100% 2px no-repeat, linear-gradient(var(--ink) 0 0) center/100% 2px no-repeat, linear-gradient(var(--ink) 0 0) bottom/100% 2px no-repeat; }
}
@media (max-width: 47.99rem) {
  :root { --bottom-nav-height: 4.5rem; }
  .topbar { height: 4rem; padding: 0 1rem; }
  .page-title small { display: none; }
  .page-title h1 { font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .topbar-actions .role-chip, .topbar-actions .search, .topbar-actions .notification, .topbar-actions #new-sale, .topbar-actions .install-button { display: none !important; }
  main#app { padding: 1.125rem 1rem calc(var(--bottom-nav-height) + 2rem + env(safe-area-inset-bottom,0px)); }
  .section-heading { margin-bottom: 1rem; display: grid; grid-template-columns: minmax(0,1fr); }
  .section-heading h2 { font-size: 1.35rem; }
  .section-heading > .primary-button, .section-heading > .secondary-button, .section-heading > .heading-actions { width: 100%; }
  .section-heading .heading-actions { display: grid; grid-template-columns: minmax(0,1fr); }
  .section-heading button, .section-heading a { width: 100%; }
  .operations-order-toolbar, .operations-table-toolbar, .promotion-toolbar, .report-filter { padding: .875rem; }
  .operations-order-toolbar label, .operations-table-toolbar label, .management-search { width: 100%; min-width: 0; }
  .operations-board-caption { width: 100%; }
  .metric-card { min-height: 6.6rem; padding: .875rem; }
  .metric-card strong { font-size: 1.05rem; }
  .mobile-nav {
    position: fixed; z-index: 25; left: 0; right: 0; bottom: 0;
    height: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom,0px)); min-height: var(--bottom-nav-height);
    padding: .35rem .35rem env(safe-area-inset-bottom,0px);
    display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: .1rem;
    color: var(--muted); background: color-mix(in srgb, var(--paper) 96%, transparent); border: 0; border-top: 1px solid var(--line); border-radius: 0; box-shadow: 0 -8px 24px rgb(15 23 42 / 8%); backdrop-filter: blur(14px);
  }
  .mobile-nav button { min-width: 0; min-height: 3.75rem; padding: .35rem .15rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .2rem; color: var(--muted); background: transparent; border: 0; border-radius: .5rem; font-size: .625rem; font-weight: 650; }
  .mobile-nav button svg { width: 1.15rem; height: 1.15rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .mobile-nav button.active { color: var(--brand-primary); background: color-mix(in srgb, var(--brand-primary) 8%, transparent); }
  .modal { left: 0; right: 0; top: auto; bottom: 0; width: 100%; max-width: none; max-height: calc(100dvh - .5rem); border: 0; border-radius: 1rem 1rem 0 0; transform: translateY(1rem); }
  .modal.visible { transform: translateY(0); }
  .modal-head { padding: .6rem 1rem; }
  .modal-form, .modal-body { padding: 1rem; }
  .form-actions { display: grid; grid-template-columns: minmax(0,1fr); }
  .form-actions > * { width: 100%; }
  .data-table { min-width: 0; }
  .management-table thead { display: none; }
  .management-table tbody { display: grid; }
  .management-table tr { display: grid; grid-template-columns: minmax(0,1fr); padding: .75rem 1rem; border-bottom: 1px solid var(--line); }
  .management-table td { padding: .35rem 0; display: grid; grid-template-columns: minmax(5.5rem,.55fr) minmax(0,1fr); gap: .75rem; border: 0; background: transparent !important; }
  .management-table td::before { content: attr(data-label); color: var(--muted); font-size: .6875rem; font-weight: 750; }
  .team-grid, .printer-grid, .promotion-grid, .device-grid, .expense-grid, .reservation-list { grid-template-columns: minmax(0,1fr); }
}
@media (max-width: 22.5rem) {
  main#app { padding-inline: .75rem; }
  .metric-grid { grid-template-columns: minmax(0,1fr); }
  .order-grid.operations-order-grid { gap: .5rem; }
  .operation-order-card.panel { min-height: 11.5rem; padding: .75rem; }
  .operation-order-number { font-size: 1.05rem; }
  .tables-grid.operations-tables-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-height: 31rem) and (orientation: landscape) {
  .topbar { position: relative; }
  main#app { padding-bottom: 1rem; }
  .mobile-nav { display: none; }
  .sidebar { overflow-y: auto; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}