/* Identidade configurável, suporte e correções finais de contraste. */
:root {
  --brand-primary: #2176ff;
  --brand-primary-strong: #175cd3;
  --brand-primary-soft: #edf4ff;
  --brand-on-primary: #fff;
  --brand-secondary: #172b4d;
  --brand-accent: #ed3e88;
  --brand-on-accent: #fff;
  color-scheme: light;
}

.primary-button { background: var(--brand-primary); color: var(--brand-on-primary); box-shadow: 0 5px 13px color-mix(in srgb, var(--brand-primary) 24%, transparent); }
.primary-button:hover { background: var(--brand-primary-strong); color: var(--brand-on-primary); }
.nav-item.active { color: var(--brand-primary-strong); background: var(--brand-primary-soft); }
.nav-item.active::before { background: var(--brand-primary); }
.mobile-nav button.active, .operation-order-action, .menu-card strong { color: var(--brand-primary); }
.venue-avatar { background: linear-gradient(145deg, var(--brand-secondary), var(--brand-primary)); }
.avatar { background: linear-gradient(145deg, var(--brand-accent), var(--brand-secondary)); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--brand-primary); }

.app-meta-button {
  width: 100%;
  display: grid;
  gap: .125rem;
  min-height: 2.75rem;
  padding: .5rem .625rem;
  border: 0;
  border-radius: .625rem;
  background: transparent;
  color: var(--muted);
  text-align: left;
}
.app-meta-button:hover { background: var(--canvas); color: var(--ink); }
.app-meta-version { color: var(--ink); font-size: .6875rem; font-weight: 750; }
.app-meta-device { max-width: 100%; font-size: .625rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.login-screen { isolation: isolate; position: relative; background: radial-gradient(circle at 15% 10%, var(--brand-primary-soft), transparent 35%), var(--canvas); }
.login-screen[style]::before { content: ""; position: absolute; inset: 0; z-index: -2; background: var(--login-image) center/cover no-repeat; opacity: .2; }
.login-screen[style]::after { content: ""; position: absolute; inset: 0; z-index: -1; background: color-mix(in srgb, var(--canvas) 82%, transparent); }
.login-card { color: var(--ink); background: var(--paper); border-color: var(--line); }
.login-brand { display: flex; align-items: center; gap: .75rem; min-width: 0; }
.login-brand img { width: 3.5rem; height: 3.5rem; object-fit: contain; border-radius: .875rem; background: #fff; }
.login-brand strong, .login-brand small { display: block; overflow-wrap: anywhere; }
.login-brand strong { font: 800 1.125rem/1.2 var(--font-heading); color: var(--ink); }
.login-brand small { margin-top: .2rem; color: var(--muted); font-size: .75rem; }
.login-device { min-height: 2.75rem; border: 0; border-radius: .625rem; background: transparent; color: var(--muted); font-size: .75rem; text-align: center; }
.login-device:hover { background: var(--canvas); color: var(--ink); }

.appearance-layout { display: grid; gap: var(--space-4); min-width: 0; }
.branding-form { display: grid; gap: var(--space-5); }
.branding-form fieldset { min-width: 0; }
.branding-form small { color: var(--muted); font-weight: 400; line-height: 1.4; }
.brand-assets-help { margin: 0 0 var(--space-3); color: var(--muted); font-size: .8125rem; }
.brand-assets-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); width: 100%; min-width: 0; }
.brand-asset-card { display: grid; grid-template-columns: minmax(0, 1fr); gap: .75rem; min-width: 0; padding: .875rem; border: 1px solid var(--line); border-radius: var(--radius-control); background: var(--canvas); overflow: hidden; }
.brand-asset-visual { position: relative; display: grid; place-items: center; width: 100%; min-width: 0; height: 7.5rem; overflow: hidden; border: 1px dashed var(--line); border-radius: .625rem; background: var(--paper); }
.brand-asset-visual.is-logo img { width: min(72%, 7rem); height: min(72%, 5rem); object-fit: contain; }
.brand-asset-visual.is-login img { width: 100%; height: 100%; object-fit: cover; }
.brand-asset-visual span { color: var(--muted); font-size: .75rem; }
.brand-asset-copy { display: grid; gap: .2rem; min-width: 0; }
.brand-asset-copy strong { color: var(--ink); font-size: .875rem; overflow-wrap: anywhere; }
.brand-asset-copy small { overflow-wrap: anywhere; }
.brand-asset-actions { display: grid; grid-template-columns: minmax(0, 1fr); gap: .5rem; min-width: 0; }
.brand-asset-actions button { width: 100%; min-width: 0; min-height: 2.75rem; white-space: normal; }
.brand-color-grid { clear: both; display: grid; width: 100%; max-width: 100%; gap: var(--space-3); }
.brand-color-grid > label { display: grid; gap: var(--space-2); }
.color-control { display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: var(--space-2); min-width: 0; }
.color-control input[type="color"] { width: 3rem; min-height: var(--touch-target); padding: .2rem; border: 1px solid var(--line); border-radius: var(--radius-control); background: var(--paper); cursor: pointer; }
.brand-contrast { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: var(--space-3); color: var(--muted); font-size: .75rem; }
.brand-contrast span { padding: .375rem .625rem; border-radius: 999px; background: var(--canvas); }
.brand-contrast .contrast-pass { color: #067647; background: #ecfdf3; }
.appearance-previews { display: grid; align-content: start; gap: var(--space-4); }
.brand-preview-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); min-width: 0; }
.brand-preview { --preview-primary: var(--brand-primary); --preview-secondary: var(--brand-secondary); --preview-accent: var(--brand-accent); --preview-on-primary: #fff; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
.brand-preview-sidebar { display: flex; align-items: center; gap: .75rem; padding: 1rem; color: #fff; background: var(--preview-secondary); }
.brand-preview-sidebar strong, .brand-preview-sidebar small { display: block; }
.brand-preview-sidebar small { margin-top: .15rem; color: rgb(255 255 255 / 72%); font-size: .6875rem; }
.brand-preview-logo { width: 2.75rem; height: 2.75rem; display: grid; place-items: center; flex: 0 0 auto; padding: .25rem; border-radius: .75rem; background: #fff; }
.brand-preview-logo img { width: 100%; height: 100%; object-fit: contain; }
.brand-preview-content { padding: 1.25rem; color: #101828; background: #fff; }
.brand-preview[data-preview-theme="dark"] .brand-preview-content { color: #f2f4f7; background: #182230; }
.brand-preview-content > span { color: var(--preview-primary); font-size: .6875rem; font-weight: 800; letter-spacing: .1em; }
.brand-preview-content h3 { margin: .375rem 0; }
.brand-preview-content p { margin: 0 0 1rem; color: #667085; font-size: .8125rem; }
.brand-preview[data-preview-theme="dark"] .brand-preview-content p { color: #b4bfce; }
.brand-preview-content button, .brand-preview-content i { display: inline-flex; align-items: center; min-height: 2.75rem; margin: .25rem .375rem .25rem 0; padding: .625rem .875rem; border-radius: .625rem; font-size: .75rem; font-weight: 700; font-style: normal; }
.brand-preview-content button { border: 0; color: var(--preview-on-primary); background: var(--preview-primary); }
.brand-preview-content i { color: #fff; background: var(--preview-accent); }
.brand-mobile-preview { --preview-primary: var(--brand-primary); --preview-secondary: var(--brand-secondary); width: min(100%, 18rem); min-width: 0; justify-self: center; overflow: hidden; border: .375rem solid #101828; border-radius: 1.25rem; color: #101828; background: #fff; box-shadow: var(--shadow-card); }
.brand-mobile-preview[data-preview-theme="dark"] { color: #f2f4f7; background: #182230; }
.brand-mobile-top { display: flex; align-items: center; gap: .5rem; min-width: 0; padding: .625rem; color: #fff; background: var(--preview-secondary); }
.brand-mobile-top img { width: 2rem; height: 2rem; flex: 0 0 auto; padding: .15rem; border-radius: .5rem; object-fit: contain; background: #fff; }
.brand-mobile-top strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brand-mobile-body { display: grid; gap: .625rem; padding: 1rem; }
.brand-mobile-body small { color: var(--preview-primary); font-weight: 800; letter-spacing: .08em; }
.brand-mobile-body strong { overflow-wrap: anywhere; }
.brand-mobile-body button { min-height: 2.75rem; border: 0; border-radius: .625rem; color: var(--preview-on-primary, #fff); background: var(--preview-primary); font-weight: 750; }
.brand-login-preview { position: relative; display: grid; place-items: center; min-height: 14rem; padding: 1rem; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-card); background: radial-gradient(circle at 15% 10%, var(--brand-primary-soft), transparent 38%), var(--canvas); box-shadow: var(--shadow-card); isolation: isolate; }
.brand-login-background { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; opacity: .26; }
.brand-login-preview::after { content: ""; position: absolute; inset: 0; z-index: -1; background: color-mix(in srgb, var(--canvas) 76%, transparent); }
.brand-login-card { display: grid; justify-items: center; gap: .35rem; width: min(100%, 13rem); min-width: 0; padding: 1rem; border: 1px solid var(--line); border-radius: .875rem; color: var(--ink); background: var(--paper); text-align: center; box-shadow: var(--shadow-card); }
.brand-login-card img { width: 3.25rem; height: 3.25rem; padding: .2rem; border-radius: .75rem; object-fit: contain; background: #fff; }
.brand-login-card strong, .brand-login-card span { max-width: 100%; overflow-wrap: anywhere; }
.brand-login-card small { color: var(--brand-primary); font-size: .625rem; font-weight: 800; letter-spacing: .08em; }
.brand-login-card span { color: var(--muted); font-size: .6875rem; }
.print-brand-preview { display: grid; justify-items: center; gap: .5rem; padding: 1.25rem; color: #111; background: #fff; border: 1px dashed #667085; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; text-align: center; }
.print-brand-preview > span { font-size: .625rem; letter-spacing: .08em; }
.print-brand-preview img { width: 3rem; height: 3rem; object-fit: contain; filter: grayscale(1); }
.print-brand-preview strong { font-size: 1rem; }
.print-brand-preview small, .print-brand-preview p { font-size: .6875rem; }
.print-brand-preview hr { width: 100%; border: 0; border-top: 1px dashed #111; }
.print-brand-preview p { margin: 0; }

.about-brand { display: flex; align-items: center; gap: .875rem; }
.about-brand img { width: 3.5rem; height: 3.5rem; padding: .25rem; object-fit: contain; border: 1px solid var(--line); border-radius: .875rem; background: #fff; }
.about-brand strong, .about-brand small { display: block; }
.about-brand strong { font: 800 1.125rem/1.2 var(--font-heading); }
.about-brand small { margin-top: .25rem; color: var(--muted); }
.about-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .625rem; margin: 0; }
.about-grid > div { min-width: 0; padding: .75rem; border: 1px solid var(--line); border-radius: .625rem; background: var(--canvas); }
.about-grid dt { color: var(--muted); font-size: .6875rem; }
.about-grid dd { margin: .25rem 0 0; color: var(--ink); font-weight: 700; overflow-wrap: anywhere; }
.about-device { grid-column: 1 / -1; }
.about-device dd { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .75rem; }
.about-help { margin: 0; color: var(--muted); font-size: .8125rem; }

html[data-theme="dark"] {
  --ink: #f2f4f7;
  --muted: #b4bfce;
  --subtle: #8f9bad;
  --line: #344054;
  --paper: #182230;
  --canvas: #101828;
  --navy: #f2f4f7;
  --shadow: 0 12px 36px rgb(0 0 0 / 30%);
  --shadow-card: 0 2px 8px rgb(0 0 0 / 18%);
  color-scheme: dark;
}
html[data-theme="dark"] body,
html[data-theme="dark"] .workspace { color: var(--ink); background: var(--canvas); }
html[data-theme="dark"] .sidebar,
html[data-theme="dark"] .topbar,
html[data-theme="dark"] .modal,
html[data-theme="dark"] .drawer,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .metric-card,
html[data-theme="dark"] .data-panel,
html[data-theme="dark"] .operation-order-card.panel,
html[data-theme="dark"] .operations-order-toolbar,
html[data-theme="dark"] .operations-table-toolbar,
html[data-theme="dark"] .restaurant-table,
html[data-theme="dark"] .team-card,
html[data-theme="dark"] .integration-card,
html[data-theme="dark"] .toast { background: var(--paper); color: var(--ink); border-color: var(--line); }
html[data-theme="dark"] .topbar { background: color-mix(in srgb, var(--paper) 92%, transparent); }
html[data-theme="dark"] .input-control,
html[data-theme="dark"] .select-control,
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea,
html[data-theme="dark"] .secondary-button,
html[data-theme="dark"] .ghost-button,
html[data-theme="dark"] .icon-button,
html[data-theme="dark"] .role-chip,
html[data-theme="dark"] .filter-button,
html[data-theme="dark"] .order-status-tabs button { color: var(--ink); background: #202c3c; border-color: var(--line); }
html[data-theme="dark"] .nav-item { color: #c7d0dc; }
html[data-theme="dark"] .nav-item:hover,
html[data-theme="dark"] .profile-card:hover,
html[data-theme="dark"] .app-meta-button:hover { color: #fff; background: #202c3c; }
html[data-theme="dark"] .nav-item.active { color: #fff; background: color-mix(in srgb, var(--brand-primary) 28%, var(--paper)); }
html[data-theme="dark"] .mobile-nav { background: color-mix(in srgb, var(--paper) 96%, transparent); border-color: var(--line); }
html[data-theme="dark"] .modal-head { background: var(--paper); border-color: var(--line); }
html[data-theme="dark"] .data-table th,
html[data-theme="dark"] .operation-items-table th { color: #c7d0dc; background: #202c3c; }
html[data-theme="dark"] .data-table td { border-color: var(--line); }
html[data-theme="dark"] .data-table tbody tr:hover { background: #202c3c; }
html[data-theme="dark"] .kds-column { background: #202c3c; }
html[data-theme="dark"] .kds-card { background: var(--paper); border-color: var(--line); }
html[data-theme="dark"] .operations-tables-grid .restaurant-table.occupied { background: color-mix(in srgb, var(--brand-primary) 18%, var(--paper)); border-color: color-mix(in srgb, var(--brand-primary) 58%, var(--line)); }
html[data-theme="dark"] .operations-tables-grid .restaurant-table.free { background: var(--paper); }
html[data-theme="dark"] .notice-box { color: #d6e4ff; background: #182f52; border-color: #31588d; }
html[data-theme="dark"] .warning-box,
html[data-theme="dark"] .danger-button { color: #ffb4ad; background: #3a1d20; border-color: #7a3434; }
html[data-theme="dark"] .badge.gray { color: #d0d5dd; background: #344054; }
html[data-theme="dark"] .badge.blue { color: #b2ccff; background: #17345e; }
html[data-theme="dark"] .badge.green { color: #8ce9bb; background: #173a2d; }
html[data-theme="dark"] .badge.amber { color: #fedf89; background: #493214; }
html[data-theme="dark"] .badge.red { color: #fecdca; background: #4b2022; }
html[data-theme="dark"] .badge.violet { color: #d9d6fe; background: #322759; }
html[data-theme="dark"] .brand-contrast .contrast-pass { color: #8ce9bb; background: #173a2d; }

@media (min-width: 48rem) {
  .brand-color-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .brand-assets-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .brand-asset-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .brand-preview-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .brand-desktop-preview, .brand-login-preview { grid-column: 1 / -1; }
}
@media (min-width: 64rem) {
  .appearance-layout { grid-template-columns: minmax(0, 1.35fr) minmax(19rem, .65fr); gap: var(--space-6); align-items: start; }
  .branding-form .brand-assets-grid { grid-template-columns: minmax(0, 1fr); }
  .appearance-previews { position: sticky; top: 6.5rem; }
}
@media (min-width: 80rem) {
  .branding-form .brand-assets-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 47.99rem) {
  .about-grid { grid-template-columns: 1fr; }
  .about-device { grid-column: auto; }
  .branding-form .form-actions > * { width: 100%; }
}
@media (max-height: 43rem) and (min-width: 56.25rem) {
  .app-meta-button { padding-block: .25rem; }
  .sidebar-footer .sync-status { padding-block: .25rem; }
}