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

:root,
:root[data-theme="light"] {
    --totus-blue: #0754A6;
    --totus-blue-mid: #0754A6;
    --totus-blue-deep: #123F7A;
    --totus-green: #4CC421;
    --totus-green-deep: #299A32;
    --totus-gray: #777777;
    --totus-bg: #FFFFFF;
    --totus-bg-alt: #F5F7F9;
    --totus-surface: #FFFFFF;
    --totus-surface-2: #F5F7F9;
    --totus-border: #D8E1EA;
    --totus-text: #1A1A1A;
    --totus-muted: #777777;
    --totus-field: #FFFFFF;
    --totus-field-border: #C8D4E2;
    --totus-shadow: 0 10px 28px rgba(18, 63, 122, 0.08);
    --status-ok: #299A32;
    --status-faltando: #D92D20;
    --status-sobrando: #F59E0B;
    --bg-main: var(--totus-bg-alt);
    --card-bg: var(--totus-surface);
    --card-border: var(--totus-border);
    --text-main: var(--totus-text);
    --text-muted: var(--totus-muted);
    --accent: var(--totus-green);
    --accent-blue: var(--totus-blue);
    --danger: var(--status-faltando);
    --warning: var(--status-sobrando);
    --field-bg: var(--totus-field);
    --field-border: var(--totus-field-border);
    --delete: var(--status-faltando);
    --delete-hover: #B42318;
}

:root[data-theme="dark"] {
    --totus-bg: #1A1A1A;
    --totus-bg-alt: #202020;
    --totus-surface: #242424;
    --totus-surface-2: #2A2A2A;
    --totus-border: rgba(188, 207, 228, 0.22);
    --totus-text: #F5F7F9;
    --totus-muted: #BDBDBD;
    --totus-field: #1F1F1F;
    --totus-field-border: rgba(188, 207, 228, 0.28);
    --totus-shadow: 0 12px 30px rgba(0, 0, 0, 0.28);
    --status-ok: #4CC421;
    --status-faltando: #F04438;
    --status-sobrando: #FEC84B;
    --bg-main: var(--totus-bg);
    --card-bg: var(--totus-surface);
    --card-border: var(--totus-border);
    --text-main: var(--totus-text);
    --text-muted: var(--totus-muted);
    --accent: var(--totus-green);
    --accent-blue: var(--totus-blue-mid);
    --danger: var(--status-faltando);
    --warning: var(--status-sobrando);
}

* {
    font-family: 'Montserrat', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

body {
    background: var(--totus-bg-alt) !important;
    color: var(--totus-text) !important;
    letter-spacing: 0 !important;
}

:root[data-theme="dark"] body {
    background: var(--totus-bg) !important;
}

.bg-layer,
.bg-decor,
.bg-gradient,
.bg-gradient-2,
.bg-line,
.glow-1,
.glow-2 {
    display: none !important;
}

.header,
.login-card,
.container,
.card,
.card-section,
.table-container,
.modal-box,
.produto-box,
.produto-item,
li,
.empty-state,
.dropdown-content {
    background: var(--totus-surface) !important;
    border-color: var(--totus-border) !important;
    box-shadow: var(--totus-shadow) !important;
}

.container::before,
.login-card::before,
.login-card::after {
    display: none !important;
}

.header {
    backdrop-filter: blur(12px);
}

.brand-word {
    display: inline-flex;
    align-items: baseline;
    gap: 2px;
    color: var(--totus-blue);
    font-weight: 800;
    letter-spacing: 0;
}

.brand-word span {
    color: var(--totus-green-deep);
}

:root[data-theme="dark"] .brand-word {
    color: #D7E8FA;
}

:root[data-theme="dark"] .brand-word span {
    color: var(--totus-green);
}

.brand-subtitle,
.badge-pill,
.badge-mode,
.store-tag,
.loja-tag {
    letter-spacing: 0.14em !important;
}

.loja-tag,
.badge-pill,
.badge-mode,
.store-tag {
    background: rgba(84, 199, 43, 0.12) !important;
    border-color: rgba(84, 199, 43, 0.36) !important;
    color: var(--totus-green-deep) !important;
}

:root[data-theme="dark"] .loja-tag,
:root[data-theme="dark"] .badge-pill,
:root[data-theme="dark"] .badge-mode,
:root[data-theme="dark"] .store-tag {
    color: var(--totus-green) !important;
}

h1,
h2,
h3,
.main-title,
.card-title,
.modal-title,
.produto-nome,
.admin-title-text h2,
.login-title-group h1,
.store-name {
    color: var(--totus-text) !important;
    font-weight: 700 !important;
}

p,
small,
.modal-subtitle,
.helper,
.store-meta,
.login-footer,
.login-extra,
.field-label,
.login-title-group span,
.admin-title-text p,
#mensagem,
label,
.link-back,
.dropdown-content a {
    color: var(--totus-muted) !important;
}

input[type="text"],
input[type="password"],
input[type="number"],
input[type="file"],
select,
input {
    background: var(--totus-field) !important;
    border-color: var(--totus-field-border) !important;
    color: var(--totus-text) !important;
}

input:focus,
select:focus,
.field-control input:focus {
    border-color: var(--totus-blue) !important;
    box-shadow: 0 0 0 3px rgba(11, 79, 158, 0.18) !important;
    background: var(--totus-field) !important;
}

.btn,
button[type="submit"],
.link-back,
.btn-excluir,
.theme-toggle {
    border-radius: 8px !important;
}

.btn-primary,
button[type="submit"] {
    background: var(--totus-blue) !important;
    color: #FFFFFF !important;
    box-shadow: none !important;
}

.btn-primary:hover,
button[type="submit"]:hover {
    background: var(--totus-blue-deep) !important;
}

.btn-blue {
    background: var(--totus-blue) !important;
    color: #FFFFFF !important;
}

:root[data-theme="dark"] .btn-blue {
    background: var(--totus-blue-mid) !important;
}

.btn-danger,
.btn-excluir {
    background: rgba(217, 45, 32, 0.1) !important;
    border: 1px solid rgba(217, 45, 32, 0.28) !important;
    color: var(--status-faltando) !important;
}

.modal-close {
    background: var(--totus-surface-2) !important;
    color: var(--totus-text) !important;
}

th {
    background: var(--totus-surface-2) !important;
    color: var(--totus-muted) !important;
}

td {
    border-color: var(--totus-border) !important;
}

.linha-ok {
    border-left-color: var(--status-ok) !important;
    background: color-mix(in srgb, var(--status-ok) 8%, var(--totus-surface)) !important;
}

.linha-faltando {
    border-left-color: var(--status-faltando) !important;
    background: color-mix(in srgb, var(--status-faltando) 8%, var(--totus-surface)) !important;
}

.linha-sobrando {
    border-left-color: var(--status-sobrando) !important;
    background: color-mix(in srgb, var(--status-sobrando) 10%, var(--totus-surface)) !important;
}

.status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-width: 96px;
    padding: 5px 9px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}

.status-badge::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
}

.status-badge.ok {
    color: var(--status-ok);
    background: color-mix(in srgb, var(--status-ok) 12%, transparent);
}

.status-badge.faltando {
    color: var(--status-faltando);
    background: color-mix(in srgb, var(--status-faltando) 12%, transparent);
}

.status-badge.sobrando {
    color: var(--status-sobrando);
    background: color-mix(in srgb, var(--status-sobrando) 14%, transparent);
}

.icon {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
}

.icon-sm {
    width: 16px;
    height: 16px;
}

.field-icon {
    display: inline-flex !important;
    color: var(--totus-muted) !important;
}

.field-icon .icon {
    width: 17px;
    height: 17px;
}

.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: auto !important;
    min-height: 36px;
    margin: 0 !important;
    padding: 8px 11px !important;
    border: 1px solid var(--totus-border) !important;
    background: var(--totus-surface-2) !important;
    color: var(--totus-text) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    box-shadow: none !important;
}

.theme-toggle:hover,
.link-back:hover,
.dropdown-content a:hover,
li:hover {
    border-color: rgba(11, 79, 158, 0.42) !important;
    background: color-mix(in srgb, var(--totus-blue) 8%, var(--totus-surface)) !important;
}

.theme-toggle .theme-label-dark,
:root[data-theme="dark"] .theme-toggle .theme-label-light {
    display: none;
}

:root[data-theme="dark"] .theme-toggle .theme-label-dark {
    display: inline;
}

.toast-msg.sucesso {
    background: var(--totus-green-deep) !important;
}

.toast-msg.erro {
    background: var(--status-faltando) !important;
}

@media (max-width: 768px) {
    .theme-toggle {
        min-height: 34px;
        padding: 7px 9px !important;
    }
}