@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Michroma&display=swap');

/* Identidade do Cardápio SAG sobre o tema Materialize do portal da loja.
   Segue os tokens do tema moderno do SagWeb (app-moderno.css / login-modern.css), com o vermelho
   do Cardápio SAG no lugar do vermelho do SagWeb. Carregado por último (bundle ~/App_Assets/style/custom),
   então sobrescreve o roxo/laranja antigos do custom.css, do materialize.css e dos CSS de cada tela.
   Só cores, fontes e acabamento: nada de classes novas que o JS dependa. */

:root {
    --cs-primaria: #B51116;
    --cs-primaria-escura: #96090E;
    --cs-primaria-rgb: 181, 17, 22;
    --cs-grafite: #141418;
    --cs-fundo: #f4f5f8;
    --cs-borda: #e8e9ef;
    --cs-texto: #2b2c33;
    --cs-suave: #6f7180;
    --cs-raio: 16px;
    --cs-raio-sm: 10px;
    --cs-sombra: 0 2px 12px rgba(20, 20, 24, 0.05);
    --cs-sombra-alta: 0 12px 32px rgba(20, 20, 24, 0.12);
    --cs-fonte: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
}

/* ===== Base ===== */
html, body, h1, h2, h3, h4, h5, h6, p,
button, input, optgroup, select, textarea,
.text-bedelivery, .text-bedelivery.darken {
    font-family: var(--cs-fonte) !important;
}

/* Ícones de fonte não podem herdar a Inter */
.material-icons {
    font-family: 'Material Icons' !important;
}

body {
    background-color: var(--cs-fundo);
    color: var(--cs-texto);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--cs-texto);
    font-weight: 600;
    letter-spacing: -0.01em;
}

a {
    color: var(--cs-primaria);
}

::selection {
    background: rgba(var(--cs-primaria-rgb), 0.18);
}

.content-wrapper-before {
    background-color: var(--cs-fundo) !important;
}

/* Cores de marca antigas (roxo) */
.backgroung-bedelivery {
    background: linear-gradient(135deg, var(--cs-primaria), var(--cs-primaria-escura)) !important;
    background-color: var(--cs-primaria) !important;
}

.color-bedelivery {
    color: var(--cs-primaria) !important;
}

    .color-bedelivery.darken {
        color: var(--cs-texto) !important;
    }

.cor-btn-default,
.link-ajuda:hover {
    color: var(--cs-primaria) !important;
}

.link-ajuda {
    color: var(--cs-texto);
}

/* ===== Marca (logo SAG + selo "CARDÁPIO") ===== */
.cs-marca {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    line-height: 1;
    vertical-align: middle;
}

.cs-marca-logo {
    display: block;
    height: 46px;
    width: auto;
}

.cs-marca-selo {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    padding: 6px 14px 6px 12px;
    border-radius: 999px;
    background: var(--cs-primaria);
    color: #fff;
    font-family: 'Michroma', var(--cs-fonte);
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    white-space: nowrap;
}

    .cs-marca-selo > span {
        /* compensa o letter-spacing depois da última letra */
        margin-right: -0.3em;
    }

.cs-marca-talheres {
    width: 1.25em;
    height: 1.25em;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Versão compacta da barra superior: logo e selo lado a lado */
.cs-marca-barra {
    flex-direction: row;
    gap: 10px;
}

    .cs-marca-barra .cs-marca-logo {
        height: 24px;
    }

    .cs-marca-barra .cs-marca-selo {
        padding: 4px 9px 4px 8px;
        font-size: 8.5px;
        border-radius: 6px;
    }

.cs-marca-icone {
    display: block;
    width: 34px;
    height: 34px;
    border-radius: 9px;
}

.cs-login-marca {
    display: flex;
    justify-content: center;
    padding: 18px 0 6px;
}

/* ===== Barra superior (grafite) ===== */
.navbar-main,
.navbar-main.darken,
header .navbar-color,
nav.navbar-main.navbar-dark {
    background-color: var(--cs-grafite) !important;
    background-image: radial-gradient(420px 120px at 0% 100%, rgba(var(--cs-primaria-rgb), 0.32), transparent 70%) !important;
    box-shadow: none !important;
}

header .brand-logo {
    display: flex !important;
    align-items: center;
    height: 64px;
    padding: 0 12px !important;
}

    header .brand-logo img.cs-marca-logo {
        height: 24px !important;
    }

    header .brand-logo img.cs-marca-icone {
        height: 34px !important;
    }

header .navbar-main .navbar-list a,
header .navbar-main .navbar-list a i {
    color: rgba(255, 255, 255, 0.85);
}

.navbar .notification-badge {
    background-color: var(--cs-primaria);
    box-shadow: 0 0 10px 0 rgba(var(--cs-primaria-rgb), 0.6);
}

/* Menu horizontal (barra branca abaixo da grafite) */
#horizontal-nav {
    background-color: #fff !important;
    border-bottom: 1px solid var(--cs-borda);
    box-shadow: 0 8px 24px rgba(20, 20, 24, 0.04) !important;
}

    #horizontal-nav ul li a i {
        color: var(--cs-suave);
    }

    #horizontal-nav ul li a span {
        color: var(--cs-texto);
        font-weight: 500;
    }

    #horizontal-nav ul li a:hover i,
    #horizontal-nav ul li.active a i {
        color: var(--cs-primaria) !important;
    }

    #horizontal-nav ul li.active a span {
        color: var(--cs-primaria) !important;
        font-weight: 600;
    }

    #horizontal-nav ul li.active > a {
        box-shadow: inset 0 -3px 0 var(--cs-primaria);
    }

nav ul li.active {
    color: var(--cs-primaria) !important;
}

/* Menu lateral do celular */
.sidenav li.active > a,
.sidenav li > a:hover {
    color: var(--cs-primaria) !important;
}

    .sidenav li.active > a i,
    .sidenav li.active > a span {
        color: var(--cs-primaria) !important;
    }

.sidenav li.active {
    background-color: rgba(var(--cs-primaria-rgb), 0.06) !important;
}

.horizontal-layout .sidenav-main .sidenav-trigger,
.sidenav-trigger.btn-floating {
    background-color: var(--cs-primaria) !important;
}

/* ===== Rodapé ===== */
.page-footer.footer,
.page-footer.footer .footer-copyright {
    background-color: #fff !important;
    color: var(--cs-suave) !important;
    font-size: 0.8125rem;
}

.page-footer.footer {
    border-top: 1px solid var(--cs-borda);
    box-shadow: none !important;
}

    .page-footer.footer a {
        color: var(--cs-texto);
        font-weight: 600;
    }

        .page-footer.footer a:hover {
            color: var(--cs-primaria);
        }

/* ===== Cartões ===== */
.card,
.card-panel {
    border: 1px solid var(--cs-borda);
    border-radius: var(--cs-raio);
    box-shadow: var(--cs-sombra) !important;
}

    .card .card-image img,
    .card .card-image {
        border-radius: var(--cs-raio) var(--cs-raio) 0 0;
    }

    .card .card-title {
        color: var(--cs-texto);
        font-weight: 600;
    }

    .card .card-action {
        border-top-color: var(--cs-borda);
        border-radius: 0 0 var(--cs-raio) var(--cs-raio);
    }

.box-shadow {
    box-shadow: var(--cs-sombra);
}

/* Capa padrão da loja (imagem roxa antiga) em tom grafite */
img[src*="bedelivery_login_v1"] {
    filter: grayscale(1) brightness(0.5);
}

/* ===== Botões ===== */
.btn, .btn-large, .btn-small {
    background-color: var(--cs-primaria);
    border-radius: var(--cs-raio-sm);
    font-weight: 600;
    letter-spacing: 0;
    box-shadow: 0 6px 16px rgba(var(--cs-primaria-rgb), 0.22);
    transition: transform 0.12s ease, box-shadow 0.2s ease, filter 0.2s ease, background-color 0.15s ease;
}

    .btn:hover, .btn-large:hover, .btn-small:hover,
    .btn:focus, .btn-large:focus, .btn-small:focus {
        background-color: var(--cs-primaria-escura);
        box-shadow: 0 8px 22px rgba(var(--cs-primaria-rgb), 0.3);
    }

    .btn:active, .btn-large:active, .btn-small:active {
        transform: scale(0.985);
    }

    .btn.backgroung-bedelivery:hover {
        filter: brightness(1.06);
    }

.btn-floating,
.btn-floating:hover,
.fixed-action-btn .fab-backdrop,
.sidenav li > a.btn-floating:hover {
    background-color: var(--cs-primaria);
}

.btn-flat {
    border-radius: var(--cs-raio-sm);
}

.btn-default-second,
.btn-default-second:hover {
    background-color: var(--cs-suave);
    box-shadow: none;
}

.btn.disabled, .btn:disabled, .btn-floating.disabled, .btn-floating:disabled,
.btn-large.disabled, .btn-small.disabled {
    box-shadow: none !important;
}

/* ===== Abas ===== */
.tabs {
    border-radius: var(--cs-raio-sm);
}

    .tabs .tab a {
        color: var(--cs-suave);
        font-weight: 500;
    }

        .tabs .tab a:hover,
        .tabs .tab a.active,
        .tabs.tabs-bedelivery .tab a:hover,
        .tabs.tabs-bedelivery .tab a.active {
            color: var(--cs-primaria) !important;
        }

        .tabs .tab a:focus.active,
        .tabs .tab a:focus {
            background-color: rgba(var(--cs-primaria-rgb), 0.06);
        }

    .tabs.tabs-bedelivery .tab a {
        color: var(--cs-suave);
    }

    .tabs.tabs-bedelivery .tab.disabled a:hover,
    .tabs.tabs-bedelivery .tab.disabled a.active {
        color: rgba(var(--cs-primaria-rgb), 0.45) !important;
    }

    .tabs .indicator,
    .tabs.tabs-bedelivery .indicator {
        background-color: var(--cs-primaria);
        height: 3px;
        border-radius: 3px 3px 0 0;
    }

        .tabs.tabs-bedelivery .indicator.disabled {
            background-color: rgba(var(--cs-primaria-rgb), 0.45) !important;
        }

.tabs-shadown {
    border: 1px solid var(--cs-borda);
    box-shadow: var(--cs-sombra);
}

/* ===== Campos ===== */
input:not([type]):focus:not([readonly]),
input[type=text]:not(.browser-default):focus:not([readonly]),
input[type=password]:not(.browser-default):focus:not([readonly]),
input[type=email]:not(.browser-default):focus:not([readonly]),
input[type=url]:not(.browser-default):focus:not([readonly]),
input[type=time]:not(.browser-default):focus:not([readonly]),
input[type=date]:not(.browser-default):focus:not([readonly]),
input[type=datetime]:not(.browser-default):focus:not([readonly]),
input[type=datetime-local]:not(.browser-default):focus:not([readonly]),
input[type=tel]:not(.browser-default):focus:not([readonly]),
input[type=number]:not(.browser-default):focus:not([readonly]),
input[type=search]:not(.browser-default):focus:not([readonly]),
textarea.materialize-textarea:focus:not([readonly]),
.select-wrapper input.select-dropdown:focus {
    border-bottom: 1px solid var(--cs-primaria);
    box-shadow: 0 1px 0 0 var(--cs-primaria);
}

input:not([type]):focus:not([readonly]) + label,
input[type=text]:not(.browser-default):focus:not([readonly]) + label,
input[type=password]:not(.browser-default):focus:not([readonly]) + label,
input[type=email]:not(.browser-default):focus:not([readonly]) + label,
input[type=url]:not(.browser-default):focus:not([readonly]) + label,
input[type=time]:not(.browser-default):focus:not([readonly]) + label,
input[type=date]:not(.browser-default):focus:not([readonly]) + label,
input[type=datetime]:not(.browser-default):focus:not([readonly]) + label,
input[type=datetime-local]:not(.browser-default):focus:not([readonly]) + label,
input[type=tel]:not(.browser-default):focus:not([readonly]) + label,
input[type=number]:not(.browser-default):focus:not([readonly]) + label,
input[type=search]:not(.browser-default):focus:not([readonly]) + label,
textarea.materialize-textarea:focus:not([readonly]) + label,
.input-field .prefix.active {
    color: var(--cs-primaria);
}

input.browser-default:focus,
select.browser-default:focus,
textarea.browser-default:focus {
    outline: none;
    border-color: var(--cs-primaria);
    box-shadow: 0 0 0 4px rgba(var(--cs-primaria-rgb), 0.12);
}

.dropdown-content {
    border-radius: var(--cs-raio-sm);
    box-shadow: var(--cs-sombra-alta);
}

    .dropdown-content li > a,
    .dropdown-content li > span {
        color: var(--cs-primaria);
    }

    .dropdown-content li:hover,
    .dropdown-content li.active {
        background-color: rgba(var(--cs-primaria-rgb), 0.06);
    }

/* Os menus do topo usam .grey-text e ficam neutros */
header .dropdown-content li > a.grey-text,
header .dropdown-content li > span.grey-text {
    color: var(--cs-texto) !important;
}

/* ===== Seleção: checkbox, rádio, switch, range ===== */
[type='checkbox']:checked + span:not(.lever):before {
    border-right-color: var(--cs-primaria);
    border-bottom-color: var(--cs-primaria);
}

[type='checkbox']:indeterminate + span:not(.lever):before {
    border-right-color: var(--cs-primaria);
}

[type='checkbox'].filled-in:checked + span:not(.lever):after,
[type='checkbox'].filled-in.tabbed:checked:focus + span:not(.lever):after {
    border-color: var(--cs-primaria);
    background-color: var(--cs-primaria);
}

[type='checkbox'].filled-in:not(:checked) + span:not(.lever):after {
    border-radius: 4px;
}

[type='checkbox'].filled-in:checked + span:not(.lever):after {
    border-radius: 4px;
}

[type='radio']:checked + span:after,
[type='radio'].with-gap:checked + span:before,
[type='radio'].with-gap:checked + span:after {
    border-color: var(--cs-primaria);
}

[type='radio']:checked + span:after,
[type='radio'].with-gap:checked + span:after {
    background-color: var(--cs-primaria);
}

.switch label input[type=checkbox]:checked + .lever {
    background-color: rgba(var(--cs-primaria-rgb), 0.35);
}

.switch label input[type=checkbox]:checked + .lever:after {
    background-color: var(--cs-primaria);
}

.switch label .lever:before,
input[type=checkbox]:checked:not(:disabled) ~ .lever:active::before,
input[type=checkbox]:checked:not(:disabled).tabbed:focus ~ .lever::before {
    background-color: rgba(var(--cs-primaria-rgb), 0.15);
}

/* Switch "situação da loja" mantém o verde de aberta */
.switch.loja-situacao input[type=checkbox]:checked + .lever {
    background-color: rgba(0, 0, 0, .38);
}

.switch.loja-situacao input[type=checkbox]:checked + .lever:after {
    background-color: #60cc53 !important;
}

input[type=range] + .thumb,
input[type=range]::-webkit-slider-thumb {
    background-color: var(--cs-primaria);
}

input[type=range] + .thumb .value {
    color: var(--cs-primaria);
}

input[type=range]::-moz-range-thumb {
    background: var(--cs-primaria);
}

.noUi-connect {
    background: var(--cs-primaria) !important;
}

/* ===== Chips, badges, progresso, spinner ===== */
.chip {
    border-radius: 999px;
    background-color: #f1f2f6;
    color: var(--cs-texto);
}

    .chip:focus,
    .chip.active,
    .chip.selected {
        background-color: var(--cs-primaria);
        color: #fff;
    }

span.badge.new {
    background-color: var(--cs-primaria);
    border-radius: 999px;
}

.progress {
    background-color: rgba(var(--cs-primaria-rgb), 0.15);
}

    .progress .determinate,
    .progress .indeterminate {
        background-color: var(--cs-primaria);
    }

.spinner-layer {
    border-color: var(--cs-primaria);
}

/* ===== Coleções e listas (cardápio, marketing, clientes...) ===== */
.collection {
    border-color: var(--cs-borda);
    border-radius: var(--cs-raio-sm);
}

    .collection .collection-item {
        border-bottom-color: var(--cs-borda);
    }

        .collection .collection-item.active {
            background-color: var(--cs-primaria);
        }

    .collection a.collection-item,
    .secondary-content {
        color: var(--cs-primaria);
    }

li.placeholder,
.collection li.placeholder {
    background-color: rgba(var(--cs-primaria-rgb), 0.35) !important;
}

.collection li.empty,
li.collection-item.selecionada {
    background-color: rgba(var(--cs-primaria-rgb), 0.07) !important;
}

.collection li.collection-item.active,
.collection li.collection-item .active .item-content .list-title,
.collection li.collection-item.active .item-content .list-title,
.title-categoria,
.title-grupo,
.prod-title {
    color: var(--cs-texto) !important;
}

li.collection-item.prod-active .item-action .act-prod {
    background-color: var(--cs-primaria) !important;
}

/* ===== Collapsible ===== */
.collapsible {
    border-color: var(--cs-borda);
    border-radius: var(--cs-raio-sm);
    box-shadow: var(--cs-sombra);
    overflow: hidden;
}

.collapsible-header {
    border-bottom-color: var(--cs-borda);
}

    .collapsible > li.active > .collapsible-header,
    .collapsible-header:focus {
        background-color: rgba(var(--cs-primaria-rgb), 0.05);
    }

    .collapsible > li.active > .collapsible-header i,
    .collapsible > li.active > .collapsible-header .material-icons {
        color: var(--cs-primaria);
    }

.collapsible-body {
    border-bottom-color: var(--cs-borda);
}

/* ===== Modais, tooltips, toasts ===== */
.modal {
    border-radius: 20px;
    box-shadow: var(--cs-sombra-alta);
}

    .modal .modal-footer {
        border-radius: 0 0 20px 20px;
    }

.material-tooltip {
    background-color: var(--cs-grafite);
    border-radius: var(--cs-raio-sm);
}

.toast {
    border-radius: 12px;
    background-color: var(--cs-grafite);
    box-shadow: var(--cs-sombra-alta);
}

.my-toast.simple {
    color: var(--cs-texto) !important;
}

    .my-toast.simple a, .my-toast.simple button {
        color: var(--cs-primaria) !important;
    }

.blockUI.blockMsg.blockPage {
    border-radius: var(--cs-raio) !important;
}

/* ===== SweetAlert ===== */
.swal-modal {
    border-radius: 20px;
    font-family: var(--cs-fonte);
}

.swal-title {
    color: var(--cs-texto);
    font-weight: 600;
}

.swal-text {
    color: var(--cs-suave);
}

.swal-button {
    border-radius: var(--cs-raio-sm);
    font-weight: 600;
}

.swal-button--confirm,
.swal-button--confirm:not([disabled]):hover {
    background-color: var(--cs-primaria) !important;
}

.swal-button--confirm:not([disabled]):hover {
    background-color: var(--cs-primaria-escura) !important;
}

.swal-button--delete,
.swal-button--cancel {
    background-color: #f1f2f6 !important;
    color: var(--cs-texto) !important;
}

    .swal-button--delete:not([disabled]):hover,
    .swal-button--cancel:not([disabled]):hover {
        background-color: #e6e7ee !important;
    }

.swal-button:focus {
    box-shadow: 0 0 0 1px #fff, 0 0 0 3px rgba(var(--cs-primaria-rgb), 0.35);
}

.swal-icon--success__ring {
    border-color: rgba(76, 175, 80, .25);
}

/* ===== DataTables ===== */
.dataTables_wrapper .dataTables_paginate .paginate_button {
    border-radius: 8px !important;
}

    .dataTables_wrapper .dataTables_paginate .paginate_button.current,
    .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
        background: var(--cs-primaria) !important;
        border-color: var(--cs-primaria) !important;
        color: #fff !important;
    }

    .dataTables_wrapper .dataTables_paginate .paginate_button:not(.current):not(.disabled):hover {
        background: rgba(var(--cs-primaria-rgb), 0.08) !important;
        border-color: transparent !important;
        color: var(--cs-primaria) !important;
    }

table.dataTable thead th {
    color: var(--cs-suave);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--cs-borda) !important;
}

table.dataTable tbody tr.selected,
table.dataTable tbody tr.selected > * {
    background-color: rgba(var(--cs-primaria-rgb), 0.08) !important;
    box-shadow: none !important;
    color: var(--cs-texto) !important;
}

table.dataTable.hover tbody tr:hover,
table.dataTable.display tbody tr:hover {
    background-color: rgba(var(--cs-primaria-rgb), 0.04);
}

/* ===== Seletores de data/hora, calendário ===== */
.datepicker-date-display,
.timepicker-digital-display,
.datepicker-table td.is-selected {
    background-color: var(--cs-primaria);
}

.datepicker-table td.is-today,
.datepicker-cancel, .datepicker-clear, .datepicker-today, .datepicker-done,
.timepicker-close {
    color: var(--cs-primaria);
}

.timepicker-tick.active, .timepicker-tick:hover {
    background-color: rgba(var(--cs-primaria-rgb), 0.25);
}

.timepicker-canvas line {
    stroke: var(--cs-primaria);
}

.timepicker-canvas-bearing,
.timepicker-canvas-bg {
    fill: var(--cs-primaria);
}

.fc .fc-button {
    background: var(--cs-primaria);
    border-radius: var(--cs-raio-sm);
}

/* ===== Barras de rolagem (todas as telas usavam o roxo) ===== */
::-webkit-scrollbar-track {
    background-color: transparent !important;
    -webkit-box-shadow: none !important;
}

::-webkit-scrollbar-thumb {
    background-color: #c9cad3 !important;
    -webkit-box-shadow: none !important;
}

    ::-webkit-scrollbar-thumb:hover {
        background-color: var(--cs-suave) !important;
    }

/* ===== Login, recuperação de senha, ativação, fatura ===== */
.login-bedelivery,
.login-bg {
    background:
        radial-gradient(900px 520px at 85% 110%, rgba(var(--cs-primaria-rgb), 0.42), transparent 60%),
        radial-gradient(700px 420px at 0% -10%, rgba(255, 255, 255, 0.07), transparent 60%),
        var(--cs-grafite) !important;
    background-attachment: fixed !important;
}

#login-page .login-card {
    background: #fff !important;
    border: 0;
    border-radius: 20px !important;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35) !important;
    opacity: 1;
}

#login-page .login-card h5 {
    margin: 0.4rem 0 0.2rem;
    margin-left: 0 !important;
    text-align: center;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--cs-texto) !important;
}

#login-page .login-card .input-field .prefix {
    color: #9a9cab;
}

    #login-page .login-card .input-field .prefix.active {
        color: var(--cs-primaria);
    }

#login-page .login-card a:not(.btn) {
    color: var(--cs-primaria);
    font-weight: 500;
}

#login-page .login-card .btn {
    height: 46px;
    line-height: 46px;
    border-radius: 14px;
    box-shadow: 0 10px 24px rgba(var(--cs-primaria-rgb), 0.28);
}

/* ===== Celular ===== */
@media only screen and (max-width: 600px) {
    .cs-marca-logo {
        height: 38px;
    }

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

/* Login: o cartão ficava na metade direita (push-m6); no Cardápio SAG ele fica centralizado. */
body.login-bedelivery > .row > .col.push-m6 {
    left: auto !important;
    float: none !important;
    margin: 0 auto !important;
    max-width: 560px;
}

body.login-bedelivery > .row {
    min-height: 100vh;
    display: flex;
    align-items: center;
    margin: 0;
}