/* ========================================
   GestãoBLZ - Comandas v2 (camada visual)
   Carregado por último no atendimento.html (depois do ui-v2.css e do
   fechamento-comanda-v2.css). Só visual/layout: blocos, ordem, textos,
   campos, cálculos e fluxos continuam os mesmos.
   - Tela: cards brancos, cabeçalhos claros, ícones em caixas chapadas.
   - Status das comandas: mesmas cores de sempre, em forma de chip/listra.
   - Modais Bootstrap da tela (exceto "Fechar comanda", que tem arquivo
     próprio): casca branca; no celular viram folha presa na base.
   - Popups da comanda (Editar / Adicionar serviço / Adicionar produto,
     via components/popup.js): conteúdo interno no mesmo padrão.
   Para voltar ao visual anterior, basta remover o <link> deste arquivo.
   ======================================== */

body[data-support-page="comandas"] {
    background: var(--v2-page-bg);
    --cm-green: #16a34a;
    --cm-green-dark: #15803d;
    --cm-red: #dc2626;
    --cm-red-dark: #b91c1c;
    --cm-amber: #f59e0b;
    --cm-amber-dark: #d97706;
    --cm-ring: 0 0 0 3px rgba(var(--primary-r, 0), var(--primary-g, 123), var(--primary-b, 255), 0.15);
}

body[data-support-page="comandas"] .content-area {
    background: transparent;
}

/* Fundo escurecido de modais e popups: sem desfoque forte */
body[data-support-page="comandas"] .modal-backdrop {
    backdrop-filter: blur(2px) !important;
}

body[data-support-page="comandas"] #gestao-popup-container .gestao-popup-overlay {
    backdrop-filter: blur(2px) !important;
    -webkit-backdrop-filter: blur(2px) !important;
}

/* ========================================
   ESPAÇAMENTO ENTRE BLOCOS
   ======================================== */
#modernMainContent .top-bar-section,
#modernMainContent .atendimento-header,
#modernMainContent .actions-bar,
#modernMainContent .main-content-section {
    margin-bottom: 24px;
}

#modernMainContent .atendimento-header > .row {
    --bs-gutter-x: 16px;
    --bs-gutter-y: 16px;
    text-align: left;
}

#modernMainContent .main-content-section > .row {
    --bs-gutter-x: 24px;
    --bs-gutter-y: 24px;
}

#modernMainContent .main-content-section .col-xl-4 {
    margin-top: var(--bs-gutter-y);
}

#modernMainContent .sidebar-widgets {
    gap: 24px;
}

/* ========================================
   BARRA SUPERIOR: DATA + RELATÓRIO
   ======================================== */
#modernMainContent .top-bar-wrapper {
    gap: 12px 16px;
}

#modernMainContent .date-compact-wrapper {
    gap: 12px;
    min-height: 46px;
    padding: 5px 6px 5px 14px;
    background: var(--v2-card-bg);
    border: 1px solid var(--v2-card-border);
    border-radius: 10px;
    box-shadow: var(--v2-card-shadow);
}

#modernMainContent .date-compact-wrapper:hover {
    border-color: #dde0e6;
    box-shadow: var(--v2-card-shadow);
}

#modernMainContent .date-info-compact {
    gap: 8px;
}

#modernMainContent .date-icon-compact {
    color: var(--primary-color, #007bff);
    font-size: 15px;
}

#modernMainContent .date-text-compact {
    color: var(--v2-text);
    font-size: 14px;
    font-weight: 500;
}

#modernMainContent .date-input-compact {
    height: 34px;
    padding: 0 10px;
    background: #ffffff;
    border: 1px solid var(--v2-card-border);
    border-radius: 8px;
    color: var(--v2-text-2);
    font-size: 13px;
    font-weight: 500;
}

#modernMainContent .date-input-compact:hover {
    border-color: #d5d9e0;
    background: #ffffff;
}

#modernMainContent .date-input-compact:focus {
    border-color: var(--primary-color, #007bff);
    background: #ffffff;
    box-shadow: var(--cm-ring);
    outline: none;
}

#modernMainContent .actions-compact-wrapper {
    gap: 8px;
}

#modernMainContent .action-btn-compact,
#modernMainContent .action-btn-compact:not(.whatsapp) {
    min-height: 46px;
    padding: 0 16px;
    gap: 8px;
    background: #ffffff;
    border: 1px solid var(--v2-card-border);
    border-radius: 10px;
    color: var(--v2-text-2);
    font-size: 13.5px;
    font-weight: 500;
    box-shadow: var(--v2-card-shadow);
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

#modernMainContent .action-btn-compact:hover,
#modernMainContent .action-btn-compact:not(.whatsapp):hover {
    transform: none;
    background: var(--v2-surface);
    border-color: #d5d9e0;
    color: var(--v2-text);
    box-shadow: var(--v2-card-shadow);
}

#modernMainContent .action-btn-compact:not(.whatsapp) i,
#modernMainContent .action-btn-compact:not(.whatsapp):hover i {
    color: #3f86d8;
    font-size: 14px;
}

/* ========================================
   INDICADORES DO TOPO (Abertas / Recebido / Tempo médio)
   Ícone 42px chapado + listra de 3px na cor do indicador.
   ======================================== */
#modernMainContent .status-card {
    --v2-accent: var(--primary-color, #007bff);
    gap: 14px;
    min-height: 0;
    padding: 18px 20px;
    background: var(--v2-card-bg);
    border: 1px solid var(--v2-card-border);
    border-radius: var(--v2-card-radius);
    box-shadow: var(--v2-card-shadow);
    text-align: left;
    transform: none;
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

#modernMainContent .status-card:has(.status-icon.faturamento) { --v2-accent: #16a34a; }
#modernMainContent .status-card:has(.status-icon.tempo) { --v2-accent: #7c5cd6; }

#modernMainContent .status-card::before {
    height: 3px;
    border-radius: 0;
    background: var(--v2-accent);
}

#modernMainContent .status-card:hover,
#modernMainContent .status-card:active {
    transform: none;
    border-color: #dde0e6;
    box-shadow: var(--v2-card-shadow-hover);
}

#modernMainContent .status-icon {
    width: 42px;
    height: 42px;
    min-width: 42px;
    margin: 0;
    border-radius: 10px;
    background: var(--v2-accent);
    box-shadow: none;
    color: #ffffff;
    font-size: 17px;
}

#modernMainContent .status-number {
    margin-bottom: 2px;
    color: var(--v2-text);
    font-size: 22px;
    font-weight: 500;
    letter-spacing: -0.02em;
    line-height: 1.2;
    transition: none;
}

#modernMainContent .status-label {
    margin: 0;
    color: var(--v2-muted);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
}

/* ========================================
   BARRA DE AÇÕES: Nova Comanda + profissional + Abertas/Finalizadas/Anuladas
   ======================================== */
#modernMainContent .actions-bar {
    gap: 12px 16px;
    padding: 14px 16px;
    background: var(--v2-card-bg);
    border: 1px solid var(--v2-card-border);
    border-radius: var(--v2-card-radius);
    box-shadow: var(--v2-card-shadow);
}

#modernMainContent .actions-left,
#modernMainContent .actions-right {
    gap: 12px;
}

#modernMainContent .actions-center:empty {
    display: none;
}

/* Nova Comanda: cor do salão, chapada */
#modernMainContent #novaComandaBtn {
    min-width: 0;
    min-height: 40px;
    padding: 8px 18px;
    gap: 8px;
    border: 0;
    border-radius: 8px;
    background: var(--primary-color, #007bff);
    color: #ffffff;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    box-shadow: none;
    transform: none;
    transition: background-color 0.15s ease;
}

#modernMainContent #novaComandaBtn::before {
    display: none;
}

#modernMainContent #novaComandaBtn:hover,
#modernMainContent #novaComandaBtn:active {
    background: var(--primary-dark, var(--primary-color, #0062cc));
    color: #ffffff;
    transform: none;
    box-shadow: none;
}

#modernMainContent #novaComandaBtn:focus-visible {
    box-shadow: var(--cm-ring);
}

#modernMainContent #novaComandaBtn i {
    font-size: 14px;
    filter: none;
}

#modernMainContent #novaComandaBtn .btn-text {
    font-weight: 500;
    text-shadow: none;
}

/* Filtro de profissional */
#modernMainContent .filter-group {
    min-width: 220px;
}

#modernMainContent .filter-group::before {
    left: 12px;
    color: var(--v2-muted);
    font-size: 13px;
}

#modernMainContent #profissionalFilter {
    height: 40px;
    min-height: 40px;
    padding: 0 36px 0 36px;
    background-color: #ffffff;
    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='%236b7482' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-position: right 12px center;
    background-size: 12px;
    border: 1px solid var(--v2-card-border);
    border-radius: 8px;
    color: var(--v2-text);
    font-size: 14px;
    font-weight: 400;
    box-shadow: none;
    transform: none;
}

#modernMainContent #profissionalFilter:hover {
    border-color: #d5d9e0;
    background-color: #ffffff;
    box-shadow: none;
    transform: none;
}

#modernMainContent #profissionalFilter:focus {
    border-color: var(--primary-color, #007bff);
    background-color: #ffffff;
    box-shadow: var(--cm-ring);
}

/* Abertas / Finalizadas / Anuladas: controle segmentado */
#modernMainContent .view-toggle {
    gap: 3px;
    padding: 3px;
    background: var(--v2-surface);
    border: 1px solid var(--v2-card-border);
    border-radius: 10px;
}

#modernMainContent .view-btn {
    justify-content: center;
    min-height: 34px;
    padding: 6px 16px;
    gap: 7px;
    border-radius: 7px;
    color: var(--v2-text-2);
    font-size: 13.5px;
    font-weight: 500;
    white-space: nowrap;
    transition: background-color 0.15s ease, color 0.15s ease;
}

#modernMainContent .view-btn i {
    color: var(--v2-muted);
    font-size: 13px;
}

#modernMainContent .view-btn:hover {
    background: rgba(17, 24, 39, 0.05);
    color: var(--v2-text);
}

#modernMainContent .view-btn.active,
#modernMainContent .view-btn.active:hover {
    background: var(--primary-color, #007bff);
    color: #ffffff;
    box-shadow: none;
}

#modernMainContent .view-btn.active i {
    color: #ffffff;
}

/* Desktop: barra numa linha só (antes quebrava em duas abaixo de 1450px) */
@media (min-width: 993px) {
    #modernMainContent .actions-bar {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    #modernMainContent .actions-left,
    #modernMainContent .actions-right {
        flex-wrap: nowrap;
        justify-content: flex-start;
    }

    #modernMainContent .view-toggle {
        width: auto;
    }

    #modernMainContent .view-btn {
        flex: 0 0 auto;
    }
}

/* ========================================
   CARDS PRINCIPAIS: LISTA DE COMANDAS / ATENDIMENTOS HOJE
   ======================================== */
#modernMainContent .comandas-card,
#modernMainContent .widget-card {
    background: var(--v2-card-bg);
    border: 1px solid var(--v2-card-border);
    border-radius: var(--v2-card-radius);
    box-shadow: var(--v2-card-shadow);
    transform: none !important;
}

#modernMainContent .comandas-card { --v2-accent: #2f8fce; --v2-accent-soft: #e8f3fb; }
#modernMainContent .widget-card { --v2-accent: #7c5cd6; --v2-accent-soft: #f1edfc; }

#modernMainContent .comandas-card .card-header,
#modernMainContent .widget-card .card-header {
    min-height: 63px;
    padding: 16px 20px;
    background: #ffffff;
    border-bottom: 1px solid var(--v2-card-divider);
    backdrop-filter: none;
}

#modernMainContent .comandas-card .card-title,
#modernMainContent .widget-card .widget-title {
    gap: 10px;
    color: var(--v2-text);
    font-size: 15px;
    font-weight: 500;
    letter-spacing: -0.005em;
}

#modernMainContent .comandas-card .card-title > i,
#modernMainContent .widget-card .widget-title > i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: var(--v2-accent);
    color: #ffffff;
    font-size: 13px;
}

#modernMainContent .total-badge {
    padding: 3px 8px;
    border-radius: 6px;
    background: var(--v2-accent-soft, #eef0f3);
    color: var(--v2-accent, var(--v2-text-2));
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    box-shadow: none;
}

#modernMainContent .comandas-card .card-body {
    padding: 0;
}

#modernMainContent .comandas-container {
    padding: 16px 20px 20px;
    scrollbar-color: #d5d9e0 transparent;
}

/* "Puxe para atualizar" só existe no celular (gesto de toque) */
@media (min-width: 769px) {
    #modernMainContent .pull-to-refresh {
        display: none;
    }
}

/* ========================================
   COMANDA (item da lista)
   Listra lateral e chip de status nas cores de sempre.
   ======================================== */
#modernMainContent .comanda-item {
    --cm-status: var(--primary-color, #007bff);
    margin-bottom: 12px;
    padding: 16px 18px 14px 20px;
    background: #ffffff;
    border: 1px solid var(--v2-card-border);
    border-radius: 10px;
    box-shadow: none;
    transform: none;
    animation: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

#modernMainContent .comanda-item:last-child {
    margin-bottom: 0;
}

#modernMainContent .comanda-item.em-andamento { --cm-status: #f5b100; }
#modernMainContent .comanda-item.finalizada { --cm-status: #28a745; }
#modernMainContent .comanda-item:is(.cancelada, .cancelado) { --cm-status: #ef4444; }
#modernMainContent .comanda-item:is(.estornada, .estornado) { --cm-status: #f97316; }
#modernMainContent .comanda-item:is(.excluida, .excluido) { --cm-status: #9ca3af; }
#modernMainContent .comanda-item.editada { --cm-status: #a78bfa; }

#modernMainContent .comanda-item::before {
    width: 3px;
    background: var(--cm-status);
}

#modernMainContent .comanda-item:hover,
#modernMainContent .comanda-item:active {
    transform: none;
    border-color: #d5d9e0;
    box-shadow: var(--v2-card-shadow-hover);
}

#modernMainContent .comanda-item.editada,
#modernMainContent .comanda-item.editada:hover {
    border-color: var(--v2-card-border);
}

#modernMainContent .comanda-header {
    gap: 12px;
    margin-bottom: 12px;
}

#modernMainContent .comanda-info-principal {
    min-width: 0;
}

#modernMainContent .comanda-numero {
    margin-bottom: 2px;
    color: var(--primary-color, #007bff);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0;
}

#modernMainContent .comanda-cliente {
    margin-bottom: 3px;
    color: var(--v2-text);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

#modernMainContent .comanda-profissional {
    flex-wrap: wrap;
    gap: 6px;
    color: var(--v2-muted);
    font-size: 13px;
    font-weight: 400;
}

#modernMainContent .comanda-profissional > i {
    color: #a0a7b3;
    font-size: 11px;
}

#modernMainContent .rating-chip {
    gap: 4px;
    padding: 2px 7px;
    border: 0;
    border-radius: 6px;
    background: #fff5e0;
    color: #92400e;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.5;
}

#modernMainContent .rating-chip i {
    color: #f5a524;
    font-size: 11px;
}

#modernMainContent .rating-chip small {
    color: #a16207;
    font-weight: 500;
}

/* Chips de status (mesmas cores de antes) */
#modernMainContent .comanda-status-container {
    flex-shrink: 0;
    gap: 6px;
}

#modernMainContent .comanda-status,
#modernMainContent .badge-editada {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 9px;
    border: 0;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1.3;
    text-transform: none;
    white-space: nowrap;
    box-shadow: none;
}

#modernMainContent .comanda-status.aberta {
    background: rgba(var(--primary-r, 0), var(--primary-g, 123), var(--primary-b, 255), 0.12);
    color: var(--primary-color, #007bff);
}

#modernMainContent .comanda-status.em-andamento {
    background: #fff6d9;
    color: #a16207;
}

#modernMainContent .comanda-status.finalizada {
    background: #e7f6ec;
    color: #1e7e34;
}

#modernMainContent .comanda-status:is(.cancelada, .cancelado) {
    background: #fdecec;
    color: #dc2626;
}

#modernMainContent .comanda-status:is(.estornada, .estornado) {
    background: #fff0e6;
    color: #c2410c;
}

#modernMainContent .comanda-status:is(.excluida, .excluido) {
    background: #f1f2f4;
    color: #6b7280;
}

#modernMainContent .badge-editada {
    background: #f1edfe;
    color: #6d28d9;
}

#modernMainContent .badge-editada i {
    font-size: 10.5px;
}

/* Plano/assinatura do cliente (faixa azul clara) */
#modernMainContent .comanda-package-inline {
    gap: 12px;
    margin: 0 0 12px;
    padding: 10px 12px;
    background: #f3f8ff;
    border: 1px solid #dce8fb;
    border-left: 3px solid #3b82f6;
    border-radius: 8px;
}

#modernMainContent .comanda-package-inline strong {
    margin-bottom: 1px;
    color: var(--v2-text);
    font-size: 14px;
    font-weight: 500;
}

#modernMainContent .comanda-package-inline p {
    color: var(--v2-text-2);
    font-size: 12.5px;
}

#modernMainContent .comanda-package-inline .inline-status {
    flex-shrink: 0;
    padding: 3px 8px;
    border-radius: 6px;
    background: #dfeafd;
    color: #1d4ed8;
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: 0.02em;
}

/* Serviços, tempo e valor */
#modernMainContent .comanda-body {
    margin-bottom: 12px;
}

#modernMainContent .comanda-servicos {
    gap: 6px;
    margin-bottom: 12px;
}

#modernMainContent .servico-tag {
    padding: 3px 9px;
    background: var(--v2-surface);
    border: 1px solid var(--v2-card-divider);
    border-radius: 6px;
    color: var(--v2-text-2);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.45;
}

#modernMainContent .comanda-detalhes {
    gap: 8px 16px;
}

#modernMainContent .comanda-tempo {
    gap: 6px;
    color: var(--v2-text-2);
    font-size: 13px;
    font-weight: 500;
}

#modernMainContent .comanda-tempo i {
    color: #a0a7b3;
    font-size: 12px;
}

#modernMainContent .comanda-valor {
    color: #15803d;
    font-size: 18px;
    font-weight: 500;
    letter-spacing: -0.01em;
    white-space: nowrap;
}

#modernMainContent .comanda-observacoes {
    display: flex;
    align-items: baseline;
    gap: 7px;
    margin-top: 10px;
    padding: 7px 10px;
    background: #fffbeb;
    border: 1px solid #fdecc8;
    border-left: 3px solid #f59e0b;
    border-radius: 6px;
    color: #5c4813;
    font-size: 13px;
    line-height: 1.45;
}

#modernMainContent .comanda-observacoes i {
    flex-shrink: 0;
    color: #d97706;
    font-size: 12px;
}

/* Rodapé: horário + ações */
#modernMainContent .comanda-footer {
    gap: 10px 16px;
    padding-top: 12px;
    border-top: 1px solid var(--v2-card-divider);
}

#modernMainContent .comanda-info {
    color: var(--v2-muted);
    font-size: 12.5px;
    font-weight: 400;
}

#modernMainContent .comanda-actions {
    gap: 6px;
}

#modernMainContent .comanda-actions .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 34px;
    padding: 5px 12px;
    border: 1px solid transparent;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.2;
    box-shadow: none;
    transform: none;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

#modernMainContent .comanda-actions .btn i {
    font-size: 12px;
}

#modernMainContent .comanda-actions .btn:focus-visible {
    box-shadow: var(--cm-ring);
}

/* Ver: secundário branco */
#modernMainContent .comanda-actions .visualizar-comanda {
    background: #ffffff;
    border-color: var(--v2-card-border);
    color: var(--v2-text-2);
}

#modernMainContent .comanda-actions .visualizar-comanda:hover {
    background: #f3f4f6;
    border-color: #d5d9e0;
    color: var(--v2-text);
}

/* Cliente chegou: secundário com a cor azul-clara de sempre */
#modernMainContent .comanda-actions .cliente-chegou-comanda {
    background: #ffffff;
    border-color: #bfe3f6;
    color: #0369a1;
}

#modernMainContent .comanda-actions .cliente-chegou-comanda:hover,
#modernMainContent .comanda-actions .cliente-chegou-comanda:focus {
    background: #f0f9ff;
    border-color: #7cc7ec;
    color: #075985;
}

/* Editar: âmbar chapado */
#modernMainContent .comanda-actions .editar-comanda {
    background: var(--cm-amber-dark);
    border-color: var(--cm-amber-dark);
    color: #ffffff;
}

#modernMainContent .comanda-actions .editar-comanda:hover {
    background: #b45309;
    border-color: #b45309;
    color: #ffffff;
}

/* Finalizar: verde chapado */
#modernMainContent .comanda-actions .finalizar-comanda {
    background: var(--cm-green);
    border-color: var(--cm-green);
    color: #ffffff;
}

#modernMainContent .comanda-actions .finalizar-comanda:hover {
    background: var(--cm-green-dark);
    border-color: var(--cm-green-dark);
    color: #ffffff;
}

/* Cancelar / Estornar: vermelho discreto */
#modernMainContent .comanda-actions :is(.cancelar-comanda, .estornar-comanda) {
    background: #ffffff;
    border-color: #f3c7c7;
    color: var(--cm-red);
}

#modernMainContent .comanda-actions :is(.cancelar-comanda, .estornar-comanda):hover {
    background: #fef2f2;
    border-color: #eba9a9;
    color: var(--cm-red-dark);
}

#modernMainContent .comanda-actions .btn:disabled {
    opacity: 0.65;
}

/* ========================================
   ESTADOS VAZIOS
   ======================================== */
#modernMainContent .comandas-card .empty-state {
    min-height: 320px;
    padding: 48px 20px;
}

#modernMainContent .comandas-card .empty-icon {
    width: 56px;
    height: 56px;
    margin-bottom: 16px;
    border-radius: 14px;
    background: rgba(var(--primary-r, 0), var(--primary-g, 123), var(--primary-b, 255), 0.12);
    color: var(--primary-color, #007bff);
    font-size: 22px;
    box-shadow: none;
    animation: none;
}

#modernMainContent .comandas-card .empty-icon.abertas {
    background: #e7f6ec;
    color: #16a34a;
}

#modernMainContent .comandas-card .empty-icon.finalizadas {
    background: #f1f2f4;
    color: #6b7280;
}

#modernMainContent .comandas-card .empty-icon.canceladas {
    background: #fdecec;
    color: #ef4444;
}

#modernMainContent .comandas-card .empty-state h5 {
    margin-bottom: 6px;
    color: var(--v2-text);
    font-size: 17px;
    font-weight: 500;
    letter-spacing: -0.01em;
}

#modernMainContent .comandas-card .empty-state p {
    max-width: 340px;
    color: var(--v2-muted) !important;
    font-size: 14px;
}

#modernMainContent .comandas-card .empty-state .btn-lg {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    margin-top: 20px !important;
    padding: 8px 18px;
    border: 0;
    border-radius: 8px;
    background: var(--primary-color, #007bff);
    color: #ffffff;
    font-size: 14px;
    font-weight: 500;
    box-shadow: none;
    transform: none;
}

#modernMainContent .comandas-card .empty-state .btn-lg:hover {
    background: var(--primary-dark, var(--primary-color, #0062cc));
    transform: none;
    box-shadow: none;
}

/* ========================================
   ATENDIMENTOS HOJE (painel lateral)
   ======================================== */
#modernMainContent .widget-card .card-body {
    padding: 16px 20px 20px;
}

#modernMainContent .resumo-atendimentos {
    gap: 8px;
}

#modernMainContent .resumo-item {
    gap: 12px;
    padding: 10px 12px;
    background: var(--v2-surface);
    border: 1px solid var(--v2-card-divider);
    border-radius: 10px;
    transform: none;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

#modernMainContent .resumo-item:hover {
    background: #ffffff;
    border-color: var(--v2-card-border);
    transform: none;
}

#modernMainContent .resumo-icon {
    width: 38px;
    height: 38px;
    border-radius: 9px;
    color: #ffffff;
    font-size: 15px;
}

#modernMainContent .resumo-icon.finalizados { background: #16a34a; }
#modernMainContent .resumo-icon.andamento { background: #f59e0b; }
#modernMainContent .resumo-icon.aguardando { background: #6b7280; }
#modernMainContent .resumo-icon.canceladas { background: #dc2626; }

#modernMainContent .resumo-numero {
    margin-bottom: 1px;
    color: var(--v2-text);
    font-size: 20px;
    font-weight: 500;
    letter-spacing: -0.01em;
    line-height: 1.2;
    transition: none;
}

#modernMainContent .resumo-label {
    color: var(--v2-muted);
    font-size: 13px;
    font-weight: 500;
}

/* ========================================
   AVISOS DE TELA (showScreenNotification / indicador "Atualizando...")
   ======================================== */
body[data-support-page="comandas"] .screen-notification-content {
    gap: 10px;
    padding: 12px 16px;
    background: #ffffff;
    border: 1px solid var(--v2-card-border);
    border-left: 3px solid #16a34a;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(16, 24, 40, 0.12);
}

body[data-support-page="comandas"] .screen-notification.success i { color: #16a34a; }
body[data-support-page="comandas"] .screen-notification.warning .screen-notification-content { border-left-color: #f59e0b; }
body[data-support-page="comandas"] .screen-notification.warning i { color: #d97706; }
body[data-support-page="comandas"] .screen-notification.info .screen-notification-content { border-left-color: #3b82f6; }
body[data-support-page="comandas"] .screen-notification.info i { color: #3b82f6; }

body[data-support-page="comandas"] .screen-notification span {
    color: var(--v2-text);
    font-size: 14px;
    font-weight: 500;
}

body[data-support-page="comandas"] > .update-indicator {
    border-radius: 8px !important;
    font-size: 13px !important;
    box-shadow: 0 6px 18px rgba(16, 24, 40, 0.14) !important;
}

/* ========================================
   MODAIS BOOTSTRAP DA TELA
   (Nova comanda, Ver comanda, Estornar, Finalizar, Cadastro rápido)
   ======================================== */
:is(#novaComandaModal, #visualizarComandaModal, #estornarComandaModal, #finalizarComandaModal, #novoClienteRapidoModal) {
    --m-accent: var(--primary-color, #007bff);
    --m-pad-x: 20px;
}

#estornarComandaModal { --m-accent: #dc2626; }
#finalizarComandaModal,
#novoClienteRapidoModal { --m-accent: #16a34a; }

#visualizarComandaModal .modal-dialog {
    max-width: 900px;
}

#novaComandaModal .modal-dialog,
#estornarComandaModal .modal-dialog {
    max-width: 720px;
}

:is(#novaComandaModal, #visualizarComandaModal, #estornarComandaModal, #finalizarComandaModal, #novoClienteRapidoModal) .modal-content {
    border: 1px solid var(--v2-card-border);
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 20px 50px rgba(16, 24, 40, 0.18);
    overflow: hidden;
    color: var(--v2-text);
}

:is(#novaComandaModal, #visualizarComandaModal, #estornarComandaModal, #finalizarComandaModal, #novoClienteRapidoModal) .modal-header {
    align-items: center;
    gap: 12px;
    padding: 16px var(--m-pad-x);
    background: #ffffff;
    border: 0;
    border-bottom: 1px solid var(--v2-card-divider);
    border-radius: 0;
    color: var(--v2-text);
}

#visualizarComandaModal .modal-header::before {
    display: none;
}

:is(#novaComandaModal, #visualizarComandaModal, #estornarComandaModal, #finalizarComandaModal, #novoClienteRapidoModal) .modal-title,
#visualizarComandaModal #tituloComanda {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    color: var(--v2-text) !important;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: -0.01em;
}

:is(#novaComandaModal, #visualizarComandaModal, #estornarComandaModal, #finalizarComandaModal, #novoClienteRapidoModal) .modal-title > i,
#visualizarComandaModal #tituloComanda > i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    margin: 0 !important;
    border-radius: 8px;
    background: var(--m-accent);
    color: #ffffff;
    font-size: 14px;
}

/* Estornar: "Operação financeira auditável" vira subtítulo abaixo do título */
#estornarComandaModal .estorno-modal-header {
    align-items: center;
}

#estornarComandaModal .estorno-modal-header > div:first-child {
    display: flex;
    flex-direction: column-reverse;
    min-width: 0;
}

#estornarComandaModal .estorno-modal-eyebrow {
    margin: 2px 0 0 42px;
    color: #b91c1c;
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    opacity: 1;
}

/* Fechar: quadrado discreto */
:is(#novaComandaModal, #visualizarComandaModal, #estornarComandaModal, #finalizarComandaModal, #novoClienteRapidoModal) .modal-header .btn-close {
    box-sizing: border-box;
    flex-shrink: 0;
    align-self: center;
    width: 32px;
    height: 32px;
    margin: 0 -6px 0 auto;
    padding: 0;
    border-radius: 8px;
    background-color: transparent;
    background-size: 11px;
    filter: none;
    opacity: 0.55;
    box-shadow: none;
}

:is(#novaComandaModal, #visualizarComandaModal, #estornarComandaModal, #finalizarComandaModal, #novoClienteRapidoModal) .modal-header .btn-close:hover {
    background-color: #f3f4f6;
    opacity: 0.9;
}

:is(#novaComandaModal, #visualizarComandaModal, #estornarComandaModal, #finalizarComandaModal, #novoClienteRapidoModal) .modal-header .btn-close:focus {
    box-shadow: var(--cm-ring);
}

:is(#novaComandaModal, #visualizarComandaModal, #estornarComandaModal, #finalizarComandaModal, #novoClienteRapidoModal) .modal-body {
    padding: 20px var(--m-pad-x);
    background: #ffffff;
    color: var(--v2-text);
    font-size: 14px;
}

:is(#novaComandaModal, #visualizarComandaModal, #estornarComandaModal, #finalizarComandaModal, #novoClienteRapidoModal) .modal-footer {
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px var(--m-pad-x);
    background: var(--v2-surface);
    border-top: 1px solid var(--v2-card-divider);
    border-radius: 0;
}

:is(#novaComandaModal, #visualizarComandaModal, #estornarComandaModal, #finalizarComandaModal, #novoClienteRapidoModal) .modal-footer > * {
    margin: 0;
}

/* ---------- Campos ---------- */
:is(#novaComandaModal, #visualizarComandaModal, #estornarComandaModal, #finalizarComandaModal, #novoClienteRapidoModal) .form-label {
    margin-bottom: 6px;
    color: var(--v2-text-2);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
}

:is(#novaComandaModal, #visualizarComandaModal, #estornarComandaModal, #finalizarComandaModal, #novoClienteRapidoModal) .form-text {
    margin-top: 5px;
    color: var(--v2-muted);
    font-size: 12.5px;
    line-height: 1.45;
}

:is(#novaComandaModal, #visualizarComandaModal, #estornarComandaModal, #finalizarComandaModal, #novoClienteRapidoModal) :is(.form-control, .form-select) {
    min-height: 40px;
    padding: 8px 12px;
    border: 1px solid var(--v2-card-border);
    border-radius: 8px;
    background-color: #ffffff;
    color: var(--v2-text);
    font-size: 14px;
    line-height: 1.4;
    box-shadow: none;
}

:is(#novaComandaModal, #visualizarComandaModal, #estornarComandaModal, #finalizarComandaModal, #novoClienteRapidoModal) .form-select {
    padding-right: 36px;
    background-position: right 12px center;
}

:is(#novaComandaModal, #visualizarComandaModal, #estornarComandaModal, #finalizarComandaModal, #novoClienteRapidoModal) textarea.form-control {
    min-height: 0;
    resize: vertical;
}

:is(#novaComandaModal, #visualizarComandaModal, #estornarComandaModal, #finalizarComandaModal, #novoClienteRapidoModal) :is(.form-control, .form-select)::placeholder {
    color: #9aa1ad;
    opacity: 1;
}

:is(#novaComandaModal, #visualizarComandaModal, #estornarComandaModal, #finalizarComandaModal, #novoClienteRapidoModal) :is(.form-control, .form-select):focus {
    border-color: var(--primary-color, #007bff);
    box-shadow: var(--cm-ring);
    outline: 0;
}

:is(#novaComandaModal, #visualizarComandaModal, #estornarComandaModal, #finalizarComandaModal, #novoClienteRapidoModal) .form-control.is-invalid {
    border-color: #dc2626;
}

:is(#novaComandaModal, #visualizarComandaModal, #estornarComandaModal, #finalizarComandaModal, #novoClienteRapidoModal) .form-control.is-invalid:focus {
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15);
}

:is(#novaComandaModal, #visualizarComandaModal, #estornarComandaModal, #finalizarComandaModal, #novoClienteRapidoModal) .row {
    --bs-gutter-x: 16px;
}

:is(#novaComandaModal, #visualizarComandaModal, #estornarComandaModal, #finalizarComandaModal, #novoClienteRapidoModal) .form-check-input:checked {
    background-color: var(--primary-color, #007bff);
    border-color: var(--primary-color, #007bff);
}

:is(#novaComandaModal, #visualizarComandaModal, #estornarComandaModal, #finalizarComandaModal, #novoClienteRapidoModal) .form-check-input:focus {
    border-color: var(--primary-color, #007bff);
    box-shadow: var(--cm-ring);
}

/* ---------- Avisos: faixa clara com borda esquerda ---------- */
:is(#novaComandaModal, #visualizarComandaModal, #estornarComandaModal, #finalizarComandaModal, #novoClienteRapidoModal) .alert {
    padding: 12px 14px;
    border: 1px solid transparent !important;
    border-left-width: 3px !important;
    border-radius: 8px;
    box-shadow: none !important;
    font-size: 13.5px;
    line-height: 1.5;
}

:is(#novaComandaModal, #visualizarComandaModal, #estornarComandaModal, #finalizarComandaModal, #novoClienteRapidoModal) .alert-warning {
    background: #fffbeb;
    border-color: #fdecc8 !important;
    border-left-color: #f59e0b !important;
    color: #78350f;
}

:is(#novaComandaModal, #visualizarComandaModal, #estornarComandaModal, #finalizarComandaModal, #novoClienteRapidoModal) .alert-warning > i {
    margin-right: 4px;
    color: #d97706;
}

:is(#novaComandaModal, #visualizarComandaModal, #estornarComandaModal, #finalizarComandaModal, #novoClienteRapidoModal) .alert-info {
    background: #eff6ff;
    border-color: #dbeafe !important;
    border-left-color: #3b82f6 !important;
    color: #1e3a8a;
}

:is(#novaComandaModal, #visualizarComandaModal, #estornarComandaModal, #finalizarComandaModal, #novoClienteRapidoModal) .alert small {
    font-size: 13px;
}

/* ---------- Botões do rodapé (chapados) ---------- */
:is(#novaComandaModal, #visualizarComandaModal, #estornarComandaModal, #finalizarComandaModal, #novoClienteRapidoModal) .modal-footer .btn {
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 40px;
    min-width: 0;
    padding: 8px 16px;
    border: 1px solid transparent;
    border-radius: 8px;
    background-image: none;
    box-shadow: none;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.25;
    transform: none;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

/* O JS define display inline-block nos botões do "Ver comanda"; os demais ficam flex */
:is(#novaComandaModal, #estornarComandaModal, #finalizarComandaModal, #novoClienteRapidoModal) .modal-footer .btn,
#visualizarComandaModal .modal-footer .btn[data-bs-dismiss="modal"] {
    display: inline-flex;
}

:is(#novaComandaModal, #visualizarComandaModal, #estornarComandaModal, #finalizarComandaModal, #novoClienteRapidoModal) .modal-footer .btn i {
    margin-right: 2px;
    font-size: 13px;
}

:is(#novaComandaModal, #visualizarComandaModal, #estornarComandaModal, #finalizarComandaModal, #novoClienteRapidoModal) .modal-footer .btn:hover,
:is(#novaComandaModal, #visualizarComandaModal, #estornarComandaModal, #finalizarComandaModal, #novoClienteRapidoModal) .modal-footer .btn:active {
    transform: none;
    box-shadow: none;
}

:is(#novaComandaModal, #visualizarComandaModal, #estornarComandaModal, #finalizarComandaModal, #novoClienteRapidoModal) .modal-footer .btn:focus-visible {
    box-shadow: var(--cm-ring);
}

:is(#novaComandaModal, #visualizarComandaModal, #estornarComandaModal, #finalizarComandaModal, #novoClienteRapidoModal) .modal-footer .btn-secondary {
    background: #ffffff;
    border-color: var(--v2-card-border);
    color: var(--v2-text-2);
}

:is(#novaComandaModal, #visualizarComandaModal, #estornarComandaModal, #finalizarComandaModal, #novoClienteRapidoModal) .modal-footer .btn-secondary:hover {
    background: #f3f4f6;
    border-color: #d5d9e0;
    color: var(--v2-text);
}

:is(#novaComandaModal, #visualizarComandaModal, #estornarComandaModal, #finalizarComandaModal, #novoClienteRapidoModal) .modal-footer .btn-primary {
    background: var(--primary-color, #007bff);
    border-color: var(--primary-color, #007bff);
    color: #ffffff;
}

:is(#novaComandaModal, #visualizarComandaModal, #estornarComandaModal, #finalizarComandaModal, #novoClienteRapidoModal) .modal-footer .btn-primary:hover {
    background: var(--primary-dark, var(--primary-color, #0062cc));
    border-color: var(--primary-dark, var(--primary-color, #0062cc));
    color: #ffffff;
}

:is(#novaComandaModal, #visualizarComandaModal, #estornarComandaModal, #finalizarComandaModal, #novoClienteRapidoModal) .modal-footer .btn-warning {
    background: #d97706;
    border-color: #d97706;
    color: #ffffff;
}

:is(#novaComandaModal, #visualizarComandaModal, #estornarComandaModal, #finalizarComandaModal, #novoClienteRapidoModal) .modal-footer .btn-warning:hover {
    background: #b45309;
    border-color: #b45309;
    color: #ffffff;
}

:is(#novaComandaModal, #visualizarComandaModal, #estornarComandaModal, #finalizarComandaModal, #novoClienteRapidoModal) .modal-footer .btn-success {
    background: #16a34a;
    border-color: #16a34a;
    color: #ffffff;
}

:is(#novaComandaModal, #visualizarComandaModal, #estornarComandaModal, #finalizarComandaModal, #novoClienteRapidoModal) .modal-footer .btn-success:hover {
    background: #15803d;
    border-color: #15803d;
    color: #ffffff;
}

:is(#novaComandaModal, #visualizarComandaModal, #estornarComandaModal, #finalizarComandaModal, #novoClienteRapidoModal) .modal-footer .btn-danger {
    background: #dc2626;
    border-color: #dc2626;
    color: #ffffff;
}

:is(#novaComandaModal, #visualizarComandaModal, #estornarComandaModal, #finalizarComandaModal, #novoClienteRapidoModal) .modal-footer .btn-danger:hover {
    background: #b91c1c;
    border-color: #b91c1c;
    color: #ffffff;
}

:is(#novaComandaModal, #visualizarComandaModal, #estornarComandaModal, #finalizarComandaModal, #novoClienteRapidoModal) .modal-footer .btn-danger:disabled {
    background: #f1f3f6;
    border-color: var(--v2-card-border);
    color: #9ca3af;
    opacity: 1;
}

:is(#novaComandaModal, #visualizarComandaModal, #estornarComandaModal, #finalizarComandaModal, #novoClienteRapidoModal) .modal-footer .btn-outline-danger {
    background: #ffffff;
    border-color: #f3c7c7;
    color: #dc2626;
}

:is(#novaComandaModal, #visualizarComandaModal, #estornarComandaModal, #finalizarComandaModal, #novoClienteRapidoModal) .modal-footer .btn-outline-danger:hover {
    background: #fef2f2;
    border-color: #eba9a9;
    color: #b91c1c;
}

/* ========================================
   NOVA COMANDA
   ======================================== */
/* "Comanda para": controle segmentado */
#novaComandaModal .btn-group {
    padding: 3px;
    gap: 3px;
    background: var(--v2-surface);
    border: 1px solid var(--v2-card-border);
    border-radius: 10px;
}

#novaComandaModal .btn-group > .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 0;
    min-height: 36px;
    margin: 0;
    padding: 6px 12px;
    border: 1px solid transparent;
    border-radius: 7px !important;
    background: transparent;
    color: var(--v2-text-2);
    font-size: 14px;
    font-weight: 500;
    box-shadow: none;
}

#novaComandaModal .btn-group > .btn:hover {
    background: rgba(17, 24, 39, 0.04);
    color: var(--v2-text);
}

#novaComandaModal .btn-check:checked + .btn {
    background: #ffffff;
    border-color: var(--v2-card-border);
    color: var(--v2-text);
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.08);
}

#novaComandaModal .btn-check:focus-visible + .btn {
    box-shadow: var(--cm-ring);
}

/* Cliente: busca + botão de cadastro rápido grudados */
#novaComandaModal .input-group-cliente-comanda {
    flex-wrap: nowrap;
}

#novaComandaModal .comanda-client-search-input {
    padding-right: 36px;
    border-right: 0;
    border-radius: 8px 0 0 8px;
}

#novaComandaModal .comanda-client-search-input:focus {
    border-right: 1px solid var(--primary-color, #007bff);
}

#novaComandaModal .comanda-client-search-input.has-selection {
    border-color: rgba(var(--primary-r, 0), var(--primary-g, 123), var(--primary-b, 255), 0.5);
}

#novaComandaModal .comanda-client-search-arrow {
    color: var(--v2-muted);
    font-size: 11px;
}

#novaComandaModal #btnNovoClienteRapido {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    min-height: 40px;
    padding: 0;
    border: 1px solid var(--v2-card-border);
    border-radius: 0 8px 8px 0;
    background: #ffffff;
    color: #16a34a;
    box-shadow: none;
}

#novaComandaModal #btnNovoClienteRapido:hover {
    background: #f0fdf4;
    border-color: #bbe5c8;
}

#novaComandaModal .comanda-client-search-dropdown {
    padding: 4px;
    border: 1px solid var(--v2-card-border);
    border-radius: 10px;
    background: #ffffff;
    box-shadow: 0 12px 28px rgba(16, 24, 40, 0.12);
    scrollbar-color: #d5d9e0 transparent;
}

#novaComandaModal .comanda-client-option {
    min-height: 48px;
    padding: 8px 10px;
    border-bottom: 0;
    border-radius: 7px;
}

#novaComandaModal .comanda-client-option + .comanda-client-option {
    margin-top: 2px;
}

#novaComandaModal .comanda-client-option:hover,
#novaComandaModal .comanda-client-option.highlighted {
    background: var(--v2-surface);
}

#novaComandaModal .comanda-client-option.selected {
    background: rgba(var(--primary-r, 0), var(--primary-g, 123), var(--primary-b, 255), 0.08);
}

#novaComandaModal .comanda-client-option-name {
    color: var(--v2-text);
    font-size: 14px;
    font-weight: 500;
}

#novaComandaModal .comanda-client-option-name mark {
    padding: 0 1px;
    border-radius: 3px;
    background: rgba(var(--primary-r, 0), var(--primary-g, 123), var(--primary-b, 255), 0.2);
}

#novaComandaModal .comanda-client-option-meta {
    color: var(--v2-muted);
    font-size: 12.5px;
}

#novaComandaModal .comanda-client-option-check {
    font-size: 12px;
}

#novaComandaModal :is(.comanda-client-empty, .comanda-client-no-results) {
    color: var(--v2-muted);
    font-size: 13.5px;
}

/* ========================================
   CADASTRO RÁPIDO DE CLIENTE
   ======================================== */
#novoClienteRapidoModal .alert {
    margin-bottom: 0;
}

/* ========================================
   VER COMANDA (detalhes)
   Seções em cards brancos; cada uma com sua cor só no ícone.
   ======================================== */
#visualizarComandaModal .modal-body {
    padding: 20px var(--m-pad-x);
}

#visualizarComandaModal :is(.comanda-info-section, .comanda-content-card, .resumo-financeiro-card, .pagamentos-card, .produtos-card, .comanda-package-summary-card) {
    --cm-sec: var(--primary-color, #007bff);
    margin-bottom: 0;
    padding: 16px;
    background: #ffffff;
    border: 1px solid var(--v2-card-border);
    border-radius: 10px;
    box-shadow: none;
    color: var(--v2-text);
    transform: none;
    animation: none;
}

#visualizarComandaModal .comanda-info-section { margin-bottom: 16px; }
#visualizarComandaModal .comanda-content-card:has(> h6 .fa-cut) { --cm-sec: #2f8fce; }
#visualizarComandaModal .comanda-content-card:has(> h6 .fa-tags) { --cm-sec: #e0508f; }
#visualizarComandaModal .resumo-financeiro-card { --cm-sec: #16a34a; }
#visualizarComandaModal .pagamentos-card { --cm-sec: #3b82f6; }
#visualizarComandaModal .produtos-card { --cm-sec: #f59e0b; }

#visualizarComandaModal :is(.comanda-content-card, .resumo-financeiro-card, .pagamentos-card, .produtos-card) {
    height: 100%;
}

#visualizarComandaModal .comanda-content-card:hover {
    transform: none;
    box-shadow: none;
}

#visualizarComandaModal :is(.comanda-info-section, .comanda-content-card, .resumo-financeiro-card, .pagamentos-card, .produtos-card) h6,
#visualizarComandaModal .modal-body > div > .mt-3 > h6 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 10px !important;
    color: var(--v2-text) !important;
    font-size: 14.5px;
    font-weight: 500 !important;
    letter-spacing: -0.005em;
}

#visualizarComandaModal :is(.comanda-info-section, .comanda-content-card, .resumo-financeiro-card, .pagamentos-card, .produtos-card) h6 > i,
#visualizarComandaModal #comandaContent > .mt-3 > h6 > i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: var(--cm-sec);
    color: #ffffff !important;
    font-size: 12.5px;
}

#visualizarComandaModal #comandaContent > .mt-3 > h6 > i {
    background: #0284c7;
}

/* Informações: linhas com divisória */
#visualizarComandaModal .comanda-info-table td {
    padding: 8px 0;
    border-bottom: 1px solid var(--v2-card-divider);
    color: var(--v2-text);
    font-size: 14px;
}

#visualizarComandaModal .comanda-info-table tr:last-child td {
    border-bottom: 0;
    padding-bottom: 0;
}

#visualizarComandaModal .comanda-info-table td:first-child {
    width: 140px;
    color: var(--v2-muted);
    font-size: 13px;
    font-weight: 500;
}

/* Status: chip (cores do Bootstrap de sempre, em tom claro) */
#visualizarComandaModal .comanda-info-table .badge {
    padding: 4px 9px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0;
}

#visualizarComandaModal .comanda-info-table .badge.bg-success { background: #e7f6ec !important; color: #1e7e34; }
#visualizarComandaModal .comanda-info-table .badge.bg-warning { background: #fff6d9 !important; color: #a16207; }
#visualizarComandaModal .comanda-info-table .badge.bg-info { background: #e3f6fa !important; color: #0e7490; }
#visualizarComandaModal .comanda-info-table .badge.bg-danger { background: #fdecec !important; color: #dc2626; }
#visualizarComandaModal .comanda-info-table .badge.bg-secondary { background: #f1f2f4 !important; color: #4b5563; }

/* Listas (serviços, produtos, pagamentos, benefícios): linhas limpas */
#visualizarComandaModal :is(.comanda-content-card, .pagamentos-card, .produtos-card) ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

#visualizarComandaModal :is(.comanda-content-card, .pagamentos-card, .produtos-card) ul li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 2px 12px;
    margin: 0;
    padding: 9px 0;
    background: none;
    border: 0;
    border-bottom: 1px solid var(--v2-card-divider);
    border-radius: 0;
    color: var(--v2-text-2);
    font-size: 14px;
    transform: none;
}

#visualizarComandaModal :is(.comanda-content-card, .pagamentos-card, .produtos-card) ul li:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

#visualizarComandaModal :is(.comanda-content-card, .pagamentos-card, .produtos-card) ul li:hover {
    background: none;
    transform: none;
    border-left-width: 0;
}

#visualizarComandaModal :is(.comanda-content-card, .pagamentos-card, .produtos-card) ul li strong {
    color: var(--v2-text);
    font-weight: 500;
    white-space: nowrap;
}

#visualizarComandaModal .pagamentos-card .small {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--v2-card-divider);
    font-size: 13px;
}

#visualizarComandaModal .pagamentos-card .small + .small {
    margin-top: 4px;
    padding-top: 0;
    border-top: 0;
}

#visualizarComandaModal .pagamentos-card .text-warning {
    color: #b45309 !important;
}

/* Resumo financeiro */
#visualizarComandaModal .resumo-financeiro-card table {
    --bs-table-bg: transparent;
    --bs-table-active-bg: transparent;
    margin: 0;
}

#visualizarComandaModal .resumo-financeiro-card table tr {
    border-bottom: 1px solid var(--v2-card-divider);
}

#visualizarComandaModal .resumo-financeiro-card table td {
    padding: 9px 0;
    border: 0;
    background: none;
    box-shadow: none;
    color: var(--v2-text-2);
    font-size: 14px;
}

#visualizarComandaModal .resumo-financeiro-card table td strong {
    color: var(--v2-text);
}

#visualizarComandaModal .resumo-financeiro-card tr.text-danger td,
#visualizarComandaModal .resumo-financeiro-card tr.text-danger td strong {
    color: #dc2626 !important;
}

#visualizarComandaModal .resumo-financeiro-card tr.text-success td,
#visualizarComandaModal .resumo-financeiro-card tr.text-success td strong {
    color: #15803d !important;
}

#visualizarComandaModal .resumo-financeiro-card .table-active {
    background: none !important;
}

#visualizarComandaModal .resumo-financeiro-card .table-active td {
    padding-top: 12px !important;
    padding-bottom: 0 !important;
    color: var(--v2-text);
    font-size: 14px;
}

#visualizarComandaModal .resumo-financeiro-card .table-active .text-success {
    color: #15803d !important;
    font-size: 20px !important;
    font-weight: 500;
    letter-spacing: -0.01em;
}

/* Espaço entre as linhas de cards */
#visualizarComandaModal #comandaContent > .row.mt-2 {
    margin-top: 0 !important;
}

/* Benefícios: rótulo, valor e data lado a lado (sem espalhar pela linha) */
#visualizarComandaModal .comanda-content-card:has(> h6 .fa-tags) ul li {
    justify-content: flex-start;
    gap: 2px 6px;
}

#visualizarComandaModal #comandaContent > .comanda-content-card.mt-3 {
    height: auto;
    margin-top: 16px !important;
}

#visualizarComandaModal #comandaContent > .mt-3:not(.comanda-content-card) {
    margin-top: 16px !important;
}

#visualizarComandaModal #comandaContent > .mt-3 > .alert {
    margin: 0;
}

/* Plano / assinatura do cliente */
#visualizarComandaModal .comanda-package-summary-wrapper {
    margin: 0 0 16px;
    padding: 0;
    border: 0;
}

#visualizarComandaModal .comanda-package-summary-card {
    margin: 0;
    background: #f7faff;
    border-color: #dce8fb;
    border-left: 3px solid #3b82f6;
}

#visualizarComandaModal .comanda-package-summary-card .summary-label {
    color: var(--v2-muted);
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
}

#visualizarComandaModal .comanda-package-summary-card .summary-header strong {
    color: var(--v2-text);
    font-size: 15px;
    font-weight: 500;
}

#visualizarComandaModal .comanda-package-summary-card .summary-status {
    padding: 3px 8px;
    border-radius: 6px;
    background: #dfeafd;
    color: #1d4ed8;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
}

#visualizarComandaModal .comanda-package-summary-card .summary-metrics {
    gap: 8px;
    margin-top: 12px;
}

#visualizarComandaModal .comanda-package-summary-card .summary-metrics div {
    padding: 10px 12px;
    background: #ffffff;
    border: 1px solid #e3ebf8;
    border-radius: 8px;
}

#visualizarComandaModal .comanda-package-summary-card .summary-metrics strong {
    margin-bottom: 2px;
    color: var(--v2-text);
    font-size: 20px;
    font-weight: 500;
}

#visualizarComandaModal .comanda-package-summary-card .summary-metrics span {
    color: var(--v2-muted);
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: 0;
}

#visualizarComandaModal .comanda-package-summary-card :is(.summary-text, .summary-rights) {
    margin-top: 12px;
    color: var(--v2-text-2);
    font-size: 13.5px;
}

#visualizarComandaModal .comanda-package-summary-card :is(.summary-text, .summary-rights) p {
    margin: 0;
}

#visualizarComandaModal .comanda-package-summary-card .summary-base {
    flex-wrap: wrap;
    gap: 4px 12px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #e3ebf8;
    color: var(--v2-text);
    font-size: 13.5px;
}

/* ========================================
   ESTORNAR COMANDA
   ======================================== */
#estornarComandaModal .estorno-warning {
    gap: 12px;
    padding: 12px 14px;
    background: #fef2f2;
    border: 1px solid #fbd5d5;
    border-left: 3px solid #dc2626;
    border-radius: 8px;
    color: #7f1d1d;
    font-size: 13.5px;
    line-height: 1.5;
}

#estornarComandaModal .estorno-warning > i {
    margin-top: 2px;
    color: #dc2626;
    font-size: 15px;
}

#estornarComandaModal .estorno-warning strong {
    font-size: 14px;
}

#estornarComandaModal .estorno-warning span {
    margin-top: 1px;
    color: #991b1b;
}

#estornarComandaModal .estorno-resumo {
    gap: 8px;
    margin-top: 16px;
}

#estornarComandaModal .estorno-resumo-item {
    padding: 10px 12px;
    background: var(--v2-surface);
    border: 1px solid var(--v2-card-divider);
    border-radius: 10px;
}

#estornarComandaModal .estorno-resumo-item small {
    margin-bottom: 2px;
    color: var(--v2-muted);
    font-size: 12.5px;
    font-weight: 500;
}

#estornarComandaModal .estorno-resumo-item strong {
    color: var(--v2-text);
    font-size: 15px;
    font-weight: 500;
}

#estornarComandaModal .estorno-impactos {
    margin-top: 16px;
}

#estornarComandaModal .estorno-impactos h6 {
    margin-bottom: 8px;
    color: var(--v2-text-2);
    font-size: 13px;
    font-weight: 500;
}

#estornarComandaModal .estorno-impactos-grid {
    gap: 6px;
}

#estornarComandaModal .estorno-impactos-grid span {
    gap: 8px;
    padding: 8px 10px;
    background: #ffffff;
    border: 1px solid var(--v2-card-border);
    border-radius: 8px;
    color: var(--v2-text-2);
    font-size: 13.5px;
    font-weight: 400;
}

#estornarComandaModal .estorno-impactos-grid i {
    color: #dc2626;
    font-size: 13px;
}

#estornarComandaModal #estornoComandaAvisos {
    margin: 16px 0 0;
}

#estornarComandaModal #estornoComandaAvisos ul {
    padding-left: 18px;
}

#estornarComandaModal .form-label.fw-semibold {
    font-weight: 500 !important;
}

#estornarComandaModal .estorno-confirm-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 16px !important;
    padding: 12px 14px;
    background: var(--v2-surface);
    border: 1px solid var(--v2-card-divider);
    border-radius: 10px;
}

#estornarComandaModal .estorno-confirm-check .form-check-input {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin: 1px 0 0;
    float: none;
}

#estornarComandaModal .estorno-confirm-check .form-check-input:checked {
    background-color: #dc2626;
    border-color: #dc2626;
}

#estornarComandaModal .estorno-confirm-check .form-check-label {
    color: var(--v2-text-2);
    font-size: 13.5px;
    line-height: 1.45;
}

/* ========================================
   POPUPS DA COMANDA (components/popup.js)
   "Editar Comanda", "Adicionar Serviço", "Adicionar Produto".
   A casca vem do ui-v2.css; aqui só o conteúdo e a rolagem:
   o texto ocupa a largura toda e rola, e os botões ficam sempre visíveis.
   ======================================== */
#gestao-popup-container .gestao-popup:has(.edit-comanda-simple, .add-service-container) {
    overflow: hidden !important;
}

#gestao-popup-container .gestao-popup:has(.edit-comanda-simple, .add-service-container) .gestao-popup-header {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    column-gap: 12px;
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-bottom: 20px;
}

#gestao-popup-container .gestao-popup:has(.edit-comanda-simple, .add-service-container) .gestao-popup-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--primary-color, #007bff);
    font-size: 14px;
}

#gestao-popup-container .gestao-popup:has(.edit-comanda-simple, .add-service-container) .gestao-popup-content {
    display: contents;
}

#gestao-popup-container .gestao-popup:has(.edit-comanda-simple, .add-service-container) .gestao-popup-title {
    margin: 0;
}

#gestao-popup-container .gestao-popup:has(.edit-comanda-simple, .add-service-container) .gestao-popup-title > i {
    margin-right: 4px;
    color: var(--v2-muted);
    font-size: 14px;
}

#gestao-popup-container .gestao-popup:has(.edit-comanda-simple, .add-service-container) .gestao-popup-message {
    grid-column: 1 / -1;
    width: auto;
    margin-top: 16px;
    /* o cabeçalho reserva 56px à direita para o X; o conteúdo usa essa largura */
    margin-right: -32px;
    padding-top: 16px;
    border-top: 1px solid var(--v2-card-divider);
    color: var(--v2-text);
}

#gestao-popup-container .gestao-popup:has(.edit-comanda-simple, .add-service-container) .gestao-popup-body {
    flex: 0 0 auto;
    overflow: visible !important;
}

#gestao-popup-container .gestao-popup:has(.edit-comanda-simple, .add-service-container) .gestao-popup-actions {
    margin-top: 0;
}

/* ---------- Editar Comanda ---------- */
#gestao-popup-container .edit-comanda-simple {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

#gestao-popup-container .edit-comanda-simple .comanda-info-row {
    gap: 12px;
    margin: 0;
    padding: 12px 14px;
    background: var(--v2-surface);
    border: 1px solid var(--v2-card-divider);
    border-radius: 10px;
}

#gestao-popup-container .edit-comanda-simple .comanda-basic-info {
    color: var(--v2-text);
    font-size: 15px;
    font-weight: 500;
}

#gestao-popup-container .edit-comanda-simple .comanda-basic-info strong {
    color: var(--primary-color, #007bff);
    font-size: 15px;
    font-weight: 500;
}

#gestao-popup-container .edit-comanda-simple .comanda-basic-info .small,
#gestao-popup-container .edit-comanda-simple .comanda-value .small {
    margin-top: 2px;
    color: var(--v2-muted) !important;
    font-size: 13px;
    font-weight: 400;
}

#gestao-popup-container .edit-comanda-simple .value-amount {
    color: #15803d;
    font-size: 19px;
    font-weight: 500;
    letter-spacing: -0.01em;
}

/* Seções: Serviços, Produtos, Observações (todas com o mesmo card) */
#gestao-popup-container .edit-comanda-simple :is(.services-section, .products-section, .obs-section) {
    margin: 0;
    background: #ffffff;
    border: 1px solid var(--v2-card-border);
    border-radius: 10px;
    overflow: hidden;
}

#gestao-popup-container .edit-comanda-simple .section-header {
    gap: 10px;
    min-height: 52px;
    padding: 10px 12px 10px 14px;
    background: #ffffff;
    border-bottom: 1px solid var(--v2-card-divider);
    color: var(--v2-text);
    font-size: 14px;
    font-weight: 500;
}

#gestao-popup-container .edit-comanda-simple .section-header > span {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

#gestao-popup-container .edit-comanda-simple .section-header > span > i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin: 0;
    border-radius: 8px;
    background: var(--primary-color, #007bff);
    color: #ffffff;
    font-size: 12.5px;
}

#gestao-popup-container .edit-comanda-simple .products-section .section-header > span > i { background: #f59e0b; }
#gestao-popup-container .edit-comanda-simple .obs-section .section-header > span > i { background: #0284c7; }

#gestao-popup-container .edit-comanda-simple .section-header .btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    padding: 4px 12px;
    border: 1px solid transparent;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    box-shadow: none;
    transform: none;
}

#gestao-popup-container .edit-comanda-simple .section-header .btn i {
    margin: 0;
    font-size: 12px;
}

#gestao-popup-container .edit-comanda-simple .section-header .btn-primary {
    background: var(--primary-color, #007bff);
    border-color: var(--primary-color, #007bff);
    color: #ffffff;
}

#gestao-popup-container .edit-comanda-simple .section-header .btn-primary:hover {
    background: var(--primary-dark, var(--primary-color, #0062cc));
    border-color: var(--primary-dark, var(--primary-color, #0062cc));
}

/* Produtos > Adicionar: secundário branco. O ícone original tem cor inline
   (azul !important), então ele é trocado pelo mesmo ícone via ::before. */
#gestao-popup-container .edit-comanda-simple .section-header .btn-outline-primary {
    background: #ffffff;
    border-color: var(--v2-card-border);
    color: var(--v2-text-2);
}

#gestao-popup-container .edit-comanda-simple .section-header .btn-outline-primary:hover {
    background: #f3f4f6;
    border-color: #d5d9e0;
    color: var(--v2-text);
}

#gestao-popup-container .edit-comanda-simple .section-header .btn-outline-primary > i {
    display: none;
}

#gestao-popup-container .edit-comanda-simple .section-header .btn-outline-primary::before {
    content: '\f49e';
    color: #d97706;
    font-family: 'Font Awesome 6 Free';
    font-size: 12px;
    font-weight: 900;
}

#gestao-popup-container .edit-comanda-simple :is(.services-list, .products-list) {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 12px 14px;
}

#gestao-popup-container .edit-comanda-simple .service-tag {
    gap: 6px;
    min-height: 32px;
    margin: 0;
    padding: 4px 6px 4px 10px;
    background: var(--v2-surface);
    border: 1px solid var(--v2-card-border);
    border-radius: 8px;
    font-size: 13.5px;
    transform: none;
}

#gestao-popup-container .edit-comanda-simple .service-tag span {
    color: var(--v2-text);
    font-weight: 400;
}

#gestao-popup-container .edit-comanda-simple .remove-service {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    color: #dc2626;
    font-size: 11px;
}

#gestao-popup-container .edit-comanda-simple .remove-service:hover {
    background: #fdecec;
    color: #b91c1c;
}

#gestao-popup-container .edit-comanda-simple :is(.no-services-simple, .no-products-simple) {
    width: 100%;
    margin: 0;
    padding: 10px 0;
    background: none;
    color: var(--v2-muted);
    font-size: 13.5px;
    font-style: normal;
    text-align: left;
}

#gestao-popup-container .edit-comanda-simple .obs-content {
    padding: 12px 14px 14px;
}

#gestao-popup-container .edit-comanda-simple .obs-content textarea {
    min-height: 64px;
    padding: 8px 12px;
    border: 1px solid var(--v2-card-border);
    border-radius: 8px;
    color: var(--v2-text);
    font-size: 14px;
    box-shadow: none;
}

#gestao-popup-container .edit-comanda-simple .obs-content textarea:focus {
    border-color: var(--primary-color, #007bff);
    box-shadow: var(--cm-ring);
}

#gestao-popup-container .edit-comanda-simple .obs-content .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 34px;
    margin-top: 8px !important;
    padding: 5px 14px;
    background: #ffffff;
    border: 1px solid #bbe5c8;
    border-radius: 8px;
    color: #15803d;
    font-size: 13px;
    font-weight: 500;
    box-shadow: none;
}

#gestao-popup-container .edit-comanda-simple .obs-content .btn:hover {
    background: #f0fdf4;
    border-color: #86d3a0;
    color: #166534;
}

/* ---------- Adicionar Serviço / Produto ---------- */
#gestao-popup-container .add-service-container .service-search-container {
    margin-bottom: 12px;
}

#gestao-popup-container .add-service-container .search-icon {
    left: 12px;
    color: var(--v2-muted);
    font-size: 13px;
}

#gestao-popup-container .add-service-container .service-search-input {
    height: 40px;
    padding: 0 12px 0 36px;
    background: #ffffff;
    border: 1px solid var(--v2-card-border);
    border-radius: 8px;
    color: var(--v2-text);
    font-size: 14px;
}

#gestao-popup-container .add-service-container .service-search-input::placeholder {
    color: #9aa1ad;
    font-weight: 400;
}

#gestao-popup-container .add-service-container .service-search-input:focus {
    border-color: var(--primary-color, #007bff);
    box-shadow: var(--cm-ring);
}

#gestao-popup-container .add-service-container .services-list-container {
    max-height: 420px;
    margin-bottom: 0;
    background: #ffffff;
    border: 1px solid var(--v2-card-border);
    border-radius: 10px;
    scrollbar-color: #d5d9e0 transparent;
}

#gestao-popup-container .add-service-container :is(.service-item, .product-item) {
    border-bottom: 1px solid var(--v2-card-divider);
    animation: none;
    transition: background-color 0.15s ease;
}

#gestao-popup-container .add-service-container :is(.service-item, .product-item):last-child {
    border-bottom: 0;
}

#gestao-popup-container .add-service-container :is(.service-item, .product-item):hover {
    background: var(--v2-surface);
}

#gestao-popup-container .add-service-container .service-item-content {
    gap: 12px;
    padding: 12px 14px;
}

#gestao-popup-container .add-service-container .service-item-left {
    min-width: 0;
}

#gestao-popup-container .add-service-container .service-item-name {
    margin-bottom: 2px;
    color: var(--v2-text);
    font-size: 14.5px;
    font-weight: 500;
}

#gestao-popup-container .add-service-container .service-item-description,
#gestao-popup-container .add-service-container .product-stock-info {
    color: var(--v2-muted);
    font-size: 13px;
    line-height: 1.4;
}

#gestao-popup-container .add-service-container .product-stock-info .text-muted {
    color: var(--v2-muted) !important;
}

#gestao-popup-container .add-service-container .product-stock-info .text-danger {
    color: #dc2626 !important;
}

#gestao-popup-container .add-service-container .product-stock-badge {
    padding: 1px 6px;
    border-radius: 5px;
    background: #fdecec;
    font-size: 12px;
    font-weight: 500;
}

#gestao-popup-container .add-service-container .service-item-right {
    gap: 12px;
}

#gestao-popup-container .add-service-container .service-item-price {
    margin: 0;
    color: #15803d;
    font-size: 15px;
    font-weight: 500;
    white-space: nowrap;
}

#gestao-popup-container .add-service-container .service-add-btn {
    justify-content: center;
    gap: 6px;
    min-height: 34px;
    padding: 5px 14px;
    border-radius: 8px;
    background: var(--primary-color, #007bff);
    color: #ffffff;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    box-shadow: none;
    transform: none;
    transition: background-color 0.15s ease;
}

#gestao-popup-container .add-service-container .service-add-btn:hover {
    background: var(--primary-dark, var(--primary-color, #0062cc));
    box-shadow: none;
    transform: none;
}

#gestao-popup-container .add-service-container .service-add-btn i {
    font-size: 11px;
}

#gestao-popup-container .add-service-container .service-add-btn:disabled {
    background: #f1f3f6;
    border: 1px solid var(--v2-card-border);
    color: #9ca3af;
    cursor: not-allowed;
}

#gestao-popup-container .add-service-container .no-services-available {
    padding: 32px 16px;
}

#gestao-popup-container .add-service-container .no-services-icon i {
    color: #16a34a;
    font-size: 28px;
}

#gestao-popup-container .add-service-container .no-services-text h6 {
    margin-bottom: 4px;
    color: var(--v2-text);
    font-size: 15px;
    font-weight: 500;
}

#gestao-popup-container .add-service-container .no-services-text p {
    color: var(--v2-muted);
    font-size: 13.5px;
}

#gestao-popup-container .add-service-container .add-service-footer {
    padding: 10px 0 0;
    border-top: 0;
    text-align: left;
}

#gestao-popup-container .add-service-container .service-counter {
    color: var(--v2-muted);
    font-size: 12.5px;
    font-weight: 500;
}

/* Aviso temporário dentro do popup (showPopupNotification) */
#gestao-popup-container .popup-notification {
    gap: 10px;
    margin-bottom: 12px;
    padding: 10px 12px;
    border: 1px solid transparent;
    border-left-width: 3px;
    border-radius: 8px;
    font-size: 13.5px;
    font-weight: 500;
}

#gestao-popup-container .popup-notification.success { background: #f0fdf4; border-color: #cdebd6; border-left-color: #16a34a; color: #166534; }
#gestao-popup-container .popup-notification.warning { background: #fffbeb; border-color: #fdecc8; border-left-color: #f59e0b; color: #78350f; }
#gestao-popup-container .popup-notification.info { background: #eff6ff; border-color: #dbeafe; border-left-color: #3b82f6; color: #1e3a8a; }

/* Remover serviço (popup de aviso) */
#gestao-popup-container .service-remover .btn {
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
}

/* ========================================
   TABLET E CELULAR (<= 992px)
   ======================================== */
@media (max-width: 992px) {
    #modernMainContent .actions-bar {
        flex-direction: column;
        align-items: stretch;
    }

    #modernMainContent .actions-left,
    #modernMainContent .actions-right {
        justify-content: flex-start;
    }

    #modernMainContent .actions-right .view-toggle {
        width: 100%;
    }

    #modernMainContent .view-btn {
        flex: 1 1 0;
    }
}

/* ========================================
   CELULAR (<= 768px)
   ======================================== */
@media (max-width: 768px) {
    #modernMainContent .top-bar-section,
    #modernMainContent .atendimento-header,
    #modernMainContent .actions-bar,
    #modernMainContent .main-content-section {
        margin-bottom: 16px;
    }

    #modernMainContent .main-content-section > .row {
        --bs-gutter-y: 16px;
    }

    #modernMainContent .main-content-section .col-xl-8,
    #modernMainContent .main-content-section .col-xl-4 {
        margin-bottom: 0;
    }

    /* No celular o painel lateral vem primeiro (ordem já existente) */
    #modernMainContent .main-content-section .col-xl-4 {
        margin-top: 0;
    }

    #modernMainContent .sidebar-widgets {
        gap: 16px;
    }

    /* Data e Relatório lado a lado, sem a caixa cinza em volta */
    #modernMainContent .top-bar-wrapper {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: stretch;
        gap: 8px;
        padding: 0;
        background: none;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    #modernMainContent .date-filter-compact,
    #modernMainContent .quick-actions-compact {
        width: auto;
        min-width: 0;
    }

    #modernMainContent .date-compact-wrapper {
        width: 100%;
        height: 100%;
        min-height: 46px;
        gap: 8px;
        padding: 5px 5px 5px 12px;
        border-radius: 10px;
    }

    #modernMainContent .date-text-compact {
        font-size: 14px;
    }

    #modernMainContent .date-input-compact {
        min-width: 0;
        width: 132px;
        height: 36px;
        padding: 0 8px;
        text-align: left;
    }

    #modernMainContent .action-btn-compact,
    #modernMainContent .action-btn-compact:not(.whatsapp) {
        width: auto;
        height: 100%;
        min-height: 46px;
        padding: 0 14px;
        font-size: 13.5px;
    }

    /* Indicadores: uma linha compacta cada */
    #modernMainContent .atendimento-header > .row {
        --bs-gutter-y: 8px;
        row-gap: 0;
        margin: 0 calc(-.5 * var(--bs-gutter-x));
        margin-top: calc(-1 * var(--bs-gutter-y));
    }

    #modernMainContent .atendimento-header .col-lg-4,
    #modernMainContent .atendimento-header .col-md-6 {
        margin-bottom: 0;
        padding-left: calc(var(--bs-gutter-x) * .5);
        padding-right: calc(var(--bs-gutter-x) * .5);
    }

    #modernMainContent .status-card {
        flex-direction: row;
        align-items: center;
        min-height: 0;
        padding: 12px 14px;
        gap: 12px;
        background: var(--v2-card-bg);
        border-radius: var(--v2-card-radius);
        text-align: left;
    }

    #modernMainContent .status-card::before {
        height: 3px;
    }

    #modernMainContent .status-icon {
        width: 38px;
        height: 38px;
        min-width: 38px;
        margin: 0;
        border-radius: 9px;
        font-size: 15px;
    }

    #modernMainContent .status-info {
        display: flex;
        flex-direction: row-reverse;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        min-width: 0;
    }

    #modernMainContent .status-number {
        margin: 0;
        font-size: 18px;
        white-space: nowrap;
    }

    #modernMainContent .status-label {
        margin: 0;
        font-size: 13.5px;
        letter-spacing: 0;
    }

    /* Barra de ações */
    #modernMainContent .actions-bar {
        gap: 10px;
        padding: 12px;
    }

    #modernMainContent .actions-left {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    #modernMainContent #novaComandaBtn {
        width: 100%;
        min-height: 44px;
        margin: 0;
        padding: 10px 16px;
        border-radius: 8px;
        font-size: 15px;
        letter-spacing: 0;
        text-transform: none;
    }

    #modernMainContent #novaComandaBtn:hover {
        transform: none;
        box-shadow: none;
    }

    #modernMainContent .filter-group {
        width: 100%;
        min-width: 0;
    }

    #modernMainContent #profissionalFilter {
        width: 100%;
        height: 44px;
        min-height: 44px;
        padding: 0 36px;
        font-size: 16px;
        border-radius: 8px;
        background-size: 12px;
        box-shadow: none;
    }

    #modernMainContent .view-btn {
        min-height: 40px;
        padding: 6px 8px;
        gap: 6px;
        font-size: 13.5px;
    }

    /* Lista */
    #modernMainContent .comandas-card,
    #modernMainContent .widget-card {
        margin-bottom: 0;
        border-radius: var(--v2-card-radius);
    }

    #modernMainContent .comandas-card .card-header,
    #modernMainContent .widget-card .card-header {
        min-height: 0;
        padding: 12px 14px;
        background: #ffffff;
    }

    #modernMainContent .comandas-card .card-title,
    #modernMainContent .widget-card .widget-title {
        font-size: 15px;
        white-space: nowrap;
    }

    #modernMainContent .total-badge {
        padding: 3px 8px;
        font-size: 12px;
    }

    #modernMainContent .comandas-container {
        position: relative;
        max-height: 70vh;
        padding: 12px;
    }

    #modernMainContent .comanda-item {
        margin-bottom: 10px;
        padding: 14px 14px 12px 16px;
        border-radius: 10px;
    }

    #modernMainContent .comanda-item::before {
        width: 3px;
    }

    #modernMainContent .comanda-header {
        margin-bottom: 10px;
    }

    #modernMainContent .comanda-numero {
        font-size: 14px;
    }

    #modernMainContent .comanda-cliente {
        font-size: 16px;
    }

    #modernMainContent .comanda-profissional {
        margin-top: 0;
        font-size: 13px;
    }

    #modernMainContent .comanda-status-container {
        flex-direction: column;
        align-items: flex-end;
        gap: 4px;
    }

    #modernMainContent .comanda-status,
    #modernMainContent .badge-editada {
        padding: 3px 8px;
        font-size: 12px;
        border-radius: 6px;
    }

    #modernMainContent .comanda-package-inline {
        margin: 0 0 10px;
        padding: 9px 10px;
    }

    #modernMainContent .comanda-servicos {
        gap: 5px;
        margin-bottom: 10px;
    }

    #modernMainContent .servico-tag {
        padding: 2px 8px;
        font-size: 12.5px;
        border-radius: 6px;
    }

    #modernMainContent .comanda-tempo {
        font-size: 13px;
    }

    #modernMainContent .comanda-valor {
        font-size: 18px;
    }

    #modernMainContent .comanda-footer {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        padding-top: 10px;
    }

    #modernMainContent .comanda-info {
        font-size: 12.5px;
        text-align: left;
    }

    /* Ações: duas por linha; se sobrar uma, ela ocupa a linha toda */
    #modernMainContent .comanda-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
        width: 100%;
    }

    #modernMainContent .comanda-actions .btn {
        width: 100%;
        min-width: 0;
        min-height: 42px;
        margin: 0;
        padding: 6px 8px;
        border-radius: 8px;
        font-size: 13.5px;
        font-weight: 500;
        white-space: nowrap;
    }

    #modernMainContent .comanda-actions .btn:last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }

    #modernMainContent .comanda-item:active,
    #modernMainContent .status-card:active {
        transform: none;
    }

    #modernMainContent .comandas-card .empty-state {
        min-height: 240px;
        padding: 32px 16px;
    }

    /* Atendimentos Hoje: linhas compactas (rótulo à esquerda, número à direita) */
    #modernMainContent .widget-card .card-body {
        padding: 10px 12px 12px;
    }

    #modernMainContent .resumo-atendimentos {
        gap: 6px;
    }

    #modernMainContent .resumo-item {
        gap: 10px;
        padding: 8px 12px 8px 8px;
        border-radius: 10px;
    }

    #modernMainContent .resumo-icon {
        width: 30px;
        height: 30px;
        border-radius: 8px;
        font-size: 13px;
    }

    #modernMainContent .resumo-info {
        display: flex;
        flex-direction: row-reverse;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        min-width: 0;
    }

    #modernMainContent .resumo-numero {
        margin: 0;
        font-size: 17px;
    }

    #modernMainContent .resumo-label {
        min-width: 0;
        font-size: 13.5px;
        line-height: 1.3;
    }

    /* Modais: diálogo com altura limitada e rodapé sempre visível */
    :is(#novaComandaModal, #visualizarComandaModal, #estornarComandaModal, #finalizarComandaModal, #novoClienteRapidoModal).modal {
        padding: 0 !important;
    }

    :is(#novaComandaModal, #visualizarComandaModal, #estornarComandaModal, #finalizarComandaModal, #novoClienteRapidoModal) .modal-dialog {
        width: auto;
        max-width: calc(100vw - 32px);
        margin: 16px auto !important;
    }

    :is(#novaComandaModal, #visualizarComandaModal, #estornarComandaModal, #finalizarComandaModal, #novoClienteRapidoModal) .modal-content {
        display: flex;
        flex-direction: column;
        max-height: calc(100vh - 32px);
        max-height: calc(100dvh - 32px);
        border-radius: 14px;
    }

    :is(#novaComandaModal, #visualizarComandaModal, #estornarComandaModal, #finalizarComandaModal, #novoClienteRapidoModal) :is(.modal-header, .modal-footer) {
        flex-shrink: 0;
    }

    :is(#novaComandaModal, #visualizarComandaModal, #estornarComandaModal, #finalizarComandaModal, #novoClienteRapidoModal) .modal-body {
        flex: 1 1 auto;
        min-height: 0;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

    :is(#novaComandaModal, #visualizarComandaModal, #estornarComandaModal, #finalizarComandaModal, #novoClienteRapidoModal) .modal-header {
        padding: 14px var(--m-pad-x);
    }

    :is(#novaComandaModal, #visualizarComandaModal, #estornarComandaModal, #finalizarComandaModal, #novoClienteRapidoModal) .modal-footer {
        display: flex;
        flex-wrap: wrap;
        padding: 12px var(--m-pad-x);
    }

    :is(#novaComandaModal, #visualizarComandaModal, #estornarComandaModal, #finalizarComandaModal, #novoClienteRapidoModal) .modal-title,
    #visualizarComandaModal #tituloComanda {
        font-size: 16px;
        overflow-wrap: anywhere;
    }

    /* Rodapé: "Cancelar/Fechar/Voltar" compacto + ação principal ocupando o resto */
    :is(#novaComandaModal, #visualizarComandaModal, #estornarComandaModal, #finalizarComandaModal, #novoClienteRapidoModal) .modal-footer .btn {
        flex: 1 1 0;
        width: auto;
        min-height: 44px;
        padding-left: 12px;
        padding-right: 12px;
        white-space: nowrap;
    }

    :is(#novaComandaModal, #visualizarComandaModal, #estornarComandaModal, #finalizarComandaModal, #novoClienteRapidoModal) .modal-footer .btn[data-bs-dismiss="modal"] {
        flex: 0 0 auto;
        padding-left: 16px;
        padding-right: 16px;
    }

    :is(#novaComandaModal, #visualizarComandaModal, #estornarComandaModal, #finalizarComandaModal, #novoClienteRapidoModal) :is(.form-control, .form-select) {
        min-height: 44px;
    }

    #novaComandaModal #btnNovoClienteRapido {
        width: 48px;
        min-height: 44px;
    }

    /* Ver comanda: informações em duas colunas curtas */
    #visualizarComandaModal .comanda-info-table td:first-child {
        width: 112px;
    }

    #visualizarComandaModal .comanda-package-summary-card .summary-metrics {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    #visualizarComandaModal .comanda-package-summary-card .summary-metrics div {
        padding: 8px;
    }

    #visualizarComandaModal .comanda-package-summary-card .summary-metrics strong {
        font-size: 18px;
    }

    #visualizarComandaModal .comanda-package-summary-card .summary-metrics span {
        display: block;
        font-size: 12px;
        line-height: 1.3;
    }

    /* Popups da comanda: textos e toques maiores */
    #gestao-popup-container .gestao-popup:has(.edit-comanda-simple, .add-service-container) .gestao-popup-message {
        margin-right: -34px;
    }

    #gestao-popup-container .edit-comanda-simple {
        min-width: 0;
    }

    #gestao-popup-container .edit-comanda-simple .comanda-info-row {
        flex-direction: row;
        align-items: flex-start;
        gap: 8px 12px;
        padding: 12px;
    }

    #gestao-popup-container .edit-comanda-simple .comanda-basic-info {
        min-width: 0;
        margin: 0;
    }

    #gestao-popup-container .edit-comanda-simple .comanda-basic-info strong {
        display: inline;
        margin: 0;
    }

    #gestao-popup-container .edit-comanda-simple .comanda-value {
        width: auto;
        display: block;
        flex-shrink: 0;
        margin: 0;
        padding: 0;
        border: 0;
        text-align: right;
    }

    #gestao-popup-container .edit-comanda-simple .value-amount {
        font-size: 17px;
    }

    #gestao-popup-container .edit-comanda-simple .section-header .btn {
        min-height: 36px;
        padding: 4px 12px;
        font-size: 13px;
        border-radius: 8px;
    }

    #gestao-popup-container .edit-comanda-simple .section-header .btn:active,
    #gestao-popup-container .edit-comanda-simple .service-tag:active {
        transform: none;
    }

    #gestao-popup-container .edit-comanda-simple .service-tag {
        min-height: 36px;
        margin: 0;
        padding: 4px 6px 4px 10px;
        border-radius: 8px;
        font-size: 14px;
    }

    #gestao-popup-container .edit-comanda-simple .service-tag .remove-service {
        width: 28px;
        height: 28px;
        border-radius: 6px;
        font-size: 12px;
    }

    #gestao-popup-container .edit-comanda-simple .obs-content textarea {
        min-height: 72px;
        font-size: 16px;
        border-radius: 8px;
    }

    #gestao-popup-container .edit-comanda-simple .obs-content .btn {
        width: 100%;
        min-height: 42px;
        font-size: 14px;
        border-radius: 8px;
    }

    #gestao-popup-container .add-service-container .service-search-input {
        height: 44px;
        font-size: 16px;
    }

    #gestao-popup-container .add-service-container .services-list-container {
        max-height: none;
    }

    #gestao-popup-container .add-service-container .service-item-content {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 10px;
        padding: 12px;
    }

    #gestao-popup-container .add-service-container .service-item-right {
        flex-direction: column;
        align-items: flex-end;
        gap: 6px;
    }

    #gestao-popup-container .add-service-container .service-item-name {
        font-size: 14.5px;
    }

    #gestao-popup-container .add-service-container .service-add-btn {
        min-height: 40px;
        padding: 6px 12px;
        font-size: 13.5px;
    }
}

/* ========================================
   CELULAR PEQUENO (<= 576px): modais como folha presa na base
   ======================================== */
@media (max-width: 576px) {
    body[data-support-page="comandas"] #modernMainContent .content-area {
        padding-left: 12px;
        padding-right: 12px;
    }

    body[data-support-page="comandas"] #modernMainContent .content-area > .container-fluid {
        padding-left: 4px;
        padding-right: 4px;
    }

    #modernMainContent .comanda-actions .btn {
        min-height: 42px;
        min-width: 0;
    }

    #modernMainContent .view-btn {
        min-height: 40px;
    }

    :is(#novaComandaModal, #visualizarComandaModal, #estornarComandaModal, #finalizarComandaModal, #novoClienteRapidoModal) {
        --m-pad-x: 16px;
    }

    :is(#novaComandaModal, #visualizarComandaModal, #estornarComandaModal, #finalizarComandaModal, #novoClienteRapidoModal) .modal-dialog,
    :is(#novaComandaModal, #visualizarComandaModal, #estornarComandaModal, #finalizarComandaModal, #novoClienteRapidoModal) .modal-dialog.modal-dialog-centered {
        display: flex;
        align-items: flex-end;
        width: 100%;
        max-width: none;
        height: 100%;
        min-height: 100%;
        margin: 0 !important;
    }

    :is(#novaComandaModal, #visualizarComandaModal, #estornarComandaModal, #finalizarComandaModal, #novoClienteRapidoModal).fade .modal-dialog {
        transform: translateY(32px);
    }

    :is(#novaComandaModal, #visualizarComandaModal, #estornarComandaModal, #finalizarComandaModal, #novoClienteRapidoModal).show .modal-dialog {
        transform: none;
    }

    :is(#novaComandaModal, #visualizarComandaModal, #estornarComandaModal, #finalizarComandaModal, #novoClienteRapidoModal) .modal-content {
        width: 100%;
        max-height: calc(100vh - 8px);
        max-height: calc(100dvh - 8px);
        border: 0;
        border-radius: 16px 16px 0 0;
        box-shadow: 0 -8px 30px rgba(16, 24, 40, 0.16);
    }

    :is(#novaComandaModal, #visualizarComandaModal, #estornarComandaModal, #finalizarComandaModal, #novoClienteRapidoModal) .modal-title,
    #visualizarComandaModal #tituloComanda {
        font-size: 15.5px;
    }

    :is(#novaComandaModal, #visualizarComandaModal, #estornarComandaModal, #finalizarComandaModal, #novoClienteRapidoModal) .modal-title > i,
    #visualizarComandaModal #tituloComanda > i {
        width: 30px;
        height: 30px;
        font-size: 13px;
    }

    #estornarComandaModal .estorno-modal-eyebrow {
        margin-left: 40px;
    }

    :is(#novaComandaModal, #visualizarComandaModal, #estornarComandaModal, #finalizarComandaModal, #novoClienteRapidoModal) .modal-header .btn-close {
        width: 36px;
        height: 36px;
    }

    :is(#novaComandaModal, #visualizarComandaModal, #estornarComandaModal, #finalizarComandaModal, #novoClienteRapidoModal) .modal-body {
        padding: 16px var(--m-pad-x);
    }

    :is(#novaComandaModal, #visualizarComandaModal, #estornarComandaModal, #finalizarComandaModal, #novoClienteRapidoModal) .modal-footer {
        gap: 8px;
        padding: 12px var(--m-pad-x);
        padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    }

    :is(#novaComandaModal, #visualizarComandaModal, #estornarComandaModal, #finalizarComandaModal, #novoClienteRapidoModal) .modal-footer .btn {
        font-size: 14px;
        border-radius: 8px;
    }

    /* Campos com fonte 16px: evita o zoom automático do iPhone ao focar */
    :is(#novaComandaModal, #visualizarComandaModal, #estornarComandaModal, #finalizarComandaModal, #novoClienteRapidoModal) :is(.form-control, .form-select) {
        font-size: 16px;
    }

    :is(#novaComandaModal, #visualizarComandaModal, #estornarComandaModal, #finalizarComandaModal, #novoClienteRapidoModal) .form-text {
        font-size: 13px;
    }

    :is(#novaComandaModal, #visualizarComandaModal, #estornarComandaModal, #finalizarComandaModal, #novoClienteRapidoModal) .row {
        --bs-gutter-x: 12px;
    }

    :is(#novaComandaModal, #visualizarComandaModal, #estornarComandaModal, #finalizarComandaModal, #novoClienteRapidoModal) .mb-3 {
        margin-bottom: 14px !important;
    }

    #novaComandaModal .btn-group > .btn {
        min-height: 38px;
    }

    #novoClienteRapidoModal .alert {
        padding: 10px 12px;
        font-size: 13px;
    }

    /* Ver comanda: quatro botões → "Fechar" e "Editar" em cima, os demais embaixo */
    #visualizarComandaModal .modal-footer {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #visualizarComandaModal .modal-footer .btn,
    #visualizarComandaModal .modal-footer .btn[data-bs-dismiss="modal"] {
        width: 100%;
        padding-left: 8px;
        padding-right: 8px;
    }

    #visualizarComandaModal .modal-body {
        padding: 12px;
    }

    #visualizarComandaModal :is(.comanda-info-section, .comanda-content-card, .resumo-financeiro-card, .pagamentos-card, .produtos-card, .comanda-package-summary-card) {
        padding: 14px;
    }

    #visualizarComandaModal .comanda-info-section {
        margin-bottom: 12px;
    }

    #visualizarComandaModal #comandaContent > .row {
        --bs-gutter-y: 12px;
    }


    #visualizarComandaModal #comandaContent > .mt-3 {
        margin-top: 12px !important;
    }

    #visualizarComandaModal .comanda-package-summary-wrapper {
        margin-bottom: 12px;
    }

    /* Estornar: resumo e impactos compactos */
    #estornarComandaModal .estorno-warning {
        padding: 10px 12px;
        font-size: 13px;
    }

    #estornarComandaModal .estorno-resumo {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin-top: 12px;
    }

    #estornarComandaModal .estorno-resumo-item:last-child {
        grid-column: 1 / -1;
    }

    #estornarComandaModal .estorno-resumo-item strong {
        font-size: 14px;
    }

    #estornarComandaModal .estorno-impactos-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #estornarComandaModal .estorno-impactos-grid span {
        padding: 8px;
        font-size: 13px;
        line-height: 1.3;
    }

    #estornarComandaModal #estornoComandaAvisos {
        margin-top: 12px;
        padding: 10px 12px;
        font-size: 13px;
    }

    /* Popups da comanda viram folha na base, com botões sempre visíveis */
    #gestao-popup-container .gestao-popup-overlay:has(.edit-comanda-simple, .add-service-container) {
        align-items: flex-end !important;
        padding: 0 !important;
    }

    #gestao-popup-container .gestao-popup:has(.edit-comanda-simple, .add-service-container) {
        width: 100% !important;
        max-width: 100% !important;
        max-height: calc(var(--gestao-popup-viewport-height, 100dvh) - 8px) !important;
        margin: 0 !important;
        border: 0;
        border-radius: 16px 16px 0 0;
        box-shadow: 0 -8px 30px rgba(16, 24, 40, 0.16);
    }

    #gestao-popup-container .gestao-popup:has(.edit-comanda-simple, .add-service-container) .gestao-popup-header {
        padding: 14px 56px 16px 16px;
        flex-wrap: nowrap;
    }

    #gestao-popup-container .gestao-popup:has(.edit-comanda-simple, .add-service-container) .gestao-popup-message {
        margin: 14px -40px 0 0;
        padding-top: 14px;
        font-size: 14px;
    }

    #gestao-popup-container .gestao-popup:has(.edit-comanda-simple, .add-service-container) .gestao-popup-actions {
        flex-direction: row;
        padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    }

    #gestao-popup-container .gestao-popup:has(.edit-comanda-simple, .add-service-container) .gestao-popup-btn {
        flex: 1 1 0;
        width: auto;
        min-height: 44px;
    }

    #gestao-popup-container .gestao-popup:has(.edit-comanda-simple, .add-service-container) .gestao-popup-btn.secondary:not(:only-child) {
        flex: 0 0 auto;
        padding-left: 18px;
        padding-right: 18px;
    }
}