/* Emunah App Shell — inspirado em CourtFlow, identidade Navy + Gold */

:root {
  --navy: #0C2035;
  --navy-2: #15334D;
  --navy-soft: #31506A;
  --sidebar-bg: #081B2F;
  --sidebar-hover: rgba(255, 255, 255, 0.06);
  --sidebar-active: rgba(42, 193, 139, 0.17);
  --sidebar-active-border: #29C58A;
  --gold: #E8A13A;
  --gold-deep: #B87518;
  --gold-tint: #FFF6E7;
  --paper: #FFFFFF;
  --page-bg: #F5F8FC;
  --ink: #17212B;
  --ink-muted: #697586;
  --ink-faint: #98A2B3;
  --hairline: #E7ECF2;
  --success: #18A86D;
  --success-bg: #E5F8F0;
  --danger: #C62828;
  --danger-bg: #FFEBEE;
  --warning: #E65100;
  --warning-bg: #FFF3E0;
  --info: #4F7FE8;
  --info-bg: #EAF2FF;
  --sidebar-w: 224px;
  --header-h: 64px;
  --radius-sm: 7px;
  --radius-md: 8px;
  --radius-lg: 9px;
  --font-display: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-sans: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--page-bg);
  -webkit-font-smoothing: antialiased;
}

/* ── Shell layout ── */
.shell {
  display: flex;
  min-height: 100vh;
}

.sidebar {
  width: var(--sidebar-w);
  background: var(--sidebar-bg);
  color: rgba(255, 255, 255, 0.85);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 100;
  overflow-y: auto;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  text-decoration: none;
}

.sidebar-brand img {
  height: 38px;
  width: auto;
  max-width: 190px;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 0.98;
  transition: all 0.25s ease;
}

.page-brand-logo {
  height: 40px;
  width: auto;
  max-width: 160px;
  object-fit: contain;
  display: inline-block;
  opacity: 0.9;
  flex-shrink: 0;
  margin: 0;
  transition: transform 0.2s ease;
}

.page-brand-logo:hover {
  transform: scale(1.02);
}

/* Logo padronizada acima do título de cada página */
.page-header-logo {
  height: 28px;
  width: auto;
  max-width: 130px;
  object-fit: contain;
  display: block;
  opacity: 0.85;
  margin-bottom: 6px;
  flex-shrink: 0;
  transition: opacity 0.2s ease;
}

.page-header-logo:hover {
  opacity: 1;
}

.sidebar-brand span {
  font-weight: 700;
  font-size: 15px;
  color: #fff;
  letter-spacing: -0.01em;
}

.sidebar-nav {
  flex: 1;
  padding: 12px 10px;
}

.nav-group-label {
  font-size: 8px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.35);
  padding: 14px 10px 6px;
  margin: 0;
}

.nav-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: var(--radius-sm);
  color: rgba(255, 255, 255, 0.72);
  text-decoration: none;
  font-size: 11px;
  font-weight: 500;
  transition: background 0.15s, color 0.15s;
  margin-bottom: 2px;
  border: 1px solid transparent;
}

.nav-link svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  opacity: 0.75;
}

.nav-link:hover {
  background: var(--sidebar-hover);
  color: #fff;
}

.nav-link.active {
  background: var(--sidebar-active);
  color: #fff;
  border-color: rgba(42, 193, 139, 0.20);
  font-weight: 600;
}

.nav-link.active svg { opacity: 1; }

.sidebar-footer {
  padding: 12px 10px 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.sidebar-user {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.05);
}

.sidebar-user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--navy-2);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
}

.sidebar-user-info {
  flex: 1;
  min-width: 0;
}

.sidebar-user-name {
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.sidebar-user-role {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.45);
}

.sidebar-user-actions {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 2px;
}

.sidebar-logout {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.45);
  cursor: pointer;
  width: 28px;
  height: 28px;
  padding: 5px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s, background 0.15s;
}

.sidebar-logout:hover {
  color: #ff8a80;
  background: rgba(255, 255, 255, 0.06);
}

.sidebar-logout svg { width: 16px; height: 16px; }

/* ── Main area ── */
.shell-main {
  flex: 1;
  margin-left: var(--sidebar-w);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.page-header {
  background: var(--paper);
  border-bottom: 1px solid var(--hairline);
  min-height: var(--header-h);
  padding: 10px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  position: sticky;
  top: 0;
  z-index: 50;
}

.page-header-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

.page-header-left h1 {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 2px;
  letter-spacing: -0.01em;
}

.page-header-left p {
  margin: 0;
  font-size: 13px;
  color: var(--ink-muted);
}

.page-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.page-body {
  padding: 20px 24px 40px;
  flex: 1;
}

/* ── Action buttons (CourtFlow style) ── */
.btn-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  border: 1px solid transparent;
  transition: all 0.15s;
  white-space: nowrap;
  background: var(--paper);
}

.btn-action svg { width: 15px; height: 15px; }

.btn-action--gold {
  color: var(--success);
  border-color: #BCEBD8;
  background: #F4FCF8;
}
.btn-action--gold:hover { border-color: var(--gold); background: #fff8e1; }

.btn-action--navy {
  color: var(--navy);
  border-color: var(--hairline);
}
.btn-action--navy:hover { border-color: var(--navy-soft); background: #fafbfd; }

.btn-action--purple {
  color: #7355D8;
  border-color: #E1D9FF;
  background: #FAF9FF;
}
.btn-action--purple:hover { border-color: #9C27B0; }

.btn-action--green {
  color: var(--success);
  border-color: rgba(46, 125, 50, 0.3);
  background: var(--success-bg);
}
.btn-action--green:hover { border-color: var(--success); }

.btn-action--primary {
  background: var(--navy);
  color: #fff;
  border-color: var(--navy);
}
.btn-action--primary:hover { background: var(--navy-2); }

/* ── Cards & panels ── */
.panel, .card {
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: 16px;
}

.panel h2, .card-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--ink-muted);
  margin: 0 0 16px;
  font-weight: 600;
}

/* ── KPI cards (Dashboard style) ── */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.kpi-card {
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.kpi-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.kpi-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
}

.kpi-icon svg { width: 18px; height: 18px; }

.kpi-icon--gold { background: var(--gold-tint); color: var(--gold-deep); }
.kpi-icon--green { background: var(--success-bg); color: var(--success); }
.kpi-icon--blue { background: var(--info-bg); color: var(--info); }
.kpi-icon--purple { background: #F3E5F5; color: #6A1B9A; }

.kpi-title {
  font-size: 11px;
  color: var(--ink-muted);
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.05em;
}

.kpi-value {
  font-size: 21px;
  font-weight: 700;
  color: var(--navy);
  font-family: var(--font-display);
  line-height: 1.1;
}

.kpi-sub {
  font-size: 12px;
  color: var(--ink-faint);
}

/* ── Filter bar (Bookings style) ── */
.filter-bar {
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: 12px;
  margin-bottom: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
}

.filter-bar .field { margin-bottom: 0; flex: 1; min-width: 140px; }

.filter-search {
  flex: 2;
  min-width: 220px;
}

/* ── Data table (Bookings style) ── */
.data-table-wrap {
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 13px;
}

.data-table th {
  padding: 10px 14px;
  font-weight: 600;
  color: var(--ink-muted);
  border-bottom: 1px solid var(--hairline);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: #FAFBFD;
}

.data-table td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--hairline);
  color: var(--ink);
  vertical-align: middle;
}

.data-table tr:last-child td { border-bottom: none; }

.data-table tr:hover td { background: #FAFBFD; }

.table-member {
  display: flex;
  align-items: center;
  gap: 10px;
}

.table-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
}

.table-member-name {
  font-weight: 600;
  color: var(--navy);
  font-size: 13.5px;
}

.table-member-sub {
  font-size: 11.5px;
  color: var(--ink-muted);
}

/* ── Status pills ── */
.status-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 11.5px;
  font-weight: 600;
}

.status-pill--confirmed { background: var(--success-bg); color: var(--success); }
.status-pill--cancelled { background: var(--danger-bg); color: var(--danger); }
.status-pill--pending { background: var(--warning-bg); color: var(--warning); }
.status-pill--info { background: var(--info-bg); color: var(--info); }

.type-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 11.5px;
  font-weight: 600;
}

.type-pill--premiacao { background: var(--success-bg); color: var(--success); }
.type-pill--comissao { background: #F3E5F5; color: #6A1B9A; }
.type-pill--adiantamento { background: var(--gold-tint); color: var(--gold-deep); }

/* ── Form fields ── */
.field { margin-bottom: 14px; }

.field label {
  display: block;
  font-size: 12.5px;
  color: var(--ink-muted);
  margin-bottom: 5px;
  font-weight: 500;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  padding: 9px 11px;
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--ink);
  background: #FAFBFD;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--navy-soft);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(42, 41, 134, 0.1);
}

/* ── Buttons ── */
.btn {
  background: #20B979;
  color: #fff;
  border: none;
  border-radius: var(--radius-md);
  padding: 11px 16px;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.btn:hover { background: #15965E; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-ghost {
  background: transparent;
  color: var(--navy);
  border: 1px solid var(--navy-soft);
}
.btn-ghost:hover { background: var(--navy-soft); color: #fff; }

.btn-del {
  background: none;
  border: none;
  color: var(--danger);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
}
.btn-del:hover { background: var(--danger-bg); }

/* ── Drawer (Schedule / Create Booking style) ── */
.drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(18, 17, 46, 0.35);
  z-index: 200;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s, visibility 0.25s;
}

.drawer-overlay.open {
  opacity: 1;
  visibility: visible;
}

.drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 400px;
  max-width: 92vw;
  background: var(--paper);
  z-index: 201;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: -4px 0 24px rgba(27, 26, 84, 0.12);
}

.drawer-overlay.open .drawer { transform: translateX(0); }

.drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--hairline);
}

.drawer-head h2 {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  color: var(--navy);
}

.drawer-close {
  background: none;
  border: none;
  font-size: 22px;
  color: var(--ink-muted);
  cursor: pointer;
  padding: 4px;
  line-height: 1;
  border-radius: 6px;
}
.drawer-close:hover { color: var(--danger); background: var(--danger-bg); }

.drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px;
}

.drawer-foot {
  padding: 16px 24px;
  border-top: 1px solid var(--hairline);
  display: flex;
  gap: 10px;
}

.drawer-foot .btn { flex: 1; }

/* ── Tags / chips ── */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #eef2f6;
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--navy);
  border: 1px solid var(--hairline);
}

.chip-remove {
  background: none;
  border: none;
  color: var(--danger);
  font-size: 16px;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}

/* ── Grid layouts ── */
.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.grid-form-preview {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: start;
}

.preview-center {
  display: flex;
  justify-content: center;
  padding: 20px 0;
}

/* ── Pagination ── */
.pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-top: 1px solid var(--hairline);
  font-size: 13px;
  color: var(--ink-muted);
}

.pagination-pages {
  display: flex;
  gap: 4px;
}

.page-btn {
  width: 32px;
  height: 32px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  background: var(--paper);
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.page-btn.active {
  background: var(--navy);
  color: #fff;
  border-color: var(--navy);
}

.page-btn:hover:not(.active) { border-color: var(--navy-soft); }

/* ── Responsive ── */
@media (max-width: 900px) {
  .sidebar {
    transform: translateX(-100%);
    transition: transform 0.25s;
  }
  .sidebar.open { transform: translateX(0); }
  .shell-main { margin-left: 0; }
  .grid-2 { grid-template-columns: 1fr; }
}

@media (min-width: 1100px) {
  .grid-form-preview {
    grid-template-columns: 1fr 1fr;
  }
}

@media print {
  .sidebar, .page-header, .drawer-overlay, .filter-bar { display: none !important; }
  .shell-main { margin-left: 0; }
  .page-body { padding: 0; }
}

/* Gerador de recibos: a página anterior passa a ocupar a mesma casca visual
   das áreas de relatórios e corretores, mantendo seus controles originais. */
.generator-page {
  background: var(--page-bg);
  min-height: 100vh;
  padding: 20px 20px 44px;
  border-radius: 0;
}

.generator-page .app-header {
  max-width: none;
  margin: -20px -20px 20px;
  min-height: var(--header-h);
  padding: 10px 20px;
  background: var(--paper);
  border-bottom: 1px solid var(--hairline);
  align-items: center;
}

.generator-page .app-header { color: var(--ink); font-size: 18px; }
.generator-page .app-header p { font-size: 12px; }
.generator-page .layout { max-width: 100%; gap: 20px; grid-template-columns: 340px minmax(0, 1fr); }
.generator-page .panel { border-radius: var(--radius-lg); box-shadow: 0 1px 2px rgba(12, 32, 53, .02); }
.generator-page .history-toggle {
  gap: 7px;
  min-height: 36px;
  padding: 7px 9px 7px 10px;
  border-color: #DCE5EC;
  border-radius: 8px;
  color: #24425A;
  background: #fff;
  box-shadow: 0 1px 2px rgba(12, 32, 53, .03);
}
.generator-page .history-toggle svg { width: 15px; height: 15px; color: #20B979; flex: 0 0 auto; }
.generator-page .history-toggle .count {
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  color: #168B5B;
  background: #E3F8EF;
  font-size: 10px;
}
.generator-page .history-toggle:hover {
  color: #0C2035;
  border-color: #92DABD;
  background: #F7FDF9;
  box-shadow: 0 4px 12px rgba(32, 185, 121, .12);
  transform: translateY(-1px);
}
.generator-page .history-toggle:active { transform: translateY(0); }
.generator-page .btn-add { border-color: #86DDB9; color: var(--success); background: #F7FDF9; }
.generator-page .btn-ghost { color: var(--navy); border-color: #D6E0EA; }
.generator-page .btn-ghost:hover { background: var(--navy); }
.generator-page .field input,
.generator-page .field select { border-radius: var(--radius-sm); padding: 9px 11px; }
.generator-page .user-profile-badge { display: none !important; }
.generator-page #appHeaderLogo { display: none; }
.generator-page .preview-stage { padding-top: 0; }

/* Interface do gerador: formulário guiado e pré-visualização com hierarquia clara. */
.generator-page .layout {
  align-items: start;
  grid-template-columns: minmax(310px, 350px) minmax(0, 1fr);
}

.generator-page #formPanel {
  position: static;
  max-height: none;
  overflow: visible;
  padding: 18px;
  box-shadow: 0 10px 28px rgba(12, 32, 53, .055);
}

.generator-page .form-panel-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 15px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--hairline);
}

.generator-page .form-panel-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  color: #168B5B;
  background: linear-gradient(135deg, #DCF8EA, #ECFAF3);
}

.generator-page .form-panel-icon svg { width: 19px; height: 19px; }
.generator-page .form-panel-header h2 { margin: 0 0 2px; color: var(--ink); font-size: 13px; letter-spacing: 0; }
.generator-page .form-panel-header p { margin: 0; color: var(--ink-muted); font-size: 11px; }
.generator-page #formPanel > .field { margin-bottom: 13px; }
.generator-page #formPanel .field label { font-size: 11px; font-weight: 600; color: #526170; }
.generator-page #formPanel .field input,
.generator-page #formPanel .field select { min-height: 38px; background: #FBFCFE; }
.generator-page #formPanel .field input:hover,
.generator-page #formPanel .field select:hover { border-color: #B9C9D7; }

.generator-page .items-section-label {
  margin: 19px 0 9px;
  padding-top: 16px;
  border-top: 1px solid var(--hairline);
  color: #526170;
  font-size: 10px;
}

.generator-page .item-card {
  border-radius: 9px;
  border-color: #E4EBF1;
  background: #FBFCFE;
  padding: 12px;
}

.generator-page .item-card-head { margin-bottom: 8px; color: var(--ink); }
.generator-page .item-remove { color: #9A3B3B; background: #fff; border: 1px solid #FECACA; padding: 5px 7px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s ease; }
.generator-page .item-remove:hover { background: #FFF0F0; border-color: #F87171; }
.generator-page .item-remove:disabled { opacity: 0.35; cursor: not-allowed; border-color: #E2E8F0; color: #94A3B8; }
.generator-page .btn-add { margin-bottom: 16px; min-height: 38px; border-radius: 8px; }

.generator-page .receipt-actions { display: flex; align-items: center; gap: 8px; }
.generator-page .receipt-actions--secondary { margin-top: 18px; }
.generator-page .receipt-actions--primary { margin-top: 10px; }
.generator-page .receipt-actions .btn,
.generator-page .receipt-actions .btn-ghost { min-height: 40px; }
.generator-page .receipt-actions .btn-ghost { background: #fff; }
.generator-page .receipt-actions .btn-ghost:hover { background: var(--navy); }
.generator-page .receipt-actions--primary .btn { box-shadow: 0 5px 12px rgba(32, 185, 121, .20); }
.generator-page .approve-badge { background: #E5F8F0; color: #168B5B; border: 1px solid #AEE6CD; border-radius: 20px; white-space: nowrap; }

.generator-page .receipt-preview {
  min-width: 0;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: 14px;
  background: linear-gradient(180deg, #F9FBFD 0%, #F4F7FA 100%);
}

.generator-page .receipt-preview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  padding: 0 2px;
}

.generator-page .receipt-preview-header > div { display: flex; align-items: baseline; gap: 8px; }
.generator-page .receipt-preview-header span { font-size: 12px; font-weight: 700; color: var(--ink); }
.generator-page .receipt-preview-header small { font-size: 10.5px; color: var(--ink-muted); }
.generator-page .preview-live { display: inline-flex; align-items: center; gap: 5px; color: #168B5B !important; font-size: 10.5px !important; }
.generator-page .preview-live i { width: 6px; height: 6px; display: block; border-radius: 50%; background: #20B979; box-shadow: 0 0 0 3px #D9F6E8; }
.generator-page .ticket { box-shadow: 0 10px 28px rgba(12, 32, 53, .09); border-color: #E4EAF0; }

@media (max-width: 900px) {
  .generator-page #formPanel { position: static; max-height: none; overflow: visible; }
  .generator-page .layout { grid-template-columns: 1fr; }
}

@media (max-width: 540px) {
  .generator-page { padding: 14px 12px 30px; }
  .generator-page .app-header { margin: -14px -12px 14px; padding: 12px; }
  .generator-page .receipt-preview { padding: 10px; }
  .generator-page .receipt-preview-header > div { display: block; }
  .generator-page .receipt-preview-header small { display: block; margin-top: 2px; }
}

/* Relatórios: painel analítico compacto, com foco em leitura e comparação. */
.reports-page { width: 100%; max-width: 100%; }
.reports-page .reports-filters { display: grid; grid-template-columns: repeat(6, minmax(120px, 1fr)) auto; gap: 10px; align-items: end; padding: 14px; margin-bottom: 18px; border-radius: 10px; box-shadow: 0 2px 5px rgba(12, 32, 53, .02); }
.reports-page .reports-filter-intro { grid-column: 1 / -1; display: flex; align-items: center; gap: 9px; padding-bottom: 5px; }
.reports-page .reports-filter-intro > div { display: grid; gap: 1px; }
.reports-page .reports-filter-intro strong { color: var(--ink); font-size: 12px; }
.reports-page .reports-filter-intro small { color: var(--ink-muted); font-size: 10.5px; }
.reports-page .reports-filter-icon { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; color: #168B5B; background: #E5F8F0; }
.reports-page .reports-filter-icon svg { width: 15px; height: 15px; }
.reports-page .reports-filters .field { min-width: 0 !important; margin-bottom: 0 !important; }
.reports-page .reports-filters .field label { color: #617080; font-size: 10.5px; font-weight: 600; }
.reports-page .reports-filters .field input,
.reports-page .reports-filters .field select { min-height: 36px; padding: 8px 10px; border-radius: 7px; background: #FBFCFE; font-size: 11.5px; }
.reports-page .reports-filters .btn-back { min-height: 36px; border-color: #DCE5EC; border-radius: 7px; color: #526D82; font-size: 11px; }

.reports-page .kpi-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.reports-page .kpi-card { position: relative; min-height: 126px; gap: 7px; padding: 15px; border-radius: 10px; overflow: hidden; box-shadow: 0 2px 5px rgba(12, 32, 53, .02); }
.reports-page .kpi-card::after { content: ''; position: absolute; inset: auto 0 0; height: 3px; background: #D7E4EC; }
.reports-page .kpi-card:nth-child(1)::after { background: #E8A13A; }
.reports-page .kpi-card:nth-child(2)::after { background: #20B979; }
.reports-page .kpi-card:nth-child(3)::after { background: #4F7FE8; }
.reports-page .kpi-card:nth-child(4)::after { background: #8869E4; }
.reports-page .kpi-title { color: #687888; font-size: 10px; }
.reports-page .kpi-value { color: #17212B; font-size: 22px; letter-spacing: -.025em; }
.reports-page .kpi-sub { margin-top: auto; color: #8996A4; font-size: 10.5px; }
.reports-page .kpi-icon { width: 34px; height: 34px; border-radius: 9px; }

.reports-page .ranking-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.reports-page .ranking-panel, .reports-page .monthly-panel { padding: 0; overflow: hidden; border-radius: 10px; box-shadow: 0 2px 5px rgba(12, 32, 53, .02); }
.reports-page .ranking-panel h2, .reports-page .monthly-panel h2 { margin: 0; padding: 14px 15px; border-bottom: 1px solid var(--hairline); color: #34495D; font-size: 10.5px; }
.reports-page .ranking-panel .data-table { font-size: 11px; }
.reports-page .ranking-panel .data-table th { padding: 9px 10px; background: #FAFCFD; color: #7B8997; font-size: 9px; border-bottom: 1px solid var(--hairline); }
.reports-page .ranking-panel .data-table td { padding: 10px; color: #33485B; font-size: 11px; }
.reports-page .ranking-panel .data-table tr:hover td { background: #F5FBF8; }
.reports-page .monthly-panel { padding-bottom: 8px; }
.reports-page .monthly-panel .evolution-list { padding: 10px 14px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.reports-page .monthly-panel .evo-item { min-height: 64px; display: grid; grid-template-columns: 1fr auto; align-content: center; gap: 3px 10px; padding: 10px; border-radius: 8px; background: #FAFCFD; }
.reports-page .monthly-panel .evo-month { grid-row: span 2; width: auto; color: #33495D; font-size: 11px; }
.reports-page .monthly-panel .evo-sales { color: #168B5B; font-size: 11px; font-weight: 700; }
.reports-page .monthly-panel .evo-lives { color: #8190A0; font-size: 10px; }

@media (max-width: 1180px) {
  .reports-page .reports-filters { grid-template-columns: repeat(3, minmax(150px, 1fr)); }
  .reports-page .ranking-grid { grid-template-columns: 1fr; }
  .reports-page .monthly-panel .evolution-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  .reports-page .reports-filters { grid-template-columns: 1fr 1fr; }
  .reports-page .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .reports-page .monthly-panel .evolution-list { grid-template-columns: 1fr; }
}

@media (max-width: 460px) {
  .reports-page .reports-filters { grid-template-columns: 1fr; }
  .reports-page .kpi-grid { grid-template-columns: 1fr; }
}

/* Histórico: consulta rápida com itens e ações de leitura imediata. */
#historyOverlay { align-items: center; padding: 24px; background: rgba(8, 27, 47, .42); backdrop-filter: blur(5px); }
#historyOverlay .modal-card { max-width: 720px; max-height: min(760px, calc(100vh - 48px)); border: 1px solid #E5ECF2; border-radius: 14px; box-shadow: 0 24px 70px rgba(8, 27, 47, .22); }
#historyOverlay .modal-head { gap: 12px; padding: 18px 20px; background: linear-gradient(180deg, #FFFFFF, #FAFCFD); }
#historyOverlay .history-modal-title { display: flex; align-items: center; gap: 10px; min-width: 0; margin-right: auto; }
#historyOverlay .history-modal-icon { width: 34px; height: 34px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 9px; color: #168B5B; background: #E3F8EF; }
#historyOverlay .history-modal-icon svg { width: 18px; height: 18px; }
#historyOverlay .modal-head h3 { color: var(--ink); font-size: 15px; }
#historyOverlay .modal-head h3::after { content: 'Consulte, edite ou abra seus recibos'; display: block; margin-top: 2px; color: var(--ink-muted); font-size: 10.5px; font-weight: 400; }
#historyOverlay .history-modal-count { padding: 5px 9px; border-radius: 20px; color: #168B5B; background: #EAF9F1; font-size: 10.5px; font-weight: 700; white-space: nowrap; }
#historyOverlay .modal-close { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 7px; }
#historyOverlay .modal-close:hover { background: #FFF1F1; }
#historyOverlay .modal-body { padding: 10px; background: #F8FAFC; }
#historyOverlay .history-item { gap: 16px; margin: 0 0 8px; padding: 14px; border: 1px solid #E7EDF2; border-radius: 10px; background: #fff; transition: border-color .15s, box-shadow .15s, transform .15s; }
#historyOverlay .history-item:last-child { margin-bottom: 0; }
#historyOverlay .history-item:hover { border-color: #B9E5D0; box-shadow: 0 5px 15px rgba(12, 32, 53, .06); transform: translateY(-1px); }
#historyOverlay .history-info { min-width: 0; }
#historyOverlay .history-info .num { color: #708091; font-size: 10.5px; text-transform: uppercase; letter-spacing: .035em; }
#historyOverlay .history-info .name { color: var(--ink); font-size: 13px; line-height: 1.45; }
#historyOverlay .history-info .sub { color: #8794A3; font-size: 11px; }
#historyOverlay .history-actions { gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
#historyOverlay .history-actions button { min-height: 30px; padding: 6px 9px; border-color: #DCE5EC; border-radius: 7px; color: #365068; background: #fff; font-size: 10.5px; }
#historyOverlay .history-actions button:hover { color: #168B5B; border-color: #97DABC; background: #F4FCF8; }
#historyOverlay .history-actions button.danger { color: #C85050; border-color: #F0D7D7; }
#historyOverlay .history-actions button.danger:hover { border-color: #E3AAAA; background: #FFF5F5; }
#historyOverlay .history-empty { padding: 52px 20px; border: 1px dashed #D8E3EA; border-radius: 10px; background: #fff; }
#historyOverlay .modal-foot { padding: 13px 20px; background: #fff; }
#historyOverlay .modal-foot button { color: #A34C4C; font-size: 11.5px; font-weight: 600; }

@media (max-width: 620px) {
  #historyOverlay { padding: 12px; }
  #historyOverlay .modal-head { padding: 14px; }
  #historyOverlay .modal-head h3::after { display: none; }
  #historyOverlay .history-modal-count { display: none; }
  #historyOverlay .history-item { align-items: flex-start; flex-direction: column; }
  #historyOverlay .history-actions { width: 100%; justify-content: flex-start; }
}

/* Recibo: pré-visualização com aparência de documento financeiro contemporâneo. */
.generator-page .ticket {
  position: relative;
  max-width: 650px;
  border: 1px solid #E3EAF0;
  border-radius: 12px;
  box-shadow: 0 14px 34px rgba(12, 32, 53, .10);
}

.generator-page .ticket::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: linear-gradient(90deg, #20B979, #62D2A5 58%, #86A7F3);
}

.generator-page .ticket-head { padding: 27px 28px 17px; }
.generator-page .ticket-head img { height: 32px; filter: saturate(.9) contrast(1.04); }
.generator-page .doc-tag { padding: 6px 10px; border: 1px solid #E3EAF0; border-radius: 8px; background: #FBFCFE; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.generator-page .doc-tag .eyebrow { margin: 0; color: #6C7A89; font-size: 9px; line-height: 1; text-transform: uppercase; font-weight: 600; letter-spacing: 0.5px; }
.generator-page .doc-tag .num { margin: 0; color: #24425A; font-size: 13px; font-weight: 700; line-height: 1; }

.generator-page .ticket-hero {
  margin: 0 16px 12px;
  padding: 8px 16px 10px;
  border: 1px solid #D8F0E3;
  border-radius: 10px;
  background: linear-gradient(135deg, #F0FCF6, #F8FCFE 72%);
  text-align: center;
}
.generator-page .ticket-head { padding: 34px 32px 22px; }
.generator-page .ticket-hero .label { margin: 0 0 2px; color: #168B5B; font-size: 10px; }
.generator-page .ticket-hero .amount { margin: 0 0 2px; color: #147E55; font-size: clamp(20px, 4.5vw, 32px); font-style: normal; letter-spacing: -.035em; max-width: 100%; word-break: break-word; overflow-wrap: anywhere; line-height: 1.2; }
.generator-page .ticket-hero .amount-extenso, .ticket-hero .amount-extenso { margin: 0 0 6px; font-size: 11.5px; color: #51697B; font-style: italic; font-weight: 500; line-height: 1.4; word-break: break-word; overflow-wrap: anywhere; padding: 0 10px; }
.generator-page .ticket-hero .subcount { margin: 0; display: inline-block; padding: 4px 10px; border-radius: 20px; color: #607080; background: rgba(255, 255, 255, .72); font-size: 11px; }

.generator-page .ticket-body { padding: 0 32px; width: 100%; box-sizing: border-box; }
.generator-page .items-table { font-size: 12.5px; width: 100%; table-layout: fixed; border-collapse: collapse; box-sizing: border-box; }
.generator-page .items-table thead th:nth-child(1), .generator-page .items-table tbody td:nth-child(1) { width: 38%; text-align: left; word-break: break-word; overflow-wrap: anywhere; }
.generator-page .items-table thead th:nth-child(2), .generator-page .items-table tbody td:nth-child(2) { width: 26%; text-align: left; word-break: break-word; overflow-wrap: anywhere; }
.generator-page .items-table thead th:nth-child(3), .generator-page .items-table tbody td:nth-child(3) { width: 10%; text-align: center; white-space: nowrap; }
.generator-page .items-table thead th:nth-child(4), .generator-page .items-table tbody td:nth-child(4) { width: 26%; text-align: right; white-space: nowrap; }

.generator-page .items-table th { padding: 11px 10px; color: #728090; background: #F7F9FB; font-size: 10px; box-sizing: border-box; }
.generator-page .items-table th:first-child { border-radius: 7px 0 0 7px; }
.generator-page .items-table th:last-child { border-radius: 0 7px 7px 0; }
.generator-page .items-table td { padding: 12px 10px; border-color: #EDF1F4; box-sizing: border-box; }
.generator-page .items-table tbody tr:last-child td { border-bottom: none; }
.generator-page .items-table td:first-child { font-weight: 600; color: #263846; }
.generator-page .items-table td .sub { color: #8B98A6; font-size: 10.5px; word-break: break-word; overflow-wrap: anywhere; line-height: 1.35; }

.generator-page .items-table tfoot { border-top: 2px solid #CCD9E3; }
.generator-page .items-table tfoot td { border-top: none; border-bottom: none; padding: 14px 10px 6px; box-sizing: border-box; vertical-align: middle; white-space: nowrap; }
.generator-page .items-table tfoot td:first-child { font-weight: 700; color: #24425A; text-transform: uppercase; font-size: 11.5px; letter-spacing: .05em; text-align: left; white-space: nowrap; }
.generator-page .items-table tfoot td:last-child { color: #147E55; font-size: 16px; font-weight: 700; text-align: right; white-space: nowrap; }

.generator-page .ticket-summary, .ticket-summary { margin: 18px 32px 0; padding: 4px 16px; border-radius: 8px; background: #F8FAFC; box-sizing: border-box; width: auto; }
.generator-page .info-row, .info-row { padding: 9px 0; border-bottom: 1px solid #EDF2F7; font-size: 12.5px; display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; box-sizing: border-box; width: 100%; }
.generator-page .info-row:last-child, .info-row:last-child { border-bottom: none; }
.generator-page .info-row .k, .info-row .k { font-weight: 500; color: #7C8A98; flex-shrink: 0; max-width: 35%; word-break: break-word; }
.generator-page .info-row .v, .info-row .v { color: #31495B; font-weight: 600; text-align: right; word-break: break-word; overflow-wrap: anywhere; max-width: 65%; }
.generator-page .perforation { margin-top: 24px; border-color: #D9E3EA; }
.generator-page .ticket-foot, .ticket-foot { padding: 24px 32px 30px; box-sizing: border-box; }
.generator-page .legal, .legal, .ticket-foot .legal { color: #7D8A98; font-family: var(--font-sans); font-size: 12px; font-style: normal; line-height: 1.75; margin: 0 0 24px 0; padding: 0; word-break: break-word; overflow-wrap: break-word; text-align: justify; white-space: pre-line; }
.generator-page .sign-block, .sign-block { margin: 24px auto 20px; gap: 6px; display: flex; flex-direction: column; align-items: center; text-align: center; max-width: 100%; box-sizing: border-box; }
.generator-page .sign-value, .sign-value { font-family: var(--font-display); font-weight: 600; color: #1B1A54; font-size: 14px; text-align: center; max-width: 100%; word-break: break-word; overflow-wrap: anywhere; }
.generator-page .sign-line, .sign-line { border-top: 1px solid #B9C7D2; width: min(270px, 80%); margin-top: 36px; }
.generator-page .sign-caption, .sign-caption { color: #83909D; font-size: 12px; letter-spacing: 0.02em; text-align: center; }
.generator-page .ticket-meta, .ticket-meta { display: flex; justify-content: space-between; align-items: center; gap: 16px; color: #718292; font-size: 11.5px; font-weight: 500; padding-top: 18px; margin-top: 12px; border-top: 1px solid #E7ECF2; word-break: break-word; width: 100%; box-sizing: border-box; }

@media (max-width: 540px) {
  .generator-page .ticket-head { padding: 23px 18px 14px; }
  .generator-page .ticket-hero { margin: 0 18px 12px; padding: 10px 14px; width: auto; }
  .generator-page .ticket-body { padding: 0 18px; }
  .generator-page .ticket-summary { margin: 14px 18px 0; padding: 4px 12px; width: auto; }
  .generator-page .ticket-foot { padding: 16px 18px 20px; }
  .generator-page .ticket-meta { gap: 8px; flex-direction: column; text-align: center; }
}

/* Sidebar collapsed states & transitions */
.sidebar { transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1); overflow-x: hidden; }
.shell-main { transition: margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1); }

.shell.sidebar-collapsed .sidebar { width: 72px; }
.shell.sidebar-collapsed .shell-main { margin-left: 72px; }

.shell.sidebar-collapsed .sidebar-brand span,
.shell.sidebar-collapsed .nav-group-label,
.shell.sidebar-collapsed .nav-link span,
.shell.sidebar-collapsed .sidebar-user-info { display: none; }

.shell.sidebar-collapsed .sidebar-brand { padding: 16px 0; justify-content: center; }
.shell.sidebar-collapsed .sidebar-brand img { height: 28px; max-width: 44px; object-fit: cover; object-position: left center; }
.shell.sidebar-collapsed .sidebar-user { flex-direction: column; padding: 10px 5px; background: transparent; }
.shell.sidebar-collapsed .sidebar-user-actions { flex-direction: column; margin-top: 8px; }
.shell.sidebar-collapsed .nav-link { justify-content: center; padding: 12px 0; }
.shell.sidebar-collapsed .nav-link svg { margin: 0; }

/* Sidebar Toggle Button */
.sidebar-toggle-btn {
  background: none;
  border: none;
  color: var(--navy);
  cursor: pointer;
  padding: 8px;
  margin-right: 14px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s;
}

.sidebar-toggle-btn:hover {
  background: var(--page-bg);
  color: var(--navy-2);
}

.page-header-titles {
  display: flex;
  flex-direction: column;
}

/* Global Shell Tooltip */
.shell-tooltip {
  position: fixed;
  background: var(--navy-2);
  color: #fff;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-50%) translateX(-4px);
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 9999;
  box-shadow: 0 4px 12px rgba(12, 32, 53, 0.2);
}

.shell-tooltip.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%) translateX(0);
}

/* ══════════════════════════════════════════════════════════
   🌙 DARK MODE THEME STYLES (Modo Escuro / Modo Claro)
   ══════════════════════════════════════════════════════════ */

[data-theme="dark"], body.theme-dark {
  --navy: #F0F4F8;
  --navy-2: #E2E8F0;
  --navy-soft: #94A3B8;
  --sidebar-bg: #070F19;
  --sidebar-hover: rgba(255, 255, 255, 0.07);
  --sidebar-active: rgba(41, 197, 138, 0.20);
  --sidebar-active-border: #29C58A;
  --gold: #F59E0B;
  --gold-deep: #FBBF24;
  --gold-tint: #2A2114;
  --paper: #111C2B;
  --page-bg: #0A121E;
  --ink: #F1F5F9;
  --ink-muted: #94A3B8;
  --ink-faint: #64748B;
  --hairline: #1C2B3F;
  --success: #22C55E;
  --success-bg: #112B1E;
  --danger: #EF4444;
  --danger-bg: #351414;
  --warning: #F59E0B;
  --warning-bg: #35250E;
  --info: #3B82F6;
  --info-bg: #132542;
}

[data-theme="dark"] body,
body.theme-dark {
  background-color: var(--page-bg) !important;
  color: var(--ink) !important;
}

[data-theme="dark"] .page-header,
body.theme-dark .page-header {
  background: #0E1826;
  border-color: var(--hairline);
}

[data-theme="dark"] .panel,
body.theme-dark .panel {
  background: var(--paper) !important;
  border-color: var(--hairline) !important;
}

[data-theme="dark"] .field input,
[data-theme="dark"] .field select,
[data-theme="dark"] .field textarea,
body.theme-dark .field input,
body.theme-dark .field select,
body.theme-dark .field textarea {
  background: #172436 !important;
  border-color: #24354D !important;
  color: #F1F5F9 !important;
}

[data-theme="dark"] .field input:focus,
[data-theme="dark"] .field select:focus,
[data-theme="dark"] .field textarea:focus,
body.theme-dark .field input:focus,
body.theme-dark .field select:focus,
body.theme-dark .field textarea:focus {
  background: #1C2D43 !important;
  border-color: var(--gold) !important;
}

[data-theme="dark"] .data-table-wrap,
body.theme-dark .data-table-wrap {
  border-color: var(--hairline);
  background: var(--paper);
}

[data-theme="dark"] .data-table,
body.theme-dark .data-table {
  color: var(--ink);
}

[data-theme="dark"] .data-table th,
body.theme-dark .data-table th {
  background: #0D1724 !important;
  color: var(--ink-muted) !important;
  border-color: var(--hairline) !important;
}

[data-theme="dark"] .data-table td,
body.theme-dark .data-table td {
  border-color: var(--hairline) !important;
  color: var(--ink) !important;
}

[data-theme="dark"] .data-table tr:hover td,
body.theme-dark .data-table tr:hover td {
  background: #162436 !important;
}

[data-theme="dark"] .filter-bar,
body.theme-dark .filter-bar {
  background: var(--paper) !important;
  border-color: var(--hairline) !important;
}

[data-theme="dark"] .btn-action--navy,
body.theme-dark .btn-action--navy {
  background: #18283E !important;
  color: #F1F5F9 !important;
  border: 1px solid #243852 !important;
}
[data-theme="dark"] .btn-action--navy:hover,
body.theme-dark .btn-action--navy:hover {
  background: #203550 !important;
}

[data-theme="dark"] .btn-icon,
[data-theme="dark"] .btn-back,
body.theme-dark .btn-icon,
body.theme-dark .btn-back {
  background: #172436 !important;
  border-color: #24354D !important;
  color: #F1F5F9 !important;
}
[data-theme="dark"] .btn-icon:hover,
[data-theme="dark"] .btn-back:hover,
body.theme-dark .btn-icon:hover,
body.theme-dark .btn-back:hover {
  background: #20334C !important;
  border-color: var(--navy-soft) !important;
}

[data-theme="dark"] .modal-card,
body.theme-dark .modal-card {
  background: #111C2B !important;
  border: 1px solid var(--hairline) !important;
}
[data-theme="dark"] .modal-head,
[data-theme="dark"] .modal-foot,
body.theme-dark .modal-head,
body.theme-dark .modal-foot {
  background: #0D1724 !important;
  border-color: var(--hairline) !important;
}

[data-theme="dark"] .config-chip,
body.theme-dark .config-chip {
  background: #172436 !important;
  border-color: #24354D !important;
  color: #F1F5F9 !important;
}

[data-theme="dark"] .config-chip:hover,
body.theme-dark .config-chip:hover {
  background: #1E2F46 !important;
  border-color: var(--navy-soft) !important;
}

[data-theme="dark"] .tabs-nav,
body.theme-dark .tabs-nav {
  border-color: var(--hairline) !important;
}
[data-theme="dark"] .tab-btn.active,
body.theme-dark .tab-btn.active {
  background: #111C2B !important;
  color: #F1F5F9 !important;
}

[data-theme="dark"] .generator-page .receipt-preview,
body.theme-dark .generator-page .receipt-preview {
  background: linear-gradient(180deg, #111C2B 0%, #0D1623 100%) !important;
  border-color: var(--hairline) !important;
}

[data-theme="dark"] .generator-page .item-card,
body.theme-dark .generator-page .item-card {
  background: #172436 !important;
  border-color: #24354D !important;
}

[data-theme="dark"] .sidebar-toggle-btn,
body.theme-dark .sidebar-toggle-btn {
  color: #F1F5F9 !important;
}
[data-theme="dark"] .sidebar-toggle-btn:hover,
body.theme-dark .sidebar-toggle-btn:hover {
  background: #18283E !important;
}

[data-theme="dark"] .kpi-card,
body.theme-dark .kpi-card {
  background: #111C2B !important;
  border-color: var(--hairline) !important;
}

[data-theme="dark"] .kpi-value,
body.theme-dark .kpi-value {
  color: #F1F5F9 !important;
}

[data-theme="dark"] .ranking-panel,
[data-theme="dark"] .monthly-panel,
body.theme-dark .ranking-panel,
body.theme-dark .monthly-panel {
  background: #111C2B !important;
  border-color: var(--hairline) !important;
}

[data-theme="dark"] .ranking-panel h2,
[data-theme="dark"] .monthly-panel h2,
body.theme-dark .ranking-panel h2,
body.theme-dark .monthly-panel h2 {
  color: #E2E8F0 !important;
  border-color: var(--hairline) !important;
}

[data-theme="dark"] .monthly-panel .evo-item,
body.theme-dark .monthly-panel .evo-item {
  background: #172436 !important;
}

[data-theme="dark"] .history-toggle,
body.theme-dark .history-toggle {
  background: #172436 !important;
  border-color: #24354D !important;
  color: #F1F5F9 !important;
}

/* ==========================================================================
   📱 RESPONSIVIDADE (TABLET & MOBILE)
   ========================================================================== */

/* Backdrop overlay para drawer mobile */
.sidebar-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(8, 27, 47, 0.65);
  backdrop-filter: blur(3px);
  z-index: 99;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.shell.sidebar-mobile-open .sidebar-backdrop {
  opacity: 1;
  pointer-events: auto;
}

/* 💻 TABLETS (<= 992px) */
@media (max-width: 992px) {
  .sidebar {
    transform: translateX(-100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    width: 260px;
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.25);
    z-index: 1000;
  }

  .shell.sidebar-mobile-open .sidebar {
    transform: translateX(0);
  }

  .shell-main {
    margin-left: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .page-header {
    padding: 12px 16px;
    gap: 12px;
  }

  .page-header-left {
    flex: 1;
    min-width: 0;
  }

  .page-header-titles h1 {
    font-size: 17px;
  }

  .page-header-titles p {
    font-size: 12px;
  }

  .page-header-actions {
    width: auto;
    justify-content: flex-end;
    gap: 8px;
  }

  .page-body {
    padding: 16px 14px 40px;
  }

  /* Grid KPIs */
  .kpi-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  /* Split Layouts (Gerador de Recibos) */
  .layout,
  .generator-page .layout {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  .generator-page .receipt-preview {
    position: static !important;
    top: auto !important;
  }

  /* Grid Gráficos / Rankings */
  .split-grid,
  .reports-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .form-grid-3 {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .data-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
  }

  .data-table {
    min-width: 600px;
  }
}

/* 📱 SMARTPHONES (<= 768px) */
@media (max-width: 768px) {
  .app {
    padding: 12px 8px 48px;
  }

  .page-header {
    flex-direction: column;
    align-items: stretch;
    padding: 12px 14px;
    gap: 10px;
  }

  .page-header-left {
    width: 100%;
  }

  .page-header-actions {
    width: 100%;
    justify-content: flex-start;
    overflow-x: auto;
    padding-bottom: 2px;
    -webkit-overflow-scrolling: touch;
  }

  .btn-action {
    padding: 8px 12px;
    font-size: 11.5px;
    flex-shrink: 0;
  }

  .page-body {
    padding: 12px 10px 48px;
  }

  .panel, .card {
    padding: 16px 14px;
    border-radius: 12px;
  }

  /* KPI Grid */
  .kpi-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .kpi-card {
    padding: 14px;
  }

  .kpi-value {
    font-size: 20px;
  }

  /* Filter Bars */
  .filter-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 12px;
  }

  .filter-bar .field,
  .filter-bar .filter-search {
    width: 100%;
    min-width: 0;
    flex: none;
  }

  /* Forms */
  .form-grid-3,
  .form-grid-2,
  .row2 {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .field input,
  .field select,
  .field textarea {
    font-size: 14px;
    padding: 10px 12px;
  }

  .btn-submit,
  .btn-primary,
  .btn {
    width: 100% !important;
    justify-content: center;
  }

  /* Tabs de Navegação */
  .tabs-nav {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 6px;
    padding-bottom: 4px;
    border-bottom: 2px solid var(--hairline);
  }

  .tabs-nav::-webkit-scrollbar {
    display: none;
  }

  .tab-btn {
    flex: 0 0 auto;
    padding: 9px 14px;
    font-size: 12px;
    white-space: nowrap;
  }

  /* Modals */
  .modal-overlay {
    padding: 12px;
  }

  .modal-content,
  .modal-card {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    max-height: 90vh !important;
    border-radius: 12px !important;
  }

  .modal-head {
    padding: 14px 16px;
  }

  .modal-body {
    padding: 14px 16px;
  }

  .modal-foot {
    padding: 12px 16px;
    flex-direction: column-reverse;
    gap: 8px;
  }

  .modal-foot button {
    width: 100% !important;
  }

  /* Recibo / Ticket no Mobile */
  .ticket {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 8px rgba(27, 26, 84, 0.06) !important;
  }

  .ticket-head {
    padding: 16px 14px 10px !important;
    flex-wrap: wrap;
    gap: 8px;
  }

  .ticket-head img {
    height: 28px !important;
  }

  .ticket-hero {
    margin: 0 12px 10px !important;
    padding: 6px 14px 10px !important;
  }

  .ticket-hero .amount {
    font-size: 24px !important;
  }

  .ticket-body {
    padding: 0 12px !important;
  }

  .items-table {
    font-size: 11.5px !important;
  }

  .items-table th,
  .items-table td {
    padding: 6px 3px !important;
  }

  .ticket-summary {
    padding: 10px 14px !important;
  }

  .ticket-foot {
    padding: 14px 14px 18px !important;
  }

  .ticket-foot .legal {
    font-size: 9.5px !important;
    margin-bottom: 12px !important;
  }

  .ticket-meta {
    flex-direction: column;
    gap: 4px;
    text-align: center;
  }

  /* Toast notification */
  .toast-notice {
    left: 12px !important;
    right: 12px !important;
    bottom: 16px !important;
    transform: translateY(20px) !important;
    max-width: none !important;
    font-size: 13px !important;
  }

  .toast-notice.show {
    transform: translateY(0) !important;
  }

  /* Chips */
  .chips-grid {
    gap: 6px !important;
  }

  .config-chip {
    padding: 5px 9px !important;
    font-size: 12px !important;
  }
}

/* 📱 TELAS ULTRA PEQUENAS (<= 420px) */
@media (max-width: 420px) {
  .page-header-titles h1 {
    font-size: 15px;
  }

  .kpi-value {
    font-size: 18px;
  }

  .btn-action {
    font-size: 11px;
    padding: 6px 10px;
  }
}

/* ==========================================================================
   GLOBAL SEARCH MODAL (SPOTLIGHT / COMMAND BAR - CTRL+K)
   ========================================================================== */
.sidebar-search-trigger {
  margin: 8px 14px 14px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 9px;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: rgba(255, 255, 255, 0.75);
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
}

.sidebar-search-trigger:hover {
  background: rgba(255, 255, 255, 0.14);
  color: #FFFFFF;
  border-color: rgba(255, 255, 255, 0.25);
}

.sidebar-search-trigger svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  margin-right: 8px;
}

.sidebar-search-trigger kbd {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 5px;
  padding: 2px 6px;
  font-size: 10px;
  font-family: inherit;
  color: rgba(255, 255, 255, 0.9);
  font-weight: 600;
}

/* Global Search Overlay */
.global-search-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(12, 32, 53, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 99999;
  align-items: flex-start;
  justify-content: center;
  padding: 70px 16px 20px;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.global-search-overlay.open {
  display: flex;
  opacity: 1;
}

.global-search-modal {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 16px;
  width: 100%;
  max-width: 640px;
  box-shadow: 0 25px 60px rgba(12, 32, 53, 0.25);
  overflow: hidden;
  transform: translateY(-10px) scale(0.98);
  transition: transform 0.2s ease;
}

.global-search-overlay.open .global-search-modal {
  transform: translateY(0) scale(1);
}

.global-search-head {
  display: flex;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid #E2E8F0;
  gap: 12px;
}

.global-search-head svg {
  width: 20px;
  height: 20px;
  color: var(--gold-deep);
  flex-shrink: 0;
}

.global-search-input {
  flex: 1;
  border: none;
  background: transparent;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 500;
  color: var(--navy);
  outline: none;
}

.global-search-input::placeholder {
  color: #94A3B8;
}

.global-search-esc {
  background: #F1F5F9;
  border: 1px solid #CBD5E1;
  border-radius: 6px;
  padding: 3px 7px;
  font-size: 11px;
  font-weight: 600;
  color: #64748B;
  cursor: pointer;
}

.global-search-body {
  max-height: 400px;
  overflow-y: auto;
  padding: 8px 0;
}

.global-search-group-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #94A3B8;
  padding: 10px 20px 4px;
}

.global-search-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px;
  cursor: pointer;
  transition: background 0.15s ease;
  text-decoration: none;
  color: inherit;
}

.global-search-item:hover, .global-search-item.selected {
  background: #F8FAFC;
}

.global-search-item-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.global-search-item-icon {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: #EFF6FF;
  color: #1D4ED8;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.global-search-item-icon.gold { background: #FEF3C7; color: #B87518; }
.global-search-item-icon.green { background: #DCFCE7; color: #15803D; }
.global-search-item-icon.purple { background: #F3E8FF; color: #7E22CE; }

.global-search-item-main {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--navy);
  margin: 0 0 2px;
}

.global-search-item-sub {
  font-size: 12px;
  color: var(--ink-muted);
  margin: 0;
}

.global-search-item-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.global-search-action-btn {
  background: #FFFFFF;
  border: 1px solid #CBD5E1;
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 600;
  color: var(--navy);
  cursor: pointer;
  transition: all 0.15s;
}

.global-search-action-btn:hover {
  background: #F8FAFC;
  border-color: var(--navy-soft);
}

.global-search-empty {
  text-align: center;
  padding: 40px 20px;
  color: #94A3B8;
  font-size: 13.5px;
}

.global-search-foot {
  padding: 10px 20px;
  background: #FAFBFD;
  border-top: 1px solid #E2E8F0;
  font-size: 11.5px;
  color: #94A3B8;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Dark theme support for global search */
[data-theme="dark"] .global-search-modal {
  background: #111C2E;
  border-color: #1E2E48;
}
[data-theme="dark"] .global-search-head {
  border-bottom-color: #1E2E48;
}
[data-theme="dark"] .global-search-input {
  color: #FFFFFF;
}
[data-theme="dark"] .global-search-item:hover, [data-theme="dark"] .global-search-item.selected {
  background: #17263E;
}
[data-theme="dark"] .global-search-item-main {
  color: #FFFFFF;
}
[data-theme="dark"] .global-search-foot {
  background: #0B1320;
  border-top-color: #1E2E48;
}

/* Logout Confirm Modal */
.logout-confirm-overlay {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.4); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  z-index: 10000; opacity: 0; pointer-events: none;
  transition: opacity 0.2s ease;
}
.logout-confirm-overlay.open { opacity: 1; pointer-events: auto; }
.logout-confirm-box {
  background: #FFFFFF; padding: 24px; border-radius: 16px;
  width: 90%; max-width: 320px; text-align: center;
  box-shadow: 0 10px 40px rgba(0,0,0,0.15);
  transform: translateY(20px); transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.logout-confirm-overlay.open .logout-confirm-box { transform: translateY(0); }
.logout-confirm-box h4 { margin: 0 0 8px; font-size: 18px; color: #1e293b; font-weight: 700; }
.logout-confirm-box p { margin: 0 0 24px; font-size: 14.5px; color: #475569; font-weight: 500; }
.logout-confirm-actions { display: flex; gap: 12px; }
.logout-confirm-actions button {
  flex: 1; padding: 10px; border-radius: 8px; font-weight: 600; font-size: 14px; border: none; cursor: pointer; transition: all 0.2s;
}
.btn-ficar { background: #f1f5f9; color: #334155; }
.btn-ficar:hover { background: #e2e8f0; }
.btn-sair { background: #ef4444; color: white; }
.btn-sair:hover { background: #dc2626; }

[data-theme="dark"] .logout-confirm-box { background: #111C2E; }
[data-theme="dark"] .logout-confirm-box h4 { color: #FFFFFF; }
[data-theme="dark"] .logout-confirm-box p { color: #94a3b8; }
[data-theme="dark"] .btn-ficar { background: #1E2E48; color: #FFFFFF; }
[data-theme="dark"] .btn-ficar:hover { background: #2A3F5F; }