/* Cafeteria ERP — the look of Atlas (owner's request, 2026-10-13: the ERP becomes a module of Atlas and must look
   like part of it). Values copied from Atlas's web/src/estilos/atlas.scss (Bootstrap 5.3 + Sass there; here the same
   colours, radii and type written as variables on top of our Bootstrap 5.0, so no build step is needed).
   Graphite and cyan: a dark side bar in both themes, a grey-blue page (#f3f5f8) or a deep navy one (#121d33), white
   or navy cards with a 1 px border and 12 px corners, Manrope at 15 px, heavy titles and buttons.
   Every colour is a variable: the light values are below, the dark ones under html[data-theme="dark"].
   The theme is chosen in the <head> of base.html (saved choice, or the device's setting) before anything paints, and
   changed in the "Tema" menu of the top bar (shell.js). Django's admin reads the same choice. */

@font-face {
  font-family: "Manrope"; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url("../fonts/manrope-latin-wght-normal.fc03edc2c673.woff2") format("woff2-variations"), url("../fonts/manrope-latin-wght-normal.fc03edc2c673.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("../fonts/ibm-plex-sans-latin-400-italic.2d7ae5a0fa3b.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../fonts/ibm-plex-mono-latin-500-normal.bc5ccab82723.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../fonts/ibm-plex-mono-latin-600-normal.ed616eb04c5f.woff2") format("woff2");
}

:root {
  --side-w-compact: 80px;
  --side-w-open: 272px;
  --radius: .75rem;      /* 12 px: cards, modals */
  --radius-sm: .625rem;  /* 10 px: buttons, fields */
  --radius-xs: .5rem;    /* 8 px: small buttons, menu items */
  --font: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  --bg: #f3f5f8;
  --surface: #ffffff;
  --surface-2: #e7ebf0;
  --hover: #eef2f6;
  --row-hover: #f0f4f8;
  --border: #dde3ea;
  --border-strong: #c9d2dd;
  --text: #0e1726;
  --muted: #5d6b80;
  --primary: #0e7490;          /* accent text: links, active tab, outlined buttons */
  --primary-hover: #0b5d73;
  --primary-soft: #e0f0f4;
  --on-primary: #ffffff;
  --primary-solid: #0e7490;    /* filled buttons and chosen options, the same in both themes (Atlas) */
  --primary-solid-hover: #0b5d73;
  --on-primary-solid: #ffffff;
  --accent: #22d3ee;           /* focus and the current item of the menu */
  --success: #0f8a5f;
  --success-soft: #cfe8df;
  --success-ink: #063726;
  --warning: #b7791f;
  --warning-soft: #f1e4d2;
  --warning-ink: #49300c;
  --danger: #c2410c;
  --danger-soft: #f3d9ce;
  --danger-ink: #4e1a05;
  --danger-solid: #c2410c;
  --on-danger: #ffffff;
  --info: #0e7490;
  --info-soft: #d3f6fc;
  --info-ink: #0e545f;
  --neutral-soft: #e7ebf0;
  --focus: rgba(34, 211, 238, .35);
  --shadow: 0 1px 2px rgba(14, 23, 38, .06);
  --shadow-float: 0 12px 32px rgba(14, 23, 38, .14);
  --overlay: rgba(2, 6, 23, .5);
  /* The side bar is graphite in both themes. */
  --side-bg: #0e1726;
  --side-border: #1c2940;
  --side-text: #c5cedc;
  --side-strong: #e2e8f0;
  --side-muted: #8491a7;
  --side-hover: #15223a;
  --side-active: #17263b;
  --side-open: #1a2942;
  --fly-bg: #111c30;
  --fly-border: #22314d;
  color-scheme: light;
}

/* Dark theme 2026-10-14: ~10 % lighter than Atlas's at the owner's request (each neutral +5 points of lightness). */
html[data-theme="dark"] {
  --bg: #121d33;
  --surface: #18253d;
  --surface-2: #142037;
  --hover: #1d2c4c;
  --row-hover: #1d2c4c;
  --border: #273751;
  --border-strong: #354668;
  --text: #e2e8f0;
  --muted: #8b99b0;
  --primary: #67e8f9;
  --primary-hover: #a5f3fc;
  --primary-soft: #14394e;
  --on-primary: #04222a;
  --success: #6fb99f;
  --success-soft: #0f3f2e;
  --success-ink: #6fb99f;
  --warning: #d4af79;
  --warning-soft: #402d10;
  --warning-ink: #d4af79;
  --danger: #fb923c;
  --danger-soft: #49200a;
  --danger-ink: #fb923c;
  --info: #7ae5f5;
  --info-soft: #0b424c;
  --info-ink: #7ae5f5;
  --neutral-soft: #1d2c4c;
  --shadow: none;
  --shadow-float: 0 12px 32px rgba(0, 0, 0, .45);
  --overlay: rgba(0, 0, 0, .6);
  --side-bg: #0e182e;
  --side-border: #1d2c4c;
  color-scheme: dark;
}

/* ---------- base ---------- */
body {
  background: var(--bg); color: var(--text); font-family: var(--font); font-size: .9375rem; line-height: 1.5;
  font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased;
}
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 { font-weight: 800; letter-spacing: -.01em; }
h1.h3, .h3 { font-size: 1.5rem; }
h2.h5, .h5 { font-size: 1.0625rem; font-weight: 800; }
h2.h6, .h6 { font-weight: 700; }
.font-mono, .num, code, kbd { font-family: var(--font-mono); }
a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--primary-hover); }
main p a:not(.btn), .alert a:not(.btn), .form-text a { text-decoration: underline; text-underline-offset: 2px; }
/* Links inside lists and tables are names, not prose: no underline until pointed at. */
.table a, .list-group a, .breadcrumb a, .card-header a { text-decoration: none; }
.table a:hover, .list-group a:hover, .breadcrumb a:hover { text-decoration: underline; }
hr { background-color: var(--border); border: 0; opacity: 1; }
.text-muted, .form-text, .breadcrumb-item.active, .breadcrumb-item + .breadcrumb-item::before { color: var(--muted) !important; }
.text-dark, .text-body, .text-reset { color: var(--text) !important; }
.text-primary { color: var(--primary) !important; }
.text-success { color: var(--success) !important; }
.text-warning { color: var(--warning) !important; }
.text-danger { color: var(--danger) !important; }
.bg-white, .bg-body { background-color: var(--surface) !important; }
.bg-light { background-color: var(--surface-2) !important; }
.border, .border-top, .border-bottom, .border-start, .border-end { border-color: var(--border) !important; }
::selection { background: var(--primary-soft); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
main > h1:first-child, main > .d-flex:first-child h1 { margin-bottom: .25rem; }
/* The short explanation under a page title: present, but quiet. */
main h1 + p.text-muted, main h1 + .text-muted, main .page-intro { font-size: .875rem; max-width: 72ch; margin-bottom: 1rem; }
.small, small { font-size: .8125rem; }

/* ---------- surfaces (Atlas: .atlas-card) ---------- */
.card, .list-group-item, .action-card, .open-register, .pay-summary, .pos-order {
  background-color: var(--surface); color: var(--text); border-color: var(--border);
}
.card { border-radius: var(--radius); box-shadow: var(--shadow); }
.card-header, .card-footer { background: transparent; border-color: var(--border); font-weight: 700; }
.card-header { padding: .75rem 1rem; font-size: .875rem; }
.list-group-item { border-color: var(--border); }
.list-group-flush > .list-group-item { background: transparent; }
.shadow-sm { box-shadow: var(--shadow) !important; }

/* ---------- tables (Atlas: small text, header on the surface, no stripes) ---------- */
.table {
  --bs-table-bg: transparent; --bs-table-accent-bg: transparent;
  --bs-table-striped-bg: var(--row-hover); --bs-table-hover-bg: var(--row-hover); --bs-table-active-bg: var(--row-hover);
  color: var(--text); border-color: var(--border); margin-bottom: 0; font-size: .875rem;
}
.table > :not(caption) > * > * { color: inherit; border-bottom-color: var(--border); padding: .55rem .75rem; }
.table-sm > :not(caption) > * > * { padding: .35rem .6rem; }
.table > :not(:first-child) { border-top: 1px solid var(--border); }
.table thead th, .table-light th, .table-light td {
  background: var(--surface) !important; color: var(--muted) !important; font-size: .75rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .03em; white-space: nowrap; border-bottom-color: var(--border) !important;
}
.table-hover > tbody > tr:hover > * { color: inherit; }
.table-warning > *, tr.table-warning > * { background: var(--warning-soft) !important; color: var(--text) !important; }
.table-success > *, tr.table-success > * { background: var(--success-soft) !important; color: var(--text) !important; }
/* A table in its own box reads as one panel. */
.table-responsive { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.card .table-responsive, .table-responsive .table-responsive { border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.table-responsive > .table > :last-child > tr:last-child > * { border-bottom: 0; }

/* ---------- forms (Atlas: 10 px corners, cyan focus) ---------- */
.form-control, .form-select {
  background-color: var(--surface); color: var(--text); border-color: var(--border); border-radius: var(--radius-sm);
  padding: .55rem .9rem; font-size: .9375rem;
}
.form-select { padding-right: 2.25rem; }
.form-control-sm, .form-select-sm { padding: .3rem .6rem; font-size: .8125rem; border-radius: var(--radius-xs); }
.form-control-lg, .form-select-lg { padding: .65rem 1rem; font-size: 1.05rem; }
.form-control::placeholder { color: var(--muted); opacity: .8; }
.form-control:focus, .form-select:focus, .form-check-input:focus, .btn:focus {
  border-color: var(--accent); box-shadow: 0 0 0 .2rem var(--focus); background-color: var(--surface); color: var(--text);
}
.form-control:disabled, .form-select:disabled, .form-control[readonly] { background-color: var(--surface-2); color: var(--muted); }
.form-check-input { background-color: var(--surface); border-color: var(--border-strong); }
.form-check-input:checked, .form-check-input[type=checkbox]:indeterminate { background-color: var(--primary-solid); border-color: var(--primary-solid); }
html[data-theme="dark"] .form-select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%238b99b0' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}
html[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator,
html[data-theme="dark"] input[type="datetime-local"]::-webkit-calendar-picker-indicator,
html[data-theme="dark"] input[type="time"]::-webkit-calendar-picker-indicator { filter: invert(.85); }
.form-label { font-weight: 600; font-size: .875rem; margin-bottom: .3rem; }

/* ---------- buttons (Atlas: weight 700, 10 px corners, ~42 px; btn-sm ~30 px) ---------- */
.btn { border-radius: var(--radius-sm); font-weight: 700; padding: .55rem .9rem; font-size: .9375rem; }
.btn-sm { border-radius: var(--radius-xs); padding: .25rem .6rem; font-size: .8125rem; }
.btn-lg { border-radius: var(--radius); padding: .7rem 1.1rem; font-size: 1.05rem; }
.btn .icon { margin-right: .3rem; vertical-align: -.15em; }
.btn-primary, .btn-success {
  background: var(--primary-solid); border-color: var(--primary-solid); color: var(--on-primary-solid);
}
.btn-primary:hover, .btn-success:hover, .btn-primary:focus, .btn-success:focus,
.btn-primary:active, .btn-success:active {
  background: var(--primary-solid-hover); border-color: var(--primary-solid-hover); color: var(--on-primary-solid);
}
.btn-primary:disabled, .btn-success:disabled { background: var(--primary-solid); border-color: var(--primary-solid); color: var(--on-primary-solid); opacity: .45; }
.btn-danger, .btn-danger:hover, .btn-danger:focus, .btn-danger:active, .btn-danger:disabled {
  background: var(--danger-solid); border-color: var(--danger-solid); color: var(--on-danger);
}
.btn-danger:hover { filter: brightness(.93); }
.btn-outline-primary, .btn-outline-success { color: var(--primary); border-color: var(--border-strong); background: var(--surface); }
.btn-outline-primary:hover, .btn-outline-success:hover { background: var(--primary-soft); color: var(--primary); border-color: var(--primary); }
.btn-check:checked + .btn-outline-primary { background: var(--primary-solid); border-color: var(--primary-solid); color: var(--on-primary-solid); }
.btn-outline-secondary, .btn-outline-dark, .btn-light, .btn-secondary {
  color: var(--text); border-color: var(--border); background: var(--surface);
}
.btn-outline-secondary:hover, .btn-outline-dark:hover, .btn-light:hover, .btn-secondary:hover {
  background: var(--hover); color: var(--text); border-color: var(--border-strong);
}
.btn-dark { background: var(--text); border-color: var(--text); color: var(--bg); }
.btn-outline-danger { color: var(--danger); border-color: var(--border); background: var(--surface); }
.btn-outline-danger:hover { background: var(--danger-soft); color: var(--danger); border-color: var(--danger); }
.btn-link { color: var(--primary); text-decoration: none; font-weight: 600; }
.btn-link:hover { color: var(--primary-hover); text-decoration: underline; }
.btn-link.text-danger:hover { color: var(--danger) !important; }

/* ---------- status pills, alerts (Atlas: .mk-selo, compact alerts) ---------- */
.badge { font-weight: 700; font-size: .72rem; border-radius: 999px; padding: .2em .7em; }
.badge.bg-success { background: var(--success-soft) !important; color: var(--success-ink) !important; }
.badge.bg-warning { background: var(--warning-soft) !important; color: var(--warning-ink) !important; }
.badge.bg-danger { background: var(--danger-soft) !important; color: var(--danger-ink) !important; }
.badge.bg-info { background: var(--info-soft) !important; color: var(--info-ink) !important; }
.badge.bg-secondary { background: var(--neutral-soft) !important; color: var(--muted) !important; }
.badge.bg-primary { background: var(--primary-soft) !important; color: var(--primary) !important; }
.badge.bg-light { background: var(--surface-2) !important; color: var(--text) !important; border-color: var(--border) !important; }
.alert { border: 0; border-left: 4px solid; border-radius: var(--radius-sm); padding: .6rem .9rem; font-size: .875rem; }
.alert-success { background: var(--success-soft); color: var(--text); border-left-color: var(--success); }
.alert-warning { background: var(--warning-soft); color: var(--text); border-left-color: var(--warning); }
.alert-danger, .alert-error { background: var(--danger-soft); color: var(--text); border-left-color: var(--danger); }
.alert-info { background: var(--info-soft); color: var(--text); border-left-color: var(--info); }
.alert-light, .alert-secondary { background: var(--surface-2); color: var(--text); border-left-color: var(--border-strong); }
.alert a:not(.btn) { color: inherit; font-weight: 700; }

/* ---------- navigation inside pages ---------- */
.nav-tabs { border-bottom-color: var(--border); gap: .25rem; }
.nav-tabs .nav-link { color: var(--muted); border: 0; border-bottom: 2px solid transparent; border-radius: 0; padding: .55rem .9rem; font-weight: 600; font-size: .875rem; }
.nav-tabs .nav-link:hover { color: var(--text); border-bottom-color: var(--border-strong); }
.nav-tabs .nav-link.active { color: var(--primary); background: transparent; border-bottom-color: var(--primary); font-weight: 700; }
.breadcrumb { font-size: .8125rem; font-weight: 600; margin-bottom: .75rem; }
.page-link { background: var(--surface); border-color: var(--border); color: var(--primary); }
.page-item.active .page-link { background: var(--primary-solid); border-color: var(--primary-solid); color: var(--on-primary-solid); }
.page-item.disabled .page-link { background: var(--surface); border-color: var(--border); color: var(--muted); }
.page-link:hover { background: var(--hover); border-color: var(--border); color: var(--primary-hover); }
.btn-close { filter: none; }
html[data-theme="dark"] .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }
kbd { white-space: nowrap; background: transparent; color: var(--muted); border: 1px solid var(--border); border-radius: 5px; padding: 1px 5px; font-size: .6875rem; box-shadow: none; }

/* ---------- shell: side bar, top bar, content (Atlas: .atlas-sidebar, .atlas-topo, .atlas-conteudo) ---------- */
.app-shell { display: flex; min-height: 100vh; }
.app-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.content { padding: .25rem 2.25rem 1.75rem; }

.sidebar {
  position: sticky; top: 0; align-self: flex-start; z-index: 1040;
  flex: 0 0 var(--side-w-open); width: var(--side-w-open); height: 100vh; height: 100dvh;
  display: flex; flex-direction: column;
  background: var(--side-bg); color: var(--side-text); border-right: 1px solid var(--side-border);
  transition: width 180ms ease, flex-basis 180ms ease;
}
html[data-sidebar="compact"] .sidebar { flex-basis: var(--side-w-compact); width: var(--side-w-compact); }
.side-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[data-sidebar="compact"] .sidebar .side-label, html[data-sidebar="compact"] .sidebar .side-arrow { display: none; }

.side-brand-area { height: 76px; padding: 0 20px; display: flex; align-items: center; flex-shrink: 0; }
html[data-sidebar="compact"] .side-brand-area { padding: 0; justify-content: center; }
.side-brand { display: flex; align-items: center; gap: 12px; min-width: 0; color: #fff; text-decoration: none; }
.side-brand:hover { color: #fff; }
.brand-logo {
  width: 36px; height: 36px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  border-radius: 10px; background: var(--primary-solid); color: #fff;
}
.brand-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.brand-name { font-weight: 800; font-size: 1.125rem; letter-spacing: .08em; color: #fff; }
/* Name of the system (Federico, 2026-10-22): "Atlas" big and "Café & Bistrô" small in italic, in Atlas's cyan. Manrope
   has no italic, so the subtitle is IBM Plex Sans (same family as the Plex Mono). The open bar shows the words; the
   compact bar only the coffee square. */
.wordmark { display: flex; flex-direction: column; line-height: 1; min-width: 0; }
.wordmark-name { font-weight: 700; font-size: 1.75rem; letter-spacing: -.02em; color: #fff; }
.wordmark-sub { font-family: "IBM Plex Sans", "Manrope", system-ui, sans-serif; font-style: italic; font-weight: 400; font-size: .875rem; color: #22d3ee; margin: 3px 0 0 2px; white-space: nowrap; }
.side-brand .wordmark + .brand-logo { display: none; }
html[data-sidebar="compact"] .sidebar .side-brand .wordmark { display: none; }
html[data-sidebar="compact"] .sidebar .side-brand .wordmark + .brand-logo { display: flex; }
.login-brand-side .wordmark-name { font-size: 2.75rem; }
.login-brand-side .wordmark-sub { font-size: 1.125rem; margin-top: 6px; }
.brand-company { font-size: .75rem; color: var(--side-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Language (owner's request, 2026-10-21): PT / ES / EN beside the logo; under it when the bar is compact. */
.side-brand-area .side-brand { flex: 1 1 auto; }
.lang-box { position: relative; flex-shrink: 0; }
.lang-button {
  height: 32px; display: inline-flex; align-items: center; gap: 6px; padding: 0 9px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--fly-border); background: transparent; color: var(--side-strong); font: inherit; font-size: .75rem; font-weight: 800; letter-spacing: .04em;
}
.lang-button:hover, .lang-button[aria-expanded="true"] { background: var(--side-hover); }
.lang-button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.lang-menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 1070; min-width: 190px; padding: 6px; margin: 0;
  background: var(--fly-bg); border: 1px solid var(--fly-border); border-radius: 12px; box-shadow: 0 18px 40px rgba(2, 6, 23, .35);
  display: flex; flex-direction: column; gap: 2px;
}
.lang-menu[hidden] { display: none; }
.lang-menu button {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 38px; padding: 0 10px; border: 0; border-radius: 8px;
  background: transparent; color: #d3dae6; font: inherit; font-size: .875rem; font-weight: 600; text-align: left; cursor: pointer;
}
.lang-menu button:hover, .lang-menu button:focus-visible { background: var(--side-open); color: #fff; }
.lang-menu button[aria-checked="true"] { color: #67e8f9; font-weight: 800; }
.lang-menu .lang-code { width: 24px; font-size: .75rem; font-weight: 800; color: var(--side-muted); }
html[data-sidebar="compact"] .sidebar .side-brand-area { flex-direction: column; gap: 6px; height: auto; min-height: 76px; padding: 10px 0; }
html[data-sidebar="compact"] .sidebar .side-brand { flex: 0 0 auto; }
html[data-sidebar="compact"] .sidebar .lang-button { height: 26px; padding: 0 6px; }
html[data-sidebar="compact"] .sidebar .lang-button .icon { display: none; }
html[data-sidebar="compact"] .sidebar .lang-menu { left: 0; right: auto; }
.login-lang { position: absolute; top: 16px; right: 16px; margin: 0; display: flex; gap: 4px; }
.login-lang button {
  height: 32px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--muted);
  font: inherit; font-size: .75rem; font-weight: 800; letter-spacing: .04em; cursor: pointer;
}
.login-lang button:hover { background: var(--hover); color: var(--text); }
.login-lang button[aria-pressed="true"] { color: var(--primary); border-color: var(--primary); }

.side-nav { flex: 1 1 auto; padding: 8px 12px; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; }
.side-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.side-btn {
  width: 100%; min-height: 44px; border: 0; border-radius: 10px; background: transparent;
  display: flex; align-items: center; gap: 12px; padding: 0 12px;
  color: var(--side-strong); font: inherit; font-size: .875rem; font-weight: 700; text-align: left; cursor: pointer;
  text-decoration: none;
}
.side-btn:hover { background: var(--side-hover); color: var(--side-strong); }
.side-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.side-btn.has-active { color: var(--accent); background: var(--side-active); }
.side-btn[aria-expanded="true"] { background: var(--side-open); }
.side-btn .side-label { flex: 1 1 auto; }
.side-btn .icon { flex-shrink: 0; }
.side-arrow { flex-shrink: 0; color: #6b7890; display: inline-flex; }
html[data-sidebar="compact"] .sidebar .side-btn { justify-content: center; padding: 0; }

/* The screens of a group open beside the bar (Atlas: .atlas-flyout); shell.js places them. */
.nav-sub {
  display: none; position: fixed; z-index: 1060; width: 272px; padding: 8px;
  background: var(--fly-bg); border: 1px solid var(--fly-border); border-radius: 14px;
  box-shadow: 0 18px 40px rgba(2, 6, 23, .35); flex-direction: column; gap: 2px;
}
.nav-group.open > .nav-sub { display: flex; animation: fly-in 120ms ease-out; }
@keyframes fly-in { from { opacity: 0; transform: translateX(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .nav-group.open > .nav-sub { animation: none; } .sidebar { transition: none; } }
.fly-item {
  width: 100%; min-height: 40px; border-radius: 8px; display: flex; align-items: center; gap: 10px; padding: 0 10px;
  color: #d3dae6; font-size: .875rem; font-weight: 500; text-decoration: none;
}
.fly-item .dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; background: #34435c; }
.fly-item:hover, .fly-item:focus-visible { background: var(--side-open); color: #fff; }
.fly-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.fly-item.active { background: var(--side-active); color: #fff; font-weight: 700; }
.fly-item.active .dot { background: var(--accent); box-shadow: 0 0 0 3px rgba(34, 211, 238, .18); }

.side-foot { padding: 12px; border-top: 1px solid var(--side-border); display: flex; flex-direction: column; gap: 8px; }
.user-box { position: relative; }
.side-user {
  width: 100%; border: 0; background: transparent; border-radius: 10px; padding: 6px 8px;
  display: flex; align-items: center; gap: 10px; color: inherit; text-align: left; cursor: pointer;
}
.side-user:hover, .side-user[aria-expanded="true"] { background: var(--side-hover); }
.side-user:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.avatar {
  width: 36px; height: 36px; flex-shrink: 0; border-radius: 10px; background: var(--side-hover); color: #67e8f9;
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .8125rem;
}
.user-text { display: flex; flex-direction: column; min-width: 0; }
.user-name { font-size: .875rem; font-weight: 700; color: #fff; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; }
.user-role { font-size: .75rem; color: var(--side-muted); overflow: hidden; text-overflow: ellipsis; }
html[data-sidebar="compact"] .sidebar .side-user { justify-content: center; padding: 6px 0; }
.user-menu {
  position: absolute; left: 0; bottom: calc(100% + 6px); z-index: 1070; min-width: 220px; padding: 6px;
  background: var(--fly-bg); border: 1px solid var(--fly-border); border-radius: 12px; box-shadow: 0 18px 40px rgba(2, 6, 23, .35);
  display: flex; flex-direction: column; gap: 2px;
}
.user-menu[hidden] { display: none; }
.user-menu a, .user-menu button {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 38px; padding: 0 10px; border: 0; border-radius: 8px;
  background: transparent; color: #d3dae6; font: inherit; font-size: .875rem; font-weight: 600; text-align: left; text-decoration: none; cursor: pointer;
}
.user-menu a:hover, .user-menu button:hover, .user-menu a:focus-visible, .user-menu button:focus-visible { background: var(--side-open); color: #fff; }
.side-logout-form { margin: 0; }
/* "Sair" stays red (owner's request, 2026-10-09). */
.user-menu .side-logout { color: #fb923c; }
.user-menu .side-logout:hover, .user-menu .side-logout:focus-visible { background: #3a1a0c; color: #fdba74; }
.side-collapse {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 40px; padding: 0 12px; border: 0; border-radius: 10px;
  background: transparent; color: var(--side-muted); font: inherit; font-size: .875rem; font-weight: 600; cursor: pointer;
}
.side-collapse:hover { background: var(--side-hover); color: var(--side-strong); }
html[data-sidebar="compact"] .sidebar .side-collapse { justify-content: center; padding: 0; }
html[data-sidebar="compact"] .side-collapse .when-open, html[data-sidebar="open"] .side-collapse .when-compact { display: none; }
.side-collapse .when-open, .side-collapse .when-compact { display: inline-flex; }

/* Top bar: the trail (group › screen) on the left; search and theme on the right. */
.topbar { min-height: 64px; flex-shrink: 0; padding: .6rem 2.25rem; display: flex; align-items: center; gap: 12px; }
.trail { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: .8125rem; font-weight: 600; color: var(--muted); white-space: nowrap; overflow: hidden; }
.trail .trail-current { color: var(--text); font-weight: 700; overflow: hidden; text-overflow: ellipsis; }
.top-tools { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.top-box {
  height: 42px; border-radius: 10px; background: var(--surface); border: 1px solid var(--border); color: var(--text);
  display: inline-flex; align-items: center; gap: 8px; padding: 0 14px; font-size: .875rem; font-weight: 700; margin: 0;
}
.top-box.icon { width: 42px; padding: 0; justify-content: center; cursor: pointer; }
button.top-box:hover { background: var(--hover); }
.only-mobile { display: none !important; }
.theme-box { position: relative; }
html[data-theme="dark"] .theme-icon-light, html:not([data-theme="dark"]) .theme-icon-dark { display: none; }
.theme-icon-light, .theme-icon-dark { display: inline-flex; }
.theme-menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 1070; min-width: 200px; padding: 6px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow-float);
  display: flex; flex-direction: column; gap: 2px;
}
.theme-menu[hidden] { display: none; }
.theme-menu button {
  display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 0 10px; border: 0; border-radius: 8px;
  background: transparent; color: var(--text); font: inherit; font-size: .875rem; font-weight: 600; text-align: left; cursor: pointer;
}
.theme-menu button:hover { background: var(--hover); }
.theme-menu button[aria-checked="true"] { color: var(--primary); font-weight: 700; }

/* Search (Atlas: .atlas-busca): typed in the top bar, results under it; Ctrl K focuses it. */
.top-search { position: relative; width: 320px; margin: 0; }
.top-search label { width: 100%; cursor: text; color: var(--muted); font-weight: 500; }
.top-search input {
  border: 0; outline: 0; background: transparent; font: inherit; font-size: .875rem; color: var(--text); flex: 1 1 auto; min-width: 0;
}
.top-search input::placeholder { color: var(--muted); }
.top-search input::-webkit-search-cancel-button { display: none; }
.top-search label:focus-within { border-color: var(--accent); box-shadow: 0 0 0 .2rem var(--focus); }
.search-results {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 1070; min-width: 340px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-float);
  padding: 6px; max-height: min(70vh, 440px); overflow-y: auto;
}
.search-results[hidden] { display: none; }
.search-group { padding: 6px 10px 2px; font-size: .7rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.search-hit {
  display: flex; flex-direction: column; width: 100%; border-radius: 8px; padding: 8px 10px; color: var(--text); text-decoration: none;
}
.search-hit:hover, .search-hit.marked { background: var(--hover); color: var(--text); }
.search-hit .hit-title { font-weight: 600; font-size: .875rem; }
.search-hit .hit-where { color: var(--muted); font-size: .75rem; }
.search-hit mark { padding: 0; background: transparent; color: var(--primary); font-weight: 800; }
.search-empty { padding: 10px; color: var(--muted); font-size: .875rem; }
.search-page-hit { display: block; padding: .75rem 1rem; border-bottom: 1px solid var(--border); color: var(--text); text-decoration: none; }
.search-page-hit:hover { background: var(--hover); color: var(--text); }
.search-page-hit:last-child { border-bottom: 0; }

.side-backdrop { display: none; }

/* Tablets (768–1199 px): the bar starts compact; open, it floats over the page so the page keeps its width. */
@media (min-width: 768px) and (max-width: 1199.98px) {
  .app-shell { padding-left: var(--side-w-compact); }
  .sidebar { position: fixed; left: 0; top: 0; }
  html[data-sidebar="open"] .sidebar { box-shadow: .5rem 0 1.5rem rgba(0, 0, 0, .3); }
  html[data-sidebar="open"] .side-backdrop { display: block; position: fixed; inset: 0; z-index: 1030; background: var(--overlay); }
}
@media (max-width: 1099.98px) { .top-search { width: 260px; } }

/* Phones: the bar is a drawer and each group opens its screens inside it (Atlas: .atlas-gaveta, .atlas-sublista). */
@media (max-width: 767.98px) {
  .sidebar {
    position: fixed; left: 0; top: 0; width: 300px; flex-basis: 300px;
    transform: translateX(-100%); transition: transform .2s ease;
  }
  html[data-sidebar] .sidebar { width: 300px; flex-basis: 300px; }
  html[data-sidebar="compact"] .sidebar .side-label { display: inline; }
  html[data-sidebar="compact"] .sidebar .side-arrow { display: inline-flex; }
  html[data-sidebar] .sidebar .brand-text, html[data-sidebar] .sidebar .user-text { display: flex; }
  html[data-sidebar] .sidebar .side-brand .wordmark { display: flex; }
  html[data-sidebar] .sidebar .side-brand .wordmark + .brand-logo { display: none; }
  html[data-sidebar="compact"] .sidebar .side-btn { justify-content: flex-start; padding: 0 12px; }
  html[data-sidebar="compact"] .sidebar .side-user { justify-content: flex-start; padding: 6px 8px; }
  html[data-sidebar="compact"] .side-brand-area { padding: 0 20px; justify-content: flex-start; }
  html[data-sidebar="compact"] .sidebar .side-brand-area { flex-direction: row; height: 76px; min-height: 0; padding: 0 20px; }
  html[data-sidebar="compact"] .sidebar .side-brand { flex: 1 1 auto; }
  html[data-sidebar="compact"] .sidebar .lang-button { height: 32px; padding: 0 9px; }
  html[data-sidebar="compact"] .sidebar .lang-button .icon { display: inline-block; }
  html[data-sidebar="compact"] .sidebar .lang-menu { left: auto; right: 0; }
  .side-collapse { display: none; }
  body.side-mobile-open .sidebar { transform: none; }
  body.side-mobile-open .side-backdrop { display: block; position: fixed; inset: 0; z-index: 1030; background: var(--overlay); }
  .nav-sub { position: static; width: auto; padding: 2px 0 6px 18px; background: transparent; border: 0; box-shadow: none; border-radius: 0; }
  .nav-group.open > .nav-sub { animation: none; }
  .nav-group.open .side-arrow { transform: rotate(90deg); }
  .only-mobile { display: inline-flex !important; }
  .topbar { padding: .5rem 1rem; gap: 8px; }
  .content { padding: .25rem 1rem 1rem; }
  .top-search { display: none; }
  .top-search.show-mobile { display: block; position: absolute; left: 1rem; right: 1rem; top: 3.6rem; width: auto; z-index: 1025; }
}
.search-toggle { display: none !important; }
@media (max-width: 767.98px) { .search-toggle { display: inline-flex !important; } }

/* Phones: tabs that do not fit slide sideways instead of wrapping on several lines. */
@media (max-width: 767.98px) {
  .nav-tabs { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .nav-tabs::-webkit-scrollbar { display: none; }
  .nav-tabs .nav-link { white-space: nowrap; }
  h1, .h3 { font-size: 1.3rem; }
  /* 16 px or more: iPhones zoom into smaller fields when they are tapped. */
  .form-control-sm, .form-select-sm, .form-control, .form-select, .top-search input { font-size: 1rem; }
  .pagination { flex-wrap: wrap; }
}

/* Touch screens: bigger targets for fingers. */
@media (pointer: coarse) {
  .btn-sm { padding: .45rem .75rem; }
  .form-check-input { width: 1.35em; height: 1.35em; }
  .form-check-label { padding-left: .2rem; }
  .nav-tabs .nav-link, .page-link { padding: .65rem 1rem; }
  .side-btn, .fly-item { min-height: 48px; }
  .breadcrumb-item a { display: inline-block; padding: .3rem 0; }
}

/* ---------- tables that do not fit become cards (see shell.js): one card per row, "column: value" ---------- */
.table-responsive:has(> .table-stacked) { background: transparent; border: 0; }
.table-stacked thead { display: none; }
.table-stacked, .table-stacked tbody, .table-stacked tfoot, .table-stacked tr { display: block; width: 100%; }
.table-stacked > :not(caption) > * > * { border-bottom-width: 0; box-shadow: none; }
.table-stacked tr { margin-bottom: .6rem; padding: .35rem .75rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.table-stacked tfoot tr { background: var(--surface-2); font-weight: 600; }
.table-stacked td, .table-stacked th {
  display: flex; align-items: baseline; justify-content: space-between; gap: .75rem;
  padding: .35rem 0 !important; text-align: right !important; white-space: normal !important;
  width: auto !important; max-width: none !important;
}
.table-stacked td + td, .table-stacked th + td { border-top: 1px solid var(--border); }
.table-stacked [data-label]::before { content: attr(data-label); flex: 0 0 auto; max-width: 45%; color: var(--muted); font-size: .82rem; font-weight: 600; text-align: left; }
.table-stacked .cell-value { min-width: 0; overflow-wrap: anywhere; }
.table-stacked td:not([data-label]) { justify-content: flex-end; }
.table-stacked tr > :first-child { justify-content: flex-start; text-align: left !important; font-size: 1.02rem; }
.table-stacked tr > :first-child::before { display: none; }
.table-stacked .cell-empty { display: none !important; }
.table-stacked .cell-full { display: block; text-align: center !important; }
.table-stacked td[style*="width"] { width: auto !important; }
.table-stacked .day-bar { min-width: 3rem; }
/* A photo column goes to the corner of the card, and the name after it becomes the card's title. */
.table-stacked td.thumb-col { float: right; padding: .35rem 0 .35rem .75rem !important; border: 0 !important; }
.table-stacked td.thumb-col + td { justify-content: flex-start; text-align: left !important; font-size: 1.02rem; border-top: 0; }
.table-stacked td.thumb-col + td::before { display: none; }
.table-stacked tr::after { content: ""; display: block; clear: both; }

/* ---------- dashboard ---------- */
.stat-card { display: block; height: 100%; padding: 1rem 1.1rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text); text-decoration: none; }
a.stat-card:hover { border-color: var(--primary); color: var(--text); }
.stat-label { color: var(--muted); font-size: .8rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.stat-value { font-size: 1.6rem; font-weight: 700; line-height: 1.2; margin-top: .2rem; }
.stat-note { color: var(--muted); font-size: .85rem; }
.todo-list { list-style: none; margin: 0; padding: 0; }
.todo-list li + li { border-top: 1px solid var(--border); }
.todo-list a { display: flex; justify-content: space-between; align-items: center; gap: .75rem; padding: .7rem 1rem; color: var(--text); text-decoration: none; }
.todo-list a:hover { background: var(--surface-2); }
.todo-dot { width: .55rem; height: .55rem; border-radius: 50%; flex: 0 0 auto; background: var(--warning); }
.todo-dot.danger { background: var(--danger); }
.quick-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.quick-actions .btn { padding: .55rem 1rem; }

.action-card {
  display: block; height: 100%; color: inherit; text-decoration: none;
  border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem 1.1rem; transition: border-color .15s ease;
}
.action-card:hover { color: inherit; border-color: var(--primary); }
.action-card .action-title { font-size: 1rem; font-weight: 600; margin-bottom: .15rem; }
.action-card .action-text { color: var(--muted); margin-bottom: 0; font-size: .9rem; }

.price-up { color: var(--danger); font-weight: 600; }
.price-down { color: var(--success); font-weight: 600; }

/* ---------- catalogue photos ---------- */
.thumb-col { width: 3.5rem; }
.thumb { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border-radius: .5rem; object-fit: cover; background: var(--surface-2); color: var(--muted); font-weight: 600; }
.photo-preview { width: 8rem; height: 8rem; object-fit: cover; border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface); }
.choice-all { padding-bottom: .4rem; margin-bottom: .4rem; border-bottom: 1px solid var(--border); font-weight: 600; }
.choice-box { max-height: 14rem; overflow-y: auto; padding: .5rem .75rem; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface); columns: 2 12rem; }
.choice-box .form-check { break-inside: avoid; }
.day-bar { height: .55rem; min-width: 1px; border-radius: .3rem; background: var(--primary); opacity: .75; }

/* ---------- login (Atlas: .atlas-entrar — a graphite half with a cyan grid, the form on the page colour) ---------- */
.no-sidebar .app-main > .content { padding: 0; }
.login-split { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.login-brand-side {
  background: #0e1726; color: #c5cedc; padding: 3.5rem; display: flex; flex-direction: column; justify-content: space-between; gap: 2rem;
  background-image: linear-gradient(rgba(34, 211, 238, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(34, 211, 238, .06) 1px, transparent 1px);
  background-size: 48px 48px;
}
.login-brand-side .side-brand { gap: 12px; }
.login-brand-side h2 { color: #fff; font-size: 2.25rem; letter-spacing: -.02em; max-width: 16ch; margin-bottom: 1rem; }
.login-brand-side p { color: #aab5c6; max-width: 44ch; }
.login-modules { display: flex; flex-wrap: wrap; gap: 8px; }
.login-modules span { border: 1px solid #22314d; border-radius: 999px; padding: 4px 12px; font-size: .8125rem; color: #d3dae6; }
.login-note { color: #6b7890; font-size: .8125rem; margin: 0; }
.login-form-side { position: relative; display: flex; align-items: center; justify-content: center; padding: 2rem; background: var(--bg); }
.login-form-box { width: 100%; max-width: 400px; }
.field-icon { position: relative; }
.field-icon .icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.field-icon .form-control { padding-left: 40px; }
@media (max-width: 767.98px) {
  .login-split { grid-template-columns: minmax(0, 1fr); }
  .login-brand-side { display: none; }
}

/* ---------- inside the café tab of Atlas (html[data-embed], set in base.html when the page is in a frame) ----------
   Atlas keeps its own side bar, top bar and title (its Sinalização module works the same way), so here the page drops
   ours: the groups become a slim row of buttons whose screens drop down below them, with the search on the right.
   No "Sair" and no theme menu: Atlas has the session and the theme. */
html[data-embed] body { background: var(--surface); }
html[data-embed] .app-shell { flex-direction: column; padding-left: 0; min-height: 100vh; }
html[data-embed] .sidebar {
  position: sticky; top: 0; z-index: 1020; align-self: stretch; transform: none; box-shadow: none;
  width: auto; flex: 0 0 auto; height: auto; flex-direction: row; align-items: center;
  background: var(--surface); color: var(--text); border-right: 0; border-bottom: 1px solid var(--border);
}
html[data-embed] .side-brand-area, html[data-embed] .side-foot, html[data-embed] .side-backdrop,
html[data-embed] .topbar .trail, html[data-embed] .topbar .theme-box, html[data-embed] #side-open { display: none !important; }
html[data-embed] .side-nav { overflow: visible; padding: .35rem .75rem; }
html[data-embed] .side-nav ul { flex-direction: row; flex-wrap: wrap; gap: .2rem; }
html[data-embed] .sidebar .side-btn { width: auto; min-height: 2.4rem; padding: 0 .8rem; gap: 8px; color: var(--text); justify-content: flex-start; }
html[data-embed] .sidebar .side-label { display: inline; }
html[data-embed] .sidebar .side-arrow { display: inline-flex; transform: rotate(90deg); color: var(--muted); }
html[data-embed] .side-btn:hover, html[data-embed] .side-btn[aria-expanded="true"] { background: var(--hover); color: var(--text); }
html[data-embed] .side-btn.has-active { background: var(--primary-soft); color: var(--primary); }
html[data-embed] .nav-group { position: relative; }
html[data-embed] .nav-sub { position: absolute; top: calc(100% + 4px); left: 0; background: var(--surface); border-color: var(--border); box-shadow: var(--shadow-float); }
html[data-embed] .fly-item { color: var(--text); }
html[data-embed] .fly-item:hover, html[data-embed] .fly-item:focus-visible { background: var(--hover); color: var(--text); }
html[data-embed] .fly-item.active { background: var(--primary-soft); color: var(--primary); }
html[data-embed] .topbar { position: absolute; top: .35rem; right: .75rem; min-height: 0; padding: 0; z-index: 1025; }
html[data-embed] .top-search { width: 260px; }
html[data-embed] .search-results { left: auto; right: 0; width: 340px; max-width: calc(100vw - 1.5rem); min-width: 0; }
html[data-embed] .top-box { height: 2.4rem; }
html[data-embed] .content { padding: 1rem 1.25rem 1.5rem; }
@media (min-width: 992px) { html[data-embed] .side-nav { padding-right: calc(260px + 1.5rem); } }
@media (max-width: 991.98px) { html[data-embed] .topbar { display: none; } }

/* In-page confirmation (shell.js, data-confirm): the question next to the button, the button outlined. */
.confirm-note { margin-top: .4rem; padding: .45rem .7rem; border-radius: var(--radius-sm); background: var(--warning-soft); color: var(--text); font-size: .9rem; }
.confirming { box-shadow: 0 0 0 .2rem var(--focus); }

/* Painel: a pending item with its own buttons (e.g. sold-out products with "Disponível"). */
.todo-list li.todo-inline { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; padding: .75rem 1rem; }

/* Printing a report (Relatórios → Imprimir): only the content, no menu and no buttons. */
@media print {
  .sidebar, .topbar, .side-backdrop, .nav-tabs, .no-print, form .btn, .btn { display: none !important; }
  .content { padding: 0 !important; }
  .app-shell { display: block; padding: 0 !important; }
  body { background: #fff; color: #000; }
  .card { break-inside: avoid; border-color: #999; }
}

/* A field with an error: red border too, not only the red text below it. */
.has-error .form-control, .has-error .form-select { border-color: var(--danger); }
.has-error .form-label { color: var(--danger); }
@media print { .count-sheet td, .count-sheet th { padding: .45rem .5rem; } }

/* Bootstrap 5.0 has no fw-semibold (added in 5.1); some screens use it. */
.fw-semibold { font-weight: 600 !important; }
.todo-list .todo-plain { display: flex; justify-content: space-between; align-items: center; gap: .75rem; padding: .7rem 1rem; }

/* "Como imprimir" panel (shell.js) and what the choices do on paper. By default black on white, whatever the theme:
   in dark mode the light text would be almost invisible on paper. */
.print-panel { position: absolute; z-index: 1050; margin-top: .4rem; padding: .8rem 1rem; min-width: 16rem; background: var(--surface); color: var(--text); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .2); }
@media print {
  html:not([data-print-colors="screen"]) {
    --bg: #fff; --surface: #fff; --surface-2: #f2f2f2; --border: #999; --border-strong: #666; --text: #000; --muted: #333;
    --primary: #000; --primary-soft: #eee; --success: #000; --danger: #000; --warning: #000; --info: #000;
    --success-ink: #000; --warning-ink: #000; --danger-ink: #000; --info-ink: #000;
    --success-soft: #eee; --warning-soft: #eee; --danger-soft: #eee; --info-soft: #eee; --neutral-soft: #eee;
    color-scheme: light;
  }
  html:not([data-print-colors="screen"]) body, html:not([data-print-colors="screen"]) .card,
  html:not([data-print-colors="screen"]) .table { background: #fff !important; color: #000 !important; }
  html[data-print-colors="screen"] * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  html[data-print-size="small"] body { font-size: 11px; }
  html[data-print-size="small"] .h3, html[data-print-size="small"] h1 { font-size: 16px; }
  .table-responsive { max-height: none !important; overflow: visible !important; }
  .print-panel { display: none !important; }
}

/* "Sem internet" page: the paper sales sheet has room to write and starts on its own page */
.paper-sales-sheet td { height: 2.2rem; }
@media print { .paper-sales-sheet { break-before: page; } }

/* Station page (Catálogo → Estações): the station stays put and only its options scroll (owner's request, 2026-10-14). */
/* Each option is a box of its own; a saved one marked "Excluir opção" folds to a line with "Desfazer". */
.option-row {
  border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--bg);
  padding: 1rem 1rem 0; margin-bottom: .875rem;
}
.option-row .option-remove, .option-row .option-confirm { display: inline-flex; align-items: center; gap: .375rem; }
.option-error { font-weight: 700; }
.option-removed-note { display: none; }
.option-row.is-removed { padding-bottom: 1rem; border-style: dashed; background: var(--danger-soft); }
.option-row.is-removed .option-fields { display: none; }
.option-row.is-removed .option-removed-note {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; color: var(--danger-ink);
}
/* The products that offer the station, under its fields (owner's request, 2026-10-20). */
.station-products { display: flex; flex-direction: column; gap: .6rem; padding: 1rem; border-top: 1px solid var(--border); min-height: 0; }
.station-products-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem; }
.station-products-list {
  max-height: 50vh; overflow-y: auto; overscroll-behavior: contain; padding: .25rem .75rem;
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg);
}
.station-cat { padding: .35rem 0; border-bottom: 1px solid var(--border); }
.station-cat:last-of-type { border-bottom: 0; }
.station-products-list .form-check { display: flex; align-items: center; gap: .55rem; min-height: 2.25rem; margin: 0; padding-left: 0; }
.station-products-list .form-check-input { float: none; flex: none; margin: 0; }
.station-cat-head { font-weight: 700; }
.station-prod { padding-left: 1.6rem !important; }
@media (min-width: 992px) {
  .station-fixed { position: sticky; top: 1rem; display: flex; flex-direction: column; max-height: calc(100vh - 10rem); }
  .station-main { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
  .station-main > .card-body { flex: none; }
  .station-products { flex: 1 1 auto; }
  .station-products-list { flex: 1 1 auto; max-height: none; min-height: 7rem; }
  .station-scroll { max-height: calc(100vh - 13rem); overflow-y: auto; overscroll-behavior: contain; }
}


/* Comandas (owner's request, 2026-10-14): the search on the list, and the cards to print (8,5 × 5,4 cm, black on white). */
.comanda-search { max-width: 36rem; }
.comanda-cards { display: flex; flex-wrap: wrap; gap: 4mm; }
.comanda-card {
  width: 85mm; height: 54mm; box-sizing: border-box; padding: 3mm 5mm; display: flex; flex-direction: column;
  border: 1px dashed #888; border-radius: 3mm; background: #fff; color: #000; break-inside: avoid; page-break-inside: avoid;
}
.comanda-card-head {
  display: flex; justify-content: space-between; gap: 2mm; font-size: 8pt; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; white-space: nowrap; overflow: hidden;
}
.comanda-card-number { font-size: 34pt; font-weight: 800; line-height: 1; text-align: center; margin: 1mm 0 2mm; }
.comanda-card .barcode { display: block; width: 100%; height: 14mm; }
.comanda-card-code { text-align: center; font-family: var(--font-mono); font-size: 9pt; letter-spacing: .1em; margin-top: 1mm; }
@media print {
  .comanda-print-intro { display: none !important; }
  .comanda-cards { gap: 0; }
  .comanda-card { border-color: #bbb; }
}

/* Painel: the panel that chooses the shortcuts (owner's request, 2026-10-15). */
.shortcuts-dialog {
  width: min(40rem, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); padding: 0; border: 1px solid var(--border); overflow: hidden;
  border-radius: var(--radius); background: var(--surface); color: var(--text); box-shadow: var(--shadow-float);
}
.shortcuts-dialog::backdrop { background: var(--overlay); }
.shortcuts-dialog form { display: flex; flex-direction: column; max-height: calc(100vh - 2rem - 2px); padding: 1rem 1.25rem; }
.shortcuts-dialog-head { display: flex; justify-content: space-between; align-items: center; gap: .75rem; margin-bottom: .5rem; }
.shortcuts-dialog-body {
  overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: .25rem 1.25rem;
  padding-block: .25rem; overscroll-behavior: contain;
}
.shortcuts-dialog fieldset { margin-bottom: .75rem; min-width: 0; }
.shortcuts-dialog legend { font-size: .75rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: .25rem; }
.shortcuts-dialog .form-check { min-height: 2rem; display: flex; align-items: center; gap: .5rem; }
.shortcuts-dialog .form-check { padding-left: 0; }
.shortcuts-dialog .form-check-input { margin: 0; float: none; flex: none; }
.shortcuts-dialog-foot { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; border-top: 1px solid var(--border); padding-top: .75rem; margin-top: .5rem; }

/* "Carga de comandas" (owner's request, 2026-10-17): one tile per comanda, empty / loaded / being charged. */
.seg-switch { display: flex; flex-wrap: wrap; gap: .5rem; }
.cmd-split { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
@media (min-width: 992px) { .cmd-split { grid-template-columns: 1fr 1fr; } }
.cmd-col { min-width: 0; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); padding: .9rem; }
.cmd-col-title { display: flex; align-items: center; gap: .45rem; font-size: 1rem; font-weight: 800; margin-bottom: .75rem; }
.cmd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(4.25rem, 1fr)); gap: .5rem; }
.cmd-tile {
  display: flex; align-items: center; justify-content: center; padding: .55rem .4rem; min-height: 52px;
  font-size: 1.2rem; font-weight: 800; font-variant-numeric: tabular-nums;
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--text);
  text-decoration: none; text-align: center; font-family: inherit; line-height: 1.2; cursor: pointer; width: 100%;
}
.cmd-tile:hover { border-color: var(--primary); color: var(--text); }
.cmd-tile.busy { background: var(--primary-soft); border-color: var(--primary); color: var(--primary); }
.cmd-tile.held { background: var(--warning-soft); border-color: var(--warning); color: var(--warning-ink); }
.cmd-tile.in-range { outline: 3px solid var(--accent); outline-offset: 1px; }
.cmd-mode .btn { min-width: 7rem; }
.cmd-col-title .cmd-dot { flex: none; }
.cmd-dot { display: inline-block; flex: none; width: .8rem; height: .8rem; border-radius: 3px; border: 1px solid var(--border-strong); background: var(--surface); }
.cmd-dot.busy { background: var(--primary-soft); border-color: var(--primary); }
.cmd-dot.held { background: var(--warning-soft); border-color: var(--warning); }


/* "?" next to a field: its short description (owner's request, 2026-10-20; texts in apps/core/instructions.py). */
.help-tip { display: inline-flex; vertical-align: middle; margin-left: .3rem; }
.help-tip-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; width: 1.15rem; height: 1.15rem;
  /* Lime green so it stands out (owner, 2026-10-21); dark text on it reads in both themes. */
  padding: 0; border: 1px solid #65a30d; border-radius: 50%; background: #a3e635; color: #1a2e05;
  font-size: .72rem; font-weight: 800; line-height: 1; cursor: help;
}
.help-tip-btn::after { content: ''; position: absolute; inset: -.55rem; }  /* a bigger target for a finger */
.help-tip-btn:hover, .help-tip-btn:focus-visible, .help-tip-btn[aria-expanded="true"] {
  background: #bef264; border-color: #4d7c0f; color: #1a2e05; outline: none; box-shadow: 0 0 0 3px rgba(163, 230, 53, .35);
}
.help-tip-text {
  position: fixed; z-index: 1080; width: max-content; max-width: min(20rem, calc(100vw - 16px)); padding: .55rem .75rem;
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--text);
  font-size: .85rem; font-weight: 500; line-height: 1.4; text-align: left; text-transform: none; letter-spacing: 0;
  white-space: normal; box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .25);
}
@media print { .help-tip { display: none; } }
/* A field without a label of its own (a placeholder only) with its "?" beside it. */
.tip-row { display: flex; align-items: center; gap: .4rem; margin-bottom: .6rem; }
.tip-row > :not(.help-tip) { flex: 1 1 auto; min-width: 0; margin-bottom: 0 !important; }
.tip-row > .help-tip { margin-left: 0; }

/* Administração → Instruções. */
.instructions-search { max-width: 36rem; }
.instructions-screen .card-header { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem; }
.instructions-list { margin: 0; }
.instructions-list > div { display: grid; grid-template-columns: minmax(9rem, 14rem) minmax(0, 1fr); gap: .25rem 1rem; padding: .6rem 1rem; border-top: 1px solid var(--border); }
.instructions-list > div:first-child { border-top: 0; }
.instructions-list dt { font-weight: 700; }
.instructions-list dd { margin: 0; color: var(--text); }
@media (max-width: 575.98px) { .instructions-list > div { grid-template-columns: minmax(0, 1fr); } }


/* The Painel's cards (owner's requests, 2026-10-21: as Atlas's Painel, then more flexible; static/js/dashboard.js). */
.dash-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: .75rem; }
.dash-toolbar:not(.organizing) .dash-organize-only { display: none; }
.dash-add { border: 2px dashed var(--border-strong); background: transparent; color: var(--muted); font-weight: 600; }
.dash-add:hover { border-color: var(--primary); color: var(--primary); }
.dash-grid { position: relative; min-height: 4rem; --dash-col: 60px; }
.dash-grid:not(.ready) .dash-item { position: static; margin-bottom: .75rem; }  /* until the script draws it */
/* While organizing: a faint line every 2 of the 64 columns, as a guide (one per column would be too dense). */
.dash-grid.organizing:not(.dash-stacked) {
  background-image: linear-gradient(to right, color-mix(in srgb, var(--primary) 9%, transparent) 0 1px, transparent 1px);
  background-size: calc((var(--dash-col) + 12px) * 2) 100%;
}
.dash-item { position: absolute; transition: left .18s ease, top .18s ease, width .18s ease, height .18s ease; }
.dash-item.dragging { transition: none; z-index: 20; }
.dash-item.dragging .dash-card { box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, .35); }
.dash-ghost { position: absolute; z-index: 1; border: 2px dashed var(--primary); border-radius: var(--radius); background: var(--primary-soft);
  display: flex; align-items: flex-end; justify-content: flex-end; padding: .35rem .6rem; font-size: .8rem; font-weight: 700; color: var(--primary);
  transition: left .1s, top .1s, width .1s, height .1s; pointer-events: none; }
body.dash-busy { user-select: none; cursor: grabbing; }
.dash-card {
  position: relative; height: 100%; display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface);
}
.dash-grid.organizing .dash-card { border-style: dashed; border-color: var(--primary); }
.dash-head { height: 36px; flex: none; display: flex; align-items: center; gap: .5rem; padding: 0 .75rem; cursor: pointer; user-select: none; }
.dash-head:hover { background: var(--hover); }
.dash-head:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.dash-grid.organizing .dash-head { cursor: default; }
.dash-grid.organizing:not(.dash-stacked) .dash-card,
.dash-grid.organizing:not(.dash-stacked) .dash-card a,
.dash-grid.organizing:not(.dash-stacked) .dash-head { cursor: grab; touch-action: none; user-select: none; }
.dash-title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; font-size: .92rem; }
.dash-head-action { padding: .1rem .55rem; }
.dash-fold { display: inline-flex; color: var(--muted); transition: transform .15s; }
.dash-item.collapsed .dash-fold { transform: rotate(180deg); }
.dash-grip, .dash-hide, .dash-up, .dash-down { display: none; border: 0; background: transparent; color: var(--muted); padding: 2px; border-radius: 6px; }
.dash-grid.organizing .dash-hide { display: inline-flex; }
.dash-grid.organizing:not(.dash-stacked) .dash-grip { display: inline-flex; cursor: grab; touch-action: none; }
.dash-grid.organizing.dash-stacked .dash-up, .dash-grid.organizing.dash-stacked .dash-down {
  display: inline-flex; min-width: 36px; min-height: 36px; align-items: center; justify-content: center; }
.dash-up:disabled, .dash-down:disabled { opacity: .3; }
.dash-grid.organizing .dash-fold { display: none; }
.dash-hide:hover { color: var(--danger); background: var(--hover); }
.dash-grip:focus-visible, .dash-hide:focus-visible, .dash-up:focus-visible, .dash-down:focus-visible { outline: 2px solid var(--accent); }
.dash-body { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 0 .75rem .75rem; }
.dash-item.collapsed .dash-body { display: none; }
.dash-body .todo-list { margin: 0 -.75rem; }
.dash-stat { display: flex; flex-direction: column; height: 100%; justify-content: center; color: var(--text); text-decoration: none; }
.dash-stat:hover { color: var(--text); }
.dash-stat .stat-value { line-height: 1.15; }
/* A handle on every side and corner to resize (bigger targets than they look); the corner at the bottom right shows. */
.dash-resize { display: none; position: absolute; z-index: 2; touch-action: none; }
.dash-resize-n { top: 0; left: 14px; right: 14px; height: 6px; cursor: ns-resize; }
.dash-resize-s { bottom: 0; left: 14px; right: 14px; height: 10px; cursor: ns-resize; }
.dash-resize-e { right: 0; top: 14px; bottom: 14px; width: 10px; cursor: ew-resize; }
.dash-resize-w { left: 0; top: 14px; bottom: 14px; width: 10px; cursor: ew-resize; }
.dash-resize-ne, .dash-resize-nw, .dash-resize-se, .dash-resize-sw { width: 16px; height: 16px; }
.dash-resize-ne { top: 0; right: 0; cursor: nesw-resize; }
.dash-resize-nw { top: 0; left: 0; cursor: nwse-resize; }
.dash-resize-se { bottom: 0; right: 0; cursor: nwse-resize; }
.dash-resize-sw { bottom: 0; left: 0; cursor: nesw-resize; }
.dash-resize-se::after { content: ''; position: absolute; right: 3px; bottom: 3px; width: 10px; height: 10px;
  border-right: 3px solid var(--primary); border-bottom: 3px solid var(--primary); border-radius: 0 0 4px 0; }
.dash-resize-n:hover, .dash-resize-s:hover, .dash-resize-e:hover, .dash-resize-w:hover { background: var(--primary-soft); }
.dash-grid.organizing:not(.dash-stacked) .dash-resize { display: block; }
.dash-item.collapsed .dash-resize-n, .dash-item.collapsed .dash-resize-s, .dash-item.collapsed .dash-resize-ne,
.dash-item.collapsed .dash-resize-nw, .dash-item.collapsed .dash-resize-se, .dash-item.collapsed .dash-resize-sw { display: none !important; }
.dash-grid.dash-stacked { display: flex; flex-direction: column; gap: .75rem; height: auto !important; background: none; }
.dash-grid.dash-stacked .dash-item { position: static; height: auto !important; width: auto !important; }
.dash-grid.dash-stacked .dash-card { height: auto; }
.dash-grid.dash-stacked .dash-body { overflow: visible; }
.dash-grid.dash-stacked .dash-ghost { display: none; }
.dash-add-list { display: flex; flex-direction: column; gap: .5rem; min-width: min(26rem, 80vw); max-height: 70vh; overflow-y: auto; }
.dash-add-name { min-width: 0; }
/* The extra cards (2026-10-27): rows of a name, a bar and a value; big number with a note below. */
.dash-rows { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .4rem; }
.dash-row { display: grid; grid-template-columns: minmax(0, 8rem) minmax(2rem, 1fr) auto; gap: .5rem; align-items: center; font-size: .875rem; }
.dash-row > :first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-row .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dash-bar { height: .5rem; border-radius: 999px; background: var(--primary-soft); overflow: hidden; }
.dash-bar > span { display: block; height: 100%; border-radius: inherit; background: var(--primary); }
.dash-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .35rem; font-size: .875rem; }
.dash-list li { display: flex; justify-content: space-between; gap: .75rem; min-width: 0; }
.dash-list li > :first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-list .num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.dash-more { display: inline-block; margin-top: .5rem; font-size: .8125rem; }
.dash-add-row { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .5rem .75rem; border: 1px solid var(--border); border-radius: var(--radius-sm); }
@media (prefers-reduced-motion: reduce) { .dash-item, .dash-fold, .dash-ghost { transition: none; } }
@media print { .dash-toolbar { display: none; } .dash-grid.ready .dash-item { position: static; height: auto !important; width: auto !important; margin-bottom: .75rem; } .dash-grid { height: auto !important; background: none !important; } }

/* Termos de uso and Política de privacidade (owner's request, 2026-10-22): a readable column of text. */
.legal-page { max-width: 46rem; line-height: 1.6; }
.legal-head { margin-bottom: 1.25rem; }
.app-shell.no-sidebar .legal-page { margin: 2.5rem auto; }
.legal-page h2 { font-size: 1.125rem; font-weight: 800; margin: 1.75rem 0 .5rem; }
.legal-page h3 { font-size: 1rem; font-weight: 700; margin: 1.1rem 0 .4rem; }
.legal-page ul { padding-left: 1.25rem; }
.legal-page li + li { margin-top: .25rem; }
.login-legal { margin-top: 1.5rem; font-size: .8125rem; color: var(--muted); display: flex; gap: 12px; flex-wrap: wrap; }
.login-legal a { color: var(--muted); }

/* Engenharia de cardápio (2026-10-28): the four groups, by colour. */
.menu-eng { border-left: 4px solid var(--border); }
.menu-eng.menu-eng-estrela { border-left-color: var(--success); }
.menu-eng.menu-eng-burro { border-left-color: var(--warning); }
.menu-eng.menu-eng-enigma { border-left-color: var(--info); }
.menu-eng.menu-eng-cao { border-left-color: var(--danger); }
.menu-eng-badge { font-weight: 700; }
.menu-eng-badge.menu-eng-estrela { background: var(--success-soft); color: var(--success-ink); }
.menu-eng-badge.menu-eng-burro { background: var(--warning-soft); color: var(--warning-ink); }
.menu-eng-badge.menu-eng-enigma { background: var(--info-soft); color: var(--info-ink); }
.menu-eng-badge.menu-eng-cao { background: var(--danger-soft); color: var(--danger-ink); }